Redo keyboardshortcut

Author: zenoachtig

packages/gitbook/src/components/AIChat/AIChatInput.tsx

@@ -5,7 +5,6 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import { useAIChatState } from '../AI/useAIChat';
 import { HoverCard, HoverCardRoot, HoverCardTrigger } from '../primitives';
 import { Input } from '../primitives/Input';
-import { KeyboardShortcut } from '../primitives/KeyboardShortcut';
 
 export function AIChatInput(props: {
     value: string;
@@ -65,11 +64,12 @@ export function AIChatInput(props: {
             className="animate-blur-in-slow bg-tint-base/9 backdrop-blur-lg contrast-more:bg-tint-base"
             rows={1}
             keyboardShortcut={
-                !value && !disabled && !loading ? (
-                    <div className="group-focus-within/input:hidden">
-                        <KeyboardShortcut keys={['mod', 'i']} className="bg-tint-base" />
-                    </div>
-                ) : undefined
+                !value && !disabled && !loading
+                    ? {
+                          keys: ['mod', 'i'],
+                          className: 'bg-tint-base group-focus-within/input:hidden',
+                      }
+                    : undefined
             }
             disabled={disabled || loading}
             aria-busy={loading}

packages/gitbook/src/components/Search/SearchInput.tsx

@@ -3,7 +3,6 @@ import React, { useEffect, useRef } from 'react';
 
 import { tString, useLanguage } from '@/intl/client';
 import { Input } from '../primitives';
-import { KeyboardShortcut } from '../primitives/KeyboardShortcut';
 
 interface SearchInputProps {
     onChange: (value: string) => void;
@@ -73,12 +72,11 @@ export const SearchInput = React.forwardRef<HTMLDivElement, SearchInputProps>(
                     aria-haspopup="listbox"
                     aria-expanded={value && isOpen ? 'true' : 'false'}
                     clearButton
-                    keyboardShortcut={
-                        <KeyboardShortcut
-                            className="theme-bold:border-header-link/4 theme-bold:bg-header-background theme-bold:text-header-link"
-                            keys={isOpen ? ['esc'] : ['mod', 'k']}
-                        />
-                    }
+                    keyboardShortcut={{
+                        className:
+                            'theme-bold:border-header-link/4 theme-bold:bg-header-background theme-bold:text-header-link',
+                        keys: isOpen ? ['esc'] : ['mod', 'k'],
+                    }}
                     {...rest}
                     type="text"
                 />

packages/gitbook/src/components/primitives/Input.tsx

@@ -5,7 +5,7 @@ import { tcls } from '@/lib/tailwind';
 import { Icon, type IconName } from '@gitbook/icons';
 import React, { type ReactNode } from 'react';
 import { Button, type ButtonProps } from './Button';
-import { KeyboardShortcut } from './KeyboardShortcut';
+import { KeyboardShortcut, type KeyboardShortcutProps } from './KeyboardShortcut';
 
 export type InputProps = {
     label: string;
@@ -28,7 +28,7 @@ export type InputProps = {
     /**
      * A keyboard shortcut, shown to the right of the input.
      */
-    keyboardShortcut?: boolean | ReactNode;
+    keyboardShortcut?: boolean | KeyboardShortcutProps;
 
     onSubmit?: (value: string | number | readonly string[] | undefined) => void;
     resize?: boolean;
@@ -220,7 +220,7 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
                     <div className={multiline ? 'absolute top-2.5 right-2.5' : ''}>
                         {keyboardShortcut !== false ? (
                             typeof keyboardShortcut === 'object' ? (
-                                keyboardShortcut
+                                <KeyboardShortcut {...keyboardShortcut} />
                             ) : onSubmit && !submitted && hasValue ? (
                                 <KeyboardShortcut
                                     keys={['enter']}