@wordpress/components 25.9.1 → 25.11.1-next.f8d8eceb.0

package/build/autocomplete/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_removeAccents","_interopRequireDefault","require","_element","_compose","_richText","_autocompleterUi","_strings","EMPTY_FILTERED_OPTIONS","useAutocomplete","record","onChange","onReplace","completers","contentRef","instanceId","useInstanceId","selectedIndex","setSelectedIndex","useState","filteredOptions","setFilteredOptions","filterValue","setFilterValue","autocompleter","setAutocompleter","AutocompleterUI","setAutocompleterUI","backspacing","useRef","insertCompletion","replacement","end","start","triggerPrefix","length","toInsert","create","html","renderToString","insert","select","option","getOptionCompletion","isDisabled","completion","value","isCompletionObject","obj","action","undefined","completionObject","reset","onChangeOptions","options","handleKeyDown","event","current","key","defaultPrevented","isComposing","keyCode","preventDefault","textContent","useMemo","isCollapsed","getTextContent","slice","useEffect","completer","find","allowContext","index","lastIndexOf","textWithoutTrigger","tooDistantFromTrigger","mismatch","wordsFromTrigger","split","hasOneTriggerWord","matchingWhileBackspacing","textAfterSelection","test","safeTrigger","escapeRegExp","text","removeAccents","match","RegExp","query","getAutoCompleterUI","selectedKey","className","isExpanded","listBoxId","activeId","hasSelection","onKeyDown","popover","_react","createElement","onSelect","useLastDifferentValue","history","Set","add","size","delete","Array","from","useAutocompleteProps","ref","onKeyDownRef","previousRecord","mergedRefs","useMergeRefs","useRefEffect","element","_onKeyDown","addEventListener","removeEventListener","didUserInput","children","Autocomplete","isSelected","props","Fragment"],"sources":["@wordpress/components/src/autocomplete/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport removeAccents from 'remove-accents';\n\n/**\n * WordPress dependencies\n */\nimport {\n\trenderToString,\n\tuseEffect,\n\tuseState,\n\tuseRef,\n\tuseMemo,\n} from '@wordpress/element';\nimport { __, _n } from '@wordpress/i18n';\nimport { useInstanceId, useMergeRefs, useRefEffect } from '@wordpress/compose';\nimport {\n\tcreate,\n\tslice,\n\tinsert,\n\tisCollapsed,\n\tgetTextContent,\n} from '@wordpress/rich-text';\n\n/**\n * Internal dependencies\n */\nimport { getAutoCompleterUI } from './autocompleter-ui';\nimport { escapeRegExp } from '../utils/strings';\nimport type {\n\tAutocompleteProps,\n\tAutocompleterUIProps,\n\tInsertOption,\n\tKeyedOption,\n\tOptionCompletion,\n\tReplaceOption,\n\tUseAutocompleteProps,\n\tWPCompleter,\n} from './types';\n\nconst EMPTY_FILTERED_OPTIONS: KeyedOption[] = [];\n\nexport function useAutocomplete( {\n\trecord,\n\tonChange,\n\tonReplace,\n\tcompleters,\n\tcontentRef,\n}: UseAutocompleteProps ) {\n\tconst instanceId = useInstanceId( useAutocomplete );\n\tconst [ selectedIndex, setSelectedIndex ] = useState( 0 );\n\n\tconst [ filteredOptions, setFilteredOptions ] = useState<\n\t\tArray< KeyedOption >\n\t>( EMPTY_FILTERED_OPTIONS );\n\tconst [ filterValue, setFilterValue ] =\n\t\tuseState< AutocompleterUIProps[ 'filterValue' ] >( '' );\n\tconst [ autocompleter, setAutocompleter ] = useState< WPCompleter | null >(\n\t\tnull\n\t);\n\tconst [ AutocompleterUI, setAutocompleterUI ] = useState<\n\t\t( ( props: AutocompleterUIProps ) => JSX.Element | null ) | null\n\t>( null );\n\n\tconst backspacing = useRef( false );\n\n\tfunction insertCompletion( replacement: React.ReactNode ) {\n\t\tif ( autocompleter === null ) {\n\t\t\treturn;\n\t\t}\n\t\tconst end = record.start;\n\t\tconst start =\n\t\t\tend - autocompleter.triggerPrefix.length - filterValue.length;\n\t\tconst toInsert = create( { html: renderToString( replacement ) } );\n\n\t\tonChange( insert( record, toInsert, start, end ) );\n\t}\n\n\tfunction select( option: KeyedOption ) {\n\t\tconst { getOptionCompletion } = autocompleter || {};\n\n\t\tif ( option.isDisabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( getOptionCompletion ) {\n\t\t\tconst completion = getOptionCompletion( option.value, filterValue );\n\n\t\t\tconst isCompletionObject = (\n\t\t\t\tobj: OptionCompletion\n\t\t\t): obj is InsertOption | ReplaceOption => {\n\t\t\t\treturn (\n\t\t\t\t\tobj !== null &&\n\t\t\t\t\ttypeof obj === 'object' &&\n\t\t\t\t\t'action' in obj &&\n\t\t\t\t\tobj.action !== undefined &&\n\t\t\t\t\t'value' in obj &&\n\t\t\t\t\tobj.value !== undefined\n\t\t\t\t);\n\t\t\t};\n\n\t\t\tconst completionObject = isCompletionObject( completion )\n\t\t\t\t? completion\n\t\t\t\t: ( {\n\t\t\t\t\t\taction: 'insert-at-caret',\n\t\t\t\t\t\tvalue: completion,\n\t\t\t\t  } as InsertOption );\n\n\t\t\tif ( 'replace' === completionObject.action ) {\n\t\t\t\tonReplace( [ completionObject.value ] );\n\t\t\t\t// When replacing, the component will unmount, so don't reset\n\t\t\t\t// state (below) on an unmounted component.\n\t\t\t\treturn;\n\t\t\t} else if ( 'insert-at-caret' === completionObject.action ) {\n\t\t\t\tinsertCompletion( completionObject.value );\n\t\t\t}\n\t\t}\n\n\t\t// Reset autocomplete state after insertion rather than before\n\t\t// so insertion events don't cause the completion menu to redisplay.\n\t\treset();\n\t}\n\n\tfunction reset() {\n\t\tsetSelectedIndex( 0 );\n\t\tsetFilteredOptions( EMPTY_FILTERED_OPTIONS );\n\t\tsetFilterValue( '' );\n\t\tsetAutocompleter( null );\n\t\tsetAutocompleterUI( null );\n\t}\n\n\t/**\n\t * Load options for an autocompleter.\n\t *\n\t * @param {Array} options\n\t */\n\tfunction onChangeOptions( options: Array< KeyedOption > ) {\n\t\tsetSelectedIndex(\n\t\t\toptions.length === filteredOptions.length ? selectedIndex : 0\n\t\t);\n\t\tsetFilteredOptions( options );\n\t}\n\n\tfunction handleKeyDown( event: KeyboardEvent ) {\n\t\tbackspacing.current = event.key === 'Backspace';\n\n\t\tif ( ! autocompleter ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( filteredOptions.length === 0 ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (\n\t\t\tevent.defaultPrevented ||\n\t\t\t// Ignore keydowns from IMEs\n\t\t\tevent.isComposing ||\n\t\t\t// Workaround for Mac Safari where the final Enter/Backspace of an IME composition\n\t\t\t// is `isComposing=false`, even though it's technically still part of the composition.\n\t\t\t// These can only be detected by keyCode.\n\t\t\tevent.keyCode === 229\n\t\t) {\n\t\t\treturn;\n\t\t}\n\t\tswitch ( event.key ) {\n\t\t\tcase 'ArrowUp':\n\t\t\t\tsetSelectedIndex(\n\t\t\t\t\t( selectedIndex === 0\n\t\t\t\t\t\t? filteredOptions.length\n\t\t\t\t\t\t: selectedIndex ) - 1\n\t\t\t\t);\n\t\t\t\tbreak;\n\n\t\t\tcase 'ArrowDown':\n\t\t\t\tsetSelectedIndex(\n\t\t\t\t\t( selectedIndex + 1 ) % filteredOptions.length\n\t\t\t\t);\n\t\t\t\tbreak;\n\n\t\t\tcase 'Escape':\n\t\t\t\tsetAutocompleter( null );\n\t\t\t\tsetAutocompleterUI( null );\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\n\t\t\tcase 'Enter':\n\t\t\t\tselect( filteredOptions[ selectedIndex ] );\n\t\t\t\tbreak;\n\n\t\t\tcase 'ArrowLeft':\n\t\t\tcase 'ArrowRight':\n\t\t\t\treset();\n\t\t\t\treturn;\n\n\t\t\tdefault:\n\t\t\t\treturn;\n\t\t}\n\n\t\t// Any handled key should prevent original behavior. This relies on\n\t\t// the early return in the default case.\n\t\tevent.preventDefault();\n\t}\n\n\t// textContent is a primitive (string), memoizing is not strictly necessary\n\t// but this is a preemptive performance improvement, since the autocompleter\n\t// is a potential bottleneck for the editor type metric.\n\tconst textContent = useMemo( () => {\n\t\tif ( isCollapsed( record ) ) {\n\t\t\treturn getTextContent( slice( record, 0 ) );\n\t\t}\n\t\treturn '';\n\t}, [ record ] );\n\n\tuseEffect( () => {\n\t\tif ( ! textContent ) {\n\t\t\tif ( autocompleter ) reset();\n\t\t\treturn;\n\t\t}\n\n\t\tconst completer = completers?.find(\n\t\t\t( { triggerPrefix, allowContext } ) => {\n\t\t\t\tconst index = textContent.lastIndexOf( triggerPrefix );\n\n\t\t\t\tif ( index === -1 ) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\tconst textWithoutTrigger = textContent.slice(\n\t\t\t\t\tindex + triggerPrefix.length\n\t\t\t\t);\n\n\t\t\t\tconst tooDistantFromTrigger = textWithoutTrigger.length > 50; // 50 chars seems to be a good limit.\n\t\t\t\t// This is a final barrier to prevent the effect from completing with\n\t\t\t\t// an extremely long string, which causes the editor to slow-down\n\t\t\t\t// significantly. This could happen, for example, if `matchingWhileBackspacing`\n\t\t\t\t// is true and one of the \"words\" end up being too long. If that's the case,\n\t\t\t\t// it will be caught by this guard.\n\t\t\t\tif ( tooDistantFromTrigger ) return false;\n\n\t\t\t\tconst mismatch = filteredOptions.length === 0;\n\t\t\t\tconst wordsFromTrigger = textWithoutTrigger.split( /\\s/ );\n\t\t\t\t// We need to allow the effect to run when not backspacing and if there\n\t\t\t\t// was a mismatch. i.e when typing a trigger + the match string or when\n\t\t\t\t// clicking in an existing trigger word on the page. We do that if we\n\t\t\t\t// detect that we have one word from trigger in the current textual context.\n\t\t\t\t//\n\t\t\t\t// Ex.: \"Some text @a\" <-- \"@a\" will be detected as the trigger word and\n\t\t\t\t// allow the effect to run. It will run until there's a mismatch.\n\t\t\t\tconst hasOneTriggerWord = wordsFromTrigger.length === 1;\n\t\t\t\t// This is used to allow the effect to run when backspacing and if\n\t\t\t\t// \"touching\" a word that \"belongs\" to a trigger. We consider a \"trigger\n\t\t\t\t// word\" any word up to the limit of 3 from the trigger character.\n\t\t\t\t// Anything beyond that is ignored if there's a mismatch. This allows\n\t\t\t\t// us to \"escape\" a mismatch when backspacing, but still imposing some\n\t\t\t\t// sane limits.\n\t\t\t\t//\n\t\t\t\t// Ex: \"Some text @marcelo sekkkk\" <--- \"kkkk\" caused a mismatch, but\n\t\t\t\t// if the user presses backspace here, it will show the completion popup again.\n\t\t\t\tconst matchingWhileBackspacing =\n\t\t\t\t\tbackspacing.current &&\n\t\t\t\t\ttextWithoutTrigger.split( /\\s/ ).length <= 3;\n\n\t\t\t\tif (\n\t\t\t\t\tmismatch &&\n\t\t\t\t\t! ( matchingWhileBackspacing || hasOneTriggerWord )\n\t\t\t\t) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\tconst textAfterSelection = getTextContent(\n\t\t\t\t\tslice( record, undefined, getTextContent( record ).length )\n\t\t\t\t);\n\n\t\t\t\tif (\n\t\t\t\t\tallowContext &&\n\t\t\t\t\t! allowContext(\n\t\t\t\t\t\ttextContent.slice( 0, index ),\n\t\t\t\t\t\ttextAfterSelection\n\t\t\t\t\t)\n\t\t\t\t) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\tif (\n\t\t\t\t\t/^\\s/.test( textWithoutTrigger ) ||\n\t\t\t\t\t/\\s\\s+$/.test( textWithoutTrigger )\n\t\t\t\t) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\treturn /[\\u0000-\\uFFFF]*$/.test( textWithoutTrigger );\n\t\t\t}\n\t\t);\n\n\t\tif ( ! completer ) {\n\t\t\tif ( autocompleter ) reset();\n\t\t\treturn;\n\t\t}\n\n\t\tconst safeTrigger = escapeRegExp( completer.triggerPrefix );\n\t\tconst text = removeAccents( textContent );\n\t\tconst match = text\n\t\t\t.slice( text.lastIndexOf( completer.triggerPrefix ) )\n\t\t\t.match( new RegExp( `${ safeTrigger }([\\u0000-\\uFFFF]*)$` ) );\n\t\tconst query = match && match[ 1 ];\n\n\t\tsetAutocompleter( completer );\n\t\tsetAutocompleterUI( () =>\n\t\t\tcompleter !== autocompleter\n\t\t\t\t? getAutoCompleterUI( completer )\n\t\t\t\t: AutocompleterUI\n\t\t);\n\t\tsetFilterValue( query === null ? '' : query );\n\t\t// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.\n\t\t// See https://github.com/WordPress/gutenberg/pull/41820\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ textContent ] );\n\n\tconst { key: selectedKey = '' } = filteredOptions[ selectedIndex ] || {};\n\tconst { className } = autocompleter || {};\n\tconst isExpanded = !! autocompleter && filteredOptions.length > 0;\n\tconst listBoxId = isExpanded\n\t\t? `components-autocomplete-listbox-${ instanceId }`\n\t\t: undefined;\n\tconst activeId = isExpanded\n\t\t? `components-autocomplete-item-${ instanceId }-${ selectedKey }`\n\t\t: null;\n\tconst hasSelection = record.start !== undefined;\n\n\treturn {\n\t\tlistBoxId,\n\t\tactiveId,\n\t\tonKeyDown: handleKeyDown,\n\t\tpopover: hasSelection && AutocompleterUI && (\n\t\t\t<AutocompleterUI\n\t\t\t\tclassName={ className }\n\t\t\t\tfilterValue={ filterValue }\n\t\t\t\tinstanceId={ instanceId }\n\t\t\t\tlistBoxId={ listBoxId }\n\t\t\t\tselectedIndex={ selectedIndex }\n\t\t\t\tonChangeOptions={ onChangeOptions }\n\t\t\t\tonSelect={ select }\n\t\t\t\tvalue={ record }\n\t\t\t\tcontentRef={ contentRef }\n\t\t\t\treset={ reset }\n\t\t\t/>\n\t\t),\n\t};\n}\n\nfunction useLastDifferentValue( value: UseAutocompleteProps[ 'record' ] ) {\n\tconst history = useRef< Set< typeof value > >( new Set() );\n\n\thistory.current.add( value );\n\n\t// Keep the history size to 2.\n\tif ( history.current.size > 2 ) {\n\t\thistory.current.delete( Array.from( history.current )[ 0 ] );\n\t}\n\n\treturn Array.from( history.current )[ 0 ];\n}\n\nexport function useAutocompleteProps( options: UseAutocompleteProps ) {\n\tconst ref = useRef< HTMLElement >( null );\n\tconst onKeyDownRef = useRef< ( event: KeyboardEvent ) => void >();\n\tconst { record } = options;\n\tconst previousRecord = useLastDifferentValue( record );\n\tconst { popover, listBoxId, activeId, onKeyDown } = useAutocomplete( {\n\t\t...options,\n\t\tcontentRef: ref,\n\t} );\n\tonKeyDownRef.current = onKeyDown;\n\n\tconst mergedRefs = useMergeRefs( [\n\t\tref,\n\t\tuseRefEffect( ( element: HTMLElement ) => {\n\t\t\tfunction _onKeyDown( event: KeyboardEvent ) {\n\t\t\t\tonKeyDownRef.current?.( event );\n\t\t\t}\n\t\t\telement.addEventListener( 'keydown', _onKeyDown );\n\t\t\treturn () => {\n\t\t\t\telement.removeEventListener( 'keydown', _onKeyDown );\n\t\t\t};\n\t\t}, [] ),\n\t] );\n\n\t// We only want to show the popover if the user has typed something.\n\tconst didUserInput = record.text !== previousRecord?.text;\n\n\tif ( ! didUserInput ) {\n\t\treturn { ref: mergedRefs };\n\t}\n\n\treturn {\n\t\tref: mergedRefs,\n\t\tchildren: popover,\n\t\t'aria-autocomplete': listBoxId ? 'list' : undefined,\n\t\t'aria-owns': listBoxId,\n\t\t'aria-activedescendant': activeId,\n\t};\n}\n\nexport default function Autocomplete( {\n\tchildren,\n\tisSelected,\n\t...options\n}: AutocompleteProps ) {\n\tconst { popover, ...props } = useAutocomplete( options );\n\treturn (\n\t\t<>\n\t\t\t{ children( props ) }\n\t\t\t{ isSelected && popover }\n\t\t</>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"names":["_removeAccents","_interopRequireDefault","require","_element","_compose","_richText","_a11y","_keycodes","_autocompleterUi","_strings","getNodeText","node","toString","Array","map","join","props","children","EMPTY_FILTERED_OPTIONS","useAutocomplete","record","onChange","onReplace","completers","contentRef","instanceId","useInstanceId","selectedIndex","setSelectedIndex","useState","filteredOptions","setFilteredOptions","filterValue","setFilterValue","autocompleter","setAutocompleter","AutocompleterUI","setAutocompleterUI","backspacing","useRef","insertCompletion","replacement","end","start","triggerPrefix","length","toInsert","create","html","renderToString","insert","select","option","getOptionCompletion","isDisabled","completion","value","isCompletionObject","obj","action","undefined","completionObject","reset","onChangeOptions","options","handleKeyDown","event","current","key","defaultPrevented","isComposing","keyCode","newIndex","isAppleOS","speak","label","preventDefault","textContent","useMemo","isCollapsed","getTextContent","slice","useEffect","completer","reduce","lastTrigger","currentCompleter","triggerIndex","lastIndexOf","lastTriggerIndex","allowContext","textWithoutTrigger","tooDistantFromTrigger","mismatch","wordsFromTrigger","split","hasOneTriggerWord","matchingWhileBackspacing","textAfterSelection","test","safeTrigger","escapeRegExp","text","removeAccents","match","RegExp","query","getAutoCompleterUI","selectedKey","className","isExpanded","listBoxId","activeId","hasSelection","onKeyDown","popover","_react","createElement","onSelect","useLastDifferentValue","history","Set","add","size","delete","from","useAutocompleteProps","ref","onKeyDownRef","previousRecord","mergedRefs","useMergeRefs","useRefEffect","element","_onKeyDown","addEventListener","removeEventListener","didUserInput","Autocomplete","isSelected","Fragment"],"sources":["@wordpress/components/src/autocomplete/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport removeAccents from 'remove-accents';\n\n/**\n * WordPress dependencies\n */\nimport {\n\trenderToString,\n\tuseEffect,\n\tuseState,\n\tuseRef,\n\tuseMemo,\n} from '@wordpress/element';\nimport { __, _n } from '@wordpress/i18n';\nimport { useInstanceId, useMergeRefs, useRefEffect } from '@wordpress/compose';\nimport {\n\tcreate,\n\tslice,\n\tinsert,\n\tisCollapsed,\n\tgetTextContent,\n} from '@wordpress/rich-text';\nimport { speak } from '@wordpress/a11y';\nimport { isAppleOS } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { getAutoCompleterUI } from './autocompleter-ui';\nimport { escapeRegExp } from '../utils/strings';\nimport type {\n\tAutocompleteProps,\n\tAutocompleterUIProps,\n\tInsertOption,\n\tKeyedOption,\n\tOptionCompletion,\n\tReplaceOption,\n\tUseAutocompleteProps,\n\tWPCompleter,\n} from './types';\n\nconst getNodeText = ( node: React.ReactNode ): string => {\n\tif ( node === null ) {\n\t\treturn '';\n\t}\n\n\tswitch ( typeof node ) {\n\t\tcase 'string':\n\t\tcase 'number':\n\t\t\treturn node.toString();\n\t\t\tbreak;\n\t\tcase 'boolean':\n\t\t\treturn '';\n\t\t\tbreak;\n\t\tcase 'object': {\n\t\t\tif ( node instanceof Array ) {\n\t\t\t\treturn node.map( getNodeText ).join( '' );\n\t\t\t}\n\t\t\tif ( 'props' in node ) {\n\t\t\t\treturn getNodeText( node.props.children );\n\t\t\t}\n\t\t\tbreak;\n\t\t}\n\t\tdefault:\n\t\t\treturn '';\n\t}\n\n\treturn '';\n};\n\nconst EMPTY_FILTERED_OPTIONS: KeyedOption[] = [];\n\nexport function useAutocomplete( {\n\trecord,\n\tonChange,\n\tonReplace,\n\tcompleters,\n\tcontentRef,\n}: UseAutocompleteProps ) {\n\tconst instanceId = useInstanceId( useAutocomplete );\n\tconst [ selectedIndex, setSelectedIndex ] = useState( 0 );\n\n\tconst [ filteredOptions, setFilteredOptions ] = useState<\n\t\tArray< KeyedOption >\n\t>( EMPTY_FILTERED_OPTIONS );\n\tconst [ filterValue, setFilterValue ] =\n\t\tuseState< AutocompleterUIProps[ 'filterValue' ] >( '' );\n\tconst [ autocompleter, setAutocompleter ] = useState< WPCompleter | null >(\n\t\tnull\n\t);\n\tconst [ AutocompleterUI, setAutocompleterUI ] = useState<\n\t\t( ( props: AutocompleterUIProps ) => JSX.Element | null ) | null\n\t>( null );\n\n\tconst backspacing = useRef( false );\n\n\tfunction insertCompletion( replacement: React.ReactNode ) {\n\t\tif ( autocompleter === null ) {\n\t\t\treturn;\n\t\t}\n\t\tconst end = record.start;\n\t\tconst start =\n\t\t\tend - autocompleter.triggerPrefix.length - filterValue.length;\n\t\tconst toInsert = create( { html: renderToString( replacement ) } );\n\n\t\tonChange( insert( record, toInsert, start, end ) );\n\t}\n\n\tfunction select( option: KeyedOption ) {\n\t\tconst { getOptionCompletion } = autocompleter || {};\n\n\t\tif ( option.isDisabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( getOptionCompletion ) {\n\t\t\tconst completion = getOptionCompletion( option.value, filterValue );\n\n\t\t\tconst isCompletionObject = (\n\t\t\t\tobj: OptionCompletion\n\t\t\t): obj is InsertOption | ReplaceOption => {\n\t\t\t\treturn (\n\t\t\t\t\tobj !== null &&\n\t\t\t\t\ttypeof obj === 'object' &&\n\t\t\t\t\t'action' in obj &&\n\t\t\t\t\tobj.action !== undefined &&\n\t\t\t\t\t'value' in obj &&\n\t\t\t\t\tobj.value !== undefined\n\t\t\t\t);\n\t\t\t};\n\n\t\t\tconst completionObject = isCompletionObject( completion )\n\t\t\t\t? completion\n\t\t\t\t: ( {\n\t\t\t\t\t\taction: 'insert-at-caret',\n\t\t\t\t\t\tvalue: completion,\n\t\t\t\t  } as InsertOption );\n\n\t\t\tif ( 'replace' === completionObject.action ) {\n\t\t\t\tonReplace( [ completionObject.value ] );\n\t\t\t\t// When replacing, the component will unmount, so don't reset\n\t\t\t\t// state (below) on an unmounted component.\n\t\t\t\treturn;\n\t\t\t} else if ( 'insert-at-caret' === completionObject.action ) {\n\t\t\t\tinsertCompletion( completionObject.value );\n\t\t\t}\n\t\t}\n\n\t\t// Reset autocomplete state after insertion rather than before\n\t\t// so insertion events don't cause the completion menu to redisplay.\n\t\treset();\n\t}\n\n\tfunction reset() {\n\t\tsetSelectedIndex( 0 );\n\t\tsetFilteredOptions( EMPTY_FILTERED_OPTIONS );\n\t\tsetFilterValue( '' );\n\t\tsetAutocompleter( null );\n\t\tsetAutocompleterUI( null );\n\t}\n\n\t/**\n\t * Load options for an autocompleter.\n\t *\n\t * @param {Array} options\n\t */\n\tfunction onChangeOptions( options: Array< KeyedOption > ) {\n\t\tsetSelectedIndex(\n\t\t\toptions.length === filteredOptions.length ? selectedIndex : 0\n\t\t);\n\t\tsetFilteredOptions( options );\n\t}\n\n\tfunction handleKeyDown( event: KeyboardEvent ) {\n\t\tbackspacing.current = event.key === 'Backspace';\n\n\t\tif ( ! autocompleter ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( filteredOptions.length === 0 ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (\n\t\t\tevent.defaultPrevented ||\n\t\t\t// Ignore keydowns from IMEs\n\t\t\tevent.isComposing ||\n\t\t\t// Workaround for Mac Safari where the final Enter/Backspace of an IME composition\n\t\t\t// is `isComposing=false`, even though it's technically still part of the composition.\n\t\t\t// These can only be detected by keyCode.\n\t\t\tevent.keyCode === 229\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tswitch ( event.key ) {\n\t\t\tcase 'ArrowUp': {\n\t\t\t\tconst newIndex =\n\t\t\t\t\t( selectedIndex === 0\n\t\t\t\t\t\t? filteredOptions.length\n\t\t\t\t\t\t: selectedIndex ) - 1;\n\t\t\t\tsetSelectedIndex( newIndex );\n\t\t\t\t// See the related PR as to why this is necessary: https://github.com/WordPress/gutenberg/pull/54902.\n\t\t\t\tif ( isAppleOS() ) {\n\t\t\t\t\tspeak(\n\t\t\t\t\t\tgetNodeText( filteredOptions[ newIndex ].label ),\n\t\t\t\t\t\t'assertive'\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\tcase 'ArrowDown': {\n\t\t\t\tconst newIndex = ( selectedIndex + 1 ) % filteredOptions.length;\n\t\t\t\tsetSelectedIndex( newIndex );\n\t\t\t\tif ( isAppleOS() ) {\n\t\t\t\t\tspeak(\n\t\t\t\t\t\tgetNodeText( filteredOptions[ newIndex ].label ),\n\t\t\t\t\t\t'assertive'\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\tcase 'Escape':\n\t\t\t\tsetAutocompleter( null );\n\t\t\t\tsetAutocompleterUI( null );\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\n\t\t\tcase 'Enter':\n\t\t\t\tselect( filteredOptions[ selectedIndex ] );\n\t\t\t\tbreak;\n\n\t\t\tcase 'ArrowLeft':\n\t\t\tcase 'ArrowRight':\n\t\t\t\treset();\n\t\t\t\treturn;\n\n\t\t\tdefault:\n\t\t\t\treturn;\n\t\t}\n\n\t\t// Any handled key should prevent original behavior. This relies on\n\t\t// the early return in the default case.\n\t\tevent.preventDefault();\n\t}\n\n\t// textContent is a primitive (string), memoizing is not strictly necessary\n\t// but this is a preemptive performance improvement, since the autocompleter\n\t// is a potential bottleneck for the editor type metric.\n\tconst textContent = useMemo( () => {\n\t\tif ( isCollapsed( record ) ) {\n\t\t\treturn getTextContent( slice( record, 0 ) );\n\t\t}\n\t\treturn '';\n\t}, [ record ] );\n\n\tuseEffect( () => {\n\t\tif ( ! textContent ) {\n\t\t\tif ( autocompleter ) reset();\n\t\t\treturn;\n\t\t}\n\n\t\t// Find the completer with the highest triggerPrefix index in the\n\t\t// textContent.\n\t\tconst completer = completers.reduce< WPCompleter | null >(\n\t\t\t( lastTrigger, currentCompleter ) => {\n\t\t\t\tconst triggerIndex = textContent.lastIndexOf(\n\t\t\t\t\tcurrentCompleter.triggerPrefix\n\t\t\t\t);\n\t\t\t\tconst lastTriggerIndex =\n\t\t\t\t\tlastTrigger !== null\n\t\t\t\t\t\t? textContent.lastIndexOf( lastTrigger.triggerPrefix )\n\t\t\t\t\t\t: -1;\n\n\t\t\t\treturn triggerIndex > lastTriggerIndex\n\t\t\t\t\t? currentCompleter\n\t\t\t\t\t: lastTrigger;\n\t\t\t},\n\t\t\tnull\n\t\t);\n\n\t\tif ( ! completer ) {\n\t\t\tif ( autocompleter ) reset();\n\t\t\treturn;\n\t\t}\n\n\t\tconst { allowContext, triggerPrefix } = completer;\n\t\tconst triggerIndex = textContent.lastIndexOf( triggerPrefix );\n\t\tconst textWithoutTrigger = textContent.slice(\n\t\t\ttriggerIndex + triggerPrefix.length\n\t\t);\n\n\t\tconst tooDistantFromTrigger = textWithoutTrigger.length > 50; // 50 chars seems to be a good limit.\n\t\t// This is a final barrier to prevent the effect from completing with\n\t\t// an extremely long string, which causes the editor to slow-down\n\t\t// significantly. This could happen, for example, if `matchingWhileBackspacing`\n\t\t// is true and one of the \"words\" end up being too long. If that's the case,\n\t\t// it will be caught by this guard.\n\t\tif ( tooDistantFromTrigger ) return;\n\n\t\tconst mismatch = filteredOptions.length === 0;\n\t\tconst wordsFromTrigger = textWithoutTrigger.split( /\\s/ );\n\t\t// We need to allow the effect to run when not backspacing and if there\n\t\t// was a mismatch. i.e when typing a trigger + the match string or when\n\t\t// clicking in an existing trigger word on the page. We do that if we\n\t\t// detect that we have one word from trigger in the current textual context.\n\t\t//\n\t\t// Ex.: \"Some text @a\" <-- \"@a\" will be detected as the trigger word and\n\t\t// allow the effect to run. It will run until there's a mismatch.\n\t\tconst hasOneTriggerWord = wordsFromTrigger.length === 1;\n\t\t// This is used to allow the effect to run when backspacing and if\n\t\t// \"touching\" a word that \"belongs\" to a trigger. We consider a \"trigger\n\t\t// word\" any word up to the limit of 3 from the trigger character.\n\t\t// Anything beyond that is ignored if there's a mismatch. This allows\n\t\t// us to \"escape\" a mismatch when backspacing, but still imposing some\n\t\t// sane limits.\n\t\t//\n\t\t// Ex: \"Some text @marcelo sekkkk\" <--- \"kkkk\" caused a mismatch, but\n\t\t// if the user presses backspace here, it will show the completion popup again.\n\t\tconst matchingWhileBackspacing =\n\t\t\tbackspacing.current && wordsFromTrigger.length <= 3;\n\n\t\tif ( mismatch && ! ( matchingWhileBackspacing || hasOneTriggerWord ) ) {\n\t\t\tif ( autocompleter ) reset();\n\t\t\treturn;\n\t\t}\n\n\t\tconst textAfterSelection = getTextContent(\n\t\t\tslice( record, undefined, getTextContent( record ).length )\n\t\t);\n\n\t\tif (\n\t\t\tallowContext &&\n\t\t\t! allowContext(\n\t\t\t\ttextContent.slice( 0, triggerIndex ),\n\t\t\t\ttextAfterSelection\n\t\t\t)\n\t\t) {\n\t\t\tif ( autocompleter ) reset();\n\t\t\treturn;\n\t\t}\n\n\t\tif (\n\t\t\t/^\\s/.test( textWithoutTrigger ) ||\n\t\t\t/\\s\\s+$/.test( textWithoutTrigger )\n\t\t) {\n\t\t\tif ( autocompleter ) reset();\n\t\t\treturn;\n\t\t}\n\n\t\tif ( ! /[\\u0000-\\uFFFF]*$/.test( textWithoutTrigger ) ) {\n\t\t\tif ( autocompleter ) reset();\n\t\t\treturn;\n\t\t}\n\n\t\tconst safeTrigger = escapeRegExp( completer.triggerPrefix );\n\t\tconst text = removeAccents( textContent );\n\t\tconst match = text\n\t\t\t.slice( text.lastIndexOf( completer.triggerPrefix ) )\n\t\t\t.match( new RegExp( `${ safeTrigger }([\\u0000-\\uFFFF]*)$` ) );\n\t\tconst query = match && match[ 1 ];\n\n\t\tsetAutocompleter( completer );\n\t\tsetAutocompleterUI( () =>\n\t\t\tcompleter !== autocompleter\n\t\t\t\t? getAutoCompleterUI( completer )\n\t\t\t\t: AutocompleterUI\n\t\t);\n\t\tsetFilterValue( query === null ? '' : query );\n\t\t// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.\n\t\t// See https://github.com/WordPress/gutenberg/pull/41820\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ textContent ] );\n\n\tconst { key: selectedKey = '' } = filteredOptions[ selectedIndex ] || {};\n\tconst { className } = autocompleter || {};\n\tconst isExpanded = !! autocompleter && filteredOptions.length > 0;\n\tconst listBoxId = isExpanded\n\t\t? `components-autocomplete-listbox-${ instanceId }`\n\t\t: undefined;\n\tconst activeId = isExpanded\n\t\t? `components-autocomplete-item-${ instanceId }-${ selectedKey }`\n\t\t: null;\n\tconst hasSelection = record.start !== undefined;\n\n\treturn {\n\t\tlistBoxId,\n\t\tactiveId,\n\t\tonKeyDown: handleKeyDown,\n\t\tpopover: hasSelection && AutocompleterUI && (\n\t\t\t<AutocompleterUI\n\t\t\t\tclassName={ className }\n\t\t\t\tfilterValue={ filterValue }\n\t\t\t\tinstanceId={ instanceId }\n\t\t\t\tlistBoxId={ listBoxId }\n\t\t\t\tselectedIndex={ selectedIndex }\n\t\t\t\tonChangeOptions={ onChangeOptions }\n\t\t\t\tonSelect={ select }\n\t\t\t\tvalue={ record }\n\t\t\t\tcontentRef={ contentRef }\n\t\t\t\treset={ reset }\n\t\t\t/>\n\t\t),\n\t};\n}\n\nfunction useLastDifferentValue( value: UseAutocompleteProps[ 'record' ] ) {\n\tconst history = useRef< Set< typeof value > >( new Set() );\n\n\thistory.current.add( value );\n\n\t// Keep the history size to 2.\n\tif ( history.current.size > 2 ) {\n\t\thistory.current.delete( Array.from( history.current )[ 0 ] );\n\t}\n\n\treturn Array.from( history.current )[ 0 ];\n}\n\nexport function useAutocompleteProps( options: UseAutocompleteProps ) {\n\tconst ref = useRef< HTMLElement >( null );\n\tconst onKeyDownRef = useRef< ( event: KeyboardEvent ) => void >();\n\tconst { record } = options;\n\tconst previousRecord = useLastDifferentValue( record );\n\tconst { popover, listBoxId, activeId, onKeyDown } = useAutocomplete( {\n\t\t...options,\n\t\tcontentRef: ref,\n\t} );\n\tonKeyDownRef.current = onKeyDown;\n\n\tconst mergedRefs = useMergeRefs( [\n\t\tref,\n\t\tuseRefEffect( ( element: HTMLElement ) => {\n\t\t\tfunction _onKeyDown( event: KeyboardEvent ) {\n\t\t\t\tonKeyDownRef.current?.( event );\n\t\t\t}\n\t\t\telement.addEventListener( 'keydown', _onKeyDown );\n\t\t\treturn () => {\n\t\t\t\telement.removeEventListener( 'keydown', _onKeyDown );\n\t\t\t};\n\t\t}, [] ),\n\t] );\n\n\t// We only want to show the popover if the user has typed something.\n\tconst didUserInput = record.text !== previousRecord?.text;\n\n\tif ( ! didUserInput ) {\n\t\treturn { ref: mergedRefs };\n\t}\n\n\treturn {\n\t\tref: mergedRefs,\n\t\tchildren: popover,\n\t\t'aria-autocomplete': listBoxId ? 'list' : undefined,\n\t\t'aria-owns': listBoxId,\n\t\t'aria-activedescendant': activeId,\n\t};\n}\n\nexport default function Autocomplete( {\n\tchildren,\n\tisSelected,\n\t...options\n}: AutocompleteProps ) {\n\tconst { popover, ...props } = useAutocomplete( options );\n\treturn (\n\t\t<>\n\t\t\t{ children( props ) }\n\t\t\t{ isSelected && popover }\n\t\t</>\n\t);\n}\n"],"mappings":"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"}

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

@@ -12,7 +12,7 @@ var _element = require("@wordpress/element");
 var _icons = require("@wordpress/icons");
 var _circularOptionPickerContext = require("./circular-option-picker-context");
 var _button = _interopRequireDefault(require("../button"));
-var _composite = require("../composite");
+var _v = require("../composite/v2");
 var _tooltip = _interopRequireDefault(require("../tooltip"));
 /**
  * External dependencies
@@ -26,7 +26,6 @@ var _tooltip = _interopRequireDefault(require("../tooltip"));
  * Internal dependencies
  */
 
-const hasSelectedOption = new Map();
 function UnforwardedOptionAsButton(props, forwardedRef) {
   const {
     isPressed,
@@ -43,39 +42,22 @@ function UnforwardedOptionAsOption(props, forwardedRef) {
   const {
     id,
     isSelected,
-    context,
+    compositeStore,
     ...additionalProps
   } = props;
-  const {
-    isComposite,
-    ..._compositeState
-  } = context;
-  const compositeState = _compositeState;
-  const {
-    baseId,
-    currentId,
-    setCurrentId
-  } = compositeState;
-  (0, _element.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]);
-  return (0, _react.createElement)(_composite.CompositeItem, {
-    ...additionalProps,
-    ...compositeState,
-    as: _button.default,
-    id: id,
-    role: "option",
-    "aria-selected": !!isSelected,
-    ref: forwardedRef
+  const activeId = compositeStore.useState('activeId');
+  if (isSelected && !activeId) {
+    compositeStore.setActiveId(id);
+  }
+  return (0, _react.createElement)(_v.CompositeItem, {
+    render: (0, _react.createElement)(_button.default, {
+      ...additionalProps,
+      role: "option",
+      "aria-selected": !!isSelected,
+      ref: forwardedRef
+    }),
+    store: compositeStore,
+    id: id
   });
 }
 const OptionAsOption = (0, _element.forwardRef)(UnforwardedOptionAsOption);
@@ -86,20 +68,19 @@ function Option({
   tooltipText,
   ...additionalProps
 }) {
-  const compositeContext = (0, _element.useContext)(_circularOptionPickerContext.CircularOptionPickerContext);
   const {
-    isComposite,
-    baseId
-  } = compositeContext;
+    baseId,
+    compositeStore
+  } = (0, _element.useContext)(_circularOptionPickerContext.CircularOptionPickerContext);
   const id = (0, _compose.useInstanceId)(Option, baseId || 'components-circular-option-picker__option');
   const commonProps = {
     id,
     className: 'components-circular-option-picker__option',
     ...additionalProps
   };
-  const optionControl = isComposite ? (0, _react.createElement)(OptionAsOption, {
+  const optionControl = compositeStore ? (0, _react.createElement)(OptionAsOption, {
     ...commonProps,
-    context: compositeContext,
+    compositeStore: compositeStore,
     isSelected: isSelected
   }) : (0, _react.createElement)(OptionAsButton, {
     ...commonProps,

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

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_compose","_element","_icons","_circularOptionPickerContext","_button","_composite","_tooltip","hasSelectedOption","Map","UnforwardedOptionAsButton","props","forwardedRef","isPressed","additionalProps","_react","createElement","default","ref","OptionAsButton","forwardRef","UnforwardedOptionAsOption","id","isSelected","context","isComposite","_compositeState","compositeState","baseId","currentId","setCurrentId","useEffect","get","set","CompositeItem","as","Button","role","OptionAsOption","Option","className","selectedIconProps","tooltipText","compositeContext","useContext","CircularOptionPickerContext","useInstanceId","commonProps","optionControl","classnames","text","Icon","icon","check"],"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","_interopRequireDefault","require","_compose","_element","_icons","_circularOptionPickerContext","_button","_v","_tooltip","UnforwardedOptionAsButton","props","forwardedRef","isPressed","additionalProps","_react","createElement","default","ref","OptionAsButton","forwardRef","UnforwardedOptionAsOption","id","isSelected","compositeStore","activeId","useState","setActiveId","CompositeItem","render","role","store","OptionAsOption","Option","className","selectedIconProps","tooltipText","baseId","useContext","CircularOptionPickerContext","useInstanceId","commonProps","optionControl","classnames","text","Icon","icon","check"],"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":"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"}

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

@@ -8,10 +8,9 @@ exports.default = void 0;
 var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _compose = require("@wordpress/compose");
-var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
 var _circularOptionPickerContext = require("./circular-option-picker-context");
-var _composite = require("../composite");
+var _v = require("../composite/v2");
 var _circularOptionPickerOption = require("./circular-option-picker-option");
 var _circularOptionPickerOptionGroup = require("./circular-option-picker-option-group");
 var _circularOptionPickerActions = require("./circular-option-picker-actions");
@@ -83,42 +82,22 @@ function ListboxCircularOptionPicker(props) {
     children,
     ...additionalProps
   } = props;
-  const rtl = (0, _i18n.isRTL)();
-  const compositeState = (0, _composite.useCompositeState)({
-    baseId,
-    loop,
-    rtl
+  const compositeStore = (0, _v.useCompositeStore)({
+    focusLoop: loop,
+    rtl: (0, _i18n.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.
-
-  (0, _element.useEffect)(() => {
-    setBaseId(baseId);
-  }, [setBaseId, baseId]);
-  (0, _element.useEffect)(() => {
-    setLoop(loop);
-  }, [setLoop, loop]);
-  (0, _element.useEffect)(() => {
-    setRTL(rtl);
-  }, [setRTL, rtl]);
   const compositeContext = {
-    isComposite: true,
-    ...compositeState
+    baseId,
+    compositeStore
   };
   return (0, _react.createElement)("div", {
     className: className
   }, (0, _react.createElement)(_circularOptionPickerContext.CircularOptionPickerContext.Provider, {
     value: compositeContext
-  }, (0, _react.createElement)(_composite.Composite, {
+  }, (0, _react.createElement)(_v.Composite, {
     ...additionalProps,
-    ...compositeState,
+    id: baseId,
+    store: compositeStore,
     role: 'listbox'
   }, options), children, actions));
 }
@@ -131,10 +110,10 @@ function ButtonsCircularOptionPicker(props) {
     ...additionalProps
   } = props;
   return (0, _react.createElement)("div", {
-    ...additionalProps
+    ...additionalProps,
+    id: baseId
   }, (0, _react.createElement)(_circularOptionPickerContext.CircularOptionPickerContext.Provider, {
     value: {
-      isComposite: false,
       baseId
     }
   }, options, children, actions));

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

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_compose","_element","_i18n","_circularOptionPickerContext","_composite","_circularOptionPickerOption","_circularOptionPickerOptionGroup","_circularOptionPickerActions","ListboxCircularOptionPicker","props","actions","options","baseId","className","loop","children","additionalProps","rtl","isRTL","compositeState","useCompositeState","setBaseId","setLoop","setRTL","useEffect","compositeContext","isComposite","_react","createElement","CircularOptionPickerContext","Provider","value","Composite","role","ButtonsCircularOptionPicker","CircularOptionPicker","asButtons","actionsProp","optionsProp","useInstanceId","id","OptionPickerImplementation","undefined","classnames","Option","OptionGroup","ButtonAction","DropdownLinkAction","_default","exports","default"],"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","_interopRequireDefault","require","_compose","_i18n","_circularOptionPickerContext","_v","_circularOptionPickerOption","_circularOptionPickerOptionGroup","_circularOptionPickerActions","ListboxCircularOptionPicker","props","actions","options","baseId","className","loop","children","additionalProps","compositeStore","useCompositeStore","focusLoop","rtl","isRTL","compositeContext","_react","createElement","CircularOptionPickerContext","Provider","value","Composite","id","store","role","ButtonsCircularOptionPicker","CircularOptionPicker","asButtons","actionsProp","optionsProp","useInstanceId","OptionPickerImplementation","undefined","classnames","Option","OptionGroup","ButtonAction","DropdownLinkAction","_default","exports","default"],"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":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAKA,IAAAG,4BAAA,GAAAH,OAAA;AACA,IAAAI,EAAA,GAAAJ,OAAA;AAMA,IAAAK,2BAAA,GAAAL,OAAA;AACA,IAAAM,gCAAA,GAAAN,OAAA;AACA,IAAAO,4BAAA,GAAAP,OAAA;AAvBA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;AAeA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASQ,2BAA2BA,CACnCC,KAAuC,EACtC;EACD,MAAM;IACLC,OAAO;IACPC,OAAO;IACPC,MAAM;IACNC,SAAS;IACTC,IAAI,GAAG,IAAI;IACXC,QAAQ;IACR,GAAGC;EACJ,CAAC,GAAGP,KAAK;EAET,MAAMQ,cAAc,GAAG,IAAAC,oBAAiB,EAAE;IACzCC,SAAS,EAAEL,IAAI;IACfM,GAAG,EAAE,IAAAC,WAAK,EAAC;EACZ,CAAE,CAAC;EAEH,MAAMC,gBAAgB,GAAG;IACxBV,MAAM;IACNK;EACD,CAAC;EAED,OACC,IAAAM,MAAA,CAAAC,aAAA;IAAKX,SAAS,EAAGA;EAAW,GAC3B,IAAAU,MAAA,CAAAC,aAAA,EAACrB,4BAAA,CAAAsB,2BAA2B,CAACC,QAAQ;IAACC,KAAK,EAAGL;EAAkB,GAC/D,IAAAC,MAAA,CAAAC,aAAA,EAACpB,EAAA,CAAAwB,SAAS;IAAA,GACJZ,eAAe;IACpBa,EAAE,EAAGjB,MAAQ;IACbkB,KAAK,EAAGb,cAAgB;IACxBc,IAAI,EAAG;EAAW,GAEhBpB,OACQ,CAAC,EACVI,QAAQ,EACRL,OACmC,CAClC,CAAC;AAER;AAEA,SAASsB,2BAA2BA,CACnCvB,KAAuC,EACtC;EACD,MAAM;IAAEC,OAAO;IAAEC,OAAO;IAAEI,QAAQ;IAAEH,MAAM;IAAE,GAAGI;EAAgB,CAAC,GAAGP,KAAK;EAExE,OACC,IAAAc,MAAA,CAAAC,aAAA;IAAA,GAAUR,eAAe;IAAGa,EAAE,EAAGjB;EAAQ,GACxC,IAAAW,MAAA,CAAAC,aAAA,EAACrB,4BAAA,CAAAsB,2BAA2B,CAACC,QAAQ;IAACC,KAAK,EAAG;MAAEf;IAAO;EAAG,GACvDD,OAAO,EACPI,QAAQ,EACRL,OACmC,CAClC,CAAC;AAER;AAEA,SAASuB,oBAAoBA,CAAExB,KAAgC,EAAG;EACjE,MAAM;IACLyB,SAAS;IACTxB,OAAO,EAAEyB,WAAW;IACpBxB,OAAO,EAAEyB,WAAW;IACpBrB,QAAQ;IACRF,SAAS;IACT,GAAGG;EACJ,CAAC,GAAGP,KAAK;EAET,MAAMG,MAAM,GAAG,IAAAyB,sBAAa,EAC3BJ,oBAAoB,EACpB,mCAAmC,EACnCjB,eAAe,CAACa,EACjB,CAAC;EAED,MAAMS,0BAA0B,GAAGJ,SAAS,GACzCF,2BAA2B,GAC3BxB,2BAA2B;EAE9B,MAAME,OAAO,GAAGyB,WAAW,GAC1B,IAAAZ,MAAA,CAAAC,aAAA;IAAKX,SAAS,EAAC;EAAyD,GACrEsB,WACE,CAAC,GACHI,SAAS;EAEb,MAAM5B,OAAO,GACZ,IAAAY,MAAA,CAAAC,aAAA;IAAKX,SAAS,EAAG;EAA+C,GAC7DuB,WACE,CACL;EAED,OACC,IAAAb,MAAA,CAAAC,aAAA,EAACc,0BAA0B;IAAA,GACrBtB,eAAe;IACpBJ,MAAM,EAAGA,MAAQ;IACjBC,SAAS,EAAG,IAAA2B,mBAAU,EACrB,mCAAmC,EACnC3B,SACD,CAAG;IACHH,OAAO,EAAGA,OAAS;IACnBC,OAAO,EAAGA;EAAS,GAEjBI,QACyB,CAAC;AAE/B;AAEAkB,oBAAoB,CAACQ,MAAM,GAAGA,kCAAM;AACpCR,oBAAoB,CAACS,WAAW,GAAGA,4CAAW;AAC9CT,oBAAoB,CAACU,YAAY,GAAGA,yCAAY;AAChDV,oBAAoB,CAACW,kBAAkB,GAAGA,+CAAkB;AAAC,IAAAC,QAAA,GAE9CZ,oBAAoB;AAAAa,OAAA,CAAAC,OAAA,GAAAF,QAAA"}

package/build/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/color-palette/index.js

@@ -121,6 +121,10 @@ function CustomColorPickerDropdown({
 }) {
   const popoverProps = (0, _element.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.
@@ -233,13 +237,14 @@ function UnforwardedColorPalette(props, forwardedRef) {
       "aria-label": customColorAccessibleLabel,
       style: {
         background: value
-      }
+      },
+      type: "button"
     }), (0, _react.createElement)(_vStack.VStack, {
       className: "components-color-palette__custom-color-text-wrapper",
       spacing: 0.5
     }, (0, _react.createElement)(_truncate.Truncate, {
       className: "components-color-palette__custom-color-name"
-    }, value ? buttonLabelName : 'No color selected'), (0, _react.createElement)(_truncate.Truncate, {
+    }, value ? buttonLabelName : (0, _i18n.__)('No color selected')), (0, _react.createElement)(_truncate.Truncate, {
       className: (0, _classnames.default)('components-color-palette__custom-color-value', {
         'components-color-palette__custom-color-value--is-hex': isHex
       })

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

@@ -1 +1 @@
-{"version":3,"names":["_colord","require","_names","_interopRequireDefault","_a11y","_classnames","_compose","_i18n","_element","_dropdown","_colorPicker","_circularOptionPicker","_vStack","_truncate","_styles","_dropdownContentWrapper","_utils","extend","namesPlugin","a11yPlugin","SinglePalette","className","clearColor","colors","onChange","value","additionalProps","colorOptions","useMemo","map","color","name","index","colordColor","colord","isSelected","_react","createElement","default","Option","key","selectedIconProps","fill","contrast","tooltipText","sprintf","__","style","backgroundColor","onClick","OptionGroup","options","MultiplePalettes","headingLevel","instanceId","useInstanceId","length","VStack","spacing","colorPalette","id","ColorHeading","level","newColor","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","placement","offset","contentClassName","UnforwardedColorPalette","forwardedRef","asButtons","loop","clearable","disableCustomColors","enableAlpha","__experimentalIsRenderedInSidebar","ariaLabel","ariaLabelledby","normalizedColorValue","setNormalizedColorValue","useState","useCallback","undefined","customColorPaletteCallbackRef","node","normalizeColorValue","hasMultipleColorOrigins","isMultiplePaletteArray","buttonLabelName","extractColorNameFromCurrentValue","renderCustomColorPicker","paddingSize","ColorPicker","isHex","startsWith","displayValue","replace","customColorAccessibleLabel","paletteCommonProps","actions","ButtonAction","metaProps","_metaProps","ref","renderContent","renderToggle","isOpen","onToggle","background","Truncate","classnames","ColorPalette","forwardRef","exports","_default"],"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","require","_names","_interopRequireDefault","_a11y","_classnames","_compose","_i18n","_element","_dropdown","_colorPicker","_circularOptionPicker","_vStack","_truncate","_styles","_dropdownContentWrapper","_utils","extend","namesPlugin","a11yPlugin","SinglePalette","className","clearColor","colors","onChange","value","additionalProps","colorOptions","useMemo","map","color","name","index","colordColor","colord","isSelected","_react","createElement","default","Option","key","selectedIconProps","fill","contrast","tooltipText","sprintf","__","style","backgroundColor","onClick","OptionGroup","options","MultiplePalettes","headingLevel","instanceId","useInstanceId","length","VStack","spacing","colorPalette","id","ColorHeading","level","newColor","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","resize","placement","offset","contentClassName","UnforwardedColorPalette","forwardedRef","asButtons","loop","clearable","disableCustomColors","enableAlpha","__experimentalIsRenderedInSidebar","ariaLabel","ariaLabelledby","normalizedColorValue","setNormalizedColorValue","useState","useCallback","undefined","customColorPaletteCallbackRef","node","normalizeColorValue","hasMultipleColorOrigins","isMultiplePaletteArray","buttonLabelName","extractColorNameFromCurrentValue","renderCustomColorPicker","paddingSize","ColorPicker","isHex","startsWith","displayValue","replace","customColorAccessibleLabel","paletteCommonProps","actions","ButtonAction","metaProps","_metaProps","ref","renderContent","renderToggle","isOpen","onToggle","background","type","Truncate","classnames","ColorPalette","forwardRef","exports","_default"],"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/color-picker/component.js

@@ -47,8 +47,15 @@ const UnconnectedColorPicker = (props, forwardedRef) => {
     onChange,
     defaultValue = '#fff',
     copyFormat,
+    // Context
+    onPickerDragStart,
+    onPickerDragEnd,
     ...divProps
   } = (0, _context.useContextSystem)(props, 'ColorPicker');
+  const [containerEl, setContainerEl] = (0, _element.useState)(null);
+  const containerRef = node => {
+    setContainerEl(node);
+  };
 
   // Use a safe default value for the color and remove the possibility of `undefined`.
   const [color, setColor] = (0, _hooks.useControlledValue)({
@@ -65,12 +72,15 @@ const UnconnectedColorPicker = (props, forwardedRef) => {
   }, [debouncedSetColor]);
   const [colorType, setColorType] = (0, _element.useState)(copyFormat || 'hex');
   return (0, _react.createElement)(_styles.ColorfulWrapper, {
-    ref: forwardedRef,
+    ref: (0, _compose.useMergeRefs)([containerRef, forwardedRef]),
     ...divProps
   }, (0, _react.createElement)(_picker.Picker, {
+    containerEl: containerEl,
     onChange: handleChange,
     color: safeColordColor,
-    enableAlpha: enableAlpha
+    enableAlpha: enableAlpha,
+    onDragStart: onPickerDragStart,
+    onDragEnd: onPickerDragEnd
   }), (0, _react.createElement)(_styles.AuxiliaryColorArtefactWrapper, null, (0, _react.createElement)(_styles.AuxiliaryColorArtefactHStackHeader, {
     justify: "space-between"
   }, (0, _react.createElement)(_styles.SelectControl, {