@wordpress/commands 0.9.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/commands",
-	"version": "0.9.0",
+	"version": "0.11.0",
 	"description": "Handles the commands menu.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,21 +27,23 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/components": "^25.4.0",
-		"@wordpress/data": "^9.8.0",
-		"@wordpress/element": "^5.15.0",
-		"@wordpress/i18n": "^4.38.0",
-		"@wordpress/icons": "^9.29.0",
-		"@wordpress/keyboard-shortcuts": "^4.15.0",
-		"@wordpress/private-apis": "^0.20.0",
+		"@wordpress/components": "^25.6.0",
+		"@wordpress/data": "^9.10.0",
+		"@wordpress/element": "^5.17.0",
+		"@wordpress/i18n": "^4.40.0",
+		"@wordpress/icons": "^9.31.0",
+		"@wordpress/keyboard-shortcuts": "^4.17.0",
+		"@wordpress/private-apis": "^0.22.0",
+		"classnames": "^2.3.1",
 		"cmdk": "^0.2.0",
 		"rememo": "^4.0.2"
 	},
 	"peerDependencies": {
-		"react": "^18.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "6f14d11ed4cb59df110a28ebaa23ecba95eb673a"
+	"gitHead": "78a288d55b83a713b2f7d98d5a855c0771a2afc6"
 }

package/src/components/command-menu.js

@@ -1,13 +1,20 @@
 /**
  * External dependencies
  */
-import { Command } from 'cmdk';
+import { Command, useCommandState } from 'cmdk';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useState, useEffect, useRef, useCallback } from '@wordpress/element';
+import {
+	useState,
+	useEffect,
+	useRef,
+	useCallback,
+	useMemo,
+} from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
 	Modal,
@@ -18,7 +25,7 @@ import {
 	store as keyboardShortcutsStore,
 	useShortcut,
 } from '@wordpress/keyboard-shortcuts';
