@wordpress/commands 1.42.0 → 1.43.1-next.v.202604091042.0

package/build/components/use-recent-commands.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/use-recent-commands.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tuseSelect,\n\tuseDispatch,\n\tselect as globalSelect,\n\tdispatch,\n} from '@wordpress/data';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport { useCallback, useEffect, useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { store as commandsStore } from '../store';\nimport { unlock } from '../lock-unlock';\n\nconst MAX_RECENTLY_SAVED = 30;\nconst MAX_RECENTLY_DISPLAYED = 5;\nconst EMPTY_ARRAY = [];\nconst EMPTY_SET = new Set();\n\nexport function recordUsage( name ) {\n\tconst current =\n\t\tglobalSelect( preferencesStore ).get(\n\t\t\t'core/commands',\n\t\t\t'recentlyUsed'\n\t\t) ?? [];\n\tconst next = [ name, ...current.filter( ( n ) => n !== name ) ].slice(\n\t\t0,\n\t\tMAX_RECENTLY_SAVED\n\t);\n\tdispatch( preferencesStore ).set( 'core/commands', 'recentlyUsed', next );\n}\n\nexport function useLoaderCollector( hook, name, filterNames, onResolved ) {\n\tconst { setLoaderLoading } = unlock( useDispatch( commandsStore ) );\n\tconst { isLoading: loading, commands = [] } = hook( { search: '' } ) ?? {};\n\n\tuseEffect( () => {\n\t\tsetLoaderLoading( name, loading );\n\t}, [ setLoaderLoading, name, loading ] );\n\n\tconst filtered = filterNames\n\t\t? commands.filter( ( c ) => filterNames.has( c.name ) )\n\t\t: commands;\n\n\tuseEffect( () => {\n\t\tonResolved( name, filtered );\n\t}, [ onResolved, name, filtered ] );\n\n\t// Clear this loader's entries when it unmounts.\n\tuseEffect( () => {\n\t\treturn () => onResolved( name, [] );\n\t}, [ onResolved, name ] );\n}\n\nexport function useRecentCommands() {\n\tconst {\n\t\tcontextualCommands,\n\t\tstaticCommands,\n\t\tcontextualLoaders,\n\t\tstaticLoaders,\n\t\trecentlyUsedNames = EMPTY_ARRAY,\n\t} = useSelect( ( select ) => {\n\t\tconst { getCommands, getCommandLoaders } = select( commandsStore );\n\t\treturn {\n\t\t\tcontextualCommands: getCommands( true ),\n\t\t\tstaticCommands: getCommands( false ),\n\t\t\tcontextualLoaders: getCommandLoaders( true ),\n\t\t\tstaticLoaders: getCommandLoaders( false ),\n\t\t\trecentlyUsedNames: select( preferencesStore ).get(\n\t\t\t\t'core/commands',\n\t\t\t\t'recentlyUsed'\n\t\t\t),\n\t\t};\n\t}, [] );\n\n\tconst [ resolvedMap, setResolvedMap ] = useState( () => new Map() );\n\n\tconst onResolved = useCallback( ( loaderName, cmds ) => {\n\t\tsetResolvedMap( ( prev ) => {\n\t\t\tconst prevCmds = prev.get( loaderName );\n\t\t\tif (\n\t\t\t\tprevCmds &&\n\t\t\t\tprevCmds.length === cmds.length &&\n\t\t\t\tprevCmds.every( ( c, i ) => c.name === cmds[ i ].name )\n\t\t\t) {\n\t\t\t\treturn prev;\n\t\t\t}\n\t\t\tconst next = new Map( prev );\n\t\t\tnext.set( loaderName, cmds );\n\t\t\treturn next;\n\t\t} );\n\t}, [] );\n\n\tconst { recentNames, recentSet } = useMemo( () => {\n\t\tconst names = recentlyUsedNames.slice( 0, MAX_RECENTLY_DISPLAYED );\n\t\treturn { recentNames: names, recentSet: new Set( names ) };\n\t}, [ recentlyUsedNames ] );\n\n\tif ( ! recentlyUsedNames.length ) {\n\t\treturn {\n\t\t\tcommands: [],\n\t\t\tloaders: [],\n\t\t\trecentSet: EMPTY_SET,\n\t\t\tonResolved,\n\t\t};\n\t}\n\n\tconst allStaticCommands = [ ...contextualCommands, ...staticCommands ];\n\tconst loaders = [ ...contextualLoaders, ...staticLoaders ];\n\n\t// Merge static commands with loader-resolved commands.\n\tconst allByName = new Map();\n\tallStaticCommands.forEach( ( c ) => allByName.set( c.name, c ) );\n\tfor ( const cmds of resolvedMap.values() ) {\n\t\tcmds.forEach( ( c ) => {\n\t\t\tif ( ! allByName.has( c.name ) ) {\n\t\t\t\tallByName.set( c.name, c );\n\t\t\t}\n\t\t} );\n\t}\n\t// Return in recency order.\n\tconst commands = recentNames\n\t\t.map( ( n ) => allByName.get( n ) )\n\t\t.filter( Boolean );\n\n\treturn { commands, loaders, recentSet, onResolved };\n}\n"],
+  "mappings": "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",
+  "names": ["globalSelect", "preferencesStore", "commandsStore"]
+}

package/build/store/index.cjs

@@ -37,6 +37,7 @@ var import_reducer = __toESM(require("./reducer.cjs"));
 var actions = __toESM(require("./actions.cjs"));
 var selectors = __toESM(require("./selectors.cjs"));
 var privateActions = __toESM(require("./private-actions.cjs"));
+var privateSelectors = __toESM(require("./private-selectors.cjs"));
 var import_lock_unlock = require("../lock-unlock.cjs");
 var STORE_NAME = "core/commands";
 var store = (0, import_data.createReduxStore)(STORE_NAME, {
@@ -46,6 +47,7 @@ var store = (0, import_data.createReduxStore)(STORE_NAME, {
 });
 (0, import_data.register)(store);
 (0, import_lock_unlock.unlock)(store).registerPrivateActions(privateActions);
+(0, import_lock_unlock.unlock)(store).registerPrivateSelectors(privateSelectors);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   store

package/build/store/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/store/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createReduxStore, register } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport reducer from './reducer';\nimport * as actions from './actions';\nimport * as selectors from './selectors';\nimport * as privateActions from './private-actions';\nimport { unlock } from '../lock-unlock';\n\nconst STORE_NAME = 'core/commands';\n\n/**\n * Store definition for the commands namespace.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore\n *\n * @type {Object}\n *\n * @example\n * ```js\n * import { store as commandsStore } from '@wordpress/commands';\n * import { useDispatch } from '@wordpress/data';\n * ...\n * const { open: openCommandCenter } = useDispatch( commandsStore );\n * ```\n */\nexport const store = createReduxStore( STORE_NAME, {\n\treducer,\n\tactions,\n\tselectors,\n} );\n\nregister( store );\nunlock( store ).registerPrivateActions( privateActions );\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAA2C;AAK3C,qBAAoB;AACpB,cAAyB;AACzB,gBAA2B;AAC3B,qBAAgC;AAChC,yBAAuB;AAEvB,IAAM,aAAa;AAiBZ,IAAM,YAAQ,8BAAkB,YAAY;AAAA,EAClD,wBAAAA;AAAA,EACA;AAAA,EACA;AACD,CAAE;AAAA,IAEF,sBAAU,KAAM;AAAA,IAChB,2BAAQ,KAAM,EAAE,uBAAwB,cAAe;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createReduxStore, register } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport reducer from './reducer';\nimport * as actions from './actions';\nimport * as selectors from './selectors';\nimport * as privateActions from './private-actions';\nimport * as privateSelectors from './private-selectors';\nimport { unlock } from '../lock-unlock';\n\nconst STORE_NAME = 'core/commands';\n\n/**\n * Store definition for the commands namespace.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore\n *\n * @type {Object}\n *\n * @example\n * ```js\n * import { store as commandsStore } from '@wordpress/commands';\n * import { useDispatch } from '@wordpress/data';\n * ...\n * const { open: openCommandCenter } = useDispatch( commandsStore );\n * ```\n */\nexport const store = createReduxStore( STORE_NAME, {\n\treducer,\n\tactions,\n\tselectors,\n} );\n\nregister( store );\nunlock( store ).registerPrivateActions( privateActions );\nunlock( store ).registerPrivateSelectors( privateSelectors );\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAA2C;AAK3C,qBAAoB;AACpB,cAAyB;AACzB,gBAA2B;AAC3B,qBAAgC;AAChC,uBAAkC;AAClC,yBAAuB;AAEvB,IAAM,aAAa;AAiBZ,IAAM,YAAQ,8BAAkB,YAAY;AAAA,EAClD,wBAAAA;AAAA,EACA;AAAA,EACA;AACD,CAAE;AAAA,IAEF,sBAAU,KAAM;AAAA,IAChB,2BAAQ,KAAM,EAAE,uBAAwB,cAAe;AAAA,IACvD,2BAAQ,KAAM,EAAE,yBAA0B,gBAAiB;",
   "names": ["reducer"]
 }

