@wordpress/commands 0.3.0 → 0.5.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.
Files changed (51) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/README.md +16 -0
  3. package/build/components/command-menu.js +83 -57
  4. package/build/components/command-menu.js.map +1 -1
  5. package/build/hooks/use-command-context.js +45 -0
  6. package/build/hooks/use-command-context.js.map +1 -0
  7. package/build/hooks/use-command-loader.js +6 -11
  8. package/build/hooks/use-command-loader.js.map +1 -1
  9. package/build/hooks/use-command.js +5 -3
  10. package/build/hooks/use-command.js.map +1 -1
  11. package/build/index.js +18 -0
  12. package/build/index.js.map +1 -1
  13. package/build/private-apis.js +4 -4
  14. package/build/private-apis.js.map +1 -1
  15. package/build/store/actions.js +61 -40
  16. package/build/store/actions.js.map +1 -1
  17. package/build/store/reducer.js +63 -22
  18. package/build/store/reducer.js.map +1 -1
  19. package/build/store/selectors.js +25 -17
  20. package/build/store/selectors.js.map +1 -1
  21. package/build-module/components/command-menu.js +83 -57
  22. package/build-module/components/command-menu.js.map +1 -1
  23. package/build-module/hooks/use-command-context.js +35 -0
  24. package/build-module/hooks/use-command-context.js.map +1 -0
  25. package/build-module/hooks/use-command-loader.js +6 -11
  26. package/build-module/hooks/use-command-loader.js.map +1 -1
  27. package/build-module/hooks/use-command.js +5 -3
  28. package/build-module/hooks/use-command.js.map +1 -1
  29. package/build-module/index.js +2 -0
  30. package/build-module/index.js.map +1 -1
  31. package/build-module/private-apis.js +4 -4
  32. package/build-module/private-apis.js.map +1 -1
  33. package/build-module/store/actions.js +55 -40
  34. package/build-module/store/actions.js.map +1 -1
  35. package/build-module/store/reducer.js +63 -22
  36. package/build-module/store/reducer.js.map +1 -1
  37. package/build-module/store/selectors.js +19 -15
  38. package/build-module/store/selectors.js.map +1 -1
  39. package/build-style/style-rtl.css +9 -1
  40. package/build-style/style.css +9 -1
  41. package/package.json +9 -9
  42. package/src/components/command-menu.js +57 -43
  43. package/src/components/style.scss +11 -1
  44. package/src/hooks/use-command-context.js +32 -0
  45. package/src/hooks/use-command-loader.js +12 -6
  46. package/src/hooks/use-command.js +7 -3
  47. package/src/index.js +2 -0
  48. package/src/private-apis.js +4 -4
  49. package/src/store/actions.js +53 -26
  50. package/src/store/reducer.js +53 -27
  51. package/src/store/selectors.js +22 -19
@@ -3,8 +3,11 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
+ exports.close = close;
7
+ exports.open = open;
6
8
  exports.registerCommand = registerCommand;
7
9
  exports.registerCommandLoader = registerCommandLoader;
10
+ exports.setContext = setContext;
8
11
  exports.unregisterCommand = unregisterCommand;
9
12
  exports.unregisterCommandLoader = unregisterCommandLoader;
10
13
 
@@ -15,11 +18,12 @@ exports.unregisterCommandLoader = unregisterCommandLoader;
15
18
  *
16
19
  * @typedef {Object} WPCommandConfig
17
20
  *
18
- * @property {string} name Command name.
19
- * @property {string} label Command label.
20
- * @property {string=} group Command group.
21
- * @property {JSX.Element} icon Command icon.
22
- * @property {Function} callback Command callback.
21
+ * @property {string} name Command name.
22
+ * @property {string} label Command label.
23
+ * @property {string=} searchLabel Command search label.
24
+ * @property {string=} context Command context.
25
+ * @property {JSX.Element} icon Command icon.
26
+ * @property {Function} callback Command callback.
23
27
  */
24
28
 
25
29
  /**
@@ -31,9 +35,9 @@ exports.unregisterCommandLoader = unregisterCommandLoader;
31
35
  *
32
36
  * @typedef {Object} WPCommandLoaderConfig
33
37
  *
34
- * @property {string} name Command loader name.
35
- * @property {string=} group Command loader group.
36
- * @property {WPCommandLoaderHook} hook Command loader hook.
38
+ * @property {string} name Command loader name.
39
+ * @property {string=} context Command loader context.
40
+ * @property {WPCommandLoaderHook} hook Command loader hook.
37
41
  */
38
42
 
39
43
  /**
@@ -43,38 +47,25 @@ exports.unregisterCommandLoader = unregisterCommandLoader;
43
47
  *
44
48
  * @return {Object} action.
45
49
  */
