@veiag/payload-cmdk 1.0.0

package/dist/components/CommandMenuContext.js

@@ -0,0 +1,430 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import './modal.scss';
+import { Modal, useConfig, useModal, useTranslation } from '@payloadcms/ui';
+import { ArrowBigUp, ChevronLeft, Command as CommandIcon, Option } from 'lucide-react';
+import { DynamicIcon } from 'lucide-react/dynamic';
+import { useRouter } from 'next/navigation';
+import { createContext, Fragment, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { createDefaultGroups } from '../utils/index';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from './cmdk/index';
+const MODAL_SLUG = 'command-menu';
+const CommandMenuContext = /*#__PURE__*/ createContext({
+    closeMenu: ()=>{},
+    currentPage: 'main',
+    groups: [],
+    isOpen: false,
+    items: [],
+    openMenu: ()=>{},
+    setPage: ()=>{},
+    toggleMenu: ()=>{}
+});
+export const useCommandMenu = ()=>{
+    const context = useContext(CommandMenuContext);
+    return context;
+};
+const ITEM_SELECTOR = `[cmdk-item=""]`;
+function getSelectedElement(containerRef) {
+    return containerRef.current?.querySelector(`${ITEM_SELECTOR}[aria-selected="true"]`);
+}
+const CommandMenuComponent = ({ pluginConfig })=>{
+    const [search, setSearch] = useState('');
+    const [submenuItems, setSubmenuItems] = useState([]);
+    const [isLoadingSubmenu, setIsLoadingSubmenu] = useState(false);
+    const [isMac, setIsMac] = useState(false);
+    const commandListRef = useRef(null);
+    const { closeMenu, currentPage, groups, items, setPage } = useCommandMenu();
+    const router = useRouter();
+    const { t } = useTranslation();
+    useEffect(()=>{
+        setIsMac(/Mac|iPhone|iPod|iPad/i.test(navigator.platform));
+    }, []);
+    const submenuEnabled = pluginConfig?.submenu?.enabled !== false;
+    const submenuShortcut = pluginConfig?.submenu?.shortcut || 'shift+enter';
+    const blurBg = pluginConfig?.blurBg !== false;
+    const formatShortcutKey = (key)=>{
+        // Handle compound shortcuts like "Shift + Enter"
+        const parts = key.split('+').map((part)=>part.trim());
+        const elements = parts.map((part, index)=>{
+            const lowerPart = part.toLowerCase();
+            let content;
+            if (lowerPart === 'ctrl' || lowerPart === 'cmd') {
+                content = isMac ? /*#__PURE__*/ _jsx(CommandIcon, {
+                    size: 12
+                }) : 'Ctrl';
+            } else if (lowerPart === 'meta') {
+                content = isMac ? /*#__PURE__*/ _jsx(CommandIcon, {
+                    size: 12
+                }) : 'Ctrl';
+            } else if (lowerPart === 'shift') {
+                content = isMac ? /*#__PURE__*/ _jsx(ArrowBigUp, {
+                    size: 12
+                }) : 'Shift';
+            } else if (lowerPart === 'alt') {
+                content = isMac ? /*#__PURE__*/ _jsx(Option, {
+                    size: 12
+                }) : 'Alt';
+            } else {
+                content = part;
+            }
+            return /*#__PURE__*/ _jsxs(Fragment, {
+                children: [
+                    content,
+                    !isMac && index < parts.length - 1 && ' + '
+                ]
+            }, index);
+        });
+        return /*#__PURE__*/ _jsx(_Fragment, {
+            children: elements
+        });
+    };
+    // Debounced search for submenu
+    useEffect(()=>{
+        if (currentPage === 'main') {
+            return;
+        }
+        const fetchDocuments = async ()=>{
+            if (currentPage.type !== 'collection-search') {
+                return;
+            }
+            setIsLoadingSubmenu(true);
+            try {
+                const searchParam = search ? `&where[${currentPage.useAsTitle}][like]=${encodeURIComponent(search)}` : '';
+                const response = await fetch(`/api/${currentPage.slug}?limit=10${searchParam}&select[${currentPage.useAsTitle}]=true`);
+                const data = await response.json();
+                if (data.docs && Array.isArray(data.docs)) {
+                    const docs = data.docs.map((doc)=>({
+                            slug: `${currentPage.slug}-${doc.id}`,
+                            type: 'custom',
+                            action: {
+                                type: 'link',
+                                href: `/admin/collections/${currentPage.slug}/${doc.id}`
+                            },
+                            icon: pluginConfig?.submenu?.icons?.[currentPage.slug] ?? undefined,
+                            label: doc[currentPage.useAsTitle] || doc.id
+                        }));
+                    setSubmenuItems(docs);
+                }
+            } catch  {
+                setSubmenuItems([]);
+            } finally{
+                setIsLoadingSubmenu(false);
+            }
+        };
+        const timeoutId = setTimeout(fetchDocuments, 300);
+        return ()=>clearTimeout(timeoutId);
+    }, [
+        search,
+        currentPage,
+        pluginConfig?.submenu?.icons
+    ]);
+    const handleBack = useCallback(()=>{
+        setPage('main');
+        setSearch('');
+        setSubmenuItems([]);
+    }, [
+        setPage
+    ]);
+    const executeItemAction = useCallback(async (item)=>{
+        // Execute the item's action
+        switch(item.action.type){
+            case 'api':
+                await fetch(item.action.href, {
+                    body: item.action.body ? JSON.stringify(item.action.body) : undefined,
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    method: item.action.method || 'GET'
+                });
+                break;
+            case 'link':
+                router.push(item.action.href);
+                break;
+            default:
+                break;
+        }
+        closeMenu();
+        setSearch('');
+        setPage('main');
+    }, [
+        router,
+        closeMenu,
+        setPage
+    ]);
+    const openSubmenu = useCallback((item)=>{
+        setPage({
+            slug: item.slug,
+            type: 'collection-search',
+            label: item.label,
+            useAsTitle: item.useAsTitle || 'id',
+            useAsTitleLabel: item.useAsTitleLabel || item.useAsTitle || 'id'
+        });
+        setSearch('');
+        //set isLoadingSubmenu to true to show loading state while fetching
+        setIsLoadingSubmenu(true);
+        setSubmenuItems([]);
+    }, [
+        setPage
+    ]);
+    const handleSelect = useCallback(async (item)=>{
+        await executeItemAction(item);
+    }, [
+        executeItemAction
+    ]);
+    // Handle keyboard events for navigation and back
+    useEffect(()=>{
+        const handleKeyDown = (e)=>{
+            // ESC key for back navigation in submenu
+            if (e.key === 'Escape' && currentPage !== 'main') {
+                e.preventDefault();
+                e.stopPropagation();
+                handleBack();
+                return;
+            }
+            // Enter/Shift+Enter handling for collection submenu
+            if (e.key === 'Enter' && currentPage === 'main') {
+                const selectedElement = getSelectedElement(commandListRef);
+                const itemType = selectedElement?.getAttribute('data-item-type');
+                const itemSlug = selectedElement?.getAttribute('data-value');
+                if (submenuEnabled && itemType === 'collection' && itemSlug) {
+                    const isShiftPressed = e.shiftKey;
+                    const shouldOpenSubmenu = submenuShortcut === 'shift+enter' && isShiftPressed || submenuShortcut === 'enter' && !isShiftPressed;
+                    if (shouldOpenSubmenu) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        // Find the item in groups
+                        const item = groups.flatMap((g)=>g.items).find((i)=>i.slug === itemSlug);
+                        if (item) {
+                            openSubmenu(item);
+                        }
+                        return;
+                    }
+                }
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown, true);
+        return ()=>document.removeEventListener('keydown', handleKeyDown, true);
+    }, [
+        currentPage,
+        handleBack,
+        submenuEnabled,
+        submenuShortcut,
+        openSubmenu,
+        groups
+    ]);
+    const placeholder = currentPage === 'main' ? t('cmdkPlugin:search') : t('general:searchBy', {
+        label: currentPage.useAsTitleLabel
+    });
+    const shouldDisableFilter = currentPage !== 'main';
+    // Static footer shortcuts based on current page
+    const footerShortcuts = currentPage === 'main' && submenuEnabled && submenuShortcut === 'shift+enter' ? [
+        {
+            key: 'Enter',
+            label: t('cmdkPlugin:navigate')
+        },
+        {
+            key: 'Shift + Enter',
+            label: t('cmdkPlugin:searchInCollection')
+        }
+    ] : currentPage === 'main' && submenuEnabled && submenuShortcut === 'enter' ? [
+        {
+            key: 'Enter',
+            label: t('cmdkPlugin:searchInCollection')
+        },
+        {
+            key: 'Shift + Enter',
+            label: t('cmdkPlugin:navigate')
+        }
+    ] : currentPage === 'main' ? [
+        {
+            key: 'Enter',
+            label: t('cmdkPlugin:navigate')
+        }
+    ] : [
+        {
+            key: 'Enter',
+            label: t('cmdkPlugin:open')
+        }
+    ];
+    const handleBackdropClick = (e)=>{
+        // Close modal only if clicking the backdrop (not the command itself)
+        if (e.target === e.currentTarget) {
+            closeMenu();
+        }
+    };
+    return /*#__PURE__*/ _jsx(Modal, {
+        slug: MODAL_SLUG,
+        children: /*#__PURE__*/ _jsx("div", {
+            className: `command-modal ${blurBg ? 'command-modal--blur' : ''}`,
+            onClick: handleBackdropClick,
+            children: /*#__PURE__*/ _jsxs(Command, {
+                label: "Command Menu",
+                shouldFilter: !shouldDisableFilter,
+                children: [
+                    currentPage !== 'main' && /*#__PURE__*/ _jsxs("div", {
+                        className: "command__header",
+                        children: [
+                            /*#__PURE__*/ _jsx("button", {
+                                className: "command__back-button",
+                                onClick: handleBack,
+                                type: "button",
+                                children: /*#__PURE__*/ _jsx(ChevronLeft, {
+                                    size: 16
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx("span", {
+                                className: "command__header-label",
+                                children: t('cmdkPlugin:searchIn', {
+                                    label: currentPage.label
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(CommandInput, {
+                        onValueChange: setSearch,
+                        placeholder: placeholder,
+                        value: search
+                    }),
+                    /*#__PURE__*/ _jsxs(CommandList, {
+                        ref: commandListRef,
+                        children: [
+                            /*#__PURE__*/ _jsx(CommandEmpty, {
+                                children: isLoadingSubmenu ? t('cmdkPlugin:loading') : t('cmdkPlugin:noResults')
+                            }),
+                            currentPage === 'main' && groups.map((group, index)=>{
+                                if (group.items.length === 0) {
+                                    return null;
+                                }
+                                let titleName = group.title;
+                                if (group.title === 'Collections') {
+                                    titleName = t('general:collections');
+                                }
+                                if (group.title === 'Globals') {
+                                    titleName = t('general:globals');
+                                }
+                                const isRenderSeparator = !(index === groups.length - 1 && items.length === 0);
+                                return /*#__PURE__*/ _jsxs(Fragment, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(CommandGroup, {
+                                            heading: titleName,
+                                            children: group.items.map((item)=>{
+                                                const isDynamicIcon = typeof item.icon === 'string';
+                                                const IconComponent = isDynamicIcon ? null : item.icon;
+                                                return /*#__PURE__*/ _jsxs(CommandItem, {
+                                                    "data-action-type": item.action.type,
+                                                    "data-item-type": item.type,
+                                                    keywords: [
+                                                        group.title
+                                                    ],
+                                                    onSelect: ()=>handleSelect(item),
+                                                    value: item.slug,
+                                                    children: [
+                                                        isDynamicIcon ? /*#__PURE__*/ _jsx(DynamicIcon, {
+                                                            className: "command__item-icon",
+                                                            name: item.icon
+                                                        }) : IconComponent && /*#__PURE__*/ _jsx(IconComponent, {
+                                                            className: "command__item-icon"
+                                                        }),
+                                                        item.label,
+                                                        submenuEnabled && item.type === 'collection' && /*#__PURE__*/ _jsx(CommandShortcut, {
+                                                            children: "›"
+                                                        })
+                                                    ]
+                                                }, item.slug);
+                                            })
+                                        }),
+                                        isRenderSeparator && /*#__PURE__*/ _jsx(CommandSeparator, {})
+                                    ]
+                                }, group.title);
+                            }),
+                            currentPage === 'main' && items?.map((item)=>/*#__PURE__*/ _jsx(CommandItem, {
+                                    "data-action-type": item.action.type,
+                                    "data-item-type": item.type,
+                                    onSelect: ()=>handleSelect(item),
+                                    value: item.slug,
+                                    children: item.label
+                                }, item.slug)),
+                            currentPage !== 'main' && submenuItems.map((item)=>{
+                                const isDynamicIcon = typeof item.icon === 'string';
+                                const IconComponent = isDynamicIcon ? null : item.icon;
+                                return /*#__PURE__*/ _jsxs(CommandItem, {
+                                    "data-action-type": item.action.type,
+                                    "data-item-type": item.type,
+                                    onSelect: ()=>handleSelect(item),
+                                    value: item.slug,
+                                    children: [
+                                        isDynamicIcon ? /*#__PURE__*/ _jsx(DynamicIcon, {
+                                            className: "command__item-icon",
+                                            name: item.icon
+                                        }) : IconComponent && /*#__PURE__*/ _jsx(IconComponent, {
+                                            className: "command__item-icon"
+                                        }),
+                                        item.label
+                                    ]
+                                }, item.slug);
+                            })
+                        ]
+                    }),
+                    footerShortcuts && footerShortcuts.length > 0 && /*#__PURE__*/ _jsx("div", {
+                        className: "command__footer",
+                        children: footerShortcuts.map((shortcut, index)=>/*#__PURE__*/ _jsxs("span", {
+                                children: [
+                                    /*#__PURE__*/ _jsx("kbd", {
+                                        children: formatShortcutKey(shortcut.key)
+                                    }),
+                                    " ",
+                                    shortcut.label
+                                ]
+                            }, index))
+                    })
+                ]
+            })
+        })
+    });
+};
+const MemoizedCommandMenuComponent = /*#__PURE__*/ memo(CommandMenuComponent);
+export const CommandMenuProvider = ({ children, pluginConfig })=>{
+    const { closeModal, isModalOpen, openModal, toggleModal } = useModal();
+    const [currentPage, setCurrentPage] = useState('main');
+    useHotkeys(pluginConfig.shortcut || [
+        'meta+k',
+        'ctrl+k'
+    ], (event)=>{
+        event.preventDefault();
+        event.stopPropagation();
+        toggleModal(MODAL_SLUG);
+    }, [
+        toggleModal
+    ]);
+    const { config } = useConfig();
+    const { i18n } = useTranslation();
+    const currentLang = i18n.language;
+    const { groups, items } = useMemo(()=>{
+        return createDefaultGroups(config, currentLang, pluginConfig);
+    }, [
+        config,
+        currentLang,
+        pluginConfig
+    ]);
+    return /*#__PURE__*/ _jsxs(CommandMenuContext.Provider, {
+        value: {
+            closeMenu: ()=>closeModal(MODAL_SLUG),
+            currentPage,
+            groups,
+            isOpen: isModalOpen(MODAL_SLUG),
+            items,
+            openMenu: ()=>openModal(MODAL_SLUG),
+            setPage: setCurrentPage,
+            toggleMenu: ()=>toggleModal(MODAL_SLUG)
+        },
+        children: [
+            children,
+            /*#__PURE__*/ _jsx(MemoizedCommandMenuComponent, {
+                pluginConfig: pluginConfig
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=CommandMenuContext.js.map

package/dist/components/CommandMenuContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/CommandMenuContext.tsx"],"sourcesContent":["'use client'\nimport type { LucideIcon } from 'lucide-react'\nimport type { IconName } from 'lucide-react/dynamic'\nimport type { CustomTranslationsKeys, CustomTranslationsObject } from 'src/translations/index'\n\nimport './modal.scss'\n\nimport type {\n  CommandMenuContextProps,\n  CommandMenuGroup,\n  CommandMenuItem,\n  CommandMenuPage,\n  GenericCollectionDocument,\n  PluginCommandMenuConfig,\n} from 'src/types'\n\nimport { Modal, useConfig, useModal, useTranslation } from '@payloadcms/ui'\nimport { ArrowBigUp, ChevronLeft, Command as CommandIcon, Option } from 'lucide-react'\nimport { DynamicIcon } from 'lucide-react/dynamic'\nimport { useRouter } from 'next/navigation'\nimport {\n  createContext,\n  Fragment,\n  memo,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { useHotkeys } from 'react-hotkeys-hook'\n\nimport { createDefaultGroups } from '../utils/index'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from './cmdk/index'\n\nconst MODAL_SLUG = 'command-menu'\n\ninterface CommandMenuContextType {\n  closeMenu: () => void\n  currentPage: CommandMenuPage\n  groups: CommandMenuGroup[]\n  isOpen: boolean\n  items: CommandMenuItem[]\n  openMenu: () => void\n  setPage: (page: CommandMenuPage) => void\n  toggleMenu: () => void\n}\n\nconst CommandMenuContext = createContext<CommandMenuContextType>({\n  closeMenu: () => {},\n  currentPage: 'main',\n  groups: [],\n  isOpen: false,\n  items: [],\n  openMenu: () => {},\n  setPage: () => {},\n  toggleMenu: () => {},\n})\n\nexport const useCommandMenu = () => {\n  const context = useContext(CommandMenuContext)\n  return context\n}\n\nconst ITEM_SELECTOR = `[cmdk-item=\"\"]`\n\nfunction getSelectedElement(containerRef: React.RefObject<HTMLElement | null>) {\n  return containerRef.current?.querySelector(`${ITEM_SELECTOR}[aria-selected=\"true\"]`)\n}\n\nconst CommandMenuComponent: React.FC<{\n  pluginConfig: PluginCommandMenuConfig\n}> = ({ pluginConfig }) => {\n  const [search, setSearch] = useState('')\n  const [submenuItems, setSubmenuItems] = useState<CommandMenuItem[]>([])\n  const [isLoadingSubmenu, setIsLoadingSubmenu] = useState(false)\n  const [isMac, setIsMac] = useState(false)\n\n  const commandListRef = useRef<HTMLDivElement>(null)\n\n  const { closeMenu, currentPage, groups, items, setPage } = useCommandMenu()\n  const router = useRouter()\n  const { t } = useTranslation<CustomTranslationsObject, CustomTranslationsKeys>()\n\n  useEffect(() => {\n    setIsMac(/Mac|iPhone|iPod|iPad/i.test(navigator.platform))\n  }, [])\n\n  const submenuEnabled = pluginConfig?.submenu?.enabled !== false\n  const submenuShortcut = pluginConfig?.submenu?.shortcut || 'shift+enter'\n  const blurBg = pluginConfig?.blurBg !== false\n\n  const formatShortcutKey = (key: string): React.ReactNode => {\n    // Handle compound shortcuts like \"Shift + Enter\"\n    const parts = key.split('+').map((part) => part.trim())\n    const elements = parts.map((part, index) => {\n      const lowerPart = part.toLowerCase()\n      let content: React.ReactNode\n\n      if (lowerPart === 'ctrl' || lowerPart === 'cmd') {\n        content = isMac ? <CommandIcon size={12} /> : 'Ctrl'\n      } else if (lowerPart === 'meta') {\n        content = isMac ? <CommandIcon size={12} /> : 'Ctrl'\n      } else if (lowerPart === 'shift') {\n        content = isMac ? <ArrowBigUp size={12} /> : 'Shift'\n      } else if (lowerPart === 'alt') {\n        content = isMac ? <Option size={12} /> : 'Alt'\n      } else {\n        content = part\n      }\n\n      return (\n        <Fragment key={index}>\n          {content}\n          {!isMac && index < parts.length - 1 && ' + '}\n        </Fragment>\n      )\n    })\n\n    return <>{elements}</>\n  }\n\n  // Debounced search for submenu\n  useEffect(() => {\n    if (currentPage === 'main') {\n      return\n    }\n\n    const fetchDocuments = async () => {\n      if (currentPage.type !== 'collection-search') {\n        return\n      }\n\n      setIsLoadingSubmenu(true)\n      try {\n        const searchParam = search\n          ? `&where[${currentPage.useAsTitle}][like]=${encodeURIComponent(search)}`\n          : ''\n        const response = await fetch(\n          `/api/${currentPage.slug}?limit=10${searchParam}&select[${currentPage.useAsTitle}]=true`,\n        )\n        const data = await response.json()\n\n        if (data.docs && Array.isArray(data.docs)) {\n          const docs: CommandMenuItem[] = data.docs.map((doc: GenericCollectionDocument) => ({\n            slug: `${currentPage.slug}-${doc.id}`,\n            type: 'custom' as const,\n            action: {\n              type: 'link',\n              href: `/admin/collections/${currentPage.slug}/${doc.id}`,\n            },\n            icon: pluginConfig?.submenu?.icons?.[currentPage.slug] ?? undefined,\n            label: doc[currentPage.useAsTitle] || doc.id,\n          }))\n          setSubmenuItems(docs)\n        }\n      } catch {\n        setSubmenuItems([])\n      } finally {\n        setIsLoadingSubmenu(false)\n      }\n    }\n\n    const timeoutId = setTimeout(fetchDocuments, 300)\n    return () => clearTimeout(timeoutId)\n  }, [search, currentPage, pluginConfig?.submenu?.icons])\n\n  const handleBack = useCallback(() => {\n    setPage('main')\n    setSearch('')\n    setSubmenuItems([])\n  }, [setPage])\n\n  const executeItemAction = useCallback(\n    async (item: CommandMenuItem) => {\n      // Execute the item's action\n      switch (item.action.type) {\n        case 'api':\n          await fetch(item.action.href, {\n            body: item.action.body ? JSON.stringify(item.action.body) : undefined,\n            headers: {\n              'Content-Type': 'application/json',\n            },\n            method: item.action.method || 'GET',\n          })\n          break\n        case 'link':\n          router.push(item.action.href)\n          break\n        default:\n          break\n      }\n      closeMenu()\n      setSearch('')\n      setPage('main')\n    },\n    [router, closeMenu, setPage],\n  )\n\n  const openSubmenu = useCallback(\n    (item: CommandMenuItem) => {\n      setPage({\n        slug: item.slug,\n        type: 'collection-search',\n        label: item.label,\n        useAsTitle: item.useAsTitle || 'id',\n        useAsTitleLabel: item.useAsTitleLabel || item.useAsTitle || 'id',\n      })\n      setSearch('')\n      //set isLoadingSubmenu to true to show loading state while fetching\n      setIsLoadingSubmenu(true)\n      setSubmenuItems([])\n    },\n    [setPage],\n  )\n\n  const handleSelect = useCallback(\n    async (item: CommandMenuItem) => {\n      await executeItemAction(item)\n    },\n    [executeItemAction],\n  )\n\n  // Handle keyboard events for navigation and back\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      // ESC key for back navigation in submenu\n      if (e.key === 'Escape' && currentPage !== 'main') {\n        e.preventDefault()\n        e.stopPropagation()\n        handleBack()\n        return\n      }\n\n      // Enter/Shift+Enter handling for collection submenu\n      if (e.key === 'Enter' && currentPage === 'main') {\n        const selectedElement = getSelectedElement(commandListRef)\n        const itemType = selectedElement?.getAttribute('data-item-type')\n        const itemSlug = selectedElement?.getAttribute('data-value')\n\n        if (submenuEnabled && itemType === 'collection' && itemSlug) {\n          const isShiftPressed = e.shiftKey\n          const shouldOpenSubmenu =\n            (submenuShortcut === 'shift+enter' && isShiftPressed) ||\n            (submenuShortcut === 'enter' && !isShiftPressed)\n\n          if (shouldOpenSubmenu) {\n            e.preventDefault()\n            e.stopPropagation()\n\n            // Find the item in groups\n            const item = groups.flatMap((g) => g.items).find((i) => i.slug === itemSlug)\n            if (item) {\n              openSubmenu(item)\n            }\n            return\n          }\n        }\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyDown, true)\n    return () => document.removeEventListener('keydown', handleKeyDown, true)\n  }, [currentPage, handleBack, submenuEnabled, submenuShortcut, openSubmenu, groups])\n\n  const placeholder =\n    currentPage === 'main'\n      ? t('cmdkPlugin:search')\n      : t('general:searchBy', {\n          label: currentPage.useAsTitleLabel,\n        })\n\n  const shouldDisableFilter = currentPage !== 'main'\n\n  // Static footer shortcuts based on current page\n  const footerShortcuts = currentPage === 'main' && submenuEnabled && submenuShortcut === 'shift+enter'\n    ? [\n        { key: 'Enter', label: t('cmdkPlugin:navigate') },\n        { key: 'Shift + Enter', label: t('cmdkPlugin:searchInCollection') },\n      ]\n    : currentPage === 'main' && submenuEnabled && submenuShortcut === 'enter'\n      ? [\n          { key: 'Enter', label: t('cmdkPlugin:searchInCollection') },\n          { key: 'Shift + Enter', label: t('cmdkPlugin:navigate') },\n        ]\n      : currentPage === 'main'\n        ? [{ key: 'Enter', label: t('cmdkPlugin:navigate') }]\n        : [{ key: 'Enter', label: t('cmdkPlugin:open') }]\n\n  const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {\n    // Close modal only if clicking the backdrop (not the command itself)\n    if (e.target === e.currentTarget) {\n      closeMenu()\n    }\n  }\n\n  return (\n    <Modal slug={MODAL_SLUG}>\n      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n      <div\n        className={`command-modal ${blurBg ? 'command-modal--blur' : ''}`}\n        onClick={handleBackdropClick}\n      >\n        <Command label=\"Command Menu\" shouldFilter={!shouldDisableFilter}>\n          {/* Header for submenu navigation */}\n          {currentPage !== 'main' && (\n            <div className=\"command__header\">\n              <button className=\"command__back-button\" onClick={handleBack} type=\"button\">\n                <ChevronLeft size={16} />\n              </button>\n              <span className=\"command__header-label\">\n                {t('cmdkPlugin:searchIn', { label: currentPage.label })}\n              </span>\n            </div>\n          )}\n\n          <CommandInput onValueChange={setSearch} placeholder={placeholder} value={search} />\n          <CommandList ref={commandListRef}>\n            <CommandEmpty>\n              {isLoadingSubmenu ? t('cmdkPlugin:loading') : t('cmdkPlugin:noResults')}\n            </CommandEmpty>\n\n            {/* Main page view */}\n            {currentPage === 'main' &&\n              groups.map((group, index) => {\n                if (group.items.length === 0) {\n                  return null\n                }\n\n                let titleName = group.title\n                if (group.title === 'Collections') {\n                  titleName = t('general:collections')\n                }\n                if (group.title === 'Globals') {\n                  titleName = t('general:globals')\n                }\n\n                const isRenderSeparator = !(index === groups.length - 1 && items.length === 0)\n                return (\n                  <Fragment key={group.title}>\n                    <CommandGroup heading={titleName}>\n                      {group.items.map((item) => {\n                        const isDynamicIcon = typeof item.icon === 'string'\n                        const IconComponent = isDynamicIcon ? null : (item.icon as LucideIcon)\n                        return (\n                          <CommandItem\n                            data-action-type={item.action.type}\n                            data-item-type={item.type}\n                            key={item.slug}\n                            keywords={[group.title]}\n                            onSelect={() => handleSelect(item)}\n                            value={item.slug}\n                          >\n                            {isDynamicIcon ? (\n                              <DynamicIcon\n                                className=\"command__item-icon\"\n                                name={item.icon as IconName}\n                              />\n                            ) : (\n                              IconComponent && <IconComponent className=\"command__item-icon\" />\n                            )}\n                            {item.label}\n                            {submenuEnabled && item.type === 'collection' && (\n                              <CommandShortcut>›</CommandShortcut>\n                            )}\n                          </CommandItem>\n                        )\n                      })}\n                    </CommandGroup>\n                    {isRenderSeparator && <CommandSeparator />}\n                  </Fragment>\n                )\n              })}\n\n            {/* Stray items on main page */}\n            {currentPage === 'main' &&\n              items?.map((item) => (\n                <CommandItem\n                  data-action-type={item.action.type}\n                  data-item-type={item.type}\n                  key={item.slug}\n                  onSelect={() => handleSelect(item)}\n                  value={item.slug}\n                >\n                  {item.label}\n                </CommandItem>\n              ))}\n\n            {/* Submenu page view */}\n            {currentPage !== 'main' &&\n              submenuItems.map((item) => {\n                const isDynamicIcon = typeof item.icon === 'string'\n                const IconComponent = isDynamicIcon ? null : (item.icon as LucideIcon)\n                return (\n                  <CommandItem\n                    data-action-type={item.action.type}\n                    data-item-type={item.type}\n                    key={item.slug}\n                    onSelect={() => handleSelect(item)}\n                    value={item.slug}\n                  >\n                    {isDynamicIcon ? (\n                      <DynamicIcon className=\"command__item-icon\" name={item.icon as IconName} />\n                    ) : (\n                      IconComponent && <IconComponent className=\"command__item-icon\" />\n                    )}\n                    {item.label}\n                  </CommandItem>\n                )\n              })}\n          </CommandList>\n\n          {/* Footer with static shortcuts */}\n          {footerShortcuts && footerShortcuts.length > 0 && (\n            <div className=\"command__footer\">\n              {footerShortcuts.map((shortcut, index) => (\n                <span key={index}>\n                  <kbd>{formatShortcutKey(shortcut.key)}</kbd> {shortcut.label}\n                </span>\n              ))}\n            </div>\n          )}\n        </Command>\n      </div>\n    </Modal>\n  )\n}\n\nconst MemoizedCommandMenuComponent = memo(CommandMenuComponent)\n\nexport const CommandMenuProvider: React.FC<CommandMenuContextProps> = ({\n  children,\n  pluginConfig,\n}) => {\n  const { closeModal, isModalOpen, openModal, toggleModal } = useModal()\n  const [currentPage, setCurrentPage] = useState<CommandMenuPage>('main')\n\n  useHotkeys(\n    pluginConfig.shortcut || ['meta+k', 'ctrl+k'],\n    (event) => {\n      event.preventDefault()\n      event.stopPropagation()\n      toggleModal(MODAL_SLUG)\n    },\n    [toggleModal],\n  )\n  const { config } = useConfig()\n  const { i18n } = useTranslation()\n  const currentLang = i18n.language\n  const { groups, items } = useMemo(() => {\n    return createDefaultGroups(config, currentLang, pluginConfig)\n  }, [config, currentLang, pluginConfig])\n\n  return (\n    <CommandMenuContext.Provider\n      value={{\n        closeMenu: () => closeModal(MODAL_SLUG),\n        currentPage,\n        groups,\n        isOpen: isModalOpen(MODAL_SLUG),\n        items,\n        openMenu: () => openModal(MODAL_SLUG),\n        setPage: setCurrentPage,\n        toggleMenu: () => toggleModal(MODAL_SLUG),\n      }}\n    >\n      {children}\n      <MemoizedCommandMenuComponent pluginConfig={pluginConfig} />\n    </CommandMenuContext.Provider>\n  )\n}\n"],"names":["Modal","useConfig","useModal","useTranslation","ArrowBigUp","ChevronLeft","Command","CommandIcon","Option","DynamicIcon","useRouter","createContext","Fragment","memo","useCallback","useContext","useEffect","useMemo","useRef","useState","useHotkeys","createDefaultGroups","CommandEmpty","CommandGroup","CommandInput","CommandItem","CommandList","CommandSeparator","CommandShortcut","MODAL_SLUG","CommandMenuContext","closeMenu","currentPage","groups","isOpen","items","openMenu","setPage","toggleMenu","useCommandMenu","context","ITEM_SELECTOR","getSelectedElement","containerRef","current","querySelector","CommandMenuComponent","pluginConfig","search","setSearch","submenuItems","setSubmenuItems","isLoadingSubmenu","setIsLoadingSubmenu","isMac","setIsMac","commandListRef","router","t","test","navigator","platform","submenuEnabled","submenu","enabled","submenuShortcut","shortcut","blurBg","formatShortcutKey","key","parts","split","map","part","trim","elements","index","lowerPart","toLowerCase","content","size","length","fetchDocuments","type","searchParam","useAsTitle","encodeURIComponent","response","fetch","slug","data","json","docs","Array","isArray","doc","id","action","href","icon","icons","undefined","label","timeoutId","setTimeout","clearTimeout","handleBack","executeItemAction","item","body","JSON","stringify","headers","method","push","openSubmenu","useAsTitleLabel","handleSelect","handleKeyDown","e","preventDefault","stopPropagation","selectedElement","itemType","getAttribute","itemSlug","isShiftPressed","shiftKey","shouldOpenSubmenu","flatMap","g","find","i","document","addEventListener","removeEventListener","placeholder","shouldDisableFilter","footerShortcuts","handleBackdropClick","target","currentTarget","div","className","onClick","shouldFilter","button","span","onValueChange","value","ref","group","titleName","title","isRenderSeparator","heading","isDynamicIcon","IconComponent","data-action-type","data-item-type","keywords","onSelect","name","kbd","MemoizedCommandMenuComponent","CommandMenuProvider","children","closeModal","isModalOpen","openModal","toggleModal","setCurrentPage","event","config","i18n","currentLang","language","Provider"],"mappings":"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"}

package/dist/components/SearchButton.d.ts

@@ -0,0 +1,8 @@
+import './SearchButton.scss';
+import React from 'react';
+interface SearchButtonProps {
+    position?: 'actions' | 'nav';
+    shortcut?: string | string[];
+}
+declare const SearchButton: React.FC<SearchButtonProps>;
+export default SearchButton;

package/dist/components/SearchButton.js

@@ -0,0 +1,106 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './SearchButton.scss';
+import { useTranslation } from '@payloadcms/ui';
+import { ArrowBigUp, Command as CommandIcon, Option, SearchIcon } from 'lucide-react';
+import React, { useEffect, useState } from 'react';
+import { useCommandMenu } from './CommandMenuContext';
+const SearchButton = ({ position = 'actions', shortcut = [
+    'meta+k',
+    'ctrl+k'
+] })=>{
+    const { openMenu } = useCommandMenu();
+    const { t } = useTranslation();
+    const [isMac, setIsMac] = useState(false);
+    useEffect(()=>{
+        setIsMac(/Mac|iPhone|iPod|iPad/i.test(navigator.platform));
+    }, []);
+    const formatShortcut = (shortcutString)=>{
+        const parts = shortcutString.split('+').map((part)=>part.trim().toLowerCase());
+        return parts.map((part)=>{
+            if (part === 'ctrl' || part === 'cmd') {
+                return isMac ? {
+                    icon: /*#__PURE__*/ _jsx(CommandIcon, {
+                        size: 12
+                    })
+                } : {
+                    text: 'Ctrl'
+                };
+            }
+            if (part === 'meta') {
+                return isMac ? {
+                    icon: /*#__PURE__*/ _jsx(CommandIcon, {
+                        size: 12
+                    })
+                } : {
+                    text: 'Ctrl'
+                };
+            }
+            if (part === 'shift') {
+                return isMac ? {
+                    icon: /*#__PURE__*/ _jsx(ArrowBigUp, {
+                        size: 12
+                    })
+                } : {
+                    text: 'Shift'
+                };
+            }
+            if (part === 'alt') {
+                return isMac ? {
+                    icon: /*#__PURE__*/ _jsx(Option, {
+                        size: 12
+                    })
+                } : {
+                    text: 'Alt'
+                };
+            }
+            return {
+                text: part.toUpperCase()
+            };
+        });
+    };
+    // Select the appropriate shortcut to display based on platform
+    const getDisplayShortcut = ()=>{
+        if (typeof shortcut === 'string') {
+            return shortcut;
+        }
+        // If array, prefer meta shortcut for Mac, ctrl shortcut for others
+        const metaShortcut = shortcut.find((s)=>s.toLowerCase().includes('meta'));
+        const ctrlShortcut = shortcut.find((s)=>s.toLowerCase().includes('ctrl'));
+        if (isMac && metaShortcut) {
+            return metaShortcut;
+        }
+        if (!isMac && ctrlShortcut) {
+            return ctrlShortcut;
+        }
+        // Fallback to first shortcut
+        return shortcut[0] || 'meta+k';
+    };
+    const shortcutParts = formatShortcut(getDisplayShortcut());
+    return /*#__PURE__*/ _jsx("button", {
+        className: `search-button ${position === 'nav' ? 'search-button--nav' : 'search-button--actions'}`,
+        onClick: openMenu,
+        type: "button",
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "search-button__wrapper",
+            children: [
+                /*#__PURE__*/ _jsx(SearchIcon, {
+                    className: "search-button__icon"
+                }),
+                position === 'actions' && /*#__PURE__*/ _jsx("span", {
+                    className: "search-button__placeholder",
+                    children: t('cmdkPlugin:searchShort')
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: "search-button__shortcuts",
+                    children: shortcutParts.map((part, index)=>/*#__PURE__*/ _jsx("kbd", {
+                            children: part.icon ? part.icon : part.text
+                        }, index))
+                })
+            ]
+        })
+    });
+};
+export default SearchButton;
+
+//# sourceMappingURL=SearchButton.js.map

package/dist/components/SearchButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/SearchButton.tsx"],"sourcesContent":["'use client'\n\nimport './SearchButton.scss'\n\nimport { useTranslation } from '@payloadcms/ui'\nimport { ArrowBigUp, Command as CommandIcon, Option, SearchIcon } from 'lucide-react'\nimport React, { useEffect, useState } from 'react'\n\nimport type { CustomTranslationsKeys, CustomTranslationsObject } from '../translations'\n\nimport { useCommandMenu } from './CommandMenuContext'\n\ninterface SearchButtonProps {\n  position?: 'actions' | 'nav'\n  shortcut?: string | string[]\n}\n\nconst SearchButton: React.FC<SearchButtonProps> = ({\n  position = 'actions',\n  shortcut = ['meta+k', 'ctrl+k'],\n}) => {\n  const { openMenu } = useCommandMenu()\n  const { t } = useTranslation<CustomTranslationsObject, CustomTranslationsKeys>()\n  const [isMac, setIsMac] = useState(false)\n\n  useEffect(() => {\n    setIsMac(/Mac|iPhone|iPod|iPad/i.test(navigator.platform))\n  }, [])\n\n  const formatShortcut = (\n    shortcutString: string,\n  ): Array<{ icon?: React.ReactNode; text?: string }> => {\n    const parts = shortcutString.split('+').map((part) => part.trim().toLowerCase())\n    return parts.map((part) => {\n      if (part === 'ctrl' || part === 'cmd') {\n        return isMac ? { icon: <CommandIcon size={12} /> } : { text: 'Ctrl' }\n      }\n      if (part === 'meta') {\n        return isMac ? { icon: <CommandIcon size={12} /> } : { text: 'Ctrl' }\n      }\n      if (part === 'shift') {\n        return isMac ? { icon: <ArrowBigUp size={12} /> } : { text: 'Shift' }\n      }\n      if (part === 'alt') {\n        return isMac ? { icon: <Option size={12} /> } : { text: 'Alt' }\n      }\n      return { text: part.toUpperCase() }\n    })\n  }\n\n  // Select the appropriate shortcut to display based on platform\n  const getDisplayShortcut = (): string => {\n    if (typeof shortcut === 'string') {\n      return shortcut\n    }\n    // If array, prefer meta shortcut for Mac, ctrl shortcut for others\n    const metaShortcut = shortcut.find((s) => s.toLowerCase().includes('meta'))\n    const ctrlShortcut = shortcut.find((s) => s.toLowerCase().includes('ctrl'))\n\n    if (isMac && metaShortcut) {\n      return metaShortcut\n    }\n    if (!isMac && ctrlShortcut) {\n      return ctrlShortcut\n    }\n    // Fallback to first shortcut\n    return shortcut[0] || 'meta+k'\n  }\n\n  const shortcutParts = formatShortcut(getDisplayShortcut())\n\n  return (\n    <button\n      className={`search-button ${position === 'nav' ? 'search-button--nav' : 'search-button--actions'}`}\n      onClick={openMenu}\n      type=\"button\"\n    >\n      <div className=\"search-button__wrapper\">\n        <SearchIcon className=\"search-button__icon\" />\n        {position === 'actions' && (\n          <span className=\"search-button__placeholder\">{t('cmdkPlugin:searchShort')}</span>\n        )}\n        <div className=\"search-button__shortcuts\">\n          {shortcutParts.map((part, index) => (\n            <kbd key={index}>{part.icon ? part.icon : part.text}</kbd>\n          ))}\n        </div>\n      </div>\n    </button>\n  )\n}\n\nexport default SearchButton\n"],"names":["useTranslation","ArrowBigUp","Command","CommandIcon","Option","SearchIcon","React","useEffect","useState","useCommandMenu","SearchButton","position","shortcut","openMenu","t","isMac","setIsMac","test","navigator","platform","formatShortcut","shortcutString","parts","split","map","part","trim","toLowerCase","icon","size","text","toUpperCase","getDisplayShortcut","metaShortcut","find","s","includes","ctrlShortcut","shortcutParts","button","className","onClick","type","div","span","index","kbd"],"mappings":"AAAA;;AAEA,OAAO,sBAAqB;AAE5B,SAASA,cAAc,QAAQ,iBAAgB;AAC/C,SAASC,UAAU,EAAEC,WAAWC,WAAW,EAAEC,MAAM,EAAEC,UAAU,QAAQ,eAAc;AACrF,OAAOC,SAASC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAIlD,SAASC,cAAc,QAAQ,uBAAsB;AAOrD,MAAMC,eAA4C,CAAC,EACjDC,WAAW,SAAS,EACpBC,WAAW;IAAC;IAAU;CAAS,EAChC;IACC,MAAM,EAAEC,QAAQ,EAAE,GAAGJ;IACrB,MAAM,EAAEK,CAAC,EAAE,GAAGd;IACd,MAAM,CAACe,OAAOC,SAAS,GAAGR,SAAS;IAEnCD,UAAU;QACRS,SAAS,wBAAwBC,IAAI,CAACC,UAAUC,QAAQ;IAC1D,GAAG,EAAE;IAEL,MAAMC,iBAAiB,CACrBC;QAEA,MAAMC,QAAQD,eAAeE,KAAK,CAAC,KAAKC,GAAG,CAAC,CAACC,OAASA,KAAKC,IAAI,GAAGC,WAAW;QAC7E,OAAOL,MAAME,GAAG,CAAC,CAACC;YAChB,IAAIA,SAAS,UAAUA,SAAS,OAAO;gBACrC,OAAOV,QAAQ;oBAAEa,oBAAM,KAACzB;wBAAY0B,MAAM;;gBAAO,IAAI;oBAAEC,MAAM;gBAAO;YACtE;YACA,IAAIL,SAAS,QAAQ;gBACnB,OAAOV,QAAQ;oBAAEa,oBAAM,KAACzB;wBAAY0B,MAAM;;gBAAO,IAAI;oBAAEC,MAAM;gBAAO;YACtE;YACA,IAAIL,SAAS,SAAS;gBACpB,OAAOV,QAAQ;oBAAEa,oBAAM,KAAC3B;wBAAW4B,MAAM;;gBAAO,IAAI;oBAAEC,MAAM;gBAAQ;YACtE;YACA,IAAIL,SAAS,OAAO;gBAClB,OAAOV,QAAQ;oBAAEa,oBAAM,KAACxB;wBAAOyB,MAAM;;gBAAO,IAAI;oBAAEC,MAAM;gBAAM;YAChE;YACA,OAAO;gBAAEA,MAAML,KAAKM,WAAW;YAAG;QACpC;IACF;IAEA,+DAA+D;IAC/D,MAAMC,qBAAqB;QACzB,IAAI,OAAOpB,aAAa,UAAU;YAChC,OAAOA;QACT;QACA,mEAAmE;QACnE,MAAMqB,eAAerB,SAASsB,IAAI,CAAC,CAACC,IAAMA,EAAER,WAAW,GAAGS,QAAQ,CAAC;QACnE,MAAMC,eAAezB,SAASsB,IAAI,CAAC,CAACC,IAAMA,EAAER,WAAW,GAAGS,QAAQ,CAAC;QAEnE,IAAIrB,SAASkB,cAAc;YACzB,OAAOA;QACT;QACA,IAAI,CAAClB,SAASsB,cAAc;YAC1B,OAAOA;QACT;QACA,6BAA6B;QAC7B,OAAOzB,QAAQ,CAAC,EAAE,IAAI;IACxB;IAEA,MAAM0B,gBAAgBlB,eAAeY;IAErC,qBACE,KAACO;QACCC,WAAW,CAAC,cAAc,EAAE7B,aAAa,QAAQ,uBAAuB,0BAA0B;QAClG8B,SAAS5B;QACT6B,MAAK;kBAEL,cAAA,MAACC;YAAIH,WAAU;;8BACb,KAACnC;oBAAWmC,WAAU;;gBACrB7B,aAAa,2BACZ,KAACiC;oBAAKJ,WAAU;8BAA8B1B,EAAE;;8BAElD,KAAC6B;oBAAIH,WAAU;8BACZF,cAAcd,GAAG,CAAC,CAACC,MAAMoB,sBACxB,KAACC;sCAAiBrB,KAAKG,IAAI,GAAGH,KAAKG,IAAI,GAAGH,KAAKK,IAAI;2BAAzCe;;;;;AAMtB;AAEA,eAAenC,aAAY"}