@wordpress/commands 0.2.0 → 0.4.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+## 0.4.0 (2023-05-10)
+
+## 0.3.0 (2023-04-26)
+
 ## 0.2.0 (2023-04-12)
 
 Initial release.

package/build/components/command-menu.js

@@ -19,6 +19,8 @@ var _components = require("@wordpress/components");
 
 var _keyboardShortcuts = require("@wordpress/keyboard-shortcuts");
 
+var _icons = require("@wordpress/icons");
+
 var _store = require("../store");
 
 /**
@@ -57,12 +59,15 @@ function CommandMenuLoader(_ref) {
     onSelect: () => command.callback({
       close
     })
-  }, (0, _element.createElement)("span", {
+  }, (0, _element.createElement)(_components.__experimentalHStack, {
+    alignment: "left",
     className: "commands-command-menu__item"
-  }, (0, _element.createElement)(_components.TextHighlight, {
+  }, (0, _element.createElement)(_icons.Icon, {
+    icon: command.icon
+  }), (0, _element.createElement)("span", null, (0, _element.createElement)(_components.TextHighlight, {
     text: command.label,
     highlight: search
-  }))))));
+  })))))));
 }
 
 function CommandMenuLoaderWrapper(_ref2) {
@@ -114,20 +119,21 @@ function CommandMenuGroup(_ref3) {
       loaders: getCommandLoaders(group)
     };
   }, [group]);
-  return (0, _element.createElement)(_cmdk.Command.Group, {
-    heading: group
-  }, commands.map(command => (0, _element.createElement)(_cmdk.Command.Item, {
+  return (0, _element.createElement)(_cmdk.Command.Group, null, commands.map(command => (0, _element.createElement)(_cmdk.Command.Item, {
     key: command.name,
     value: command.name,
     onSelect: () => command.callback({
       close
     })
-  }, (0, _element.createElement)("span", {
+  }, (0, _element.createElement)(_components.__experimentalHStack, {
+    alignment: "left",
     className: "commands-command-menu__item"
-  }, (0, _element.createElement)(_components.TextHighlight, {
+  }, (0, _element.createElement)(_icons.Icon, {
+    icon: command.icon
+  }), (0, _element.createElement)("span", null, (0, _element.createElement)(_components.TextHighlight, {
     text: command.label,
     highlight: search
-  })))), loaders.map(loader => (0, _element.createElement)(CommandMenuLoaderWrapper, {
+  }))))), loaders.map(loader => (0, _element.createElement)(CommandMenuLoaderWrapper, {
     key: loader.name,
     hook: loader.hook,
     search: search,
@@ -141,18 +147,25 @@ function CommandMenu() {
     registerShortcut
   } = (0, _data.useDispatch)(_keyboardShortcuts.store);
   const [search, setSearch] = (0, _element.useState)('');
-  const [open, setOpen] = (0, _element.useState)(false);
   const {
-    groups
+    groups,
+    isOpen
   } = (0, _data.useSelect)(select => {
     const {
-      getGroups
+      getGroups,
+      isOpen: _isOpen
     } = select(_store.store);
     return {
-      groups: getGroups()
+      groups: getGroups(),
+      isOpen: _isOpen()
     };
   }, []);
+  const {
+    open,
+    close
+  } = (0, _data.useDispatch)(_store.store);
   const [loaders, setLoaders] = (0, _element.useState)({});
+  const commandMenuInput = (0, _element.useRef)();
   (0, _element.useEffect)(() => {
     registerShortcut({
       name: 'core/commands',
@@ -166,7 +179,12 @@ function CommandMenu() {
   }, [registerShortcut]);
   (0, _keyboardShortcuts.useShortcut)('core/commands', event => {
     event.preventDefault();
-    setOpen(prevOpen => !prevOpen);
+
+    if (isOpen) {
+      close();
+    } else {
+      open();
+    }
   }, {
     bindGlobal: true
   });
@@ -174,12 +192,19 @@ function CommandMenu() {
     [name]: value
   })), []);
 
-  const close = () => {
+  const closeAndReset = () => {
     setSearch('');
-    setOpen(false);
+    close();
   };
 
-  if (!open) {
+  (0, _element.useEffect)(() => {
+    // Focus the command menu input when mounting the modal.
+    if (isOpen) {
+      commandMenuInput.current.focus();
+    }
+  }, [isOpen]);
+
+  if (!isOpen) {
     return false;
   }
 
@@ -187,7 +212,7 @@ function CommandMenu() {
   return (0, _element.createElement)(_components.Modal, {
     className: "commands-command-menu",
     overlayClassName: "commands-command-menu__overlay",
-    onRequestClose: close,
+    onRequestClose: closeAndReset,
     __experimentalHideHeader: true
   }, (0, _element.createElement)("div", {
     className: "commands-command-menu__container"
@@ -196,18 +221,16 @@ function CommandMenu() {
   }, (0, _element.createElement)("div", {
     className: "commands-command-menu__header"
   }, (0, _element.createElement)(_cmdk.Command.Input, {
-    // The input should be focused when the modal is opened.
-    // eslint-disable-next-line jsx-a11y/no-autofocus
-    autoFocus: true,
+    ref: commandMenuInput,
     value: search,
     onValueChange: setSearch,
-    placeholder: (0, _i18n.__)('Search for content and templates, or try commands like "Add…"')
-  })), (0, _element.createElement)(_cmdk.Command.List, null, !isLoading && (0, _element.createElement)(_cmdk.Command.Empty, null, (0, _i18n.__)('No results found.')), groups.map(group => (0, _element.createElement)(CommandMenuGroup, {
+    placeholder: (0, _i18n.__)('Type a command or search')
+  })), search && (0, _element.createElement)(_cmdk.Command.List, null, !isLoading && (0, _element.createElement)(_cmdk.Command.Empty, null, (0, _i18n.__)('No results found.')), groups.map(group => (0, _element.createElement)(CommandMenuGroup, {
     key: group,
     group: group,
     search: search,
     setLoader: setLoader,
-    close: close
+    close: closeAndReset
   }))))));
 }
 //# sourceMappingURL=command-menu.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/commands/src/components/command-menu.js"],"names":["CommandMenuLoader","name","search","hook","setLoader","close","isLoading","commands","map","command","callback","label","CommandMenuLoaderWrapper","currentLoader","key","setKey","current","prevKey","CommandMenuGroup","group","loaders","select","getCommands","getCommandLoaders","commandsStore","loader","CommandMenu","registerShortcut","keyboardShortcutsStore","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":["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","commandsStore","loader","CommandMenu","registerShortcut","keyboardShortcutsStore","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/hooks/use-command.js

@@ -38,11 +38,12 @@ 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/hooks/use-command.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/commands/src/hooks/use-command.js"],"names":["useCommand","command","registerCommand","unregisterCommand","commandsStore","currentCallback","callback","current","name","group","label"],"mappings":";;;;;;;AAGA;;AACA;;AAKA;;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACe,SAASA,UAAT,CAAqBC,OAArB,EAA+B;AAC7C,QAAM;AAAEC,IAAAA,eAAF;AAAmBC,IAAAA;AAAnB,MAAyC,uBAAaC,YAAb,CAA/C;AACA,QAAMC,eAAe,GAAG,qBAAQJ,OAAO,CAACK,QAAhB,CAAxB;AACA,0BAAW,MAAM;AAChBD,IAAAA,eAAe,CAACE,OAAhB,GAA0BN,OAAO,CAACK,QAAlC;AACA,GAFD,EAEG,CAAEL,OAAO,CAACK,QAAV,CAFH;AAIA,0BAAW,MAAM;AAChBJ,IAAAA,eAAe,CAAE;AAChBM,MAAAA,IAAI,EAAEP,OAAO,CAACO,IADE;AAEhBC,MAAAA,KAAK,EAAER,OAAO,CAACQ,KAFC;AAGhBC,MAAAA,KAAK,EAAET,OAAO,CAACS,KAHC;AAIhBJ,MAAAA,QAAQ,EAAED,eAAe,CAACE;AAJV,KAAF,CAAf;AAMA,WAAO,MAAM;AACZJ,MAAAA,iBAAiB,CAAEF,OAAO,CAACO,IAAV,EAAgBP,OAAO,CAACQ,KAAxB,CAAjB;AACA,KAFD;AAGA,GAVD,EAUG,CACFR,OAAO,CAACO,IADN,EAEFP,OAAO,CAACS,KAFN,EAGFT,OAAO,CAACQ,KAHN,EAIFP,eAJE,EAKFC,iBALE,CAVH;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":["useCommand","command","registerCommand","unregisterCommand","commandsStore","currentCallback","callback","current","name","group","label","icon"],"mappings":";;;;;;;AAGA;;AACA;;AAKA;;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACe,SAASA,UAAT,CAAqBC,OAArB,EAA+B;AAC7C,QAAM;AAAEC,IAAAA,eAAF;AAAmBC,IAAAA;AAAnB,MAAyC,uBAAaC,YAAb,CAA/C;AACA,QAAMC,eAAe,GAAG,qBAAQJ,OAAO,CAACK,QAAhB,CAAxB;AACA,0BAAW,MAAM;AAChBD,IAAAA,eAAe,CAACE,OAAhB,GAA0BN,OAAO,CAACK,QAAlC;AACA,GAFD,EAEG,CAAEL,OAAO,CAACK,QAAV,CAFH;AAIA,0BAAW,MAAM;AAChBJ,IAAAA,eAAe,CAAE;AAChBM,MAAAA,IAAI,EAAEP,OAAO,CAACO,IADE;AAEhBC,MAAAA,KAAK,EAAER,OAAO,CAACQ,KAFC;AAGhBC,MAAAA,KAAK,EAAET,OAAO,CAACS,KAHC;AAIhBC,MAAAA,IAAI,EAAEV,OAAO,CAACU,IAJE;AAKhBL,MAAAA,QAAQ,EAAED,eAAe,CAACE;AALV,KAAF,CAAf;AAOA,WAAO,MAAM;AACZJ,MAAAA,iBAAiB,CAAEF,OAAO,CAACO,IAAV,EAAgBP,OAAO,CAACQ,KAAxB,CAAjB;AACA,KAFD;AAGA,GAXD,EAWG,CACFR,OAAO,CAACO,IADN,EAEFP,OAAO,CAACS,KAFN,EAGFT,OAAO,CAACQ,KAHN,EAIFR,OAAO,CAACU,IAJN,EAKFT,eALE,EAMFC,iBANE,CAXH;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/private-apis.js

@@ -13,6 +13,8 @@ var _useCommand = _interopRequireDefault(require("./hooks/use-command"));
 
 var _useCommandLoader = _interopRequireDefault(require("./hooks/use-command-loader"));
 
+var _store = require("./store");
+
 /**
  * WordPress dependencies
  */
