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 (