@wordpress/keyboard-shortcuts 5.44.0 → 5.45.0

package/build-types/store/selectors.d.ts

@@ -0,0 +1,321 @@
+/**
+ * Internal dependencies
+ */
+import type { ShortcutKeyCombination } from './actions';
+interface ShortcutState {
+    category: string;
+    keyCombination: ShortcutKeyCombination;
+    aliases?: ShortcutKeyCombination[];
+    description: string;
+}
+type ShortcutsState = Record<string, ShortcutState>;
+/**
+ * Shortcut formatting methods.
+ */
+declare const FORMATTING_METHODS: {
+    /**
+     * Display formatting.
+     */
+    display: import("@wordpress/keycodes").WPModifierHandler<import("@wordpress/keycodes").WPKeyHandler<string>>;
+    /**
+     * Raw shortcut formatting.
+     */
+    raw: import("@wordpress/keycodes").WPModifierHandler<import("@wordpress/keycodes").WPKeyHandler<string>>;
+    /**
+     * ARIA label formatting.
+     */
+    ariaLabel: import("@wordpress/keycodes").WPModifierHandler<import("@wordpress/keycodes").WPKeyHandler<string>>;
+};
+/**
+ * Returns the main key combination for a given shortcut name.
+ *
+ * @param {Object} state Global state.
+ * @param {string} name  Shortcut name.
+ *
+ * @example
+ *
+ *```js
+ * import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+ * import { useSelect } from '@wordpress/data';
+ * import { createInterpolateElement } from '@wordpress/element';
+ * import { sprintf } from '@wordpress/i18n';
+ * const ExampleComponent = () => {
+ *     const {character, modifier} = useSelect(
+ *         ( select ) =>
+ *             select( keyboardShortcutsStore ).getShortcutKeyCombination(
+ *                 'core/editor/next-region'
+ *             ),
+ *         []
+ *     );
+ *
+ *     return (
+ *         <div>
+ *             { createInterpolateElement(
+ *                 sprintf(
+ *                     'Character: <code>%s</code> / Modifier: <code>%s</code>',
+ *                     character,
+ *                     modifier
+ *                 ),
+ *                 {
+ *                     code: <code />,
+ *                 }
+ *             ) }
+ *         </div>
+ *     );
+ * };
+ *```
+ *
+ * @return {ShortcutKeyCombination?} Key combination.
+ */
+export declare function getShortcutKeyCombination(state: ShortcutsState, name: string): ShortcutKeyCombination | null;
+/**
+ * Returns a string representing the main key combination for a given shortcut name.
+ *
+ * @param {Object}                   state          Global state.
+ * @param {string}                   name           Shortcut name.
+ * @param {keyof FORMATTING_METHODS} representation Type of representation
+ *                                                  (display, raw, ariaLabel).
+ * @example
+ *
+ *```js
+ * import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+ * import { useSelect } from '@wordpress/data';
+ * import { sprintf } from '@wordpress/i18n';
+ *
+ * const ExampleComponent = () => {
+ *     const {display, raw, ariaLabel} = useSelect(
+ *         ( select ) =>{
+ *             return {
+ *                 display: select( keyboardShortcutsStore ).getShortcutRepresentation('core/editor/next-region' ),
+ *                 raw: select( keyboardShortcutsStore ).getShortcutRepresentation('core/editor/next-region','raw' ),
+ *                 ariaLabel: select( keyboardShortcutsStore ).getShortcutRepresentation('core/editor/next-region', 'ariaLabel')
+ *             }
+ *         },
+ *         []
+ *     );
+ *
+ *     return (
+ *         <ul>
+ *             <li>{ sprintf( 'display string: %s', display ) }</li>
+ *             <li>{ sprintf( 'raw string: %s', raw ) }</li>
+ *             <li>{ sprintf( 'ariaLabel string: %s', ariaLabel ) }</li>
+ *         </ul>
+ *     );
+ * };
+ *```
+ *
+ * @return {?string} Shortcut representation.
+ */
+export declare function getShortcutRepresentation(state: ShortcutsState, name: string, representation?: keyof typeof FORMATTING_METHODS): string | null;
+/**
+ * Returns the shortcut description given its name.
+ *
+ * @param {Object} state Global state.
+ * @param {string} name  Shortcut name.
+ *
+ * @example
+ *
+ *```js
+ * import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+ * import { useSelect } from '@wordpress/data';
+ * import { __ } from '@wordpress/i18n';
+ * const ExampleComponent = () => {
+ *     const shortcutDescription = useSelect(
+ *         ( select ) =>
+ *             select( keyboardShortcutsStore ).getShortcutDescription( 'core/editor/next-region' ),
+ *         []
+ *     );
+ *
+ *     return shortcutDescription ? (
+ *         <div>{ shortcutDescription }</div>
+ *     ) : (
+ *         <div>{ __( 'No description.' ) }</div>
+ *     );
+ * };
+ *```
+ * @return {?string} Shortcut description.
+ */
+export declare function getShortcutDescription(state: ShortcutsState, name: string): string | null;
+/**
+ * Returns the aliases for a given shortcut name.
+ *
+ * @param {Object} state Global state.
+ * @param {string} name  Shortcut name.
+ * @example
+ *
+ *```js
+ * import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+ * import { useSelect } from '@wordpress/data';
+ * import { createInterpolateElement } from '@wordpress/element';
+ * import { sprintf } from '@wordpress/i18n';
+ * const ExampleComponent = () => {
+ *     const shortcutAliases = useSelect(
+ *         ( select ) =>
+ *             select( keyboardShortcutsStore ).getShortcutAliases(
+ *                 'core/editor/next-region'
+ *             ),
+ *         []
+ *     );
+ *
+ *     return (
+ *         shortcutAliases.length > 0 && (
+ *             <ul>
+ *                 { shortcutAliases.map( ( { character, modifier }, index ) => (
+ *                     <li key={ index }>
+ *                         { createInterpolateElement(
+ *                             sprintf(
+ *                                 'Character: <code>%s</code> / Modifier: <code>%s</code>',
+ *                                 character,
+ *                                 modifier
+ *                             ),
+ *                             {
+ *                                 code: <code />,
+ *                             }
+ *                         ) }
+ *                     </li>
+ *                 ) ) }
+ *             </ul>
+ *         )
+ *     );
+ * };
+ *```
+ *
+ * @return {ShortcutKeyCombination[]} Key combinations.
+ */
+export declare function getShortcutAliases(state: ShortcutsState, name: string): ShortcutKeyCombination[];
+/**
+ * Returns the shortcuts that include aliases for a given shortcut name.
+ *
+ * @param {Object} state Global state.
+ * @param {string} name  Shortcut name.
+ * @example
+ *
+ *```js
+ * import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+ * import { useSelect } from '@wordpress/data';
+ * import { createInterpolateElement } from '@wordpress/element';
+ * import { sprintf } from '@wordpress/i18n';
+ *
+ * const ExampleComponent = () => {
+ *     const allShortcutKeyCombinations = useSelect(
+ *         ( select ) =>
+ *             select( keyboardShortcutsStore ).getAllShortcutKeyCombinations(
+ *                 'core/editor/next-region'
+ *             ),
+ *         []
+ *     );
+ *
+ *     return (
+ *         allShortcutKeyCombinations.length > 0 && (
+ *             <ul>
+ *                 { allShortcutKeyCombinations.map(
+ *                     ( { character, modifier }, index ) => (
+ *                         <li key={ index }>
+ *                             { createInterpolateElement(
+ *                                 sprintf(
+ *                                     'Character: <code>%s</code> / Modifier: <code>%s</code>',
+ *                                     character,
+ *                                     modifier
+ *                                 ),
+ *                                 {
+ *                                     code: <code />,
+ *                                 }
+ *                             ) }
+ *                         </li>
+ *                     )
+ *                 ) }
+ *             </ul>
+ *         )
+ *     );
+ * };
+ *```
+ *
+ * @return {ShortcutKeyCombination[]} Key combinations.
+ */
+export declare const getAllShortcutKeyCombinations: ((state: any, name: any) => ShortcutKeyCombination[]) & import("rememo").EnhancedSelector;
+/**
+ * Returns the raw representation of all the keyboard combinations of a given shortcut name.
+ *
+ * @param {Object} state Global state.
+ * @param {string} name  Shortcut name.
+ *
+ * @example
+ *
+ *```js
+ * import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+ * import { useSelect } from '@wordpress/data';
+ * import { createInterpolateElement } from '@wordpress/element';
+ * import { sprintf } from '@wordpress/i18n';
+ *
+ * const ExampleComponent = () => {
+ *     const allShortcutRawKeyCombinations = useSelect(
+ *         ( select ) =>
+ *             select( keyboardShortcutsStore ).getAllShortcutRawKeyCombinations(
+ *                 'core/editor/next-region'
+ *             ),
+ *         []
+ *     );
+ *
+ *     return (
+ *         allShortcutRawKeyCombinations.length > 0 && (
+ *             <ul>
+ *                 { allShortcutRawKeyCombinations.map(
+ *                     ( shortcutRawKeyCombination, index ) => (
+ *                         <li key={ index }>
+ *                             { createInterpolateElement(
+ *                                 sprintf(
+ *                                     ' <code>%s</code>',
+ *                                     shortcutRawKeyCombination
+ *                                 ),
+ *                                 {
+ *                                     code: <code />,
+ *                                 }
+ *                             ) }
+ *                         </li>
+ *                     )
+ *                 ) }
+ *             </ul>
+ *         )
+ *     );
+ * };
+ *```
+ *
+ * @return {string[]} Shortcuts.
+ */
+export declare const getAllShortcutRawKeyCombinations: ((state: any, name: any) => (string | null)[]) & import("rememo").EnhancedSelector;
+/**
+ * Returns the shortcut names list for a given category name.
+ *
+ * @param {Object} state Global state.
+ * @param {string} name  Category name.
+ * @example
+ *
+ *```js
+ * import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+ * import { useSelect } from '@wordpress/data';
+ *
+ * const ExampleComponent = () => {
+ *     const categoryShortcuts = useSelect(
+ *         ( select ) =>
+ *             select( keyboardShortcutsStore ).getCategoryShortcuts(
+ *                 'block'
+ *             ),
+ *         []
+ *     );
+ *
+ *     return (
+ *         categoryShortcuts.length > 0 && (
+ *             <ul>
+ *                 { categoryShortcuts.map( ( categoryShortcut ) => (
+ *                     <li key={ categoryShortcut }>{ categoryShortcut }</li>
+ *                 ) ) }
+ *             </ul>
+ *         )
+ *     );
+ * };
+ *```
+ * @return {string[]} Shortcut names.
+ */
+export declare const getCategoryShortcuts: ((state: ShortcutsState, categoryName: string) => string[]) & import("rememo").EnhancedSelector;
+export {};
+//# sourceMappingURL=selectors.d.ts.map