46
- function registerCommand(_ref) {
47
- let {
48
- name,
49
- label,
50
- icon,
51
- callback,
52
- group = ''
53
- } = _ref;
50
+ function registerCommand(config) {
54
51
  return {
55
52
  type: 'REGISTER_COMMAND',
56
- name,
57
- label,
58
- icon,
59
- callback,
60
- group
53
+ ...config
61
54
  };
62
55
  }
63
56
  /**
64
57
  * Returns an action object used to unregister a command.
65
58
  *
66
- * @param {string} name Command name.
67
- * @param {string} group Command group.
59
+ * @param {string} name Command name.
68
60
  *
69
61
  * @return {Object} action.
70
62
  */
71
63
 
72
64
 
73
- function unregisterCommand(name, group) {
65
+ function unregisterCommand(name) {
74
66
  return {
75
67
  type: 'UNREGISTER_COMMAND',
76
- name,
77
- group
68
+ name
78
69
  };
79
70
  }
80
71
  /**
@@ -86,34 +77,64 @@ function unregisterCommand(name, group) {
86
77
  */
87
78
 
88
79
 
89
- function registerCommandLoader(_ref2) {
90
- let {
91
- name,
92
- group = '',
93
- hook
94
- } = _ref2;
80
+ function registerCommandLoader(config) {
95
81
  return {
96
82
  type: 'REGISTER_COMMAND_LOADER',
97
- name,
98
- group,
99
- hook
83
+ ...config
100
84
  };
101
85
  }
102
86
  /**
103
87
  * Unregister command loader hook.
104
88
  *
105
- * @param {string} name Command loader name.
106
- * @param {string} group Command loader group.
89
+ * @param {string} name Command loader name.
107
90
  *
108
91
  * @return {Object} action.
109
92
  */
110
93
 
111
94
 
112
- function unregisterCommandLoader(name, group) {
95
+ function unregisterCommandLoader(name) {
113
96
  return {
114
97
  type: 'UNREGISTER_COMMAND_LOADER',
115
- name,
116
- group
98
+ name
99
+ };
100
+ }
101
+ /**
102
+ * Opens the command center.
103
+ *
104
+ * @return {Object} action.
105
+ */
106
+
107
+
108
+ function open() {
109
+ return {
110
+ type: 'OPEN'
111
+ };
112
+ }
113
+ /**
114
+ * Closes the command center.
115
+ *
116
+ * @return {Object} action.
117
+ */
118
+
119
+
120
+ function close() {
121
+ return {
122
+ type: 'CLOSE'
123
+ };
124
+ }
125
+ /**
126
+ * Sets the active context.
127
+ *
128
+ * @param {string} context Context.
129
+ *
130
+ * @return {Object} action.
131
+ */
132
+
133
+
134
+ function setContext(context) {
135
+ return {
136
+ type: 'SET_CONTEXT',
137
+ context
117
138
  };
118
139
  }
119
140
  //# sourceMappingURL=actions.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/commands/src/store/actions.js"],"names":["registerCommand","name","label","icon","callback","group","type","unregisterCommand","registerCommandLoader","hook","unregisterCommandLoader"],"mappings":";;;;;;;;;;AAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,eAAT,OAAwE;AAAA,MAA9C;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,KAAR;AAAeC,IAAAA,IAAf;AAAqBC,IAAAA,QAArB;AAA+BC,IAAAA,KAAK,GAAG;AAAvC,GAA8C;AAC9E,SAAO;AACNC,IAAAA,IAAI,EAAE,kBADA;AAENL,IAAAA,IAFM;AAGNC,IAAAA,KAHM;AAINC,IAAAA,IAJM;AAKNC,IAAAA,QALM;AAMNC,IAAAA;AANM,GAAP;AAQA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASE,iBAAT,CAA4BN,IAA5B,EAAkCI,KAAlC,EAA0C;AAChD,SAAO;AACNC,IAAAA,IAAI,EAAE,oBADA;AAENL,IAAAA,IAFM;AAGNI,IAAAA;AAHM,GAAP;AAKA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASG,qBAAT,QAA6D;AAAA,MAA7B;AAAEP,IAAAA,IAAF;AAAQI,IAAAA,KAAK,GAAG,EAAhB;AAAoBI,IAAAA;AAApB,GAA6B;AACnE,SAAO;AACNH,IAAAA,IAAI,EAAE,yBADA;AAENL,IAAAA,IAFM;AAGNI,IAAAA,KAHM;AAINI,IAAAA;AAJM,GAAP;AAMA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASC,uBAAT,CAAkCT,IAAlC,EAAwCI,KAAxC,EAAgD;AACtD,SAAO;AACNC,IAAAA,IAAI,EAAE,2BADA;AAENL,IAAAA,IAFM;AAGNI,IAAAA;AAHM,GAAP;AAKA","sourcesContent":["/** @typedef {import('@wordpress/keycodes').WPKeycodeModifier} WPKeycodeModifier */\n\n/**\n * Configuration of a registered keyboard shortcut.\n *\n * @typedef {Object} WPCommandConfig\n *\n * @property {string} name Command name.\n * @property {string} label Command label.\n * @property {string=} group Command group.\n * @property {JSX.Element} icon Command icon.\n * @property {Function} callback Command callback.\n */\n\n/**\n * @typedef {(search: string) => WPCommandConfig[]} WPCommandLoaderHook hoo\n */\n\n/**\n * Command loader config.\n *\n * @typedef {Object} WPCommandLoaderConfig\n *\n * @property {string} name Command loader name.\n * @property {string=} group Command loader group.\n * @property {WPCommandLoaderHook} hook Command loader hook.\n */\n\n/**\n * Returns an action object used to register a new command.\n *\n * @param {WPCommandConfig} config Command config.\n *\n * @return {Object} action.\n */\nexport function registerCommand( { name, label, icon, callback, group = '' } ) {\n\treturn {\n\t\ttype: 'REGISTER_COMMAND',\n\t\tname,\n\t\tlabel,\n\t\ticon,\n\t\tcallback,\n\t\tgroup,\n\t};\n}\n\n/**\n * Returns an action object used to unregister a command.\n *\n * @param {string} name Command name.\n * @param {string} group Command group.\n *\n * @return {Object} action.\n */\nexport function unregisterCommand( name, group ) {\n\treturn {\n\t\ttype: 'UNREGISTER_COMMAND',\n\t\tname,\n\t\tgroup,\n\t};\n}\n\n/**\n * Register command loader.\n *\n * @param {WPCommandLoaderConfig} config Command loader config.\n *\n * @return {Object} action.\n */\nexport function registerCommandLoader( { name, group = '', hook } ) {\n\treturn {\n\t\ttype: 'REGISTER_COMMAND_LOADER',\n\t\tname,\n\t\tgroup,\n\t\thook,\n\t};\n}\n\n/**\n * Unregister command loader hook.\n *\n * @param {string} name Command loader name.\n * @param {string} group Command loader group.\n *\n * @return {Object} action.\n */\nexport function unregisterCommandLoader( name, group ) {\n\treturn {\n\t\ttype: 'UNREGISTER_COMMAND_LOADER',\n\t\tname,\n\t\tgroup,\n\t};\n}\n"]}
1
+ {"version":3,"sources":["@wordpress/commands/src/store/actions.js"],"names":["registerCommand","config","type","unregisterCommand","name","registerCommandLoader","unregisterCommandLoader","open","close","setContext","context"],"mappings":";;;;;;;;;;;;;AAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,eAAT,CAA0BC,MAA1B,EAAmC;AACzC,SAAO;AACNC,IAAAA,IAAI,EAAE,kBADA;AAEN,OAAGD;AAFG,GAAP;AAIA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASE,iBAAT,CAA4BC,IAA5B,EAAmC;AACzC,SAAO;AACNF,IAAAA,IAAI,EAAE,oBADA;AAENE,IAAAA;AAFM,GAAP;AAIA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASC,qBAAT,CAAgCJ,MAAhC,EAAyC;AAC/C,SAAO;AACNC,IAAAA,IAAI,EAAE,yBADA;AAEN,OAAGD;AAFG,GAAP;AAIA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASK,uBAAT,CAAkCF,IAAlC,EAAyC;AAC/C,SAAO;AACNF,IAAAA,IAAI,EAAE,2BADA;AAENE,IAAAA;AAFM,GAAP;AAIA;AAED;AACA;AACA;AACA;AACA;;;AACO,SAASG,IAAT,GAAgB;AACtB,SAAO;AACNL,IAAAA,IAAI,EAAE;AADA,GAAP;AAGA;AAED;AACA;AACA;AACA;AACA;;;AACO,SAASM,KAAT,GAAiB;AACvB,SAAO;AACNN,IAAAA,IAAI,EAAE;AADA,GAAP;AAGA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASO,UAAT,CAAqBC,OAArB,EAA+B;AACrC,SAAO;AACNR,IAAAA,IAAI,EAAE,aADA;AAENQ,IAAAA;AAFM,GAAP;AAIA","sourcesContent":["/** @typedef {import('@wordpress/keycodes').WPKeycodeModifier} WPKeycodeModifier */\n\n/**\n * Configuration of a registered keyboard shortcut.\n *\n * @typedef {Object} WPCommandConfig\n *\n * @property {string} name Command name.\n * @property {string} label Command label.\n * @property {string=} searchLabel Command search label.\n * @property {string=} context Command context.\n * @property {JSX.Element} icon Command icon.\n * @property {Function} callback Command callback.\n */\n\n/**\n * @typedef {(search: string) => WPCommandConfig[]} WPCommandLoaderHook hoo\n */\n\n/**\n * Command loader config.\n *\n * @typedef {Object} WPCommandLoaderConfig\n *\n * @property {string} name Command loader name.\n * @property {string=} context Command loader context.\n * @property {WPCommandLoaderHook} hook Command loader hook.\n */\n\n/**\n * Returns an action object used to register a new command.\n *\n * @param {WPCommandConfig} config Command config.\n *\n * @return {Object} action.\n */\nexport function registerCommand( config ) {\n\treturn {\n\t\ttype: 'REGISTER_COMMAND',\n\t\t...config,\n\t};\n}\n\n/**\n * Returns an action object used to unregister a command.\n *\n * @param {string} name Command name.\n *\n * @return {Object} action.\n */\nexport function unregisterCommand( name ) {\n\treturn {\n\t\ttype: 'UNREGISTER_COMMAND',\n\t\tname,\n\t};\n}\n\n/**\n * Register command loader.\n *\n * @param {WPCommandLoaderConfig} config Command loader config.\n *\n * @return {Object} action.\n */\nexport function registerCommandLoader( config ) {\n\treturn {\n\t\ttype: 'REGISTER_COMMAND_LOADER',\n\t\t...config,\n\t};\n}\n\n/**\n * Unregister command loader hook.\n *\n * @param {string} name Command loader name.\n *\n * @return {Object} action.\n */\nexport function unregisterCommandLoader( name ) {\n\treturn {\n\t\ttype: 'UNREGISTER_COMMAND_LOADER',\n\t\tname,\n\t};\n}\n\n/**\n * Opens the command center.\n *\n * @return {Object} action.\n */\nexport function open() {\n\treturn {\n\t\ttype: 'OPEN',\n\t};\n}\n\n/**\n * Closes the command center.\n *\n * @return {Object} action.\n */\nexport function close() {\n\treturn {\n\t\ttype: 'CLOSE',\n\t};\n}\n\n/**\n * Sets the active context.\n *\n * @param {string} context Context.\n *\n * @return {Object} action.\n */\nexport function setContext( context ) {\n\treturn {\n\t\ttype: 'SET_CONTEXT',\n\t\tcontext,\n\t};\n}\n"]}
@@ -26,14 +26,13 @@ function commands() {
26
26
  switch (action.type) {
27
27
  case 'REGISTER_COMMAND':
28
28
  return { ...state,
29
- [action.group]: { ...state[action.group],
30
- [action.name]: {
31
- name: action.name,
32
- label: action.label,
33
- group: action.group,
34
- callback: action.callback,
35
- icon: action.icon
36
- }
29
+ [action.name]: {
30
+ name: action.name,
31
+ label: action.label,
32
+ searchLabel: action.searchLabel,
33
+ context: action.context,
34
+ callback: action.callback,
35
+ icon: action.icon
37
36
  }
38
37
  };
39
38
 
@@ -42,10 +41,8 @@ function commands() {
42
41
  const {
43
42
  [action.name]: _,
44
43
  ...remainingState
45
- } = state === null || state === void 0 ? void 0 : state[action.group];
46
- return { ...state,
47
- [action.group]: remainingState
48
- };
44
+ } = state;
45
+ return remainingState;
49
46
  }
50
47
  }
51
48
 
@@ -68,11 +65,10 @@ function commandLoaders() {
68
65
  switch (action.type) {
69
66
  case 'REGISTER_COMMAND_LOADER':
70
67
  return { ...state,
71
- [action.group]: { ...state[action.group],
72
- [action.name]: {
73
- name: action.name,
74
- hook: action.hook
75
- }
68
+ [action.name]: {
69
+ name: action.name,
70
+ context: action.context,
71
+ hook: action.hook
76
72
  }
77
73
  };
78
74
 
@@ -81,19 +77,64 @@ function commandLoaders() {
81
77
  const {
82
78
  [action.name]: _,
83
79
  ...remainingState
84
- } = state === null || state === void 0 ? void 0 : state[action.group];
85
- return { ...state,
86
- [action.group]: remainingState
87
- };
80
+ } = state;
81
+ return remainingState;
88
82
  }
89
83
  }
90
84
 
91
85
  return state;
92
86
  }
87
+ /**
88
+ * Reducer returning the command center open state.
89
+ *
90
+ * @param {Object} state Current state.
91
+ * @param {Object} action Dispatched action.
92
+ *
93
+ * @return {boolean} Updated state.
94
+ */
95
+
96
+
97
+ function isOpen() {
98
+ let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
99
+ let action = arguments.length > 1 ? arguments[1] : undefined;
100
+
101
+ switch (action.type) {
102
+ case 'OPEN':
103
+ return true;
104
+
105
+ case 'CLOSE':
106
+ return false;
107
+ }
108
+
109
+ return state;
110
+ }
111
+ /**
112
+ * Reducer returning the command center's active context.
113
+ *
114
+ * @param {Object} state Current state.
115
+ * @param {Object} action Dispatched action.
116
+ *
117
+ * @return {boolean} Updated state.
118
+ */
119
+
120
+
121
+ function context() {
122
+ let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'root';
123
+ let action = arguments.length > 1 ? arguments[1] : undefined;
124
+
125
+ switch (action.type) {
126
+ case 'SET_CONTEXT':
127
+ return action.context;
128
+ }
129
+
130
+ return state;
131
+ }
93
132
 
94
133
  const reducer = (0, _data.combineReducers)({
95
134
  commands,
96
- commandLoaders
135
+ commandLoaders,
136
+ isOpen,
137
+ context
97
138
  });
98
139
  var _default = reducer;
99
140
  exports.default = _default;
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/commands/src/store/reducer.js"],"names":["commands","state","action","type","group","name","label","callback","icon","_","remainingState","commandLoaders","hook","reducer"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,QAAT,GAAwC;AAAA,MAArBC,KAAqB,uEAAb,EAAa;AAAA,MAATC,MAAS;;AACvC,UAASA,MAAM,CAACC,IAAhB;AACC,SAAK,kBAAL;AACC,aAAO,EACN,GAAGF,KADG;AAEN,SAAEC,MAAM,CAACE,KAAT,GAAkB,EACjB,GAAGH,KAAK,CAAEC,MAAM,CAACE,KAAT,CADS;AAEjB,WAAEF,MAAM,CAACG,IAAT,GAAiB;AAChBA,YAAAA,IAAI,EAAEH,MAAM,CAACG,IADG;AAEhBC,YAAAA,KAAK,EAAEJ,MAAM,CAACI,KAFE;AAGhBF,YAAAA,KAAK,EAAEF,MAAM,CAACE,KAHE;AAIhBG,YAAAA,QAAQ,EAAEL,MAAM,CAACK,QAJD;AAKhBC,YAAAA,IAAI,EAAEN,MAAM,CAACM;AALG;AAFA;AAFZ,OAAP;;AAaD,SAAK,oBAAL;AAA2B;AAC1B,cAAM;AAAE,WAAEN,MAAM,CAACG,IAAT,GAAiBI,CAAnB;AAAsB,aAAGC;AAAzB,YACLT,KADK,aACLA,KADK,uBACLA,KAAK,CAAIC,MAAM,CAACE,KAAX,CADN;AAEA,eAAO,EACN,GAAGH,KADG;AAEN,WAAEC,MAAM,CAACE,KAAT,GAAkBM;AAFZ,SAAP;AAIA;AAtBF;;AAyBA,SAAOT,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASU,cAAT,GAA8C;AAAA,MAArBV,KAAqB,uEAAb,EAAa;AAAA,MAATC,MAAS;;AAC7C,UAASA,MAAM,CAACC,IAAhB;AACC,SAAK,yBAAL;AACC,aAAO,EACN,GAAGF,KADG;AAEN,SAAEC,MAAM,CAACE,KAAT,GAAkB,EACjB,GAAGH,KAAK,CAAEC,MAAM,CAACE,KAAT,CADS;AAEjB,WAAEF,MAAM,CAACG,IAAT,GAAiB;AAChBA,YAAAA,IAAI,EAAEH,MAAM,CAACG,IADG;AAEhBO,YAAAA,IAAI,EAAEV,MAAM,CAACU;AAFG;AAFA;AAFZ,OAAP;;AAUD,SAAK,2BAAL;AAAkC;AACjC,cAAM;AAAE,WAAEV,MAAM,CAACG,IAAT,GAAiBI,CAAnB;AAAsB,aAAGC;AAAzB,YACLT,KADK,aACLA,KADK,uBACLA,KAAK,CAAIC,MAAM,CAACE,KAAX,CADN;AAEA,eAAO,EACN,GAAGH,KADG;AAEN,WAAEC,MAAM,CAACE,KAAT,GAAkBM;AAFZ,SAAP;AAIA;AAnBF;;AAsBA,SAAOT,KAAP;AACA;;AAED,MAAMY,OAAO,GAAG,2BAAiB;AAChCb,EAAAA,QADgC;AAEhCW,EAAAA;AAFgC,CAAjB,CAAhB;eAKeE,O","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { combineReducers } from '@wordpress/data';\n\n/**\n * Reducer returning the registered commands\n *\n * @param {Object} state Current state.\n * @param {Object} action Dispatched action.\n *\n * @return {Object} Updated state.\n */\nfunction commands( state = {}, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'REGISTER_COMMAND':\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\t[ action.group ]: {\n\t\t\t\t\t...state[ action.group ],\n\t\t\t\t\t[ action.name ]: {\n\t\t\t\t\t\tname: action.name,\n\t\t\t\t\t\tlabel: action.label,\n\t\t\t\t\t\tgroup: action.group,\n\t\t\t\t\t\tcallback: action.callback,\n\t\t\t\t\t\ticon: action.icon,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t};\n\t\tcase 'UNREGISTER_COMMAND': {\n\t\t\tconst { [ action.name ]: _, ...remainingState } =\n\t\t\t\tstate?.[ action.group ];\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\t[ action.group ]: remainingState,\n\t\t\t};\n\t\t}\n\t}\n\n\treturn state;\n}\n\n/**\n * Reducer returning the command loaders\n *\n * @param {Object} state Current state.\n * @param {Object} action Dispatched action.\n *\n * @return {Object} Updated state.\n */\nfunction commandLoaders( state = {}, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'REGISTER_COMMAND_LOADER':\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\t[ action.group ]: {\n\t\t\t\t\t...state[ action.group ],\n\t\t\t\t\t[ action.name ]: {\n\t\t\t\t\t\tname: action.name,\n\t\t\t\t\t\thook: action.hook,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t};\n\t\tcase 'UNREGISTER_COMMAND_LOADER': {\n\t\t\tconst { [ action.name ]: _, ...remainingState } =\n\t\t\t\tstate?.[ action.group ];\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\t[ action.group ]: remainingState,\n\t\t\t};\n\t\t}\n\t}\n\n\treturn state;\n}\n\nconst reducer = combineReducers( {\n\tcommands,\n\tcommandLoaders,\n} );\n\nexport default reducer;\n"]}
1
+ {"version":3,"sources":["@wordpress/commands/src/store/reducer.js"],"names":["commands","state","action","type","name","label","searchLabel","context","callback","icon","_","remainingState","commandLoaders","hook","isOpen","reducer"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,QAAT,GAAwC;AAAA,MAArBC,KAAqB,uEAAb,EAAa;AAAA,MAATC,MAAS;;AACvC,UAASA,MAAM,CAACC,IAAhB;AACC,SAAK,kBAAL;AACC,aAAO,EACN,GAAGF,KADG;AAEN,SAAEC,MAAM,CAACE,IAAT,GAAiB;AAChBA,UAAAA,IAAI,EAAEF,MAAM,CAACE,IADG;AAEhBC,UAAAA,KAAK,EAAEH,MAAM,CAACG,KAFE;AAGhBC,UAAAA,WAAW,EAAEJ,MAAM,CAACI,WAHJ;AAIhBC,UAAAA,OAAO,EAAEL,MAAM,CAACK,OAJA;AAKhBC,UAAAA,QAAQ,EAAEN,MAAM,CAACM,QALD;AAMhBC,UAAAA,IAAI,EAAEP,MAAM,CAACO;AANG;AAFX,OAAP;;AAWD,SAAK,oBAAL;AAA2B;AAC1B,cAAM;AAAE,WAAEP,MAAM,CAACE,IAAT,GAAiBM,CAAnB;AAAsB,aAAGC;AAAzB,YAA4CV,KAAlD;AACA,eAAOU,cAAP;AACA;AAhBF;;AAmBA,SAAOV,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASW,cAAT,GAA8C;AAAA,MAArBX,KAAqB,uEAAb,EAAa;AAAA,MAATC,MAAS;;AAC7C,UAASA,MAAM,CAACC,IAAhB;AACC,SAAK,yBAAL;AACC,aAAO,EACN,GAAGF,KADG;AAEN,SAAEC,MAAM,CAACE,IAAT,GAAiB;AAChBA,UAAAA,IAAI,EAAEF,MAAM,CAACE,IADG;AAEhBG,UAAAA,OAAO,EAAEL,MAAM,CAACK,OAFA;AAGhBM,UAAAA,IAAI,EAAEX,MAAM,CAACW;AAHG;AAFX,OAAP;;AAQD,SAAK,2BAAL;AAAkC;AACjC,cAAM;AAAE,WAAEX,MAAM,CAACE,IAAT,GAAiBM,CAAnB;AAAsB,aAAGC;AAAzB,YAA4CV,KAAlD;AACA,eAAOU,cAAP;AACA;AAbF;;AAgBA,SAAOV,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASa,MAAT,GAAyC;AAAA,MAAxBb,KAAwB,uEAAhB,KAAgB;AAAA,MAATC,MAAS;;AACxC,UAASA,MAAM,CAACC,IAAhB;AACC,SAAK,MAAL;AACC,aAAO,IAAP;;AACD,SAAK,OAAL;AACC,aAAO,KAAP;AAJF;;AAOA,SAAOF,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASM,OAAT,GAA2C;AAAA,MAAzBN,KAAyB,uEAAjB,MAAiB;AAAA,MAATC,MAAS;;AAC1C,UAASA,MAAM,CAACC,IAAhB;AACC,SAAK,aAAL;AACC,aAAOD,MAAM,CAACK,OAAd;AAFF;;AAKA,SAAON,KAAP;AACA;;AAED,MAAMc,OAAO,GAAG,2BAAiB;AAChCf,EAAAA,QADgC;AAEhCY,EAAAA,cAFgC;AAGhCE,EAAAA,MAHgC;AAIhCP,EAAAA;AAJgC,CAAjB,CAAhB;eAOeQ,O","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { combineReducers } from '@wordpress/data';\n\n/**\n * Reducer returning the registered commands\n *\n * @param {Object} state Current state.\n * @param {Object} action Dispatched action.\n *\n * @return {Object} Updated state.\n */\nfunction commands( state = {}, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'REGISTER_COMMAND':\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\t[ action.name ]: {\n\t\t\t\t\tname: action.name,\n\t\t\t\t\tlabel: action.label,\n\t\t\t\t\tsearchLabel: action.searchLabel,\n\t\t\t\t\tcontext: action.context,\n\t\t\t\t\tcallback: action.callback,\n\t\t\t\t\ticon: action.icon,\n\t\t\t\t},\n\t\t\t};\n\t\tcase 'UNREGISTER_COMMAND': {\n\t\t\tconst { [ action.name ]: _, ...remainingState } = state;\n\t\t\treturn remainingState;\n\t\t}\n\t}\n\n\treturn state;\n}\n\n/**\n * Reducer returning the command loaders\n *\n * @param {Object} state Current state.\n * @param {Object} action Dispatched action.\n *\n * @return {Object} Updated state.\n */\nfunction commandLoaders( state = {}, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'REGISTER_COMMAND_LOADER':\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\t[ action.name ]: {\n\t\t\t\t\tname: action.name,\n\t\t\t\t\tcontext: action.context,\n\t\t\t\t\thook: action.hook,\n\t\t\t\t},\n\t\t\t};\n\t\tcase 'UNREGISTER_COMMAND_LOADER': {\n\t\t\tconst { [ action.name ]: _, ...remainingState } = state;\n\t\t\treturn remainingState;\n\t\t}\n\t}\n\n\treturn state;\n}\n\n/**\n * Reducer returning the command center open state.\n *\n * @param {Object} state Current state.\n * @param {Object} action Dispatched action.\n *\n * @return {boolean} Updated state.\n */\nfunction isOpen( state = false, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'OPEN':\n\t\t\treturn true;\n\t\tcase 'CLOSE':\n\t\t\treturn false;\n\t}\n\n\treturn state;\n}\n\n/**\n * Reducer returning the command center's active context.\n *\n * @param {Object} state Current state.\n * @param {Object} action Dispatched action.\n *\n * @return {boolean} Updated state.\n */\nfunction context( state = 'root', action ) {\n\tswitch ( action.type ) {\n\t\tcase 'SET_CONTEXT':\n\t\t\treturn action.context;\n\t}\n\n\treturn state;\n}\n\nconst reducer = combineReducers( {\n\tcommands,\n\tcommandLoaders,\n\tisOpen,\n\tcontext,\n} );\n\nexport default reducer;\n"]}
@@ -5,29 +5,37 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.getGroups = exports.getCommands = exports.getCommandLoaders = void 0;
8
+ exports.getCommands = exports.getCommandLoaders = void 0;
9
+ exports.getContext = getContext;
10
+ exports.isOpen = isOpen;
9
11
 
