Add keycodes package

.eslintrc.js

@@ -78,6 +78,10 @@ module.exports = {
 				selector: 'ImportDeclaration[source.value=/^element$/]',
 				message: 'Use @wordpress/element as import path instead.',
 			},
+			{
+				selector: 'ImportDeclaration[source.value=/^keycodes$/]',
+				message: 'Use @wordpress/keycodes as import path instead.',
+			},
 			{
 				selector: 'ImportDeclaration[source.value=/^utils$/]',
 				message: 'Use @wordpress/utils as import path instead.',

components/autocomplete/index.js

@@ -8,7 +8,7 @@ import { escapeRegExp, find, filter, map, debounce } from 'lodash';
  * WordPress dependencies
  */
 import { Component, compose, renderToString } from '@wordpress/element';
-import { keycodes } from '@wordpress/utils';
+import { ENTER, ESCAPE, UP, DOWN, LEFT, RIGHT, SPACE } from '@wordpress/keycodes';
 import { __, _n, sprintf } from '@wordpress/i18n';
 
 /**
@@ -21,8 +21,6 @@ import Popover from '../popover';
 import withInstanceId from '../higher-order/with-instance-id';
 import withSpokenMessages from '../higher-order/with-spoken-messages';
 
-const { ENTER, ESCAPE, UP, DOWN, LEFT, RIGHT, SPACE } = keycodes;
-
 /**
  * A raw completer option.
  * @typedef {*} CompleterOption

components/autocomplete/test/index.js

@@ -8,15 +8,13 @@ import { noop } from 'lodash';
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { keycodes } from '@wordpress/utils';
+import { ENTER, ESCAPE, UP, DOWN, SPACE } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
 import EnhancedAutocomplete, { Autocomplete } from '../';
 
-const { ENTER, ESCAPE, UP, DOWN, SPACE } = keycodes;
-
 jest.useFakeTimers();
 
 class FakeEditor extends Component {

components/code-editor/editor.js

@@ -2,12 +2,7 @@
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { keycodes } from '@wordpress/utils';
-
-/**
- * Module constants
- */
-const { UP, DOWN } = keycodes;
+import { UP, DOWN } from '@wordpress/utils';
 
 class CodeEditor extends Component {
 	constructor() {

components/dropdown-menu/index.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { keycodes } from '@wordpress/utils';
+import { DOWN } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -17,8 +17,6 @@ import Dashicon from '../dashicon';
 import Dropdown from '../dropdown';
 import { NavigableMenu } from '../navigable-container';
 
-const { DOWN } = keycodes;
-
 function DropdownMenu( {
 	icon = 'menu',
 	label,

components/dropdown-menu/test/index.js

@@ -6,15 +6,13 @@ import { shallow, mount } from 'enzyme';
 /**
  * WordPress dependencies
  */
-import { keycodes } from '@wordpress/utils';
+import { DOWN } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
 import DropdownMenu from '../';
 
-const { DOWN } = keycodes;
-
 describe( 'DropdownMenu', () => {
 	let controls;
 	beforeEach( () => {

components/navigable-container/index.js

@@ -8,12 +8,7 @@ import { omit, noop, includes } from 'lodash';
  */
 import { Component } from '@wordpress/element';
 import { focus } from '@wordpress/dom';
-import { keycodes } from '@wordpress/utils';
-
-/**
- * Module constants
- */
-const { UP, DOWN, LEFT, RIGHT, TAB } = keycodes;
+import { UP, DOWN, LEFT, RIGHT, TAB } from '@wordpress/keycodes';
 
 function cycleValue( value, total, offset ) {
 	const nextValue = value + offset;

components/navigable-container/test/index.js

@@ -7,15 +7,13 @@ import { each } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { keycodes } from '@wordpress/utils';
+import { UP, DOWN, TAB, LEFT, RIGHT, SPACE } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
 import { TabbableContainer, NavigableMenu } from '../';
 
-const { UP, DOWN, TAB, LEFT, RIGHT, SPACE } = keycodes;
-
 function simulateVisible( wrapper, selector ) {
 	const elements = wrapper.getDOMNode().querySelectorAll( selector );
 	each( elements, ( elem ) => {

components/popover/index.js

@@ -10,7 +10,7 @@ import { noop } from 'lodash';
 import { Component, createRef } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
 import { focus } from '@wordpress/dom';
-import { keycodes } from '@wordpress/utils';
+import { ESCAPE } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -25,8 +25,6 @@ import { Slot, Fill } from '../slot-fill';
 
 const FocusManaged = withFocusReturn( ( { children } ) => children );
 
-const { ESCAPE } = keycodes;
-
 /**
  * Name of slot in which popover should fill.
  *

core-blocks/block/edit-panel/index.js

@@ -4,18 +4,13 @@
 import { Button, withInstanceId } from '@wordpress/components';
 import { Component, Fragment, createRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { keycodes } from '@wordpress/utils';
+import { ESCAPE } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 
-/**
- * Module constants
- */
-const { ESCAPE } = keycodes;
-
 class SharedBlockEditPanel extends Component {
 	constructor() {
 		super( ...arguments );

core-blocks/freeform/edit.js

@@ -3,15 +3,13 @@
  */
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { keycodes } from '@wordpress/utils';
+import { BACKSPACE, DELETE, F10 } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
 import './editor.scss';
 
-const { BACKSPACE, DELETE, F10 } = keycodes;
-
 function isTmceEmpty( editor ) {
 	// When tinyMce is empty the content seems to be:
 	// <p><br data-mce-bogus="1"></p>

core-blocks/gallery/gallery-image.js

@@ -9,15 +9,10 @@ import classnames from 'classnames';
 import { Component } from '@wordpress/element';
 import { IconButton, Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { keycodes } from '@wordpress/utils';
+import { BACKSPACE, DELETE } from '@wordpress/keycodes';
 import { withSelect } from '@wordpress/data';
 import { RichText } from '@wordpress/editor';
 
-/**
- * Module constants
- */
-const { BACKSPACE, DELETE } = keycodes;
-
 class GalleryImage extends Component {
 	constructor() {
 		super( ...arguments );

docs/reference/deprecated.md

@@ -8,6 +8,7 @@ Gutenberg's deprecation policy is intended to support backwards-compatibility fo
  - `blocks.BlockEdit` filter removed. Please use `editor.BlockEdit` instead.
  - `blocks.BlockListBlock` filter removed. Please use `editor.BlockListBlock` instead.
  - `blocks.MediaUpload` filter removed. Please use `editor.MediaUpload` instead.
+ - `wp.utils.keycodes` utilities are removed. Please use `wp.keycodes` instead.
 
 ## 3.2.0
 

edit-post/keyboard-shortcuts.js

@@ -1,9 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { keycodes } from '@wordpress/utils';
-
-const { rawShortcut, displayShortcut } = keycodes;
+import { rawShortcut, displayShortcut } from '@wordpress/keycodes';
 
 export default {
 	toggleEditorMode: {

editor/components/block-list/block.js

@@ -15,7 +15,7 @@ import {
 	placeCaretAtHorizontalEdge,
 	placeCaretAtVerticalEdge,
 } from '@wordpress/dom';
-import { keycodes } from '@wordpress/utils';
+import { BACKSPACE, DELETE, ENTER } from '@wordpress/keycodes';
 import {
 	createBlock,
 	cloneBlock,
@@ -51,8 +51,6 @@ import InserterWithShortcuts from '../inserter-with-shortcuts';
 import Inserter from '../inserter';
 import withHoverAreas from './with-hover-areas';
 
-const { BACKSPACE, DELETE, ENTER } = keycodes;
-
 export class BlockListBlock extends Component {
 	constructor() {
 		super( ...arguments );

editor/components/block-switcher/index.js

@@ -10,7 +10,7 @@ import { __ } from '@wordpress/i18n';
 import { Dropdown, IconButton, Toolbar, PanelBody } from '@wordpress/components';
 import { getBlockType, getPossibleBlockTransformations, switchToBlockType, hasChildBlocks } from '@wordpress/blocks';
 import { compose, Component, Fragment } from '@wordpress/element';
-import { keycodes } from '@wordpress/utils';
+import { DOWN } from '@wordpress/keycodes';
 import { withSelect, withDispatch } from '@wordpress/data';
 
 /**
@@ -22,11 +22,6 @@ import BlockStyles from '../block-styles';
 import BlockPreview from '../block-preview';
 import BlockTypesList from '../block-types-list';
 
-/**
- * Module Constants
- */
-const { DOWN } = keycodes;
-
 export class BlockSwitcher extends Component {
 	constructor() {
 		super( ...arguments );

editor/components/block-switcher/test/index.js

@@ -7,15 +7,13 @@ import { shallow } from 'enzyme';
  * WordPress dependencies
  */
 import { registerCoreBlocks } from '@wordpress/core-blocks';
-import { keycodes } from '@wordpress/utils';
+import { DOWN } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
 import { BlockSwitcher } from '../';
 
-const { DOWN } = keycodes;
-
 describe( 'BlockSwitcher', () => {
 	const headingBlock1 = {
 		attributes: {

editor/components/editor-global-keyboard-shortcuts/index.js

@@ -9,9 +9,7 @@ import { first, last } from 'lodash';
 import { Component, Fragment, compose } from '@wordpress/element';
 import { KeyboardShortcuts } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
-import { keycodes } from '@wordpress/utils';
-
-const { rawShortcut } = keycodes;
+import { rawShortcut } from '@wordpress/keycodes';
 
 class EditorGlobalKeyboardShortcuts extends Component {
 	constructor() {

editor/components/editor-history/redo.js

@@ -5,9 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { IconButton } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/element';
-import { keycodes } from '@wordpress/utils';
-
-const { displayShortcut } = keycodes;
+import { displayShortcut } from '@wordpress/keycodes';
 
 function EditorHistoryRedo( { hasRedo, redo } ) {
 	return (

editor/components/editor-history/undo.js

@@ -5,9 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { IconButton } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/element';
-import { keycodes } from '@wordpress/utils';
-
-const { displayShortcut } = keycodes;
+import { displayShortcut } from '@wordpress/keycodes';
 
 function EditorHistoryUndo( { hasUndo, undo } ) {
 	return (

editor/components/navigable-toolbar/index.js

@@ -9,19 +9,14 @@ import { cond, matchesProperty } from 'lodash';
 import { NavigableMenu, KeyboardShortcuts } from '@wordpress/components';
 import { Component, findDOMNode } from '@wordpress/element';
 import { focus } from '@wordpress/dom';
-import { keycodes } from '@wordpress/utils';
+import { ESCAPE } from '@wordpress/keycodes';
 
 /**
  * Browser dependencies
  */
 
 const { Node, getSelection } = window;
 
-/**
- * Module Constants
- */
-const { ESCAPE } = keycodes;
-
 class NavigableToolbar extends Component {
 	constructor() {
 		super( ...arguments );

editor/components/observe-typing/index.js

@@ -9,11 +9,9 @@ import { includes } from 'lodash';
 import { Component, compose } from '@wordpress/element';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { isTextField } from '@wordpress/dom';
-import { keycodes } from '@wordpress/utils';
+import { UP, RIGHT, DOWN, LEFT, ENTER, BACKSPACE } from '@wordpress/keycodes';
 import { withSafeTimeout } from '@wordpress/components';
 
-const { UP, RIGHT, DOWN, LEFT, ENTER, BACKSPACE } = keycodes;
-
 /**
  * Set of key codes upon which typing is to be initiated on a keydown event.
  *

editor/components/post-saved-state/index.js

@@ -10,16 +10,14 @@ import { __ } from '@wordpress/i18n';
 import { Dashicon, IconButton, withSafeTimeout } from '@wordpress/components';
 import { Component, compose } from '@wordpress/element';
 import { withSelect, withDispatch } from '@wordpress/data';
-import { keycodes } from '@wordpress/utils';
+import { displayShortcut } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 import PostSwitchToDraftButton from '../post-switch-to-draft-button';
 
-const { displayShortcut } = keycodes;
-
 /**
  * Component showing whether the post is saved or not and displaying save links.
  *

editor/components/post-title/index.js

@@ -10,7 +10,8 @@ import { get } from 'lodash';
  */
 import { __ } from '@wordpress/i18n';
 import { Component, compose } from '@wordpress/element';
-import { keycodes, decodeEntities } from '@wordpress/utils';
+import { decodeEntities } from '@wordpress/utils';
+import { ENTER } from '@wordpress/keycodes';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { KeyboardShortcuts, withInstanceId, withFocusOutside } from '@wordpress/components';
 
@@ -25,7 +26,6 @@ import PostTypeSupportCheck from '../post-type-support-check';
  * Constants
  */
 const REGEXP_NEWLINES = /[\r\n]+/g;
-const { ENTER } = keycodes;
 
 class PostTitle extends Component {
 	constructor() {

editor/components/rich-text/format-toolbar/index.js

@@ -11,7 +11,7 @@ import {
 	withSpokenMessages,
 	Popover,
 } from '@wordpress/components';
-import { keycodes } from '@wordpress/utils';
+import { ESCAPE, LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER, displayShortcut } from '@wordpress/keycodes';
 import { prependHTTP } from '@wordpress/url';
 
 /**
@@ -21,8 +21,6 @@ import './style.scss';
 import UrlInput from '../../url-input';
 import { filterURLForDisplay } from '../../../utils/url';
 
-const { ESCAPE, LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER, displayShortcut } = keycodes;
-
 const FORMATTING_CONTROLS = [
 	{
 		icon: 'editor-bold',