@wordpress/keyboard-shortcuts 3.0.2 → 3.0.3

package/README.md

@@ -10,12 +10,24 @@ Install the module
 npm install @wordpress/keyboard-shortcuts --save
 ```
 
-_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._
+_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for such language features and APIs, you should include [the polyfill shipped in `@wordpress/babel-preset-default`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/babel-preset-default#polyfill) in your code._
 
 ## API
 
 <!-- START TOKEN(Autogenerated API docs) -->
 
+### ShortcutProvider
+
+Handles callbacks added to context by `useShortcut`.
+
+_Parameters_
+
+-   _props_ `Object`: Props to pass to `div`.
+
+_Returns_
+
+-   `import('@wordpress/element').WPElement`: Component.
+
 ### store
 
 Store definition for the keyboard shortcuts namespace.
@@ -37,6 +49,7 @@ _Parameters_
 -   _name_ `string`: Shortcut name.
 -   _callback_ `Function`: Shortcut callback.
 -   _options_ `Object`: Shortcut options.
+-   _options.isDisabled_ `boolean`: Whether to disable to shortut.
 
 <!-- END TOKEN(Autogenerated API docs) -->
 

package/build/components/shortcut-provider.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ShortcutProvider = ShortcutProvider;
+
+var _element = require("@wordpress/element");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _context = require("../context");
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+const {
+  Provider
+} = _context.context;
+/**
+ * Handles callbacks added to context by `useShortcut`.
+ *
+ * @param {Object} props Props to pass to `div`.
+ *
+ * @return {import('@wordpress/element').WPElement} Component.
+ */
+
+function ShortcutProvider(props) {
+  const keyboardShortcuts = (0, _element.useRef)(new Set());
+
+  function onKeyDown(event) {
+    if (props.onKeyDown) props.onKeyDown(event);
+
+    for (const keyboardShortcut of keyboardShortcuts.current) {
+      keyboardShortcut(event);
+    }
+  }
+  /* eslint-disable jsx-a11y/no-static-element-interactions */
+
+
+  return (0, _element.createElement)(Provider, {
+    value: keyboardShortcuts
+  }, (0, _element.createElement)("div", (0, _extends2.default)({}, props, {
+    onKeyDown: onKeyDown
+  })));
+  /* eslint-enable jsx-a11y/no-static-element-interactions */
+}
+//# sourceMappingURL=shortcut-provider.js.map

package/build/components/shortcut-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/keyboard-shortcuts/src/components/shortcut-provider.js"],"names":["Provider","context","ShortcutProvider","props","keyboardShortcuts","Set","onKeyDown","event","keyboardShortcut","current"],"mappings":";;;;;;;;;AAGA;;;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAGA,MAAM;AAAEA,EAAAA;AAAF,IAAeC,gBAArB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACO,SAASC,gBAAT,CAA2BC,KAA3B,EAAmC;AACzC,QAAMC,iBAAiB,GAAG,qBAAQ,IAAIC,GAAJ,EAAR,CAA1B;;AAEA,WAASC,SAAT,CAAoBC,KAApB,EAA4B;AAC3B,QAAKJ,KAAK,CAACG,SAAX,EAAuBH,KAAK,CAACG,SAAN,CAAiBC,KAAjB;;AAEvB,SAAM,MAAMC,gBAAZ,IAAgCJ,iBAAiB,CAACK,OAAlD,EAA4D;AAC3DD,MAAAA,gBAAgB,CAAED,KAAF,CAAhB;AACA;AACD;AAED;;;AACA,SACC,4BAAC,QAAD;AAAU,IAAA,KAAK,EAAGH;AAAlB,KACC,8DAAUD,KAAV;AAAkB,IAAA,SAAS,EAAGG;AAA9B,KADD,CADD;AAKA;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { context } from '../context';\n\nconst { Provider } = context;\n\n/**\n * Handles callbacks added to context by `useShortcut`.\n *\n * @param {Object} props Props to pass to `div`.\n *\n * @return {import('@wordpress/element').WPElement} Component.\n */\nexport function ShortcutProvider( props ) {\n\tconst keyboardShortcuts = useRef( new Set() );\n\n\tfunction onKeyDown( event ) {\n\t\tif ( props.onKeyDown ) props.onKeyDown( event );\n\n\t\tfor ( const keyboardShortcut of keyboardShortcuts.current ) {\n\t\t\tkeyboardShortcut( event );\n\t\t}\n\t}\n\n\t/* eslint-disable jsx-a11y/no-static-element-interactions */\n\treturn (\n\t\t<Provider value={ keyboardShortcuts }>\n\t\t\t<div { ...props } onKeyDown={ onKeyDown } />\n\t\t</Provider>\n\t);\n\t/* eslint-enable jsx-a11y/no-static-element-interactions */\n}\n"]}

package/build/context.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.context = void 0;
+
+var _element = require("@wordpress/element");
+
+/**
+ * WordPress dependencies
+ */
+const context = (0, _element.createContext)();
+exports.context = context;
+//# sourceMappingURL=context.js.map

package/build/context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/keyboard-shortcuts/src/context.js"],"names":["context"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;AAGO,MAAMA,OAAO,GAAG,6BAAhB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\nexport const context = createContext();\n"]}

package/build/hooks/use-shortcut.js

@@ -1,15 +1,17 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = useShortcut;
 
-var _data = require("@wordpress/data");
+var _element = require("@wordpress/element");
 
-var _compose = require("@wordpress/compose");
+var _useShortcutEventMatch = _interopRequireDefault(require("./use-shortcut-event-match"));
 
-var _store = require("../store");
+var _context = require("../context");
 
 /**
  * WordPress dependencies
@@ -22,17 +24,33 @@ var _store = require("../store");
 /**
  * Attach a keyboard shortcut handler.
  *
- * @param {string}   name     Shortcut name.
- * @param {Function} callback Shortcut callback.
- * @param {Object}   options  Shortcut options.
+ * @param {string}   name               Shortcut name.
+ * @param {Function} callback           Shortcut callback.
+ * @param {Object}   options            Shortcut options.
+ * @param {boolean}  options.isDisabled Whether to disable to shortut.
  */
-function useShortcut(name, callback, options) {
-  const shortcuts = (0, _data.useSelect)(select => {
-    return select(_store.store).getAllShortcutRawKeyCombinations(name);
-  }, [name]);
-  (0, _compose.useKeyboardShortcut)(shortcuts, callback, options);
+function useShortcut(name, callback, {
+  isDisabled
+} = {}) {
+  const shortcuts = (0, _element.useContext)(_context.context);
+  const isMatch = (0, _useShortcutEventMatch.default)();
+  const callbackRef = (0, _element.useRef)();
+  callbackRef.current = callback;
+  (0, _element.useEffect)(() => {
+    if (isDisabled) {
+      return;
+    }
+
+    function _callback(event) {
+      if (isMatch(name, event)) {
+        callbackRef.current(event);
+      }
+    }
+
+    shortcuts.current.add(_callback);
+    return () => {
+      shortcuts.current.delete(_callback);
+    };
+  }, [name, isDisabled]);
 }
-
-var _default = useShortcut;
-exports.default = _default;
 //# sourceMappingURL=use-shortcut.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/keyboard-shortcuts/src/hooks/use-shortcut.js"],"names":["useShortcut","name","callback","options","shortcuts","select","keyboardShortcutsStore","getAllShortcutRawKeyCombinations"],"mappings":";;;;;;;AAGA;;AACA;;AAKA;;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,WAAT,CAAsBC,IAAtB,EAA4BC,QAA5B,EAAsCC,OAAtC,EAAgD;AAC/C,QAAMC,SAAS,GAAG,qBACfC,MAAF,IAAc;AACb,WAAOA,MAAM,CACZC,YADY,CAAN,CAELC,gCAFK,CAE6BN,IAF7B,CAAP;AAGA,GALgB,EAMjB,CAAEA,IAAF,CANiB,CAAlB;AASA,oCAAqBG,SAArB,EAAgCF,QAAhC,EAA0CC,OAA1C;AACA;;eAEcH,W","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { useKeyboardShortcut } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { store as keyboardShortcutsStore } from '../store';\n\n/**\n * Attach a keyboard shortcut handler.\n *\n * @param {string}   name     Shortcut name.\n * @param {Function} callback Shortcut callback.\n * @param {Object}   options  Shortcut options.\n */\nfunction useShortcut( name, callback, options ) {\n\tconst shortcuts = useSelect(\n\t\t( select ) => {\n\t\t\treturn select(\n\t\t\t\tkeyboardShortcutsStore\n\t\t\t).getAllShortcutRawKeyCombinations( name );\n\t\t},\n\t\t[ name ]\n\t);\n\n\tuseKeyboardShortcut( shortcuts, callback, options );\n}\n\nexport default useShortcut;\n"]}
+{"version":3,"sources":["@wordpress/keyboard-shortcuts/src/hooks/use-shortcut.js"],"names":["useShortcut","name","callback","isDisabled","shortcuts","context","isMatch","callbackRef","current","_callback","event","add","delete"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASA,WAAT,CAAsBC,IAAtB,EAA4BC,QAA5B,EAAsC;AAAEC,EAAAA;AAAF,IAAiB,EAAvD,EAA4D;AAC1E,QAAMC,SAAS,GAAG,yBAAYC,gBAAZ,CAAlB;AACA,QAAMC,OAAO,GAAG,qCAAhB;AACA,QAAMC,WAAW,GAAG,sBAApB;AACAA,EAAAA,WAAW,CAACC,OAAZ,GAAsBN,QAAtB;AAEA,0BAAW,MAAM;AAChB,QAAKC,UAAL,EAAkB;AACjB;AACA;;AAED,aAASM,SAAT,CAAoBC,KAApB,EAA4B;AAC3B,UAAKJ,OAAO,CAAEL,IAAF,EAAQS,KAAR,CAAZ,EAA8B;AAC7BH,QAAAA,WAAW,CAACC,OAAZ,CAAqBE,KAArB;AACA;AACD;;AAEDN,IAAAA,SAAS,CAACI,OAAV,CAAkBG,GAAlB,CAAuBF,SAAvB;AACA,WAAO,MAAM;AACZL,MAAAA,SAAS,CAACI,OAAV,CAAkBI,MAAlB,CAA0BH,SAA1B;AACA,KAFD;AAGA,GAfD,EAeG,CAAER,IAAF,EAAQE,UAAR,CAfH;AAgBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useShortcutEventMatch from './use-shortcut-event-match';\nimport { context } from '../context';\n\n/**\n * Attach a keyboard shortcut handler.\n *\n * @param {string}   name               Shortcut name.\n * @param {Function} callback           Shortcut callback.\n * @param {Object}   options            Shortcut options.\n * @param {boolean}  options.isDisabled Whether to disable to shortut.\n */\nexport default function useShortcut( name, callback, { isDisabled } = {} ) {\n\tconst shortcuts = useContext( context );\n\tconst isMatch = useShortcutEventMatch();\n\tconst callbackRef = useRef();\n\tcallbackRef.current = callback;\n\n\tuseEffect( () => {\n\t\tif ( isDisabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tfunction _callback( event ) {\n\t\t\tif ( isMatch( name, event ) ) {\n\t\t\t\tcallbackRef.current( event );\n\t\t\t}\n\t\t}\n\n\t\tshortcuts.current.add( _callback );\n\t\treturn () => {\n\t\t\tshortcuts.current.delete( _callback );\n\t\t};\n\t}, [ name, isDisabled ] );\n}\n"]}

package/build/index.js

@@ -17,6 +17,12 @@ Object.defineProperty(exports, "useShortcut", {
     return _useShortcut.default;
   }
 });
+Object.defineProperty(exports, "ShortcutProvider", {
+  enumerable: true,
+  get: function () {
+    return _shortcutProvider.ShortcutProvider;
+  }
+});
 Object.defineProperty(exports, "__unstableUseShortcutEventMatch", {
   enumerable: true,
   get: function () {
@@ -28,5 +34,7 @@ var _store = require("./store");
 
 var _useShortcut = _interopRequireDefault(require("./hooks/use-shortcut"));
 
+var _shortcutProvider = require("./components/shortcut-provider");
+
 var _useShortcutEventMatch = _interopRequireDefault(require("./hooks/use-shortcut-event-match"));
 //# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/keyboard-shortcuts/src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA","sourcesContent":["export { store } from './store';\nexport { default as useShortcut } from './hooks/use-shortcut';\nexport { default as __unstableUseShortcutEventMatch } from './hooks/use-shortcut-event-match';\n"]}
+{"version":3,"sources":["@wordpress/keyboard-shortcuts/src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA","sourcesContent":["export { store } from './store';\nexport { default as useShortcut } from './hooks/use-shortcut';\nexport { ShortcutProvider } from './components/shortcut-provider';\nexport { default as __unstableUseShortcutEventMatch } from './hooks/use-shortcut-event-match';\n"]}

package/build-module/components/shortcut-provider.js

@@ -0,0 +1,44 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { createElement } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+
+import { context } from '../context';
+const {
+  Provider
+} = context;
+/**
+ * Handles callbacks added to context by `useShortcut`.
+ *
+ * @param {Object} props Props to pass to `div`.
+ *
+ * @return {import('@wordpress/element').WPElement} Component.
+ */
+
+export function ShortcutProvider(props) {
+  const keyboardShortcuts = useRef(new Set());
+
+  function onKeyDown(event) {
+    if (props.onKeyDown) props.onKeyDown(event);
+
+    for (const keyboardShortcut of keyboardShortcuts.current) {
+      keyboardShortcut(event);
+    }
+  }
+  /* eslint-disable jsx-a11y/no-static-element-interactions */
+
+
+  return createElement(Provider, {
+    value: keyboardShortcuts
+  }, createElement("div", _extends({}, props, {
+    onKeyDown: onKeyDown
+  })));
+  /* eslint-enable jsx-a11y/no-static-element-interactions */
+}
+//# sourceMappingURL=shortcut-provider.js.map

package/build-module/components/shortcut-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/keyboard-shortcuts/src/components/shortcut-provider.js"],"names":["useRef","context","Provider","ShortcutProvider","props","keyboardShortcuts","Set","onKeyDown","event","keyboardShortcut","current"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,MAAT,QAAuB,oBAAvB;AAEA;AACA;AACA;;AACA,SAASC,OAAT,QAAwB,YAAxB;AAEA,MAAM;AAAEC,EAAAA;AAAF,IAAeD,OAArB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASE,gBAAT,CAA2BC,KAA3B,EAAmC;AACzC,QAAMC,iBAAiB,GAAGL,MAAM,CAAE,IAAIM,GAAJ,EAAF,CAAhC;;AAEA,WAASC,SAAT,CAAoBC,KAApB,EAA4B;AAC3B,QAAKJ,KAAK,CAACG,SAAX,EAAuBH,KAAK,CAACG,SAAN,CAAiBC,KAAjB;;AAEvB,SAAM,MAAMC,gBAAZ,IAAgCJ,iBAAiB,CAACK,OAAlD,EAA4D;AAC3DD,MAAAA,gBAAgB,CAAED,KAAF,CAAhB;AACA;AACD;AAED;;;AACA,SACC,cAAC,QAAD;AAAU,IAAA,KAAK,EAAGH;AAAlB,KACC,kCAAUD,KAAV;AAAkB,IAAA,SAAS,EAAGG;AAA9B,KADD,CADD;AAKA;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { context } from '../context';\n\nconst { Provider } = context;\n\n/**\n * Handles callbacks added to context by `useShortcut`.\n *\n * @param {Object} props Props to pass to `div`.\n *\n * @return {import('@wordpress/element').WPElement} Component.\n */\nexport function ShortcutProvider( props ) {\n\tconst keyboardShortcuts = useRef( new Set() );\n\n\tfunction onKeyDown( event ) {\n\t\tif ( props.onKeyDown ) props.onKeyDown( event );\n\n\t\tfor ( const keyboardShortcut of keyboardShortcuts.current ) {\n\t\t\tkeyboardShortcut( event );\n\t\t}\n\t}\n\n\t/* eslint-disable jsx-a11y/no-static-element-interactions */\n\treturn (\n\t\t<Provider value={ keyboardShortcuts }>\n\t\t\t<div { ...props } onKeyDown={ onKeyDown } />\n\t\t</Provider>\n\t);\n\t/* eslint-enable jsx-a11y/no-static-element-interactions */\n}\n"]}

package/build-module/context.js

@@ -0,0 +1,6 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+export const context = createContext();
+//# sourceMappingURL=context.js.map

package/build-module/context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/keyboard-shortcuts/src/context.js"],"names":["createContext","context"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAT,QAA8B,oBAA9B;AAEA,OAAO,MAAMC,OAAO,GAAGD,aAAa,EAA7B","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\nexport const context = createContext();\n"]}

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

@@ -1,27 +1,44 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
-import { useKeyboardShortcut } from '@wordpress/compose';
+import { useContext, useEffect, useRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
 
-import { store as keyboardShortcutsStore } from '../store';
+import useShortcutEventMatch from './use-shortcut-event-match';
+import { context } from '../context';
 /**
  * Attach a keyboard shortcut handler.
  *
- * @param {string}   name     Shortcut name.
- * @param {Function} callback Shortcut callback.
- * @param {Object}   options  Shortcut options.
+ * @param {string}   name               Shortcut name.
+ * @param {Function} callback           Shortcut callback.
+ * @param {Object}   options            Shortcut options.
+ * @param {boolean}  options.isDisabled Whether to disable to shortut.
  */
 
-function useShortcut(name, callback, options) {
-  const shortcuts = useSelect(select => {
-    return select(keyboardShortcutsStore).getAllShortcutRawKeyCombinations(name);
-  }, [name]);
-  useKeyboardShortcut(shortcuts, callback, options);
-}
+export default function useShortcut(name, callback, {
+  isDisabled
+} = {}) {
+  const shortcuts = useContext(context);
+  const isMatch = useShortcutEventMatch();
+  const callbackRef = useRef();
+  callbackRef.current = callback;
+  useEffect(() => {
+    if (isDisabled) {
+      return;
+    }
+
+    function _callback(event) {
+      if (isMatch(name, event)) {
+        callbackRef.current(event);
+      }
+    }
 
-export default useShortcut;
+    shortcuts.current.add(_callback);
+    return () => {
+      shortcuts.current.delete(_callback);
+    };
+  }, [name, isDisabled]);
+}
 //# sourceMappingURL=use-shortcut.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/keyboard-shortcuts/src/hooks/use-shortcut.js"],"names":["useSelect","useKeyboardShortcut","store","keyboardShortcutsStore","useShortcut","name","callback","options","shortcuts","select","getAllShortcutRawKeyCombinations"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAT,QAA0B,iBAA1B;AACA,SAASC,mBAAT,QAAoC,oBAApC;AAEA;AACA;AACA;;AACA,SAASC,KAAK,IAAIC,sBAAlB,QAAgD,UAAhD;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASC,WAAT,CAAsBC,IAAtB,EAA4BC,QAA5B,EAAsCC,OAAtC,EAAgD;AAC/C,QAAMC,SAAS,GAAGR,SAAS,CACxBS,MAAF,IAAc;AACb,WAAOA,MAAM,CACZN,sBADY,CAAN,CAELO,gCAFK,CAE6BL,IAF7B,CAAP;AAGA,GALyB,EAM1B,CAAEA,IAAF,CAN0B,CAA3B;AASAJ,EAAAA,mBAAmB,CAAEO,SAAF,EAAaF,QAAb,EAAuBC,OAAvB,CAAnB;AACA;;AAED,eAAeH,WAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { useKeyboardShortcut } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { store as keyboardShortcutsStore } from '../store';\n\n/**\n * Attach a keyboard shortcut handler.\n *\n * @param {string}   name     Shortcut name.\n * @param {Function} callback Shortcut callback.\n * @param {Object}   options  Shortcut options.\n */\nfunction useShortcut( name, callback, options ) {\n\tconst shortcuts = useSelect(\n\t\t( select ) => {\n\t\t\treturn select(\n\t\t\t\tkeyboardShortcutsStore\n\t\t\t).getAllShortcutRawKeyCombinations( name );\n\t\t},\n\t\t[ name ]\n\t);\n\n\tuseKeyboardShortcut( shortcuts, callback, options );\n}\n\nexport default useShortcut;\n"]}
+{"version":3,"sources":["@wordpress/keyboard-shortcuts/src/hooks/use-shortcut.js"],"names":["useContext","useEffect","useRef","useShortcutEventMatch","context","useShortcut","name","callback","isDisabled","shortcuts","isMatch","callbackRef","current","_callback","event","add","delete"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,UAAT,EAAqBC,SAArB,EAAgCC,MAAhC,QAA8C,oBAA9C;AAEA;AACA;AACA;;AACA,OAAOC,qBAAP,MAAkC,4BAAlC;AACA,SAASC,OAAT,QAAwB,YAAxB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,eAAe,SAASC,WAAT,CAAsBC,IAAtB,EAA4BC,QAA5B,EAAsC;AAAEC,EAAAA;AAAF,IAAiB,EAAvD,EAA4D;AAC1E,QAAMC,SAAS,GAAGT,UAAU,CAAEI,OAAF,CAA5B;AACA,QAAMM,OAAO,GAAGP,qBAAqB,EAArC;AACA,QAAMQ,WAAW,GAAGT,MAAM,EAA1B;AACAS,EAAAA,WAAW,CAACC,OAAZ,GAAsBL,QAAtB;AAEAN,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAKO,UAAL,EAAkB;AACjB;AACA;;AAED,aAASK,SAAT,CAAoBC,KAApB,EAA4B;AAC3B,UAAKJ,OAAO,CAAEJ,IAAF,EAAQQ,KAAR,CAAZ,EAA8B;AAC7BH,QAAAA,WAAW,CAACC,OAAZ,CAAqBE,KAArB;AACA;AACD;;AAEDL,IAAAA,SAAS,CAACG,OAAV,CAAkBG,GAAlB,CAAuBF,SAAvB;AACA,WAAO,MAAM;AACZJ,MAAAA,SAAS,CAACG,OAAV,CAAkBI,MAAlB,CAA0BH,SAA1B;AACA,KAFD;AAGA,GAfQ,EAeN,CAAEP,IAAF,EAAQE,UAAR,CAfM,CAAT;AAgBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useShortcutEventMatch from './use-shortcut-event-match';\nimport { context } from '../context';\n\n/**\n * Attach a keyboard shortcut handler.\n *\n * @param {string}   name               Shortcut name.\n * @param {Function} callback           Shortcut callback.\n * @param {Object}   options            Shortcut options.\n * @param {boolean}  options.isDisabled Whether to disable to shortut.\n */\nexport default function useShortcut( name, callback, { isDisabled } = {} ) {\n\tconst shortcuts = useContext( context );\n\tconst isMatch = useShortcutEventMatch();\n\tconst callbackRef = useRef();\n\tcallbackRef.current = callback;\n\n\tuseEffect( () => {\n\t\tif ( isDisabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tfunction _callback( event ) {\n\t\t\tif ( isMatch( name, event ) ) {\n\t\t\t\tcallbackRef.current( event );\n\t\t\t}\n\t\t}\n\n\t\tshortcuts.current.add( _callback );\n\t\treturn () => {\n\t\t\tshortcuts.current.delete( _callback );\n\t\t};\n\t}, [ name, isDisabled ] );\n}\n"]}

package/build-module/index.js

@@ -1,4 +1,5 @@
 export { store } from './store';
 export { default as useShortcut } from './hooks/use-shortcut';
+export { ShortcutProvider } from './components/shortcut-provider';
 export { default as __unstableUseShortcutEventMatch } from './hooks/use-shortcut-event-match';
 //# sourceMappingURL=index.js.map

package/build-module/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/keyboard-shortcuts/src/index.js"],"names":["store","default","useShortcut","__unstableUseShortcutEventMatch"],"mappings":"AAAA,SAASA,KAAT,QAAsB,SAAtB;AACA,SAASC,OAAO,IAAIC,WAApB,QAAuC,sBAAvC;AACA,SAASD,OAAO,IAAIE,+BAApB,QAA2D,kCAA3D","sourcesContent":["export { store } from './store';\nexport { default as useShortcut } from './hooks/use-shortcut';\nexport { default as __unstableUseShortcutEventMatch } from './hooks/use-shortcut-event-match';\n"]}
+{"version":3,"sources":["@wordpress/keyboard-shortcuts/src/index.js"],"names":["store","default","useShortcut","ShortcutProvider","__unstableUseShortcutEventMatch"],"mappings":"AAAA,SAASA,KAAT,QAAsB,SAAtB;AACA,SAASC,OAAO,IAAIC,WAApB,QAAuC,sBAAvC;AACA,SAASC,gBAAT,QAAiC,gCAAjC;AACA,SAASF,OAAO,IAAIG,+BAApB,QAA2D,kCAA3D","sourcesContent":["export { store } from './store';\nexport { default as useShortcut } from './hooks/use-shortcut';\nexport { ShortcutProvider } from './components/shortcut-provider';\nexport { default as __unstableUseShortcutEventMatch } from './hooks/use-shortcut-event-match';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/keyboard-shortcuts",
-	"version": "3.0.2",
+	"version": "3.0.3",
 	"description": "Handling keyboard shortcuts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -26,15 +26,15 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.13.10",
-		"@wordpress/compose": "^5.0.2",
-		"@wordpress/data": "^6.1.0",
-		"@wordpress/element": "^4.0.1",
-		"@wordpress/keycodes": "^3.2.2",
+		"@wordpress/compose": "^5.0.3",
+		"@wordpress/data": "^6.1.1",
+		"@wordpress/element": "^4.0.2",
+		"@wordpress/keycodes": "^3.2.3",
 		"lodash": "^4.17.21",
 		"rememo": "^3.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "98c42a7187f788fe3e023f04df7f5dcbdae4e4e7"
+	"gitHead": "8f7f052bc04e3f4eb50f479ced14be1489b9fa79"
 }

package/src/components/shortcut-provider.js

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { context } from '../context';
+
+const { Provider } = context;
+
+/**
+ * Handles callbacks added to context by `useShortcut`.
+ *
+ * @param {Object} props Props to pass to `div`.
+ *
+ * @return {import('@wordpress/element').WPElement} Component.
+ */
+export function ShortcutProvider( props ) {
+	const keyboardShortcuts = useRef( new Set() );
+
+	function onKeyDown( event ) {
+		if ( props.onKeyDown ) props.onKeyDown( event );
+
+		for ( const keyboardShortcut of keyboardShortcuts.current ) {
+			keyboardShortcut( event );
+		}
+	}
+
+	/* eslint-disable jsx-a11y/no-static-element-interactions */
+	return (
+		<Provider value={ keyboardShortcuts }>
+			<div { ...props } onKeyDown={ onKeyDown } />
+		</Provider>
+	);
+	/* eslint-enable jsx-a11y/no-static-element-interactions */
+}

package/src/context.js

@@ -0,0 +1,6 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+export const context = createContext();

package/src/hooks/use-shortcut.js

@@ -1,32 +1,42 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
-import { useKeyboardShortcut } from '@wordpress/compose';
+import { useContext, useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { store as keyboardShortcutsStore } from '../store';
+import useShortcutEventMatch from './use-shortcut-event-match';
+import { context } from '../context';
 
 /**
  * Attach a keyboard shortcut handler.
  *
- * @param {string}   name     Shortcut name.
- * @param {Function} callback Shortcut callback.
- * @param {Object}   options  Shortcut options.
+ * @param {string}   name               Shortcut name.
+ * @param {Function} callback           Shortcut callback.
+ * @param {Object}   options            Shortcut options.
+ * @param {boolean}  options.isDisabled Whether to disable to shortut.
  */
-function useShortcut( name, callback, options ) {
-	const shortcuts = useSelect(
-		( select ) => {
-			return select(
-				keyboardShortcutsStore
-			).getAllShortcutRawKeyCombinations( name );
-		},
-		[ name ]
-	);
+export default function useShortcut( name, callback, { isDisabled } = {} ) {
+	const shortcuts = useContext( context );
+	const isMatch = useShortcutEventMatch();
+	const callbackRef = useRef();
+	callbackRef.current = callback;
 
-	useKeyboardShortcut( shortcuts, callback, options );
-}
+	useEffect( () => {
+		if ( isDisabled ) {
+			return;
+		}
+
+		function _callback( event ) {
+			if ( isMatch( name, event ) ) {
+				callbackRef.current( event );
+			}
+		}
 
-export default useShortcut;
+		shortcuts.current.add( _callback );
+		return () => {
+			shortcuts.current.delete( _callback );
+		};
+	}, [ name, isDisabled ] );
+}

package/src/index.js

@@ -1,3 +1,4 @@
 export { store } from './store';
 export { default as useShortcut } from './hooks/use-shortcut';
+export { ShortcutProvider } from './components/shortcut-provider';
 export { default as __unstableUseShortcutEventMatch } from './hooks/use-shortcut-event-match';