10
12
  var _rememo = _interopRequireDefault(require("rememo"));
11
13
 
12
14
  /**
13
15
  * External dependencies
14
16
  */
15
- function unique(array) {
16
- return array.filter((value, index, current) => current.indexOf(value) === index);
17
- }
18
-
19
- const getGroups = (0, _rememo.default)(state => unique(Object.keys(state.commands).concat(Object.keys(state.commandLoaders))), state => [state.commands, state.commandLoaders]);
20
- exports.getGroups = getGroups;
21
- const getCommands = (0, _rememo.default)((state, group) => {
22
- var _state$commands$group;
23
-
24
- return Object.values((_state$commands$group = state.commands[group]) !== null && _state$commands$group !== void 0 ? _state$commands$group : {});
25
- }, (state, group) => [state.commands[group]]);
17
+ const getCommands = (0, _rememo.default)(function (state) {
18
+ let contextual = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
19
+ return Object.values(state.commands).filter(command => {
20
+ const isContextual = command.context && command.context === state.context;
21
+ return contextual ? isContextual : !isContextual;
22
+ });
23
+ }, state => [state.commands, state.context]);
26
24
  exports.getCommands = getCommands;
27
- const getCommandLoaders = (0, _rememo.default)((state, group) => {
28
- var _state$commandLoaders;
29
-
30
- return Object.values((_state$commandLoaders = state.commandLoaders[group]) !== null && _state$commandLoaders !== void 0 ? _state$commandLoaders : {});
31
- }, (state, group) => [state.commandLoaders[group]]);
25
+ const getCommandLoaders = (0, _rememo.default)(function (state) {
26
+ let contextual = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
27
+ return Object.values(state.commandLoaders).filter(loader => {
28
+ const isContextual = loader.context && loader.context === state.context;
29
+ return contextual ? isContextual : !isContextual;
30
+ });
31
+ }, state => [state.commandLoaders, state.context]);
32
32
  exports.getCommandLoaders = getCommandLoaders;