package/build/store/private-actions.cjs

@@ -19,7 +19,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // packages/commands/src/store/private-actions.js
 var private_actions_exports = {};
 __export(private_actions_exports, {
-  setContext: () => setContext
+  setContext: () => setContext,
+  setLoaderLoading: () => setLoaderLoading
 });
 module.exports = __toCommonJS(private_actions_exports);
 function setContext(context) {
@@ -28,8 +29,16 @@ function setContext(context) {
     context
   };
 }
+function setLoaderLoading(name, isLoading) {
+  return {
+    type: "SET_LOADER_LOADING",
+    name,
+    isLoading
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  setContext
+  setContext,
+  setLoaderLoading
 });
 //# sourceMappingURL=private-actions.cjs.map

package/build/store/private-actions.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/store/private-actions.js"],
-  "sourcesContent": ["/**\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"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOO,SAAS,WAAY,SAAU;AACrC,SAAO;AAAA,IACN,MAAM;AAAA,IACN;AAAA,EACD;AACD;",
+  "sourcesContent": ["/**\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\n/**\n * Sets whether a command loader is currently loading.\n *\n * @param {string}  name      Command loader name.\n * @param {boolean} isLoading Whether the loader is loading.\n *\n * @return {Object} action.\n */\nexport function setLoaderLoading( name, isLoading ) {\n\treturn {\n\t\ttype: 'SET_LOADER_LOADING',\n\t\tname,\n\t\tisLoading,\n\t};\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOO,SAAS,WAAY,SAAU;AACrC,SAAO;AAAA,IACN,MAAM;AAAA,IACN;AAAA,EACD;AACD;AAUO,SAAS,iBAAkB,MAAM,WAAY;AACnD,SAAO;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IACA;AAAA,EACD;AACD;",
   "names": []
 }

package/build/store/private-selectors.cjs

@@ -0,0 +1,32 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/commands/src/store/private-selectors.js
+var private_selectors_exports = {};
+__export(private_selectors_exports, {
+  isLoading: () => isLoading
+});
+module.exports = __toCommonJS(private_selectors_exports);
+function isLoading(state) {
+  return Object.values(state.loaderStates).some(Boolean);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  isLoading
+});
+//# sourceMappingURL=private-selectors.cjs.map