package/build-types/store/selectors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectors.d.ts","sourceRoot":"","sources":["../../src/store/selectors.ts"],"names":[],"mappings":"AAUA;;GAEG;AACH,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;AAExD,UAAU,aAAa;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,sBAAsB,CAAC;IACvC,OAAO,CAAC,EAAE,sBAAsB,EAAE,CAAC;IACnC,WAAW,EAAE,MAAM,CAAC;CACpB;AAED,KAAK,cAAc,GAAG,MAAM,CAAE,MAAM,EAAE,aAAa,CAAE,CAAC;AAQtD;;GAEG;AACH,QAAA,MAAM,kBAAkB;IACvB;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;CAEH,CAAC;AA0BF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,wBAAgB,yBAAyB,CACxC,KAAK,EAAE,cAAc,EACrB,IAAI,EAAE,MAAM,GACV,sBAAsB,GAAG,IAAI,CAE/B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,wBAAgB,yBAAyB,CACxC,KAAK,EAAE,cAAc,EACrB,IAAI,EAAE,MAAM,EACZ,cAAc,GAAE,MAAM,OAAO,kBAA8B,GACzD,MAAM,GAAG,IAAI,CAGf;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,sBAAsB,CACrC,KAAK,EAAE,cAAc,EACrB,IAAI,EAAE,MAAM,GACV,MAAM,GAAG,IAAI,CAEf;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,wBAAgB,kBAAkB,CACjC,KAAK,EAAE,cAAc,EACrB,IAAI,EAAE,MAAM,GACV,sBAAsB,EAAE,CAI1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,eAAO,MAAM,6BAA6B,2FAWzC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,eAAO,MAAM,gCAAgC,oFAQ5C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,oBAAoB,WACvB,cAAc,gBAAgB,MAAM,KAAI,MAAM,EAAE,qCAMzD,CAAC"}