33
+
34
+ function isOpen(state) {
35
+ return state.isOpen;
36
+ }
37
+
38
+ function getContext(state) {
39
+ return state.context;
40
+ }
33
41
  //# sourceMappingURL=selectors.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/commands/src/store/selectors.js"],"names":["unique","array","filter","value","index","current","indexOf","getGroups","state","Object","keys","commands","concat","commandLoaders","getCommands","group","values","getCommandLoaders"],"mappings":";;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGA,SAASA,MAAT,CAAiBC,KAAjB,EAAyB;AACxB,SAAOA,KAAK,CAACC,MAAN,CACN,CAAEC,KAAF,EAASC,KAAT,EAAgBC,OAAhB,KAA6BA,OAAO,CAACC,OAAR,CAAiBH,KAAjB,MAA6BC,KADpD,CAAP;AAGA;;AAEM,MAAMG,SAAS,GAAG,qBACtBC,KAAF,IACCR,MAAM,CACLS,MAAM,CAACC,IAAP,CAAaF,KAAK,CAACG,QAAnB,EAA8BC,MAA9B,CACCH,MAAM,CAACC,IAAP,CAAaF,KAAK,CAACK,cAAnB,CADD,CADK,CAFiB,EAOtBL,KAAF,IAAa,CAAEA,KAAK,CAACG,QAAR,EAAkBH,KAAK,CAACK,cAAxB,CAPW,CAAlB;;AASA,MAAMC,WAAW,GAAG,qBAC1B,CAAEN,KAAF,EAASO,KAAT;AAAA;;AAAA,SAAoBN,MAAM,CAACO,MAAP,0BAAeR,KAAK,CAACG,QAAN,CAAgBI,KAAhB,CAAf,yEAA0C,EAA1C,CAApB;AAAA,CAD0B,EAE1B,CAAEP,KAAF,EAASO,KAAT,KAAoB,CAAEP,KAAK,CAACG,QAAN,CAAgBI,KAAhB,CAAF,CAFM,CAApB;;AAKA,MAAME,iBAAiB,GAAG,qBAChC,CAAET,KAAF,EAASO,KAAT;AAAA;;AAAA,SAAoBN,MAAM,CAACO,MAAP,0BAAeR,KAAK,CAACK,cAAN,CAAsBE,KAAtB,CAAf,yEAAgD,EAAhD,CAApB;AAAA,CADgC,EAEhC,CAAEP,KAAF,EAASO,KAAT,KAAoB,CAAEP,KAAK,CAACK,cAAN,CAAsBE,KAAtB,CAAF,CAFY,CAA1B","sourcesContent":["/**\n * External dependencies\n */\nimport createSelector from 'rememo';\n\nfunction unique( array ) {\n\treturn array.filter(\n\t\t( value, index, current ) => current.indexOf( value ) === index\n\t);\n}\n\nexport const getGroups = createSelector(\n\t( state ) =>\n\t\tunique(\n\t\t\tObject.keys( state.commands ).concat(\n\t\t\t\tObject.keys( state.commandLoaders )\n\t\t\t)\n\t\t),\n\t( state ) => [ state.commands, state.commandLoaders ]\n);\nexport const getCommands = createSelector(\n\t( state, group ) => Object.values( state.commands[ group ] ?? {} ),\n\t( state, group ) => [ state.commands[ group ] ]\n);\n\nexport const getCommandLoaders = createSelector(\n\t( state, group ) => Object.values( state.commandLoaders[ group ] ?? {} ),\n\t( state, group ) => [ state.commandLoaders[ group ] ]\n);\n"]}
