@wordpress/keyboard-shortcuts 4.18.0 → 4.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  ## Unreleased
4
4
 
5
+ ## 4.19.0 (2023-09-20)
6
+
5
7
  ## 4.18.0 (2023-08-31)
6
8
 
7
9
  ## 4.17.0 (2023-08-16)
package/README.md CHANGED
@@ -18,7 +18,7 @@ _This package assumes that your code will run in an **ES2015+** environment. If
18
18
 
19
19
  ### ShortcutProvider
20
20
 
21
- Handles callbacks added to context by `useShortcut`.
21
+ 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.
22
22
 
23
23
  _Parameters_
24
24
 
@@ -20,6 +20,8 @@ const {
20
20
 
21
21
  /**
22
22
  * Handles callbacks added to context by `useShortcut`.
23
+ * Adding a provider allows to register contextual shortcuts
24
+ * that are only active when a certain part of the UI is focused.
23
25
  *
24
26
  * @param {Object} props Props to pass to `div`.
25
27
  *
@@ -1 +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"}
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 * 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 CHANGED
@@ -9,6 +9,25 @@ var _element = require("@wordpress/element");
9
9
  * WordPress dependencies
10
10
  */
11
11
 
12
- const context = (0, _element.createContext)();
12
+ const globalShortcuts = new Set();
13
+ const globalListener = event => {
14
+ for (const keyboardShortcut of globalShortcuts) {
15
+ keyboardShortcut(event);
16
+ }
17
+ };
18
+ const context = (0, _element.createContext)({
19
+ add: shortcut => {
20
+ if (globalShortcuts.size === 0) {
21
+ document.addEventListener('keydown', globalListener);
22
+ }
23
+ globalShortcuts.add(shortcut);
24
+ },
25
+ delete: shortcut => {
26
+ globalShortcuts.delete(shortcut);
27
+ if (globalShortcuts.size === 0) {
28
+ document.removeEventListener('keydown', globalListener);
29
+ }
30
+ }
31
+ });
13
32
  exports.context = context;
14
33
  //# sourceMappingURL=context.js.map
@@ -1 +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"}
1
+ {"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"}
@@ -25,12 +25,14 @@ var _context = require("../context");
25
25
  * @param {boolean} options.isDisabled Whether to disable to shortut.
26
26
  */
27
27
  function useShortcut(name, callback, {
28
- isDisabled
28
+ isDisabled = false
29
29
  } = {}) {
30
30
  const shortcuts = (0, _element.useContext)(_context.context);
31
31
  const isMatch = (0, _useShortcutEventMatch.default)();
32
32
  const callbackRef = (0, _element.useRef)();
33
- callbackRef.current = callback;
33
+ (0, _element.useEffect)(() => {
34
+ callbackRef.current = callback;
35
+ }, [callback]);
34
36
  (0, _element.useEffect)(() => {
35
37
  if (isDisabled) {
36
38
  return;
@@ -40,10 +42,10 @@ function useShortcut(name, callback, {
40
42
  callbackRef.current(event);
41
43
  }
42
44
  }
43
- shortcuts.current.add(_callback);
45
+ shortcuts.add(_callback);
44
46
  return () => {
45
- shortcuts.current.delete(_callback);
47
+ shortcuts.delete(_callback);
46
48
  };
47
- }, [name, isDisabled]);
49
+ }, [name, isDisabled, shortcuts]);
48
50
  }
49
51
  //# sourceMappingURL=use-shortcut.js.map
@@ -1 +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"}
1
+ {"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"}
@@ -14,6 +14,8 @@ const {
14
14
 
15
15
  /**
16
16
  * Handles callbacks added to context by `useShortcut`.
17
+ * Adding a provider allows to register contextual shortcuts
18
+ * that are only active when a certain part of the UI is focused.
17
19
  *
18
20
  * @param {Object} props Props to pass to `div`.
19
21
  *
@@ -1 +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"}
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 * 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"}
@@ -2,5 +2,24 @@
2
2
  * WordPress dependencies
3
3
  */
4
4
  import { createContext } from '@wordpress/element';
5
- export const context = createContext();
5
+ const globalShortcuts = new Set();
6
+ const globalListener = event => {
7
+ for (const keyboardShortcut of globalShortcuts) {
8
+ keyboardShortcut(event);
9
+ }
10
+ };
11
+ export const context = createContext({
12
+ add: shortcut => {
13
+ if (globalShortcuts.size === 0) {
14
+ document.addEventListener('keydown', globalListener);
15
+ }
16
+ globalShortcuts.add(shortcut);
17
+ },
18
+ delete: shortcut => {
19
+ globalShortcuts.delete(shortcut);
20
+ if (globalShortcuts.size === 0) {
21
+ document.removeEventListener('keydown', globalListener);
22
+ }
23
+ }
24
+ });
6
25
  //# sourceMappingURL=context.js.map
@@ -1 +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"}
1
+ {"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"}
@@ -18,12 +18,14 @@ import { context } from '../context';
18
18
  * @param {boolean} options.isDisabled Whether to disable to shortut.
19
19
  */
20
20
  export default function useShortcut(name, callback, {
21
- isDisabled
21
+ isDisabled = false
22
22
  } = {}) {
23
23
  const shortcuts = useContext(context);
24
24
  const isMatch = useShortcutEventMatch();
25
25
  const callbackRef = useRef();
26
- callbackRef.current = callback;
26
+ useEffect(() => {
27
+ callbackRef.current = callback;
28
+ }, [callback]);
27
29
  useEffect(() => {
28
30
  if (isDisabled) {
29
31
  return;
@@ -33,10 +35,10 @@ export default function useShortcut(name, callback, {
33
35
  callbackRef.current(event);
34
36
  }
35
37
  }
36
- shortcuts.current.add(_callback);
38
+ shortcuts.add(_callback);
37
39
  return () => {
38
- shortcuts.current.delete(_callback);
40
+ shortcuts.delete(_callback);
39
41
  };
40
- }, [name, isDisabled]);
42
+ }, [name, isDisabled, shortcuts]);
41
43
  }
