@wordpress/commands 0.3.0 → 0.5.0

package/build-style/style-rtl.css

@@ -97,7 +97,7 @@
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   :root {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -136,6 +136,9 @@
   border-bottom-right-radius: 0;
 }
 
+.commands-command-menu__container {
+  will-change: transform;
+}
 .commands-command-menu__container [cmdk-input] {
   border: none;
   width: 100%;
@@ -181,6 +184,8 @@
 .commands-command-menu__container [cmdk-root] > [cmdk-list] {
   max-height: 400px;
   overflow: auto;
+}
+.commands-command-menu__container [cmdk-root] > [cmdk-list] > [cmdk-list-sizer] :has([cmdk-group-items]:not(:empty)) {
   padding: 8px;
 }
 .commands-command-menu__container [cmdk-empty] {
@@ -197,6 +202,9 @@
 .commands-command-menu__container [cmdk-list-sizer] {
   position: relative;
 }
+.commands-command-menu__container [cmdk-group]:has([cmdk-group-items]:not(:empty)) + [cmdk-group]:has([cmdk-group-items]:not(:empty)) {
+  border-top: 1px solid #e0e0e0;
+}
 
 .commands-command-menu__item mark {
   color: inherit;

package/build-style/style.css

@@ -97,7 +97,7 @@
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   :root {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -136,6 +136,9 @@
   border-bottom-left-radius: 0;
 }
 
+.commands-command-menu__container {
+  will-change: transform;
+}
 .commands-command-menu__container [cmdk-input] {
   border: none;
   width: 100%;
@@ -181,6 +184,8 @@
 .commands-command-menu__container [cmdk-root] > [cmdk-list] {
   max-height: 400px;
   overflow: auto;
+}
+.commands-command-menu__container [cmdk-root] > [cmdk-list] > [cmdk-list-sizer] :has([cmdk-group-items]:not(:empty)) {
   padding: 8px;
 }
 .commands-command-menu__container [cmdk-empty] {
@@ -197,6 +202,9 @@
 .commands-command-menu__container [cmdk-list-sizer] {
   position: relative;
 }
+.commands-command-menu__container [cmdk-group]:has([cmdk-group-items]:not(:empty)) + [cmdk-group]:has([cmdk-group-items]:not(:empty)) {
+  border-top: 1px solid #e0e0e0;
+}
 
 .commands-command-menu__item mark {
   color: inherit;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/commands",
-	"version": "0.3.0",
+	"version": "0.5.0",
 	"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": "^23.9.0",
-		"@wordpress/data": "^9.2.0",
-		"@wordpress/element": "^5.9.0",
-		"@wordpress/i18n": "^4.32.0",
-		"@wordpress/icons": "^9.23.0",
-		"@wordpress/keyboard-shortcuts": "^4.9.0",
-		"@wordpress/private-apis": "^0.14.0",
+		"@wordpress/components": "^25.0.0",
+		"@wordpress/data": "^9.4.0",
+		"@wordpress/element": "^5.11.0",
+		"@wordpress/i18n": "^4.34.0",
+		"@wordpress/icons": "^9.25.0",
+		"@wordpress/keyboard-shortcuts": "^4.11.0",
+		"@wordpress/private-apis": "^0.16.0",
 		"cmdk": "^0.2.0",
 		"rememo": "^4.0.2"
 	},
@@ -43,5 +43,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "6df0c62d43b8901414ccd22ffbe56eaa99d012a6"
+	"gitHead": "c7c79cb11b677adcbf06cf5f8cfb6c5ec1699f19"
 }

package/src/components/command-menu.js

@@ -31,17 +31,17 @@ function CommandMenuLoader( { name, search, hook, setLoader, close } ) {
 		setLoader( name, isLoading );
 	}, [ setLoader, name, isLoading ] );
 
+	if ( ! commands.length ) {
+		return null;
+	}
+
 	return (
 		<>
 			<Command.List>
-				{ isLoading && (
-					<Command.Loading>{ __( 'Searching…' ) }</Command.Loading>
-				) }
-
 				{ commands.map( ( command ) => (
 					<Command.Item
 						key={ command.name }
-						value={ command.name }
+						value={ command.searchLabel ?? command.label }
 						onSelect={ () => command.callback( { close } ) }
 					>
 						<HStack
@@ -89,24 +89,28 @@ export function CommandMenuLoaderWrapper( { hook, search, setLoader, close } ) {
 	);
 }
 
-export function CommandMenuGroup( { group, search, setLoader, close } ) {
+export function CommandMenuGroup( { isContextual, search, setLoader, close } ) {
 	const { commands, loaders } = useSelect(
 		( select ) => {
 			const { getCommands, getCommandLoaders } = select( commandsStore );
 			return {
-				commands: getCommands( group ),
-				loaders: getCommandLoaders( group ),
+				commands: getCommands( isContextual ),
+				loaders: getCommandLoaders( isContextual ),
 			};
 		},
-		[ group ]
+		[ isContextual ]
 	);
 
+	if ( ! commands.length && ! loaders.length ) {
+		return null;
+	}
+
 	return (
 		<Command.Group>
 			{ commands.map( ( command ) => (
 				<Command.Item
 					key={ command.name }
-					value={ command.name }
+					value={ command.searchLabel ?? command.label }
 					onSelect={ () => command.callback( { close } ) }
 				>
 					<HStack
@@ -139,14 +143,13 @@ export function CommandMenuGroup( { group, search, setLoader, close } ) {
 export function CommandMenu() {
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
 	const [ search, setSearch ] = useState( '' );
-	const [ open, setOpen ] = useState( false );
-	const { groups } = useSelect( ( select ) => {
-		const { getGroups } = select( commandsStore );
-		return {
-			groups: getGroups(),
-		};
-	}, [] );
+	const isOpen = useSelect(
+		( select ) => select( commandsStore ).isOpen(),
+		[]
+	);
+	const { open, close } = useDispatch( commandsStore );
 	const [ loaders, setLoaders ] = useState( {} );
+	const commandMenuInput = useRef();
 
 	useEffect( () => {
 		registerShortcut( {
@@ -164,7 +167,11 @@ export function CommandMenu() {
 		'core/commands',
 		( event ) => {
 			event.preventDefault();
-			setOpen( ( prevOpen ) => ! prevOpen );
+			if ( isOpen ) {
+				close();
+			} else {
+				open();
+			}
 		},
 		{
 			bindGlobal: true,
@@ -179,12 +186,19 @@ export function CommandMenu() {
 			} ) ),
 		[]
 	);
-	const close = () => {
+	const closeAndReset = () => {
 		setSearch( '' );
-		setOpen( false );
+		close();
 	};
 
-	if ( ! open ) {
+	useEffect( () => {
+		// Focus the command menu input when mounting the modal.
+		if ( isOpen ) {
+			commandMenuInput.current.focus();
+		}
+	}, [ isOpen ] );
+
+	if ( ! isOpen ) {
 		return false;
 	}
 	const isLoading = Object.values( loaders ).some( Boolean );
@@ -193,39 +207,39 @@ export function CommandMenu() {
 		<Modal
 			className="commands-command-menu"
 			overlayClassName="commands-command-menu__overlay"
-			onRequestClose={ close }
+			onRequestClose={ closeAndReset }
 			__experimentalHideHeader
 		>
 			<div className="commands-command-menu__container">
 				<Command label={ __( 'Global Command Menu' ) }>
 					<div className="commands-command-menu__header">
 						<Command.Input
-							// The input should be focused when the modal is opened.
-							// eslint-disable-next-line jsx-a11y/no-autofocus
-							autoFocus
+							ref={ commandMenuInput }
 							value={ search }
 							onValueChange={ setSearch }
 							placeholder={ __( 'Type a command or search' ) }
 						/>
 					</div>
-					{ search && (
-						<Command.List>
-							{ ! isLoading && (
-								<Command.Empty>
-									{ __( 'No results found.' ) }
-								</Command.Empty>
-							) }
-							{ groups.map( ( group ) => (
-								<CommandMenuGroup
-									key={ group }
-									group={ group }
-									search={ search }
-									setLoader={ setLoader }
-									close={ close }
-								/>
-							) ) }
-						</Command.List>
-					) }
+					<Command.List>
+						{ search && ! isLoading && (
+							<Command.Empty>
+								{ __( 'No results found.' ) }
+							</Command.Empty>
+						) }
+						<CommandMenuGroup
+							search={ search }
+							setLoader={ setLoader }
+							close={ closeAndReset }
+							isContextual
+						/>
+						{ search && (
+							<CommandMenuGroup
+								search={ search }
+								setLoader={ setLoader }
+								close={ closeAndReset }
+							/>
+						) }
+					</Command.List>
 				</Command>
 			</div>
 		</Modal>

package/src/components/style.scss

@@ -36,6 +36,9 @@
 }
 
 .commands-command-menu__container {
+	// the style here is a hack to force safari to repaint to avoid a style glitch
+	will-change: transform;
+
 	[cmdk-input] {
 		border: none;
 		width: 100%;
@@ -90,7 +93,10 @@
 	[cmdk-root] > [cmdk-list] {
 		max-height: 400px;
 		overflow: auto;
-		padding: $grid-unit;
+
+		& > [cmdk-list-sizer] :has([cmdk-group-items]:not(:empty)) {
+			padding: $grid-unit;
+		}
 	}
 
 	[cmdk-empty] {
@@ -109,6 +115,10 @@
 	[cmdk-list-sizer] {
 		position: relative;
 	}
+
+	[cmdk-group]:has([cmdk-group-items]:not(:empty)) + [cmdk-group]:has([cmdk-group-items]:not(:empty)) {
+		border-top: 1px solid $gray-200;
+	}
 }
 
 .commands-command-menu__item mark {

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

@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useRef } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as commandsStore } from '../store';
+
+/**
+ * Sets the active context of the command center
+ *
+ * @param {string} context Context to set.
+ */
+export default function useCommandContext( context ) {
+	const { getContext } = useSelect( commandsStore );
+	const initialContext = useRef( getContext() );
+	const { setContext } = useDispatch( commandsStore );
+
+	useEffect( () => {
+		setContext( context );
+	}, [ context, setContext ] );
+
+	// This effects ensures that on unmount, we restore the context
+	// that was set before the component actually mounts.
+	useEffect( () => {
+		const initialContextRef = initialContext.current;
+		return () => setContext( initialContextRef );
+	}, [ setContext ] );
+}

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

@@ -14,17 +14,23 @@ import { store as commandsStore } from '../store';
  *
  * @param {import('../store/actions').WPCommandLoaderConfig} loader command loader config.
  */
-export default function useCommandLoader( { name, group, hook } ) {
+export default function useCommandLoader( loader ) {
 	const { registerCommandLoader, unregisterCommandLoader } =
 		useDispatch( commandsStore );
 	useEffect( () => {
 		registerCommandLoader( {
-			name,
-			group,
-			hook,
+			name: loader.name,
+			hook: loader.hook,
+			context: loader.context,
 		} );
 		return () => {
-			unregisterCommandLoader( name, group );
+			unregisterCommandLoader( loader.name );
 		};
-	}, [ name, group, hook, registerCommandLoader, unregisterCommandLoader ] );
+	}, [
+		loader.name,
+		loader.hook,
+		loader.context,
+		registerCommandLoader,
+		unregisterCommandLoader,
+	] );
 }

package/src/hooks/use-command.js

@@ -24,17 +24,21 @@ export default function useCommand( command ) {
 	useEffect( () => {
 		registerCommand( {
 			name: command.name,
-			group: command.group,
+			context: command.context,
 			label: command.label,
+			searchLabel: command.searchLabel,
+			icon: command.icon,
 			callback: currentCallback.current,
 		} );
 		return () => {
-			unregisterCommand( command.name, command.group );
+			unregisterCommand( command.name );
 		};
 	}, [
 		command.name,
 		command.label,
-		command.group,
+		command.searchLabel,
+		command.icon,
+		command.context,
 		registerCommand,
 		unregisterCommand,
 	] );

package/src/index.js

@@ -1,2 +1,4 @@
 export { CommandMenu } from './components/command-menu';
 export { privateApis } from './private-apis';
+export { default as useCommand } from './hooks/use-command';
+export { default as useCommandLoader } from './hooks/use-command-loader';

package/src/private-apis.js

@@ -6,8 +6,8 @@ import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/pri
 /**
  * Internal dependencies
  */
-import { default as useCommand } from './hooks/use-command';
-import { default as useCommandLoader } from './hooks/use-command-loader';
+import { default as useCommandContext } from './hooks/use-command-context';
+import { store } from './store';
 
 export const { lock, unlock } =
 	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
@@ -17,6 +17,6 @@ export const { lock, unlock } =
 
 export const privateApis = {};
 lock( privateApis, {
-	useCommand,
-	useCommandLoader,
+	useCommandContext,
+	store,
 } );

package/src/store/actions.js

@@ -5,11 +5,12 @@
  *
  * @typedef {Object} WPCommandConfig
  *
- * @property {string}      name     Command name.
- * @property {string}      label    Command label.
- * @property {string=}     group    Command group.
- * @property {JSX.Element} icon     Command icon.
- * @property {Function}    callback Command callback.
+ * @property {string}      name        Command name.
+ * @property {string}      label       Command label.
+ * @property {string=}     searchLabel Command search label.
+ * @property {string=}     context     Command context.
+ * @property {JSX.Element} icon        Command icon.
+ * @property {Function}    callback    Command callback.
  */
 
 /**
@@ -21,9 +22,9 @@
  *
  * @typedef {Object} WPCommandLoaderConfig
  *
- * @property {string}              name  Command loader name.
- * @property {string=}             group Command loader group.
- * @property {WPCommandLoaderHook} hook  Command loader hook.
+ * @property {string}              name    Command loader name.
+ * @property {string=}             context Command loader context.
+ * @property {WPCommandLoaderHook} hook    Command loader hook.
  */
 
 /**
@@ -33,30 +34,24 @@
  *
  * @return {Object} action.
  */
-export function registerCommand( { name, label, icon, callback, group = '' } ) {
+export function registerCommand( config ) {
 	return {
 		type: 'REGISTER_COMMAND',
-		name,
-		label,
-		icon,
-		callback,
-		group,
+		...config,
 	};
 }
 
 /**
  * Returns an action object used to unregister a command.
  *
- * @param {string} name  Command name.
- * @param {string} group Command group.
+ * @param {string} name Command name.
  *
  * @return {Object} action.
  */
-export function unregisterCommand( name, group ) {
+export function unregisterCommand( name ) {
 	return {
 		type: 'UNREGISTER_COMMAND',
 		name,
-		group,
 	};
 }
 
@@ -67,27 +62,59 @@ export function unregisterCommand( name, group ) {
  *
  * @return {Object} action.
  */
-export function registerCommandLoader( { name, group = '', hook } ) {
+export function registerCommandLoader( config ) {
 	return {
 		type: 'REGISTER_COMMAND_LOADER',
-		name,
-		group,
-		hook,
+		...config,
 	};
 }
 
 /**
  * Unregister command loader hook.
  *
- * @param {string} name  Command loader name.
- * @param {string} group Command loader group.
+ * @param {string} name Command loader name.
  *
  * @return {Object} action.
  */
-export function unregisterCommandLoader( name, group ) {
+export function unregisterCommandLoader( name ) {
 	return {
 		type: 'UNREGISTER_COMMAND_LOADER',
 		name,
-		group,
+	};
+}
+
+/**
+ * Opens the command center.
+ *
+ * @return {Object} action.
+ */
+export function open() {
+	return {
+		type: 'OPEN',
+	};
+}
+
+/**
+ * Closes the command center.
+ *
+ * @return {Object} action.
+ */
+export function close() {
+	return {
+		type: 'CLOSE',
+	};
+}
+
+/**
+ * Sets the active context.
+ *
+ * @param {string} context Context.
+ *
+ * @return {Object} action.
+ */
+export function setContext( context ) {
+	return {
+		type: 'SET_CONTEXT',
+		context,
 	};
 }

package/src/store/reducer.js

@@ -16,24 +16,18 @@ function commands( state = {}, action ) {
 		case 'REGISTER_COMMAND':
 			return {
 				...state,
-				[ action.group ]: {
-					...state[ action.group ],
-					[ action.name ]: {
-						name: action.name,
-						label: action.label,
-						group: action.group,
-						callback: action.callback,
-						icon: action.icon,
-					},
+				[ action.name ]: {
+					name: action.name,
+					label: action.label,
+					searchLabel: action.searchLabel,
+					context: action.context,
+					callback: action.callback,
+					icon: action.icon,
 				},
 			};
 		case 'UNREGISTER_COMMAND': {
-			const { [ action.name ]: _, ...remainingState } =
-				state?.[ action.group ];
-			return {
-				...state,
-				[ action.group ]: remainingState,
-			};
+			const { [ action.name ]: _, ...remainingState } = state;
+			return remainingState;
 		}
 	}
 
@@ -53,30 +47,62 @@ function commandLoaders( state = {}, action ) {
 		case 'REGISTER_COMMAND_LOADER':
 			return {
 				...state,
-				[ action.group ]: {
-					...state[ action.group ],
-					[ action.name ]: {
-						name: action.name,
-						hook: action.hook,
-					},
+				[ action.name ]: {
+					name: action.name,
+					context: action.context,
+					hook: action.hook,
 				},
 			};
 		case 'UNREGISTER_COMMAND_LOADER': {
-			const { [ action.name ]: _, ...remainingState } =
-				state?.[ action.group ];
-			return {
-				...state,
-				[ action.group ]: remainingState,
-			};
+			const { [ action.name ]: _, ...remainingState } = state;
+			return remainingState;
 		}
 	}
 
 	return state;
 }
 
+/**
+ * Reducer returning the command center open state.
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {boolean} Updated state.
+ */
+function isOpen( state = false, action ) {
+	switch ( action.type ) {
+		case 'OPEN':
+			return true;
+		case 'CLOSE':
+			return false;
+	}
+
+	return state;
+}
+
+/**
+ * Reducer returning the command center's active context.
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {boolean} Updated state.
+ */
+function context( state = 'root', action ) {
+	switch ( action.type ) {
+		case 'SET_CONTEXT':
+			return action.context;
+	}
+
+	return state;
+}
+
 const reducer = combineReducers( {
 	commands,
 	commandLoaders,
+	isOpen,
+	context,
 } );
 
 export default reducer;