package/build/store/private-selectors.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/store/private-selectors.js"],
+  "sourcesContent": ["/**\n * Returns whether any command loader is currently loading.\n *\n * @param {Object} state State tree.\n *\n * @return {boolean} Whether any loader is loading.\n */\nexport function isLoading( state ) {\n\treturn Object.values( state.loaderStates ).some( Boolean );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOO,SAAS,UAAW,OAAQ;AAClC,SAAO,OAAO,OAAQ,MAAM,YAAa,EAAE,KAAM,OAAQ;AAC1D;",
+  "names": []
+}

package/build/store/reducer.cjs

@@ -81,11 +81,22 @@ function context(state = "root", action) {
   }
   return state;
 }
+function loaderStates(state = {}, action) {
+  switch (action.type) {
+    case "SET_LOADER_LOADING":
+      return {
+        ...state,
+        [action.name]: action.isLoading
+      };
+  }
+  return state;
+}
 var reducer = (0, import_data.combineReducers)({
   commands,
   commandLoaders,
   isOpen,
-  context
+  context,
+  loaderStates
 });
 var reducer_default = reducer;
 //# sourceMappingURL=reducer.cjs.map

package/build/store/reducer.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/store/reducer.js"],
-  "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\tcategory: action.category,\n\t\t\t\t\tcallback: action.callback,\n\t\t\t\t\ticon: action.icon,\n\t\t\t\t\tkeywords: action.keywords,\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\tcategory: action.category,\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 palette 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 palette'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"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAgC;AAUhC,SAAS,SAAU,QAAQ,CAAC,GAAG,QAAS;AACvC,UAAS,OAAO,MAAO;AAAA,IACtB,KAAK;AACJ,aAAO;AAAA,QACN,GAAG;AAAA,QACH,CAAE,OAAO,IAAK,GAAG;AAAA,UAChB,MAAM,OAAO;AAAA,UACb,OAAO,OAAO;AAAA,UACd,aAAa,OAAO;AAAA,UACpB,SAAS,OAAO;AAAA,UAChB,UAAU,OAAO;AAAA,UACjB,UAAU,OAAO;AAAA,UACjB,MAAM,OAAO;AAAA,UACb,UAAU,OAAO;AAAA,QAClB;AAAA,MACD;AAAA,IACD,KAAK,sBAAsB;AAC1B,YAAM,EAAE,CAAE,OAAO,IAAK,GAAG,GAAG,GAAG,eAAe,IAAI;AAClD,aAAO;AAAA,IACR;AAAA,EACD;AAEA,SAAO;AACR;AAUA,SAAS,eAAgB,QAAQ,CAAC,GAAG,QAAS;AAC7C,UAAS,OAAO,MAAO;AAAA,IACtB,KAAK;AACJ,aAAO;AAAA,QACN,GAAG;AAAA,QACH,CAAE,OAAO,IAAK,GAAG;AAAA,UAChB,MAAM,OAAO;AAAA,UACb,SAAS,OAAO;AAAA,UAChB,UAAU,OAAO;AAAA,UACjB,MAAM,OAAO;AAAA,QACd;AAAA,MACD;AAAA,IACD,KAAK,6BAA6B;AACjC,YAAM,EAAE,CAAE,OAAO,IAAK,GAAG,GAAG,GAAG,eAAe,IAAI;AAClD,aAAO;AAAA,IACR;AAAA,EACD;AAEA,SAAO;AACR;AAUA,SAAS,OAAQ,QAAQ,OAAO,QAAS;AACxC,UAAS,OAAO,MAAO;AAAA,IACtB,KAAK;AACJ,aAAO;AAAA,IACR,KAAK;AACJ,aAAO;AAAA,EACT;AAEA,SAAO;AACR;AAUA,SAAS,QAAS,QAAQ,QAAQ,QAAS;AAC1C,UAAS,OAAO,MAAO;AAAA,IACtB,KAAK;AACJ,aAAO,OAAO;AAAA,EAChB;AAEA,SAAO;AACR;AAEA,IAAM,cAAU,6BAAiB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,CAAE;AAEF,IAAO,kBAAQ;",
+  "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\tcategory: action.category,\n\t\t\t\t\tcallback: action.callback,\n\t\t\t\t\ticon: action.icon,\n\t\t\t\t\tkeywords: action.keywords,\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\tcategory: action.category,\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 palette 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 palette'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\nfunction loaderStates( state = {}, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'SET_LOADER_LOADING':\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\t[ action.name ]: action.isLoading,\n\t\t\t};\n\t}\n\n\treturn state;\n}\n\nconst reducer = combineReducers( {\n\tcommands,\n\tcommandLoaders,\n\tisOpen,\n\tcontext,\n\tloaderStates,\n} );\n\nexport default reducer;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAgC;AAUhC,SAAS,SAAU,QAAQ,CAAC,GAAG,QAAS;AACvC,UAAS,OAAO,MAAO;AAAA,IACtB,KAAK;AACJ,aAAO;AAAA,QACN,GAAG;AAAA,QACH,CAAE,OAAO,IAAK,GAAG;AAAA,UAChB,MAAM,OAAO;AAAA,UACb,OAAO,OAAO;AAAA,UACd,aAAa,OAAO;AAAA,UACpB,SAAS,OAAO;AAAA,UAChB,UAAU,OAAO;AAAA,UACjB,UAAU,OAAO;AAAA,UACjB,MAAM,OAAO;AAAA,UACb,UAAU,OAAO;AAAA,QAClB;AAAA,MACD;AAAA,IACD,KAAK,sBAAsB;AAC1B,YAAM,EAAE,CAAE,OAAO,IAAK,GAAG,GAAG,GAAG,eAAe,IAAI;AAClD,aAAO;AAAA,IACR;AAAA,EACD;AAEA,SAAO;AACR;AAUA,SAAS,eAAgB,QAAQ,CAAC,GAAG,QAAS;AAC7C,UAAS,OAAO,MAAO;AAAA,IACtB,KAAK;AACJ,aAAO;AAAA,QACN,GAAG;AAAA,QACH,CAAE,OAAO,IAAK,GAAG;AAAA,UAChB,MAAM,OAAO;AAAA,UACb,SAAS,OAAO;AAAA,UAChB,UAAU,OAAO;AAAA,UACjB,MAAM,OAAO;AAAA,QACd;AAAA,MACD;AAAA,IACD,KAAK,6BAA6B;AACjC,YAAM,EAAE,CAAE,OAAO,IAAK,GAAG,GAAG,GAAG,eAAe,IAAI;AAClD,aAAO;AAAA,IACR;AAAA,EACD;AAEA,SAAO;AACR;AAUA,SAAS,OAAQ,QAAQ,OAAO,QAAS;AACxC,UAAS,OAAO,MAAO;AAAA,IACtB,KAAK;AACJ,aAAO;AAAA,IACR,KAAK;AACJ,aAAO;AAAA,EACT;AAEA,SAAO;AACR;AAUA,SAAS,QAAS,QAAQ,QAAQ,QAAS;AAC1C,UAAS,OAAO,MAAO;AAAA,IACtB,KAAK;AACJ,aAAO,OAAO;AAAA,EAChB;AAEA,SAAO;AACR;AAEA,SAAS,aAAc,QAAQ,CAAC,GAAG,QAAS;AAC3C,UAAS,OAAO,MAAO;AAAA,IACtB,KAAK;AACJ,aAAO;AAAA,QACN,GAAG;AAAA,QACH,CAAE,OAAO,IAAK,GAAG,OAAO;AAAA,MACzB;AAAA,EACF;AAEA,SAAO;AACR;AAEA,IAAM,cAAU,6BAAiB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,CAAE;AAEF,IAAO,kBAAQ;",
   "names": []
 }

