@wordpress/commands 0.2.0 → 0.4.0

package/build-module/components/command-menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/commands/src/components/command-menu.js"],"names":["Command","useSelect","useDispatch","useState","useEffect","useRef","useCallback","__","Modal","TextHighlight","store","keyboardShortcutsStore","useShortcut","commandsStore","CommandMenuLoader","name","search","hook","setLoader","close","isLoading","commands","map","command","callback","label","CommandMenuLoaderWrapper","currentLoader","key","setKey","current","prevKey","CommandMenuGroup","group","loaders","select","getCommands","getCommandLoaders","loader","CommandMenu","registerShortcut","setSearch","open","setOpen","groups","getGroups","setLoaders","category","description","keyCombination","modifier","character","event","preventDefault","prevOpen","bindGlobal","value","Object","values","some","Boolean"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { Command } from 'cmdk';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useState, useEffect, useRef, useCallback } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { Modal, TextHighlight } from '@wordpress/components';\nimport {\n\tstore as keyboardShortcutsStore,\n\tuseShortcut,\n} from '@wordpress/keyboard-shortcuts';\n\n/**\n * Internal dependencies\n */\nimport { store as commandsStore } from '../store';\n\nfunction CommandMenuLoader( { name, search, hook, setLoader, close } ) {\n\tconst { isLoading, commands = [] } = hook( { search } ) ?? {};\n\tuseEffect( () => {\n\t\tsetLoader( name, isLoading );\n\t}, [ setLoader, name, isLoading ] );\n\n\treturn (\n\t\t<>\n\t\t\t<Command.List>\n\t\t\t\t{ isLoading && (\n\t\t\t\t\t<Command.Loading>{ __( 'Searching…' ) }</Command.Loading>\n\t\t\t\t) }\n\n\t\t\t\t{ commands.map( ( command ) => (\n\t\t\t\t\t<Command.Item\n\t\t\t\t\t\tkey={ command.name }\n\t\t\t\t\t\tvalue={ command.name }\n\t\t\t\t\t\tonSelect={ () => command.callback( { close } ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<span className=\"commands-command-menu__item\">\n\t\t\t\t\t\t\t<TextHighlight\n\t\t\t\t\t\t\t\ttext={ command.label }\n\t\t\t\t\t\t\t\thighlight={ search }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</Command.Item>\n\t\t\t\t) ) }\n\t\t\t</Command.List>\n\t\t</>\n\t);\n}\n\nexport function CommandMenuLoaderWrapper( { hook, search, setLoader, close } ) {\n\t// The \"hook\" prop is actually a custom React hook\n\t// so to avoid breaking the rules of hooks\n\t// the CommandMenuLoaderWrapper component need to be\n\t// remounted on each hook prop change\n\t// We use the key state to make sure we do that properly.\n\tconst currentLoader = useRef( hook );\n\tconst [ key, setKey ] = useState( 0 );\n\tuseEffect( () => {\n\t\tif ( currentLoader.current !== hook ) {\n\t\t\tcurrentLoader.current = hook;\n\t\t\tsetKey( ( prevKey ) => prevKey + 1 );\n\t\t}\n\t}, [ hook ] );\n\n\treturn (\n\t\t<CommandMenuLoader\n\t\t\tkey={ key }\n\t\t\thook={ currentLoader.current }\n\t\t\tsearch={ search }\n\t\t\tsetLoader={ setLoader }\n\t\t\tclose={ close }\n\t\t/>\n\t);\n}\n\nexport function CommandMenuGroup( { group, search, setLoader, close } ) {\n\tconst { commands, loaders } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getCommands, getCommandLoaders } = select( commandsStore );\n\t\t\treturn {\n\t\t\t\tcommands: getCommands( group ),\n\t\t\t\tloaders: getCommandLoaders( group ),\n\t\t\t};\n\t\t},\n\t\t[ group ]\n\t);\n\n\treturn (\n\t\t<Command.Group heading={ group }>\n\t\t\t{ commands.map( ( command ) => (\n\t\t\t\t<Command.Item\n\t\t\t\t\tkey={ command.name }\n\t\t\t\t\tvalue={ command.name }\n\t\t\t\t\tonSelect={ () => command.callback( { close } ) }\n\t\t\t\t>\n\t\t\t\t\t<span className=\"commands-command-menu__item\">\n\t\t\t\t\t\t<TextHighlight\n\t\t\t\t\t\t\ttext={ command.label }\n\t\t\t\t\t\t\thighlight={ search }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</span>\n\t\t\t\t</Command.Item>\n\t\t\t) ) }\n\t\t\t{ loaders.map( ( loader ) => (\n\t\t\t\t<CommandMenuLoaderWrapper\n\t\t\t\t\tkey={ loader.name }\n\t\t\t\t\thook={ loader.hook }\n\t\t\t\t\tsearch={ search }\n\t\t\t\t\tsetLoader={ setLoader }\n\t\t\t\t\tclose={ close }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</Command.Group>\n\t);\n}\n\nexport function CommandMenu() {\n\tconst { registerShortcut } = useDispatch( keyboardShortcutsStore );\n\tconst [ search, setSearch ] = useState( '' );\n\tconst [ open, setOpen ] = useState( false );\n\tconst { groups } = useSelect( ( select ) => {\n\t\tconst { getGroups } = select( commandsStore );\n\t\treturn {\n\t\t\tgroups: getGroups(),\n\t\t};\n\t}, [] );\n\tconst [ loaders, setLoaders ] = useState( {} );\n\n\tuseEffect( () => {\n\t\tregisterShortcut( {\n\t\t\tname: 'core/commands',\n\t\t\tcategory: 'global',\n\t\t\tdescription: __( 'Open the global command menu' ),\n\t\t\tkeyCombination: {\n\t\t\t\tmodifier: 'primary',\n\t\t\t\tcharacter: 'k',\n\t\t\t},\n\t\t} );\n\t}, [ registerShortcut ] );\n\n\tuseShortcut(\n\t\t'core/commands',\n\t\t( event ) => {\n\t\t\tevent.preventDefault();\n\t\t\tsetOpen( ( prevOpen ) => ! prevOpen );\n\t\t},\n\t\t{\n\t\t\tbindGlobal: true,\n\t\t}\n\t);\n\n\tconst setLoader = useCallback(\n\t\t( name, value ) =>\n\t\t\tsetLoaders( ( current ) => ( {\n\t\t\t\t...current,\n\t\t\t\t[ name ]: value,\n\t\t\t} ) ),\n\t\t[]\n\t);\n\tconst close = () => {\n\t\tsetSearch( '' );\n\t\tsetOpen( false );\n\t};\n\n\tif ( ! open ) {\n\t\treturn false;\n\t}\n\tconst isLoading = Object.values( loaders ).some( Boolean );\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName=\"commands-command-menu\"\n\t\t\toverlayClassName=\"commands-command-menu__overlay\"\n\t\t\tonRequestClose={ close }\n\t\t\t__experimentalHideHeader\n\t\t>\n\t\t\t<div className=\"commands-command-menu__container\">\n\t\t\t\t<Command label={ __( 'Global Command Menu' ) }>\n\t\t\t\t\t<div className=\"commands-command-menu__header\">\n\t\t\t\t\t\t<Command.Input\n\t\t\t\t\t\t\t// The input should be focused when the modal is opened.\n\t\t\t\t\t\t\t// eslint-disable-next-line jsx-a11y/no-autofocus\n\t\t\t\t\t\t\tautoFocus\n\t\t\t\t\t\t\tvalue={ search }\n\t\t\t\t\t\t\tonValueChange={ setSearch }\n\t\t\t\t\t\t\tplaceholder={ __(\n\t\t\t\t\t\t\t\t'Search for content and templates, or try commands like \"Add…\"'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Command.List>\n\t\t\t\t\t\t{ ! isLoading && (\n\t\t\t\t\t\t\t<Command.Empty>\n\t\t\t\t\t\t\t\t{ __( 'No results found.' ) }\n\t\t\t\t\t\t\t</Command.Empty>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ groups.map( ( group ) => (\n\t\t\t\t\t\t\t<CommandMenuGroup\n\t\t\t\t\t\t\t\tkey={ group }\n\t\t\t\t\t\t\t\tgroup={ group }\n\t\t\t\t\t\t\t\tsearch={ search }\n\t\t\t\t\t\t\t\tsetLoader={ setLoader }\n\t\t\t\t\t\t\t\tclose={ close }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Command.List>\n\t\t\t\t</Command>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/commands/src/components/command-menu.js"],"names":["Command","useSelect","useDispatch","useState","useEffect","useRef","useCallback","__","Modal","TextHighlight","__experimentalHStack","HStack","store","keyboardShortcutsStore","useShortcut","Icon","commandsStore","CommandMenuLoader","name","search","hook","setLoader","close","isLoading","commands","map","command","callback","icon","label","CommandMenuLoaderWrapper","currentLoader","key","setKey","current","prevKey","CommandMenuGroup","group","loaders","select","getCommands","getCommandLoaders","loader","CommandMenu","registerShortcut","setSearch","groups","isOpen","getGroups","_isOpen","open","setLoaders","commandMenuInput","category","description","keyCombination","modifier","character","event","preventDefault","bindGlobal","value","closeAndReset","focus","Object","values","some","Boolean"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { Command } from 'cmdk';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useState, useEffect, useRef, useCallback } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tModal,\n\tTextHighlight,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport {\n\tstore as keyboardShortcutsStore,\n\tuseShortcut,\n} from '@wordpress/keyboard-shortcuts';\nimport { Icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { store as commandsStore } from '../store';\n\nfunction CommandMenuLoader( { name, search, hook, setLoader, close } ) {\n\tconst { isLoading, commands = [] } = hook( { search } ) ?? {};\n\tuseEffect( () => {\n\t\tsetLoader( name, isLoading );\n\t}, [ setLoader, name, isLoading ] );\n\n\treturn (\n\t\t<>\n\t\t\t<Command.List>\n\t\t\t\t{ isLoading && (\n\t\t\t\t\t<Command.Loading>{ __( 'Searching…' ) }</Command.Loading>\n\t\t\t\t) }\n\n\t\t\t\t{ commands.map( ( command ) => (\n\t\t\t\t\t<Command.Item\n\t\t\t\t\t\tkey={ command.name }\n\t\t\t\t\t\tvalue={ command.name }\n\t\t\t\t\t\tonSelect={ () => command.callback( { close } ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\talignment=\"left\"\n\t\t\t\t\t\t\tclassName=\"commands-command-menu__item\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Icon icon={ command.icon } />\n\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t<TextHighlight\n\t\t\t\t\t\t\t\t\ttext={ command.label }\n\t\t\t\t\t\t\t\t\thighlight={ search }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</Command.Item>\n\t\t\t\t) ) }\n\t\t\t</Command.List>\n\t\t</>\n\t);\n}\n\nexport function CommandMenuLoaderWrapper( { hook, search, setLoader, close } ) {\n\t// The \"hook\" prop is actually a custom React hook\n\t// so to avoid breaking the rules of hooks\n\t// the CommandMenuLoaderWrapper component need to be\n\t// remounted on each hook prop change\n\t// We use the key state to make sure we do that properly.\n\tconst currentLoader = useRef( hook );\n\tconst [ key, setKey ] = useState( 0 );\n\tuseEffect( () => {\n\t\tif ( currentLoader.current !== hook ) {\n\t\t\tcurrentLoader.current = hook;\n\t\t\tsetKey( ( prevKey ) => prevKey + 1 );\n\t\t}\n\t}, [ hook ] );\n\n\treturn (\n\t\t<CommandMenuLoader\n\t\t\tkey={ key }\n\t\t\thook={ currentLoader.current }\n\t\t\tsearch={ search }\n\t\t\tsetLoader={ setLoader }\n\t\t\tclose={ close }\n\t\t/>\n\t);\n}\n\nexport function CommandMenuGroup( { group, search, setLoader, close } ) {\n\tconst { commands, loaders } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getCommands, getCommandLoaders } = select( commandsStore );\n\t\t\treturn {\n\t\t\t\tcommands: getCommands( group ),\n\t\t\t\tloaders: getCommandLoaders( group ),\n\t\t\t};\n\t\t},\n\t\t[ group ]\n\t);\n\n\treturn (\n\t\t<Command.Group>\n\t\t\t{ commands.map( ( command ) => (\n\t\t\t\t<Command.Item\n\t\t\t\t\tkey={ command.name }\n\t\t\t\t\tvalue={ command.name }\n\t\t\t\t\tonSelect={ () => command.callback( { close } ) }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\talignment=\"left\"\n\t\t\t\t\t\tclassName=\"commands-command-menu__item\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon icon={ command.icon } />\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t<TextHighlight\n\t\t\t\t\t\t\t\ttext={ command.label }\n\t\t\t\t\t\t\t\thighlight={ search }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</HStack>\n\t\t\t\t</Command.Item>\n\t\t\t) ) }\n\t\t\t{ loaders.map( ( loader ) => (\n\t\t\t\t<CommandMenuLoaderWrapper\n\t\t\t\t\tkey={ loader.name }\n\t\t\t\t\thook={ loader.hook }\n\t\t\t\t\tsearch={ search }\n\t\t\t\t\tsetLoader={ setLoader }\n\t\t\t\t\tclose={ close }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</Command.Group>\n\t);\n}\n\nexport function CommandMenu() {\n\tconst { registerShortcut } = useDispatch( keyboardShortcutsStore );\n\tconst [ search, setSearch ] = useState( '' );\n\tconst { groups, isOpen } = useSelect( ( select ) => {\n\t\tconst { getGroups, isOpen: _isOpen } = select( commandsStore );\n\t\treturn {\n\t\t\tgroups: getGroups(),\n\t\t\tisOpen: _isOpen(),\n\t\t};\n\t}, [] );\n\tconst { open, close } = useDispatch( commandsStore );\n\tconst [ loaders, setLoaders ] = useState( {} );\n\tconst commandMenuInput = useRef();\n\n\tuseEffect( () => {\n\t\tregisterShortcut( {\n\t\t\tname: 'core/commands',\n\t\t\tcategory: 'global',\n\t\t\tdescription: __( 'Open the global command menu' ),\n\t\t\tkeyCombination: {\n\t\t\t\tmodifier: 'primary',\n\t\t\t\tcharacter: 'k',\n\t\t\t},\n\t\t} );\n\t}, [ registerShortcut ] );\n\n\tuseShortcut(\n\t\t'core/commands',\n\t\t( event ) => {\n\t\t\tevent.preventDefault();\n\t\t\tif ( isOpen ) {\n\t\t\t\tclose();\n\t\t\t} else {\n\t\t\t\topen();\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\tbindGlobal: true,\n\t\t}\n\t);\n\n\tconst setLoader = useCallback(\n\t\t( name, value ) =>\n\t\t\tsetLoaders( ( current ) => ( {\n\t\t\t\t...current,\n\t\t\t\t[ name ]: value,\n\t\t\t} ) ),\n\t\t[]\n\t);\n\tconst closeAndReset = () => {\n\t\tsetSearch( '' );\n\t\tclose();\n\t};\n\n\tuseEffect( () => {\n\t\t// Focus the command menu input when mounting the modal.\n\t\tif ( isOpen ) {\n\t\t\tcommandMenuInput.current.focus();\n\t\t}\n\t}, [ isOpen ] );\n\n\tif ( ! isOpen ) {\n\t\treturn false;\n\t}\n\tconst isLoading = Object.values( loaders ).some( Boolean );\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName=\"commands-command-menu\"\n\t\t\toverlayClassName=\"commands-command-menu__overlay\"\n\t\t\tonRequestClose={ closeAndReset }\n\t\t\t__experimentalHideHeader\n\t\t>\n\t\t\t<div className=\"commands-command-menu__container\">\n\t\t\t\t<Command label={ __( 'Global Command Menu' ) }>\n\t\t\t\t\t<div className=\"commands-command-menu__header\">\n\t\t\t\t\t\t<Command.Input\n\t\t\t\t\t\t\tref={ commandMenuInput }\n\t\t\t\t\t\t\tvalue={ search }\n\t\t\t\t\t\t\tonValueChange={ setSearch }\n\t\t\t\t\t\t\tplaceholder={ __( 'Type a command or search' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t{ search && (\n\t\t\t\t\t\t<Command.List>\n\t\t\t\t\t\t\t{ ! isLoading && (\n\t\t\t\t\t\t\t\t<Command.Empty>\n\t\t\t\t\t\t\t\t\t{ __( 'No results found.' ) }\n\t\t\t\t\t\t\t\t</Command.Empty>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ groups.map( ( group ) => (\n\t\t\t\t\t\t\t\t<CommandMenuGroup\n\t\t\t\t\t\t\t\t\tkey={ group }\n\t\t\t\t\t\t\t\t\tgroup={ group }\n\t\t\t\t\t\t\t\t\tsearch={ search }\n\t\t\t\t\t\t\t\t\tsetLoader={ setLoader }\n\t\t\t\t\t\t\t\t\tclose={ closeAndReset }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</Command.List>\n\t\t\t\t\t) }\n\t\t\t\t</Command>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n}\n"]}

package/build-module/hooks/use-command.js

@@ -28,11 +28,12 @@ export default function useCommand(command) {
       name: command.name,
       group: command.group,
       label: command.label,
+      icon: command.icon,
       callback: currentCallback.current
     });
     return () => {
       unregisterCommand(command.name, command.group);
     };
-  }, [command.name, command.label, command.group, registerCommand, unregisterCommand]);
+  }, [command.name, command.label, command.group, command.icon, registerCommand, unregisterCommand]);
 }
 //# sourceMappingURL=use-command.js.map

