@wordpress/components 25.9.1 → 25.10.0

package/build-module/alignment-matrix-control/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["classnames","__","isRTL","useInstanceId","useState","useEffect","Cell","Composite","CompositeGroup","useCompositeState","Root","Row","AlignmentMatrixControlIcon","GRID","getItemId","noop","useBaseId","id","instanceId","AlignmentMatrixControl","className","label","defaultValue","value","onChange","width","props","immutableDefaultValue","baseId","initialCurrentId","composite","currentId","rtl","handleOnChange","nextValue","setCurrentId","classes","createElement","as","role","size","map","cells","index","key","cell","cellId","isActive","onFocus","tabIndex","Icon"],"sources":["@wordpress/components/src/alignment-matrix-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Cell from './cell';\nimport { Composite, CompositeGroup, useCompositeState } from '../composite';\nimport { Root, Row } from './styles/alignment-matrix-control-styles';\nimport AlignmentMatrixControlIcon from './icon';\nimport { GRID, getItemId } from './utils';\nimport type { WordPressComponentProps } from '../context';\nimport type {\n\tAlignmentMatrixControlProps,\n\tAlignmentMatrixControlValue,\n} from './types';\n\nconst noop = () => {};\n\nfunction useBaseId( id?: string ) {\n\tconst instanceId = useInstanceId(\n\t\tAlignmentMatrixControl,\n\t\t'alignment-matrix-control'\n\t);\n\n\treturn id || instanceId;\n}\n\n/**\n *\n * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.\n *\n * ```jsx\n * import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ alignment, setAlignment ] = useState( 'center center' );\n *\n * \treturn (\n * \t\t<AlignmentMatrixControl\n * \t\t\tvalue={ alignment }\n * \t\t\tonChange={ setAlignment }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport function AlignmentMatrixControl( {\n\tclassName,\n\tid,\n\tlabel = __( 'Alignment Matrix Control' ),\n\tdefaultValue = 'center center',\n\tvalue,\n\tonChange = noop,\n\twidth = 92,\n\t...props\n}: WordPressComponentProps< AlignmentMatrixControlProps, 'div', false > ) {\n\tconst [ immutableDefaultValue ] = useState( value ?? defaultValue );\n\tconst baseId = useBaseId( id );\n\tconst initialCurrentId = getItemId( baseId, immutableDefaultValue );\n\n\tconst composite = useCompositeState( {\n\t\tbaseId,\n\t\tcurrentId: initialCurrentId,\n\t\trtl: isRTL(),\n\t} );\n\n\tconst handleOnChange = ( nextValue: AlignmentMatrixControlValue ) => {\n\t\tonChange( nextValue );\n\t};\n\n\tconst { setCurrentId } = composite;\n\n\tuseEffect( () => {\n\t\tif ( typeof value !== 'undefined' ) {\n\t\t\tsetCurrentId( getItemId( baseId, value ) );\n\t\t}\n\t}, [ value, setCurrentId, baseId ] );\n\n\tconst classes = classnames(\n\t\t'component-alignment-matrix-control',\n\t\tclassName\n\t);\n\n\treturn (\n\t\t<Composite\n\t\t\t{ ...props }\n\t\t\t{ ...composite }\n\t\t\taria-label={ label }\n\t\t\tas={ Root }\n\t\t\tclassName={ classes }\n\t\t\trole=\"grid\"\n\t\t\tsize={ width }\n\t\t>\n\t\t\t{ GRID.map( ( cells, index ) => (\n\t\t\t\t<CompositeGroup\n\t\t\t\t\t{ ...composite }\n\t\t\t\t\tas={ Row }\n\t\t\t\t\trole=\"row\"\n\t\t\t\t\tkey={ index }\n\t\t\t\t>\n\t\t\t\t\t{ cells.map( ( cell ) => {\n\t\t\t\t\t\tconst cellId = getItemId( baseId, cell );\n\t\t\t\t\t\tconst isActive = composite.currentId === cellId;\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Cell\n\t\t\t\t\t\t\t\t{ ...composite }\n\t\t\t\t\t\t\t\tid={ cellId }\n\t\t\t\t\t\t\t\tisActive={ isActive }\n\t\t\t\t\t\t\t\tkey={ cell }\n\t\t\t\t\t\t\t\tvalue={ cell }\n\t\t\t\t\t\t\t\tonFocus={ () => handleOnChange( cell ) }\n\t\t\t\t\t\t\t\ttabIndex={ isActive ? 0 : -1 }\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</CompositeGroup>\n\t\t\t) ) }\n\t\t</Composite>\n\t);\n}\n\nAlignmentMatrixControl.Icon = AlignmentMatrixControlIcon;\n\nexport default AlignmentMatrixControl;\n"],"mappings":"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"}
+{"version":3,"names":["classnames","__","isRTL","useInstanceId","Cell","Composite","CompositeRow","useCompositeStore","Root","Row","AlignmentMatrixControlIcon","GRID","getItemId","getItemValue","AlignmentMatrixControl","className","id","label","defaultValue","value","onChange","width","props","baseId","compositeStore","defaultActiveId","activeId","setActiveId","nextActiveId","nextValue","rtl","useState","classes","createElement","store","render","role","size","map","cells","index","key","cell","cellId","isActive","Icon"],"sources":["@wordpress/components/src/alignment-matrix-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Cell from './cell';\nimport { Composite, CompositeRow, useCompositeStore } from '../composite/v2';\nimport { Root, Row } from './styles/alignment-matrix-control-styles';\nimport AlignmentMatrixControlIcon from './icon';\nimport { GRID, getItemId, getItemValue } from './utils';\nimport type { WordPressComponentProps } from '../context';\nimport type { AlignmentMatrixControlProps } from './types';\n\n/**\n *\n * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.\n *\n * ```jsx\n * import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ alignment, setAlignment ] = useState( 'center center' );\n *\n * \treturn (\n * \t\t<AlignmentMatrixControl\n * \t\t\tvalue={ alignment }\n * \t\t\tonChange={ setAlignment }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport function AlignmentMatrixControl( {\n\tclassName,\n\tid,\n\tlabel = __( 'Alignment Matrix Control' ),\n\tdefaultValue = 'center center',\n\tvalue,\n\tonChange,\n\twidth = 92,\n\t...props\n}: WordPressComponentProps< AlignmentMatrixControlProps, 'div', false > ) {\n\tconst baseId = useInstanceId(\n\t\tAlignmentMatrixControl,\n\t\t'alignment-matrix-control',\n\t\tid\n\t);\n\n\tconst compositeStore = useCompositeStore( {\n\t\tdefaultActiveId: getItemId( baseId, defaultValue ),\n\t\tactiveId: getItemId( baseId, value ),\n\t\tsetActiveId: ( nextActiveId ) => {\n\t\t\tconst nextValue = getItemValue( baseId, nextActiveId );\n\t\t\tif ( nextValue ) onChange?.( nextValue );\n\t\t},\n\t\trtl: isRTL(),\n\t} );\n\n\tconst activeId = compositeStore.useState( 'activeId' );\n\n\tconst classes = classnames(\n\t\t'component-alignment-matrix-control',\n\t\tclassName\n\t);\n\n\treturn (\n\t\t<Composite\n\t\t\tstore={ compositeStore }\n\t\t\trender={\n\t\t\t\t<Root\n\t\t\t\t\t{ ...props }\n\t\t\t\t\taria-label={ label }\n\t\t\t\t\tclassName={ classes }\n\t\t\t\t\tid={ baseId }\n\t\t\t\t\trole=\"grid\"\n\t\t\t\t\tsize={ width }\n\t\t\t\t/>\n\t\t\t}\n\t\t>\n\t\t\t{ GRID.map( ( cells, index ) => (\n\t\t\t\t<CompositeRow render={ <Row role=\"row\" /> } key={ index }>\n\t\t\t\t\t{ cells.map( ( cell ) => {\n\t\t\t\t\t\tconst cellId = getItemId( baseId, cell );\n\t\t\t\t\t\tconst isActive = cellId === activeId;\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Cell\n\t\t\t\t\t\t\t\tid={ cellId }\n\t\t\t\t\t\t\t\tisActive={ isActive }\n\t\t\t\t\t\t\t\tkey={ cell }\n\t\t\t\t\t\t\t\tvalue={ cell }\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</CompositeRow>\n\t\t\t) ) }\n\t\t</Composite>\n\t);\n}\n\nAlignmentMatrixControl.Icon = AlignmentMatrixControlIcon;\n\nexport default AlignmentMatrixControl;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,EAAE,EAAEC,KAAK,QAAQ,iBAAiB;AAC3C,SAASC,aAAa,QAAQ,oBAAoB;;AAElD;AACA;AACA;AACA,OAAOC,IAAI,MAAM,QAAQ;AACzB,SAASC,SAAS,EAAEC,YAAY,EAAEC,iBAAiB,QAAQ,iBAAiB;AAC5E,SAASC,IAAI,EAAEC,GAAG,QAAQ,0CAA0C;AACpE,OAAOC,0BAA0B,MAAM,QAAQ;AAC/C,SAASC,IAAI,EAAEC,SAAS,EAAEC,YAAY,QAAQ,SAAS;AAIvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,sBAAsBA,CAAE;EACvCC,SAAS;EACTC,EAAE;EACFC,KAAK,GAAGhB,EAAE,CAAE,0BAA2B,CAAC;EACxCiB,YAAY,GAAG,eAAe;EAC9BC,KAAK;EACLC,QAAQ;EACRC,KAAK,GAAG,EAAE;EACV,GAAGC;AACkE,CAAC,EAAG;EACzE,MAAMC,MAAM,GAAGpB,aAAa,CAC3BW,sBAAsB,EACtB,0BAA0B,EAC1BE,EACD,CAAC;EAED,MAAMQ,cAAc,GAAGjB,iBAAiB,CAAE;IACzCkB,eAAe,EAAEb,SAAS,CAAEW,MAAM,EAAEL,YAAa,CAAC;IAClDQ,QAAQ,EAAEd,SAAS,CAAEW,MAAM,EAAEJ,KAAM,CAAC;IACpCQ,WAAW,EAAIC,YAAY,IAAM;MAChC,MAAMC,SAAS,GAAGhB,YAAY,CAAEU,MAAM,EAAEK,YAAa,CAAC;MACtD,IAAKC,SAAS,EAAGT,QAAQ,GAAIS,SAAU,CAAC;IACzC,CAAC;IACDC,GAAG,EAAE5B,KAAK,CAAC;EACZ,CAAE,CAAC;EAEH,MAAMwB,QAAQ,GAAGF,cAAc,CAACO,QAAQ,CAAE,UAAW,CAAC;EAEtD,MAAMC,OAAO,GAAGhC,UAAU,CACzB,oCAAoC,EACpCe,SACD,CAAC;EAED,OACCkB,aAAA,CAAC5B,SAAS;IACT6B,KAAK,EAAGV,cAAgB;IACxBW,MAAM,EACLF,aAAA,CAACzB,IAAI;MAAA,GACCc,KAAK;MACV,cAAaL,KAAO;MACpBF,SAAS,EAAGiB,OAAS;MACrBhB,EAAE,EAAGO,MAAQ;MACba,IAAI,EAAC,MAAM;MACXC,IAAI,EAAGhB;IAAO,CACd;EACD,GAECV,IAAI,CAAC2B,GAAG,CAAE,CAAEC,KAAK,EAAEC,KAAK,KACzBP,aAAA,CAAC3B,YAAY;IAAC6B,MAAM,EAAGF,aAAA,CAACxB,GAAG;MAAC2B,IAAI,EAAC;IAAK,CAAE,CAAG;IAACK,GAAG,EAAGD;EAAO,GACtDD,KAAK,CAACD,GAAG,CAAII,IAAI,IAAM;IACxB,MAAMC,MAAM,GAAG/B,SAAS,CAAEW,MAAM,EAAEmB,IAAK,CAAC;IACxC,MAAME,QAAQ,GAAGD,MAAM,KAAKjB,QAAQ;IAEpC,OACCO,aAAA,CAAC7B,IAAI;MACJY,EAAE,EAAG2B,MAAQ;MACbC,QAAQ,EAAGA,QAAU;MACrBH,GAAG,EAAGC,IAAM;MACZvB,KAAK,EAAGuB;IAAM,CACd,CAAC;EAEJ,CAAE,CACW,CACb,CACQ,CAAC;AAEd;AAEA5B,sBAAsB,CAAC+B,IAAI,GAAGnC,0BAA0B;AAExD,eAAeI,sBAAsB"}

package/build-module/alignment-matrix-control/utils.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
@@ -26,15 +27,20 @@ export const ALIGNMENT_LABEL = {
 export const ALIGNMENTS = GRID.flat();
 
 /**
- * Parses and transforms an incoming value to better match the alignment values
+ * Normalizes and transforms an incoming value to better match the alignment values
  *
  * @param value An alignment value to parse.
  *
  * @return The parsed value.
  */
-export function transformValue(value) {
-  const nextValue = value === 'center' ? 'center center' : value;
-  return nextValue.replace('-', ' ');
+function normalize(value) {
+  const normalized = value === 'center' ? 'center center' : value;
+
+  // Strictly speaking, this could be `string | null | undefined`,
+  // but will be validated shortly, so we're typecasting to an
+  // `AlignmentMatrixControlValue` to keep TypeScript happy.
+  const transformed = normalized?.replace('-', ' ');
+  return ALIGNMENTS.includes(transformed) ? transformed : undefined;
 }
 
 /**
@@ -46,8 +52,22 @@ export function transformValue(value) {
  * @return The item id.
  */
 export function getItemId(prefixId, value) {
-  const valueId = transformValue(value).replace(' ', '-');
-  return `${prefixId}-${valueId}`;
+  const normalized = normalize(value);
+  if (!normalized) return;
+  const id = normalized.replace(' ', '-');
+  return `${prefixId}-${id}`;
+}
+
+/**
+ * Extracts an item value from its ID
+ *
+ * @param prefixId An ID prefix to remove
+ * @param id       An item ID
+ * @return         The item value
+ */
+export function getItemValue(prefixId, id) {
+  const value = id?.replace(prefixId + '-', '');
+  return normalize(value);
 }
 
 /**
@@ -58,8 +78,9 @@ export function getItemId(prefixId, value) {
  * @return The index of a matching alignment.
  */
 export function getAlignmentIndex(alignment = 'center') {
-  const item = transformValue(alignment);
-  const index = ALIGNMENTS.indexOf(item);
+  const normalized = normalize(alignment);
+  if (!normalized) return undefined;
+  const index = ALIGNMENTS.indexOf(normalized);
   return index > -1 ? index : undefined;
 }
 //# sourceMappingURL=utils.js.map

package/build-module/alignment-matrix-control/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["__","GRID","ALIGNMENT_LABEL","center","ALIGNMENTS","flat","transformValue","value","nextValue","replace","getItemId","prefixId","valueId","getAlignmentIndex","alignment","item","index","indexOf","undefined"],"sources":["@wordpress/components/src/alignment-matrix-control/utils.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n/**\n * Internal dependencies\n */\nimport type { AlignmentMatrixControlValue } from './types';\n\nexport const GRID: AlignmentMatrixControlValue[][] = [\n\t[ 'top left', 'top center', 'top right' ],\n\t[ 'center left', 'center center', 'center right' ],\n\t[ 'bottom left', 'bottom center', 'bottom right' ],\n];\n\n// Stored as map as i18n __() only accepts strings (not variables)\nexport const ALIGNMENT_LABEL: Record< AlignmentMatrixControlValue, string > = {\n\t'top left': __( 'Top Left' ),\n\t'top center': __( 'Top Center' ),\n\t'top right': __( 'Top Right' ),\n\t'center left': __( 'Center Left' ),\n\t'center center': __( 'Center' ),\n\tcenter: __( 'Center' ),\n\t'center right': __( 'Center Right' ),\n\t'bottom left': __( 'Bottom Left' ),\n\t'bottom center': __( 'Bottom Center' ),\n\t'bottom right': __( 'Bottom Right' ),\n};\n\n// Transforms GRID into a flat Array of values.\nexport const ALIGNMENTS = GRID.flat();\n\n/**\n * Parses and transforms an incoming value to better match the alignment values\n *\n * @param value An alignment value to parse.\n *\n * @return The parsed value.\n */\nexport function transformValue( value: AlignmentMatrixControlValue ) {\n\tconst nextValue = value === 'center' ? 'center center' : value;\n\n\treturn nextValue.replace( '-', ' ' ) as AlignmentMatrixControlValue;\n}\n\n/**\n * Creates an item ID based on a prefix ID and an alignment value.\n *\n * @param prefixId An ID to prefix.\n * @param value    An alignment value.\n *\n * @return The item id.\n */\nexport function getItemId(\n\tprefixId: string,\n\tvalue: AlignmentMatrixControlValue\n) {\n\tconst valueId = transformValue( value ).replace( ' ', '-' );\n\n\treturn `${ prefixId }-${ valueId }`;\n}\n\n/**\n * Retrieves the alignment index from a value.\n *\n * @param alignment Value to check.\n *\n * @return The index of a matching alignment.\n */\nexport function getAlignmentIndex(\n\talignment: AlignmentMatrixControlValue = 'center'\n) {\n\tconst item = transformValue( alignment );\n\tconst index = ALIGNMENTS.indexOf( item );\n\n\treturn index > -1 ? index : undefined;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC;AACA;AACA;;AAGA,OAAO,MAAMC,IAAqC,GAAG,CACpD,CAAE,UAAU,EAAE,YAAY,EAAE,WAAW,CAAE,EACzC,CAAE,aAAa,EAAE,eAAe,EAAE,cAAc,CAAE,EAClD,CAAE,aAAa,EAAE,eAAe,EAAE,cAAc,CAAE,CAClD;;AAED;AACA,OAAO,MAAMC,eAA8D,GAAG;EAC7E,UAAU,EAAEF,EAAE,CAAE,UAAW,CAAC;EAC5B,YAAY,EAAEA,EAAE,CAAE,YAAa,CAAC;EAChC,WAAW,EAAEA,EAAE,CAAE,WAAY,CAAC;EAC9B,aAAa,EAAEA,EAAE,CAAE,aAAc,CAAC;EAClC,eAAe,EAAEA,EAAE,CAAE,QAAS,CAAC;EAC/BG,MAAM,EAAEH,EAAE,CAAE,QAAS,CAAC;EACtB,cAAc,EAAEA,EAAE,CAAE,cAAe,CAAC;EACpC,aAAa,EAAEA,EAAE,CAAE,aAAc,CAAC;EAClC,eAAe,EAAEA,EAAE,CAAE,eAAgB,CAAC;EACtC,cAAc,EAAEA,EAAE,CAAE,cAAe;AACpC,CAAC;;AAED;AACA,OAAO,MAAMI,UAAU,GAAGH,IAAI,CAACI,IAAI,CAAC,CAAC;;AAErC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,cAAcA,CAAEC,KAAkC,EAAG;EACpE,MAAMC,SAAS,GAAGD,KAAK,KAAK,QAAQ,GAAG,eAAe,GAAGA,KAAK;EAE9D,OAAOC,SAAS,CAACC,OAAO,CAAE,GAAG,EAAE,GAAI,CAAC;AACrC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,SAASA,CACxBC,QAAgB,EAChBJ,KAAkC,EACjC;EACD,MAAMK,OAAO,GAAGN,cAAc,CAAEC,KAAM,CAAC,CAACE,OAAO,CAAE,GAAG,EAAE,GAAI,CAAC;EAE3D,OAAQ,GAAGE,QAAU,IAAIC,OAAS,EAAC;AACpC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,iBAAiBA,CAChCC,SAAsC,GAAG,QAAQ,EAChD;EACD,MAAMC,IAAI,GAAGT,cAAc,CAAEQ,SAAU,CAAC;EACxC,MAAME,KAAK,GAAGZ,UAAU,CAACa,OAAO,CAAEF,IAAK,CAAC;EAExC,OAAOC,KAAK,GAAG,CAAC,CAAC,GAAGA,KAAK,GAAGE,SAAS;AACtC"}
+{"version":3,"names":["__","GRID","ALIGNMENT_LABEL","center","ALIGNMENTS","flat","normalize","value","normalized","transformed","replace","includes","undefined","getItemId","prefixId","id","getItemValue","getAlignmentIndex","alignment","index","indexOf"],"sources":["@wordpress/components/src/alignment-matrix-control/utils.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { AlignmentMatrixControlValue } from './types';\n\nexport const GRID: AlignmentMatrixControlValue[][] = [\n\t[ 'top left', 'top center', 'top right' ],\n\t[ 'center left', 'center center', 'center right' ],\n\t[ 'bottom left', 'bottom center', 'bottom right' ],\n];\n\n// Stored as map as i18n __() only accepts strings (not variables)\nexport const ALIGNMENT_LABEL: Record< AlignmentMatrixControlValue, string > = {\n\t'top left': __( 'Top Left' ),\n\t'top center': __( 'Top Center' ),\n\t'top right': __( 'Top Right' ),\n\t'center left': __( 'Center Left' ),\n\t'center center': __( 'Center' ),\n\tcenter: __( 'Center' ),\n\t'center right': __( 'Center Right' ),\n\t'bottom left': __( 'Bottom Left' ),\n\t'bottom center': __( 'Bottom Center' ),\n\t'bottom right': __( 'Bottom Right' ),\n};\n\n// Transforms GRID into a flat Array of values.\nexport const ALIGNMENTS = GRID.flat();\n\n/**\n * Normalizes and transforms an incoming value to better match the alignment values\n *\n * @param value An alignment value to parse.\n *\n * @return The parsed value.\n */\nfunction normalize( value?: string | null ) {\n\tconst normalized = value === 'center' ? 'center center' : value;\n\n\t// Strictly speaking, this could be `string | null | undefined`,\n\t// but will be validated shortly, so we're typecasting to an\n\t// `AlignmentMatrixControlValue` to keep TypeScript happy.\n\tconst transformed = normalized?.replace(\n\t\t'-',\n\t\t' '\n\t) as AlignmentMatrixControlValue;\n\n\treturn ALIGNMENTS.includes( transformed ) ? transformed : undefined;\n}\n\n/**\n * Creates an item ID based on a prefix ID and an alignment value.\n *\n * @param prefixId An ID to prefix.\n * @param value    An alignment value.\n *\n * @return The item id.\n */\nexport function getItemId(\n\tprefixId: string,\n\tvalue?: AlignmentMatrixControlValue\n) {\n\tconst normalized = normalize( value );\n\tif ( ! normalized ) return;\n\n\tconst id = normalized.replace( ' ', '-' );\n\treturn `${ prefixId }-${ id }`;\n}\n\n/**\n * Extracts an item value from its ID\n *\n * @param prefixId An ID prefix to remove\n * @param id       An item ID\n * @return         The item value\n */\nexport function getItemValue( prefixId: string, id?: string | null ) {\n\tconst value = id?.replace( prefixId + '-', '' );\n\treturn normalize( value );\n}\n\n/**\n * Retrieves the alignment index from a value.\n *\n * @param alignment Value to check.\n *\n * @return The index of a matching alignment.\n */\nexport function getAlignmentIndex(\n\talignment: AlignmentMatrixControlValue = 'center'\n) {\n\tconst normalized = normalize( alignment );\n\tif ( ! normalized ) return undefined;\n\n\tconst index = ALIGNMENTS.indexOf( normalized );\n\treturn index > -1 ? index : undefined;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;;AAGA,OAAO,MAAMC,IAAqC,GAAG,CACpD,CAAE,UAAU,EAAE,YAAY,EAAE,WAAW,CAAE,EACzC,CAAE,aAAa,EAAE,eAAe,EAAE,cAAc,CAAE,EAClD,CAAE,aAAa,EAAE,eAAe,EAAE,cAAc,CAAE,CAClD;;AAED;AACA,OAAO,MAAMC,eAA8D,GAAG;EAC7E,UAAU,EAAEF,EAAE,CAAE,UAAW,CAAC;EAC5B,YAAY,EAAEA,EAAE,CAAE,YAAa,CAAC;EAChC,WAAW,EAAEA,EAAE,CAAE,WAAY,CAAC;EAC9B,aAAa,EAAEA,EAAE,CAAE,aAAc,CAAC;EAClC,eAAe,EAAEA,EAAE,CAAE,QAAS,CAAC;EAC/BG,MAAM,EAAEH,EAAE,CAAE,QAAS,CAAC;EACtB,cAAc,EAAEA,EAAE,CAAE,cAAe,CAAC;EACpC,aAAa,EAAEA,EAAE,CAAE,aAAc,CAAC;EAClC,eAAe,EAAEA,EAAE,CAAE,eAAgB,CAAC;EACtC,cAAc,EAAEA,EAAE,CAAE,cAAe;AACpC,CAAC;;AAED;AACA,OAAO,MAAMI,UAAU,GAAGH,IAAI,CAACI,IAAI,CAAC,CAAC;;AAErC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,SAASA,CAAEC,KAAqB,EAAG;EAC3C,MAAMC,UAAU,GAAGD,KAAK,KAAK,QAAQ,GAAG,eAAe,GAAGA,KAAK;;EAE/D;EACA;EACA;EACA,MAAME,WAAW,GAAGD,UAAU,EAAEE,OAAO,CACtC,GAAG,EACH,GACD,CAAgC;EAEhC,OAAON,UAAU,CAACO,QAAQ,CAAEF,WAAY,CAAC,GAAGA,WAAW,GAAGG,SAAS;AACpE;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,SAASA,CACxBC,QAAgB,EAChBP,KAAmC,EAClC;EACD,MAAMC,UAAU,GAAGF,SAAS,CAAEC,KAAM,CAAC;EACrC,IAAK,CAAEC,UAAU,EAAG;EAEpB,MAAMO,EAAE,GAAGP,UAAU,CAACE,OAAO,CAAE,GAAG,EAAE,GAAI,CAAC;EACzC,OAAQ,GAAGI,QAAU,IAAIC,EAAI,EAAC;AAC/B;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,YAAYA,CAAEF,QAAgB,EAAEC,EAAkB,EAAG;EACpE,MAAMR,KAAK,GAAGQ,EAAE,EAAEL,OAAO,CAAEI,QAAQ,GAAG,GAAG,EAAE,EAAG,CAAC;EAC/C,OAAOR,SAAS,CAAEC,KAAM,CAAC;AAC1B;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASU,iBAAiBA,CAChCC,SAAsC,GAAG,QAAQ,EAChD;EACD,MAAMV,UAAU,GAAGF,SAAS,CAAEY,SAAU,CAAC;EACzC,IAAK,CAAEV,UAAU,EAAG,OAAOI,SAAS;EAEpC,MAAMO,KAAK,GAAGf,UAAU,CAACgB,OAAO,CAAEZ,UAAW,CAAC;EAC9C,OAAOW,KAAK,GAAG,CAAC,CAAC,GAAGA,KAAK,GAAGP,SAAS;AACtC"}

package/build-module/circular-option-picker/circular-option-picker-option.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { forwardRef, useContext, useEffect } from '@wordpress/element';
+import { forwardRef, useContext } from '@wordpress/element';
 import { Icon, check } from '@wordpress/icons';
 
 /**
@@ -15,9 +15,8 @@ import { Icon, check } from '@wordpress/icons';
  */
 import { CircularOptionPickerContext } from './circular-option-picker-context';
 import Button from '../button';
-import { CompositeItem } from '../composite';
+import { CompositeItem } from '../composite/v2';
 import Tooltip from '../tooltip';
-const hasSelectedOption = new Map();
 function UnforwardedOptionAsButton(props, forwardedRef) {
   const {
     isPressed,
@@ -34,39 +33,22 @@ function UnforwardedOptionAsOption(props, forwardedRef) {
   const {
     id,
     isSelected,
-    context,
+    compositeStore,
     ...additionalProps
   } = props;
-  const {
-    isComposite,
-    ..._compositeState
-  } = context;
-  const compositeState = _compositeState;
-  const {
-    baseId,
-    currentId,
-    setCurrentId
-  } = compositeState;
-  useEffect(() => {
-    // If we call `setCurrentId` here, it doesn't update for other
-    // Option renders in the same pass. So we have to store our own
-    // map to make sure that we only set the first selected option.
-    // We still need to check `currentId` because the control will
-    // update this as the user moves around, and that state should
-    // be maintained as the group gains and loses focus.
-    if (isSelected && !currentId && !hasSelectedOption.get(baseId)) {
-      hasSelectedOption.set(baseId, true);
-      setCurrentId(id);
-    }
-  }, [baseId, currentId, id, isSelected, setCurrentId]);
+  const activeId = compositeStore.useState('activeId');
+  if (isSelected && !activeId) {
+    compositeStore.setActiveId(id);
+  }
   return createElement(CompositeItem, {
-    ...additionalProps,
-    ...compositeState,
-    as: Button,
-    id: id,
-    role: "option",
-    "aria-selected": !!isSelected,
-    ref: forwardedRef
+    render: createElement(Button, {
+      ...additionalProps,
+      role: "option",
+      "aria-selected": !!isSelected,
+      ref: forwardedRef
+    }),
+    store: compositeStore,
+    id: id
   });
 }
 const OptionAsOption = forwardRef(UnforwardedOptionAsOption);
@@ -77,20 +59,19 @@ export function Option({
   tooltipText,
   ...additionalProps
 }) {
-  const compositeContext = useContext(CircularOptionPickerContext);
   const {
-    isComposite,
-    baseId
-  } = compositeContext;
+    baseId,
+    compositeStore
+  } = useContext(CircularOptionPickerContext);
   const id = useInstanceId(Option, baseId || 'components-circular-option-picker__option');
   const commonProps = {
     id,
     className: 'components-circular-option-picker__option',
     ...additionalProps
   };
-  const optionControl = isComposite ? createElement(OptionAsOption, {
+  const optionControl = compositeStore ? createElement(OptionAsOption, {
     ...commonProps,
-    context: compositeContext,
+    compositeStore: compositeStore,
     isSelected: isSelected
   }) : createElement(OptionAsButton, {
     ...commonProps,

package/build-module/circular-option-picker/circular-option-picker-option.js.map

@@ -1 +1 @@
-{"version":3,"names":["classnames","useInstanceId","forwardRef","useContext","useEffect","Icon","check","CircularOptionPickerContext","Button","CompositeItem","Tooltip","hasSelectedOption","Map","UnforwardedOptionAsButton","props","forwardedRef","isPressed","additionalProps","createElement","ref","OptionAsButton","UnforwardedOptionAsOption","id","isSelected","context","isComposite","_compositeState","compositeState","baseId","currentId","setCurrentId","get","set","as","role","OptionAsOption","Option","className","selectedIconProps","tooltipText","compositeContext","commonProps","optionControl","text","icon"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker-option.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useContext, useEffect } from '@wordpress/element';\nimport { Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport Button from '../button';\nimport { CompositeItem } from '../composite';\nimport Tooltip from '../tooltip';\nimport type {\n\tOptionProps,\n\tCircularOptionPickerCompositeState,\n\tCircularOptionPickerContextProps,\n} from './types';\n\nconst hasSelectedOption = new Map();\n\nfunction UnforwardedOptionAsButton(\n\tprops: {\n\t\tid?: string;\n\t\tclassName?: string;\n\t\tisPressed?: boolean;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { isPressed, ...additionalProps } = props;\n\treturn (\n\t\t<Button\n\t\t\t{ ...additionalProps }\n\t\t\taria-pressed={ isPressed }\n\t\t\tref={ forwardedRef }\n\t\t></Button>\n\t);\n}\n\nconst OptionAsButton = forwardRef( UnforwardedOptionAsButton );\n\nfunction UnforwardedOptionAsOption(\n\tprops: {\n\t\tid: string;\n\t\tclassName?: string;\n\t\tisSelected?: boolean;\n\t\tcontext: CircularOptionPickerContextProps;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { id, isSelected, context, ...additionalProps } = props;\n\tconst { isComposite, ..._compositeState } = context;\n\tconst compositeState =\n\t\t_compositeState as CircularOptionPickerCompositeState;\n\tconst { baseId, currentId, setCurrentId } = compositeState;\n\n\tuseEffect( () => {\n\t\t// If we call `setCurrentId` here, it doesn't update for other\n\t\t// Option renders in the same pass. So we have to store our own\n\t\t// map to make sure that we only set the first selected option.\n\t\t// We still need to check `currentId` because the control will\n\t\t// update this as the user moves around, and that state should\n\t\t// be maintained as the group gains and loses focus.\n\t\tif ( isSelected && ! currentId && ! hasSelectedOption.get( baseId ) ) {\n\t\t\thasSelectedOption.set( baseId, true );\n\t\t\tsetCurrentId( id );\n\t\t}\n\t}, [ baseId, currentId, id, isSelected, setCurrentId ] );\n\n\treturn (\n\t\t<CompositeItem\n\t\t\t{ ...additionalProps }\n\t\t\t{ ...compositeState }\n\t\t\tas={ Button }\n\t\t\tid={ id }\n\t\t\trole=\"option\"\n\t\t\taria-selected={ !! isSelected }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n}\n\nconst OptionAsOption = forwardRef( UnforwardedOptionAsOption );\n\nexport function Option( {\n\tclassName,\n\tisSelected,\n\tselectedIconProps = {},\n\ttooltipText,\n\t...additionalProps\n}: OptionProps ) {\n\tconst compositeContext = useContext( CircularOptionPickerContext );\n\tconst { isComposite, baseId } = compositeContext;\n\tconst id = useInstanceId(\n\t\tOption,\n\t\tbaseId || 'components-circular-option-picker__option'\n\t);\n\n\tconst commonProps = {\n\t\tid,\n\t\tclassName: 'components-circular-option-picker__option',\n\t\t...additionalProps,\n\t};\n\n\tconst optionControl = isComposite ? (\n\t\t<OptionAsOption\n\t\t\t{ ...commonProps }\n\t\t\tcontext={ compositeContext }\n\t\t\tisSelected={ isSelected }\n\t\t/>\n\t) : (\n\t\t<OptionAsButton { ...commonProps } isPressed={ isSelected } />\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'components-circular-option-picker__option-wrapper'\n\t\t\t) }\n\t\t>\n\t\t\t{ tooltipText ? (\n\t\t\t\t<Tooltip text={ tooltipText }>{ optionControl }</Tooltip>\n\t\t\t) : (\n\t\t\t\toptionControl\n\t\t\t) }\n\t\t\t{ isSelected && <Icon icon={ check } { ...selectedIconProps } /> }\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"names":["classnames","useInstanceId","forwardRef","useContext","Icon","check","CircularOptionPickerContext","Button","CompositeItem","Tooltip","UnforwardedOptionAsButton","props","forwardedRef","isPressed","additionalProps","createElement","ref","OptionAsButton","UnforwardedOptionAsOption","id","isSelected","compositeStore","activeId","useState","setActiveId","render","role","store","OptionAsOption","Option","className","selectedIconProps","tooltipText","baseId","commonProps","optionControl","text","icon"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker-option.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useContext } from '@wordpress/element';\nimport { Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport Button from '../button';\nimport { CompositeItem } from '../composite/v2';\nimport Tooltip from '../tooltip';\nimport type { OptionProps, CircularOptionPickerCompositeStore } from './types';\n\nfunction UnforwardedOptionAsButton(\n\tprops: {\n\t\tid?: string;\n\t\tclassName?: string;\n\t\tisPressed?: boolean;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { isPressed, ...additionalProps } = props;\n\treturn (\n\t\t<Button\n\t\t\t{ ...additionalProps }\n\t\t\taria-pressed={ isPressed }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n}\n\nconst OptionAsButton = forwardRef( UnforwardedOptionAsButton );\n\nfunction UnforwardedOptionAsOption(\n\tprops: {\n\t\tid: string;\n\t\tclassName?: string;\n\t\tisSelected?: boolean;\n\t\tcompositeStore: CircularOptionPickerCompositeStore;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { id, isSelected, compositeStore, ...additionalProps } = props;\n\tconst activeId = compositeStore.useState( 'activeId' );\n\n\tif ( isSelected && ! activeId ) {\n\t\tcompositeStore.setActiveId( id );\n\t}\n\n\treturn (\n\t\t<CompositeItem\n\t\t\trender={\n\t\t\t\t<Button\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\trole=\"option\"\n\t\t\t\t\taria-selected={ !! isSelected }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t/>\n\t\t\t}\n\t\t\tstore={ compositeStore }\n\t\t\tid={ id }\n\t\t/>\n\t);\n}\n\nconst OptionAsOption = forwardRef( UnforwardedOptionAsOption );\n\nexport function Option( {\n\tclassName,\n\tisSelected,\n\tselectedIconProps = {},\n\ttooltipText,\n\t...additionalProps\n}: OptionProps ) {\n\tconst { baseId, compositeStore } = useContext(\n\t\tCircularOptionPickerContext\n\t);\n\tconst id = useInstanceId(\n\t\tOption,\n\t\tbaseId || 'components-circular-option-picker__option'\n\t);\n\n\tconst commonProps = {\n\t\tid,\n\t\tclassName: 'components-circular-option-picker__option',\n\t\t...additionalProps,\n\t};\n\n\tconst optionControl = compositeStore ? (\n\t\t<OptionAsOption\n\t\t\t{ ...commonProps }\n\t\t\tcompositeStore={ compositeStore }\n\t\t\tisSelected={ isSelected }\n\t\t/>\n\t) : (\n\t\t<OptionAsButton { ...commonProps } isPressed={ isSelected } />\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'components-circular-option-picker__option-wrapper'\n\t\t\t) }\n\t\t>\n\t\t\t{ tooltipText ? (\n\t\t\t\t<Tooltip text={ tooltipText }>{ optionControl }</Tooltip>\n\t\t\t) : (\n\t\t\t\toptionControl\n\t\t\t) }\n\t\t\t{ isSelected && <Icon icon={ check } { ...selectedIconProps } /> }\n\t\t</div>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;AAGnC;AACA;AACA;AACA,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SAASC,UAAU,EAAEC,UAAU,QAAQ,oBAAoB;AAC3D,SAASC,IAAI,EAAEC,KAAK,QAAQ,kBAAkB;;AAE9C;AACA;AACA;AACA,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,OAAOC,MAAM,MAAM,WAAW;AAC9B,SAASC,aAAa,QAAQ,iBAAiB;AAC/C,OAAOC,OAAO,MAAM,YAAY;AAGhC,SAASC,yBAAyBA,CACjCC,KAIC,EACDC,YAAiC,EAChC;EACD,MAAM;IAAEC,SAAS;IAAE,GAAGC;EAAgB,CAAC,GAAGH,KAAK;EAC/C,OACCI,aAAA,CAACR,MAAM;IAAA,GACDO,eAAe;IACpB,gBAAeD,SAAW;IAC1BG,GAAG,EAAGJ;EAAc,CACpB,CAAC;AAEJ;AAEA,MAAMK,cAAc,GAAGf,UAAU,CAAEQ,yBAA0B,CAAC;AAE9D,SAASQ,yBAAyBA,CACjCP,KAKC,EACDC,YAAiC,EAChC;EACD,MAAM;IAAEO,EAAE;IAAEC,UAAU;IAAEC,cAAc;IAAE,GAAGP;EAAgB,CAAC,GAAGH,KAAK;EACpE,MAAMW,QAAQ,GAAGD,cAAc,CAACE,QAAQ,CAAE,UAAW,CAAC;EAEtD,IAAKH,UAAU,IAAI,CAAEE,QAAQ,EAAG;IAC/BD,cAAc,CAACG,WAAW,CAAEL,EAAG,CAAC;EACjC;EAEA,OACCJ,aAAA,CAACP,aAAa;IACbiB,MAAM,EACLV,aAAA,CAACR,MAAM;MAAA,GACDO,eAAe;MACpBY,IAAI,EAAC,QAAQ;MACb,iBAAgB,CAAC,CAAEN,UAAY;MAC/BJ,GAAG,EAAGJ;IAAc,CACpB,CACD;IACDe,KAAK,EAAGN,cAAgB;IACxBF,EAAE,EAAGA;EAAI,CACT,CAAC;AAEJ;AAEA,MAAMS,cAAc,GAAG1B,UAAU,CAAEgB,yBAA0B,CAAC;AAE9D,OAAO,SAASW,MAAMA,CAAE;EACvBC,SAAS;EACTV,UAAU;EACVW,iBAAiB,GAAG,CAAC,CAAC;EACtBC,WAAW;EACX,GAAGlB;AACS,CAAC,EAAG;EAChB,MAAM;IAAEmB,MAAM;IAAEZ;EAAe,CAAC,GAAGlB,UAAU,CAC5CG,2BACD,CAAC;EACD,MAAMa,EAAE,GAAGlB,aAAa,CACvB4B,MAAM,EACNI,MAAM,IAAI,2CACX,CAAC;EAED,MAAMC,WAAW,GAAG;IACnBf,EAAE;IACFW,SAAS,EAAE,2CAA2C;IACtD,GAAGhB;EACJ,CAAC;EAED,MAAMqB,aAAa,GAAGd,cAAc,GACnCN,aAAA,CAACa,cAAc;IAAA,GACTM,WAAW;IAChBb,cAAc,EAAGA,cAAgB;IACjCD,UAAU,EAAGA;EAAY,CACzB,CAAC,GAEFL,aAAA,CAACE,cAAc;IAAA,GAAMiB,WAAW;IAAGrB,SAAS,EAAGO;EAAY,CAAE,CAC7D;EAED,OACCL,aAAA;IACCe,SAAS,EAAG9B,UAAU,CACrB8B,SAAS,EACT,mDACD;EAAG,GAEDE,WAAW,GACZjB,aAAA,CAACN,OAAO;IAAC2B,IAAI,EAAGJ;EAAa,GAAGG,aAAwB,CAAC,GAEzDA,aACA,EACCf,UAAU,IAAIL,aAAA,CAACX,IAAI;IAACiC,IAAI,EAAGhC,KAAO;IAAA,GAAM0B;EAAiB,CAAI,CAC3D,CAAC;AAER"}

package/build-module/circular-option-picker/circular-option-picker.js

@@ -8,14 +8,13 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { useEffect } from '@wordpress/element';
 import { isRTL } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { CircularOptionPickerContext } from './circular-option-picker-context';
-import { Composite, useCompositeState } from '../composite';
+import { Composite, useCompositeStore } from '../composite/v2';
 import { Option } from './circular-option-picker-option';
 import { OptionGroup } from './circular-option-picker-option-group';
 import { ButtonAction, DropdownLinkAction } from './circular-option-picker-actions';
@@ -76,34 +75,13 @@ function ListboxCircularOptionPicker(props) {
     children,
     ...additionalProps
   } = props;
-  const rtl = isRTL();
-  const compositeState = useCompositeState({
-    baseId,
-    loop,
-    rtl
+  const compositeStore = useCompositeStore({
+    focusLoop: loop,
+    rtl: isRTL()
   });
-  const {
-    setBaseId,
-    setLoop,
-    setRTL
-  } = compositeState;
-
-  // These are necessary as `useCompositeState` is sealed after
-  // the first render, so although unlikely to happen, if a state
-  // property should change, we need to process it accordingly.
-
-  useEffect(() => {
-    setBaseId(baseId);
-  }, [setBaseId, baseId]);
-  useEffect(() => {
-    setLoop(loop);
-  }, [setLoop, loop]);
-  useEffect(() => {
-    setRTL(rtl);
-  }, [setRTL, rtl]);
   const compositeContext = {
-    isComposite: true,
-    ...compositeState
+    baseId,
+    compositeStore
   };
   return createElement("div", {
     className: className
@@ -111,7 +89,8 @@ function ListboxCircularOptionPicker(props) {
     value: compositeContext
   }, createElement(Composite, {
     ...additionalProps,
-    ...compositeState,
+    id: baseId,
+    store: compositeStore,
     role: 'listbox'
   }, options), children, actions));
 }
@@ -124,10 +103,10 @@ function ButtonsCircularOptionPicker(props) {
     ...additionalProps
   } = props;
   return createElement("div", {
-    ...additionalProps
+    ...additionalProps,
+    id: baseId
   }, createElement(CircularOptionPickerContext.Provider, {
     value: {
-      isComposite: false,
       baseId
     }
   }, options, children, actions));

package/build-module/circular-option-picker/circular-option-picker.js.map

@@ -1 +1 @@
-{"version":3,"names":["classnames","useInstanceId","useEffect","isRTL","CircularOptionPickerContext","Composite","useCompositeState","Option","OptionGroup","ButtonAction","DropdownLinkAction","ListboxCircularOptionPicker","props","actions","options","baseId","className","loop","children","additionalProps","rtl","compositeState","setBaseId","setLoop","setRTL","compositeContext","isComposite","createElement","Provider","value","role","ButtonsCircularOptionPicker","CircularOptionPicker","asButtons","actionsProp","optionsProp","id","OptionPickerImplementation","undefined"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useEffect } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport { Composite, useCompositeState } from '../composite';\nimport type {\n\tCircularOptionPickerProps,\n\tListboxCircularOptionPickerProps,\n\tButtonsCircularOptionPickerProps,\n} from './types';\nimport { Option } from './circular-option-picker-option';\nimport { OptionGroup } from './circular-option-picker-option-group';\nimport {\n\tButtonAction,\n\tDropdownLinkAction,\n} from './circular-option-picker-actions';\n\n/**\n *`CircularOptionPicker` is a component that displays a set of options as circular buttons.\n *\n * ```jsx\n * import { CircularOptionPicker } from '../circular-option-picker';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ currentColor, setCurrentColor ] = useState();\n * \tconst colors = [\n * \t\t{ color: '#f00', name: 'Red' },\n * \t\t{ color: '#0f0', name: 'Green' },\n * \t\t{ color: '#00f', name: 'Blue' },\n * \t];\n * \tconst colorOptions = (\n * \t\t<>\n * \t\t\t{ colors.map( ( { color, name }, index ) => {\n * \t\t\t\treturn (\n * \t\t\t\t\t<CircularOptionPicker.Option\n * \t\t\t\t\t\tkey={ `${ color }-${ index }` }\n * \t\t\t\t\t\ttooltipText={ name }\n * \t\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n * \t\t\t\t\t\tisSelected={ index === currentColor }\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( index ) }\n * \t\t\t\t\t\taria-label={ name }\n * \t\t\t\t\t/>\n * \t\t\t\t);\n * \t\t\t} ) }\n * \t\t</>\n * \t);\n * \treturn (\n * \t\t<CircularOptionPicker\n * \t\t\t\toptions={ colorOptions }\n * \t\t\t\tactions={\n * \t\t\t\t\t<CircularOptionPicker.ButtonAction\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( undefined ) }\n * \t\t\t\t\t>\n * \t\t\t\t\t\t{ 'Clear' }\n * \t\t\t\t\t</CircularOptionPicker.ButtonAction>\n * \t\t\t\t}\n * \t\t\t/>\n * \t);\n * };\n * ```\n */\n\nfunction ListboxCircularOptionPicker(\n\tprops: ListboxCircularOptionPickerProps\n) {\n\tconst {\n\t\tactions,\n\t\toptions,\n\t\tbaseId,\n\t\tclassName,\n\t\tloop = true,\n\t\tchildren,\n\t\t...additionalProps\n\t} = props;\n\tconst rtl = isRTL();\n\n\tconst compositeState = useCompositeState( { baseId, loop, rtl } );\n\tconst { setBaseId, setLoop, setRTL } = compositeState;\n\n\t// These are necessary as `useCompositeState` is sealed after\n\t// the first render, so although unlikely to happen, if a state\n\t// property should change, we need to process it accordingly.\n\n\tuseEffect( () => {\n\t\tsetBaseId( baseId );\n\t}, [ setBaseId, baseId ] );\n\n\tuseEffect( () => {\n\t\tsetLoop( loop );\n\t}, [ setLoop, loop ] );\n\n\tuseEffect( () => {\n\t\tsetRTL( rtl );\n\t}, [ setRTL, rtl ] );\n\n\tconst compositeContext = {\n\t\tisComposite: true,\n\t\t...compositeState,\n\t};\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<CircularOptionPickerContext.Provider value={ compositeContext }>\n\t\t\t\t<Composite\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\t{ ...compositeState }\n\t\t\t\t\trole={ 'listbox' }\n\t\t\t\t>\n\t\t\t\t\t{ options }\n\t\t\t\t</Composite>\n\t\t\t\t{ children }\n\t\t\t\t{ actions }\n\t\t\t</CircularOptionPickerContext.Provider>\n\t\t</div>\n\t);\n}\n\nfunction ButtonsCircularOptionPicker(\n\tprops: ButtonsCircularOptionPickerProps\n) {\n\tconst { actions, options, children, baseId, ...additionalProps } = props;\n\n\treturn (\n\t\t<div { ...additionalProps }>\n\t\t\t<CircularOptionPickerContext.Provider\n\t\t\t\tvalue={ { isComposite: false, baseId } }\n\t\t\t>\n\t\t\t\t{ options }\n\t\t\t\t{ children }\n\t\t\t\t{ actions }\n\t\t\t</CircularOptionPickerContext.Provider>\n\t\t</div>\n\t);\n}\n\nfunction CircularOptionPicker( props: CircularOptionPickerProps ) {\n\tconst {\n\t\tasButtons,\n\t\tactions: actionsProp,\n\t\toptions: optionsProp,\n\t\tchildren,\n\t\tclassName,\n\t\t...additionalProps\n\t} = props;\n\n\tconst baseId = useInstanceId(\n\t\tCircularOptionPicker,\n\t\t'components-circular-option-picker',\n\t\tadditionalProps.id\n\t);\n\n\tconst OptionPickerImplementation = asButtons\n\t\t? ButtonsCircularOptionPicker\n\t\t: ListboxCircularOptionPicker;\n\n\tconst actions = actionsProp ? (\n\t\t<div className=\"components-circular-option-picker__custom-clear-wrapper\">\n\t\t\t{ actionsProp }\n\t\t</div>\n\t) : undefined;\n\n\tconst options = (\n\t\t<div className={ 'components-circular-option-picker__swatches' }>\n\t\t\t{ optionsProp }\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<OptionPickerImplementation\n\t\t\t{ ...additionalProps }\n\t\t\tbaseId={ baseId }\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-circular-option-picker',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\tactions={ actions }\n\t\t\toptions={ options }\n\t\t>\n\t\t\t{ children }\n\t\t</OptionPickerImplementation>\n\t);\n}\n\nCircularOptionPicker.Option = Option;\nCircularOptionPicker.OptionGroup = OptionGroup;\nCircularOptionPicker.ButtonAction = ButtonAction;\nCircularOptionPicker.DropdownLinkAction = DropdownLinkAction;\n\nexport default CircularOptionPicker;\n"],"mappings":"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"}
+{"version":3,"names":["classnames","useInstanceId","isRTL","CircularOptionPickerContext","Composite","useCompositeStore","Option","OptionGroup","ButtonAction","DropdownLinkAction","ListboxCircularOptionPicker","props","actions","options","baseId","className","loop","children","additionalProps","compositeStore","focusLoop","rtl","compositeContext","createElement","Provider","value","id","store","role","ButtonsCircularOptionPicker","CircularOptionPicker","asButtons","actionsProp","optionsProp","OptionPickerImplementation","undefined"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport { Composite, useCompositeStore } from '../composite/v2';\nimport type {\n\tCircularOptionPickerProps,\n\tListboxCircularOptionPickerProps,\n\tButtonsCircularOptionPickerProps,\n} from './types';\nimport { Option } from './circular-option-picker-option';\nimport { OptionGroup } from './circular-option-picker-option-group';\nimport {\n\tButtonAction,\n\tDropdownLinkAction,\n} from './circular-option-picker-actions';\n\n/**\n *`CircularOptionPicker` is a component that displays a set of options as circular buttons.\n *\n * ```jsx\n * import { CircularOptionPicker } from '../circular-option-picker';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ currentColor, setCurrentColor ] = useState();\n * \tconst colors = [\n * \t\t{ color: '#f00', name: 'Red' },\n * \t\t{ color: '#0f0', name: 'Green' },\n * \t\t{ color: '#00f', name: 'Blue' },\n * \t];\n * \tconst colorOptions = (\n * \t\t<>\n * \t\t\t{ colors.map( ( { color, name }, index ) => {\n * \t\t\t\treturn (\n * \t\t\t\t\t<CircularOptionPicker.Option\n * \t\t\t\t\t\tkey={ `${ color }-${ index }` }\n * \t\t\t\t\t\ttooltipText={ name }\n * \t\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n * \t\t\t\t\t\tisSelected={ index === currentColor }\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( index ) }\n * \t\t\t\t\t\taria-label={ name }\n * \t\t\t\t\t/>\n * \t\t\t\t);\n * \t\t\t} ) }\n * \t\t</>\n * \t);\n * \treturn (\n * \t\t<CircularOptionPicker\n * \t\t\t\toptions={ colorOptions }\n * \t\t\t\tactions={\n * \t\t\t\t\t<CircularOptionPicker.ButtonAction\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( undefined ) }\n * \t\t\t\t\t>\n * \t\t\t\t\t\t{ 'Clear' }\n * \t\t\t\t\t</CircularOptionPicker.ButtonAction>\n * \t\t\t\t}\n * \t\t\t/>\n * \t);\n * };\n * ```\n */\n\nfunction ListboxCircularOptionPicker(\n\tprops: ListboxCircularOptionPickerProps\n) {\n\tconst {\n\t\tactions,\n\t\toptions,\n\t\tbaseId,\n\t\tclassName,\n\t\tloop = true,\n\t\tchildren,\n\t\t...additionalProps\n\t} = props;\n\n\tconst compositeStore = useCompositeStore( {\n\t\tfocusLoop: loop,\n\t\trtl: isRTL(),\n\t} );\n\n\tconst compositeContext = {\n\t\tbaseId,\n\t\tcompositeStore,\n\t};\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<CircularOptionPickerContext.Provider value={ compositeContext }>\n\t\t\t\t<Composite\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\tid={ baseId }\n\t\t\t\t\tstore={ compositeStore }\n\t\t\t\t\trole={ 'listbox' }\n\t\t\t\t>\n\t\t\t\t\t{ options }\n\t\t\t\t</Composite>\n\t\t\t\t{ children }\n\t\t\t\t{ actions }\n\t\t\t</CircularOptionPickerContext.Provider>\n\t\t</div>\n\t);\n}\n\nfunction ButtonsCircularOptionPicker(\n\tprops: ButtonsCircularOptionPickerProps\n) {\n\tconst { actions, options, children, baseId, ...additionalProps } = props;\n\n\treturn (\n\t\t<div { ...additionalProps } id={ baseId }>\n\t\t\t<CircularOptionPickerContext.Provider value={ { baseId } }>\n\t\t\t\t{ options }\n\t\t\t\t{ children }\n\t\t\t\t{ actions }\n\t\t\t</CircularOptionPickerContext.Provider>\n\t\t</div>\n\t);\n}\n\nfunction CircularOptionPicker( props: CircularOptionPickerProps ) {\n\tconst {\n\t\tasButtons,\n\t\tactions: actionsProp,\n\t\toptions: optionsProp,\n\t\tchildren,\n\t\tclassName,\n\t\t...additionalProps\n\t} = props;\n\n\tconst baseId = useInstanceId(\n\t\tCircularOptionPicker,\n\t\t'components-circular-option-picker',\n\t\tadditionalProps.id\n\t);\n\n\tconst OptionPickerImplementation = asButtons\n\t\t? ButtonsCircularOptionPicker\n\t\t: ListboxCircularOptionPicker;\n\n\tconst actions = actionsProp ? (\n\t\t<div className=\"components-circular-option-picker__custom-clear-wrapper\">\n\t\t\t{ actionsProp }\n\t\t</div>\n\t) : undefined;\n\n\tconst options = (\n\t\t<div className={ 'components-circular-option-picker__swatches' }>\n\t\t\t{ optionsProp }\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<OptionPickerImplementation\n\t\t\t{ ...additionalProps }\n\t\t\tbaseId={ baseId }\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-circular-option-picker',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\tactions={ actions }\n\t\t\toptions={ options }\n\t\t>\n\t\t\t{ children }\n\t\t</OptionPickerImplementation>\n\t);\n}\n\nCircularOptionPicker.Option = Option;\nCircularOptionPicker.OptionGroup = OptionGroup;\nCircularOptionPicker.ButtonAction = ButtonAction;\nCircularOptionPicker.DropdownLinkAction = DropdownLinkAction;\n\nexport default CircularOptionPicker;\n"],"mappings":"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"}

package/build-module/circular-option-picker/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/circular-option-picker/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport type { Icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { ButtonAsButtonProps } from '../button/types';\nimport type { DropdownProps } from '../dropdown/types';\nimport type { WordPressComponentProps } from '../context';\nimport type { CompositeState } from '../composite';\n\ntype CommonCircularOptionPickerProps = {\n\t/**\n\t * An ID to apply to the component.\n\t */\n\tid?: string;\n\t/**\n\t * A CSS class to apply to the wrapper element.\n\t */\n\tclassName?: string;\n\t/**\n\t * The action(s) to be rendered after the options,\n\t * such as a 'clear' button as seen in `ColorPalette`.\n\t * Usually a `CircularOptionPicker.ButtonAction` or\n\t * `CircularOptionPicker.DropdownLinkAction` component.\n\t */\n\tactions?: ReactNode;\n\t/**\n\t * The options to be rendered, such as color swatches.\n\t * Usually a `CircularOptionPicker.Option` component.\n\t */\n\toptions: ReactNode;\n\t/**\n\t * The child elements.\n\t */\n\tchildren?: ReactNode;\n};\n\ntype WithBaseId = {\n\tbaseId: string;\n};\n\ntype FullListboxCircularOptionPickerProps = CommonCircularOptionPickerProps & {\n\t/**\n\t * Whether the control should present as a set of buttons,\n\t * each with its own tab stop.\n\t */\n\tasButtons?: false;\n\t/**\n\t * Prevents keyboard interaction from wrapping around.\n\t * Only used when `asButtons` is not true.\n\t *\n\t * @default true\n\t */\n\tloop?: boolean;\n} & (\n\t\t| {\n\t\t\t\t'aria-label': string;\n\t\t\t\t'aria-labelledby'?: never;\n\t\t  }\n\t\t| {\n\t\t\t\t'aria-label'?: never;\n\t\t\t\t'aria-labelledby': string;\n\t\t  }\n\t);\n\nexport type ListboxCircularOptionPickerProps = WithBaseId &\n\tOmit< FullListboxCircularOptionPickerProps, 'asButtons' >;\n\ntype FullButtonsCircularOptionPickerProps = CommonCircularOptionPickerProps & {\n\t/**\n\t * Whether the control should present as a set of buttons,\n\t * each with its own tab stop.\n\t *\n\t * @default false\n\t */\n\tasButtons: true;\n};\n\nexport type ButtonsCircularOptionPickerProps = WithBaseId &\n\tOmit< FullButtonsCircularOptionPickerProps, 'asButtons' >;\n\nexport type CircularOptionPickerProps =\n\t| FullListboxCircularOptionPickerProps\n\t| FullButtonsCircularOptionPickerProps;\n\nexport type DropdownLinkActionProps = {\n\tbuttonProps?: Omit<\n\t\tWordPressComponentProps< ButtonAsButtonProps, 'button', false >,\n\t\t'children'\n\t>;\n\tlinkText: string;\n\tdropdownProps: Omit< DropdownProps, 'className' | 'renderToggle' >;\n\tclassName?: string;\n};\n\nexport type OptionGroupProps = {\n\tclassName?: string;\n\toptions: ReactNode;\n};\n\nexport type OptionProps = Omit<\n\tWordPressComponentProps< ButtonAsButtonProps, 'button', false >,\n\t'isPressed' | 'className'\n> & {\n\tclassName?: string;\n\ttooltipText?: string;\n\tisSelected?: boolean;\n\t// `icon` is explicitly defined as 'check' by CircleOptionPicker.Option\n\t// and is not intended to be overridden.\n\t// `size` relies on the `Icon` component's default size of `24` to fit\n\t// `CircularOptionPicker`'s design, and should not be explicitly set.\n\tselectedIconProps?: Omit<\n\t\tReact.ComponentProps< typeof Icon >,\n\t\t'icon' | 'size'\n\t>;\n};\n\nexport type CircularOptionPickerCompositeState = CompositeState;\nexport type CircularOptionPickerContextProps =\n\t| { isComposite?: false; baseId?: string }\n\t| ( { isComposite: true } & CircularOptionPickerCompositeState );\n"],"mappings":""}
+{"version":3,"names":[],"sources":["@wordpress/components/src/circular-option-picker/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport type { Icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { ButtonAsButtonProps } from '../button/types';\nimport type { DropdownProps } from '../dropdown/types';\nimport type { WordPressComponentProps } from '../context';\nimport type { CompositeStore } from '../composite/v2';\n\ntype CommonCircularOptionPickerProps = {\n\t/**\n\t * An ID to apply to the component.\n\t */\n\tid?: string;\n\t/**\n\t * A CSS class to apply to the wrapper element.\n\t */\n\tclassName?: string;\n\t/**\n\t * The action(s) to be rendered after the options,\n\t * such as a 'clear' button as seen in `ColorPalette`.\n\t * Usually a `CircularOptionPicker.ButtonAction` or\n\t * `CircularOptionPicker.DropdownLinkAction` component.\n\t */\n\tactions?: ReactNode;\n\t/**\n\t * The options to be rendered, such as color swatches.\n\t * Usually a `CircularOptionPicker.Option` component.\n\t */\n\toptions: ReactNode;\n\t/**\n\t * The child elements.\n\t */\n\tchildren?: ReactNode;\n};\n\ntype WithBaseId = {\n\tbaseId: string;\n};\n\ntype FullListboxCircularOptionPickerProps = CommonCircularOptionPickerProps & {\n\t/**\n\t * Whether the control should present as a set of buttons,\n\t * each with its own tab stop.\n\t */\n\tasButtons?: false;\n\t/**\n\t * Prevents keyboard interaction from wrapping around.\n\t * Only used when `asButtons` is not true.\n\t *\n\t * @default true\n\t */\n\tloop?: boolean;\n} & (\n\t\t| {\n\t\t\t\t'aria-label': string;\n\t\t\t\t'aria-labelledby'?: never;\n\t\t  }\n\t\t| {\n\t\t\t\t'aria-label'?: never;\n\t\t\t\t'aria-labelledby': string;\n\t\t  }\n\t);\n\nexport type ListboxCircularOptionPickerProps = WithBaseId &\n\tOmit< FullListboxCircularOptionPickerProps, 'asButtons' >;\n\ntype FullButtonsCircularOptionPickerProps = CommonCircularOptionPickerProps & {\n\t/**\n\t * Whether the control should present as a set of buttons,\n\t * each with its own tab stop.\n\t *\n\t * @default false\n\t */\n\tasButtons: true;\n};\n\nexport type ButtonsCircularOptionPickerProps = WithBaseId &\n\tOmit< FullButtonsCircularOptionPickerProps, 'asButtons' >;\n\nexport type CircularOptionPickerProps =\n\t| FullListboxCircularOptionPickerProps\n\t| FullButtonsCircularOptionPickerProps;\n\nexport type DropdownLinkActionProps = {\n\tbuttonProps?: Omit<\n\t\tWordPressComponentProps< ButtonAsButtonProps, 'button', false >,\n\t\t'children'\n\t>;\n\tlinkText: string;\n\tdropdownProps: Omit< DropdownProps, 'className' | 'renderToggle' >;\n\tclassName?: string;\n};\n\nexport type OptionGroupProps = {\n\tclassName?: string;\n\toptions: ReactNode;\n};\n\nexport type OptionProps = Omit<\n\tWordPressComponentProps< ButtonAsButtonProps, 'button', false >,\n\t'isPressed' | 'className'\n> & {\n\tclassName?: string;\n\ttooltipText?: string;\n\tisSelected?: boolean;\n\t// `icon` is explicitly defined as 'check' by CircleOptionPicker.Option\n\t// and is not intended to be overridden.\n\t// `size` relies on the `Icon` component's default size of `24` to fit\n\t// `CircularOptionPicker`'s design, and should not be explicitly set.\n\tselectedIconProps?: Omit<\n\t\tReact.ComponentProps< typeof Icon >,\n\t\t'icon' | 'size'\n\t>;\n};\n\nexport type CircularOptionPickerCompositeStore = CompositeStore;\nexport type CircularOptionPickerContextProps = {\n\tbaseId?: string;\n\tcompositeStore?: CircularOptionPickerCompositeStore;\n};\n"],"mappings":""}

package/build-module/color-palette/index.js

@@ -112,6 +112,10 @@ export function CustomColorPickerDropdown({
 }) {
   const popoverProps = useMemo(() => ({
     shift: true,
+    // Disabling resize as it would otherwise cause the popover to show
+    // scrollbars while dragging the color picker's handle close to the
+    // popover edge.
+    resize: false,
     ...(isRenderedInSidebar ? {
       // When in the sidebar: open to the left (stacking),
       // leaving the same gap as the parent popover.
@@ -224,13 +228,14 @@ function UnforwardedColorPalette(props, forwardedRef) {
       "aria-label": customColorAccessibleLabel,
       style: {
         background: value
-      }
+      },
+      type: "button"
     }), createElement(VStack, {
       className: "components-color-palette__custom-color-text-wrapper",
       spacing: 0.5
     }, createElement(Truncate, {
       className: "components-color-palette__custom-color-name"
-    }, value ? buttonLabelName : 'No color selected'), createElement(Truncate, {
+    }, value ? buttonLabelName : __('No color selected')), createElement(Truncate, {
       className: classnames('components-color-palette__custom-color-value', {
         'components-color-palette__custom-color-value--is-hex': isHex
       })

package/build-module/color-palette/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["colord","extend","namesPlugin","a11yPlugin","classnames","useInstanceId","__","sprintf","useCallback","useMemo","useState","forwardRef","Dropdown","ColorPicker","CircularOptionPicker","VStack","Truncate","ColorHeading","DropdownContentWrapper","extractColorNameFromCurrentValue","isMultiplePaletteArray","normalizeColorValue","SinglePalette","className","clearColor","colors","onChange","value","additionalProps","colorOptions","map","color","name","index","colordColor","isSelected","createElement","Option","key","selectedIconProps","fill","contrast","tooltipText","style","backgroundColor","onClick","OptionGroup","options","MultiplePalettes","headingLevel","instanceId","length","spacing","colorPalette","id","level","newColor","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","placement","offset","contentClassName","UnforwardedColorPalette","forwardedRef","asButtons","loop","clearable","disableCustomColors","enableAlpha","__experimentalIsRenderedInSidebar","ariaLabel","ariaLabelledby","normalizedColorValue","setNormalizedColorValue","undefined","customColorPaletteCallbackRef","node","hasMultipleColorOrigins","buttonLabelName","renderCustomColorPicker","paddingSize","isHex","startsWith","displayValue","replace","customColorAccessibleLabel","paletteCommonProps","actions","ButtonAction","metaProps","_metaProps","ref","renderContent","renderToggle","isOpen","onToggle","background","ColorPalette"],"sources":["@wordpress/components/src/color-palette/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport type {\n\tColorObject,\n\tColorPaletteProps,\n\tCustomColorPickerDropdownProps,\n\tMultiplePalettesProps,\n\tPaletteObject,\n\tSinglePaletteProps,\n} from './types';\nimport type { WordPressComponentProps } from '../context';\nimport type { DropdownProps } from '../dropdown/types';\nimport {\n\textractColorNameFromCurrentValue,\n\tisMultiplePaletteArray,\n\tnormalizeColorValue,\n} from './utils';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\t...additionalProps\n}: SinglePaletteProps ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn colors.map( ( { color, name }, index ) => {\n\t\t\tconst colordColor = colord( color );\n\t\t\tconst isSelected = value === color;\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tisSelected\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname ||\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tisSelected ? clearColor : () => onChange( color, index )\n\t\t\t\t\t}\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tname\n\t\t\t\t\t\t\t? // translators: %s: The name of the color e.g: \"vivid red\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color: %s' ), name )\n\t\t\t\t\t\t\t: // translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\n\treturn (\n\t\t<CircularOptionPicker.OptionGroup\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\theadingLevel,\n}: MultiplePalettesProps ) {\n\tconst instanceId = useInstanceId( MultiplePalettes, 'color-palette' );\n\n\tif ( colors.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ colors.map( ( { name, colors: colorPalette }, index ) => {\n\t\t\t\tconst id = `${ instanceId }-${ index }`;\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading id={ id } level={ headingLevel }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</ColorHeading>\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\tclearColor={ clearColor }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tonChange={ ( newColor ) =>\n\t\t\t\t\t\t\t\tonChange( newColor, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\taria-labelledby={ id }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport function CustomColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tpopoverProps: receivedPopoverProps,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\tconst popoverProps = useMemo< DropdownProps[ 'popoverProps' ] >(\n\t\t() => ( {\n\t\t\tshift: true,\n\t\t\t...( isRenderedInSidebar\n\t\t\t\t? {\n\t\t\t\t\t\t// When in the sidebar: open to the left (stacking),\n\t\t\t\t\t\t// leaving the same gap as the parent popover.\n\t\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t\toffset: 34,\n\t\t\t\t  }\n\t\t\t\t: {\n\t\t\t\t\t\t// Default behavior: open below the anchor\n\t\t\t\t\t\tplacement: 'bottom',\n\t\t\t\t\t\toffset: 8,\n\t\t\t\t  } ),\n\t\t\t...receivedPopoverProps,\n\t\t} ),\n\t\t[ isRenderedInSidebar, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction UnforwardedColorPalette(\n\tprops: WordPressComponentProps< ColorPaletteProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tasButtons,\n\t\tloop,\n\t\tclearable = true,\n\t\tcolors = [],\n\t\tdisableCustomColors = false,\n\t\tenableAlpha = false,\n\t\tonChange,\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\theadingLevel = 2,\n\t\t'aria-label': ariaLabel,\n\t\t'aria-labelledby': ariaLabelledby,\n\t\t...additionalProps\n\t} = props;\n\tconst [ normalizedColorValue, setNormalizedColorValue ] = useState( value );\n\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\n\tconst customColorPaletteCallbackRef = useCallback(\n\t\t( node: HTMLElement | null ) => {\n\t\t\tsetNormalizedColorValue( normalizeColorValue( value, node ) );\n\t\t},\n\t\t[ value ]\n\t);\n\n\tconst hasMultipleColorOrigins = isMultiplePaletteArray( colors );\n\tconst buttonLabelName = useMemo(\n\t\t() =>\n\t\t\textractColorNameFromCurrentValue(\n\t\t\t\tvalue,\n\t\t\t\tcolors,\n\t\t\t\thasMultipleColorOrigins\n\t\t\t),\n\t\t[ value, colors, hasMultipleColorOrigins ]\n\t);\n\n\tconst renderCustomColorPicker = () => (\n\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t<ColorPicker\n\t\t\t\tcolor={ normalizedColorValue }\n\t\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t</DropdownContentWrapper>\n\t);\n\tconst isHex = value?.startsWith( '#' );\n\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\tconst displayValue = value?.replace( /^var\\((.+)\\)$/, '$1' );\n\tconst customColorAccessibleLabel = !! displayValue\n\t\t? sprintf(\n\t\t\t\t// translators: %1$s: The name of the color e.g: \"vivid red\". %2$s: The color's hex code e.g: \"#f00\".\n\t\t\t\t__(\n\t\t\t\t\t'Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t),\n\t\t\t\tbuttonLabelName,\n\t\t\t\tdisplayValue\n\t\t  )\n\t\t: __( 'Custom color picker.' );\n\n\tconst paletteCommonProps = {\n\t\tclearColor,\n\t\tonChange,\n\t\tvalue,\n\t};\n\n\tconst actions = !! clearable && (\n\t\t<CircularOptionPicker.ButtonAction onClick={ clearColor }>\n\t\t\t{ __( 'Clear' ) }\n\t\t</CircularOptionPicker.ButtonAction>\n\t);\n\n\tlet metaProps:\n\t\t| { asButtons: false; loop?: boolean; 'aria-label': string }\n\t\t| { asButtons: false; loop?: boolean; 'aria-labelledby': string }\n\t\t| { asButtons: true };\n\n\tif ( asButtons ) {\n\t\tmetaProps = { asButtons: true };\n\t} else {\n\t\tconst _metaProps: { asButtons: false; loop?: boolean } = {\n\t\t\tasButtons: false,\n\t\t\tloop,\n\t\t};\n\n\t\tif ( ariaLabel ) {\n\t\t\tmetaProps = { ..._metaProps, 'aria-label': ariaLabel };\n\t\t} else if ( ariaLabelledby ) {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\t};\n\t\t} else {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-label': __( 'Custom color picker.' ),\n\t\t\t};\n\t\t}\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } ref={ forwardedRef } { ...additionalProps }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-wrapper\"\n\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tref={ customColorPaletteCallbackRef }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-button\"\n\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tbackground: 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\t<VStack\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-text-wrapper\"\n\t\t\t\t\t\t\t\tspacing={ 0.5 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Truncate className=\"components-color-palette__custom-color-name\">\n\t\t\t\t\t\t\t\t\t{ value\n\t\t\t\t\t\t\t\t\t\t? buttonLabelName\n\t\t\t\t\t\t\t\t\t\t: 'No color selected' }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\tThis `Truncate` is always rendered, even if\n\t\t\t\t\t\t\t\tthere is no `displayValue`, to ensure the layout\n\t\t\t\t\t\t\t\tdoes not shift\n\t\t\t\t\t\t\t\t*/ }\n\t\t\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value--is-hex':\n\t\t\t\t\t\t\t\t\t\t\t\tisHex,\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\t\t{ displayValue }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<CircularOptionPicker\n\t\t\t\t{ ...metaProps }\n\t\t\t\tactions={ actions }\n\t\t\t\toptions={\n\t\t\t\t\thasMultipleColorOrigins ? (\n\t\t\t\t\t\t<MultiplePalettes\n\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t\t\t\tcolors={ colors as PaletteObject[] }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\tcolors={ colors as ColorObject[] }\n\t\t\t\t\t\t\tvalue={ value }\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</VStack>\n\t);\n}\n\n/**\n * Allows the user to pick a color from a list of pre-defined color entries.\n *\n * ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyColorPalette = () => {\n *   const [ color, setColor ] = useState ( '#f00' )\n *   const colors = [\n *     { name: 'red', color: '#f00' },\n *     { name: 'white', color: '#fff' },\n *     { name: 'blue', color: '#00f' },\n *   ];\n *   return (\n *     <ColorPalette\n *       colors={ colors }\n *       value={ color }\n *       onChange={ ( color ) => setColor( color ) }\n *     />\n *   );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef( UnforwardedColorPalette );\n\nexport default ColorPalette;\n"],"mappings":"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"}
+{"version":3,"names":["colord","extend","namesPlugin","a11yPlugin","classnames","useInstanceId","__","sprintf","useCallback","useMemo","useState","forwardRef","Dropdown","ColorPicker","CircularOptionPicker","VStack","Truncate","ColorHeading","DropdownContentWrapper","extractColorNameFromCurrentValue","isMultiplePaletteArray","normalizeColorValue","SinglePalette","className","clearColor","colors","onChange","value","additionalProps","colorOptions","map","color","name","index","colordColor","isSelected","createElement","Option","key","selectedIconProps","fill","contrast","tooltipText","style","backgroundColor","onClick","OptionGroup","options","MultiplePalettes","headingLevel","instanceId","length","spacing","colorPalette","id","level","newColor","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","resize","placement","offset","contentClassName","UnforwardedColorPalette","forwardedRef","asButtons","loop","clearable","disableCustomColors","enableAlpha","__experimentalIsRenderedInSidebar","ariaLabel","ariaLabelledby","normalizedColorValue","setNormalizedColorValue","undefined","customColorPaletteCallbackRef","node","hasMultipleColorOrigins","buttonLabelName","renderCustomColorPicker","paddingSize","isHex","startsWith","displayValue","replace","customColorAccessibleLabel","paletteCommonProps","actions","ButtonAction","metaProps","_metaProps","ref","renderContent","renderToggle","isOpen","onToggle","background","type","ColorPalette"],"sources":["@wordpress/components/src/color-palette/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport type {\n\tColorObject,\n\tColorPaletteProps,\n\tCustomColorPickerDropdownProps,\n\tMultiplePalettesProps,\n\tPaletteObject,\n\tSinglePaletteProps,\n} from './types';\nimport type { WordPressComponentProps } from '../context';\nimport type { DropdownProps } from '../dropdown/types';\nimport {\n\textractColorNameFromCurrentValue,\n\tisMultiplePaletteArray,\n\tnormalizeColorValue,\n} from './utils';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\t...additionalProps\n}: SinglePaletteProps ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn colors.map( ( { color, name }, index ) => {\n\t\t\tconst colordColor = colord( color );\n\t\t\tconst isSelected = value === color;\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tisSelected\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname ||\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tisSelected ? clearColor : () => onChange( color, index )\n\t\t\t\t\t}\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tname\n\t\t\t\t\t\t\t? // translators: %s: The name of the color e.g: \"vivid red\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color: %s' ), name )\n\t\t\t\t\t\t\t: // translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\n\treturn (\n\t\t<CircularOptionPicker.OptionGroup\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\theadingLevel,\n}: MultiplePalettesProps ) {\n\tconst instanceId = useInstanceId( MultiplePalettes, 'color-palette' );\n\n\tif ( colors.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ colors.map( ( { name, colors: colorPalette }, index ) => {\n\t\t\t\tconst id = `${ instanceId }-${ index }`;\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading id={ id } level={ headingLevel }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</ColorHeading>\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\tclearColor={ clearColor }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tonChange={ ( newColor ) =>\n\t\t\t\t\t\t\t\tonChange( newColor, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\taria-labelledby={ id }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport function CustomColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tpopoverProps: receivedPopoverProps,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\tconst popoverProps = useMemo< DropdownProps[ 'popoverProps' ] >(\n\t\t() => ( {\n\t\t\tshift: true,\n\t\t\t// Disabling resize as it would otherwise cause the popover to show\n\t\t\t// scrollbars while dragging the color picker's handle close to the\n\t\t\t// popover edge.\n\t\t\tresize: false,\n\t\t\t...( isRenderedInSidebar\n\t\t\t\t? {\n\t\t\t\t\t\t// When in the sidebar: open to the left (stacking),\n\t\t\t\t\t\t// leaving the same gap as the parent popover.\n\t\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t\toffset: 34,\n\t\t\t\t  }\n\t\t\t\t: {\n\t\t\t\t\t\t// Default behavior: open below the anchor\n\t\t\t\t\t\tplacement: 'bottom',\n\t\t\t\t\t\toffset: 8,\n\t\t\t\t  } ),\n\t\t\t...receivedPopoverProps,\n\t\t} ),\n\t\t[ isRenderedInSidebar, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction UnforwardedColorPalette(\n\tprops: WordPressComponentProps< ColorPaletteProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tasButtons,\n\t\tloop,\n\t\tclearable = true,\n\t\tcolors = [],\n\t\tdisableCustomColors = false,\n\t\tenableAlpha = false,\n\t\tonChange,\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\theadingLevel = 2,\n\t\t'aria-label': ariaLabel,\n\t\t'aria-labelledby': ariaLabelledby,\n\t\t...additionalProps\n\t} = props;\n\tconst [ normalizedColorValue, setNormalizedColorValue ] = useState( value );\n\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\n\tconst customColorPaletteCallbackRef = useCallback(\n\t\t( node: HTMLElement | null ) => {\n\t\t\tsetNormalizedColorValue( normalizeColorValue( value, node ) );\n\t\t},\n\t\t[ value ]\n\t);\n\n\tconst hasMultipleColorOrigins = isMultiplePaletteArray( colors );\n\tconst buttonLabelName = useMemo(\n\t\t() =>\n\t\t\textractColorNameFromCurrentValue(\n\t\t\t\tvalue,\n\t\t\t\tcolors,\n\t\t\t\thasMultipleColorOrigins\n\t\t\t),\n\t\t[ value, colors, hasMultipleColorOrigins ]\n\t);\n\n\tconst renderCustomColorPicker = () => (\n\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t<ColorPicker\n\t\t\t\tcolor={ normalizedColorValue }\n\t\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t</DropdownContentWrapper>\n\t);\n\tconst isHex = value?.startsWith( '#' );\n\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\tconst displayValue = value?.replace( /^var\\((.+)\\)$/, '$1' );\n\tconst customColorAccessibleLabel = !! displayValue\n\t\t? sprintf(\n\t\t\t\t// translators: %1$s: The name of the color e.g: \"vivid red\". %2$s: The color's hex code e.g: \"#f00\".\n\t\t\t\t__(\n\t\t\t\t\t'Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t),\n\t\t\t\tbuttonLabelName,\n\t\t\t\tdisplayValue\n\t\t  )\n\t\t: __( 'Custom color picker.' );\n\n\tconst paletteCommonProps = {\n\t\tclearColor,\n\t\tonChange,\n\t\tvalue,\n\t};\n\n\tconst actions = !! clearable && (\n\t\t<CircularOptionPicker.ButtonAction onClick={ clearColor }>\n\t\t\t{ __( 'Clear' ) }\n\t\t</CircularOptionPicker.ButtonAction>\n\t);\n\n\tlet metaProps:\n\t\t| { asButtons: false; loop?: boolean; 'aria-label': string }\n\t\t| { asButtons: false; loop?: boolean; 'aria-labelledby': string }\n\t\t| { asButtons: true };\n\n\tif ( asButtons ) {\n\t\tmetaProps = { asButtons: true };\n\t} else {\n\t\tconst _metaProps: { asButtons: false; loop?: boolean } = {\n\t\t\tasButtons: false,\n\t\t\tloop,\n\t\t};\n\n\t\tif ( ariaLabel ) {\n\t\t\tmetaProps = { ..._metaProps, 'aria-label': ariaLabel };\n\t\t} else if ( ariaLabelledby ) {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\t};\n\t\t} else {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-label': __( 'Custom color picker.' ),\n\t\t\t};\n\t\t}\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } ref={ forwardedRef } { ...additionalProps }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-wrapper\"\n\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tref={ customColorPaletteCallbackRef }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-button\"\n\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-text-wrapper\"\n\t\t\t\t\t\t\t\tspacing={ 0.5 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Truncate className=\"components-color-palette__custom-color-name\">\n\t\t\t\t\t\t\t\t\t{ value\n\t\t\t\t\t\t\t\t\t\t? buttonLabelName\n\t\t\t\t\t\t\t\t\t\t: __( 'No color selected' ) }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\tThis `Truncate` is always rendered, even if\n\t\t\t\t\t\t\t\tthere is no `displayValue`, to ensure the layout\n\t\t\t\t\t\t\t\tdoes not shift\n\t\t\t\t\t\t\t\t*/ }\n\t\t\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value--is-hex':\n\t\t\t\t\t\t\t\t\t\t\t\tisHex,\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\t\t{ displayValue }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<CircularOptionPicker\n\t\t\t\t{ ...metaProps }\n\t\t\t\tactions={ actions }\n\t\t\t\toptions={\n\t\t\t\t\thasMultipleColorOrigins ? (\n\t\t\t\t\t\t<MultiplePalettes\n\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t\t\t\tcolors={ colors as PaletteObject[] }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\tcolors={ colors as ColorObject[] }\n\t\t\t\t\t\t\tvalue={ value }\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</VStack>\n\t);\n}\n\n/**\n * Allows the user to pick a color from a list of pre-defined color entries.\n *\n * ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyColorPalette = () => {\n *   const [ color, setColor ] = useState ( '#f00' )\n *   const colors = [\n *     { name: 'red', color: '#f00' },\n *     { name: 'white', color: '#fff' },\n *     { name: 'blue', color: '#00f' },\n *   ];\n *   return (\n *     <ColorPalette\n *       colors={ colors }\n *       value={ color }\n *       onChange={ ( color ) => setColor( color ) }\n *     />\n *   );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef( UnforwardedColorPalette );\n\nexport default ColorPalette;\n"],"mappings":"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"}

package/build-module/color-picker/component.js

@@ -10,7 +10,7 @@ import namesPlugin from 'colord/plugins/names';
  * WordPress dependencies
  */
 import { useCallback, useState, useMemo } from '@wordpress/element';
-import { useDebounce } from '@wordpress/compose';
+import { useDebounce, useMergeRefs } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -40,8 +40,15 @@ const UnconnectedColorPicker = (props, forwardedRef) => {
     onChange,
     defaultValue = '#fff',
     copyFormat,
+    // Context
+    onPickerDragStart,
+    onPickerDragEnd,
     ...divProps
   } = useContextSystem(props, 'ColorPicker');
+  const [containerEl, setContainerEl] = useState(null);
+  const containerRef = node => {
+    setContainerEl(node);
+  };
 
   // Use a safe default value for the color and remove the possibility of `undefined`.
   const [color, setColor] = useControlledValue({
@@ -58,12 +65,15 @@ const UnconnectedColorPicker = (props, forwardedRef) => {
   }, [debouncedSetColor]);
   const [colorType, setColorType] = useState(copyFormat || 'hex');
   return createElement(ColorfulWrapper, {
-    ref: forwardedRef,
+    ref: useMergeRefs([containerRef, forwardedRef]),
     ...divProps
   }, createElement(Picker, {
+    containerEl: containerEl,
     onChange: handleChange,
     color: safeColordColor,
-    enableAlpha: enableAlpha
+    enableAlpha: enableAlpha,
+    onDragStart: onPickerDragStart,
+    onDragEnd: onPickerDragEnd
   }), createElement(AuxiliaryColorArtefactWrapper, null, createElement(AuxiliaryColorArtefactHStackHeader, {
     justify: "space-between"
   }, createElement(SelectControl, {