@@ -30,6 +32,7 @@ const privateApis = {};
 exports.privateApis = privateApis;
 lock(privateApis, {
   useCommand: _useCommand.default,
-  useCommandLoader: _useCommandLoader.default
+  useCommandLoader: _useCommandLoader.default,
+  store: _store.store
 });
 //# sourceMappingURL=private-apis.js.map

package/build/private-apis.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/commands/src/private-apis.js"],"names":["lock","unlock","privateApis","useCommand","useCommandLoader"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAIO,MAAM;AAAEA,EAAAA,IAAF;AAAQC,EAAAA;AAAR,IACZ,mEACC,8GADD,EAEC,qBAFD,CADM;;;AAMA,MAAMC,WAAW,GAAG,EAApB;;AACPF,IAAI,CAAEE,WAAF,EAAe;AAClBC,EAAAA,UAAU,EAAVA,mBADkB;AAElBC,EAAAA,gBAAgB,EAAhBA;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":["lock","unlock","privateApis","useCommand","useCommandLoader","store"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAKO,MAAM;AAAEA,EAAAA,IAAF;AAAQC,EAAAA;AAAR,IACZ,mEACC,8GADD,EAEC,qBAFD,CADM;;;AAMA,MAAMC,WAAW,GAAG,EAApB;;AACPF,IAAI,CAAEE,WAAF,EAAe;AAClBC,EAAAA,UAAU,EAAVA,mBADkB;AAElBC,EAAAA,gBAAgB,EAAhBA,yBAFkB;AAGlBC,EAAAA,KAAK,EAALA;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/store/actions.js

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.close = close;
+exports.open = open;
 exports.registerCommand = registerCommand;
 exports.registerCommandLoader = registerCommandLoader;
 exports.unregisterCommand = unregisterCommand;
@@ -15,10 +17,11 @@ exports.unregisterCommandLoader = unregisterCommandLoader;
  *
  * @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.
  */
 
 /**
@@ -46,6 +49,7 @@ function registerCommand(_ref) {
   let {
     name,
     label,
+    icon,
     callback,
     group = ''
   } = _ref;
@@ -53,6 +57,7 @@ function registerCommand(_ref) {
     type: 'REGISTER_COMMAND',
     name,
     label,
+    icon,
     callback,
     group
   };
@@ -113,4 +118,28 @@ function unregisterCommandLoader(name, group) {
     group
   };
 }
+/**
+ * Opens the command center.
+ *
+ * @return {Object} action.
+ */
+
+
+function open() {
+  return {
+    type: 'OPEN'
+  };
+}
+/**
+ * Closes the command center.
+ *
+ * @return {Object} action.
+ */
+
+
+function close() {
+  return {
+    type: 'CLOSE'
+  };
+}
 //# sourceMappingURL=actions.js.map

package/build/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;AACO,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;;;AACO,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;;;AACO,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;;;AACO,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;AACO,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;;;AACO,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;;;AACO,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;;;AACO,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;;;AACO,SAASM,IAAT,GAAgB;AACtB,SAAO;AACNL,IAAAA,IAAI,EAAE;AADA,GAAP;AAGA;AAED;AACA;AACA;AACA;AACA;;;AACO,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/store/reducer.js

@@ -31,7 +31,8 @@ function commands() {
             name: action.name,
             label: action.label,
             group: action.group,
-            callback: action.callback
+            callback: action.callback,
+            icon: action.icon
           }
         }
       };
