@wordpress/keyboard-shortcuts 4.18.0 → 4.19.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.19.0 (2023-09-20)
+
 ## 4.18.0 (2023-08-31)
 
 ## 4.17.0 (2023-08-16)

package/README.md

@@ -18,7 +18,7 @@ _This package assumes that your code will run in an **ES2015+** environment. If
 
 ### ShortcutProvider
 
-Handles callbacks added to context by `useShortcut`.
+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.
 
 _Parameters_
 

package/build/components/shortcut-provider.js

@@ -20,6 +20,8 @@ const {
 
 /**
  * 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`.
  *

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_context","Provider","context","ShortcutProvider","props","keyboardShortcuts","useRef","Set","onKeyDown","event","keyboardShortcut","current","createElement","value"],"sources":["@wordpress/keyboard-shortcuts/src/components/shortcut-provider.js"],"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"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGA,MAAM;EAAEE;AAAS,CAAC,GAAGC,gBAAO;;AAE5B;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,gBAAgBA,CAAEC,KAAK,EAAG;EACzC,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAE,IAAIC,GAAG,CAAC,CAAE,CAAC;EAE7C,SAASC,SAASA,CAAEC,KAAK,EAAG;IAC3B,IAAKL,KAAK,CAACI,SAAS,EAAGJ,KAAK,CAACI,SAAS,CAAEC,KAAM,CAAC;IAE/C,KAAM,MAAMC,gBAAgB,IAAIL,iBAAiB,CAACM,OAAO,EAAG;MAC3DD,gBAAgB,CAAED,KAAM,CAAC;IAC1B;EACD;;EAEA;EACA,OACC,IAAAX,QAAA,CAAAc,aAAA,EAACX,QAAQ;IAACY,KAAK,EAAGR;EAAmB,GACpC,IAAAP,QAAA,CAAAc,aAAA;IAAA,GAAUR,KAAK;IAAGI,SAAS,EAAGA;EAAW,CAAE,CAClC,CAAC;EAEZ;AACD"}
+{"version":3,"names":["_element","require","_context","Provider","context","ShortcutProvider","props","keyboardShortcuts","useRef","Set","onKeyDown","event","keyboardShortcut","current","createElement","value"],"sources":["@wordpress/keyboard-shortcuts/src/components/shortcut-provider.js"],"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 * Adding a provider allows to register contextual shortcuts\n * that are only active when a certain part of the UI is focused.\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"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGA,MAAM;EAAEE;AAAS,CAAC,GAAGC,gBAAO;;AAE5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,gBAAgBA,CAAEC,KAAK,EAAG;EACzC,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAE,IAAIC,GAAG,CAAC,CAAE,CAAC;EAE7C,SAASC,SAASA,CAAEC,KAAK,EAAG;IAC3B,IAAKL,KAAK,CAACI,SAAS,EAAGJ,KAAK,CAACI,SAAS,CAAEC,KAAM,CAAC;IAE/C,KAAM,MAAMC,gBAAgB,IAAIL,iBAAiB,CAACM,OAAO,EAAG;MAC3DD,gBAAgB,CAAED,KAAM,CAAC;IAC1B;EACD;;EAEA;EACA,OACC,IAAAX,QAAA,CAAAc,aAAA,EAACX,QAAQ;IAACY,KAAK,EAAGR;EAAmB,GACpC,IAAAP,QAAA,CAAAc,aAAA;IAAA,GAAUR,KAAK;IAAGI,SAAS,EAAGA;EAAW,CAAE,CAClC,CAAC;EAEZ;AACD"}

package/build/context.js

@@ -9,6 +9,25 @@ var _element = require("@wordpress/element");
  * WordPress dependencies
  */
 
-const context = (0, _element.createContext)();
+const globalShortcuts = new Set();
+const globalListener = event => {
+  for (const keyboardShortcut of globalShortcuts) {
+    keyboardShortcut(event);
+  }
+};
+const context = (0, _element.createContext)({
+  add: shortcut => {
+    if (globalShortcuts.size === 0) {
+      document.addEventListener('keydown', globalListener);
+    }
+    globalShortcuts.add(shortcut);
+  },
+  delete: shortcut => {
+    globalShortcuts.delete(shortcut);
+    if (globalShortcuts.size === 0) {
+      document.removeEventListener('keydown', globalListener);
+    }
+  }
+});
 exports.context = context;
 //# sourceMappingURL=context.js.map

package/build/context.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","context","createContext","exports"],"sources":["@wordpress/keyboard-shortcuts/src/context.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\nexport const context = createContext();\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGO,MAAMC,OAAO,GAAG,IAAAC,sBAAa,EAAC,CAAC;AAACC,OAAA,CAAAF,OAAA,GAAAA,OAAA"}
+{"version":3,"names":["_element","require","globalShortcuts","Set","globalListener","event","keyboardShortcut","context","createContext","add","shortcut","size","document","addEventListener","delete","removeEventListener","exports"],"sources":["@wordpress/keyboard-shortcuts/src/context.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\nconst globalShortcuts = new Set();\nconst globalListener = ( event ) => {\n\tfor ( const keyboardShortcut of globalShortcuts ) {\n\t\tkeyboardShortcut( event );\n\t}\n};\n\nexport const context = createContext( {\n\tadd: ( shortcut ) => {\n\t\tif ( globalShortcuts.size === 0 ) {\n\t\t\tdocument.addEventListener( 'keydown', globalListener );\n\t\t}\n\t\tglobalShortcuts.add( shortcut );\n\t},\n\tdelete: ( shortcut ) => {\n\t\tglobalShortcuts.delete( shortcut );\n\t\tif ( globalShortcuts.size === 0 ) {\n\t\t\tdocument.removeEventListener( 'keydown', globalListener );\n\t\t}\n\t},\n} );\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGA,MAAMC,eAAe,GAAG,IAAIC,GAAG,CAAC,CAAC;AACjC,MAAMC,cAAc,GAAKC,KAAK,IAAM;EACnC,KAAM,MAAMC,gBAAgB,IAAIJ,eAAe,EAAG;IACjDI,gBAAgB,CAAED,KAAM,CAAC;EAC1B;AACD,CAAC;AAEM,MAAME,OAAO,GAAG,IAAAC,sBAAa,EAAE;EACrCC,GAAG,EAAIC,QAAQ,IAAM;IACpB,IAAKR,eAAe,CAACS,IAAI,KAAK,CAAC,EAAG;MACjCC,QAAQ,CAACC,gBAAgB,CAAE,SAAS,EAAET,cAAe,CAAC;IACvD;IACAF,eAAe,CAACO,GAAG,CAAEC,QAAS,CAAC;EAChC,CAAC;EACDI,MAAM,EAAIJ,QAAQ,IAAM;IACvBR,eAAe,CAACY,MAAM,CAAEJ,QAAS,CAAC;IAClC,IAAKR,eAAe,CAACS,IAAI,KAAK,CAAC,EAAG;MACjCC,QAAQ,CAACG,mBAAmB,CAAE,SAAS,EAAEX,cAAe,CAAC;IAC1D;EACD;AACD,CAAE,CAAC;AAACY,OAAA,CAAAT,OAAA,GAAAA,OAAA"}

package/build/hooks/use-shortcut.js

@@ -25,12 +25,14 @@ var _context = require("../context");
  * @param {boolean}  options.isDisabled Whether to disable to shortut.
  */
 function useShortcut(name, callback, {
-  isDisabled
+  isDisabled = false
 } = {}) {
   const shortcuts = (0, _element.useContext)(_context.context);
   const isMatch = (0, _useShortcutEventMatch.default)();
   const callbackRef = (0, _element.useRef)();
-  callbackRef.current = callback;
+  (0, _element.useEffect)(() => {
+    callbackRef.current = callback;
+  }, [callback]);
   (0, _element.useEffect)(() => {
     if (isDisabled) {
       return;
@@ -40,10 +42,10 @@ function useShortcut(name, callback, {
         callbackRef.current(event);
       }
     }
-    shortcuts.current.add(_callback);
+    shortcuts.add(_callback);
     return () => {
-      shortcuts.current.delete(_callback);
+      shortcuts.delete(_callback);
     };
-  }, [name, isDisabled]);
+  }, [name, isDisabled, shortcuts]);
 }
 //# sourceMappingURL=use-shortcut.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_useShortcutEventMatch","_interopRequireDefault","_context","useShortcut","name","callback","isDisabled","shortcuts","useContext","context","isMatch","useShortcutEventMatch","callbackRef","useRef","current","useEffect","_callback","event","add","delete"],"sources":["@wordpress/keyboard-shortcuts/src/hooks/use-shortcut.js"],"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"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,sBAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AATA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASI,WAAWA,CAAEC,IAAI,EAAEC,QAAQ,EAAE;EAAEC;AAAW,CAAC,GAAG,CAAC,CAAC,EAAG;EAC1E,MAAMC,SAAS,GAAG,IAAAC,mBAAU,EAAEC,gBAAQ,CAAC;EACvC,MAAMC,OAAO,GAAG,IAAAC,8BAAqB,EAAC,CAAC;EACvC,MAAMC,WAAW,GAAG,IAAAC,eAAM,EAAC,CAAC;EAC5BD,WAAW,CAACE,OAAO,GAAGT,QAAQ;EAE9B,IAAAU,kBAAS,EAAE,MAAM;IAChB,IAAKT,UAAU,EAAG;MACjB;IACD;IAEA,SAASU,SAASA,CAAEC,KAAK,EAAG;MAC3B,IAAKP,OAAO,CAAEN,IAAI,EAAEa,KAAM,CAAC,EAAG;QAC7BL,WAAW,CAACE,OAAO,CAAEG,KAAM,CAAC;MAC7B;IACD;IAEAV,SAAS,CAACO,OAAO,CAACI,GAAG,CAAEF,SAAU,CAAC;IAClC,OAAO,MAAM;MACZT,SAAS,CAACO,OAAO,CAACK,MAAM,CAAEH,SAAU,CAAC;IACtC,CAAC;EACF,CAAC,EAAE,CAAEZ,IAAI,EAAEE,UAAU,CAAG,CAAC;AAC1B"}
+{"version":3,"names":["_element","require","_useShortcutEventMatch","_interopRequireDefault","_context","useShortcut","name","callback","isDisabled","shortcuts","useContext","context","isMatch","useShortcutEventMatch","callbackRef","useRef","useEffect","current","_callback","event","add","delete"],"sources":["@wordpress/keyboard-shortcuts/src/hooks/use-shortcut.js"],"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(\n\tname,\n\tcallback,\n\t{ isDisabled = false } = {}\n) {\n\tconst shortcuts = useContext( context );\n\tconst isMatch = useShortcutEventMatch();\n\tconst callbackRef = useRef();\n\n\tuseEffect( () => {\n\t\tcallbackRef.current = callback;\n\t}, [ 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.add( _callback );\n\t\treturn () => {\n\t\t\tshortcuts.delete( _callback );\n\t\t};\n\t}, [ name, isDisabled, shortcuts ] );\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,sBAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AATA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASI,WAAWA,CAClCC,IAAI,EACJC,QAAQ,EACR;EAAEC,UAAU,GAAG;AAAM,CAAC,GAAG,CAAC,CAAC,EAC1B;EACD,MAAMC,SAAS,GAAG,IAAAC,mBAAU,EAAEC,gBAAQ,CAAC;EACvC,MAAMC,OAAO,GAAG,IAAAC,8BAAqB,EAAC,CAAC;EACvC,MAAMC,WAAW,GAAG,IAAAC,eAAM,EAAC,CAAC;EAE5B,IAAAC,kBAAS,EAAE,MAAM;IAChBF,WAAW,CAACG,OAAO,GAAGV,QAAQ;EAC/B,CAAC,EAAE,CAAEA,QAAQ,CAAG,CAAC;EAEjB,IAAAS,kBAAS,EAAE,MAAM;IAChB,IAAKR,UAAU,EAAG;MACjB;IACD;IAEA,SAASU,SAASA,CAAEC,KAAK,EAAG;MAC3B,IAAKP,OAAO,CAAEN,IAAI,EAAEa,KAAM,CAAC,EAAG;QAC7BL,WAAW,CAACG,OAAO,CAAEE,KAAM,CAAC;MAC7B;IACD;IAEAV,SAAS,CAACW,GAAG,CAAEF,SAAU,CAAC;IAC1B,OAAO,MAAM;MACZT,SAAS,CAACY,MAAM,CAAEH,SAAU,CAAC;IAC9B,CAAC;EACF,CAAC,EAAE,CAAEZ,IAAI,EAAEE,UAAU,EAAEC,SAAS,CAAG,CAAC;AACrC"}

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

@@ -14,6 +14,8 @@ const {
 
 /**
  * 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`.
  *

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

@@ -1 +1 @@
-{"version":3,"names":["useRef","context","Provider","ShortcutProvider","props","keyboardShortcuts","Set","onKeyDown","event","keyboardShortcut","current","createElement","value"],"sources":["@wordpress/keyboard-shortcuts/src/components/shortcut-provider.js"],"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"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,MAAM,QAAQ,oBAAoB;;AAE3C;AACA;AACA;AACA,SAASC,OAAO,QAAQ,YAAY;AAEpC,MAAM;EAAEC;AAAS,CAAC,GAAGD,OAAO;;AAE5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASE,gBAAgBA,CAAEC,KAAK,EAAG;EACzC,MAAMC,iBAAiB,GAAGL,MAAM,CAAE,IAAIM,GAAG,CAAC,CAAE,CAAC;EAE7C,SAASC,SAASA,CAAEC,KAAK,EAAG;IAC3B,IAAKJ,KAAK,CAACG,SAAS,EAAGH,KAAK,CAACG,SAAS,CAAEC,KAAM,CAAC;IAE/C,KAAM,MAAMC,gBAAgB,IAAIJ,iBAAiB,CAACK,OAAO,EAAG;MAC3DD,gBAAgB,CAAED,KAAM,CAAC;IAC1B;EACD;;EAEA;EACA,OACCG,aAAA,CAACT,QAAQ;IAACU,KAAK,EAAGP;EAAmB,GACpCM,aAAA;IAAA,GAAUP,KAAK;IAAGG,SAAS,EAAGA;EAAW,CAAE,CAClC,CAAC;EAEZ;AACD"}
+{"version":3,"names":["useRef","context","Provider","ShortcutProvider","props","keyboardShortcuts","Set","onKeyDown","event","keyboardShortcut","current","createElement","value"],"sources":["@wordpress/keyboard-shortcuts/src/components/shortcut-provider.js"],"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 * Adding a provider allows to register contextual shortcuts\n * that are only active when a certain part of the UI is focused.\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"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,MAAM,QAAQ,oBAAoB;;AAE3C;AACA;AACA;AACA,SAASC,OAAO,QAAQ,YAAY;AAEpC,MAAM;EAAEC;AAAS,CAAC,GAAGD,OAAO;;AAE5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASE,gBAAgBA,CAAEC,KAAK,EAAG;EACzC,MAAMC,iBAAiB,GAAGL,MAAM,CAAE,IAAIM,GAAG,CAAC,CAAE,CAAC;EAE7C,SAASC,SAASA,CAAEC,KAAK,EAAG;IAC3B,IAAKJ,KAAK,CAACG,SAAS,EAAGH,KAAK,CAACG,SAAS,CAAEC,KAAM,CAAC;IAE/C,KAAM,MAAMC,gBAAgB,IAAIJ,iBAAiB,CAACK,OAAO,EAAG;MAC3DD,gBAAgB,CAAED,KAAM,CAAC;IAC1B;EACD;;EAEA;EACA,OACCG,aAAA,CAACT,QAAQ;IAACU,KAAK,EAAGP;EAAmB,GACpCM,aAAA;IAAA,GAAUP,KAAK;IAAGG,SAAS,EAAGA;EAAW,CAAE,CAClC,CAAC;EAEZ;AACD"}

package/build-module/context.js

@@ -2,5 +2,24 @@
  * WordPress dependencies
  */
 import { createContext } from '@wordpress/element';
-export const context = createContext();
+const globalShortcuts = new Set();
+const globalListener = event => {
+  for (const keyboardShortcut of globalShortcuts) {
+    keyboardShortcut(event);
+  }
+};
+export const context = createContext({
+  add: shortcut => {
+    if (globalShortcuts.size === 0) {
+      document.addEventListener('keydown', globalListener);
+    }
+    globalShortcuts.add(shortcut);
+  },
+  delete: shortcut => {
+    globalShortcuts.delete(shortcut);
+    if (globalShortcuts.size === 0) {
+      document.removeEventListener('keydown', globalListener);
+    }
+  }
+});
 //# sourceMappingURL=context.js.map

package/build-module/context.js.map

@@ -1 +1 @@
-{"version":3,"names":["createContext","context"],"sources":["@wordpress/keyboard-shortcuts/src/context.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\nexport const context = createContext();\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAa,QAAQ,oBAAoB;AAElD,OAAO,MAAMC,OAAO,GAAGD,aAAa,CAAC,CAAC"}
+{"version":3,"names":["createContext","globalShortcuts","Set","globalListener","event","keyboardShortcut","context","add","shortcut","size","document","addEventListener","delete","removeEventListener"],"sources":["@wordpress/keyboard-shortcuts/src/context.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\nconst globalShortcuts = new Set();\nconst globalListener = ( event ) => {\n\tfor ( const keyboardShortcut of globalShortcuts ) {\n\t\tkeyboardShortcut( event );\n\t}\n};\n\nexport const context = createContext( {\n\tadd: ( shortcut ) => {\n\t\tif ( globalShortcuts.size === 0 ) {\n\t\t\tdocument.addEventListener( 'keydown', globalListener );\n\t\t}\n\t\tglobalShortcuts.add( shortcut );\n\t},\n\tdelete: ( shortcut ) => {\n\t\tglobalShortcuts.delete( shortcut );\n\t\tif ( globalShortcuts.size === 0 ) {\n\t\t\tdocument.removeEventListener( 'keydown', globalListener );\n\t\t}\n\t},\n} );\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAa,QAAQ,oBAAoB;AAElD,MAAMC,eAAe,GAAG,IAAIC,GAAG,CAAC,CAAC;AACjC,MAAMC,cAAc,GAAKC,KAAK,IAAM;EACnC,KAAM,MAAMC,gBAAgB,IAAIJ,eAAe,EAAG;IACjDI,gBAAgB,CAAED,KAAM,CAAC;EAC1B;AACD,CAAC;AAED,OAAO,MAAME,OAAO,GAAGN,aAAa,CAAE;EACrCO,GAAG,EAAIC,QAAQ,IAAM;IACpB,IAAKP,eAAe,CAACQ,IAAI,KAAK,CAAC,EAAG;MACjCC,QAAQ,CAACC,gBAAgB,CAAE,SAAS,EAAER,cAAe,CAAC;IACvD;IACAF,eAAe,CAACM,GAAG,CAAEC,QAAS,CAAC;EAChC,CAAC;EACDI,MAAM,EAAIJ,QAAQ,IAAM;IACvBP,eAAe,CAACW,MAAM,CAAEJ,QAAS,CAAC;IAClC,IAAKP,eAAe,CAACQ,IAAI,KAAK,CAAC,EAAG;MACjCC,QAAQ,CAACG,mBAAmB,CAAE,SAAS,EAAEV,cAAe,CAAC;IAC1D;EACD;AACD,CAAE,CAAC"}

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

@@ -18,12 +18,14 @@ import { context } from '../context';
  * @param {boolean}  options.isDisabled Whether to disable to shortut.
  */
 export default function useShortcut(name, callback, {
-  isDisabled
+  isDisabled = false
 } = {}) {
   const shortcuts = useContext(context);
   const isMatch = useShortcutEventMatch();
   const callbackRef = useRef();
-  callbackRef.current = callback;
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
   useEffect(() => {
     if (isDisabled) {
       return;
@@ -33,10 +35,10 @@ export default function useShortcut(name, callback, {
         callbackRef.current(event);
       }
     }
-    shortcuts.current.add(_callback);
+    shortcuts.add(_callback);
     return () => {
-      shortcuts.current.delete(_callback);
+      shortcuts.delete(_callback);
     };
-  }, [name, isDisabled]);
+  }, [name, isDisabled, shortcuts]);
 }
 //# sourceMappingURL=use-shortcut.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["useContext","useEffect","useRef","useShortcutEventMatch","context","useShortcut","name","callback","isDisabled","shortcuts","isMatch","callbackRef","current","_callback","event","add","delete"],"sources":["@wordpress/keyboard-shortcuts/src/hooks/use-shortcut.js"],"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"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,UAAU,EAAEC,SAAS,EAAEC,MAAM,QAAQ,oBAAoB;;AAElE;AACA;AACA;AACA,OAAOC,qBAAqB,MAAM,4BAA4B;AAC9D,SAASC,OAAO,QAAQ,YAAY;;AAEpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,WAAWA,CAAEC,IAAI,EAAEC,QAAQ,EAAE;EAAEC;AAAW,CAAC,GAAG,CAAC,CAAC,EAAG;EAC1E,MAAMC,SAAS,GAAGT,UAAU,CAAEI,OAAQ,CAAC;EACvC,MAAMM,OAAO,GAAGP,qBAAqB,CAAC,CAAC;EACvC,MAAMQ,WAAW,GAAGT,MAAM,CAAC,CAAC;EAC5BS,WAAW,CAACC,OAAO,GAAGL,QAAQ;EAE9BN,SAAS,CAAE,MAAM;IAChB,IAAKO,UAAU,EAAG;MACjB;IACD;IAEA,SAASK,SAASA,CAAEC,KAAK,EAAG;MAC3B,IAAKJ,OAAO,CAAEJ,IAAI,EAAEQ,KAAM,CAAC,EAAG;QAC7BH,WAAW,CAACC,OAAO,CAAEE,KAAM,CAAC;MAC7B;IACD;IAEAL,SAAS,CAACG,OAAO,CAACG,GAAG,CAAEF,SAAU,CAAC;IAClC,OAAO,MAAM;MACZJ,SAAS,CAACG,OAAO,CAACI,MAAM,CAAEH,SAAU,CAAC;IACtC,CAAC;EACF,CAAC,EAAE,CAAEP,IAAI,EAAEE,UAAU,CAAG,CAAC;AAC1B"}
+{"version":3,"names":["useContext","useEffect","useRef","useShortcutEventMatch","context","useShortcut","name","callback","isDisabled","shortcuts","isMatch","callbackRef","current","_callback","event","add","delete"],"sources":["@wordpress/keyboard-shortcuts/src/hooks/use-shortcut.js"],"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(\n\tname,\n\tcallback,\n\t{ isDisabled = false } = {}\n) {\n\tconst shortcuts = useContext( context );\n\tconst isMatch = useShortcutEventMatch();\n\tconst callbackRef = useRef();\n\n\tuseEffect( () => {\n\t\tcallbackRef.current = callback;\n\t}, [ 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.add( _callback );\n\t\treturn () => {\n\t\t\tshortcuts.delete( _callback );\n\t\t};\n\t}, [ name, isDisabled, shortcuts ] );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,UAAU,EAAEC,SAAS,EAAEC,MAAM,QAAQ,oBAAoB;;AAElE;AACA;AACA;AACA,OAAOC,qBAAqB,MAAM,4BAA4B;AAC9D,SAASC,OAAO,QAAQ,YAAY;;AAEpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,WAAWA,CAClCC,IAAI,EACJC,QAAQ,EACR;EAAEC,UAAU,GAAG;AAAM,CAAC,GAAG,CAAC,CAAC,EAC1B;EACD,MAAMC,SAAS,GAAGT,UAAU,CAAEI,OAAQ,CAAC;EACvC,MAAMM,OAAO,GAAGP,qBAAqB,CAAC,CAAC;EACvC,MAAMQ,WAAW,GAAGT,MAAM,CAAC,CAAC;EAE5BD,SAAS,CAAE,MAAM;IAChBU,WAAW,CAACC,OAAO,GAAGL,QAAQ;EAC/B,CAAC,EAAE,CAAEA,QAAQ,CAAG,CAAC;EAEjBN,SAAS,CAAE,MAAM;IAChB,IAAKO,UAAU,EAAG;MACjB;IACD;IAEA,SAASK,SAASA,CAAEC,KAAK,EAAG;MAC3B,IAAKJ,OAAO,CAAEJ,IAAI,EAAEQ,KAAM,CAAC,EAAG;QAC7BH,WAAW,CAACC,OAAO,CAAEE,KAAM,CAAC;MAC7B;IACD;IAEAL,SAAS,CAACM,GAAG,CAAEF,SAAU,CAAC;IAC1B,OAAO,MAAM;MACZJ,SAAS,CAACO,MAAM,CAAEH,SAAU,CAAC;IAC9B,CAAC;EACF,CAAC,EAAE,CAAEP,IAAI,EAAEE,UAAU,EAAEC,SAAS,CAAG,CAAC;AACrC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/keyboard-shortcuts",
-	"version": "4.18.0",
+	"version": "4.19.0",
 	"description": "Handling keyboard shortcuts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -26,9 +26,9 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/data": "^9.11.0",
-		"@wordpress/element": "^5.18.0",
-		"@wordpress/keycodes": "^3.41.0",
+		"@wordpress/data": "^9.12.0",
+		"@wordpress/element": "^5.19.0",
+		"@wordpress/keycodes": "^3.42.0",
 		"rememo": "^4.0.2"
 	},
 	"peerDependencies": {
@@ -37,5 +37,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "5eac1734bcdca2301fdd37ec8cfe2a45e722a2c4"
+	"gitHead": "cc35f517ed017ab7131319af3e87c359e8de175d"
 }

package/src/components/shortcut-provider.js

@@ -12,6 +12,8 @@ const { Provider } = context;
 
 /**
  * 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`.
  *

package/src/context.js

@@ -3,4 +3,24 @@
  */
 import { createContext } from '@wordpress/element';
 
-export const context = createContext();
+const globalShortcuts = new Set();
+const globalListener = ( event ) => {
+	for ( const keyboardShortcut of globalShortcuts ) {
+		keyboardShortcut( event );
+	}
+};
+
+export const context = createContext( {
+	add: ( shortcut ) => {
+		if ( globalShortcuts.size === 0 ) {
+			document.addEventListener( 'keydown', globalListener );
+		}
+		globalShortcuts.add( shortcut );
+	},
+	delete: ( shortcut ) => {
+		globalShortcuts.delete( shortcut );
+		if ( globalShortcuts.size === 0 ) {
+			document.removeEventListener( 'keydown', globalListener );
+		}
+	},
+} );

package/src/hooks/use-shortcut.js

@@ -17,11 +17,18 @@ import { context } from '../context';
  * @param {Object}   options            Shortcut options.
  * @param {boolean}  options.isDisabled Whether to disable to shortut.
  */
-export default function useShortcut( name, callback, { isDisabled } = {} ) {
+export default function useShortcut(
+	name,
+	callback,
+	{ isDisabled = false } = {}
+) {
 	const shortcuts = useContext( context );
 	const isMatch = useShortcutEventMatch();
 	const callbackRef = useRef();
-	callbackRef.current = callback;
+
+	useEffect( () => {
+		callbackRef.current = callback;
+	}, [ callback ] );
 
 	useEffect( () => {
 		if ( isDisabled ) {
@@ -34,9 +41,9 @@ export default function useShortcut( name, callback, { isDisabled } = {} ) {
 			}
 		}
 
-		shortcuts.current.add( _callback );
+		shortcuts.add( _callback );
 		return () => {
-			shortcuts.current.delete( _callback );
+			shortcuts.delete( _callback );
 		};
-	}, [ name, isDisabled ] );
+	}, [ name, isDisabled, shortcuts ] );
 }