package/build-types/store/types.d.ts

@@ -0,0 +1,9 @@
+import type { ShortcutKeyCombination } from './actions';
+export interface ShortcutState {
+    category: string;
+    keyCombination: ShortcutKeyCombination;
+    aliases?: ShortcutKeyCombination[];
+    description: string;
+}
+export type ShortcutsState = Record<string, ShortcutState>;
+//# sourceMappingURL=types.d.ts.map

package/build-types/store/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/store/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;AAExD,MAAM,WAAW,aAAa;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,sBAAsB,CAAC;IACvC,OAAO,CAAC,EAAE,sBAAsB,EAAE,CAAC;IACnC,WAAW,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,cAAc,GAAG,MAAM,CAAE,MAAM,EAAE,aAAa,CAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/keyboard-shortcuts",
-	"version": "5.44.0",
+	"version": "5.45.0",
 	"description": "Handling keyboard shortcuts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -13,7 +13,7 @@
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/WordPress/gutenberg.git",
-		"directory": "packages/keycodes"
+		"directory": "packages/keyboard-shortcuts"
 	},
 	"bugs": {
 		"url": "https://github.com/WordPress/gutenberg/issues"
@@ -33,6 +33,7 @@
 	"module": "build-module/index.mjs",
 	"exports": {
 		".": {
+			"types": "./build-types/index.d.ts",
 			"import": "./build-module/index.mjs",
 			"require": "./build/index.cjs"
 		},
@@ -40,10 +41,11 @@
 	},
 	"react-native": "src/index",
 	"wpScript": true,
+	"types": "build-types/index.d.ts",
 	"dependencies": {
-		"@wordpress/data": "^10.44.0",
-		"@wordpress/element": "^6.44.0",
-		"@wordpress/keycodes": "^4.44.0"
+		"@wordpress/data": "^10.45.0",
+		"@wordpress/element": "^6.45.0",
+		"@wordpress/keycodes": "^4.45.0"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0"
@@ -51,5 +53,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "b862d8c84121a47bbeff882f6c87e61681ce2e0d"
+	"gitHead": "8c229eaed0e88c9827e2da3d73a78f9ddd77714b"
 }

package/src/components/{shortcut-provider.js → shortcut-provider.tsx}

@@ -10,25 +10,35 @@ import { context } from '../context';
 
 const { Provider } = context;
 
+type ShortcutCallback = ( event: KeyboardEvent ) => void;
+
+interface ShortcutProviderProps extends React.HTMLAttributes< HTMLDivElement > {
+	onKeyDown?: ( event: React.KeyboardEvent< HTMLDivElement > ) => void;
+}
+
 /**
  * Handles callbacks added to context by `useShortcut`.
  * Adding a provider allows to register contextual shortcuts
  * that are only active when a certain part of the UI is focused.
  *
- * @param {Object} props Props to pass to `div`.
+ * @param props Props to pass to `div`.
  *
- * @return {Element} Component.
+ * @return Component.
  */
-export function ShortcutProvider( props ) {
-	const [ keyboardShortcuts ] = useState( () => new Set() );
+export function ShortcutProvider( props: ShortcutProviderProps ) {
+	const [ keyboardShortcuts ] = useState(
+		() => new Set< ShortcutCallback >()
+	);
 
-	function onKeyDown( event ) {
+	function onKeyDown( event: React.KeyboardEvent< HTMLDivElement > ) {
 		if ( props.onKeyDown ) {
 			props.onKeyDown( event );
 		}
 
+		// Convert React event to native KeyboardEvent for compatibility
+		const nativeEvent = event.nativeEvent;
 		for ( const keyboardShortcut of keyboardShortcuts ) {
-			keyboardShortcut( event );
+			keyboardShortcut( nativeEvent );
 		}
 	}
 

package/src/{context.js → context.ts}

@@ -3,21 +3,28 @@
  */
 import { createContext } from '@wordpress/element';
 
-const globalShortcuts = new Set();
-const globalListener = ( event ) => {
+type ShortcutCallback = ( event: KeyboardEvent ) => void;
+
+interface ShortcutContextType {
+	add: ( shortcut: ShortcutCallback ) => void;
+	delete: ( shortcut: ShortcutCallback ) => void;
+}
+
+const globalShortcuts = new Set< ShortcutCallback >();
+const globalListener = ( event: KeyboardEvent ) => {
 	for ( const keyboardShortcut of globalShortcuts ) {
 		keyboardShortcut( event );
 	}
 };
 
-export const context = createContext( {
-	add: ( shortcut ) => {
+export const context = createContext< ShortcutContextType >( {
+	add: ( shortcut: ShortcutCallback ) => {
 		if ( globalShortcuts.size === 0 ) {
 			document.addEventListener( 'keydown', globalListener );
 		}
 		globalShortcuts.add( shortcut );
 	},
-	delete: ( shortcut ) => {
+	delete: ( shortcut: ShortcutCallback ) => {
 		globalShortcuts.delete( shortcut );
 		if ( globalShortcuts.size === 0 ) {
 			document.removeEventListener( 'keydown', globalListener );

package/src/hooks/use-shortcut-event-match.ts

@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
+import { isKeyboardEvent } from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import { store as keyboardShortcutsStore } from '../store';
+
+/**
+ * Returns a function to check if a keyboard event matches a shortcut name.
+ *
+ * @return A function to check if a keyboard event matches a
+ *         predefined shortcut combination.
+ */
+export default function useShortcutEventMatch(): (
+	name: string,
+	event: KeyboardEvent
+) => boolean {
+	const { getAllShortcutKeyCombinations } = useSelect(
+		keyboardShortcutsStore
+	);
+
+	/**
+	 * A function to check if a keyboard event matches a predefined shortcut
+	 * combination.
+	 *
+	 * @param name  Shortcut name.
+	 * @param event Event to check.
+	 *
+	 * @return True if the event matches the shortcuts, false if not.
+	 */
+	return useCallback(
+		( name: string, event: KeyboardEvent ) => {
+			return getAllShortcutKeyCombinations( name ).some(
+				( combination ) => {
+					if ( ! combination ) {
+						return false;
+					}
+					return isKeyboardEvent[
+						combination.modifier ?? 'undefined'
+					]( event, combination.character );
+				}
+			);
+		},
+		[ getAllShortcutKeyCombinations ]
+	);
+}

package/src/hooks/{use-shortcut.js → use-shortcut.ts}

@@ -9,22 +9,26 @@ import { useContext, useEffect, useRef } from '@wordpress/element';
 import useShortcutEventMatch from './use-shortcut-event-match';
 import { context } from '../context';
 
+interface UseShortcutOptions {
+	isDisabled?: boolean;
+}
+
 /**
  * Attach a keyboard shortcut handler.
  *
- * @param {string}   name               Shortcut name.
- * @param {Function} callback           Shortcut callback.
- * @param {Object}   options            Shortcut options.
- * @param {boolean}  options.isDisabled Whether to disable to shortut.
+ * @param name               Shortcut name.
+ * @param callback           Shortcut callback.
+ * @param options            Shortcut options.
+ * @param options.isDisabled Whether to disable the shortcut.
  */
 export default function useShortcut(
-	name,
-	callback,
-	{ isDisabled = false } = {}
+	name: string,
+	callback: ( event: KeyboardEvent ) => void,
+	{ isDisabled = false }: UseShortcutOptions = {}
 ) {
 	const shortcuts = useContext( context );
 	const isMatch = useShortcutEventMatch();
-	const callbackRef = useRef();
+	const callbackRef = useRef< ( event: KeyboardEvent ) => void >();
 
 	useEffect( () => {
 		callbackRef.current = callback;
@@ -35,8 +39,8 @@ export default function useShortcut(
 			return;
 		}
 
-		function _callback( event ) {
-			if ( isMatch( name, event ) ) {
+		function _callback( event: KeyboardEvent ) {
+			if ( isMatch( name, event ) && callbackRef.current ) {
 				callbackRef.current( event );
 			}
 		}
@@ -45,5 +49,5 @@ export default function useShortcut(
 		return () => {
 			shortcuts.delete( _callback );
 		};
-	}, [ name, isDisabled, shortcuts ] );
+	}, [ name, isDisabled, shortcuts, isMatch ] );
 }

package/src/store/{actions.js → actions.ts}

@@ -1,30 +1,32 @@
-/** @typedef {import('@wordpress/keycodes').WPKeycodeModifier} WPKeycodeModifier */
+import type { WPKeycodeModifier } from '@wordpress/keycodes';
 
 /**
  * Keyboard key combination.
- *
- * @typedef {Object} WPShortcutKeyCombination
- *
- * @property {string}                      character Character.
- * @property {WPKeycodeModifier|undefined} modifier  Modifier.
  */
+export interface ShortcutKeyCombination {
+	character: string;
+	modifier: WPKeycodeModifier | undefined;
+}
 
 /**
  * Configuration of a registered keyboard shortcut.
- *
- * @typedef {Object} WPShortcutConfig
- *
- * @property {string}                     name           Shortcut name.
- * @property {string}                     category       Shortcut category.
- * @property {string}                     description    Shortcut description.
- * @property {WPShortcutKeyCombination}   keyCombination Shortcut key combination.
- * @property {WPShortcutKeyCombination[]} [aliases]      Shortcut aliases.
  */
+export interface ShortcutConfig {
+	name: string;
+	category: string;
+	description: string;
+	keyCombination: ShortcutKeyCombination;
+	aliases?: ShortcutKeyCombination[];
+}
+
+export type ShortcutAction =
+	| ReturnType< typeof registerShortcut >
+	| ReturnType< typeof unregisterShortcut >;
 
 /**
  * Returns an action object used to register a new keyboard shortcut.
  *
- * @param {WPShortcutConfig} config Shortcut config.
+ * @param {ShortcutConfig} config Shortcut config.
  *
  * @example
  *
@@ -72,9 +74,9 @@ export function registerShortcut( {
 	description,
 	keyCombination,
 	aliases,
-} ) {
+}: ShortcutConfig ) {
 	return {
-		type: 'REGISTER_SHORTCUT',
+		type: 'REGISTER_SHORTCUT' as const,
 		name,
 		category,
 		keyCombination,
@@ -120,9 +122,9 @@ export function registerShortcut( {
  *```
  * @return {Object} action.
  */
-export function unregisterShortcut( name ) {
+export function unregisterShortcut( name: string ) {
 	return {
-		type: 'UNREGISTER_SHORTCUT',
+		type: 'UNREGISTER_SHORTCUT' as const,
 		name,
 	};
 }

package/src/store/{index.js → index.ts}

@@ -16,8 +16,6 @@ const STORE_NAME = 'core/keyboard-shortcuts';
  * Store definition for the keyboard shortcuts namespace.
  *
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore
- *
- * @type {Object}
  */
 export const store = createReduxStore( STORE_NAME, {
 	reducer,

package/src/store/{reducer.js → reducer.ts}

@@ -1,12 +1,21 @@
+/**
+ * Internal dependencies
+ */
+import type { ShortcutAction } from './actions';
+import type { ShortcutsState } from './types';
+
 /**
  * Reducer returning the registered shortcuts
  *
- * @param {Object} state  Current state.
- * @param {Object} action Dispatched action.
+ * @param state  Current state.
+ * @param action Dispatched action.
  *
- * @return {Object} Updated state.
+ * @return Updated state.
  */
-function reducer( state = {}, action ) {
+function reducer(
+	state: ShortcutsState = {},
+	action: ShortcutAction
+): ShortcutsState {
 	switch ( action.type ) {
 		case 'REGISTER_SHORTCUT':
 			return {