@@ -89,10 +90,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 = (0, _data.combineReducers)({
   commands,
-  commandLoaders
+  commandLoaders,
+  isOpen
 });
 var _default = reducer;
 exports.default = _default;

package/build/store/reducer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/commands/src/store/reducer.js"],"names":["commands","state","action","type","group","name","label","callback","_","remainingState","commandLoaders","hook","reducer"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,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,GAAG,2BAAiB;AAChCZ,EAAAA,QADgC;AAEhCU,EAAAA;AAFgC,CAAjB,CAAhB;eAKeE,O","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":["commands","state","action","type","group","name","label","callback","icon","_","remainingState","commandLoaders","hook","isOpen","reducer"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,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,GAAG,2BAAiB;AAChCd,EAAAA,QADgC;AAEhCW,EAAAA,cAFgC;AAGhCE,EAAAA;AAHgC,CAAjB,CAAhB;eAMeC,O","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/store/selectors.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getGroups = exports.getCommands = exports.getCommandLoaders = void 0;
+exports.isOpen = isOpen;
 
 var _rememo = _interopRequireDefault(require("rememo"));
 
@@ -30,4 +31,8 @@ const getCommandLoaders = (0, _rememo.default)((state, group) => {
   return Object.values((_state$commandLoaders = state.commandLoaders[group]) !== null && _state$commandLoaders !== void 0 ? _state$commandLoaders : {});
 }, (state, group) => [state.commandLoaders[group]]);
 exports.getCommandLoaders = getCommandLoaders;
+
+function isOpen(state) {
+  return state.isOpen;
+}
 //# sourceMappingURL=selectors.js.map

package/build/store/selectors.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/commands/src/store/selectors.js"],"names":["unique","array","filter","value","index","current","indexOf","getGroups","state","Object","keys","commands","concat","commandLoaders","getCommands","group","values","getCommandLoaders"],"mappings":";;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGA,SAASA,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;;AAEM,MAAMG,SAAS,GAAG,qBACtBC,KAAF,IACCR,MAAM,CACLS,MAAM,CAACC,IAAP,CAAaF,KAAK,CAACG,QAAnB,EAA8BC,MAA9B,CACCH,MAAM,CAACC,IAAP,CAAaF,KAAK,CAACK,cAAnB,CADD,CADK,CAFiB,EAOtBL,KAAF,IAAa,CAAEA,KAAK,CAACG,QAAR,EAAkBH,KAAK,CAACK,cAAxB,CAPW,CAAlB;;AASA,MAAMC,WAAW,GAAG,qBAC1B,CAAEN,KAAF,EAASO,KAAT;AAAA;;AAAA,SAAoBN,MAAM,CAACO,MAAP,0BAAeR,KAAK,CAACG,QAAN,CAAgBI,KAAhB,CAAf,yEAA0C,EAA1C,CAApB;AAAA,CAD0B,EAE1B,CAAEP,KAAF,EAASO,KAAT,KAAoB,CAAEP,KAAK,CAACG,QAAN,CAAgBI,KAAhB,CAAF,CAFM,CAApB;;AAKA,MAAME,iBAAiB,GAAG,qBAChC,CAAET,KAAF,EAASO,KAAT;AAAA;;AAAA,SAAoBN,MAAM,CAACO,MAAP,0BAAeR,KAAK,CAACK,cAAN,CAAsBE,KAAtB,CAAf,yEAAgD,EAAhD,CAApB;AAAA,CADgC,EAEhC,CAAEP,KAAF,EAASO,KAAT,KAAoB,CAAEP,KAAK,CAACK,cAAN,CAAsBE,KAAtB,CAAF,CAFY,CAA1B","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":["unique","array","filter","value","index","current","indexOf","getGroups","state","Object","keys","commands","concat","commandLoaders","getCommands","group","values","getCommandLoaders","isOpen"],"mappings":";;;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGA,SAASA,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;;AAEM,MAAMG,SAAS,GAAG,qBACtBC,KAAF,IACCR,MAAM,CACLS,MAAM,CAACC,IAAP,CAAaF,KAAK,CAACG,QAAnB,EAA8BC,MAA9B,CACCH,MAAM,CAACC,IAAP,CAAaF,KAAK,CAACK,cAAnB,CADD,CADK,CAFiB,EAOtBL,KAAF,IAAa,CAAEA,KAAK,CAACG,QAAR,EAAkBH,KAAK,CAACK,cAAxB,CAPW,CAAlB;;AAUA,MAAMC,WAAW,GAAG,qBAC1B,CAAEN,KAAF,EAASO,KAAT;AAAA;;AAAA,SAAoBN,MAAM,CAACO,MAAP,0BAAeR,KAAK,CAACG,QAAN,CAAgBI,KAAhB,CAAf,yEAA0C,EAA1C,CAApB;AAAA,CAD0B,EAE1B,CAAEP,KAAF,EAASO,KAAT,KAAoB,CAAEP,KAAK,CAACG,QAAN,CAAgBI,KAAhB,CAAF,CAFM,CAApB;;AAKA,MAAME,iBAAiB,GAAG,qBAChC,CAAET,KAAF,EAASO,KAAT;AAAA;;AAAA,SAAoBN,MAAM,CAACO,MAAP,0BAAeR,KAAK,CAACK,cAAN,CAAsBE,KAAtB,CAAf,yEAAgD,EAAhD,CAApB;AAAA,CADgC,EAEhC,CAAEP,KAAF,EAASO,KAAT,KAAoB,CAAEP,KAAK,CAACK,cAAN,CAAsBE,KAAtB,CAAF,CAFY,CAA1B;;;AAKA,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-module/components/command-menu.js

@@ -11,8 +11,9 @@ import { Command } from 'cmdk';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useEffect, useRef, useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Modal, TextHighlight } from '@wordpress/components';
+import { Modal, TextHighlight, __experimentalHStack as HStack } from '@wordpress/components';
 import { store as keyboardShortcutsStore, useShortcut } from '@wordpress/keyboard-shortcuts';
