diff --git a/packages/docsearch-react/src/DocSearch.tsx b/packages/docsearch-react/src/DocSearch.tsx index 1c5a292b..a9f09c42 100644 --- a/packages/docsearch-react/src/DocSearch.tsx +++ b/packages/docsearch-react/src/DocSearch.tsx @@ -5,7 +5,13 @@ import { createPortal } from 'react-dom'; import { DocSearchButton } from './DocSearchButton'; import { DocSearchModal } from './DocSearchModal'; -import type { DocSearchHit, DocSearchTheme, InternalDocSearchHit, StoredDocSearchHit } from './types'; +import type { + DocSearchHit, + DocSearchTheme, + InternalDocSearchHit, + KeyboardShortcuts, + StoredDocSearchHit, +} from './types'; import { useDocSearchKeyboardEvents } from './useDocSearchKeyboardEvents'; import { useTheme } from './useTheme'; @@ -155,6 +161,10 @@ export interface DocSearchProps { * @default 4 */ recentSearchesWithFavoritesLimit?: number; + /** + * Configuration for keyboard shortcuts. Allows enabling/disabling specific shortcuts. + */ + keyboardShortcuts?: KeyboardShortcuts; } export function DocSearch({ indexName, searchParameters, indices = [], ...props }: DocSearchProps): JSX.Element { @@ -212,6 +222,7 @@ export function DocSearch({ indexName, searchParameters, indices = [], ...props isAskAiActive, onAskAiToggle, searchButtonRef, + keyboardShortcuts: props.keyboardShortcuts, }); useTheme({ theme: props.theme }); @@ -237,7 +248,12 @@ export function DocSearch({ indexName, searchParameters, indices = [], ...props return ( <> - + {isOpen && createPortal( diff --git a/packages/docsearch-react/src/DocSearchButton.tsx b/packages/docsearch-react/src/DocSearchButton.tsx index d155da40..fc1096e6 100644 --- a/packages/docsearch-react/src/DocSearchButton.tsx +++ b/packages/docsearch-react/src/DocSearchButton.tsx @@ -1,8 +1,9 @@ import React, { useEffect, useState, type JSX } from 'react'; +import { getKeyboardShortcuts } from './constants/keyboardShortcuts'; import { ControlKeyIcon, KKeyIcon, MetaKeyIcon } from './icons/MetaKeysIcon'; import { SearchIcon } from './icons/SearchIcon'; -import type { DocSearchTheme } from './types'; +import type { DocSearchTheme, KeyboardShortcuts } from './types'; import { useTheme } from './useTheme'; export type ButtonTranslations = Partial<{ @@ -13,6 +14,7 @@ export type ButtonTranslations = Partial<{ export type DocSearchButtonProps = React.ComponentProps<'button'> & { theme?: DocSearchTheme; translations?: ButtonTranslations; + keyboardShortcuts?: KeyboardShortcuts; }; const ACTION_KEY_DEFAULT = 'Ctrl' as const; @@ -23,8 +25,9 @@ function isAppleDevice(): boolean { } export const DocSearchButton = React.forwardRef( - ({ translations = {}, ...props }, ref) => { + ({ translations = {}, keyboardShortcuts, ...props }, ref) => { const { buttonText = 'Search', buttonAriaLabel = 'Search' } = translations; + const resolvedShortcuts = getKeyboardShortcuts(keyboardShortcuts); const [key, setKey] = useState(null); useTheme({ theme: props.theme }); @@ -41,13 +44,15 @@ export const DocSearchButton = React.forwardRef] as const); + const isCtrlCmdKEnabled = resolvedShortcuts['Ctrl/Cmd+K']; const shortcut = `${actionKeyAltText}+k`; + return (