@wordpress/commands 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 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,
@@ -201,8 +207,8 @@ function CommandMenu() {
     autoFocus: true,
     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,

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","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 {\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 [ 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={ __( '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={ close }\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/store/actions.js

@@ -15,10 +15,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 +47,7 @@ function registerCommand(_ref) {
   let {
     name,
     label,
+    icon,
     callback,
     group = ''
   } = _ref;
@@ -53,6 +55,7 @@ function registerCommand(_ref) {
     type: 'REGISTER_COMMAND',
     name,
     label,
+    icon,
     callback,
     group
   };

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"],"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","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"]}

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
           }
         }
       };

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","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,MAAMY,OAAO,GAAG,2BAAiB;AAChCb,EAAAA,QADgC;AAEhCW,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\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\nconst reducer = combineReducers( {\n\tcommands,\n\tcommandLoaders,\n} );\n\nexport default reducer;\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,
@@ -186,8 +191,8 @@ export function CommandMenu() {
     autoFocus: true,
     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,

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","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 {\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 [ 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={ __( '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={ close }\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/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
   };

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"],"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","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"]}

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
           }
         }
       };

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","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,MAAMY,OAAO,GAAGd,eAAe,CAAE;AAChCC,EAAAA,QADgC;AAEhCW,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\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\nconst reducer = combineReducers( {\n\tcommands,\n\tcommandLoaders,\n} );\n\nexport default reducer;\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,52 @@
   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 [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,52 @@
   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 [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.3.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": "^23.9.0",
+		"@wordpress/data": "^9.2.0",
+		"@wordpress/element": "^5.9.0",
+		"@wordpress/i18n": "^4.32.0",
+		"@wordpress/icons": "^9.23.0",
+		"@wordpress/keyboard-shortcuts": "^4.9.0",
+		"@wordpress/private-apis": "^0.14.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": "6df0c62d43b8901414ccd22ffbe56eaa99d012a6"
 }

package/src/components/command-menu.js

@@ -9,11 +9,16 @@ 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
@@ -39,12 +44,18 @@ function CommandMenuLoader( { name, search, hook, setLoader, close } ) {
 						value={ command.name }
 						onSelect={ () => command.callback( { close } ) }
 					>
-						<span className="commands-command-menu__item">
-							<TextHighlight
-								text={ command.label }
-								highlight={ search }
-							/>
-						</span>
+						<HStack
+							alignment="left"
+							className="commands-command-menu__item"
+						>
+							<Icon icon={ command.icon } />
+							<span>
+								<TextHighlight
+									text={ command.label }
+									highlight={ search }
+								/>
+							</span>
+						</HStack>
 					</Command.Item>
 				) ) }
 			</Command.List>
@@ -91,19 +102,25 @@ export function CommandMenuGroup( { group, search, setLoader, close } ) {
 	);
 
 	return (
-		<Command.Group heading={ group }>
+		<Command.Group>
 			{ commands.map( ( command ) => (
 				<Command.Item
 					key={ command.name }
 					value={ command.name }
 					onSelect={ () => command.callback( { close } ) }
 				>
-					<span className="commands-command-menu__item">
-						<TextHighlight
-							text={ command.label }
-							highlight={ search }
-						/>
-					</span>
+					<HStack
+						alignment="left"
+						className="commands-command-menu__item"
+					>
+						<Icon icon={ command.icon } />
+						<span>
+							<TextHighlight
+								text={ command.label }
+								highlight={ search }
+							/>
+						</span>
+					</HStack>
 				</Command.Item>
 			) ) }
 			{ loaders.map( ( loader ) => (
@@ -188,27 +205,27 @@ export function CommandMenu() {
 							autoFocus
 							value={ search }
 							onValueChange={ setSearch }
-							placeholder={ __(
-								'Search for content and templates, or try commands like "Add…"'
-							) }
+							placeholder={ __( 'Type a command or search' ) }
 						/>
 					</div>
-					<Command.List>
-						{ ! isLoading && (
-							<Command.Empty>
-								{ __( 'No results found.' ) }
-							</Command.Empty>
-						) }
-						{ groups.map( ( group ) => (
-							<CommandMenuGroup
-								key={ group }
-								group={ group }
-								search={ search }
-								setLoader={ setLoader }
-								close={ close }
-							/>
-						) ) }
-					</Command.List>
+					{ search && (
+						<Command.List>
+							{ ! isLoading && (
+								<Command.Empty>
+									{ __( 'No results found.' ) }
+								</Command.Empty>
+							) }
+							{ groups.map( ( group ) => (
+								<CommandMenuGroup
+									key={ group }
+									group={ group }
+									search={ search }
+									setLoader={ setLoader }
+									close={ close }
+								/>
+							) ) }
+						</Command.List>
+					) }
 				</Command>
 			</div>
 		</Modal>

package/src/components/style.scss

@@ -1,8 +1,7 @@
 // dirty hack to clean up modal
 .commands-command-menu {
-	padding: 0;
 	width: 100%;
-	max-width: 680px;
+	max-width: 480px;
 	position: relative;
 	top: 15%;
 
@@ -20,7 +19,6 @@
 .commands-command-menu__header {
 	display: flex;
 	align-items: center;
-	margin: $grid-unit-15 $grid-unit-15 0 $grid-unit-15;
 
 	.components-button {
 		height: $grid-unit-70;
@@ -38,72 +36,44 @@
 }
 
 .commands-command-menu__container {
-	[cmdk-linear-badge] {
-		height: 24px;
-		padding: 0 8px;
-		font-size: 12px;
-		color: $gray-800;
-		background: $gray-300;
-		border-radius: 4px;
-		width: fit-content;
-		display: flex;
-		align-items: center;
-		margin: $grid-unit-20 $grid-unit-20 0;
-	}
-
-	[cmdk-linear-shortcuts] {
-		display: flex;
-		margin-left: auto;
-		gap: $grid-unit-10;
-
-		kbd {
-			color: $gray-800;
-		}
-	}
-
 	[cmdk-input] {
-		border: 1px solid $gray-600;
+		border: none;
 		width: 100%;
-		padding: $grid-unit-15 $grid-unit-20;
-		min-height: $grid-unit-70;
+		padding: $grid-unit-20;
 		outline: none;
 		color: $gray-900;
 		margin: 0;
-		border-radius: $radius-block-ui;
+		font-size: 20px;
+		line-height: 28px;
+		border-bottom: 1px solid $gray-200;
+		border-radius: 0;
 
 		&::placeholder {
 			color: $gray-600;
 		}
 
 		&: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 $gray-200;
 		}
 	}
 
 	[cmdk-item] {
-		content-visibility: auto;
-		border-radius: $radius-block-ui;
+		border-radius: $grid-unit-05;
 		cursor: pointer;
-		height: $grid-unit-50;
 		display: flex;
 		align-items: center;
-		gap: $grid-unit-15;
-		padding: 0 $grid-unit-20;
+		padding: $grid-unit;
 		color: $gray-900;
-		user-select: none;
-		will-change: background, color;
-		transition: all 150ms ease;
-		transition-property: none;
-		position: relative;
 
-		&[aria-selected="true"] {
+		&[aria-selected="true"],
+		&:active {
 			background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 			color: var(--wp-admin-theme-color);
 
 			svg {
-				color: var(--wp-admin-theme-color);
+				fill: var(--wp-admin-theme-color);
 			}
 		}
 
@@ -112,46 +82,15 @@
 			cursor: not-allowed;
 		}
 
-		&:active {
-			transition-property: background;
-			background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
-		}
-
-		& + [cmdk-item] {
-			margin-top: $grid-unit-05;
-		}
-
-		svg,
-		.dashicon {
-			width: $grid-unit-20;
-			height: $grid-unit-20;
-			color: $gray-800;
+		svg {
+			fill: $gray-600;
 		}
 	}
 
 	[cmdk-root] > [cmdk-list] {
-		min-height: 300px;
 		max-height: 400px;
 		overflow: auto;
-		overscroll-behavior: contain;
-		transition: 100ms ease;
-		transition-property: height;
-		margin: $grid-unit-15;
-	}
-
-	[cmdk-group-heading] {
-		user-select: none;
-		color: $gray-700;
-		padding: $grid-unit-30 $grid-unit-20 $grid-unit-20;
-		display: flex;
-		align-items: center;
-		font-size: 11px;
-		text-transform: uppercase;
-		font-weight: 500;
-		position: sticky;
-		top: 0;
-		background: $white;
-		z-index: 1;
+		padding: $grid-unit;
 	}
 
 	[cmdk-empty] {

package/src/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.
  */
 
 /**
@@ -32,11 +33,12 @@
  *
  * @return {Object} action.
  */
-export function registerCommand( { name, label, callback, group = '' } ) {
+export function registerCommand( { name, label, icon, callback, group = '' } ) {
 	return {
 		type: 'REGISTER_COMMAND',
 		name,
 		label,
+		icon,
 		callback,
 		group,
 	};

package/src/store/reducer.js

@@ -23,6 +23,7 @@ function commands( state = {}, action ) {
 						label: action.label,
 						group: action.group,
 						callback: action.callback,
+						icon: action.icon,
 					},
 				},
 			};