-import { Icon } from '@wordpress/icons';
+import { Icon, search as inputIcon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -43,12 +50,18 @@ function CommandMenuLoader( { name, search, hook, setLoader, close } ) {
 						key={ command.name }
 						value={ command.searchLabel ?? command.label }
 						onSelect={ () => command.callback( { close } ) }
+						id={ command.name }
 					>
 						<HStack
 							alignment="left"
-							className="commands-command-menu__item"
+							className={ classnames(
+								'commands-command-menu__item',
+								{
+									'has-icon': command.icon,
+								}
+							) }
 						>
-							<Icon icon={ command.icon } />
+							{ command.icon && <Icon icon={ command.icon } /> }
 							<span>
 								<TextHighlight
 									text={ command.label }
@@ -112,12 +125,15 @@ export function CommandMenuGroup( { isContextual, search, setLoader, close } ) {
 					key={ command.name }
 					value={ command.searchLabel ?? command.label }
 					onSelect={ () => command.callback( { close } ) }
+					id={ command.name }
 				>
 					<HStack
 						alignment="left"
-						className="commands-command-menu__item"
+						className={ classnames( 'commands-command-menu__item', {
+							'has-icon': command.icon,
+						} ) }
 					>
-						<Icon icon={ command.icon } />
+						{ command.icon && <Icon icon={ command.icon } /> }
 						<span>
 							<TextHighlight
 								text={ command.label }
@@ -140,6 +156,33 @@ export function CommandMenuGroup( { isContextual, search, setLoader, close } ) {
 	);
 }
 
+function CommandInput( { isOpen, search, setSearch } ) {
+	const commandMenuInput = useRef();
+	const _value = useCommandState( ( state ) => state.value );
+	const selectedItemId = useMemo( () => {
+		const item = document.querySelector(
+			`[cmdk-item=""][data-value="${ _value }"]`
+		);
+		return item?.getAttribute( 'id' );
+	}, [ _value ] );
+	useEffect( () => {
+		// Focus the command palette input when mounting the modal.
+		if ( isOpen ) {
+			commandMenuInput.current.focus();
+		}
+	}, [ isOpen ] );
+	return (
+		<Command.Input
+			ref={ commandMenuInput }
+			value={ search }
+			onValueChange={ setSearch }
+			placeholder={ __( 'Search for commands' ) }
+			aria-activedescendant={ selectedItemId }
+			icon={ search }
+		/>
+	);
+}
+
 export function CommandMenu() {
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
 	const [ search, setSearch ] = useState( '' );
@@ -149,13 +192,12 @@ export function CommandMenu() {
 	);
 	const { open, close } = useDispatch( commandsStore );
 	const [ loaders, setLoaders ] = useState( {} );
-	const commandMenuInput = useRef();
 
 	useEffect( () => {
 		registerShortcut( {
 			name: 'core/commands',
 			category: 'global',
-			description: __( 'Open the command palette' ),
+			description: __( 'Open the command palette.' ),
 			keyCombination: {
 				modifier: 'primary',
 				character: 'k',
@@ -165,7 +207,11 @@ export function CommandMenu() {
 
 	useShortcut(
 		'core/commands',
+		/** @type {import('react').KeyboardEventHandler} */
 		( event ) => {
+			// Bails to avoid obscuring the effect of the preceding handler(s).
+			if ( event.defaultPrevented ) return;
+
 			event.preventDefault();
 			if ( isOpen ) {
 				close();
@@ -191,16 +237,23 @@ export function CommandMenu() {
 		close();
 	};
 
-	useEffect( () => {
-		// Focus the command palette input when mounting the modal.
-		if ( isOpen ) {
-			commandMenuInput.current.focus();
-		}
-	}, [ isOpen ] );
-
 	if ( ! isOpen ) {
 		return false;
 	}
+
+	const onKeyDown = ( event ) => {
+		if (
+			// Ignore keydowns from IMEs
+			event.nativeEvent.isComposing ||
+			// Workaround for Mac Safari where the final Enter/Backspace of an IME composition
+			// is `isComposing=false`, even though it's technically still part of the composition.
+			// These can only be detected by keyCode.
+			event.keyCode === 229
+		) {
+			event.preventDefault();
+		}
+	};
+
 	const isLoading = Object.values( loaders ).some( Boolean );
 
 	return (
@@ -211,13 +264,16 @@ export function CommandMenu() {
 			__experimentalHideHeader
 		>
 			<div className="commands-command-menu__container">
-				<Command label={ __( 'Command palette' ) }>
+				<Command
+					label={ __( 'Command palette' ) }
+					onKeyDown={ onKeyDown }
+				>
 					<div className="commands-command-menu__header">
-						<Command.Input
-							ref={ commandMenuInput }
-							value={ search }
-							onValueChange={ setSearch }
-							placeholder={ __( 'Type a command or search' ) }
+						<Icon icon={ inputIcon } />
+						<CommandInput
+							search={ search }
+							setSearch={ setSearch }
+							isOpen={ isOpen }
 						/>
 					</div>
 					<Command.List>

package/src/components/style.scss

@@ -1,9 +1,15 @@
 // dirty hack to clean up modal
 .commands-command-menu {
-	width: 100%;
-	max-width: 480px;
+	border-radius: $grid-unit-05;
+	width: calc(100% - #{$grid-unit-40});
+	margin: auto;
+	max-width: 420px;
 	position: relative;
-	top: 15%;
+	top: calc(15% + #{$header-height});
+
+	@include break-small() {
+		top: 15%;
+	}
 
 	.components-modal__content {
 		margin: 0;
@@ -19,6 +25,7 @@
 .commands-command-menu__header {
 	display: flex;
 	align-items: center;
+	padding-left: $grid-unit-20;
 
 	.components-button {
 		height: $grid-unit-70;
@@ -42,33 +49,32 @@
 	[cmdk-input] {
 		border: none;
 		width: 100%;
-		padding: $grid-unit-20;
+		padding: $grid-unit-20 $grid-unit-20 $grid-unit-20 $grid-unit-10;
 		outline: none;
 		color: $gray-900;
 		margin: 0;
-		font-size: 20px;
+		font-size: 16px;
 		line-height: 28px;
-		border-bottom: 1px solid $gray-200;
 		border-radius: 0;
 
 		&::placeholder {
-			color: $gray-600;
+			color: $gray-700;
 		}
 
 		&:focus {
 			box-shadow: none;
 			outline: none;
-			border-bottom: 1px solid $gray-200;
 		}
 	}
 
 	[cmdk-item] {
-		border-radius: $grid-unit-05;
+		border-radius: $radius-block-ui;
 		cursor: pointer;
 		display: flex;
 		align-items: center;
-		padding: $grid-unit;
 		color: $gray-900;
+		font-size: $default-font-size;
+		min-height: $button-size-next-default-40px;
 
 		&[aria-selected="true"],
 		&:active {
@@ -86,16 +92,25 @@
 		}
 
 		svg {
-			fill: $gray-600;
+			fill: $gray-900;
+		}
+
+		> div {
+			padding: $grid-unit;
+			padding-left: $grid-unit-50; // Account for commands without icons.
+		}
+
+		> .has-icon {
+			padding-left: $grid-unit;
 		}
 	}
 
 	[cmdk-root] > [cmdk-list] {
-		max-height: 400px;
+		max-height: 368px; // Specific to not have commands overflow oddly.
 		overflow: auto;
 
-		& > [cmdk-list-sizer] :has([cmdk-group-items]:not(:empty)) {
-			padding: $grid-unit;
+		& [cmdk-list-sizer] > [cmdk-group] > [cmdk-group-items]:not(:empty) {
+			padding: 0 $grid-unit $grid-unit;
 		}
 	}
 
@@ -103,9 +118,9 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		height: $grid-unit-80;
 		white-space: pre-wrap;
-		color: $gray-800;
+		color: $gray-900;
+		padding: $grid-unit-10 0 $grid-unit-40;
 	}
 
 	[cmdk-loading] {
@@ -115,10 +130,14 @@
 	[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 span {
+	// Ensure commands do not run off the edge (great for post titles).
+	display: inline-block;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 
 .commands-command-menu__item mark {

package/src/store/selectors.js

@@ -3,6 +3,14 @@
  */
 import createSelector from 'rememo';
 
+/**
+ * Returns the registered static commands.
+ *
+ * @param {Object}  state      State tree.
+ * @param {boolean} contextual Whether to return only contextual commands.
+ *
+ * @return {import('./actions').WPCommandConfig[]} The list of registered commands.
+ */
 export const getCommands = createSelector(
 	( state, contextual = false ) =>
 		Object.values( state.commands ).filter( ( command ) => {
@@ -13,6 +21,14 @@ export const getCommands = createSelector(
 	( state ) => [ state.commands, state.context ]
 );
 
+/**
+ * Returns the registered command loaders.
+ *
+ * @param {Object}  state      State tree.
+ * @param {boolean} contextual Whether to return only contextual command loaders.
+ *
+ * @return {import('./actions').WPCommandLoaderConfig[]} The list of registered command loaders.
+ */
 export const getCommandLoaders = createSelector(
 	( state, contextual = false ) =>
 		Object.values( state.commandLoaders ).filter( ( loader ) => {
@@ -23,10 +39,24 @@ export const getCommandLoaders = createSelector(
 	( state ) => [ state.commandLoaders, state.context ]
 );
 
+/**
+ * Returns whether the command palette is open.
+ *
+ * @param {Object} state State tree.
+ *
+ * @return {boolean} Returns whether the command palette is open.
+ */
 export function isOpen( state ) {
 	return state.isOpen;
 }
 
+/**
+ * Returns whether the active context.
+ *
+ * @param {Object} state State tree.
+ *
+ * @return {string} Context.
+ */
 export function getContext( state ) {
 	return state.context;
 }