package/build-module/components/command-menu.mjs

@@ -6,8 +6,6 @@ import {
   useState,
   useEffect,
   useRef,
-  useCallback,
-  useMemo,
   isValidElement,
   Component
 } from "@wordpress/element";
@@ -25,8 +23,14 @@ import {
 import { Icon, search as inputIcon, arrowRight } from "@wordpress/icons";
 import { store as commandsStore } from "../store/index.mjs";
 import { unlock } from "../lock-unlock.mjs";
+import {
+  recordUsage,
+  useLoaderCollector,
+  useRecentCommands
+} from "./use-recent-commands.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var { withIgnoreIMEEvents } = unlock(componentsPrivateApis);
+var ITEM_ID_PREFIX = "command-palette-item-";
 var inputLabel = __("Search commands and settings");
 var CATEGORY_ICONS = {
   view: arrowRight
@@ -41,68 +45,66 @@ var CATEGORY_LABELS = {
 function isValidIcon(icon) {
   return !!icon && (typeof icon === "string" || isValidElement(icon) || typeof icon === "function" || icon instanceof Component);
 }
-function CommandMenuLoader({
-  name,
-  search,
-  hook,
-  setLoader,
-  close,
-  category
-}) {
-  const { isLoading, commands = [] } = hook({ search }) ?? {};
+function CommandItem({ command, search, category, valuePrefix }) {
+  const { close } = useDispatch(commandsStore);
+  const commandCategory = category ?? command.category;
+  const label = command.searchLabel ?? command.label;
+  const value = valuePrefix ? `${valuePrefix}${command.name}` : label;
+  return /* @__PURE__ */ jsx(
+    Command.Item,
+    {
+      id: `${ITEM_ID_PREFIX}${value.toLowerCase()}`,
+      value,
+      keywords: valuePrefix ? [...command.keywords ?? [], label] : command.keywords,
+      onSelect: () => {
+        recordUsage(command.name);
+        command.callback({ close });
+      },
+      children: /* @__PURE__ */ jsxs(
+        HStack,
+        {
+          alignment: "left",
+          className: clsx("commands-command-menu__item", {
+            "has-icon": CATEGORY_ICONS[commandCategory] || command.icon
+          }),
+          children: [
+            CATEGORY_ICONS[commandCategory] ? /* @__PURE__ */ jsx(Icon, { icon: CATEGORY_ICONS[commandCategory] }) : isValidIcon(command.icon) && /* @__PURE__ */ jsx(Icon, { icon: command.icon }),
+            /* @__PURE__ */ jsx("span", { className: "commands-command-menu__item-label", children: /* @__PURE__ */ jsx(
+              TextHighlight,
+              {
+                text: command.label,
+                highlight: search
+              }
+            ) }),
+            CATEGORY_LABELS[commandCategory] && /* @__PURE__ */ jsx("span", { className: "commands-command-menu__item-category", children: CATEGORY_LABELS[commandCategory] })
+          ]
+        }
+      )
+    },
+    command.name
+  );
+}
+function CommandMenuLoader({ name, search, hook, category, valuePrefix }) {
+  const { setLoaderLoading } = unlock(useDispatch(commandsStore));
+  const { isLoading: loading, commands = [] } = hook({ search }) ?? {};
   useEffect(() => {
-    setLoader(name, isLoading);
-  }, [setLoader, name, isLoading]);
+    setLoaderLoading(name, loading);
+  }, [setLoaderLoading, name, loading]);
   if (!commands.length) {
     return null;
   }
-  return /* @__PURE__ */ jsx(Fragment, { children: commands.map((command) => {
-    const commandCategory = command.category ?? category;
-    return /* @__PURE__ */ jsx(
-      Command.Item,
-      {
-        value: command.searchLabel ?? command.label,
-        keywords: command.keywords,
-        onSelect: () => command.callback({ close }),
-        id: command.name,
-        children: /* @__PURE__ */ jsxs(
-          HStack,
-          {
-            alignment: "left",
-            className: clsx("commands-command-menu__item", {
-              "has-icon": CATEGORY_ICONS[commandCategory] || command.icon
-            }),
-            children: [
-              CATEGORY_ICONS[commandCategory] && /* @__PURE__ */ jsx(
-                Icon,
-                {
-                  icon: CATEGORY_ICONS[commandCategory]
-                }
-              ),
-              !CATEGORY_ICONS[commandCategory] && isValidIcon(command.icon) && /* @__PURE__ */ jsx(Icon, { icon: command.icon }),
-              /* @__PURE__ */ jsx("span", { className: "commands-command-menu__item-label", children: /* @__PURE__ */ jsx(
-                TextHighlight,
-                {
-                  text: command.label,
-                  highlight: search
-                }
-              ) }),
-              CATEGORY_LABELS[commandCategory] && /* @__PURE__ */ jsx("span", { className: "commands-command-menu__item-category", children: CATEGORY_LABELS[commandCategory] })
-            ]
-          }
-        )
-      },
-      command.name
-    );
-  }) });
+  return /* @__PURE__ */ jsx(Fragment, { children: commands.map((command) => /* @__PURE__ */ jsx(
+    CommandItem,
+    {
+      command,
+      search,
+      category: command.category ?? category,
+      valuePrefix
+    },
+    command.name
+  )) });
 }
-function CommandMenuLoaderWrapper({
-  hook,
-  search,
-  setLoader,
-  close,
-  category
-}) {
+function CommandMenuLoaderWrapper({ hook, ...props }) {
   const currentLoaderRef = useRef(hook);
   const [key, setKey] = useState(0);
   useEffect(() => {
@@ -115,86 +117,112 @@ function CommandMenuLoaderWrapper({
     CommandMenuLoader,
     {
       hook: currentLoaderRef.current,
-      search,
-      setLoader,
-      close,
-      category
+      ...props
     },
     key
   );
 }
-function CommandMenuGroup({ isContextual, search, setLoader, close }) {
-  const { commands, loaders } = useSelect(
-    (select) => {
-      const { getCommands, getCommandLoaders } = select(commandsStore);
-      return {
-        commands: getCommands(isContextual),
-        loaders: getCommandLoaders(isContextual)
-      };
-    },
-    [isContextual]
-  );
-  if (!commands.length && !loaders.length) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(Command.Group, { children: [
+function CommandList({ search, commands, loaders, valuePrefix }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     commands.map((command) => /* @__PURE__ */ jsx(
-      Command.Item,
+      CommandItem,
       {
-        value: command.searchLabel ?? command.label,
-        keywords: command.keywords,
-        onSelect: () => command.callback({ close }),
-        id: command.name,
-        children: /* @__PURE__ */ jsxs(
-          HStack,
-          {
-            alignment: "left",
-            className: clsx("commands-command-menu__item", {
-              "has-icon": CATEGORY_ICONS[command.category] || command.icon
-            }),
-            children: [
-              CATEGORY_ICONS[command.category] ? /* @__PURE__ */ jsx(Icon, { icon: CATEGORY_ICONS[command.category] }) : command.icon && /* @__PURE__ */ jsx(Icon, { icon: command.icon }),
-              /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
-                TextHighlight,
-                {
-                  text: command.label,
-                  highlight: search
-                }
-              ) }),
-              CATEGORY_LABELS[command.category] && /* @__PURE__ */ jsx("span", { className: "commands-command-menu__item-category", children: CATEGORY_LABELS[command.category] })
-            ]
-          }
-        )
+        command,
+        search,
+        valuePrefix
       },
       command.name
     )),
     loaders.map((loader) => /* @__PURE__ */ jsx(
       CommandMenuLoaderWrapper,
       {
-        hook: loader.hook,
+        name: loader.name,
         search,
-        setLoader,
-        close,
-        category: loader.category
+        hook: loader.hook,
+        category: loader.category,
+        valuePrefix
       },
       loader.name
     ))
   ] });
 }
-function CommandInput({ isOpen, search, setSearch }) {
+function RecentLoaderRunner({ hook, name, filterNames, onResolved }) {
+  useLoaderCollector(hook, name, filterNames, onResolved);
+  return null;
+}
+function RecentGroup() {
+  const { commands, loaders, recentSet, onResolved } = useRecentCommands();
+  if (!commands.length && !loaders.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Command.Group, { heading: __("Recent"), children: [
+    loaders.map((loader) => /* @__PURE__ */ jsx(
+      RecentLoaderRunner,
+      {
+        name: loader.name,
+        hook: loader.hook,
+        filterNames: recentSet,
+        onResolved
+      },
+      loader.name
+    )),
+    commands.map((command) => /* @__PURE__ */ jsx(
+      CommandItem,
+      {
+        command,
+        search: "",
+        valuePrefix: "recent-"
+      },
+      command.name
+    ))
+  ] });
+}
+function SuggestionsGroup() {
+  const { commands, loaders } = useSelect((select) => {
+    const { getCommands, getCommandLoaders } = select(commandsStore);
+    return {
+      commands: getCommands(true),
+      loaders: getCommandLoaders(true)
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(Command.Group, { heading: __("Suggestions"), children: /* @__PURE__ */ jsx(CommandList, { search: "", commands, loaders }) });
+}
+function ResultsGroup({ search }) {
+  const { commands, contextualCommands, loaders, contextualLoaders } = useSelect((select) => {
+    const { getCommands, getCommandLoaders } = select(commandsStore);
+    return {
+      commands: getCommands(false),
+      contextualCommands: getCommands(true),
+      loaders: getCommandLoaders(false),
+      contextualLoaders: getCommandLoaders(true)
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(Command.Group, { heading: __("Results"), children: [
+    /* @__PURE__ */ jsx(
+      CommandList,
+      {
+        search,
+        commands,
+        loaders
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CommandList,
+      {
+        search,
+        commands: contextualCommands,
+        loaders: contextualLoaders
+      }
+    )
+  ] });
+}
+function CommandInput({ search, setSearch }) {
   const commandMenuInput = useRef();
   const _value = useCommandState((state) => state.value);
-  const selectedItemId = useMemo(() => {
-    const item = document.querySelector(
-      `[cmdk-item=""][data-value="${_value}"]`
-    );
-    return item?.getAttribute("id");
-  }, [_value]);
+  const selectedItemId = _value ? `${ITEM_ID_PREFIX}${_value}` : null;
   useEffect(() => {
-    if (isOpen) {
-      commandMenuInput.current.focus();
-    }
-  }, [isOpen]);
+    commandMenuInput.current.focus();
+  }, []);
   return /* @__PURE__ */ jsx(
     Command.Input,
     {
@@ -209,12 +237,14 @@ function CommandInput({ isOpen, search, setSearch }) {
 function CommandMenu() {
   const { registerShortcut } = useDispatch(keyboardShortcutsStore);
   const [search, setSearch] = useState("");
-  const isOpen = useSelect(
-    (select) => select(commandsStore).isOpen(),
+  const { isOpen: paletteIsOpen, loadersLoading } = useSelect(
+    (select) => ({
+      isOpen: select(commandsStore).isOpen(),
+      loadersLoading: unlock(select(commandsStore)).isLoading()
+    }),
     []
   );
   const { open, close } = useDispatch(commandsStore);
-  const [loaders, setLoaders] = useState({});
   useEffect(() => {
     registerShortcut({
       name: "core/commands",
@@ -234,7 +264,7 @@ function CommandMenu() {
         return;
       }
       event.preventDefault();
-      if (isOpen) {
+      if (paletteIsOpen) {
         close();
       } else {
         open();
@@ -244,21 +274,13 @@ function CommandMenu() {
       bindGlobal: true
     }
   );
-  const setLoader = useCallback(
-    (name, value) => setLoaders((current) => ({
-      ...current,
-      [name]: value
-    })),
-    []
-  );
   const closeAndReset = () => {
     setSearch("");
     close();
   };
-  if (!isOpen) {
+  if (!paletteIsOpen) {
     return false;
   }
-  const isLoading = Object.values(loaders).some(Boolean);
   return /* @__PURE__ */ jsx(
     Modal,
     {
@@ -266,8 +288,9 @@ function CommandMenu() {
       overlayClassName: "commands-command-menu__overlay",
       onRequestClose: closeAndReset,
       __experimentalHideHeader: true,
+      size: "medium",
       contentLabel: __("Command palette"),
-      children: /* @__PURE__ */ jsx("div", { className: "commands-command-menu__container", children: /* @__PURE__ */ jsxs(Command, { label: inputLabel, children: [
+      children: /* @__PURE__ */ jsx("div", { className: "commands-command-menu__container", children: /* @__PURE__ */ jsxs(Command, { label: inputLabel, loop: true, children: [
         /* @__PURE__ */ jsxs("div", { className: "commands-command-menu__header", children: [
           /* @__PURE__ */ jsx(
             Icon,
@@ -280,30 +303,15 @@ function CommandMenu() {
             CommandInput,
             {
               search,
-              setSearch,
-              isOpen
+              setSearch
             }
           )
         ] }),
         /* @__PURE__ */ jsxs(Command.List, { label: __("Command suggestions"), children: [
-          search && !isLoading && /* @__PURE__ */ jsx(Command.Empty, { children: __("No results found.") }),
-          /* @__PURE__ */ jsx(
-            CommandMenuGroup,
-            {
-              search,
-              setLoader,
-              close: closeAndReset,
-              isContextual: true
-            }
-          ),
-          search && /* @__PURE__ */ jsx(
-            CommandMenuGroup,
-            {
-              search,
-              setLoader,
-              close: closeAndReset
-            }
-          )
+          search && !loadersLoading && /* @__PURE__ */ jsx(Command.Empty, { children: __("No results found.") }),
+          !search && /* @__PURE__ */ jsx(RecentGroup, {}),
+          !search && /* @__PURE__ */ jsx(SuggestionsGroup, {}),
+          search && /* @__PURE__ */ jsx(ResultsGroup, { search })
         ] })
       ] }) })
     }
@@ -311,8 +319,6 @@ function CommandMenu() {
 }
 export {
   CommandMenu,
-  CommandMenuGroup,
-  CommandMenuLoaderWrapper,
   isValidIcon
 };
 //# sourceMappingURL=command-menu.mjs.map