1
+ {"version":3,"sources":["@wordpress/commands/src/store/selectors.js"],"names":["getCommands","state","contextual","Object","values","commands","filter","command","isContextual","context","getCommandLoaders","commandLoaders","loader","isOpen","getContext"],"mappings":";;;;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGO,MAAMA,WAAW,GAAG,qBAC1B,UAAEC,KAAF;AAAA,MAASC,UAAT,uEAAsB,KAAtB;AAAA,SACCC,MAAM,CAACC,MAAP,CAAeH,KAAK,CAACI,QAArB,EAAgCC,MAAhC,CAA0CC,OAAF,IAAe;AACtD,UAAMC,YAAY,GACjBD,OAAO,CAACE,OAAR,IAAmBF,OAAO,CAACE,OAAR,KAAoBR,KAAK,CAACQ,OAD9C;AAEA,WAAOP,UAAU,GAAGM,YAAH,GAAkB,CAAEA,YAArC;AACA,GAJD,CADD;AAAA,CAD0B,EAOxBP,KAAF,IAAa,CAAEA,KAAK,CAACI,QAAR,EAAkBJ,KAAK,CAACQ,OAAxB,CAPa,CAApB;;AAUA,MAAMC,iBAAiB,GAAG,qBAChC,UAAET,KAAF;AAAA,MAASC,UAAT,uEAAsB,KAAtB;AAAA,SACCC,MAAM,CAACC,MAAP,CAAeH,KAAK,CAACU,cAArB,EAAsCL,MAAtC,CAAgDM,MAAF,IAAc;AAC3D,UAAMJ,YAAY,GACjBI,MAAM,CAACH,OAAP,IAAkBG,MAAM,CAACH,OAAP,KAAmBR,KAAK,CAACQ,OAD5C;AAEA,WAAOP,UAAU,GAAGM,YAAH,GAAkB,CAAEA,YAArC;AACA,GAJD,CADD;AAAA,CADgC,EAO9BP,KAAF,IAAa,CAAEA,KAAK,CAACU,cAAR,EAAwBV,KAAK,CAACQ,OAA9B,CAPmB,CAA1B;;;AAUA,SAASI,MAAT,CAAiBZ,KAAjB,EAAyB;AAC/B,SAAOA,KAAK,CAACY,MAAb;AACA;;AAEM,SAASC,UAAT,CAAqBb,KAArB,EAA6B;AACnC,SAAOA,KAAK,CAACQ,OAAb;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport createSelector from 'rememo';\n\nexport const getCommands = createSelector(\n\t( state, contextual = false ) =>\n\t\tObject.values( state.commands ).filter( ( command ) => {\n\t\t\tconst isContextual =\n\t\t\t\tcommand.context && command.context === state.context;\n\t\t\treturn contextual ? isContextual : ! isContextual;\n\t\t} ),\n\t( state ) => [ state.commands, state.context ]\n);\n\nexport const getCommandLoaders = createSelector(\n\t( state, contextual = false ) =>\n\t\tObject.values( state.commandLoaders ).filter( ( loader ) => {\n\t\t\tconst isContextual =\n\t\t\t\tloader.context && loader.context === state.context;\n\t\t\treturn contextual ? isContextual : ! isContextual;\n\t\t} ),\n\t( state ) => [ state.commandLoaders, state.context ]\n);\n\nexport function isOpen( state ) {\n\treturn state.isOpen;\n}\n\nexport function getContext( state ) {\n\treturn state.context;\n}\n"]}
@@ -39,21 +39,30 @@ function CommandMenuLoader(_ref) {
39
39
  useEffect(() => {
40
40
  setLoader(name, isLoading);
41
41
  }, [setLoader, name, isLoading]);
42
- return createElement(Fragment, null, createElement(Command.List, null, isLoading && createElement(Command.Loading, null, __('Searching…')), commands.map(command => createElement(Command.Item, {
43
- key: command.name,
44
- value: command.name,
45
- onSelect: () => command.callback({
46
- close
47
- })
48
- }, createElement(HStack, {
49
- alignment: "left",
50
- className: "commands-command-menu__item"
51
- }, createElement(Icon, {
52
- icon: command.icon
53
- }), createElement("span", null, createElement(TextHighlight, {
54
- text: command.label,
55
- highlight: search
56
- })))))));
42
+
43
+ if (!commands.length) {
44
+ return null;
45
+ }
46
+
47
+ return createElement(Fragment, null, createElement(Command.List, null, commands.map(command => {
48
+ var _command$searchLabel;
49
+
50
+ return createElement(Command.Item, {
51
+ key: command.name,
52
+ value: (_command$searchLabel = command.searchLabel) !== null && _command$searchLabel !== void 0 ? _command$searchLabel : command.label,
53
+ onSelect: () => command.callback({
54
+ close
55
+ })
56
+ }, createElement(HStack, {
57
+ alignment: "left",
58
+ className: "commands-command-menu__item"
59
+ }, createElement(Icon, {
60
+ icon: command.icon
61
+ }), createElement("span", null, createElement(TextHighlight, {
62
+ text: command.label,
63
+ highlight: search
64
+ }))));
65
+ })));
57
66
  }