package/build-module/hooks/use-command.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/commands/src/hooks/use-command.js"],"names":["useEffect","useRef","useDispatch","store","commandsStore","useCommand","command","registerCommand","unregisterCommand","currentCallback","callback","current","name","group","label"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAT,EAAoBC,MAApB,QAAkC,oBAAlC;AACA,SAASC,WAAT,QAA4B,iBAA5B;AAEA;AACA;AACA;;AACA,SAASC,KAAK,IAAIC,aAAlB,QAAuC,UAAvC;AAEA;AACA;AACA;AACA;AACA;;AACA,eAAe,SAASC,UAAT,CAAqBC,OAArB,EAA+B;AAC7C,QAAM;AAAEC,IAAAA,eAAF;AAAmBC,IAAAA;AAAnB,MAAyCN,WAAW,CAAEE,aAAF,CAA1D;AACA,QAAMK,eAAe,GAAGR,MAAM,CAAEK,OAAO,CAACI,QAAV,CAA9B;AACAV,EAAAA,SAAS,CAAE,MAAM;AAChBS,IAAAA,eAAe,CAACE,OAAhB,GAA0BL,OAAO,CAACI,QAAlC;AACA,GAFQ,EAEN,CAAEJ,OAAO,CAACI,QAAV,CAFM,CAAT;AAIAV,EAAAA,SAAS,CAAE,MAAM;AAChBO,IAAAA,eAAe,CAAE;AAChBK,MAAAA,IAAI,EAAEN,OAAO,CAACM,IADE;AAEhBC,MAAAA,KAAK,EAAEP,OAAO,CAACO,KAFC;AAGhBC,MAAAA,KAAK,EAAER,OAAO,CAACQ,KAHC;AAIhBJ,MAAAA,QAAQ,EAAED,eAAe,CAACE;AAJV,KAAF,CAAf;AAMA,WAAO,MAAM;AACZH,MAAAA,iBAAiB,CAAEF,OAAO,CAACM,IAAV,EAAgBN,OAAO,CAACO,KAAxB,CAAjB;AACA,KAFD;AAGA,GAVQ,EAUN,CACFP,OAAO,CAACM,IADN,EAEFN,OAAO,CAACQ,KAFN,EAGFR,OAAO,CAACO,KAHN,EAIFN,eAJE,EAKFC,iBALE,CAVM,CAAT;AAiBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as commandsStore } from '../store';\n\n/**\n * Attach a command to the Global command menu.\n *\n * @param {import('../store/actions').WPCommandConfig} command command config.\n */\nexport default function useCommand( command ) {\n\tconst { registerCommand, unregisterCommand } = useDispatch( commandsStore );\n\tconst currentCallback = useRef( command.callback );\n\tuseEffect( () => {\n\t\tcurrentCallback.current = command.callback;\n\t}, [ command.callback ] );\n\n\tuseEffect( () => {\n\t\tregisterCommand( {\n\t\t\tname: command.name,\n\t\t\tgroup: command.group,\n\t\t\tlabel: command.label,\n\t\t\tcallback: currentCallback.current,\n\t\t} );\n\t\treturn () => {\n\t\t\tunregisterCommand( command.name, command.group );\n\t\t};\n\t}, [\n\t\tcommand.name,\n\t\tcommand.label,\n\t\tcommand.group,\n\t\tregisterCommand,\n\t\tunregisterCommand,\n\t] );\n}\n"]}
+{"version":3,"sources":["@wordpress/commands/src/hooks/use-command.js"],"names":["useEffect","useRef","useDispatch","store","commandsStore","useCommand","command","registerCommand","unregisterCommand","currentCallback","callback","current","name","group","label","icon"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAT,EAAoBC,MAApB,QAAkC,oBAAlC;AACA,SAASC,WAAT,QAA4B,iBAA5B;AAEA;AACA;AACA;;AACA,SAASC,KAAK,IAAIC,aAAlB,QAAuC,UAAvC;AAEA;AACA;AACA;AACA;AACA;;AACA,eAAe,SAASC,UAAT,CAAqBC,OAArB,EAA+B;AAC7C,QAAM;AAAEC,IAAAA,eAAF;AAAmBC,IAAAA;AAAnB,MAAyCN,WAAW,CAAEE,aAAF,CAA1D;AACA,QAAMK,eAAe,GAAGR,MAAM,CAAEK,OAAO,CAACI,QAAV,CAA9B;AACAV,EAAAA,SAAS,CAAE,MAAM;AAChBS,IAAAA,eAAe,CAACE,OAAhB,GAA0BL,OAAO,CAACI,QAAlC;AACA,GAFQ,EAEN,CAAEJ,OAAO,CAACI,QAAV,CAFM,CAAT;AAIAV,EAAAA,SAAS,CAAE,MAAM;AAChBO,IAAAA,eAAe,CAAE;AAChBK,MAAAA,IAAI,EAAEN,OAAO,CAACM,IADE;AAEhBC,MAAAA,KAAK,EAAEP,OAAO,CAACO,KAFC;AAGhBC,MAAAA,KAAK,EAAER,OAAO,CAACQ,KAHC;AAIhBC,MAAAA,IAAI,EAAET,OAAO,CAACS,IAJE;AAKhBL,MAAAA,QAAQ,EAAED,eAAe,CAACE;AALV,KAAF,CAAf;AAOA,WAAO,MAAM;AACZH,MAAAA,iBAAiB,CAAEF,OAAO,CAACM,IAAV,EAAgBN,OAAO,CAACO,KAAxB,CAAjB;AACA,KAFD;AAGA,GAXQ,EAWN,CACFP,OAAO,CAACM,IADN,EAEFN,OAAO,CAACQ,KAFN,EAGFR,OAAO,CAACO,KAHN,EAIFP,OAAO,CAACS,IAJN,EAKFR,eALE,EAMFC,iBANE,CAXM,CAAT;AAmBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as commandsStore } from '../store';\n\n/**\n * Attach a command to the Global command menu.\n *\n * @param {import('../store/actions').WPCommandConfig} command command config.\n */\nexport default function useCommand( command ) {\n\tconst { registerCommand, unregisterCommand } = useDispatch( commandsStore );\n\tconst currentCallback = useRef( command.callback );\n\tuseEffect( () => {\n\t\tcurrentCallback.current = command.callback;\n\t}, [ command.callback ] );\n\n\tuseEffect( () => {\n\t\tregisterCommand( {\n\t\t\tname: command.name,\n\t\t\tgroup: command.group,\n\t\t\tlabel: command.label,\n\t\t\ticon: command.icon,\n\t\t\tcallback: currentCallback.current,\n\t\t} );\n\t\treturn () => {\n\t\t\tunregisterCommand( command.name, command.group );\n\t\t};\n\t}, [\n\t\tcommand.name,\n\t\tcommand.label,\n\t\tcommand.group,\n\t\tcommand.icon,\n\t\tregisterCommand,\n\t\tunregisterCommand,\n\t] );\n}\n"]}

package/build-module/private-apis.js

@@ -8,6 +8,7 @@ import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/pri
 
 import { default as useCommand } from './hooks/use-command';
 import { default as useCommandLoader } from './hooks/use-command-loader';
+import { store } from './store';
 export const {
   lock,
   unlock
@@ -15,6 +16,7 @@ export const {
 export const privateApis = {};
 lock(privateApis, {
   useCommand,
-  useCommandLoader
+  useCommandLoader,
+  store
 });
 //# sourceMappingURL=private-apis.js.map

package/build-module/private-apis.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/commands/src/private-apis.js"],"names":["__dangerousOptInToUnstableAPIsOnlyForCoreModules","default","useCommand","useCommandLoader","lock","unlock","privateApis"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,gDAAT,QAAiE,yBAAjE;AAEA;AACA;AACA;;AACA,SAASC,OAAO,IAAIC,UAApB,QAAsC,qBAAtC;AACA,SAASD,OAAO,IAAIE,gBAApB,QAA4C,4BAA5C;AAEA,OAAO,MAAM;AAAEC,EAAAA,IAAF;AAAQC,EAAAA;AAAR,IACZL,gDAAgD,CAC/C,8GAD+C,EAE/C,qBAF+C,CAD1C;AAMP,OAAO,MAAMM,WAAW,GAAG,EAApB;AACPF,IAAI,CAAEE,WAAF,EAAe;AAClBJ,EAAAA,UADkB;AAElBC,EAAAA;AAFkB,CAAf,CAAJ","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';\n\n/**\n * Internal dependencies\n */\nimport { default as useCommand } from './hooks/use-command';\nimport { default as useCommandLoader } from './hooks/use-command-loader';\n\nexport const { lock, unlock } =\n\t__dangerousOptInToUnstableAPIsOnlyForCoreModules(\n\t\t'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',\n\t\t'@wordpress/commands'\n\t);\n\nexport const privateApis = {};\nlock( privateApis, {\n\tuseCommand,\n\tuseCommandLoader,\n} );\n"]}
+{"version":3,"sources":["@wordpress/commands/src/private-apis.js"],"names":["__dangerousOptInToUnstableAPIsOnlyForCoreModules","default","useCommand","useCommandLoader","store","lock","unlock","privateApis"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,gDAAT,QAAiE,yBAAjE;AAEA;AACA;AACA;;AACA,SAASC,OAAO,IAAIC,UAApB,QAAsC,qBAAtC;AACA,SAASD,OAAO,IAAIE,gBAApB,QAA4C,4BAA5C;AACA,SAASC,KAAT,QAAsB,SAAtB;AAEA,OAAO,MAAM;AAAEC,EAAAA,IAAF;AAAQC,EAAAA;AAAR,IACZN,gDAAgD,CAC/C,8GAD+C,EAE/C,qBAF+C,CAD1C;AAMP,OAAO,MAAMO,WAAW,GAAG,EAApB;AACPF,IAAI,CAAEE,WAAF,EAAe;AAClBL,EAAAA,UADkB;AAElBC,EAAAA,gBAFkB;AAGlBC,EAAAA;AAHkB,CAAf,CAAJ","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';\n\n/**\n * Internal dependencies\n */\nimport { default as useCommand } from './hooks/use-command';\nimport { default as useCommandLoader } from './hooks/use-command-loader';\nimport { store } from './store';\n\nexport const { lock, unlock } =\n\t__dangerousOptInToUnstableAPIsOnlyForCoreModules(\n\t\t'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',\n\t\t'@wordpress/commands'\n\t);\n\nexport const privateApis = {};\nlock( privateApis, {\n\tuseCommand,\n\tuseCommandLoader,\n\tstore,\n} );\n"]}

package/build-module/store/actions.js

@@ -5,10 +5,11 @@
  *
  * @typedef {Object} WPCommandConfig
  *
- * @property {string}   name     Command name.
- * @property {string}   label    Command label.
- * @property {string=}  group    Command group.
- * @property {Function} callback Command callback.
+ * @property {string}      name     Command name.
+ * @property {string}      label    Command label.
+ * @property {string=}     group    Command group.
+ * @property {JSX.Element} icon     Command icon.
+ * @property {Function}    callback Command callback.
  */
 
 /**
@@ -36,6 +37,7 @@ export function registerCommand(_ref) {
   let {
     name,
     label,
+    icon,
     callback,
     group = ''
   } = _ref;
@@ -43,6 +45,7 @@ export function registerCommand(_ref) {
     type: 'REGISTER_COMMAND',
     name,
     label,
+    icon,
     callback,
     group
   };
@@ -100,4 +103,26 @@ export function unregisterCommandLoader(name, group) {
     group
   };
 }
+/**
+ * Opens the command center.
+ *
+ * @return {Object} action.
+ */
+
+export function open() {
+  return {
+    type: 'OPEN'
+  };
+}
+/**
+ * Closes the command center.
+ *
+ * @return {Object} action.
+ */
+
+export function close() {
+  return {
+    type: 'CLOSE'
+  };
+}
 //# sourceMappingURL=actions.js.map

package/build-module/store/actions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/commands/src/store/actions.js"],"names":["registerCommand","name","label","callback","group","type","unregisterCommand","registerCommandLoader","hook","unregisterCommandLoader"],"mappings":"AAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,eAAT,OAAkE;AAAA,MAAxC;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,KAAR;AAAeC,IAAAA,QAAf;AAAyBC,IAAAA,KAAK,GAAG;AAAjC,GAAwC;AACxE,SAAO;AACNC,IAAAA,IAAI,EAAE,kBADA;AAENJ,IAAAA,IAFM;AAGNC,IAAAA,KAHM;AAINC,IAAAA,QAJM;AAKNC,IAAAA;AALM,GAAP;AAOA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASE,iBAAT,CAA4BL,IAA5B,EAAkCG,KAAlC,EAA0C;AAChD,SAAO;AACNC,IAAAA,IAAI,EAAE,oBADA;AAENJ,IAAAA,IAFM;AAGNG,IAAAA;AAHM,GAAP;AAKA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASG,qBAAT,QAA6D;AAAA,MAA7B;AAAEN,IAAAA,IAAF;AAAQG,IAAAA,KAAK,GAAG,EAAhB;AAAoBI,IAAAA;AAApB,GAA6B;AACnE,SAAO;AACNH,IAAAA,IAAI,EAAE,yBADA;AAENJ,IAAAA,IAFM;AAGNG,IAAAA,KAHM;AAINI,IAAAA;AAJM,GAAP;AAMA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,uBAAT,CAAkCR,IAAlC,EAAwCG,KAAxC,EAAgD;AACtD,SAAO;AACNC,IAAAA,IAAI,EAAE,2BADA;AAENJ,IAAAA,IAFM;AAGNG,IAAAA;AAHM,GAAP;AAKA","sourcesContent":["/** @typedef {import('@wordpress/keycodes').WPKeycodeModifier} WPKeycodeModifier */\n\n/**\n * Configuration of a registered keyboard shortcut.\n *\n * @typedef {Object} WPCommandConfig\n *\n * @property {string}   name     Command name.\n * @property {string}   label    Command label.\n * @property {string=}  group    Command group.\n * @property {Function} callback Command callback.\n */\n\n/**\n * @typedef {(search: string) => WPCommandConfig[]} WPCommandLoaderHook hoo\n */\n\n/**\n * Command loader config.\n *\n * @typedef {Object} WPCommandLoaderConfig\n *\n * @property {string}              name  Command loader name.\n * @property {string=}             group Command loader group.\n * @property {WPCommandLoaderHook} hook  Command loader hook.\n */\n\n/**\n * Returns an action object used to register a new command.\n *\n * @param {WPCommandConfig} config Command config.\n *\n * @return {Object} action.\n */\nexport function registerCommand( { name, label, callback, group = '' } ) {\n\treturn {\n\t\ttype: 'REGISTER_COMMAND',\n\t\tname,\n\t\tlabel,\n\t\tcallback,\n\t\tgroup,\n\t};\n}\n\n/**\n * Returns an action object used to unregister a command.\n *\n * @param {string} name  Command name.\n * @param {string} group Command group.\n *\n * @return {Object} action.\n */\nexport function unregisterCommand( name, group ) {\n\treturn {\n\t\ttype: 'UNREGISTER_COMMAND',\n\t\tname,\n\t\tgroup,\n\t};\n}\n\n/**\n * Register command loader.\n *\n * @param {WPCommandLoaderConfig} config Command loader config.\n *\n * @return {Object} action.\n */\nexport function registerCommandLoader( { name, group = '', hook } ) {\n\treturn {\n\t\ttype: 'REGISTER_COMMAND_LOADER',\n\t\tname,\n\t\tgroup,\n\t\thook,\n\t};\n}\n\n/**\n * Unregister command loader hook.\n *\n * @param {string} name  Command loader name.\n * @param {string} group Command loader group.\n *\n * @return {Object} action.\n */\nexport function unregisterCommandLoader( name, group ) {\n\treturn {\n\t\ttype: 'UNREGISTER_COMMAND_LOADER',\n\t\tname,\n\t\tgroup,\n\t};\n}\n"]}
+{"version":3,"sources":["@wordpress/commands/src/store/actions.js"],"names":["registerCommand","name","label","icon","callback","group","type","unregisterCommand","registerCommandLoader","hook","unregisterCommandLoader","open","close"],"mappings":"AAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,eAAT,OAAwE;AAAA,MAA9C;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,KAAR;AAAeC,IAAAA,IAAf;AAAqBC,IAAAA,QAArB;AAA+BC,IAAAA,KAAK,GAAG;AAAvC,GAA8C;AAC9E,SAAO;AACNC,IAAAA,IAAI,EAAE,kBADA;AAENL,IAAAA,IAFM;AAGNC,IAAAA,KAHM;AAINC,IAAAA,IAJM;AAKNC,IAAAA,QALM;AAMNC,IAAAA;AANM,GAAP;AAQA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASE,iBAAT,CAA4BN,IAA5B,EAAkCI,KAAlC,EAA0C;AAChD,SAAO;AACNC,IAAAA,IAAI,EAAE,oBADA;AAENL,IAAAA,IAFM;AAGNI,IAAAA;AAHM,GAAP;AAKA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASG,qBAAT,QAA6D;AAAA,MAA7B;AAAEP,IAAAA,IAAF;AAAQI,IAAAA,KAAK,GAAG,EAAhB;AAAoBI,IAAAA;AAApB,GAA6B;AACnE,SAAO;AACNH,IAAAA,IAAI,EAAE,yBADA;AAENL,IAAAA,IAFM;AAGNI,IAAAA,KAHM;AAINI,IAAAA;AAJM,GAAP;AAMA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,uBAAT,CAAkCT,IAAlC,EAAwCI,KAAxC,EAAgD;AACtD,SAAO;AACNC,IAAAA,IAAI,EAAE,2BADA;AAENL,IAAAA,IAFM;AAGNI,IAAAA;AAHM,GAAP;AAKA;AAED;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASM,IAAT,GAAgB;AACtB,SAAO;AACNL,IAAAA,IAAI,EAAE;AADA,GAAP;AAGA;AAED;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASM,KAAT,GAAiB;AACvB,SAAO;AACNN,IAAAA,IAAI,EAAE;AADA,GAAP;AAGA","sourcesContent":["/** @typedef {import('@wordpress/keycodes').WPKeycodeModifier} WPKeycodeModifier */\n\n/**\n * Configuration of a registered keyboard shortcut.\n *\n * @typedef {Object} WPCommandConfig\n *\n * @property {string}      name     Command name.\n * @property {string}      label    Command label.\n * @property {string=}     group    Command group.\n * @property {JSX.Element} icon     Command icon.\n * @property {Function}    callback Command callback.\n */\n\n/**\n * @typedef {(search: string) => WPCommandConfig[]} WPCommandLoaderHook hoo\n */\n\n/**\n * Command loader config.\n *\n * @typedef {Object} WPCommandLoaderConfig\n *\n * @property {string}              name  Command loader name.\n * @property {string=}             group Command loader group.\n * @property {WPCommandLoaderHook} hook  Command loader hook.\n */\n\n/**\n * Returns an action object used to register a new command.\n *\n * @param {WPCommandConfig} config Command config.\n *\n * @return {Object} action.\n */\nexport function registerCommand( { name, label, icon, callback, group = '' } ) {\n\treturn {\n\t\ttype: 'REGISTER_COMMAND',\n\t\tname,\n\t\tlabel,\n\t\ticon,\n\t\tcallback,\n\t\tgroup,\n\t};\n}\n\n/**\n * Returns an action object used to unregister a command.\n *\n * @param {string} name  Command name.\n * @param {string} group Command group.\n *\n * @return {Object} action.\n */\nexport function unregisterCommand( name, group ) {\n\treturn {\n\t\ttype: 'UNREGISTER_COMMAND',\n\t\tname,\n\t\tgroup,\n\t};\n}\n\n/**\n * Register command loader.\n *\n * @param {WPCommandLoaderConfig} config Command loader config.\n *\n * @return {Object} action.\n */\nexport function registerCommandLoader( { name, group = '', hook } ) {\n\treturn {\n\t\ttype: 'REGISTER_COMMAND_LOADER',\n\t\tname,\n\t\tgroup,\n\t\thook,\n\t};\n}\n\n/**\n * Unregister command loader hook.\n *\n * @param {string} name  Command loader name.\n * @param {string} group Command loader group.\n *\n * @return {Object} action.\n */\nexport function unregisterCommandLoader( name, group ) {\n\treturn {\n\t\ttype: 'UNREGISTER_COMMAND_LOADER',\n\t\tname,\n\t\tgroup,\n\t};\n}\n\n/**\n * Opens the command center.\n *\n * @return {Object} action.\n */\nexport function open() {\n\treturn {\n\t\ttype: 'OPEN',\n\t};\n}\n\n/**\n * Closes the command center.\n *\n * @return {Object} action.\n */\nexport function close() {\n\treturn {\n\t\ttype: 'CLOSE',\n\t};\n}\n"]}

package/build-module/store/reducer.js

@@ -23,7 +23,8 @@ function commands() {
             name: action.name,
             label: action.label,
             group: action.group,
-            callback: action.callback
+            callback: action.callback,
+            icon: action.icon
           }
         }
       };
@@ -81,10 +82,35 @@ function commandLoaders() {
 
   return state;
 }
+/**
+ * Reducer returning the command center open state.
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {boolean} Updated state.
+ */
+
+
+function isOpen() {
+  let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  let action = arguments.length > 1 ? arguments[1] : undefined;
+
+  switch (action.type) {
+    case 'OPEN':
+      return true;
+
+    case 'CLOSE':
+      return false;
+  }
+
+  return state;
+}
 
 const reducer = combineReducers({
   commands,
-  commandLoaders
+  commandLoaders,
+  isOpen
 });
 export default reducer;
 //# sourceMappingURL=reducer.js.map

package/build-module/store/reducer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/commands/src/store/reducer.js"],"names":["combineReducers","commands","state","action","type","group","name","label","callback","_","remainingState","commandLoaders","hook","reducer"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,eAAT,QAAgC,iBAAhC;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASC,QAAT,GAAwC;AAAA,MAArBC,KAAqB,uEAAb,EAAa;AAAA,MAATC,MAAS;;AACvC,UAASA,MAAM,CAACC,IAAhB;AACC,SAAK,kBAAL;AACC,aAAO,EACN,GAAGF,KADG;AAEN,SAAEC,MAAM,CAACE,KAAT,GAAkB,EACjB,GAAGH,KAAK,CAAEC,MAAM,CAACE,KAAT,CADS;AAEjB,WAAEF,MAAM,CAACG,IAAT,GAAiB;AAChBA,YAAAA,IAAI,EAAEH,MAAM,CAACG,IADG;AAEhBC,YAAAA,KAAK,EAAEJ,MAAM,CAACI,KAFE;AAGhBF,YAAAA,KAAK,EAAEF,MAAM,CAACE,KAHE;AAIhBG,YAAAA,QAAQ,EAAEL,MAAM,CAACK;AAJD;AAFA;AAFZ,OAAP;;AAYD,SAAK,oBAAL;AAA2B;AAC1B,cAAM;AAAE,WAAEL,MAAM,CAACG,IAAT,GAAiBG,CAAnB;AAAsB,aAAGC;AAAzB,YACLR,KADK,aACLA,KADK,uBACLA,KAAK,CAAIC,MAAM,CAACE,KAAX,CADN;AAEA,eAAO,EACN,GAAGH,KADG;AAEN,WAAEC,MAAM,CAACE,KAAT,GAAkBK;AAFZ,SAAP;AAIA;AArBF;;AAwBA,SAAOR,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASS,cAAT,GAA8C;AAAA,MAArBT,KAAqB,uEAAb,EAAa;AAAA,MAATC,MAAS;;AAC7C,UAASA,MAAM,CAACC,IAAhB;AACC,SAAK,yBAAL;AACC,aAAO,EACN,GAAGF,KADG;AAEN,SAAEC,MAAM,CAACE,KAAT,GAAkB,EACjB,GAAGH,KAAK,CAAEC,MAAM,CAACE,KAAT,CADS;AAEjB,WAAEF,MAAM,CAACG,IAAT,GAAiB;AAChBA,YAAAA,IAAI,EAAEH,MAAM,CAACG,IADG;AAEhBM,YAAAA,IAAI,EAAET,MAAM,CAACS;AAFG;AAFA;AAFZ,OAAP;;AAUD,SAAK,2BAAL;AAAkC;AACjC,cAAM;AAAE,WAAET,MAAM,CAACG,IAAT,GAAiBG,CAAnB;AAAsB,aAAGC;AAAzB,YACLR,KADK,aACLA,KADK,uBACLA,KAAK,CAAIC,MAAM,CAACE,KAAX,CADN;AAEA,eAAO,EACN,GAAGH,KADG;AAEN,WAAEC,MAAM,CAACE,KAAT,GAAkBK;AAFZ,SAAP;AAIA;AAnBF;;AAsBA,SAAOR,KAAP;AACA;;AAED,MAAMW,OAAO,GAAGb,eAAe,CAAE;AAChCC,EAAAA,QADgC;AAEhCU,EAAAA;AAFgC,CAAF,CAA/B;AAKA,eAAeE,OAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { combineReducers } from '@wordpress/data';\n\n/**\n * Reducer returning the registered commands\n *\n * @param {Object} state  Current state.\n * @param {Object} action Dispatched action.\n *\n * @return {Object} Updated state.\n */\nfunction commands( state = {}, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'REGISTER_COMMAND':\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\t[ action.group ]: {\n\t\t\t\t\t...state[ action.group ],\n\t\t\t\t\t[ action.name ]: {\n\t\t\t\t\t\tname: action.name,\n\t\t\t\t\t\tlabel: action.label,\n\t\t\t\t\t\tgroup: action.group,\n\t\t\t\t\t\tcallback: action.callback,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t};\n\t\tcase 'UNREGISTER_COMMAND': {\n\t\t\tconst { [ action.name ]: _, ...remainingState } =\n\t\t\t\tstate?.[ action.group ];\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\t[ action.group ]: remainingState,\n\t\t\t};\n\t\t}\n\t}\n\n\treturn state;\n}\n\n/**\n * Reducer returning the command loaders\n *\n * @param {Object} state  Current state.\n * @param {Object} action Dispatched action.\n *\n * @return {Object} Updated state.\n */\nfunction commandLoaders( state = {}, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'REGISTER_COMMAND_LOADER':\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\t[ action.group ]: {\n\t\t\t\t\t...state[ action.group ],\n\t\t\t\t\t[ action.name ]: {\n\t\t\t\t\t\tname: action.name,\n\t\t\t\t\t\thook: action.hook,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t};\n\t\tcase 'UNREGISTER_COMMAND_LOADER': {\n\t\t\tconst { [ action.name ]: _, ...remainingState } =\n\t\t\t\tstate?.[ action.group ];\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\t[ action.group ]: remainingState,\n\t\t\t};\n\t\t}\n\t}\n\n\treturn state;\n}\n\nconst reducer = combineReducers( {\n\tcommands,\n\tcommandLoaders,\n} );\n\nexport default reducer;\n"]}
+{"version":3,"sources":["@wordpress/commands/src/store/reducer.js"],"names":["combineReducers","commands","state","action","type","group","name","label","callback","icon","_","remainingState","commandLoaders","hook","isOpen","reducer"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,eAAT,QAAgC,iBAAhC;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASC,QAAT,GAAwC;AAAA,MAArBC,KAAqB,uEAAb,EAAa;AAAA,MAATC,MAAS;;AACvC,UAASA,MAAM,CAACC,IAAhB;AACC,SAAK,kBAAL;AACC,aAAO,EACN,GAAGF,KADG;AAEN,SAAEC,MAAM,CAACE,KAAT,GAAkB,EACjB,GAAGH,KAAK,CAAEC,MAAM,CAACE,KAAT,CADS;AAEjB,WAAEF,MAAM,CAACG,IAAT,GAAiB;AAChBA,YAAAA,IAAI,EAAEH,MAAM,CAACG,IADG;AAEhBC,YAAAA,KAAK,EAAEJ,MAAM,CAACI,KAFE;AAGhBF,YAAAA,KAAK,EAAEF,MAAM,CAACE,KAHE;AAIhBG,YAAAA,QAAQ,EAAEL,MAAM,CAACK,QAJD;AAKhBC,YAAAA,IAAI,EAAEN,MAAM,CAACM;AALG;AAFA;AAFZ,OAAP;;AAaD,SAAK,oBAAL;AAA2B;AAC1B,cAAM;AAAE,WAAEN,MAAM,CAACG,IAAT,GAAiBI,CAAnB;AAAsB,aAAGC;AAAzB,YACLT,KADK,aACLA,KADK,uBACLA,KAAK,CAAIC,MAAM,CAACE,KAAX,CADN;AAEA,eAAO,EACN,GAAGH,KADG;AAEN,WAAEC,MAAM,CAACE,KAAT,GAAkBM;AAFZ,SAAP;AAIA;AAtBF;;AAyBA,SAAOT,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASU,cAAT,GAA8C;AAAA,MAArBV,KAAqB,uEAAb,EAAa;AAAA,MAATC,MAAS;;AAC7C,UAASA,MAAM,CAACC,IAAhB;AACC,SAAK,yBAAL;AACC,aAAO,EACN,GAAGF,KADG;AAEN,SAAEC,MAAM,CAACE,KAAT,GAAkB,EACjB,GAAGH,KAAK,CAAEC,MAAM,CAACE,KAAT,CADS;AAEjB,WAAEF,MAAM,CAACG,IAAT,GAAiB;AAChBA,YAAAA,IAAI,EAAEH,MAAM,CAACG,IADG;AAEhBO,YAAAA,IAAI,EAAEV,MAAM,CAACU;AAFG;AAFA;AAFZ,OAAP;;AAUD,SAAK,2BAAL;AAAkC;AACjC,cAAM;AAAE,WAAEV,MAAM,CAACG,IAAT,GAAiBI,CAAnB;AAAsB,aAAGC;AAAzB,YACLT,KADK,aACLA,KADK,uBACLA,KAAK,CAAIC,MAAM,CAACE,KAAX,CADN;AAEA,eAAO,EACN,GAAGH,KADG;AAEN,WAAEC,MAAM,CAACE,KAAT,GAAkBM;AAFZ,SAAP;AAIA;AAnBF;;AAsBA,SAAOT,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASY,MAAT,GAAyC;AAAA,MAAxBZ,KAAwB,uEAAhB,KAAgB;AAAA,MAATC,MAAS;;AACxC,UAASA,MAAM,CAACC,IAAhB;AACC,SAAK,MAAL;AACC,aAAO,IAAP;;AACD,SAAK,OAAL;AACC,aAAO,KAAP;AAJF;;AAOA,SAAOF,KAAP;AACA;;AAED,MAAMa,OAAO,GAAGf,eAAe,CAAE;AAChCC,EAAAA,QADgC;AAEhCW,EAAAA,cAFgC;AAGhCE,EAAAA;AAHgC,CAAF,CAA/B;AAMA,eAAeC,OAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { combineReducers } from '@wordpress/data';\n\n/**\n * Reducer returning the registered commands\n *\n * @param {Object} state  Current state.\n * @param {Object} action Dispatched action.\n *\n * @return {Object} Updated state.\n */\nfunction commands( state = {}, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'REGISTER_COMMAND':\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\t[ action.group ]: {\n\t\t\t\t\t...state[ action.group ],\n\t\t\t\t\t[ action.name ]: {\n\t\t\t\t\t\tname: action.name,\n\t\t\t\t\t\tlabel: action.label,\n\t\t\t\t\t\tgroup: action.group,\n\t\t\t\t\t\tcallback: action.callback,\n\t\t\t\t\t\ticon: action.icon,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t};\n\t\tcase 'UNREGISTER_COMMAND': {\n\t\t\tconst { [ action.name ]: _, ...remainingState } =\n\t\t\t\tstate?.[ action.group ];\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\t[ action.group ]: remainingState,\n\t\t\t};\n\t\t}\n\t}\n\n\treturn state;\n}\n\n/**\n * Reducer returning the command loaders\n *\n * @param {Object} state  Current state.\n * @param {Object} action Dispatched action.\n *\n * @return {Object} Updated state.\n */\nfunction commandLoaders( state = {}, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'REGISTER_COMMAND_LOADER':\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\t[ action.group ]: {\n\t\t\t\t\t...state[ action.group ],\n\t\t\t\t\t[ action.name ]: {\n\t\t\t\t\t\tname: action.name,\n\t\t\t\t\t\thook: action.hook,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t};\n\t\tcase 'UNREGISTER_COMMAND_LOADER': {\n\t\t\tconst { [ action.name ]: _, ...remainingState } =\n\t\t\t\tstate?.[ action.group ];\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\t[ action.group ]: remainingState,\n\t\t\t};\n\t\t}\n\t}\n\n\treturn state;\n}\n\n/**\n * Reducer returning the command center open state.\n *\n * @param {Object} state  Current state.\n * @param {Object} action Dispatched action.\n *\n * @return {boolean} Updated state.\n */\nfunction isOpen( state = false, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'OPEN':\n\t\t\treturn true;\n\t\tcase 'CLOSE':\n\t\t\treturn false;\n\t}\n\n\treturn state;\n}\n\nconst reducer = combineReducers( {\n\tcommands,\n\tcommandLoaders,\n\tisOpen,\n} );\n\nexport default reducer;\n"]}

