@veiag/payload-cmdk 1.0.0

package/dist/exports/rsc.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/exports/rsc.ts"],"names":[],"mappings":""}

package/dist/hooks/useMutationObserver.d.ts

@@ -0,0 +1 @@
+export declare const useMutationObserver: (ref: React.RefObject<HTMLElement | null>, callback: MutationCallback, options?: MutationObserverInit) => void;

package/dist/hooks/useMutationObserver.js

@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+export const useMutationObserver = (ref, callback, options = {
+    attributes: true,
+    characterData: true,
+    childList: true,
+    subtree: true
+})=>{
+    useEffect(()=>{
+        if (ref.current) {
+            const observer = new MutationObserver(callback);
+            observer.observe(ref.current, options);
+            return ()=>observer.disconnect();
+        }
+    }, [
+        ref,
+        callback,
+        options
+    ]);
+};
+
+//# sourceMappingURL=useMutationObserver.js.map

package/dist/hooks/useMutationObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useMutationObserver.ts"],"sourcesContent":["import { useEffect } from 'react'\n\nexport const useMutationObserver = (\n  ref: React.RefObject<HTMLElement | null>,\n  callback: MutationCallback,\n  options: MutationObserverInit = {\n    attributes: true,\n    characterData: true,\n    childList: true,\n    subtree: true,\n  },\n) => {\n  useEffect(() => {\n    if (ref.current) {\n      const observer = new MutationObserver(callback)\n      observer.observe(ref.current, options)\n      return () => observer.disconnect()\n    }\n  }, [ref, callback, options])\n}\n"],"names":["useEffect","useMutationObserver","ref","callback","options","attributes","characterData","childList","subtree","current","observer","MutationObserver","observe","disconnect"],"mappings":"AAAA,SAASA,SAAS,QAAQ,QAAO;AAEjC,OAAO,MAAMC,sBAAsB,CACjCC,KACAC,UACAC,UAAgC;IAC9BC,YAAY;IACZC,eAAe;IACfC,WAAW;IACXC,SAAS;AACX,CAAC;IAEDR,UAAU;QACR,IAAIE,IAAIO,OAAO,EAAE;YACf,MAAMC,WAAW,IAAIC,iBAAiBR;YACtCO,SAASE,OAAO,CAACV,IAAIO,OAAO,EAAEL;YAC9B,OAAO,IAAMM,SAASG,UAAU;QAClC;IACF,GAAG;QAACX;QAAKC;QAAUC;KAAQ;AAC7B,EAAC"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import { type Config } from 'payload';
+import type { PluginCommandMenuConfig } from './types';
+export declare const payloadCmdk: (pluginOptions: PluginCommandMenuConfig) => (config: Config) => Config;

package/dist/index.js