58
67
 
59
68
  export function CommandMenuLoaderWrapper(_ref2) {
@@ -86,7 +95,7 @@ export function CommandMenuLoaderWrapper(_ref2) {
86
95
  }
87
96
  export function CommandMenuGroup(_ref3) {
88
97
  let {
89
- group,
98
+ isContextual,
90
99
  search,
91
100
  setLoader,
92
101
  close
@@ -100,25 +109,34 @@ export function CommandMenuGroup(_ref3) {
100
109
  getCommandLoaders
101
110
  } = select(commandsStore);
102
111
  return {
103
- commands: getCommands(group),
104
- loaders: getCommandLoaders(group)
112
+ commands: getCommands(isContextual),
113
+ loaders: getCommandLoaders(isContextual)
105
114
  };
106
- }, [group]);
107
- return createElement(Command.Group, null, commands.map(command => createElement(Command.Item, {
108
- key: command.name,
109
- value: command.name,
110
- onSelect: () => command.callback({
111
- close
112
- })
113
- }, createElement(HStack, {
114
- alignment: "left",
115
- className: "commands-command-menu__item"
116
- }, createElement(Icon, {
117
- icon: command.icon
118
- }), createElement("span", null, createElement(TextHighlight, {
119
- text: command.label,
120
- highlight: search
121
- }))))), loaders.map(loader => createElement(CommandMenuLoaderWrapper, {
115
+ }, [isContextual]);
116
+
117
+ if (!commands.length && !loaders.length) {
118
+ return null;
119
+ }
120
+
121
+ return createElement(Command.Group, null, commands.map(command => {
122
+ var _command$searchLabel2;
123
+
124
+ return createElement(Command.Item, {
125
+ key: command.name,
126
+ value: (_command$searchLabel2 = command.searchLabel) !== null && _command$searchLabel2 !== void 0 ? _command$searchLabel2 : command.label,
127
+ onSelect: () => command.callback({
128
+ close
129
+ })
130
+ }, createElement(HStack, {
131
+ alignment: "left",
132
+ className: "commands-command-menu__item"
133
+ }, createElement(Icon, {
134
+ icon: command.icon
135
+ }), createElement("span", null, createElement(TextHighlight, {
136
+ text: command.label,
137
+ highlight: search
138
+ }))));
139
+ }), loaders.map(loader => createElement(CommandMenuLoaderWrapper, {
122
140
  key: loader.name,
123
141
  hook: loader.hook,
124
142
  search: search,
@@ -131,18 +149,13 @@ export function CommandMenu() {
131
149
  registerShortcut
132
150
  } = useDispatch(keyboardShortcutsStore);
133
151
  const [search, setSearch] = useState('');
134
- const [open, setOpen] = useState(false);
152
+ const isOpen = useSelect(select => select(commandsStore).isOpen(), []);
135
153
  const {
136
- groups
137
- } = useSelect(select => {
138
- const {
139
- getGroups
140
- } = select(commandsStore);
141
- return {
142
- groups: getGroups()
143
- };
144
- }, []);
154
+ open,
155
+ close
156
+ } = useDispatch(commandsStore);
145
157
  const [loaders, setLoaders] = useState({});
158
+ const commandMenuInput = useRef();
146
159
  useEffect(() => {
147
160
  registerShortcut({
148
161
  name: 'core/commands',
@@ -156,7 +169,12 @@ export function CommandMenu() {
156
169
  }, [registerShortcut]);
157
170
  useShortcut('core/commands', event => {
158
171
  event.preventDefault();
159
- setOpen(prevOpen => !prevOpen);
172
+
173
+ if (isOpen) {
174
+ close();
175
+ } else {
176
+ open();
177
+ }
160
178
  }, {
161
179
  bindGlobal: true
162
180
  });
@@ -164,12 +182,19 @@ export function CommandMenu() {
164
182
  [name]: value
165
183
  })), []);
166
184
 
167
- const close = () => {
185
+ const closeAndReset = () => {
168
186
  setSearch('');
169
- setOpen(false);
187
+ close();
170
188
  };
171
189
 
172
- if (!open) {
190
+ useEffect(() => {
191
+ // Focus the command menu input when mounting the modal.
192
+ if (isOpen) {
193
+ commandMenuInput.current.focus();
194
+ }
195
+ }, [isOpen]);
196
+
197
+ if (!isOpen) {
173
198
  return false;
174
199
  }
175
200
 
@@ -177,7 +202,7 @@ export function CommandMenu() {
177
202
  return createElement(Modal, {
178
203
  className: "commands-command-menu",
179
204
  overlayClassName: "commands-command-menu__overlay",
180
- onRequestClose: close,
205
+ onRequestClose: closeAndReset,
181
206
  __experimentalHideHeader: true
182
207
  }, createElement("div", {
183
208
  className: "commands-command-menu__container"
@@ -186,18 +211,19 @@ export function CommandMenu() {
186
211
  }, createElement("div", {
187
212
  className: "commands-command-menu__header"
188
213
  }, createElement(Command.Input, {
189
- // The input should be focused when the modal is opened.
190
- // eslint-disable-next-line jsx-a11y/no-autofocus
191
- autoFocus: true,
214
+ ref: commandMenuInput,
192
215
  value: search,
193
216
  onValueChange: setSearch,
194
217
  placeholder: __('Type a command or search')
195
- })), search && createElement(Command.List, null, !isLoading && createElement(Command.Empty, null, __('No results found.')), groups.map(group => createElement(CommandMenuGroup, {
196
- key: group,
197
- group: group,
218
+ })), createElement(Command.List, null, search && !isLoading && createElement(Command.Empty, null, __('No results found.')), createElement(CommandMenuGroup, {
198
219
  search: search,
199
220
  setLoader: setLoader,
200
- close: close
201
- }))))));
221
+ close: closeAndReset,
222
+ isContextual: true
223
+ }), search && createElement(CommandMenuGroup, {
224
+ search: search,
225
+ setLoader: setLoader,
226
+ close: closeAndReset
227
+ })))));
202
228
  }
203
229
  //# sourceMappingURL=command-menu.js.map