42
44
  //# sourceMappingURL=use-shortcut.js.map
@@ -1 +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"}
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(\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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wordpress/keyboard-shortcuts",
3
- "version": "4.18.0",
3
+ "version": "4.19.0",
4
4
  "description": "Handling keyboard shortcuts.",
5
5
  "author": "The WordPress Contributors",
6
6
  "license": "GPL-2.0-or-later",
@@ -26,9 +26,9 @@
26
26
  "react-native": "src/index",
27
27
  "dependencies": {
28
28
  "@babel/runtime": "^7.16.0",
29
- "@wordpress/data": "^9.11.0",
30
- "@wordpress/element": "^5.18.0",
31
- "@wordpress/keycodes": "^3.41.0",
29
+ "@wordpress/data": "^9.12.0",
30
+ "@wordpress/element": "^5.19.0",
31
+ "@wordpress/keycodes": "^3.42.0",
32
32
  "rememo": "^4.0.2"
33
33
  },
34
34
  "peerDependencies": {
@@ -37,5 +37,5 @@
37
37
  "publishConfig": {
38
38
  "access": "public"
39
39
  },
40
- "gitHead": "5eac1734bcdca2301fdd37ec8cfe2a45e722a2c4"
40
+ "gitHead": "cc35f517ed017ab7131319af3e87c359e8de175d"
41
41
  }
@@ -12,6 +12,8 @@ const { Provider } = context;
12
12
 
13
13
  /**
14
14
  * Handles callbacks added to context by `useShortcut`.
15
+ * Adding a provider allows to register contextual shortcuts
16
+ * that are only active when a certain part of the UI is focused.
15
17
  *
16
18
  * @param {Object} props Props to pass to `div`.
17
19
  *
package/src/context.js CHANGED
@@ -3,4 +3,24 @@
3
3
  */
4
4
  import { createContext } from '@wordpress/element';
5
5
 
6
- export const context = createContext();
6
+ const globalShortcuts = new Set();
7
+ const globalListener = ( event ) => {
8
+ for ( const keyboardShortcut of globalShortcuts ) {
9
+ keyboardShortcut( event );
10
+ }
11
+ };
12
+
13
+ export const context = createContext( {
14
+ add: ( shortcut ) => {
15
+ if ( globalShortcuts.size === 0 ) {
16
+ document.addEventListener( 'keydown', globalListener );
17
+ }
18
+ globalShortcuts.add( shortcut );
19
+ },
20
+ delete: ( shortcut ) => {
21
+ globalShortcuts.delete( shortcut );
22
+ if ( globalShortcuts.size === 0 ) {
23
+ document.removeEventListener( 'keydown', globalListener );
24
+ }
25
+ },
26
+ } );
@@ -17,11 +17,18 @@ import { context } from '../context';
17
17
  * @param {Object} options Shortcut options.
18
18
  * @param {boolean} options.isDisabled Whether to disable to shortut.
19
19
  */
20
- export default function useShortcut( name, callback, { isDisabled } = {} ) {
20
+ export default function useShortcut(
21
+ name,
22
+ callback,
23
+ { isDisabled = false } = {}
24
+ ) {
21
25
  const shortcuts = useContext( context );
22
26
  const isMatch = useShortcutEventMatch();
23
27
  const callbackRef = useRef();
24
- callbackRef.current = callback;
28
+
29
+ useEffect( () => {
30
+ callbackRef.current = callback;
31
+ }, [ callback ] );
25
32
 
26
33
  useEffect( () => {
27
34
  if ( isDisabled ) {
@@ -34,9 +41,9 @@ export default function useShortcut( name, callback, { isDisabled } = {} ) {
34
41
  }
35
42
  }
36
43
 
37
- shortcuts.current.add( _callback );
44
+ shortcuts.add( _callback );
38
45
  return () => {
39
- shortcuts.current.delete( _callback );
46
+ shortcuts.delete( _callback );
40
47
  };
41
- }, [ name, isDisabled ] );
48
+ }, [ name, isDisabled, shortcuts ] );
42
49
  }