@@ -0,0 +1,74 @@
+import { deepMerge } from 'payload';
+import { commandPluginTranslations } from './translations';
+export const payloadCmdk = (pluginOptions)=>(config)=>{
+        /**
+     * If the plugin is disabled, we still want to keep added collections/fields so the database schema is consistent which is important for migrations.
+     * If your plugin heavily modifies the database schema, you may want to remove this property.
+     */ if (pluginOptions.disabled) {
+            return config;
+        }
+        if (!config.admin) {
+            config.admin = {};
+        }
+        if (!config.admin.components) {
+            config.admin.components = {};
+        }
+        if (!config.admin.components.providers) {
+            config.admin.components.providers = [];
+        }
+        config.admin.components.providers.push({
+            clientProps: {
+                pluginConfig: pluginOptions
+            },
+            path: '@veiag/payload-cmdk/client#CommandMenuProvider'
+        });
+        if (pluginOptions.searchButton !== false) {
+            let searchButtonPosition = 'actions';
+            if (pluginOptions.searchButton && pluginOptions.searchButton.position) {
+                searchButtonPosition = pluginOptions.searchButton.position;
+            }
+            if (searchButtonPosition === 'nav') {
+                if (!config.admin.components.beforeNavLinks) {
+                    config.admin.components.beforeNavLinks = [];
+                }
+                config.admin.components.beforeNavLinks = [
+                    {
+                        clientProps: {
+                            position: pluginOptions.searchButton?.position || 'nav',
+                            shortcut: pluginOptions.shortcut || [
+                                'meta+k',
+                                'ctrl+k'
+                            ]
+                        },
+                        path: '@veiag/payload-cmdk/client#SearchButton'
+                    },
+                    ...config.admin.components.beforeNavLinks
+                ];
+            } else {
+                if (!config.admin.components.actions) {
+                    config.admin.components.actions = [];
+                }
+                config.admin.components.actions.push({
+                    clientProps: {
+                        position: pluginOptions.searchButton?.position || 'actions',
+                        shortcut: pluginOptions.shortcut || [
+                            'meta+k',
+                            'ctrl+k'
+                        ]
+                    },
+                    path: '@veiag/payload-cmdk/client#SearchButton'
+                });
+            }
+        }
+        //Adding translations
+        if (!config.i18n) {
+            config.i18n = {};
+        }
+        if (!config.i18n.translations) {
+            config.i18n.translations = {};
+        }
+        config.i18n.translations = deepMerge(config.i18n.translations, commandPluginTranslations);
+        return config;
+    };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { type Config, deepMerge } from 'payload'\n\nimport type { PluginCommandMenuConfig } from './types'\n\nimport { commandPluginTranslations } from './translations'\n\nexport const payloadCmdk =\n  (pluginOptions: PluginCommandMenuConfig) =>\n  (config: Config): Config => {\n    /**\n     * If the plugin is disabled, we still want to keep added collections/fields so the database schema is consistent which is important for migrations.\n     * If your plugin heavily modifies the database schema, you may want to remove this property.\n     */\n    if (pluginOptions.disabled) {\n      return config\n    }\n\n    if (!config.admin) {\n      config.admin = {}\n    }\n\n    if (!config.admin.components) {\n      config.admin.components = {}\n    }\n\n    if (!config.admin.components.providers) {\n      config.admin.components.providers = []\n    }\n\n    config.admin.components.providers.push({\n      clientProps: {\n        pluginConfig: pluginOptions,\n      },\n      path: '@veiag/payload-cmdk/client#CommandMenuProvider',\n    })\n\n    if (pluginOptions.searchButton !== false) {\n      let searchButtonPosition = 'actions'\n      if (pluginOptions.searchButton && pluginOptions.searchButton.position) {\n        searchButtonPosition = pluginOptions.searchButton.position\n      }\n      if (searchButtonPosition === 'nav') {\n        if (!config.admin.components.beforeNavLinks) {\n          config.admin.components.beforeNavLinks = []\n        }\n        config.admin.components.beforeNavLinks = [\n          {\n            clientProps: {\n              position: pluginOptions.searchButton?.position || 'nav',\n              shortcut: pluginOptions.shortcut || ['meta+k', 'ctrl+k'],\n            },\n            path: '@veiag/payload-cmdk/client#SearchButton',\n          },\n          ...config.admin.components.beforeNavLinks,\n        ]\n      } else {\n        if (!config.admin.components.actions) {\n          config.admin.components.actions = []\n        }\n        config.admin.components.actions.push({\n          clientProps: {\n            position: pluginOptions.searchButton?.position || 'actions',\n            shortcut: pluginOptions.shortcut || ['meta+k', 'ctrl+k'],\n          },\n          path: '@veiag/payload-cmdk/client#SearchButton',\n        })\n      }\n    }\n\n    //Adding translations\n    if (!config.i18n) {\n      config.i18n = {}\n    }\n    if (!config.i18n.translations) {\n      config.i18n.translations = {}\n    }\n\n    config.i18n.translations = deepMerge(config.i18n.translations, commandPluginTranslations)\n\n    return config\n  }\n"],"names":["deepMerge","commandPluginTranslations","payloadCmdk","pluginOptions","config","disabled","admin","components","providers","push","clientProps","pluginConfig","path","searchButton","searchButtonPosition","position","beforeNavLinks","shortcut","actions","i18n","translations"],"mappings":"AAAA,SAAsBA,SAAS,QAAQ,UAAS;AAIhD,SAASC,yBAAyB,QAAQ,iBAAgB;AAE1D,OAAO,MAAMC,cACX,CAACC,gBACD,CAACC;QACC;;;KAGC,GACD,IAAID,cAAcE,QAAQ,EAAE;YAC1B,OAAOD;QACT;QAEA,IAAI,CAACA,OAAOE,KAAK,EAAE;YACjBF,OAAOE,KAAK,GAAG,CAAC;QAClB;QAEA,IAAI,CAACF,OAAOE,KAAK,CAACC,UAAU,EAAE;YAC5BH,OAAOE,KAAK,CAACC,UAAU,GAAG,CAAC;QAC7B;QAEA,IAAI,CAACH,OAAOE,KAAK,CAACC,UAAU,CAACC,SAAS,EAAE;YACtCJ,OAAOE,KAAK,CAACC,UAAU,CAACC,SAAS,GAAG,EAAE;QACxC;QAEAJ,OAAOE,KAAK,CAACC,UAAU,CAACC,SAAS,CAACC,IAAI,CAAC;YACrCC,aAAa;gBACXC,cAAcR;YAChB;YACAS,MAAM;QACR;QAEA,IAAIT,cAAcU,YAAY,KAAK,OAAO;YACxC,IAAIC,uBAAuB;YAC3B,IAAIX,cAAcU,YAAY,IAAIV,cAAcU,YAAY,CAACE,QAAQ,EAAE;gBACrED,uBAAuBX,cAAcU,YAAY,CAACE,QAAQ;YAC5D;YACA,IAAID,yBAAyB,OAAO;gBAClC,IAAI,CAACV,OAAOE,KAAK,CAACC,UAAU,CAACS,cAAc,EAAE;oBAC3CZ,OAAOE,KAAK,CAACC,UAAU,CAACS,cAAc,GAAG,EAAE;gBAC7C;gBACAZ,OAAOE,KAAK,CAACC,UAAU,CAACS,cAAc,GAAG;oBACvC;wBACEN,aAAa;4BACXK,UAAUZ,cAAcU,YAAY,EAAEE,YAAY;4BAClDE,UAAUd,cAAcc,QAAQ,IAAI;gCAAC;gCAAU;6BAAS;wBAC1D;wBACAL,MAAM;oBACR;uBACGR,OAAOE,KAAK,CAACC,UAAU,CAACS,cAAc;iBAC1C;YACH,OAAO;gBACL,IAAI,CAACZ,OAAOE,KAAK,CAACC,UAAU,CAACW,OAAO,EAAE;oBACpCd,OAAOE,KAAK,CAACC,UAAU,CAACW,OAAO,GAAG,EAAE;gBACtC;gBACAd,OAAOE,KAAK,CAACC,UAAU,CAACW,OAAO,CAACT,IAAI,CAAC;oBACnCC,aAAa;wBACXK,UAAUZ,cAAcU,YAAY,EAAEE,YAAY;wBAClDE,UAAUd,cAAcc,QAAQ,IAAI;4BAAC;4BAAU;yBAAS;oBAC1D;oBACAL,MAAM;gBACR;YACF;QACF;QAEA,qBAAqB;QACrB,IAAI,CAACR,OAAOe,IAAI,EAAE;YAChBf,OAAOe,IAAI,GAAG,CAAC;QACjB;QACA,IAAI,CAACf,OAAOe,IAAI,CAACC,YAAY,EAAE;YAC7BhB,OAAOe,IAAI,CAACC,YAAY,GAAG,CAAC;QAC9B;QAEAhB,OAAOe,IAAI,CAACC,YAAY,GAAGpB,UAAUI,OAAOe,IAAI,CAACC,YAAY,EAAEnB;QAE/D,OAAOG;IACT,EAAC"}

package/dist/translations/index.d.ts

@@ -0,0 +1,32 @@
+import type { NestedKeysStripped } from '@payloadcms/translations';
+import type { enTranslations } from '@payloadcms/translations/languages/en';
+export declare const commandPluginTranslations: {
+    en: {
+        cmdkPlugin: {
+            loading: string;
+            navigate: string;
+            noResults: string;
+            open: string;
+            search: string;
+            searchIn: string;
+            searchInCollection: string;
+            searchShort: string;
+        };
+    };
+    uk: {
+        cmdkPlugin: {
+            loading: string;
+            navigate: string;
+            noResults: string;
+            open: string;
+            search: string;
+            searchIn: string;
+            searchInCollection: string;
+            searchShort: string;
+        };
+    };
+};
+export type AvaibleTranslation = keyof typeof commandPluginTranslations.en.cmdkPlugin;
+export type CustomTranslationsObject = typeof commandPluginTranslations.en & typeof enTranslations;
+export type CustomTranslationsKeys = NestedKeysStripped<CustomTranslationsObject>;
+export declare const mergeTranslations: (existingTranslations: Record<string, unknown>, newTranslations: Record<string, unknown>) => Record<string, unknown>;

package/dist/translations/index.js

@@ -0,0 +1,38 @@
+export const commandPluginTranslations = {
+    en: {
+        cmdkPlugin: {
+            loading: 'Loading...',
+            navigate: 'to navigate',
+            noResults: 'No results found',
+            open: 'to open',
+            search: 'Search collections, globals...',
+            searchIn: 'Search in {{label}}',
+            searchInCollection: 'to search in collection',
+            searchShort: 'Search'
+        }
+    },
+    uk: {
+        cmdkPlugin: {
+            loading: 'Завантаження...',
+            navigate: 'щоб перейти',
+            noResults: 'Результатів не знайдено',
+            open: 'щоб відкрити',
+            search: 'Пошук колекцій, глобалів...',
+            searchIn: 'Пошук в {{label}}',
+            searchInCollection: 'щоб шукати в колекції',
+            searchShort: 'Пошук'
+        }
+    }
+};
+export const mergeTranslations = (existingTranslations, newTranslations)=>{
+    return {
+        ...existingTranslations,
+        ...newTranslations,
+        cmdkPlugin: {
+            ...existingTranslations.cmdkPlugin || {},
+            ...newTranslations.cmdkPlugin || {}
+        }
+    };
+};
+
+//# sourceMappingURL=index.js.map

package/dist/translations/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/translations/index.ts"],"sourcesContent":["import type { NestedKeysStripped } from '@payloadcms/translations'\nimport type { enTranslations } from '@payloadcms/translations/languages/en'\n\nexport const commandPluginTranslations = {\n  en: {\n    cmdkPlugin: {\n      loading: 'Loading...',\n      navigate: 'to navigate',\n      noResults: 'No results found',\n      open: 'to open',\n      search: 'Search collections, globals...',\n      searchIn: 'Search in {{label}}',\n      searchInCollection: 'to search in collection',\n      searchShort: 'Search',\n    },\n  },\n  uk: {\n    cmdkPlugin: {\n      loading: 'Завантаження...',\n      navigate: 'щоб перейти',\n      noResults: 'Результатів не знайдено',\n      open: 'щоб відкрити',\n      search: 'Пошук колекцій, глобалів...',\n      searchIn: 'Пошук в {{label}}',\n      searchInCollection: 'щоб шукати в колекції',\n      searchShort: 'Пошук',\n    },\n  },\n}\n\nexport type AvaibleTranslation = keyof typeof commandPluginTranslations.en.cmdkPlugin\n\nexport type CustomTranslationsObject = typeof commandPluginTranslations.en & typeof enTranslations\n\nexport type CustomTranslationsKeys = NestedKeysStripped<CustomTranslationsObject>\n\nexport const mergeTranslations = (\n  existingTranslations: Record<string, unknown>,\n  newTranslations: Record<string, unknown>,\n): Record<string, unknown> => {\n  return {\n    ...existingTranslations,\n    ...newTranslations,\n    cmdkPlugin: {\n      ...(existingTranslations.cmdkPlugin || {}),\n      ...(newTranslations.cmdkPlugin || {}),\n    },\n  }\n}\n"],"names":["commandPluginTranslations","en","cmdkPlugin","loading","navigate","noResults","open","search","searchIn","searchInCollection","searchShort","uk","mergeTranslations","existingTranslations","newTranslations"],"mappings":"AAGA,OAAO,MAAMA,4BAA4B;IACvCC,IAAI;QACFC,YAAY;YACVC,SAAS;YACTC,UAAU;YACVC,WAAW;YACXC,MAAM;YACNC,QAAQ;YACRC,UAAU;YACVC,oBAAoB;YACpBC,aAAa;QACf;IACF;IACAC,IAAI;QACFT,YAAY;YACVC,SAAS;YACTC,UAAU;YACVC,WAAW;YACXC,MAAM;YACNC,QAAQ;YACRC,UAAU;YACVC,oBAAoB;YACpBC,aAAa;QACf;IACF;AACF,EAAC;AAQD,OAAO,MAAME,oBAAoB,CAC/BC,sBACAC;IAEA,OAAO;QACL,GAAGD,oBAAoB;QACvB,GAAGC,eAAe;QAClBZ,YAAY;YACV,GAAIW,qBAAqBX,UAAU,IAAI,CAAC,CAAC;YACzC,GAAIY,gBAAgBZ,UAAU,IAAI,CAAC,CAAC;QACtC;IACF;AACF,EAAC"}

package/dist/types.d.ts

@@ -0,0 +1,223 @@
+import type { LucideIcon } from 'lucide-react';
+import type { IconName } from 'lucide-react/dynamic';
+import type { CollectionSlug, GlobalSlug } from 'payload';
+export type LocalizedString = {
+    [locale: string]: string;
+} | string;
+export type InternalIcon = IconName | LucideIcon;
+/**
+ * Custom menu item, for configuration.
+ * Will be mapped to CommandMenuItem internally.
+ */
+export type CustomMenuItem = {
+    action: CommandMenuAction;
+    icon?: IconName;
+    label: LocalizedString;
+    slug: string;
+    type: 'item';
+};
+/**
+ * Custom menu group, for configuration.
+ * Will be mapped to CommandMenuGroup internally.
+ *
+ * Groups will be merged if they have the same title.
+ */
+export type CustomMenuGroup = {
+    items: CustomMenuItem[];
+    title: LocalizedString;
+    type: 'group';
+};
+/**
+ * Full serializable config for the plugin.
+ */
+export type PluginCommandMenuConfig = {
+    /**
+     * Enable backdrop blur effect
+     * @default true
+     */
+    blurBg?: boolean;
+    /**
+     * Custom items or groups to add to the command menu.
+     */
+    customItems?: (CustomMenuGroup | CustomMenuItem)[];
+    /**
+     * Disable the plugin functionality
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Custom icons for collections and globals.
+     * Key is the collection slug, value is the icon name from lucide-react.
+     * Collections default icon - Files,
+     * Globals default icon - Globe.
+     */
+    icons?: {
+        /**
+         * Custom icons for collections.
+         * @default <Files/>
+         */
+        collections?: {
+            [key: CollectionSlug]: IconName;
+        };
+        /**
+         * Custom icons for globals.
+         * @default <Globe/>
+         */
+        globals?: {
+            [key: GlobalSlug]: IconName;
+        };
+    };
+    /**
+     * Configuration for the search button in the admin navigation.
+     * Set to false to disable the search button.
+     * @default { position: 'actions' }
+     */
+    searchButton?: {
+        /**
+         * Position of the search button in the admin navigation.
+         * @default 'actions'
+         */
+        position?: 'actions' | 'nav';
+    } | false;
+    /**
+     * Keyboard shortcut to open the command menu.
+     * Can be a single shortcut string or an array of shortcuts for cross-platform support.
+     * @default ['meta+k', 'ctrl+k']
+     * @example 'mod+k' or ['meta+k', 'ctrl+k']
+     *
+     * More details here - https://react-hotkeys-hook.vercel.app/docs/intro
+     */
+    shortcut?: string | string[];
+    /**
+     * Specify which collections slugs remove from the command menu.
+     * @default ['payload-migrations','payload-preferences','payload-locked-documents']
+     *
+     * You can also provide an object with `ignoreList` and `replaceDefaults` properties.
+     * `replaceDefaults` allows you to completely replace the default slugs to ignore instead of appending to them.
+     */
+    slugsToIgnore?: {
+        /**
+         * List of collection/global slugs to ignore in the command menu.
+         */
+        ignoreList: CollectionSlug[];
+        /**
+         * Whether to replace the default slugs to ignore instead of appending to them.
+         */
+        replaceDefaults?: boolean;
+    } | CollectionSlug[];
+    /**
+     * Configure submenu behavior for collections.
+     * When enabled, users can search within a collection's documents.
+     * @default { enabled: true, shortcut: 'shift+enter' }
+     */
+    submenu?: {
+        /**
+         * Enable or disable submenu functionality.
+         * @default true
+         */
+        enabled?: boolean;
+        /**
+         * Custom icons for collection submenus.
+         * Key is the collection slug, value is the icon name from lucide-react.
+         *
+         * @default null
+         */
+        icons?: {
+            [key: CollectionSlug]: IconName;
+        };
+        /**
+         * Keyboard shortcut to open collection submenu.
+         * - 'shift+enter': Shift+Enter opens submenu, Enter navigates to collection list
+         * - 'enter': Enter opens submenu, Shift+Enter navigates to collection list
+         * @default 'shift+enter'
+         */
+        shortcut?: 'enter' | 'shift+enter';
+    };
+};
+export interface CommandMenuContextProps {
+    children: React.ReactNode;
+    pluginConfig: PluginCommandMenuConfig;
+}
+export interface CommandMenuActionLink {
+    href: string;
+    type: 'link';
+}
+export interface CommandMenuActionAPICall {
+    body?: {
+        [key: string]: unknown;
+    };
+    href: string;
+    /**
+     * HTTP method to use for the API call.
+     * @default 'GET'
+     */
+    method?: 'DELETE' | 'GET' | 'POST' | 'PUT';
+    type: 'api';
+}
+export type CommandMenuAction = CommandMenuActionAPICall | CommandMenuActionLink;
+export interface CommandMenuItem {
+    /**
+     * Action to perform when the command menu item is selected.
+     */
+    action: CommandMenuAction;
+    icon?: InternalIcon;
+    label: string;
+    slug: string;
+    /**
+     * Type of the command menu item. Used for grouping and icons.
+     * @default 'custom'
+     */
+    type: 'collection' | 'custom' | 'global';
+    /**
+     * Field name used as title for collection documents.
+     * Only applicable for collection type items.
+     * Defaults to 'id' if not specified.
+     */
+    useAsTitle?: string;
+    /**
+     * Label for the field used as title for collection documents.
+     * Only applicable for collection type items.
+     *
+     * Used in submenu search placeholder.
+     */
+    useAsTitleLabel?: string;
+}
+export interface CommandMenuGroup {
+    items: CommandMenuItem[];
+    title: string;
+}
+/**
+ * Page state for command menu navigation.
+ * - 'main': Default view showing all collections/globals/custom items
+ * - CollectionSearchPage: Submenu view for searching within a specific collection
+ */
+export type CommandMenuPage = 'main' | {
+    /**
+     * Collection label for display
+     */
+    label: string;
+    /**
+     * Collection slug
+     */
+    slug: string;
+    /**
+     * Page type identifier
+     */
+    type: 'collection-search';
+    /**
+     * Field name to use as document title
+     */
+    useAsTitle: string;
+    /**
+     * Label for the field used as title
+     */
+    useAsTitleLabel: string;
+};
+/**
+ * Generic document type for collections, with dynamic keys.
+ * We assume values are either string or number for simplicity, useAsTitle is making sure of that.
+ */
+export type GenericCollectionDocument = {
+    [key: string]: number | string;
+    id: string;
+};

package/dist/types.js

@@ -0,0 +1,6 @@
+/**
+ * Generic document type for collections, with dynamic keys.
+ * We assume values are either string or number for simplicity, useAsTitle is making sure of that.
+ */ export { };
+
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import type { LucideIcon } from 'lucide-react'\nimport type { IconName } from 'lucide-react/dynamic'\nimport type { CollectionSlug, GlobalSlug } from 'payload'\n\nexport type LocalizedString = { [locale: string]: string } | string\n\nexport type InternalIcon = IconName | LucideIcon\n\n/**\n * Custom menu item, for configuration.\n * Will be mapped to CommandMenuItem internally.\n */\nexport type CustomMenuItem = {\n  action: CommandMenuAction\n  icon?: IconName\n  label: LocalizedString\n  slug: string\n  type: 'item'\n}\n\n/**\n * Custom menu group, for configuration.\n * Will be mapped to CommandMenuGroup internally.\n *\n * Groups will be merged if they have the same title.\n */\nexport type CustomMenuGroup = {\n  items: CustomMenuItem[]\n  title: LocalizedString\n  type: 'group'\n}\n/**\n * Full serializable config for the plugin.\n */\nexport type PluginCommandMenuConfig = {\n  /**\n   * Enable backdrop blur effect\n   * @default true\n   */\n  blurBg?: boolean\n  /**\n   * Custom items or groups to add to the command menu.\n   */\n  customItems?: (CustomMenuGroup | CustomMenuItem)[]\n  /**\n   * Disable the plugin functionality\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Custom icons for collections and globals.\n   * Key is the collection slug, value is the icon name from lucide-react.\n   * Collections default icon - Files,\n   * Globals default icon - Globe.\n   */\n  icons?: {\n    /**\n     * Custom icons for collections.\n     * @default <Files/>\n     */\n    collections?: {\n      [key: CollectionSlug]: IconName\n    }\n    /**\n     * Custom icons for globals.\n     * @default <Globe/>\n     */\n    globals?: {\n      [key: GlobalSlug]: IconName\n    }\n  }\n  /**\n   * Configuration for the search button in the admin navigation.\n   * Set to false to disable the search button.\n   * @default { position: 'actions' }\n   */\n  searchButton?:\n    | {\n        /**\n         * Position of the search button in the admin navigation.\n         * @default 'actions'\n         */\n        position?: 'actions' | 'nav'\n      }\n    | false\n  /**\n   * Keyboard shortcut to open the command menu.\n   * Can be a single shortcut string or an array of shortcuts for cross-platform support.\n   * @default ['meta+k', 'ctrl+k']\n   * @example 'mod+k' or ['meta+k', 'ctrl+k']\n   *\n   * More details here - https://react-hotkeys-hook.vercel.app/docs/intro\n   */\n  shortcut?: string | string[]\n  /**\n   * Specify which collections slugs remove from the command menu.\n   * @default ['payload-migrations','payload-preferences','payload-locked-documents']\n   *\n   * You can also provide an object with `ignoreList` and `replaceDefaults` properties.\n   * `replaceDefaults` allows you to completely replace the default slugs to ignore instead of appending to them.\n   */\n  slugsToIgnore?:\n    | {\n        /**\n         * List of collection/global slugs to ignore in the command menu.\n         */\n        ignoreList: CollectionSlug[]\n        /**\n         * Whether to replace the default slugs to ignore instead of appending to them.\n         */\n        replaceDefaults?: boolean\n      }\n    | CollectionSlug[]\n  /**\n   * Configure submenu behavior for collections.\n   * When enabled, users can search within a collection's documents.\n   * @default { enabled: true, shortcut: 'shift+enter' }\n   */\n  submenu?: {\n    /**\n     * Enable or disable submenu functionality.\n     * @default true\n     */\n    enabled?: boolean\n    /**\n     * Custom icons for collection submenus.\n     * Key is the collection slug, value is the icon name from lucide-react.\n     *\n     * @default null\n     */\n    icons?: {\n      [key: CollectionSlug]: IconName\n    }\n    /**\n     * Keyboard shortcut to open collection submenu.\n     * - 'shift+enter': Shift+Enter opens submenu, Enter navigates to collection list\n     * - 'enter': Enter opens submenu, Shift+Enter navigates to collection list\n     * @default 'shift+enter'\n     */\n    shortcut?: 'enter' | 'shift+enter'\n  }\n}\n\nexport interface CommandMenuContextProps {\n  children: React.ReactNode\n  pluginConfig: PluginCommandMenuConfig\n}\n\nexport interface CommandMenuActionLink {\n  href: string\n  type: 'link'\n}\n\nexport interface CommandMenuActionAPICall {\n  body?: {\n    [key: string]: unknown\n  }\n  href: string\n  /**\n   * HTTP method to use for the API call.\n   * @default 'GET'\n   */\n  method?: 'DELETE' | 'GET' | 'POST' | 'PUT'\n  type: 'api'\n}\n\nexport type CommandMenuAction = CommandMenuActionAPICall | CommandMenuActionLink\n\nexport interface CommandMenuItem {\n  /**\n   * Action to perform when the command menu item is selected.\n   */\n  action: CommandMenuAction\n  icon?: InternalIcon\n  label: string\n  slug: string\n  /**\n   * Type of the command menu item. Used for grouping and icons.\n   * @default 'custom'\n   */\n  type: 'collection' | 'custom' | 'global'\n\n  /**\n   * Field name used as title for collection documents.\n   * Only applicable for collection type items.\n   * Defaults to 'id' if not specified.\n   */\n  useAsTitle?: string\n  /**\n   * Label for the field used as title for collection documents.\n   * Only applicable for collection type items.\n   *\n   * Used in submenu search placeholder.\n   */\n  useAsTitleLabel?: string\n}\n\nexport interface CommandMenuGroup {\n  items: CommandMenuItem[]\n  title: string\n}\n\n/**\n * Page state for command menu navigation.\n * - 'main': Default view showing all collections/globals/custom items\n * - CollectionSearchPage: Submenu view for searching within a specific collection\n */\nexport type CommandMenuPage =\n  | 'main'\n  | {\n      /**\n       * Collection label for display\n       */\n      label: string\n      /**\n       * Collection slug\n       */\n      slug: string\n      /**\n       * Page type identifier\n       */\n      type: 'collection-search'\n      /**\n       * Field name to use as document title\n       */\n      useAsTitle: string\n      /**\n       * Label for the field used as title\n       */\n      useAsTitleLabel: string\n    }\n\n/**\n * Generic document type for collections, with dynamic keys.\n * We assume values are either string or number for simplicity, useAsTitle is making sure of that.\n */\nexport type GenericCollectionDocument = {\n  [key: string]: number | string\n  id: string\n}\n"],"names":[],"mappings":"AAwOA;;;CAGC,GACD,WAGC"}

package/dist/utils/index.d.ts

@@ -0,0 +1,30 @@
+import type { ClientConfig, LabelFunction } from 'payload';
+import type { CommandMenuGroup, CommandMenuItem, CustomMenuGroup, CustomMenuItem, LocalizedString, PluginCommandMenuConfig } from 'src/types';
+export declare const convertSlugToTitle: (slug: string) => string;
+export declare const extractLocalizedValue: (value: LocalizedString, locale: string, slug?: string) => string;
+export declare const extractLocalizedCollectionName: (collection: {
+    labels?: {
+        plural?: LocalizedString;
+        singular?: LocalizedString;
+    };
+    slug: string;
+}, locale: string) => string;
+export declare const extractLocalizedGlobalName: (global: {
+    label?: LabelFunction | LocalizedString;
+    slug: string;
+}, locale: string) => string;
+export declare const extractLocalizedGroupName: (object: {
+    admin?: {
+        group?: false | LocalizedString;
+    };
+}, locale: string) => null | string;
+export declare const convertConfigItem: (item: CustomMenuItem, currentLang: string) => CommandMenuItem;
+export declare const convertConfigGroup: (group: CustomMenuGroup, currentLang: string) => CommandMenuGroup;
+export declare const createDefaultGroups: (config: ClientConfig, currentLang: string, pluginConfig: PluginCommandMenuConfig) => {
+    groups: CommandMenuGroup[];
+    /**
+     * Stray items that don't belong to any group.
+     * Only with custom items.
+     */
+    items: CommandMenuItem[];
+};

package/dist/utils/index.js

@@ -0,0 +1,191 @@
+import { Files, Globe } from 'lucide-react';
+export const convertSlugToTitle = (slug)=>{
+    return slug.replace(/-/g, ' ').replace(/\b\w/g, (char)=>char.toUpperCase());
+};
+export const extractLocalizedValue = (value, locale, slug)=>{
+    if (typeof value === 'string') {
+        return value;
+    }
+    return value[locale] || convertSlugToTitle(slug || '');
+};
+export const extractLocalizedCollectionName = (collection, locale)=>{
+    //Get plural name if exists, otherwise singular, otherwise slug
+    if (collection.labels?.plural) {
+        return extractLocalizedValue(collection.labels.plural, locale, collection.slug);
+    }
+    if (collection.labels?.singular) {
+        return extractLocalizedValue(collection.labels.singular, locale, collection.slug);
+    }
+    return '' //Generally should not happen
+    ;
+};
+export const extractLocalizedGlobalName = (global, locale)=>{
+    if (global.label) {
+        return extractLocalizedValue(//Ignore label functions, they are not serializable
+        typeof global.label === 'function' ? {} : global.label, locale, global.slug);
+    }
+    return '' //Generally should not happen
+    ;
+};
+export const extractLocalizedGroupName = (object, locale)=>{
+    if (object.admin?.group) {
+        //Try to extract group name, with fallback to null (no group)
+        return extractLocalizedValue(object.admin.group, locale)?.trim() || null;
+    }
+    return null;
+};
+export const convertConfigItem = (item, currentLang)=>{
+    return {
+        slug: item.slug,
+        type: 'custom',
+        action: item.action,
+        icon: item.icon,
+        label: extractLocalizedValue(item.label, currentLang, item.slug)
+    };
+};
+export const convertConfigGroup = (group, currentLang)=>{
+    return {
+        items: group.items.map((item)=>convertConfigItem(item, currentLang)),
+        title: extractLocalizedValue(group.title, currentLang)
+    };
+};
+/**
+ * Set of collection/globals slugs to ignore in the command menu.
+ * This is useful to avoid showing certain collections/globals in the command menu.
+ */ const DEFAULT_SLUGS_TO_IGNORE = [
+    'payload-migrations',
+    'payload-preferences',
+    'payload-locked-documents'
+];
+export const createDefaultGroups = (config, currentLang, pluginConfig)=>{
+    const groups = [];
+    const items = [];
+    const avaibleGroups = new Set() //To avoid duplicates
+    ;
+    let slugsToIgnore = [
+        ...DEFAULT_SLUGS_TO_IGNORE
+    ];
+    //Handle slugs to ignore from plugin config
+    if (pluginConfig?.slugsToIgnore) {
+        if (Array.isArray(pluginConfig.slugsToIgnore)) {
+            slugsToIgnore.push(...pluginConfig.slugsToIgnore);
+        } else {
+            //Object with ignoreList and replaceDefaults
+            if (pluginConfig.slugsToIgnore.replaceDefaults) {
+                //Replace defaults
+                slugsToIgnore = []; //Reset
+            }
+            slugsToIgnore.push(...pluginConfig.slugsToIgnore.ignoreList);
+        }
+    }
+    if (config.collections) {
+        config.collections.forEach((collection)=>{
+            if (slugsToIgnore.includes(collection.slug)) {
+                return;
+            }
+            const groupName = extractLocalizedGroupName(collection, currentLang) || 'Collections';
+            //   console.log(collection.slug, 'groupName:', groupName, 'Object', collection.admin)
+            if (!avaibleGroups.has(groupName)) {
+                avaibleGroups.add(groupName);
+                groups.push({
+                    items: [],
+                    title: groupName
+                });
+            }
+            const group = groups.find((g)=>g.title === groupName);
+            if (group) {
+                const useAsTitleField = collection.admin?.useAsTitle || 'id';
+                let useAsTitleFieldLabel = undefined;
+                let useAsTitleLabel = undefined;
+                //Only extract useAsTitle label if submenu is enabled
+                if (pluginConfig?.submenu?.enabled !== false) {
+                    useAsTitleFieldLabel = collection?.fields?.find((field)=>{
+                        if ('name' in field === false) {
+                            return null;
+                        }
+                        return field.name === useAsTitleField;
+                    })?.label;
+                    //Extract label for useAsTitle field
+                    useAsTitleLabel = extractLocalizedValue(typeof useAsTitleFieldLabel === 'function' ? {} : useAsTitleFieldLabel || {}, currentLang, useAsTitleField);
+                }
+                group.items.push({
+                    slug: collection.slug,
+                    type: 'collection',
+                    action: {
+                        type: 'link',
+                        href: `/admin/collections/${collection.slug}`
+                    },
+                    //Either custom icon from plugin config, or default Files icon
+                    icon: pluginConfig?.icons?.collections?.[collection.slug] || Files,
+                    label: extractLocalizedCollectionName(collection, currentLang),
+                    useAsTitle: useAsTitleField,
+                    useAsTitleLabel: useAsTitleLabel || useAsTitleField
+                });
+            }
+        });
+    }
+    //Globals
+    if (config.globals) {
+        config.globals.forEach((global)=>{
+            if (slugsToIgnore.includes(global.slug)) {
+                return;
+            }
+            //Same logic as collections
+            const groupName = extractLocalizedGroupName(global, currentLang) || 'Globals';
+            if (!avaibleGroups.has(groupName)) {
+                avaibleGroups.add(groupName);
+                groups.push({
+                    items: [],
+                    title: groupName
+                });
+            }
+            const group = groups.find((g)=>g.title === groupName);
+            if (group) {
+                group.items.push({
+                    slug: global.slug,
+                    type: 'global',
+                    action: {
+                        type: 'link',
+                        href: `/admin/globals/${global.slug}`
+                    },
+                    //Either custom icon from plugin config, or default Globe icon
+                    icon: pluginConfig?.icons?.globals?.[global.slug] || Globe,
+                    label: extractLocalizedGlobalName(global, currentLang)
+                });
+            }
+        });
+    }
+    //Now custom items/groups from plugin config
+    if (pluginConfig?.customItems) {
+        //We are not using slugsToIgnore for custom items, as they are user-defined
+        pluginConfig.customItems.forEach((value)=>{
+            if (value.type === 'group') {
+                const convertedGroup = convertConfigGroup(value, currentLang);
+                //Check if group already exists using our set
+                if (!avaibleGroups.has(convertedGroup.title)) {
+                    avaibleGroups.add(convertedGroup.title);
+                    groups.push({
+                        items: [],
+                        title: convertedGroup.title
+                    });
+                }
+                const group = groups.find((g)=>g.title === convertedGroup.title);
+                if (group) {
+                    //Append items to existing group, or if it was empty - add items
+                    group.items.push(...convertedGroup.items);
+                }
+            }
+            if (value.type === 'item') {
+                //Stray item, add to items array
+                const convertedItem = convertConfigItem(value, currentLang);
+                items.push(convertedItem);
+            }
+        });
+    }
+    return {
+        groups,
+        items
+    };
+};
+
+//# sourceMappingURL=index.js.map