+import { Icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
@@ -44,12 +45,15 @@ function CommandMenuLoader(_ref) {
     onSelect: () => command.callback({
       close
     })
-  }, createElement("span", {
+  }, createElement(HStack, {
+    alignment: "left",
     className: "commands-command-menu__item"
-  }, createElement(TextHighlight, {
+  }, createElement(Icon, {
+    icon: command.icon
+  }), createElement("span", null, createElement(TextHighlight, {
     text: command.label,
     highlight: search
-  }))))));
+  })))))));
 }
 
 export function CommandMenuLoaderWrapper(_ref2) {
@@ -100,20 +104,21 @@ export function CommandMenuGroup(_ref3) {
       loaders: getCommandLoaders(group)
     };
   }, [group]);
-  return createElement(Command.Group, {
-    heading: group
-  }, commands.map(command => createElement(Command.Item, {
+  return createElement(Command.Group, null, commands.map(command => createElement(Command.Item, {
     key: command.name,
     value: command.name,
     onSelect: () => command.callback({
       close
     })
-  }, createElement("span", {
+  }, createElement(HStack, {
+    alignment: "left",
     className: "commands-command-menu__item"
-  }, createElement(TextHighlight, {
+  }, createElement(Icon, {
+    icon: command.icon
+  }), createElement("span", null, createElement(TextHighlight, {
     text: command.label,
     highlight: search
-  })))), loaders.map(loader => createElement(CommandMenuLoaderWrapper, {
+  }))))), loaders.map(loader => createElement(CommandMenuLoaderWrapper, {
     key: loader.name,
     hook: loader.hook,
     search: search,
@@ -126,18 +131,25 @@ export function CommandMenu() {
     registerShortcut
   } = useDispatch(keyboardShortcutsStore);
   const [search, setSearch] = useState('');
-  const [open, setOpen] = useState(false);
   const {
-    groups
+    groups,
+    isOpen
   } = useSelect(select => {
     const {
-      getGroups
+      getGroups,
+      isOpen: _isOpen
     } = select(commandsStore);
     return {
-      groups: getGroups()
+      groups: getGroups(),
+      isOpen: _isOpen()
     };
   }, []);
+  const {
+    open,
+    close
+  } = useDispatch(commandsStore);
   const [loaders, setLoaders] = useState({});
+  const commandMenuInput = useRef();
   useEffect(() => {
     registerShortcut({
       name: 'core/commands',
@@ -151,7 +163,12 @@ export function CommandMenu() {
   }, [registerShortcut]);
   useShortcut('core/commands', event => {
     event.preventDefault();
-    setOpen(prevOpen => !prevOpen);
+
+    if (isOpen) {
+      close();
+    } else {
+      open();
+    }
   }, {
     bindGlobal: true
   });
@@ -159,12 +176,19 @@ export function CommandMenu() {
     [name]: value
   })), []);
 
-  const close = () => {
+  const closeAndReset = () => {
     setSearch('');
-    setOpen(false);
+    close();
   };
 
-  if (!open) {
+  useEffect(() => {
+    // Focus the command menu input when mounting the modal.
+    if (isOpen) {
+      commandMenuInput.current.focus();
+    }
+  }, [isOpen]);
+
+  if (!isOpen) {
     return false;
   }
 
@@ -172,7 +196,7 @@ export function CommandMenu() {
   return createElement(Modal, {
     className: "commands-command-menu",
     overlayClassName: "commands-command-menu__overlay",
-    onRequestClose: close,
+    onRequestClose: closeAndReset,
     __experimentalHideHeader: true
   }, createElement("div", {
     className: "commands-command-menu__container"
@@ -181,18 +205,16 @@ export function CommandMenu() {
   }, createElement("div", {
     className: "commands-command-menu__header"
   }, createElement(Command.Input, {
-    // The input should be focused when the modal is opened.
-    // eslint-disable-next-line jsx-a11y/no-autofocus
-    autoFocus: true,
+    ref: commandMenuInput,
     value: search,
     onValueChange: setSearch,
-    placeholder: __('Search for content and templates, or try commands like "Add…"')
-  })), createElement(Command.List, null, !isLoading && createElement(Command.Empty, null, __('No results found.')), groups.map(group => createElement(CommandMenuGroup, {
+    placeholder: __('Type a command or search')
+  })), search && createElement(Command.List, null, !isLoading && createElement(Command.Empty, null, __('No results found.')), groups.map(group => createElement(CommandMenuGroup, {
     key: group,
     group: group,
     search: search,
     setLoader: setLoader,
-    close: close
+    close: closeAndReset
   }))))));
 }
 //# sourceMappingURL=command-menu.js.map