@wordpress/commands 0.12.1-next.5a1d1283.0 → 0.13.1

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 0.13.0 (2023-09-20)
+
 ## 0.12.0 (2023-08-31)
 
 ## 0.11.0 (2023-08-16)

package/README.md

@@ -1,6 +1,48 @@
 # Commands
 
-Commands is a generic package that allows registering and modifying commands to be displayed using the commands menu (Also called cmd+k).
+Commands is a generic package that allows registering and modifying commands to be displayed using the commands menu, also called the Command Palette. The Command Palette can be accessed in the Editor using `cmd+k`.
+
+## Types of commands
+
+There are two ways to register commands: static or dynamic. Both methods receive a command object as an argument, which provides:
+
+-   `name`: A unique machine-readable name for the command
+-   `label`: A human-readable label
+-   `icon`: An SVG icon
+-   `callback`: A callback function that is called when the command is selected
+-   `context`: (Optional) The context of the command
+
+### Static commands
+
+Static commands can be registered using the `wp.data.dispatch( wp.commands.store ).registerCommand` action or using the `wp.commands.useCommand` React hook. Static commands are commonly used to perform a specific action. These could include adding a new page or opening a section of the Editor interface, such as opening the Editor Preferences modal. See the `useCommand` [code example](#usecommand) below.
+
+### Dynamic commands
+
+Dynamic commands, on the other hand, are registered using “command loaders", `wp.commands.useCommandLoader`. These loaders are needed when the command list depends on a search term entered by the user in the Command Palette input or when some commands are only available when some conditions are met.
+
+For example, when a user types "contact", the Command Palette needs to filter the available pages using that input to try and find the Contact page. See the `useCommandLoader` [code example](#usecommandloader) below.
+
+## Contextual commands
+
+Static and dynamic commands can be contextual. This means that in a given context (for example, when navigating the Site Editor or editing a template), some specific commands are given more priority and are visible as soon as you open the Command Palette. Also, when typing the Command Palette, these contextual commands are shown above the rest of the commands.
+
+At the moment, two contexts have been implemented:
+
+-   `site-editor`: This is the context that is set when you are navigating in the site editor (sidebar visible).
+-   `site-editor-edit`: This is the context that is set when you are editing a document (template, template part or page) in the site editor.
+    As the usage of the Command Palette expands, more contexts will be added.
+
+Attaching a command or command loader to a given context is as simple as adding the `context` property (with the right context value from the available contexts above) to the `useCommand` or `useCommandLoader` calls.
+
+## WordPress Data API
+
+The Command Palette also offers a number of [selectors and actions](https://developer.wordpress.org/block-editor/reference-guides/data/data-core-commands/) to manipulate its state, which include:
+
+-   Retrieving the registered commands and command loaders using the following selectors `getCommands` and `getCommandLoader`
+-   Checking if the Command Palette is open using the `isOpen` selector.
+-   Programmatically open or close the Command Palette using the `open` and `close` actions.
+
+See the [Commands Data](https://developer.wordpress.org/block-editor/reference-guides/data/data-core-commands/) documentation for more information.
 
 ## Installation
 
@@ -16,29 +58,49 @@ _This package assumes that your code will run in an **ES2015+** environment. If
 
 <!-- START TOKEN(Autogenerated API docs) -->
 
-### CommandMenu
-
-Undocumented declaration.
-
-### privateApis
-
-Undocumented declaration.
-
 ### store
 
 Store definition for the commands namespace.
 
+See how the Commands Store is being used in components like [site-hub](https://github.com/WordPress/gutenberg/blob/HEAD/packages/edit-site/src/components/site-hub/index.js#L23) and [document-actions](https://github.com/WordPress/gutenberg/blob/HEAD/packages/edit-post/src/components/header/document-actions/index.js#L14).
+
 _Related_
 
 -   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore>
 
+_Usage_
+
+```js
+import { store as commandsStore } from '@wordpress/commands';
+import { useDispatch } from '@wordpress/data';
+...
+const { open: openCommandCenter } = useDispatch( commandsStore );
+```
+
 _Type_
 
 -   `Object`
 
 ### useCommand
 
-Attach a command to the command palette.
+Attach a command to the command palette. Used for static commands.
+
+_Usage_
+
+```js
+import { useCommand } from '@wordpress/commands';
+import { plus } from '@wordpress/icons';
+
+useCommand( {
+	name: 'myplugin/my-command-name',
+	label: __( 'Add new post' ),
+	icon: plus,
+	callback: ( { close } ) => {
+		document.location.href = 'post-new.php';
+		close();
+	},
+} );
+```
 
 _Parameters_
 
@@ -46,7 +108,72 @@ _Parameters_
 
 ### useCommandLoader
 
-Attach a command loader to the command palette.
+Attach a command loader to the command palette. Used for dynamic commands.
+
+_Usage_
+
+```js
+import { useCommandLoader } from '@wordpress/commands';
+import { post, page, layout, symbolFilled } from '@wordpress/icons';
+
+const icons = {
+    post,
+    page,
+    wp_template: layout,
+    wp_template_part: symbolFilled,
+};
+
+function usePageSearchCommandLoader( { search } ) {
+    // Retrieve the pages for the "search" term.
+    const { records, isLoading } = useSelect( ( select ) => {
+        const { getEntityRecords } = select( coreStore );
+        const query = {
+            search: !! search ? search : undefined,
+            per_page: 10,
+            orderby: search ? 'relevance' : 'date',
+        };
+        return {
+            records: getEntityRecords( 'postType', 'page', query ),
+            isLoading: ! select( coreStore ).hasFinishedResolution(
+                'getEntityRecords',
+                'postType', 'page', query ]
+            ),
+        };
+    }, [ search ] );
+
+    // Create the commands.
+    const commands = useMemo( () => {
+        return ( records ?? [] ).slice( 0, 10 ).map( ( record ) => {
+            return {
+                name: record.title?.rendered + ' ' + record.id,
+                label: record.title?.rendered
+                    ? record.title?.rendered
+                    : __( '(no title)' ),
+                icon: icons[ postType ],
+                callback: ( { close } ) => {
+                    const args = {
+                        postType,
+                        postId: record.id,
+                        ...extraArgs,
+                    };
+                    document.location = addQueryArgs( 'site-editor.php', args );
+                    close();
+                },
+            };
+        } );
+    }, [ records, history ] );
+
+    return {
+        commands,
+        isLoading,
+    };
+}
+
+useCommandLoader( {
+    name: 'myplugin/page-search',
+    hook: usePageSearchCommandLoader,
+} );
+```
 
 _Parameters_
 

package/build/components/command-menu.js

@@ -173,6 +173,10 @@ function CommandInput({
     icon: search
   });
 }
+
+/**
+ * @ignore
+ */
 function CommandMenu() {
   const {
     registerShortcut

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_cmdk","_classnames","_interopRequireDefault","_data","_i18n","_components","_keyboardShortcuts","_icons","_store","CommandMenuLoader","name","search","hook","setLoader","close","_hook","isLoading","commands","useEffect","length","createElement","Fragment","Command","List","map","command","_command$searchLabel","Item","key","value","searchLabel","label","onSelect","callback","id","__experimentalHStack","alignment","className","classnames","icon","Icon","TextHighlight","text","highlight","CommandMenuLoaderWrapper","currentLoader","useRef","setKey","useState","current","prevKey","CommandMenuGroup","isContextual","loaders","useSelect","select","getCommands","getCommandLoaders","commandsStore","Group","_command$searchLabel2","loader","CommandInput","isOpen","setSearch","commandMenuInput","_value","useCommandState","state","selectedItemId","useMemo","item","document","querySelector","getAttribute","focus","Input","ref","onValueChange","placeholder","__","CommandMenu","registerShortcut","useDispatch","keyboardShortcutsStore","open","setLoaders","category","description","keyCombination","modifier","character","useShortcut","event","defaultPrevented","preventDefault","bindGlobal","useCallback","closeAndReset","onKeyDown","nativeEvent","isComposing","keyCode","Object","values","some","Boolean","Modal","overlayClassName","onRequestClose","__experimentalHideHeader","inputIcon","Empty"],"sources":["@wordpress/commands/src/components/command-menu.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Command, useCommandState } from 'cmdk';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tuseState,\n\tuseEffect,\n\tuseRef,\n\tuseCallback,\n\tuseMemo,\n} 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, search as inputIcon } 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\tif ( ! commands.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<Command.List>\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.searchLabel ?? command.label }\n\t\t\t\t\t\tonSelect={ () => command.callback( { close } ) }\n\t\t\t\t\t\tid={ command.name }\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={ classnames(\n\t\t\t\t\t\t\t\t'commands-command-menu__item',\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t'has-icon': command.icon,\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ command.icon && <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( { isContextual, 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( isContextual ),\n\t\t\t\tloaders: getCommandLoaders( isContextual ),\n\t\t\t};\n\t\t},\n\t\t[ isContextual ]\n\t);\n\n\tif ( ! commands.length && ! loaders.length ) {\n\t\treturn null;\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.searchLabel ?? command.label }\n\t\t\t\t\tonSelect={ () => command.callback( { close } ) }\n\t\t\t\t\tid={ command.name }\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={ classnames( 'commands-command-menu__item', {\n\t\t\t\t\t\t\t'has-icon': command.icon,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ command.icon && <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\nfunction CommandInput( { isOpen, search, setSearch } ) {\n\tconst commandMenuInput = useRef();\n\tconst _value = useCommandState( ( state ) => state.value );\n\tconst selectedItemId = useMemo( () => {\n\t\tconst item = document.querySelector(\n\t\t\t`[cmdk-item=\"\"][data-value=\"${ _value }\"]`\n\t\t);\n\t\treturn item?.getAttribute( 'id' );\n\t}, [ _value ] );\n\tuseEffect( () => {\n\t\t// Focus the command palette input when mounting the modal.\n\t\tif ( isOpen ) {\n\t\t\tcommandMenuInput.current.focus();\n\t\t}\n\t}, [ isOpen ] );\n\treturn (\n\t\t<Command.Input\n\t\t\tref={ commandMenuInput }\n\t\t\tvalue={ search }\n\t\t\tonValueChange={ setSearch }\n\t\t\tplaceholder={ __( 'Search for commands' ) }\n\t\t\taria-activedescendant={ selectedItemId }\n\t\t\ticon={ search }\n\t\t/>\n\t);\n}\n\nexport function CommandMenu() {\n\tconst { registerShortcut } = useDispatch( keyboardShortcutsStore );\n\tconst [ search, setSearch ] = useState( '' );\n\tconst isOpen = useSelect(\n\t\t( select ) => select( commandsStore ).isOpen(),\n\t\t[]\n\t);\n\tconst { open, close } = useDispatch( commandsStore );\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 command palette.' ),\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/** @type {import('react').KeyboardEventHandler} */\n\t\t( event ) => {\n\t\t\t// Bails to avoid obscuring the effect of the preceding handler(s).\n\t\t\tif ( event.defaultPrevented ) return;\n\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\tif ( ! isOpen ) {\n\t\treturn false;\n\t}\n\n\tconst onKeyDown = ( event ) => {\n\t\tif (\n\t\t\t// Ignore keydowns from IMEs\n\t\t\tevent.nativeEvent.isComposing ||\n\t\t\t// Workaround for Mac Safari where the final Enter/Backspace of an IME composition\n\t\t\t// is `isComposing=false`, even though it's technically still part of the composition.\n\t\t\t// These can only be detected by keyCode.\n\t\t\tevent.keyCode === 229\n\t\t) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t};\n\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\n\t\t\t\t\tlabel={ __( 'Command palette' ) }\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t>\n\t\t\t\t\t<div className=\"commands-command-menu__header\">\n\t\t\t\t\t\t<Icon icon={ inputIcon } />\n\t\t\t\t\t\t<CommandInput\n\t\t\t\t\t\t\tsearch={ search }\n\t\t\t\t\t\t\tsetSearch={ setSearch }\n\t\t\t\t\t\t\tisOpen={ isOpen }\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{ search && ! 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<CommandMenuGroup\n\t\t\t\t\t\t\tsearch={ search }\n\t\t\t\t\t\t\tsetLoader={ setLoader }\n\t\t\t\t\t\t\tclose={ closeAndReset }\n\t\t\t\t\t\t\tisContextual\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ search && (\n\t\t\t\t\t\t\t<CommandMenuGroup\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={ closeAndReset }\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"],"mappings":"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"}
+{"version":3,"names":["_element","require","_cmdk","_classnames","_interopRequireDefault","_data","_i18n","_components","_keyboardShortcuts","_icons","_store","CommandMenuLoader","name","search","hook","setLoader","close","_hook","isLoading","commands","useEffect","length","createElement","Fragment","Command","List","map","command","_command$searchLabel","Item","key","value","searchLabel","label","onSelect","callback","id","__experimentalHStack","alignment","className","classnames","icon","Icon","TextHighlight","text","highlight","CommandMenuLoaderWrapper","currentLoader","useRef","setKey","useState","current","prevKey","CommandMenuGroup","isContextual","loaders","useSelect","select","getCommands","getCommandLoaders","commandsStore","Group","_command$searchLabel2","loader","CommandInput","isOpen","setSearch","commandMenuInput","_value","useCommandState","state","selectedItemId","useMemo","item","document","querySelector","getAttribute","focus","Input","ref","onValueChange","placeholder","__","CommandMenu","registerShortcut","useDispatch","keyboardShortcutsStore","open","setLoaders","category","description","keyCombination","modifier","character","useShortcut","event","defaultPrevented","preventDefault","bindGlobal","useCallback","closeAndReset","onKeyDown","nativeEvent","isComposing","keyCode","Object","values","some","Boolean","Modal","overlayClassName","onRequestClose","__experimentalHideHeader","inputIcon","Empty"],"sources":["@wordpress/commands/src/components/command-menu.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Command, useCommandState } from 'cmdk';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tuseState,\n\tuseEffect,\n\tuseRef,\n\tuseCallback,\n\tuseMemo,\n} 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, search as inputIcon } 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\tif ( ! commands.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<Command.List>\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.searchLabel ?? command.label }\n\t\t\t\t\t\tonSelect={ () => command.callback( { close } ) }\n\t\t\t\t\t\tid={ command.name }\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={ classnames(\n\t\t\t\t\t\t\t\t'commands-command-menu__item',\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t'has-icon': command.icon,\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ command.icon && <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( { isContextual, 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( isContextual ),\n\t\t\t\tloaders: getCommandLoaders( isContextual ),\n\t\t\t};\n\t\t},\n\t\t[ isContextual ]\n\t);\n\n\tif ( ! commands.length && ! loaders.length ) {\n\t\treturn null;\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.searchLabel ?? command.label }\n\t\t\t\t\tonSelect={ () => command.callback( { close } ) }\n\t\t\t\t\tid={ command.name }\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={ classnames( 'commands-command-menu__item', {\n\t\t\t\t\t\t\t'has-icon': command.icon,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ command.icon && <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\nfunction CommandInput( { isOpen, search, setSearch } ) {\n\tconst commandMenuInput = useRef();\n\tconst _value = useCommandState( ( state ) => state.value );\n\tconst selectedItemId = useMemo( () => {\n\t\tconst item = document.querySelector(\n\t\t\t`[cmdk-item=\"\"][data-value=\"${ _value }\"]`\n\t\t);\n\t\treturn item?.getAttribute( 'id' );\n\t}, [ _value ] );\n\tuseEffect( () => {\n\t\t// Focus the command palette input when mounting the modal.\n\t\tif ( isOpen ) {\n\t\t\tcommandMenuInput.current.focus();\n\t\t}\n\t}, [ isOpen ] );\n\treturn (\n\t\t<Command.Input\n\t\t\tref={ commandMenuInput }\n\t\t\tvalue={ search }\n\t\t\tonValueChange={ setSearch }\n\t\t\tplaceholder={ __( 'Search for commands' ) }\n\t\t\taria-activedescendant={ selectedItemId }\n\t\t\ticon={ search }\n\t\t/>\n\t);\n}\n\n/**\n * @ignore\n */\nexport function CommandMenu() {\n\tconst { registerShortcut } = useDispatch( keyboardShortcutsStore );\n\tconst [ search, setSearch ] = useState( '' );\n\tconst isOpen = useSelect(\n\t\t( select ) => select( commandsStore ).isOpen(),\n\t\t[]\n\t);\n\tconst { open, close } = useDispatch( commandsStore );\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 command palette.' ),\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/** @type {import('react').KeyboardEventHandler} */\n\t\t( event ) => {\n\t\t\t// Bails to avoid obscuring the effect of the preceding handler(s).\n\t\t\tif ( event.defaultPrevented ) return;\n\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\tif ( ! isOpen ) {\n\t\treturn false;\n\t}\n\n\tconst onKeyDown = ( event ) => {\n\t\tif (\n\t\t\t// Ignore keydowns from IMEs\n\t\t\tevent.nativeEvent.isComposing ||\n\t\t\t// Workaround for Mac Safari where the final Enter/Backspace of an IME composition\n\t\t\t// is `isComposing=false`, even though it's technically still part of the composition.\n\t\t\t// These can only be detected by keyCode.\n\t\t\tevent.keyCode === 229\n\t\t) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t};\n\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\n\t\t\t\t\tlabel={ __( 'Command palette' ) }\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t>\n\t\t\t\t\t<div className=\"commands-command-menu__header\">\n\t\t\t\t\t\t<Icon icon={ inputIcon } />\n\t\t\t\t\t\t<CommandInput\n\t\t\t\t\t\t\tsearch={ search }\n\t\t\t\t\t\t\tsetSearch={ setSearch }\n\t\t\t\t\t\t\tisOpen={ isOpen }\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{ search && ! 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<CommandMenuGroup\n\t\t\t\t\t\t\tsearch={ search }\n\t\t\t\t\t\t\tsetLoader={ setLoader }\n\t\t\t\t\t\t\tclose={ closeAndReset }\n\t\t\t\t\t\t\tisContextual\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ search && (\n\t\t\t\t\t\t\t<CommandMenuGroup\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={ closeAndReset }\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"],"mappings":"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"}

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

@@ -16,9 +16,73 @@ var _store = require("../store");
  */
 
 /**
- * Attach a command loader to the command palette.
+ * Attach a command loader to the command palette. Used for dynamic commands.
  *
  * @param {import('../store/actions').WPCommandLoaderConfig} loader command loader config.
+ *
+ * @example
+ * ```js
+ * import { useCommandLoader } from '@wordpress/commands';
+ * import { post, page, layout, symbolFilled } from '@wordpress/icons';
+ *
+ * const icons = {
+ *     post,
+ *     page,
+ *     wp_template: layout,
+ *     wp_template_part: symbolFilled,
+ * };
+ *
+ * function usePageSearchCommandLoader( { search } ) {
+ *     // Retrieve the pages for the "search" term.
+ *     const { records, isLoading } = useSelect( ( select ) => {
+ *         const { getEntityRecords } = select( coreStore );
+ *         const query = {
+ *             search: !! search ? search : undefined,
+ *             per_page: 10,
+ *             orderby: search ? 'relevance' : 'date',
+ *         };
+ *         return {
+ *             records: getEntityRecords( 'postType', 'page', query ),
+ *             isLoading: ! select( coreStore ).hasFinishedResolution(
+ *                 'getEntityRecords',
+ *                 'postType', 'page', query ]
+ *             ),
+ *         };
+ *     }, [ search ] );
+ *
+ *     // Create the commands.
+ *     const commands = useMemo( () => {
+ *         return ( records ?? [] ).slice( 0, 10 ).map( ( record ) => {
+ *             return {
+ *                 name: record.title?.rendered + ' ' + record.id,
+ *                 label: record.title?.rendered
+ *                     ? record.title?.rendered
+ *                     : __( '(no title)' ),
+ *                 icon: icons[ postType ],
+ *                 callback: ( { close } ) => {
+ *                     const args = {
+ *                         postType,
+ *                         postId: record.id,
+ *                         ...extraArgs,
+ *                     };
+ *                     document.location = addQueryArgs( 'site-editor.php', args );
+ *                     close();
+ *                 },
+ *             };
+ *         } );
+ *     }, [ records, history ] );
+ *
+ *     return {
+ *         commands,
+ *         isLoading,
+ *     };
+ * }
+ *
+ * useCommandLoader( {
+ *     name: 'myplugin/page-search',
+ *     hook: usePageSearchCommandLoader,
+ * } );
+ * ```
  */
 function useCommandLoader(loader) {
   const {

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_data","_store","useCommandLoader","loader","registerCommandLoader","unregisterCommandLoader","useDispatch","commandsStore","useEffect","name","hook","context"],"sources":["@wordpress/commands/src/hooks/use-command-loader.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect } 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 loader to the command palette.\n *\n * @param {import('../store/actions').WPCommandLoaderConfig} loader command loader config.\n */\nexport default function useCommandLoader( loader ) {\n\tconst { registerCommandLoader, unregisterCommandLoader } =\n\t\tuseDispatch( commandsStore );\n\tuseEffect( () => {\n\t\tregisterCommandLoader( {\n\t\t\tname: loader.name,\n\t\t\thook: loader.hook,\n\t\t\tcontext: loader.context,\n\t\t} );\n\t\treturn () => {\n\t\t\tunregisterCommandLoader( loader.name );\n\t\t};\n\t}, [\n\t\tloader.name,\n\t\tloader.hook,\n\t\tloader.context,\n\t\tregisterCommandLoader,\n\t\tunregisterCommandLoader,\n\t] );\n}\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,MAAA,GAAAF,OAAA;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACe,SAASG,gBAAgBA,CAAEC,MAAM,EAAG;EAClD,MAAM;IAAEC,qBAAqB;IAAEC;EAAwB,CAAC,GACvD,IAAAC,iBAAW,EAAEC,YAAc,CAAC;EAC7B,IAAAC,kBAAS,EAAE,MAAM;IAChBJ,qBAAqB,CAAE;MACtBK,IAAI,EAAEN,MAAM,CAACM,IAAI;MACjBC,IAAI,EAAEP,MAAM,CAACO,IAAI;MACjBC,OAAO,EAAER,MAAM,CAACQ;IACjB,CAAE,CAAC;IACH,OAAO,MAAM;MACZN,uBAAuB,CAAEF,MAAM,CAACM,IAAK,CAAC;IACvC,CAAC;EACF,CAAC,EAAE,CACFN,MAAM,CAACM,IAAI,EACXN,MAAM,CAACO,IAAI,EACXP,MAAM,CAACQ,OAAO,EACdP,qBAAqB,EACrBC,uBAAuB,CACtB,CAAC;AACJ"}
+{"version":3,"names":["_element","require","_data","_store","useCommandLoader","loader","registerCommandLoader","unregisterCommandLoader","useDispatch","commandsStore","useEffect","name","hook","context"],"sources":["@wordpress/commands/src/hooks/use-command-loader.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect } 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 loader to the command palette. Used for dynamic commands.\n *\n * @param {import('../store/actions').WPCommandLoaderConfig} loader command loader config.\n *\n * @example\n * ```js\n * import { useCommandLoader } from '@wordpress/commands';\n * import { post, page, layout, symbolFilled } from '@wordpress/icons';\n *\n * const icons = {\n *     post,\n *     page,\n *     wp_template: layout,\n *     wp_template_part: symbolFilled,\n * };\n *\n * function usePageSearchCommandLoader( { search } ) {\n *     // Retrieve the pages for the \"search\" term.\n *     const { records, isLoading } = useSelect( ( select ) => {\n *         const { getEntityRecords } = select( coreStore );\n *         const query = {\n *             search: !! search ? search : undefined,\n *             per_page: 10,\n *             orderby: search ? 'relevance' : 'date',\n *         };\n *         return {\n *             records: getEntityRecords( 'postType', 'page', query ),\n *             isLoading: ! select( coreStore ).hasFinishedResolution(\n *                 'getEntityRecords',\n *                 'postType', 'page', query ]\n *             ),\n *         };\n *     }, [ search ] );\n *\n *     // Create the commands.\n *     const commands = useMemo( () => {\n *         return ( records ?? [] ).slice( 0, 10 ).map( ( record ) => {\n *             return {\n *                 name: record.title?.rendered + ' ' + record.id,\n *                 label: record.title?.rendered\n *                     ? record.title?.rendered\n *                     : __( '(no title)' ),\n *                 icon: icons[ postType ],\n *                 callback: ( { close } ) => {\n *                     const args = {\n *                         postType,\n *                         postId: record.id,\n *                         ...extraArgs,\n *                     };\n *                     document.location = addQueryArgs( 'site-editor.php', args );\n *                     close();\n *                 },\n *             };\n *         } );\n *     }, [ records, history ] );\n *\n *     return {\n *         commands,\n *         isLoading,\n *     };\n * }\n *\n * useCommandLoader( {\n *     name: 'myplugin/page-search',\n *     hook: usePageSearchCommandLoader,\n * } );\n * ```\n */\nexport default function useCommandLoader( loader ) {\n\tconst { registerCommandLoader, unregisterCommandLoader } =\n\t\tuseDispatch( commandsStore );\n\tuseEffect( () => {\n\t\tregisterCommandLoader( {\n\t\t\tname: loader.name,\n\t\t\thook: loader.hook,\n\t\t\tcontext: loader.context,\n\t\t} );\n\t\treturn () => {\n\t\t\tunregisterCommandLoader( loader.name );\n\t\t};\n\t}, [\n\t\tloader.name,\n\t\tloader.hook,\n\t\tloader.context,\n\t\tregisterCommandLoader,\n\t\tunregisterCommandLoader,\n\t] );\n}\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,MAAA,GAAAF,OAAA;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASG,gBAAgBA,CAAEC,MAAM,EAAG;EAClD,MAAM;IAAEC,qBAAqB;IAAEC;EAAwB,CAAC,GACvD,IAAAC,iBAAW,EAAEC,YAAc,CAAC;EAC7B,IAAAC,kBAAS,EAAE,MAAM;IAChBJ,qBAAqB,CAAE;MACtBK,IAAI,EAAEN,MAAM,CAACM,IAAI;MACjBC,IAAI,EAAEP,MAAM,CAACO,IAAI;MACjBC,OAAO,EAAER,MAAM,CAACQ;IACjB,CAAE,CAAC;IACH,OAAO,MAAM;MACZN,uBAAuB,CAAEF,MAAM,CAACM,IAAK,CAAC;IACvC,CAAC;EACF,CAAC,EAAE,CACFN,MAAM,CAACM,IAAI,EACXN,MAAM,CAACO,IAAI,EACXP,MAAM,CAACQ,OAAO,EACdP,qBAAqB,EACrBC,uBAAuB,CACtB,CAAC;AACJ"}

package/build/hooks/use-command.js

@@ -16,9 +16,25 @@ var _store = require("../store");
  */
 
 /**
- * Attach a command to the command palette.
+ * Attach a command to the command palette. Used for static commands.
  *
  * @param {import('../store/actions').WPCommandConfig} command command config.
+ *
+ * @example
+ * ```js
+ * import { useCommand } from '@wordpress/commands';
+ * import { plus } from '@wordpress/icons';
+ *
+ * useCommand( {
+ *     name: 'myplugin/my-command-name',
+ *     label: __( 'Add new post' ),
+ *	   icon: plus,
+ *     callback: ({ close }) => {
+ *         document.location.href = 'post-new.php';
+ *         close();
+ *     },
+ * } );
+ * ```
  */
 function useCommand(command) {
   const {

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_data","_store","useCommand","command","registerCommand","unregisterCommand","useDispatch","commandsStore","currentCallback","useRef","callback","useEffect","current","name","context","label","searchLabel","icon","args"],"sources":["@wordpress/commands/src/hooks/use-command.js"],"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 command palette.\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\tcontext: command.context,\n\t\t\tlabel: command.label,\n\t\t\tsearchLabel: command.searchLabel,\n\t\t\ticon: command.icon,\n\t\t\tcallback: ( ...args ) => currentCallback.current( ...args ),\n\t\t} );\n\t\treturn () => {\n\t\t\tunregisterCommand( command.name );\n\t\t};\n\t}, [\n\t\tcommand.name,\n\t\tcommand.label,\n\t\tcommand.searchLabel,\n\t\tcommand.icon,\n\t\tcommand.context,\n\t\tregisterCommand,\n\t\tunregisterCommand,\n\t] );\n}\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,MAAA,GAAAF,OAAA;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACe,SAASG,UAAUA,CAAEC,OAAO,EAAG;EAC7C,MAAM;IAAEC,eAAe;IAAEC;EAAkB,CAAC,GAAG,IAAAC,iBAAW,EAAEC,YAAc,CAAC;EAC3E,MAAMC,eAAe,GAAG,IAAAC,eAAM,EAAEN,OAAO,CAACO,QAAS,CAAC;EAClD,IAAAC,kBAAS,EAAE,MAAM;IAChBH,eAAe,CAACI,OAAO,GAAGT,OAAO,CAACO,QAAQ;EAC3C,CAAC,EAAE,CAAEP,OAAO,CAACO,QAAQ,CAAG,CAAC;EAEzB,IAAAC,kBAAS,EAAE,MAAM;IAChBP,eAAe,CAAE;MAChBS,IAAI,EAAEV,OAAO,CAACU,IAAI;MAClBC,OAAO,EAAEX,OAAO,CAACW,OAAO;MACxBC,KAAK,EAAEZ,OAAO,CAACY,KAAK;MACpBC,WAAW,EAAEb,OAAO,CAACa,WAAW;MAChCC,IAAI,EAAEd,OAAO,CAACc,IAAI;MAClBP,QAAQ,EAAEA,CAAE,GAAGQ,IAAI,KAAMV,eAAe,CAACI,OAAO,CAAE,GAAGM,IAAK;IAC3D,CAAE,CAAC;IACH,OAAO,MAAM;MACZb,iBAAiB,CAAEF,OAAO,CAACU,IAAK,CAAC;IAClC,CAAC;EACF,CAAC,EAAE,CACFV,OAAO,CAACU,IAAI,EACZV,OAAO,CAACY,KAAK,EACbZ,OAAO,CAACa,WAAW,EACnBb,OAAO,CAACc,IAAI,EACZd,OAAO,CAACW,OAAO,EACfV,eAAe,EACfC,iBAAiB,CAChB,CAAC;AACJ"}
+{"version":3,"names":["_element","require","_data","_store","useCommand","command","registerCommand","unregisterCommand","useDispatch","commandsStore","currentCallback","useRef","callback","useEffect","current","name","context","label","searchLabel","icon","args"],"sources":["@wordpress/commands/src/hooks/use-command.js"],"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 command palette. Used for static commands.\n *\n * @param {import('../store/actions').WPCommandConfig} command command config.\n *\n * @example\n * ```js\n * import { useCommand } from '@wordpress/commands';\n * import { plus } from '@wordpress/icons';\n *\n * useCommand( {\n *     name: 'myplugin/my-command-name',\n *     label: __( 'Add new post' ),\n *\t   icon: plus,\n *     callback: ({ close }) => {\n *         document.location.href = 'post-new.php';\n *         close();\n *     },\n * } );\n * ```\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\tcontext: command.context,\n\t\t\tlabel: command.label,\n\t\t\tsearchLabel: command.searchLabel,\n\t\t\ticon: command.icon,\n\t\t\tcallback: ( ...args ) => currentCallback.current( ...args ),\n\t\t} );\n\t\treturn () => {\n\t\t\tunregisterCommand( command.name );\n\t\t};\n\t}, [\n\t\tcommand.name,\n\t\tcommand.label,\n\t\tcommand.searchLabel,\n\t\tcommand.icon,\n\t\tcommand.context,\n\t\tregisterCommand,\n\t\tunregisterCommand,\n\t] );\n}\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,MAAA,GAAAF,OAAA;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASG,UAAUA,CAAEC,OAAO,EAAG;EAC7C,MAAM;IAAEC,eAAe;IAAEC;EAAkB,CAAC,GAAG,IAAAC,iBAAW,EAAEC,YAAc,CAAC;EAC3E,MAAMC,eAAe,GAAG,IAAAC,eAAM,EAAEN,OAAO,CAACO,QAAS,CAAC;EAClD,IAAAC,kBAAS,EAAE,MAAM;IAChBH,eAAe,CAACI,OAAO,GAAGT,OAAO,CAACO,QAAQ;EAC3C,CAAC,EAAE,CAAEP,OAAO,CAACO,QAAQ,CAAG,CAAC;EAEzB,IAAAC,kBAAS,EAAE,MAAM;IAChBP,eAAe,CAAE;MAChBS,IAAI,EAAEV,OAAO,CAACU,IAAI;MAClBC,OAAO,EAAEX,OAAO,CAACW,OAAO;MACxBC,KAAK,EAAEZ,OAAO,CAACY,KAAK;MACpBC,WAAW,EAAEb,OAAO,CAACa,WAAW;MAChCC,IAAI,EAAEd,OAAO,CAACc,IAAI;MAClBP,QAAQ,EAAEA,CAAE,GAAGQ,IAAI,KAAMV,eAAe,CAACI,OAAO,CAAE,GAAGM,IAAK;IAC3D,CAAE,CAAC;IACH,OAAO,MAAM;MACZb,iBAAiB,CAAEF,OAAO,CAACU,IAAK,CAAC;IAClC,CAAC;EACF,CAAC,EAAE,CACFV,OAAO,CAACU,IAAI,EACZV,OAAO,CAACY,KAAK,EACbZ,OAAO,CAACa,WAAW,EACnBb,OAAO,CAACc,IAAI,EACZd,OAAO,CAACW,OAAO,EACfV,eAAe,EACfC,iBAAiB,CAChB,CAAC;AACJ"}

package/build/private-apis.js

@@ -11,6 +11,9 @@ var _lockUnlock = require("./lock-unlock");
  * Internal dependencies
  */
 
+/**
+ * @private
+ */
 const privateApis = {};
 exports.privateApis = privateApis;
 (0, _lockUnlock.lock)(privateApis, {

package/build/private-apis.js.map

@@ -1 +1 @@
-{"version":3,"names":["_useCommandContext","_interopRequireDefault","require","_lockUnlock","privateApis","exports","lock","useCommandContext"],"sources":["@wordpress/commands/src/private-apis.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { default as useCommandContext } from './hooks/use-command-context';\nimport { lock } from './lock-unlock';\n\nexport const privateApis = {};\nlock( privateApis, {\n\tuseCommandContext,\n} );\n"],"mappings":";;;;;;;AAGA,IAAAA,kBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAJA;AACA;AACA;;AAIO,MAAME,WAAW,GAAG,CAAC,CAAC;AAACC,OAAA,CAAAD,WAAA,GAAAA,WAAA;AAC9B,IAAAE,gBAAI,EAAEF,WAAW,EAAE;EAClBG,iBAAiB,EAAjBA;AACD,CAAE,CAAC"}
+{"version":3,"names":["_useCommandContext","_interopRequireDefault","require","_lockUnlock","privateApis","exports","lock","useCommandContext"],"sources":["@wordpress/commands/src/private-apis.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { default as useCommandContext } from './hooks/use-command-context';\nimport { lock } from './lock-unlock';\n\n/**\n * @private\n */\nexport const privateApis = {};\nlock( privateApis, {\n\tuseCommandContext,\n} );\n"],"mappings":";;;;;;;AAGA,IAAAA,kBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAJA;AACA;AACA;;AAIA;AACA;AACA;AACO,MAAME,WAAW,GAAG,CAAC,CAAC;AAACC,OAAA,CAAAD,WAAA,GAAAA,WAAA;AAC9B,IAAAE,gBAAI,EAAEF,WAAW,EAAE;EAClBG,iBAAiB,EAAjBA;AACD,CAAE,CAAC"}

package/build/store/index.js

@@ -26,9 +26,19 @@ const STORE_NAME = 'core/commands';
 /**
  * Store definition for the commands namespace.
  *
+ * See how the Commands Store is being used in components like [site-hub](https://github.com/WordPress/gutenberg/blob/HEAD/packages/edit-site/src/components/site-hub/index.js#L23) and [document-actions](https://github.com/WordPress/gutenberg/blob/HEAD/packages/edit-post/src/components/header/document-actions/index.js#L14).
+ *
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore
  *
  * @type {Object}
+ *
+ * @example
+ * ```js
+ * import { store as commandsStore } from '@wordpress/commands';
+ * import { useDispatch } from '@wordpress/data';
+ * ...
+ * const { open: openCommandCenter } = useDispatch( commandsStore );
+ * ```
  */
 const store = (0, _data.createReduxStore)(STORE_NAME, {
   reducer: _reducer.default,

package/build/store/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_data","require","_reducer","_interopRequireDefault","actions","_interopRequireWildcard","selectors","privateActions","_lockUnlock","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","STORE_NAME","store","createReduxStore","reducer","exports","register","unlock","registerPrivateActions"],"sources":["@wordpress/commands/src/store/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createReduxStore, register } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport reducer from './reducer';\nimport * as actions from './actions';\nimport * as selectors from './selectors';\nimport * as privateActions from './private-actions';\nimport { unlock } from '../lock-unlock';\n\nconst STORE_NAME = 'core/commands';\n\n/**\n * Store definition for the commands namespace.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore\n *\n * @type {Object}\n */\nexport const store = createReduxStore( STORE_NAME, {\n\treducer,\n\tactions,\n\tselectors,\n} );\n\nregister( store );\nunlock( store ).registerPrivateActions( privateActions );\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,OAAA,GAAAC,uBAAA,CAAAJ,OAAA;AACA,IAAAK,SAAA,GAAAD,uBAAA,CAAAJ,OAAA;AACA,IAAAM,cAAA,GAAAF,uBAAA,CAAAJ,OAAA;AACA,IAAAO,WAAA,GAAAP,OAAA;AAAwC,SAAAQ,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAL,wBAAAS,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAZxC;AACA;AACA;;AAGA;AACA;AACA;;AAOA,MAAMW,UAAU,GAAG,eAAe;;AAElC;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,KAAK,GAAG,IAAAC,sBAAgB,EAAEF,UAAU,EAAE;EAClDG,OAAO,EAAPA,gBAAO;EACP9B,OAAO;EACPE;AACD,CAAE,CAAC;AAAC6B,OAAA,CAAAH,KAAA,GAAAA,KAAA;AAEJ,IAAAI,cAAQ,EAAEJ,KAAM,CAAC;AACjB,IAAAK,kBAAM,EAAEL,KAAM,CAAC,CAACM,sBAAsB,CAAE/B,cAAe,CAAC"}
+{"version":3,"names":["_data","require","_reducer","_interopRequireDefault","actions","_interopRequireWildcard","selectors","privateActions","_lockUnlock","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","STORE_NAME","store","createReduxStore","reducer","exports","register","unlock","registerPrivateActions"],"sources":["@wordpress/commands/src/store/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createReduxStore, register } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport reducer from './reducer';\nimport * as actions from './actions';\nimport * as selectors from './selectors';\nimport * as privateActions from './private-actions';\nimport { unlock } from '../lock-unlock';\n\nconst STORE_NAME = 'core/commands';\n\n/**\n * Store definition for the commands namespace.\n *\n * See how the Commands Store is being used in components like [site-hub](https://github.com/WordPress/gutenberg/blob/HEAD/packages/edit-site/src/components/site-hub/index.js#L23) and [document-actions](https://github.com/WordPress/gutenberg/blob/HEAD/packages/edit-post/src/components/header/document-actions/index.js#L14).\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore\n *\n * @type {Object}\n *\n * @example\n * ```js\n * import { store as commandsStore } from '@wordpress/commands';\n * import { useDispatch } from '@wordpress/data';\n * ...\n * const { open: openCommandCenter } = useDispatch( commandsStore );\n * ```\n */\nexport const store = createReduxStore( STORE_NAME, {\n\treducer,\n\tactions,\n\tselectors,\n} );\n\nregister( store );\nunlock( store ).registerPrivateActions( privateActions );\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,OAAA,GAAAC,uBAAA,CAAAJ,OAAA;AACA,IAAAK,SAAA,GAAAD,uBAAA,CAAAJ,OAAA;AACA,IAAAM,cAAA,GAAAF,uBAAA,CAAAJ,OAAA;AACA,IAAAO,WAAA,GAAAP,OAAA;AAAwC,SAAAQ,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAL,wBAAAS,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAZxC;AACA;AACA;;AAGA;AACA;AACA;;AAOA,MAAMW,UAAU,GAAG,eAAe;;AAElC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,KAAK,GAAG,IAAAC,sBAAgB,EAAEF,UAAU,EAAE;EAClDG,OAAO,EAAPA,gBAAO;EACP9B,OAAO;EACPE;AACD,CAAE,CAAC;AAAC6B,OAAA,CAAAH,KAAA,GAAAA,KAAA;AAEJ,IAAAI,cAAQ,EAAEJ,KAAM,CAAC;AACjB,IAAAK,kBAAM,EAAEL,KAAM,CAAC,CAACM,sBAAsB,CAAE/B,cAAe,CAAC"}

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

@@ -164,6 +164,10 @@ function CommandInput({
     icon: search
   });
 }
+
+/**
+ * @ignore
+ */
 export function CommandMenu() {
   const {
     registerShortcut

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

@@ -1 +1 @@
-{"version":3,"names":["Command","useCommandState","classnames","useSelect","useDispatch","useState","useEffect","useRef","useCallback","useMemo","__","Modal","TextHighlight","__experimentalHStack","HStack","store","keyboardShortcutsStore","useShortcut","Icon","search","inputIcon","commandsStore","CommandMenuLoader","name","hook","setLoader","close","_hook","isLoading","commands","length","createElement","Fragment","List","map","command","_command$searchLabel","Item","key","value","searchLabel","label","onSelect","callback","id","alignment","className","icon","text","highlight","CommandMenuLoaderWrapper","currentLoader","setKey","current","prevKey","CommandMenuGroup","isContextual","loaders","select","getCommands","getCommandLoaders","Group","_command$searchLabel2","loader","CommandInput","isOpen","setSearch","commandMenuInput","_value","state","selectedItemId","item","document","querySelector","getAttribute","focus","Input","ref","onValueChange","placeholder","CommandMenu","registerShortcut","open","setLoaders","category","description","keyCombination","modifier","character","event","defaultPrevented","preventDefault","bindGlobal","closeAndReset","onKeyDown","nativeEvent","isComposing","keyCode","Object","values","some","Boolean","overlayClassName","onRequestClose","__experimentalHideHeader","Empty"],"sources":["@wordpress/commands/src/components/command-menu.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Command, useCommandState } from 'cmdk';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tuseState,\n\tuseEffect,\n\tuseRef,\n\tuseCallback,\n\tuseMemo,\n} 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, search as inputIcon } 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\tif ( ! commands.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<Command.List>\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.searchLabel ?? command.label }\n\t\t\t\t\t\tonSelect={ () => command.callback( { close } ) }\n\t\t\t\t\t\tid={ command.name }\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={ classnames(\n\t\t\t\t\t\t\t\t'commands-command-menu__item',\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t'has-icon': command.icon,\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ command.icon && <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( { isContextual, 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( isContextual ),\n\t\t\t\tloaders: getCommandLoaders( isContextual ),\n\t\t\t};\n\t\t},\n\t\t[ isContextual ]\n\t);\n\n\tif ( ! commands.length && ! loaders.length ) {\n\t\treturn null;\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.searchLabel ?? command.label }\n\t\t\t\t\tonSelect={ () => command.callback( { close } ) }\n\t\t\t\t\tid={ command.name }\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={ classnames( 'commands-command-menu__item', {\n\t\t\t\t\t\t\t'has-icon': command.icon,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ command.icon && <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\nfunction CommandInput( { isOpen, search, setSearch } ) {\n\tconst commandMenuInput = useRef();\n\tconst _value = useCommandState( ( state ) => state.value );\n\tconst selectedItemId = useMemo( () => {\n\t\tconst item = document.querySelector(\n\t\t\t`[cmdk-item=\"\"][data-value=\"${ _value }\"]`\n\t\t);\n\t\treturn item?.getAttribute( 'id' );\n\t}, [ _value ] );\n\tuseEffect( () => {\n\t\t// Focus the command palette input when mounting the modal.\n\t\tif ( isOpen ) {\n\t\t\tcommandMenuInput.current.focus();\n\t\t}\n\t}, [ isOpen ] );\n\treturn (\n\t\t<Command.Input\n\t\t\tref={ commandMenuInput }\n\t\t\tvalue={ search }\n\t\t\tonValueChange={ setSearch }\n\t\t\tplaceholder={ __( 'Search for commands' ) }\n\t\t\taria-activedescendant={ selectedItemId }\n\t\t\ticon={ search }\n\t\t/>\n\t);\n}\n\nexport function CommandMenu() {\n\tconst { registerShortcut } = useDispatch( keyboardShortcutsStore );\n\tconst [ search, setSearch ] = useState( '' );\n\tconst isOpen = useSelect(\n\t\t( select ) => select( commandsStore ).isOpen(),\n\t\t[]\n\t);\n\tconst { open, close } = useDispatch( commandsStore );\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 command palette.' ),\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/** @type {import('react').KeyboardEventHandler} */\n\t\t( event ) => {\n\t\t\t// Bails to avoid obscuring the effect of the preceding handler(s).\n\t\t\tif ( event.defaultPrevented ) return;\n\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\tif ( ! isOpen ) {\n\t\treturn false;\n\t}\n\n\tconst onKeyDown = ( event ) => {\n\t\tif (\n\t\t\t// Ignore keydowns from IMEs\n\t\t\tevent.nativeEvent.isComposing ||\n\t\t\t// Workaround for Mac Safari where the final Enter/Backspace of an IME composition\n\t\t\t// is `isComposing=false`, even though it's technically still part of the composition.\n\t\t\t// These can only be detected by keyCode.\n\t\t\tevent.keyCode === 229\n\t\t) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t};\n\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\n\t\t\t\t\tlabel={ __( 'Command palette' ) }\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t>\n\t\t\t\t\t<div className=\"commands-command-menu__header\">\n\t\t\t\t\t\t<Icon icon={ inputIcon } />\n\t\t\t\t\t\t<CommandInput\n\t\t\t\t\t\t\tsearch={ search }\n\t\t\t\t\t\t\tsetSearch={ setSearch }\n\t\t\t\t\t\t\tisOpen={ isOpen }\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{ search && ! 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<CommandMenuGroup\n\t\t\t\t\t\t\tsearch={ search }\n\t\t\t\t\t\t\tsetLoader={ setLoader }\n\t\t\t\t\t\t\tclose={ closeAndReset }\n\t\t\t\t\t\t\tisContextual\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ search && (\n\t\t\t\t\t\t\t<CommandMenuGroup\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={ closeAndReset }\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"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,OAAO,EAAEC,eAAe,QAAQ,MAAM;AAC/C,OAAOC,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;AACxD,SACCC,QAAQ,EACRC,SAAS,EACTC,MAAM,EACNC,WAAW,EACXC,OAAO,QACD,oBAAoB;AAC3B,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SACCC,KAAK,EACLC,aAAa,EACbC,oBAAoB,IAAIC,MAAM,QACxB,uBAAuB;AAC9B,SACCC,KAAK,IAAIC,sBAAsB,EAC/BC,WAAW,QACL,+BAA+B;AACtC,SAASC,IAAI,EAAEC,MAAM,IAAIC,SAAS,QAAQ,kBAAkB;;AAE5D;AACA;AACA;AACA,SAASL,KAAK,IAAIM,aAAa,QAAQ,UAAU;AAEjD,SAASC,iBAAiBA,CAAE;EAAEC,IAAI;EAAEJ,MAAM;EAAEK,IAAI;EAAEC,SAAS;EAAEC;AAAM,CAAC,EAAG;EAAA,IAAAC,KAAA;EACtE,MAAM;IAAEC,SAAS;IAAEC,QAAQ,GAAG;EAAG,CAAC,IAAAF,KAAA,GAAGH,IAAI,CAAE;IAAEL;EAAO,CAAE,CAAC,cAAAQ,KAAA,cAAAA,KAAA,GAAI,CAAC,CAAC;EAC7DrB,SAAS,CAAE,MAAM;IAChBmB,SAAS,CAAEF,IAAI,EAAEK,SAAU,CAAC;EAC7B,CAAC,EAAE,CAAEH,SAAS,EAAEF,IAAI,EAAEK,SAAS,CAAG,CAAC;EAEnC,IAAK,CAAEC,QAAQ,CAACC,MAAM,EAAG;IACxB,OAAO,IAAI;EACZ;EAEA,OACCC,aAAA,CAAAC,QAAA,QACCD,aAAA,CAAC/B,OAAO,CAACiC,IAAI,QACVJ,QAAQ,CAACK,GAAG,CAAIC,OAAO;IAAA,IAAAC,oBAAA;IAAA,OACxBL,aAAA,CAAC/B,OAAO,CAACqC,IAAI;MACZC,GAAG,EAAGH,OAAO,CAACZ,IAAM;MACpBgB,KAAK,GAAAH,oBAAA,GAAGD,OAAO,CAACK,WAAW,cAAAJ,oBAAA,cAAAA,oBAAA,GAAID,OAAO,CAACM,KAAO;MAC9CC,QAAQ,EAAGA,CAAA,KAAMP,OAAO,CAACQ,QAAQ,CAAE;QAAEjB;MAAM,CAAE,CAAG;MAChDkB,EAAE,EAAGT,OAAO,CAACZ;IAAM,GAEnBQ,aAAA,CAACjB,MAAM;MACN+B,SAAS,EAAC,MAAM;MAChBC,SAAS,EAAG5C,UAAU,CACrB,6BAA6B,EAC7B;QACC,UAAU,EAAEiC,OAAO,CAACY;MACrB,CACD;IAAG,GAEDZ,OAAO,CAACY,IAAI,IAAIhB,aAAA,CAACb,IAAI;MAAC6B,IAAI,EAAGZ,OAAO,CAACY;IAAM,CAAE,CAAC,EAChDhB,aAAA,eACCA,aAAA,CAACnB,aAAa;MACboC,IAAI,EAAGb,OAAO,CAACM,KAAO;MACtBQ,SAAS,EAAG9B;IAAQ,CACpB,CACI,CACC,CACK,CAAC;EAAA,CACd,CACW,CACb,CAAC;AAEL;AAEA,OAAO,SAAS+B,wBAAwBA,CAAE;EAAE1B,IAAI;EAAEL,MAAM;EAAEM,SAAS;EAAEC;AAAM,CAAC,EAAG;EAC9E;EACA;EACA;EACA;EACA;EACA,MAAMyB,aAAa,GAAG5C,MAAM,CAAEiB,IAAK,CAAC;EACpC,MAAM,CAAEc,GAAG,EAAEc,MAAM,CAAE,GAAG/C,QAAQ,CAAE,CAAE,CAAC;EACrCC,SAAS,CAAE,MAAM;IAChB,IAAK6C,aAAa,CAACE,OAAO,KAAK7B,IAAI,EAAG;MACrC2B,aAAa,CAACE,OAAO,GAAG7B,IAAI;MAC5B4B,MAAM,CAAIE,OAAO,IAAMA,OAAO,GAAG,CAAE,CAAC;IACrC;EACD,CAAC,EAAE,CAAE9B,IAAI,CAAG,CAAC;EAEb,OACCO,aAAA,CAACT,iBAAiB;IACjBgB,GAAG,EAAGA,GAAK;IACXd,IAAI,EAAG2B,aAAa,CAACE,OAAS;IAC9BlC,MAAM,EAAGA,MAAQ;IACjBM,SAAS,EAAGA,SAAW;IACvBC,KAAK,EAAGA;EAAO,CACf,CAAC;AAEJ;AAEA,OAAO,SAAS6B,gBAAgBA,CAAE;EAAEC,YAAY;EAAErC,MAAM;EAAEM,SAAS;EAAEC;AAAM,CAAC,EAAG;EAC9E,MAAM;IAAEG,QAAQ;IAAE4B;EAAQ,CAAC,GAAGtD,SAAS,CACpCuD,MAAM,IAAM;IACb,MAAM;MAAEC,WAAW;MAAEC;IAAkB,CAAC,GAAGF,MAAM,CAAErC,aAAc,CAAC;IAClE,OAAO;MACNQ,QAAQ,EAAE8B,WAAW,CAAEH,YAAa,CAAC;MACrCC,OAAO,EAAEG,iBAAiB,CAAEJ,YAAa;IAC1C,CAAC;EACF,CAAC,EACD,CAAEA,YAAY,CACf,CAAC;EAED,IAAK,CAAE3B,QAAQ,CAACC,MAAM,IAAI,CAAE2B,OAAO,CAAC3B,MAAM,EAAG;IAC5C,OAAO,IAAI;EACZ;EAEA,OACCC,aAAA,CAAC/B,OAAO,CAAC6D,KAAK,QACXhC,QAAQ,CAACK,GAAG,CAAIC,OAAO;IAAA,IAAA2B,qBAAA;IAAA,OACxB/B,aAAA,CAAC/B,OAAO,CAACqC,IAAI;MACZC,GAAG,EAAGH,OAAO,CAACZ,IAAM;MACpBgB,KAAK,GAAAuB,qBAAA,GAAG3B,OAAO,CAACK,WAAW,cAAAsB,qBAAA,cAAAA,qBAAA,GAAI3B,OAAO,CAACM,KAAO;MAC9CC,QAAQ,EAAGA,CAAA,KAAMP,OAAO,CAACQ,QAAQ,CAAE;QAAEjB;MAAM,CAAE,CAAG;MAChDkB,EAAE,EAAGT,OAAO,CAACZ;IAAM,GAEnBQ,aAAA,CAACjB,MAAM;MACN+B,SAAS,EAAC,MAAM;MAChBC,SAAS,EAAG5C,UAAU,CAAE,6BAA6B,EAAE;QACtD,UAAU,EAAEiC,OAAO,CAACY;MACrB,CAAE;IAAG,GAEHZ,OAAO,CAACY,IAAI,IAAIhB,aAAA,CAACb,IAAI;MAAC6B,IAAI,EAAGZ,OAAO,CAACY;IAAM,CAAE,CAAC,EAChDhB,aAAA,eACCA,aAAA,CAACnB,aAAa;MACboC,IAAI,EAAGb,OAAO,CAACM,KAAO;MACtBQ,SAAS,EAAG9B;IAAQ,CACpB,CACI,CACC,CACK,CAAC;EAAA,CACd,CAAC,EACDsC,OAAO,CAACvB,GAAG,CAAI6B,MAAM,IACtBhC,aAAA,CAACmB,wBAAwB;IACxBZ,GAAG,EAAGyB,MAAM,CAACxC,IAAM;IACnBC,IAAI,EAAGuC,MAAM,CAACvC,IAAM;IACpBL,MAAM,EAAGA,MAAQ;IACjBM,SAAS,EAAGA,SAAW;IACvBC,KAAK,EAAGA;EAAO,CACf,CACA,CACY,CAAC;AAElB;AAEA,SAASsC,YAAYA,CAAE;EAAEC,MAAM;EAAE9C,MAAM;EAAE+C;AAAU,CAAC,EAAG;EACtD,MAAMC,gBAAgB,GAAG5D,MAAM,CAAC,CAAC;EACjC,MAAM6D,MAAM,GAAGnE,eAAe,CAAIoE,KAAK,IAAMA,KAAK,CAAC9B,KAAM,CAAC;EAC1D,MAAM+B,cAAc,GAAG7D,OAAO,CAAE,MAAM;IACrC,MAAM8D,IAAI,GAAGC,QAAQ,CAACC,aAAa,CACjC,8BAA8BL,MAAQ,IACxC,CAAC;IACD,OAAOG,IAAI,EAAEG,YAAY,CAAE,IAAK,CAAC;EAClC,CAAC,EAAE,CAAEN,MAAM,CAAG,CAAC;EACf9D,SAAS,CAAE,MAAM;IAChB;IACA,IAAK2D,MAAM,EAAG;MACbE,gBAAgB,CAACd,OAAO,CAACsB,KAAK,CAAC,CAAC;IACjC;EACD,CAAC,EAAE,CAAEV,MAAM,CAAG,CAAC;EACf,OACClC,aAAA,CAAC/B,OAAO,CAAC4E,KAAK;IACbC,GAAG,EAAGV,gBAAkB;IACxB5B,KAAK,EAAGpB,MAAQ;IAChB2D,aAAa,EAAGZ,SAAW;IAC3Ba,WAAW,EAAGrE,EAAE,CAAE,qBAAsB,CAAG;IAC3C,yBAAwB4D,cAAgB;IACxCvB,IAAI,EAAG5B;EAAQ,CACf,CAAC;AAEJ;AAEA,OAAO,SAAS6D,WAAWA,CAAA,EAAG;EAC7B,MAAM;IAAEC;EAAiB,CAAC,GAAG7E,WAAW,CAAEY,sBAAuB,CAAC;EAClE,MAAM,CAAEG,MAAM,EAAE+C,SAAS,CAAE,GAAG7D,QAAQ,CAAE,EAAG,CAAC;EAC5C,MAAM4D,MAAM,GAAG9D,SAAS,CACrBuD,MAAM,IAAMA,MAAM,CAAErC,aAAc,CAAC,CAAC4C,MAAM,CAAC,CAAC,EAC9C,EACD,CAAC;EACD,MAAM;IAAEiB,IAAI;IAAExD;EAAM,CAAC,GAAGtB,WAAW,CAAEiB,aAAc,CAAC;EACpD,MAAM,CAAEoC,OAAO,EAAE0B,UAAU,CAAE,GAAG9E,QAAQ,CAAE,CAAC,CAAE,CAAC;EAE9CC,SAAS,CAAE,MAAM;IAChB2E,gBAAgB,CAAE;MACjB1D,IAAI,EAAE,eAAe;MACrB6D,QAAQ,EAAE,QAAQ;MAClBC,WAAW,EAAE3E,EAAE,CAAE,2BAA4B,CAAC;MAC9C4E,cAAc,EAAE;QACfC,QAAQ,EAAE,SAAS;QACnBC,SAAS,EAAE;MACZ;IACD,CAAE,CAAC;EACJ,CAAC,EAAE,CAAEP,gBAAgB,CAAG,CAAC;EAEzBhE,WAAW,CACV,eAAe,EACf;EACEwE,KAAK,IAAM;IACZ;IACA,IAAKA,KAAK,CAACC,gBAAgB,EAAG;IAE9BD,KAAK,CAACE,cAAc,CAAC,CAAC;IACtB,IAAK1B,MAAM,EAAG;MACbvC,KAAK,CAAC,CAAC;IACR,CAAC,MAAM;MACNwD,IAAI,CAAC,CAAC;IACP;EACD,CAAC,EACD;IACCU,UAAU,EAAE;EACb,CACD,CAAC;EAED,MAAMnE,SAAS,GAAGjB,WAAW,CAC5B,CAAEe,IAAI,EAAEgB,KAAK,KACZ4C,UAAU,CAAI9B,OAAO,KAAQ;IAC5B,GAAGA,OAAO;IACV,CAAE9B,IAAI,GAAIgB;EACX,CAAC,CAAG,CAAC,EACN,EACD,CAAC;EACD,MAAMsD,aAAa,GAAGA,CAAA,KAAM;IAC3B3B,SAAS,CAAE,EAAG,CAAC;IACfxC,KAAK,CAAC,CAAC;EACR,CAAC;EAED,IAAK,CAAEuC,MAAM,EAAG;IACf,OAAO,KAAK;EACb;EAEA,MAAM6B,SAAS,GAAKL,KAAK,IAAM;IAC9B;IACC;IACAA,KAAK,CAACM,WAAW,CAACC,WAAW;IAC7B;IACA;IACA;IACAP,KAAK,CAACQ,OAAO,KAAK,GAAG,EACpB;MACDR,KAAK,CAACE,cAAc,CAAC,CAAC;IACvB;EACD,CAAC;EAED,MAAM/D,SAAS,GAAGsE,MAAM,CAACC,MAAM,CAAE1C,OAAQ,CAAC,CAAC2C,IAAI,CAAEC,OAAQ,CAAC;EAE1D,OACCtE,aAAA,CAACpB,KAAK;IACLmC,SAAS,EAAC,uBAAuB;IACjCwD,gBAAgB,EAAC,gCAAgC;IACjDC,cAAc,EAAGV,aAAe;IAChCW,wBAAwB;EAAA,GAExBzE,aAAA;IAAKe,SAAS,EAAC;EAAkC,GAChDf,aAAA,CAAC/B,OAAO;IACPyC,KAAK,EAAG/B,EAAE,CAAE,iBAAkB,CAAG;IACjCoF,SAAS,EAAGA;EAAW,GAEvB/D,aAAA;IAAKe,SAAS,EAAC;EAA+B,GAC7Cf,aAAA,CAACb,IAAI;IAAC6B,IAAI,EAAG3B;EAAW,CAAE,CAAC,EAC3BW,aAAA,CAACiC,YAAY;IACZ7C,MAAM,EAAGA,MAAQ;IACjB+C,SAAS,EAAGA,SAAW;IACvBD,MAAM,EAAGA;EAAQ,CACjB,CACG,CAAC,EACNlC,aAAA,CAAC/B,OAAO,CAACiC,IAAI,QACVd,MAAM,IAAI,CAAES,SAAS,IACtBG,aAAA,CAAC/B,OAAO,CAACyG,KAAK,QACX/F,EAAE,CAAE,mBAAoB,CACZ,CACf,EACDqB,aAAA,CAACwB,gBAAgB;IAChBpC,MAAM,EAAGA,MAAQ;IACjBM,SAAS,EAAGA,SAAW;IACvBC,KAAK,EAAGmE,aAAe;IACvBrC,YAAY;EAAA,CACZ,CAAC,EACArC,MAAM,IACPY,aAAA,CAACwB,gBAAgB;IAChBpC,MAAM,EAAGA,MAAQ;IACjBM,SAAS,EAAGA,SAAW;IACvBC,KAAK,EAAGmE;EAAe,CACvB,CAEW,CACN,CACL,CACC,CAAC;AAEV"}
+{"version":3,"names":["Command","useCommandState","classnames","useSelect","useDispatch","useState","useEffect","useRef","useCallback","useMemo","__","Modal","TextHighlight","__experimentalHStack","HStack","store","keyboardShortcutsStore","useShortcut","Icon","search","inputIcon","commandsStore","CommandMenuLoader","name","hook","setLoader","close","_hook","isLoading","commands","length","createElement","Fragment","List","map","command","_command$searchLabel","Item","key","value","searchLabel","label","onSelect","callback","id","alignment","className","icon","text","highlight","CommandMenuLoaderWrapper","currentLoader","setKey","current","prevKey","CommandMenuGroup","isContextual","loaders","select","getCommands","getCommandLoaders","Group","_command$searchLabel2","loader","CommandInput","isOpen","setSearch","commandMenuInput","_value","state","selectedItemId","item","document","querySelector","getAttribute","focus","Input","ref","onValueChange","placeholder","CommandMenu","registerShortcut","open","setLoaders","category","description","keyCombination","modifier","character","event","defaultPrevented","preventDefault","bindGlobal","closeAndReset","onKeyDown","nativeEvent","isComposing","keyCode","Object","values","some","Boolean","overlayClassName","onRequestClose","__experimentalHideHeader","Empty"],"sources":["@wordpress/commands/src/components/command-menu.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Command, useCommandState } from 'cmdk';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tuseState,\n\tuseEffect,\n\tuseRef,\n\tuseCallback,\n\tuseMemo,\n} 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, search as inputIcon } 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\tif ( ! commands.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<Command.List>\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.searchLabel ?? command.label }\n\t\t\t\t\t\tonSelect={ () => command.callback( { close } ) }\n\t\t\t\t\t\tid={ command.name }\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={ classnames(\n\t\t\t\t\t\t\t\t'commands-command-menu__item',\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t'has-icon': command.icon,\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ command.icon && <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( { isContextual, 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( isContextual ),\n\t\t\t\tloaders: getCommandLoaders( isContextual ),\n\t\t\t};\n\t\t},\n\t\t[ isContextual ]\n\t);\n\n\tif ( ! commands.length && ! loaders.length ) {\n\t\treturn null;\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.searchLabel ?? command.label }\n\t\t\t\t\tonSelect={ () => command.callback( { close } ) }\n\t\t\t\t\tid={ command.name }\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={ classnames( 'commands-command-menu__item', {\n\t\t\t\t\t\t\t'has-icon': command.icon,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ command.icon && <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\nfunction CommandInput( { isOpen, search, setSearch } ) {\n\tconst commandMenuInput = useRef();\n\tconst _value = useCommandState( ( state ) => state.value );\n\tconst selectedItemId = useMemo( () => {\n\t\tconst item = document.querySelector(\n\t\t\t`[cmdk-item=\"\"][data-value=\"${ _value }\"]`\n\t\t);\n\t\treturn item?.getAttribute( 'id' );\n\t}, [ _value ] );\n\tuseEffect( () => {\n\t\t// Focus the command palette input when mounting the modal.\n\t\tif ( isOpen ) {\n\t\t\tcommandMenuInput.current.focus();\n\t\t}\n\t}, [ isOpen ] );\n\treturn (\n\t\t<Command.Input\n\t\t\tref={ commandMenuInput }\n\t\t\tvalue={ search }\n\t\t\tonValueChange={ setSearch }\n\t\t\tplaceholder={ __( 'Search for commands' ) }\n\t\t\taria-activedescendant={ selectedItemId }\n\t\t\ticon={ search }\n\t\t/>\n\t);\n}\n\n/**\n * @ignore\n */\nexport function CommandMenu() {\n\tconst { registerShortcut } = useDispatch( keyboardShortcutsStore );\n\tconst [ search, setSearch ] = useState( '' );\n\tconst isOpen = useSelect(\n\t\t( select ) => select( commandsStore ).isOpen(),\n\t\t[]\n\t);\n\tconst { open, close } = useDispatch( commandsStore );\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 command palette.' ),\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/** @type {import('react').KeyboardEventHandler} */\n\t\t( event ) => {\n\t\t\t// Bails to avoid obscuring the effect of the preceding handler(s).\n\t\t\tif ( event.defaultPrevented ) return;\n\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\tif ( ! isOpen ) {\n\t\treturn false;\n\t}\n\n\tconst onKeyDown = ( event ) => {\n\t\tif (\n\t\t\t// Ignore keydowns from IMEs\n\t\t\tevent.nativeEvent.isComposing ||\n\t\t\t// Workaround for Mac Safari where the final Enter/Backspace of an IME composition\n\t\t\t// is `isComposing=false`, even though it's technically still part of the composition.\n\t\t\t// These can only be detected by keyCode.\n\t\t\tevent.keyCode === 229\n\t\t) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t};\n\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\n\t\t\t\t\tlabel={ __( 'Command palette' ) }\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t>\n\t\t\t\t\t<div className=\"commands-command-menu__header\">\n\t\t\t\t\t\t<Icon icon={ inputIcon } />\n\t\t\t\t\t\t<CommandInput\n\t\t\t\t\t\t\tsearch={ search }\n\t\t\t\t\t\t\tsetSearch={ setSearch }\n\t\t\t\t\t\t\tisOpen={ isOpen }\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{ search && ! 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<CommandMenuGroup\n\t\t\t\t\t\t\tsearch={ search }\n\t\t\t\t\t\t\tsetLoader={ setLoader }\n\t\t\t\t\t\t\tclose={ closeAndReset }\n\t\t\t\t\t\t\tisContextual\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ search && (\n\t\t\t\t\t\t\t<CommandMenuGroup\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={ closeAndReset }\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"],"mappings":"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"}

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

@@ -10,9 +10,73 @@ import { useDispatch } from '@wordpress/data';
 import { store as commandsStore } from '../store';
 
 /**
- * Attach a command loader to the command palette.
+ * Attach a command loader to the command palette. Used for dynamic commands.
  *
  * @param {import('../store/actions').WPCommandLoaderConfig} loader command loader config.
+ *
+ * @example
+ * ```js
+ * import { useCommandLoader } from '@wordpress/commands';
+ * import { post, page, layout, symbolFilled } from '@wordpress/icons';
+ *
+ * const icons = {
+ *     post,
+ *     page,
+ *     wp_template: layout,
+ *     wp_template_part: symbolFilled,
+ * };
+ *
+ * function usePageSearchCommandLoader( { search } ) {
+ *     // Retrieve the pages for the "search" term.
+ *     const { records, isLoading } = useSelect( ( select ) => {
+ *         const { getEntityRecords } = select( coreStore );
+ *         const query = {
+ *             search: !! search ? search : undefined,
+ *             per_page: 10,
+ *             orderby: search ? 'relevance' : 'date',
+ *         };
+ *         return {
+ *             records: getEntityRecords( 'postType', 'page', query ),
+ *             isLoading: ! select( coreStore ).hasFinishedResolution(
+ *                 'getEntityRecords',
+ *                 'postType', 'page', query ]
+ *             ),
+ *         };
+ *     }, [ search ] );
+ *
+ *     // Create the commands.
+ *     const commands = useMemo( () => {
+ *         return ( records ?? [] ).slice( 0, 10 ).map( ( record ) => {
+ *             return {
+ *                 name: record.title?.rendered + ' ' + record.id,
+ *                 label: record.title?.rendered
+ *                     ? record.title?.rendered
+ *                     : __( '(no title)' ),
+ *                 icon: icons[ postType ],
+ *                 callback: ( { close } ) => {
+ *                     const args = {
+ *                         postType,
+ *                         postId: record.id,
+ *                         ...extraArgs,
+ *                     };
+ *                     document.location = addQueryArgs( 'site-editor.php', args );
+ *                     close();
+ *                 },
+ *             };
+ *         } );
+ *     }, [ records, history ] );
+ *
+ *     return {
+ *         commands,
+ *         isLoading,
+ *     };
+ * }
+ *
+ * useCommandLoader( {
+ *     name: 'myplugin/page-search',
+ *     hook: usePageSearchCommandLoader,
+ * } );
+ * ```
  */
 export default function useCommandLoader(loader) {
   const {

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

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useDispatch","store","commandsStore","useCommandLoader","loader","registerCommandLoader","unregisterCommandLoader","name","hook","context"],"sources":["@wordpress/commands/src/hooks/use-command-loader.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect } 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 loader to the command palette.\n *\n * @param {import('../store/actions').WPCommandLoaderConfig} loader command loader config.\n */\nexport default function useCommandLoader( loader ) {\n\tconst { registerCommandLoader, unregisterCommandLoader } =\n\t\tuseDispatch( commandsStore );\n\tuseEffect( () => {\n\t\tregisterCommandLoader( {\n\t\t\tname: loader.name,\n\t\t\thook: loader.hook,\n\t\t\tcontext: loader.context,\n\t\t} );\n\t\treturn () => {\n\t\t\tunregisterCommandLoader( loader.name );\n\t\t};\n\t}, [\n\t\tloader.name,\n\t\tloader.hook,\n\t\tloader.context,\n\t\tregisterCommandLoader,\n\t\tunregisterCommandLoader,\n\t] );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,QAAQ,oBAAoB;AAC9C,SAASC,WAAW,QAAQ,iBAAiB;;AAE7C;AACA;AACA;AACA,SAASC,KAAK,IAAIC,aAAa,QAAQ,UAAU;;AAEjD;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,gBAAgBA,CAAEC,MAAM,EAAG;EAClD,MAAM;IAAEC,qBAAqB;IAAEC;EAAwB,CAAC,GACvDN,WAAW,CAAEE,aAAc,CAAC;EAC7BH,SAAS,CAAE,MAAM;IAChBM,qBAAqB,CAAE;MACtBE,IAAI,EAAEH,MAAM,CAACG,IAAI;MACjBC,IAAI,EAAEJ,MAAM,CAACI,IAAI;MACjBC,OAAO,EAAEL,MAAM,CAACK;IACjB,CAAE,CAAC;IACH,OAAO,MAAM;MACZH,uBAAuB,CAAEF,MAAM,CAACG,IAAK,CAAC;IACvC,CAAC;EACF,CAAC,EAAE,CACFH,MAAM,CAACG,IAAI,EACXH,MAAM,CAACI,IAAI,EACXJ,MAAM,CAACK,OAAO,EACdJ,qBAAqB,EACrBC,uBAAuB,CACtB,CAAC;AACJ"}
+{"version":3,"names":["useEffect","useDispatch","store","commandsStore","useCommandLoader","loader","registerCommandLoader","unregisterCommandLoader","name","hook","context"],"sources":["@wordpress/commands/src/hooks/use-command-loader.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect } 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 loader to the command palette. Used for dynamic commands.\n *\n * @param {import('../store/actions').WPCommandLoaderConfig} loader command loader config.\n *\n * @example\n * ```js\n * import { useCommandLoader } from '@wordpress/commands';\n * import { post, page, layout, symbolFilled } from '@wordpress/icons';\n *\n * const icons = {\n *     post,\n *     page,\n *     wp_template: layout,\n *     wp_template_part: symbolFilled,\n * };\n *\n * function usePageSearchCommandLoader( { search } ) {\n *     // Retrieve the pages for the \"search\" term.\n *     const { records, isLoading } = useSelect( ( select ) => {\n *         const { getEntityRecords } = select( coreStore );\n *         const query = {\n *             search: !! search ? search : undefined,\n *             per_page: 10,\n *             orderby: search ? 'relevance' : 'date',\n *         };\n *         return {\n *             records: getEntityRecords( 'postType', 'page', query ),\n *             isLoading: ! select( coreStore ).hasFinishedResolution(\n *                 'getEntityRecords',\n *                 'postType', 'page', query ]\n *             ),\n *         };\n *     }, [ search ] );\n *\n *     // Create the commands.\n *     const commands = useMemo( () => {\n *         return ( records ?? [] ).slice( 0, 10 ).map( ( record ) => {\n *             return {\n *                 name: record.title?.rendered + ' ' + record.id,\n *                 label: record.title?.rendered\n *                     ? record.title?.rendered\n *                     : __( '(no title)' ),\n *                 icon: icons[ postType ],\n *                 callback: ( { close } ) => {\n *                     const args = {\n *                         postType,\n *                         postId: record.id,\n *                         ...extraArgs,\n *                     };\n *                     document.location = addQueryArgs( 'site-editor.php', args );\n *                     close();\n *                 },\n *             };\n *         } );\n *     }, [ records, history ] );\n *\n *     return {\n *         commands,\n *         isLoading,\n *     };\n * }\n *\n * useCommandLoader( {\n *     name: 'myplugin/page-search',\n *     hook: usePageSearchCommandLoader,\n * } );\n * ```\n */\nexport default function useCommandLoader( loader ) {\n\tconst { registerCommandLoader, unregisterCommandLoader } =\n\t\tuseDispatch( commandsStore );\n\tuseEffect( () => {\n\t\tregisterCommandLoader( {\n\t\t\tname: loader.name,\n\t\t\thook: loader.hook,\n\t\t\tcontext: loader.context,\n\t\t} );\n\t\treturn () => {\n\t\t\tunregisterCommandLoader( loader.name );\n\t\t};\n\t}, [\n\t\tloader.name,\n\t\tloader.hook,\n\t\tloader.context,\n\t\tregisterCommandLoader,\n\t\tunregisterCommandLoader,\n\t] );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,QAAQ,oBAAoB;AAC9C,SAASC,WAAW,QAAQ,iBAAiB;;AAE7C;AACA;AACA;AACA,SAASC,KAAK,IAAIC,aAAa,QAAQ,UAAU;;AAEjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,gBAAgBA,CAAEC,MAAM,EAAG;EAClD,MAAM;IAAEC,qBAAqB;IAAEC;EAAwB,CAAC,GACvDN,WAAW,CAAEE,aAAc,CAAC;EAC7BH,SAAS,CAAE,MAAM;IAChBM,qBAAqB,CAAE;MACtBE,IAAI,EAAEH,MAAM,CAACG,IAAI;MACjBC,IAAI,EAAEJ,MAAM,CAACI,IAAI;MACjBC,OAAO,EAAEL,MAAM,CAACK;IACjB,CAAE,CAAC;IACH,OAAO,MAAM;MACZH,uBAAuB,CAAEF,MAAM,CAACG,IAAK,CAAC;IACvC,CAAC;EACF,CAAC,EAAE,CACFH,MAAM,CAACG,IAAI,EACXH,MAAM,CAACI,IAAI,EACXJ,MAAM,CAACK,OAAO,EACdJ,qBAAqB,EACrBC,uBAAuB,CACtB,CAAC;AACJ"}

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

@@ -10,9 +10,25 @@ import { useDispatch } from '@wordpress/data';
 import { store as commandsStore } from '../store';
 
 /**
- * Attach a command to the command palette.
+ * Attach a command to the command palette. Used for static commands.
  *
  * @param {import('../store/actions').WPCommandConfig} command command config.
+ *
+ * @example
+ * ```js
+ * import { useCommand } from '@wordpress/commands';
+ * import { plus } from '@wordpress/icons';
+ *
+ * useCommand( {
+ *     name: 'myplugin/my-command-name',
+ *     label: __( 'Add new post' ),
+ *	   icon: plus,
+ *     callback: ({ close }) => {
+ *         document.location.href = 'post-new.php';
+ *         close();
+ *     },
+ * } );
+ * ```
  */
 export default function useCommand(command) {
   const {

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

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useRef","useDispatch","store","commandsStore","useCommand","command","registerCommand","unregisterCommand","currentCallback","callback","current","name","context","label","searchLabel","icon","args"],"sources":["@wordpress/commands/src/hooks/use-command.js"],"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 command palette.\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\tcontext: command.context,\n\t\t\tlabel: command.label,\n\t\t\tsearchLabel: command.searchLabel,\n\t\t\ticon: command.icon,\n\t\t\tcallback: ( ...args ) => currentCallback.current( ...args ),\n\t\t} );\n\t\treturn () => {\n\t\t\tunregisterCommand( command.name );\n\t\t};\n\t}, [\n\t\tcommand.name,\n\t\tcommand.label,\n\t\tcommand.searchLabel,\n\t\tcommand.icon,\n\t\tcommand.context,\n\t\tregisterCommand,\n\t\tunregisterCommand,\n\t] );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,MAAM,QAAQ,oBAAoB;AACtD,SAASC,WAAW,QAAQ,iBAAiB;;AAE7C;AACA;AACA;AACA,SAASC,KAAK,IAAIC,aAAa,QAAQ,UAAU;;AAEjD;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,UAAUA,CAAEC,OAAO,EAAG;EAC7C,MAAM;IAAEC,eAAe;IAAEC;EAAkB,CAAC,GAAGN,WAAW,CAAEE,aAAc,CAAC;EAC3E,MAAMK,eAAe,GAAGR,MAAM,CAAEK,OAAO,CAACI,QAAS,CAAC;EAClDV,SAAS,CAAE,MAAM;IAChBS,eAAe,CAACE,OAAO,GAAGL,OAAO,CAACI,QAAQ;EAC3C,CAAC,EAAE,CAAEJ,OAAO,CAACI,QAAQ,CAAG,CAAC;EAEzBV,SAAS,CAAE,MAAM;IAChBO,eAAe,CAAE;MAChBK,IAAI,EAAEN,OAAO,CAACM,IAAI;MAClBC,OAAO,EAAEP,OAAO,CAACO,OAAO;MACxBC,KAAK,EAAER,OAAO,CAACQ,KAAK;MACpBC,WAAW,EAAET,OAAO,CAACS,WAAW;MAChCC,IAAI,EAAEV,OAAO,CAACU,IAAI;MAClBN,QAAQ,EAAEA,CAAE,GAAGO,IAAI,KAAMR,eAAe,CAACE,OAAO,CAAE,GAAGM,IAAK;IAC3D,CAAE,CAAC;IACH,OAAO,MAAM;MACZT,iBAAiB,CAAEF,OAAO,CAACM,IAAK,CAAC;IAClC,CAAC;EACF,CAAC,EAAE,CACFN,OAAO,CAACM,IAAI,EACZN,OAAO,CAACQ,KAAK,EACbR,OAAO,CAACS,WAAW,EACnBT,OAAO,CAACU,IAAI,EACZV,OAAO,CAACO,OAAO,EACfN,eAAe,EACfC,iBAAiB,CAChB,CAAC;AACJ"}
+{"version":3,"names":["useEffect","useRef","useDispatch","store","commandsStore","useCommand","command","registerCommand","unregisterCommand","currentCallback","callback","current","name","context","label","searchLabel","icon","args"],"sources":["@wordpress/commands/src/hooks/use-command.js"],"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 command palette. Used for static commands.\n *\n * @param {import('../store/actions').WPCommandConfig} command command config.\n *\n * @example\n * ```js\n * import { useCommand } from '@wordpress/commands';\n * import { plus } from '@wordpress/icons';\n *\n * useCommand( {\n *     name: 'myplugin/my-command-name',\n *     label: __( 'Add new post' ),\n *\t   icon: plus,\n *     callback: ({ close }) => {\n *         document.location.href = 'post-new.php';\n *         close();\n *     },\n * } );\n * ```\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\tcontext: command.context,\n\t\t\tlabel: command.label,\n\t\t\tsearchLabel: command.searchLabel,\n\t\t\ticon: command.icon,\n\t\t\tcallback: ( ...args ) => currentCallback.current( ...args ),\n\t\t} );\n\t\treturn () => {\n\t\t\tunregisterCommand( command.name );\n\t\t};\n\t}, [\n\t\tcommand.name,\n\t\tcommand.label,\n\t\tcommand.searchLabel,\n\t\tcommand.icon,\n\t\tcommand.context,\n\t\tregisterCommand,\n\t\tunregisterCommand,\n\t] );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,MAAM,QAAQ,oBAAoB;AACtD,SAASC,WAAW,QAAQ,iBAAiB;;AAE7C;AACA;AACA;AACA,SAASC,KAAK,IAAIC,aAAa,QAAQ,UAAU;;AAEjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,UAAUA,CAAEC,OAAO,EAAG;EAC7C,MAAM;IAAEC,eAAe;IAAEC;EAAkB,CAAC,GAAGN,WAAW,CAAEE,aAAc,CAAC;EAC3E,MAAMK,eAAe,GAAGR,MAAM,CAAEK,OAAO,CAACI,QAAS,CAAC;EAClDV,SAAS,CAAE,MAAM;IAChBS,eAAe,CAACE,OAAO,GAAGL,OAAO,CAACI,QAAQ;EAC3C,CAAC,EAAE,CAAEJ,OAAO,CAACI,QAAQ,CAAG,CAAC;EAEzBV,SAAS,CAAE,MAAM;IAChBO,eAAe,CAAE;MAChBK,IAAI,EAAEN,OAAO,CAACM,IAAI;MAClBC,OAAO,EAAEP,OAAO,CAACO,OAAO;MACxBC,KAAK,EAAER,OAAO,CAACQ,KAAK;MACpBC,WAAW,EAAET,OAAO,CAACS,WAAW;MAChCC,IAAI,EAAEV,OAAO,CAACU,IAAI;MAClBN,QAAQ,EAAEA,CAAE,GAAGO,IAAI,KAAMR,eAAe,CAACE,OAAO,CAAE,GAAGM,IAAK;IAC3D,CAAE,CAAC;IACH,OAAO,MAAM;MACZT,iBAAiB,CAAEF,OAAO,CAACM,IAAK,CAAC;IAClC,CAAC;EACF,CAAC,EAAE,CACFN,OAAO,CAACM,IAAI,EACZN,OAAO,CAACQ,KAAK,EACbR,OAAO,CAACS,WAAW,EACnBT,OAAO,CAACU,IAAI,EACZV,OAAO,CAACO,OAAO,EACfN,eAAe,EACfC,iBAAiB,CAChB,CAAC;AACJ"}

package/build-module/private-apis.js

@@ -3,6 +3,10 @@
  */
 import { default as useCommandContext } from './hooks/use-command-context';
 import { lock } from './lock-unlock';
+
+/**
+ * @private
+ */
 export const privateApis = {};
 lock(privateApis, {
   useCommandContext

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

@@ -1 +1 @@
-{"version":3,"names":["default","useCommandContext","lock","privateApis"],"sources":["@wordpress/commands/src/private-apis.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { default as useCommandContext } from './hooks/use-command-context';\nimport { lock } from './lock-unlock';\n\nexport const privateApis = {};\nlock( privateApis, {\n\tuseCommandContext,\n} );\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAO,IAAIC,iBAAiB,QAAQ,6BAA6B;AAC1E,SAASC,IAAI,QAAQ,eAAe;AAEpC,OAAO,MAAMC,WAAW,GAAG,CAAC,CAAC;AAC7BD,IAAI,CAAEC,WAAW,EAAE;EAClBF;AACD,CAAE,CAAC"}
+{"version":3,"names":["default","useCommandContext","lock","privateApis"],"sources":["@wordpress/commands/src/private-apis.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { default as useCommandContext } from './hooks/use-command-context';\nimport { lock } from './lock-unlock';\n\n/**\n * @private\n */\nexport const privateApis = {};\nlock( privateApis, {\n\tuseCommandContext,\n} );\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAO,IAAIC,iBAAiB,QAAQ,6BAA6B;AAC1E,SAASC,IAAI,QAAQ,eAAe;;AAEpC;AACA;AACA;AACA,OAAO,MAAMC,WAAW,GAAG,CAAC,CAAC;AAC7BD,IAAI,CAAEC,WAAW,EAAE;EAClBF;AACD,CAAE,CAAC"}

package/build-module/store/index.js

@@ -16,9 +16,19 @@ const STORE_NAME = 'core/commands';
 /**
  * Store definition for the commands namespace.
  *
+ * See how the Commands Store is being used in components like [site-hub](https://github.com/WordPress/gutenberg/blob/HEAD/packages/edit-site/src/components/site-hub/index.js#L23) and [document-actions](https://github.com/WordPress/gutenberg/blob/HEAD/packages/edit-post/src/components/header/document-actions/index.js#L14).
+ *
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore
  *
  * @type {Object}
+ *
+ * @example
+ * ```js
+ * import { store as commandsStore } from '@wordpress/commands';
+ * import { useDispatch } from '@wordpress/data';
+ * ...
+ * const { open: openCommandCenter } = useDispatch( commandsStore );
+ * ```
  */
 export const store = createReduxStore(STORE_NAME, {
   reducer,

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

@@ -1 +1 @@
-{"version":3,"names":["createReduxStore","register","reducer","actions","selectors","privateActions","unlock","STORE_NAME","store","registerPrivateActions"],"sources":["@wordpress/commands/src/store/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createReduxStore, register } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport reducer from './reducer';\nimport * as actions from './actions';\nimport * as selectors from './selectors';\nimport * as privateActions from './private-actions';\nimport { unlock } from '../lock-unlock';\n\nconst STORE_NAME = 'core/commands';\n\n/**\n * Store definition for the commands namespace.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore\n *\n * @type {Object}\n */\nexport const store = createReduxStore( STORE_NAME, {\n\treducer,\n\tactions,\n\tselectors,\n} );\n\nregister( store );\nunlock( store ).registerPrivateActions( privateActions );\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,gBAAgB,EAAEC,QAAQ,QAAQ,iBAAiB;;AAE5D;AACA;AACA;AACA,OAAOC,OAAO,MAAM,WAAW;AAC/B,OAAO,KAAKC,OAAO,MAAM,WAAW;AACpC,OAAO,KAAKC,SAAS,MAAM,aAAa;AACxC,OAAO,KAAKC,cAAc,MAAM,mBAAmB;AACnD,SAASC,MAAM,QAAQ,gBAAgB;AAEvC,MAAMC,UAAU,GAAG,eAAe;;AAElC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,KAAK,GAAGR,gBAAgB,CAAEO,UAAU,EAAE;EAClDL,OAAO;EACPC,OAAO;EACPC;AACD,CAAE,CAAC;AAEHH,QAAQ,CAAEO,KAAM,CAAC;AACjBF,MAAM,CAAEE,KAAM,CAAC,CAACC,sBAAsB,CAAEJ,cAAe,CAAC"}
+{"version":3,"names":["createReduxStore","register","reducer","actions","selectors","privateActions","unlock","STORE_NAME","store","registerPrivateActions"],"sources":["@wordpress/commands/src/store/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createReduxStore, register } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport reducer from './reducer';\nimport * as actions from './actions';\nimport * as selectors from './selectors';\nimport * as privateActions from './private-actions';\nimport { unlock } from '../lock-unlock';\n\nconst STORE_NAME = 'core/commands';\n\n/**\n * Store definition for the commands namespace.\n *\n * See how the Commands Store is being used in components like [site-hub](https://github.com/WordPress/gutenberg/blob/HEAD/packages/edit-site/src/components/site-hub/index.js#L23) and [document-actions](https://github.com/WordPress/gutenberg/blob/HEAD/packages/edit-post/src/components/header/document-actions/index.js#L14).\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore\n *\n * @type {Object}\n *\n * @example\n * ```js\n * import { store as commandsStore } from '@wordpress/commands';\n * import { useDispatch } from '@wordpress/data';\n * ...\n * const { open: openCommandCenter } = useDispatch( commandsStore );\n * ```\n */\nexport const store = createReduxStore( STORE_NAME, {\n\treducer,\n\tactions,\n\tselectors,\n} );\n\nregister( store );\nunlock( store ).registerPrivateActions( privateActions );\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,gBAAgB,EAAEC,QAAQ,QAAQ,iBAAiB;;AAE5D;AACA;AACA;AACA,OAAOC,OAAO,MAAM,WAAW;AAC/B,OAAO,KAAKC,OAAO,MAAM,WAAW;AACpC,OAAO,KAAKC,SAAS,MAAM,aAAa;AACxC,OAAO,KAAKC,cAAc,MAAM,mBAAmB;AACnD,SAASC,MAAM,QAAQ,gBAAgB;AAEvC,MAAMC,UAAU,GAAG,eAAe;;AAElC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,KAAK,GAAGR,gBAAgB,CAAEO,UAAU,EAAE;EAClDL,OAAO;EACPC,OAAO;EACPC;AACD,CAAE,CAAC;AAEHH,QAAQ,CAAEO,KAAM,CAAC;AACjBF,MAAM,CAAEE,KAAM,CAAC,CAACC,sBAAsB,CAAEJ,cAAe,CAAC"}

package/build-style/style-rtl.css

@@ -175,11 +175,11 @@
   min-height: 40px;
 }
 .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);
+  background: var(--wp-admin-theme-color);
+  color: #fff;
 }
 .commands-command-menu__container [cmdk-item][aria-selected=true] svg, .commands-command-menu__container [cmdk-item]:active svg {
-  fill: var(--wp-admin-theme-color);
+  fill: #fff;
 }
 .commands-command-menu__container [cmdk-item][aria-disabled=true] {
   color: #949494;

package/build-style/style.css

@@ -175,11 +175,11 @@
   min-height: 40px;
 }
 .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);
+  background: var(--wp-admin-theme-color);
+  color: #fff;
 }
 .commands-command-menu__container [cmdk-item][aria-selected=true] svg, .commands-command-menu__container [cmdk-item]:active svg {
-  fill: var(--wp-admin-theme-color);
+  fill: #fff;
 }
 .commands-command-menu__container [cmdk-item][aria-disabled=true] {
   color: #949494;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/commands",
-	"version": "0.12.1-next.5a1d1283.0",
+	"version": "0.13.1",
 	"description": "Handles the commands menu.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,13 +27,13 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/components": "^26.0.1-next.5a1d1283.0",
-		"@wordpress/data": "^9.11.1-next.5a1d1283.0",
-		"@wordpress/element": "^5.18.1-next.5a1d1283.0",
-		"@wordpress/i18n": "^4.41.1-next.5a1d1283.0",
-		"@wordpress/icons": "^9.32.1-next.5a1d1283.0",
-		"@wordpress/keyboard-shortcuts": "^4.18.1-next.5a1d1283.0",
-		"@wordpress/private-apis": "^0.23.1-next.5a1d1283.0",
+		"@wordpress/components": "^25.8.1",
+		"@wordpress/data": "^9.12.1",
+		"@wordpress/element": "^5.19.1",
+		"@wordpress/i18n": "^4.42.1",
+		"@wordpress/icons": "^9.33.1",
+		"@wordpress/keyboard-shortcuts": "^4.19.1",
+		"@wordpress/private-apis": "^0.24.1",
 		"classnames": "^2.3.1",
 		"cmdk": "^0.2.0",
 		"rememo": "^4.0.2"
@@ -45,5 +45,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "fa0b66987dab5a15f38663e06036d09bccffaa4b"
+	"gitHead": "4987d16acb5c41b62704dc4f88225acb97ddd698"
 }

package/src/components/command-menu.js

@@ -183,6 +183,9 @@ function CommandInput( { isOpen, search, setSearch } ) {
 	);
 }
 
+/**
+ * @ignore
+ */
 export function CommandMenu() {
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
 	const [ search, setSearch ] = useState( '' );

package/src/components/style.scss

@@ -78,11 +78,11 @@
 
 		&[aria-selected="true"],
 		&:active {
-			background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-			color: var(--wp-admin-theme-color);
+			background: var(--wp-admin-theme-color);
+			color: $white;
 
 			svg {
-				fill: var(--wp-admin-theme-color);
+				fill: $white;
 			}
 		}
 

package/src/hooks/use-command-loader.js

@@ -10,9 +10,73 @@ import { useDispatch } from '@wordpress/data';
 import { store as commandsStore } from '../store';
 
 /**
- * Attach a command loader to the command palette.
+ * Attach a command loader to the command palette. Used for dynamic commands.
  *
  * @param {import('../store/actions').WPCommandLoaderConfig} loader command loader config.
+ *
+ * @example
+ * ```js
+ * import { useCommandLoader } from '@wordpress/commands';
+ * import { post, page, layout, symbolFilled } from '@wordpress/icons';
+ *
+ * const icons = {
+ *     post,
+ *     page,
+ *     wp_template: layout,
+ *     wp_template_part: symbolFilled,
+ * };
+ *
+ * function usePageSearchCommandLoader( { search } ) {
+ *     // Retrieve the pages for the "search" term.
+ *     const { records, isLoading } = useSelect( ( select ) => {
+ *         const { getEntityRecords } = select( coreStore );
+ *         const query = {
+ *             search: !! search ? search : undefined,
+ *             per_page: 10,
+ *             orderby: search ? 'relevance' : 'date',
+ *         };
+ *         return {
+ *             records: getEntityRecords( 'postType', 'page', query ),
+ *             isLoading: ! select( coreStore ).hasFinishedResolution(
+ *                 'getEntityRecords',
+ *                 'postType', 'page', query ]
+ *             ),
+ *         };
+ *     }, [ search ] );
+ *
+ *     // Create the commands.
+ *     const commands = useMemo( () => {
+ *         return ( records ?? [] ).slice( 0, 10 ).map( ( record ) => {
+ *             return {
+ *                 name: record.title?.rendered + ' ' + record.id,
+ *                 label: record.title?.rendered
+ *                     ? record.title?.rendered
+ *                     : __( '(no title)' ),
+ *                 icon: icons[ postType ],
+ *                 callback: ( { close } ) => {
+ *                     const args = {
+ *                         postType,
+ *                         postId: record.id,
+ *                         ...extraArgs,
+ *                     };
+ *                     document.location = addQueryArgs( 'site-editor.php', args );
+ *                     close();
+ *                 },
+ *             };
+ *         } );
+ *     }, [ records, history ] );
+ *
+ *     return {
+ *         commands,
+ *         isLoading,
+ *     };
+ * }
+ *
+ * useCommandLoader( {
+ *     name: 'myplugin/page-search',
+ *     hook: usePageSearchCommandLoader,
+ * } );
+ * ```
  */
 export default function useCommandLoader( loader ) {
 	const { registerCommandLoader, unregisterCommandLoader } =

package/src/hooks/use-command.js

@@ -10,9 +10,25 @@ import { useDispatch } from '@wordpress/data';
 import { store as commandsStore } from '../store';
 
 /**
- * Attach a command to the command palette.
+ * Attach a command to the command palette. Used for static commands.
  *
  * @param {import('../store/actions').WPCommandConfig} command command config.
+ *
+ * @example
+ * ```js
+ * import { useCommand } from '@wordpress/commands';
+ * import { plus } from '@wordpress/icons';
+ *
+ * useCommand( {
+ *     name: 'myplugin/my-command-name',
+ *     label: __( 'Add new post' ),
+ *	   icon: plus,
+ *     callback: ({ close }) => {
+ *         document.location.href = 'post-new.php';
+ *         close();
+ *     },
+ * } );
+ * ```
  */
 export default function useCommand( command ) {
 	const { registerCommand, unregisterCommand } = useDispatch( commandsStore );

package/src/private-apis.js

@@ -4,6 +4,9 @@
 import { default as useCommandContext } from './hooks/use-command-context';
 import { lock } from './lock-unlock';
 
+/**
+ * @private
+ */
 export const privateApis = {};
 lock( privateApis, {
 	useCommandContext,

package/src/store/index.js

@@ -17,9 +17,19 @@ const STORE_NAME = 'core/commands';
 /**
  * Store definition for the commands namespace.
  *
+ * See how the Commands Store is being used in components like [site-hub](https://github.com/WordPress/gutenberg/blob/HEAD/packages/edit-site/src/components/site-hub/index.js#L23) and [document-actions](https://github.com/WordPress/gutenberg/blob/HEAD/packages/edit-post/src/components/header/document-actions/index.js#L14).
+ *
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore
  *
  * @type {Object}
+ *
+ * @example
+ * ```js
+ * import { store as commandsStore } from '@wordpress/commands';
+ * import { useDispatch } from '@wordpress/data';
+ * ...
+ * const { open: openCommandCenter } = useDispatch( commandsStore );
+ * ```
  */
 export const store = createReduxStore( STORE_NAME, {
 	reducer,