package/build-module/store/selectors.js

@@ -18,4 +18,7 @@ export const getCommandLoaders = createSelector((state, group) => {
 
   return Object.values((_state$commandLoaders = state.commandLoaders[group]) !== null && _state$commandLoaders !== void 0 ? _state$commandLoaders : {});
 }, (state, group) => [state.commandLoaders[group]]);
+export function isOpen(state) {
+  return state.isOpen;
+}
 //# sourceMappingURL=selectors.js.map

package/build-module/store/selectors.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/commands/src/store/selectors.js"],"names":["createSelector","unique","array","filter","value","index","current","indexOf","getGroups","state","Object","keys","commands","concat","commandLoaders","getCommands","group","values","getCommandLoaders"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,cAAP,MAA2B,QAA3B;;AAEA,SAASC,MAAT,CAAiBC,KAAjB,EAAyB;AACxB,SAAOA,KAAK,CAACC,MAAN,CACN,CAAEC,KAAF,EAASC,KAAT,EAAgBC,OAAhB,KAA6BA,OAAO,CAACC,OAAR,CAAiBH,KAAjB,MAA6BC,KADpD,CAAP;AAGA;;AAED,OAAO,MAAMG,SAAS,GAAGR,cAAc,CACpCS,KAAF,IACCR,MAAM,CACLS,MAAM,CAACC,IAAP,CAAaF,KAAK,CAACG,QAAnB,EAA8BC,MAA9B,CACCH,MAAM,CAACC,IAAP,CAAaF,KAAK,CAACK,cAAnB,CADD,CADK,CAF+B,EAOpCL,KAAF,IAAa,CAAEA,KAAK,CAACG,QAAR,EAAkBH,KAAK,CAACK,cAAxB,CAPyB,CAAhC;AASP,OAAO,MAAMC,WAAW,GAAGf,cAAc,CACxC,CAAES,KAAF,EAASO,KAAT;AAAA;;AAAA,SAAoBN,MAAM,CAACO,MAAP,0BAAeR,KAAK,CAACG,QAAN,CAAgBI,KAAhB,CAAf,yEAA0C,EAA1C,CAApB;AAAA,CADwC,EAExC,CAAEP,KAAF,EAASO,KAAT,KAAoB,CAAEP,KAAK,CAACG,QAAN,CAAgBI,KAAhB,CAAF,CAFoB,CAAlC;AAKP,OAAO,MAAME,iBAAiB,GAAGlB,cAAc,CAC9C,CAAES,KAAF,EAASO,KAAT;AAAA;;AAAA,SAAoBN,MAAM,CAACO,MAAP,0BAAeR,KAAK,CAACK,cAAN,CAAsBE,KAAtB,CAAf,yEAAgD,EAAhD,CAApB;AAAA,CAD8C,EAE9C,CAAEP,KAAF,EAASO,KAAT,KAAoB,CAAEP,KAAK,CAACK,cAAN,CAAsBE,KAAtB,CAAF,CAF0B,CAAxC","sourcesContent":["/**\n * External dependencies\n */\nimport createSelector from 'rememo';\n\nfunction unique( array ) {\n\treturn array.filter(\n\t\t( value, index, current ) => current.indexOf( value ) === index\n\t);\n}\n\nexport const getGroups = createSelector(\n\t( state ) =>\n\t\tunique(\n\t\t\tObject.keys( state.commands ).concat(\n\t\t\t\tObject.keys( state.commandLoaders )\n\t\t\t)\n\t\t),\n\t( state ) => [ state.commands, state.commandLoaders ]\n);\nexport const getCommands = createSelector(\n\t( state, group ) => Object.values( state.commands[ group ] ?? {} ),\n\t( state, group ) => [ state.commands[ group ] ]\n);\n\nexport const getCommandLoaders = createSelector(\n\t( state, group ) => Object.values( state.commandLoaders[ group ] ?? {} ),\n\t( state, group ) => [ state.commandLoaders[ group ] ]\n);\n"]}
+{"version":3,"sources":["@wordpress/commands/src/store/selectors.js"],"names":["createSelector","unique","array","filter","value","index","current","indexOf","getGroups","state","Object","keys","commands","concat","commandLoaders","getCommands","group","values","getCommandLoaders","isOpen"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,cAAP,MAA2B,QAA3B;;AAEA,SAASC,MAAT,CAAiBC,KAAjB,EAAyB;AACxB,SAAOA,KAAK,CAACC,MAAN,CACN,CAAEC,KAAF,EAASC,KAAT,EAAgBC,OAAhB,KAA6BA,OAAO,CAACC,OAAR,CAAiBH,KAAjB,MAA6BC,KADpD,CAAP;AAGA;;AAED,OAAO,MAAMG,SAAS,GAAGR,cAAc,CACpCS,KAAF,IACCR,MAAM,CACLS,MAAM,CAACC,IAAP,CAAaF,KAAK,CAACG,QAAnB,EAA8BC,MAA9B,CACCH,MAAM,CAACC,IAAP,CAAaF,KAAK,CAACK,cAAnB,CADD,CADK,CAF+B,EAOpCL,KAAF,IAAa,CAAEA,KAAK,CAACG,QAAR,EAAkBH,KAAK,CAACK,cAAxB,CAPyB,CAAhC;AAUP,OAAO,MAAMC,WAAW,GAAGf,cAAc,CACxC,CAAES,KAAF,EAASO,KAAT;AAAA;;AAAA,SAAoBN,MAAM,CAACO,MAAP,0BAAeR,KAAK,CAACG,QAAN,CAAgBI,KAAhB,CAAf,yEAA0C,EAA1C,CAApB;AAAA,CADwC,EAExC,CAAEP,KAAF,EAASO,KAAT,KAAoB,CAAEP,KAAK,CAACG,QAAN,CAAgBI,KAAhB,CAAF,CAFoB,CAAlC;AAKP,OAAO,MAAME,iBAAiB,GAAGlB,cAAc,CAC9C,CAAES,KAAF,EAASO,KAAT;AAAA;;AAAA,SAAoBN,MAAM,CAACO,MAAP,0BAAeR,KAAK,CAACK,cAAN,CAAsBE,KAAtB,CAAf,yEAAgD,EAAhD,CAApB;AAAA,CAD8C,EAE9C,CAAEP,KAAF,EAASO,KAAT,KAAoB,CAAEP,KAAK,CAACK,cAAN,CAAsBE,KAAtB,CAAF,CAF0B,CAAxC;AAKP,OAAO,SAASG,MAAT,CAAiBV,KAAjB,EAAyB;AAC/B,SAAOA,KAAK,CAACU,MAAb;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport createSelector from 'rememo';\n\nfunction unique( array ) {\n\treturn array.filter(\n\t\t( value, index, current ) => current.indexOf( value ) === index\n\t);\n}\n\nexport const getGroups = createSelector(\n\t( state ) =>\n\t\tunique(\n\t\t\tObject.keys( state.commands ).concat(\n\t\t\t\tObject.keys( state.commandLoaders )\n\t\t\t)\n\t\t),\n\t( state ) => [ state.commands, state.commandLoaders ]\n);\n\nexport const getCommands = createSelector(\n\t( state, group ) => Object.values( state.commands[ group ] ?? {} ),\n\t( state, group ) => [ state.commands[ group ] ]\n);\n\nexport const getCommandLoaders = createSelector(\n\t( state, group ) => Object.values( state.commandLoaders[ group ] ?? {} ),\n\t( state, group ) => [ state.commandLoaders[ group ] ]\n);\n\nexport function isOpen( state ) {\n\treturn state.isOpen;\n}\n"]}

package/build-style/style-rtl.css

@@ -104,9 +104,8 @@
 }
 
 .commands-command-menu {
-  padding: 0;
   width: 100%;
-  max-width: 680px;
+  max-width: 480px;
   position: relative;
   top: 15%;
 }
@@ -123,7 +122,6 @@
 .commands-command-menu__header {
   display: flex;
   align-items: center;
-  margin: 12px 12px 0 12px;
 }
 .commands-command-menu__header .components-button {
   height: 56px;
@@ -138,109 +136,55 @@
   border-bottom-right-radius: 0;
 }
 
-.commands-command-menu__container [cmdk-linear-badge] {
-  height: 24px;
-  padding: 0 8px;
-  font-size: 12px;
-  color: #2f2f2f;
-  background: #ddd;
-  border-radius: 4px;
-  width: -moz-fit-content;
-  width: fit-content;
-  display: flex;
-  align-items: center;
-  margin: 16px 16px 0;
-}
-.commands-command-menu__container [cmdk-linear-shortcuts] {
-  display: flex;
-  margin-right: auto;
-  gap: 8px;
-}
-.commands-command-menu__container [cmdk-linear-shortcuts] kbd {
-  color: #2f2f2f;
+.commands-command-menu__container {
+  will-change: transform;
 }
 .commands-command-menu__container [cmdk-input] {
-  border: 1px solid #949494;
+  border: none;
   width: 100%;
-  padding: 12px 16px;
-  min-height: 56px;
+  padding: 16px;
   outline: none;
   color: #1e1e1e;
   margin: 0;
-  border-radius: 2px;
+  font-size: 20px;
+  line-height: 28px;
+  border-bottom: 1px solid #e0e0e0;
+  border-radius: 0;
 }
 .commands-command-menu__container [cmdk-input]::placeholder {
   color: #949494;
 }
 .commands-command-menu__container [cmdk-input]:focus {
-  outline: 2px solid transparent;
-  border-color: var(--wp-admin-theme-color);
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
+  box-shadow: none;
+  outline: none;
+  border-bottom: 1px solid #e0e0e0;
 }
 .commands-command-menu__container [cmdk-item] {
-  content-visibility: auto;
-  border-radius: 2px;
+  border-radius: 4px;
   cursor: pointer;
-  height: 40px;
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 0 16px;
+  padding: 8px;
   color: #1e1e1e;
-  -webkit-user-select: none;
-          user-select: none;
-  will-change: background, color;
-  transition: all 150ms ease;
-  transition-property: none;
-  position: relative;
 }
-.commands-command-menu__container [cmdk-item][aria-selected=true] {
+.commands-command-menu__container [cmdk-item][aria-selected=true], .commands-command-menu__container [cmdk-item]:active {
   background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
   color: var(--wp-admin-theme-color);
 }
-.commands-command-menu__container [cmdk-item][aria-selected=true] svg {
-  color: var(--wp-admin-theme-color);
+.commands-command-menu__container [cmdk-item][aria-selected=true] svg, .commands-command-menu__container [cmdk-item]:active svg {
+  fill: var(--wp-admin-theme-color);
 }
 .commands-command-menu__container [cmdk-item][aria-disabled=true] {
   color: #949494;
   cursor: not-allowed;
 }
-.commands-command-menu__container [cmdk-item]:active {
-  transition-property: background;
-  background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
-}
-.commands-command-menu__container [cmdk-item] + [cmdk-item] {
-  margin-top: 4px;
-}
-.commands-command-menu__container [cmdk-item] svg,
-.commands-command-menu__container [cmdk-item] .dashicon {
-  width: 16px;
-  height: 16px;
-  color: #2f2f2f;
+.commands-command-menu__container [cmdk-item] svg {
+  fill: #949494;
 }
 .commands-command-menu__container [cmdk-root] > [cmdk-list] {
-  min-height: 300px;
   max-height: 400px;
   overflow: auto;
-  overscroll-behavior: contain;
-  transition: 100ms ease;
-  transition-property: height;
-  margin: 12px;
-}
-.commands-command-menu__container [cmdk-group-heading] {
-  -webkit-user-select: none;
-          user-select: none;
-  color: #757575;
-  padding: 24px 16px 16px;
-  display: flex;
-  align-items: center;
-  font-size: 11px;
-  text-transform: uppercase;
-  font-weight: 500;
-  position: sticky;
-  top: 0;
-  background: #fff;
-  z-index: 1;
+  padding: 8px;
 }
 .commands-command-menu__container [cmdk-empty] {
   display: flex;

package/build-style/style.css

@@ -104,9 +104,8 @@
 }
 
 .commands-command-menu {
-  padding: 0;
   width: 100%;
-  max-width: 680px;
+  max-width: 480px;
   position: relative;
   top: 15%;
 }
@@ -123,7 +122,6 @@
 .commands-command-menu__header {
   display: flex;
   align-items: center;
-  margin: 12px 12px 0 12px;
 }
 .commands-command-menu__header .components-button {
   height: 56px;
@@ -138,109 +136,55 @@
   border-bottom-left-radius: 0;
 }
 
-.commands-command-menu__container [cmdk-linear-badge] {
-  height: 24px;
-  padding: 0 8px;
-  font-size: 12px;
-  color: #2f2f2f;
-  background: #ddd;
-  border-radius: 4px;
-  width: -moz-fit-content;
-  width: fit-content;
-  display: flex;
-  align-items: center;
-  margin: 16px 16px 0;
-}
-.commands-command-menu__container [cmdk-linear-shortcuts] {
-  display: flex;
-  margin-left: auto;
-  gap: 8px;
-}
-.commands-command-menu__container [cmdk-linear-shortcuts] kbd {
-  color: #2f2f2f;
+.commands-command-menu__container {
+  will-change: transform;
 }
 .commands-command-menu__container [cmdk-input] {
-  border: 1px solid #949494;
+  border: none;
   width: 100%;
-  padding: 12px 16px;
-  min-height: 56px;
+  padding: 16px;
   outline: none;
   color: #1e1e1e;
   margin: 0;
-  border-radius: 2px;
+  font-size: 20px;
+  line-height: 28px;
+  border-bottom: 1px solid #e0e0e0;
+  border-radius: 0;
 }
 .commands-command-menu__container [cmdk-input]::placeholder {
   color: #949494;
 }
 .commands-command-menu__container [cmdk-input]:focus {
-  outline: 2px solid transparent;
-  border-color: var(--wp-admin-theme-color);
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
+  box-shadow: none;
+  outline: none;
+  border-bottom: 1px solid #e0e0e0;
 }
 .commands-command-menu__container [cmdk-item] {
-  content-visibility: auto;
-  border-radius: 2px;
+  border-radius: 4px;
   cursor: pointer;
-  height: 40px;
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 0 16px;
+  padding: 8px;
   color: #1e1e1e;
-  -webkit-user-select: none;
-          user-select: none;
-  will-change: background, color;
-  transition: all 150ms ease;
-  transition-property: none;
-  position: relative;
 }
-.commands-command-menu__container [cmdk-item][aria-selected=true] {
+.commands-command-menu__container [cmdk-item][aria-selected=true], .commands-command-menu__container [cmdk-item]:active {
   background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
   color: var(--wp-admin-theme-color);
 }
-.commands-command-menu__container [cmdk-item][aria-selected=true] svg {
-  color: var(--wp-admin-theme-color);
+.commands-command-menu__container [cmdk-item][aria-selected=true] svg, .commands-command-menu__container [cmdk-item]:active svg {
+  fill: var(--wp-admin-theme-color);
 }
 .commands-command-menu__container [cmdk-item][aria-disabled=true] {
   color: #949494;
   cursor: not-allowed;
 }
-.commands-command-menu__container [cmdk-item]:active {
-  transition-property: background;
-  background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
-}
-.commands-command-menu__container [cmdk-item] + [cmdk-item] {
-  margin-top: 4px;
-}
-.commands-command-menu__container [cmdk-item] svg,
-.commands-command-menu__container [cmdk-item] .dashicon {
-  width: 16px;
-  height: 16px;
-  color: #2f2f2f;
+.commands-command-menu__container [cmdk-item] svg {
+  fill: #949494;
 }
 .commands-command-menu__container [cmdk-root] > [cmdk-list] {
-  min-height: 300px;
   max-height: 400px;
   overflow: auto;
-  overscroll-behavior: contain;
-  transition: 100ms ease;
-  transition-property: height;
-  margin: 12px;
-}
-.commands-command-menu__container [cmdk-group-heading] {
-  -webkit-user-select: none;
-          user-select: none;
-  color: #757575;
-  padding: 24px 16px 16px;
-  display: flex;
-  align-items: center;
-  font-size: 11px;
-  text-transform: uppercase;
-  font-weight: 500;
-  position: sticky;
-  top: 0;
-  background: #fff;
-  z-index: 1;
+  padding: 8px;
 }
 .commands-command-menu__container [cmdk-empty] {
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/commands",
-	"version": "0.2.0",
+	"version": "0.4.0",
 	"description": "Handles the commands menu.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,15 +27,15 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/components": "^23.8.0",
-		"@wordpress/data": "^9.1.0",
-		"@wordpress/element": "^5.8.0",
-		"@wordpress/i18n": "^4.31.0",
-		"@wordpress/icons": "^9.22.0",
-		"@wordpress/keyboard-shortcuts": "^4.8.0",
-		"@wordpress/private-apis": "^0.13.0",
+		"@wordpress/components": "^24.0.0",
+		"@wordpress/data": "^9.3.0",
+		"@wordpress/element": "^5.10.0",
+		"@wordpress/i18n": "^4.33.0",
+		"@wordpress/icons": "^9.24.0",
+		"@wordpress/keyboard-shortcuts": "^4.10.0",
+		"@wordpress/private-apis": "^0.15.0",
 		"cmdk": "^0.2.0",
-		"rememo": "^4.0.0"
+		"rememo": "^4.0.2"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0"
@@ -43,5 +43,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d61700b9f1c72ba0b030fc815ef1685b4f4031ec"
+	"gitHead": "e936127e1e13881f1a940b7bd1593a9e500147f3"
 }