@redocly/theme 0.54.0-next.0 → 0.54.0-next.2

package/lib/core/hooks/use-input-key-commands.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInputKeyCommands = useInputKeyCommands;
+const react_1 = require("react");
+function useInputKeyCommands(actionHandlers) {
+    // MacOS uses Command key instead of Ctrl
+    const ctrlKey = (0, react_1.useMemo)(() => (navigator.userAgent.includes('Mac') ? 'metaKey' : 'ctrlKey'), []);
+    const isSelectAll = (0, react_1.useCallback)((event) => {
+        return event.key === 'a' && event[ctrlKey];
+    }, [ctrlKey]);
+    const isPaste = (0, react_1.useCallback)((event) => {
+        return event.key === 'v' && event[ctrlKey];
+    }, [ctrlKey]);
+    const commands = (0, react_1.useMemo)(() => [
+        {
+            match: (event) => event.key === 'Enter',
+            execute: (event) => { var _a; return (_a = actionHandlers === null || actionHandlers === void 0 ? void 0 : actionHandlers.onEnter) === null || _a === void 0 ? void 0 : _a.call(actionHandlers, event); },
+        },
+        {
+            match: (event) => event.key === 'Escape',
+            execute: (event) => {
+                var _a, _b, _c;
+                (_a = actionHandlers === null || actionHandlers === void 0 ? void 0 : actionHandlers.onEscape) === null || _a === void 0 ? void 0 : _a.call(actionHandlers, event);
+                if (((_b = event.currentTarget) === null || _b === void 0 ? void 0 : _b.selectionStart) !== ((_c = event.currentTarget) === null || _c === void 0 ? void 0 : _c.selectionEnd)) {
+                    event.stopPropagation();
+                    removeSelection(event);
+                }
+            },
+        },
+        {
+            match: isSelectAll,
+            execute: (event) => { var _a; return (_a = actionHandlers === null || actionHandlers === void 0 ? void 0 : actionHandlers.onSelectAll) === null || _a === void 0 ? void 0 : _a.call(actionHandlers, event); },
+        },
+        {
+            match: isPaste,
+            execute: (event) => { var _a; return (_a = actionHandlers === null || actionHandlers === void 0 ? void 0 : actionHandlers.onPaste) === null || _a === void 0 ? void 0 : _a.call(actionHandlers, event); },
+        },
+        {
+            match: (event) => {
+                var _a, _b, _c, _d, _e, _f;
+                if (!((_a = event.currentTarget) === null || _a === void 0 ? void 0 : _a.value))
+                    return false;
+                const selectionLength = ((_c = (_b = event.currentTarget) === null || _b === void 0 ? void 0 : _b.selectionEnd) !== null && _c !== void 0 ? _c : 0) - ((_e = (_d = event.currentTarget) === null || _d === void 0 ? void 0 : _d.selectionStart) !== null && _e !== void 0 ? _e : 0);
+                const isFullValueSelected = ((_f = event.currentTarget) === null || _f === void 0 ? void 0 : _f.value.length) === selectionLength;
+                const isModifyAction = isPrintableCharacter(event) || isPaste(event) || isDelete(event);
+                return isFullValueSelected && isModifyAction;
+            },
+            execute: (event) => { var _a; return (_a = actionHandlers === null || actionHandlers === void 0 ? void 0 : actionHandlers.onClear) === null || _a === void 0 ? void 0 : _a.call(actionHandlers, event); },
+        },
+    ], [actionHandlers, isPaste, isSelectAll]);
+    const onKeyDown = (0, react_1.useCallback)((event) => {
+        for (const command of commands) {
+            if (command.match(event)) {
+                command.execute(event);
+            }
+        }
+    }, [commands]);
+    return { onKeyDown };
+}
+function removeSelection(event) {
+    var _a;
+    const selectionEnd = (_a = event.currentTarget.selectionEnd) !== null && _a !== void 0 ? _a : 0;
+    event.currentTarget.setSelectionRange(selectionEnd, selectionEnd);
+}
+function isPrintableCharacter(event) {
+    return event.key.length === 1 && !event.ctrlKey && !event.metaKey;
+}
+function isDelete(event) {
+    return event.key === 'Backspace' || event.key === 'Delete';
+}
+//# sourceMappingURL=use-input-key-commands.js.map

package/lib/markdoc/tags/img.js

@@ -39,6 +39,9 @@ exports.img = {
             style: {
                 type: [Object, String],
             },
+            lightboxStyle: {
+                type: [Object, String],
+            },
         },
         validate: (node) => {
             if (!node.attributes.src && !node.attributes.srcSet) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.54.0-next.0",
+  "version": "0.54.0-next.2",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -47,7 +47,7 @@
     "@types/jest-when": "3.5.5",
     "@types/lodash.debounce": "4.0.9",
     "@types/lodash.throttle": "4.1.9",
-    "@types/node": "22.10.5",
+    "@types/node": "22.15.3",
     "@types/nprogress": "0.2.3",
     "@types/react": "18.3.9",
     "@types/react-dom": "18.3.5",

package/src/components/CodeBlock/CodeBlockContainer.tsx

@@ -167,6 +167,10 @@ const CodeBlockContainerComponent = styled.pre<CodeBlockContainerProps>`
     display: flex;
   }
 
+  .tree-view-comment {
+    color: var(--code-block-tree-view-comment-color);
+  }
+
   .tree-view-branch {
     color: var(--code-block-tree-view-lines-color);
   }

package/src/components/CodeBlock/variables.ts

@@ -130,6 +130,7 @@ export const code = css`
    */
   --code-block-tree-view-icon-font-family: 'TreeViewIcons'; // @presenter FontFamily
   --code-block-tree-view-lines-color: var(--border-color-primary); // @presenter Color
+  --code-block-tree-view-comment-color: var(--input-content-placeholder-color); // @presenter Color
 
   // @tokens End
 `;

package/src/components/Feedback/Mood.tsx

@@ -240,13 +240,13 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
 
         {displayFeedbackEmail && (
           <StyledFormOptionalFields>
-            <Label data-translation-key="feedback.settings.optionalEmail.label">
+            <InputLabel data-translation-key="feedback.settings.optionalEmail.label">
               {optionalEmailSettings?.label ||
                 translate(
                   'feedback.settings.optionalEmail.label',
                   'Your email (optional, for follow-up)',
                 )}
-            </Label>
+            </InputLabel>
             <EmailInput
               onChange={onEmailChange}
               placeholder={
@@ -255,6 +255,12 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
               }
               type="email"
               required={!!email}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  e.preventDefault();
+                  onSubmitMoodForm();
+                }
+              }}
             />
           </StyledFormOptionalFields>
         )}
@@ -312,6 +318,13 @@ const Label = styled.h4<{ standAlone?: boolean }>`
   margin: 0;
 `;
 
+const InputLabel = styled.h4`
+  font-weight: var(--font-weight-regular);
+  font-size: var(--feedback-font-size);
+  line-height: var(--feedback-line-height);
+  margin: 0;
+`;
+
 const ButtonsContainer = styled.div`
   display: flex;
   justify-content: end;

package/src/components/Feedback/Rating.tsx

@@ -153,13 +153,13 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
 
         {displayFeedbackEmail && (
           <StyledFormOptionalFields>
-            <Label data-translation-key="feedback.settings.optionalEmail.label">
+            <InputLabel data-translation-key="feedback.settings.optionalEmail.label">
               {optionalEmailSettings?.label ||
                 translate(
                   'feedback.settings.optionalEmail.label',
                   'Your email (optional, for follow-up)',
                 )}
-            </Label>
+            </InputLabel>
             <EmailInput
               onChange={onEmailChange}
               placeholder={
@@ -168,6 +168,12 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
               }
               type="email"
               required={!!email}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  e.preventDefault();
+                  onSubmitRatingForm();
+                }
+              }}
             />
           </StyledFormOptionalFields>
         )}
@@ -226,6 +232,13 @@ const Label = styled.h4`
   margin: 0;
 `;
 
+const InputLabel = styled.h4`
+  font-weight: var(--font-weight-regular);
+  font-size: var(--feedback-font-size);
+  line-height: var(--feedback-line-height);
+  margin: 0;
+`;
+
 const ButtonsContainer = styled.div`
   display: flex;
   justify-content: end;

package/src/components/Feedback/Scale.tsx

@@ -178,13 +178,13 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
 
         {displayFeedbackEmail && (
           <StyledFormOptionalFields>
-            <Label data-translation-key="feedback.settings.optionalEmail.label">
+            <InputLabel data-translation-key="feedback.settings.optionalEmail.label">
               {optionalEmailSettings?.label ||
                 translate(
                   'feedback.settings.optionalEmail.label',
                   'Your email (optional, for follow-up)',
                 )}
-            </Label>
+            </InputLabel>
             <EmailInput
               onChange={onEmailChange}
               placeholder={
@@ -193,6 +193,12 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
               }
               type="email"
               required={!!email}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  e.preventDefault();
+                  onSubmitScaleForm();
+                }
+              }}
             />
           </StyledFormOptionalFields>
         )}
@@ -240,6 +246,13 @@ const Label = styled.h4`
   width: 100%;
 `;
 
+const InputLabel = styled.h4`
+  font-weight: var(--font-weight-regular);
+  font-size: var(--feedback-font-size);
+  line-height: var(--feedback-line-height);
+  margin: 0;
+`;
+
 const SubLabelContainer = styled.div`
   display: flex;
   justify-content: space-between;

package/src/components/Feedback/Sentiment.tsx

@@ -210,16 +210,15 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
             )}
           </StyledFormOptionalFields>
         )}
-
         {displayFeedbackEmail && (
           <StyledFormOptionalFields>
-            <Label data-translation-key="feedback.settings.optionalEmail.label">
+            <InputLabel data-translation-key="feedback.settings.optionalEmail.label">
               {optionalEmailSettings?.label ||
                 translate(
                   'feedback.settings.optionalEmail.label',
                   'Your email (optional, for follow-up)',
                 )}
-            </Label>
+            </InputLabel>
             <EmailInput
               onChange={onEmailChange}
               placeholder={
@@ -228,10 +227,15 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
               }
               type="email"
               required={!!email}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  e.preventDefault();
+                  onSubmitSentimentForm();
+                }
+              }}
             />
           </StyledFormOptionalFields>
         )}
-
         {displaySubmitBnt && (
           <ButtonsContainer>
             <Button onClick={onCancelSentimentForm} variant="text" size="small">
@@ -263,6 +267,13 @@ const Label = styled.h4`
   margin: 0;
 `;
 
+const InputLabel = styled.h4`
+  font-weight: var(--font-weight-regular);
+  font-size: var(--feedback-font-size);
+  line-height: var(--feedback-line-height);
+  margin: 0;
+`;
+
 const StyledForm = styled.form`
   width: 100%;
   gap: var(--spacing-sm);

package/src/components/Image/Image.tsx

@@ -1,8 +1,19 @@
-import React from 'react';
+import React, {
+  type KeyboardEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import styled from 'styled-components';
 
 import { parseSrcSet } from '@redocly/theme/core/utils';
 
+interface CSSProperties extends React.CSSProperties {
+  cssText?: string;
+}
+
 export type ImageProps = {
   src?: string;
   srcSet?: string;
@@ -12,38 +23,66 @@ export type ImageProps = {
   height?: string | number;
   border?: string;
   withLightbox?: boolean;
+  lightboxStyle?: React.CSSProperties | string;
   style?: React.CSSProperties | string;
 };
 
 export function Image(props: ImageProps): JSX.Element {
-  const { src, srcSet, alt, className, width, height, border, style, withLightbox } = props;
+  const { src, srcSet, alt, className, width, height, border, style, withLightbox, lightboxStyle } =
+    props;
 
-  const [lightboxImage, setLightboxImage] = React.useState<string | undefined>(undefined);
-  const parsedSourceSetMap = React.useMemo(() => {
+  const lightboxContainerRef = useRef<HTMLDivElement>(null);
+  const [lightboxImage, setLightboxImage] = useState<string | undefined>(undefined);
+  const parsedSourceSetMap = useMemo(() => {
     return srcSet ? parseSrcSet(srcSet) : new Map();
   }, [srcSet]);
 
-  const handleImageClick = (src: string) => {
-    if (!withLightbox || lightboxImage) {
-      return;
+  const handleLightboxKeyDown = useCallback((e: KeyboardEvent) => {
+    e.stopPropagation();
+    if (e.key === 'Escape') {
+      setLightboxImage(undefined);
     }
-    setLightboxImage(src);
-  };
+  }, []);
 
-  const handleCloseLightbox = () => {
+  const handleImageClick = useCallback(
+    (src: string) => {
+      if (!withLightbox || lightboxImage) {
+        return;
+      }
+      setLightboxImage(src);
+    },
+    [withLightbox, lightboxImage],
+  );
+
+  const handleCloseLightbox = useCallback(() => {
     setLightboxImage(undefined);
-  };
+  }, []);
 
-  const combinedStyles: React.CSSProperties = {
+  useEffect(() => {
+    if (lightboxImage) {
+      lightboxContainerRef.current?.focus();
+    }
+  }, [lightboxImage]);
+
+  const combinedStyles: CSSProperties = {
     ...(withLightbox && { cursor: 'pointer' }),
     ...(border && { border }),
     ...(typeof style === 'string' ? { cssText: style } : style),
   };
 
+  const lightboxOverlayStyles: CSSProperties | undefined =
+    typeof lightboxStyle === 'string' ? { cssText: lightboxStyle } : lightboxStyle;
+
   return (
     <>
       {lightboxImage ? (
-        <LightboxContainer onClick={handleCloseLightbox}>
+        <LightboxContainer
+          ref={lightboxContainerRef}
+          onClick={handleCloseLightbox}
+          onKeyDown={handleLightboxKeyDown}
+          tabIndex={0}
+        >
+          <Overlay style={lightboxOverlayStyles} />
           <Image src={lightboxImage} alt={alt} />
         </LightboxContainer>
       ) : null}
@@ -88,20 +127,33 @@ const ColorModeAwareImage = styled.img<{ colorMode: string; $withLightbox?: bool
   `}
 `;
 
+const Overlay = styled.div`
+  background-color: var(--bg-color-modal-overlay);
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+  height: 100%;
+  width: 100%;
+  z-index: -1;
+`;
+
 const LightboxContainer = styled.div`
+  display: grid;
+  height: 100vh;
+  left: 0;
   position: fixed;
   top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: var(--bg-color-modal-overlay);
+  width: 100vw;
   z-index: var(--z-index-overlay);
-  display: flex;
-  justify-content: center;
-  align-items: center;
+
+  &:focus {
+    outline: none;
+  }
 
   img {
     cursor: pointer;
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+    margin: auto;
     max-width: 90%;
     max-height: 90%;
   }

package/src/components/Search/SearchDialog.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useRef, useState, useEffect } from 'react';
+import React, { Fragment, useRef, useState, useEffect, useCallback } from 'react';
 import styled from 'styled-components';
 
 import type { MouseEvent } from 'react';
@@ -11,7 +11,12 @@ import { breakpoints, concatClassNames } from '@redocly/theme/core/utils';
 import { SearchItem } from '@redocly/theme/components/Search/SearchItem';
 import { SearchRecent } from '@redocly/theme/components/Search/SearchRecent';
 import { SearchSuggestedPages } from '@redocly/theme/components/Search/SearchSuggestedPages';
-import { useThemeHooks, useDialogHotKeys, useSearchFilter } from '@redocly/theme/core/hooks';
+import {
+  useThemeHooks,
+  useDialogHotKeys,
+  useSearchFilter,
+  useRecentSearches,
+} from '@redocly/theme/core/hooks';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
 import { SearchFilter } from '@redocly/theme/components/Search/SearchFilter';
@@ -60,6 +65,7 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
     onFacetReset,
     onQuickFilterReset,
   } = useSearchFilter(filter, setFilter);
+  const { addSearchHistoryItem } = useRecentSearches();
   const aiSearch = useAiSearch({ filter });
 
   const searchInputRef = useRef<HTMLInputElement>(null);
@@ -70,7 +76,16 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
 
   const { translate } = useTranslate();
 
-  useDialogHotKeys(modalRef, onClose);
+  const handleClose = useCallback(() => {
+    const value = searchInputRef?.current?.value;
+    if (value) {
+      addSearchHistoryItem(value);
+    }
+
+    onClose();
+  }, [addSearchHistoryItem, onClose]);
+
+  useDialogHotKeys(modalRef, handleClose);
 
   const focusSearchInput = () => {
     requestAnimationFrame(() => {
@@ -86,63 +101,73 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
 
   useEffect(focusSearchInput, []);
 
-  const handleOverlayClick = (event: MouseEvent<HTMLElement>) => {
-    const target = event.target as HTMLElement;
-    if (typeof target.className !== 'string') return;
-    if (target.className?.includes(' overlay')) {
-      onClose();
-    }
-  };
+  const handleOverlayClick = useCallback(
+    (event: MouseEvent<HTMLElement>) => {
+      const target = event.target as HTMLElement;
+      if (typeof target.className !== 'string') return;
+      if (target.className?.includes(' overlay')) {
+        handleClose();
+      }
+    },
+    [handleClose],
+  );
 
-  const mapItem = (
-    item: SearchItemData,
-    index: number,
-    results: SearchItemData[],
-    innerRef?: React.Ref<HTMLAnchorElement>,
-  ) => {
-    let itemProduct;
-    if (!product && item.document.product) {
-      const folder = item.document.product?.folder;
-      const resolvedProduct = products.find((product) =>
-        product.slug.match(`/${folder.startsWith('./') ? folder.slice(2) : folder}/`),
+  const mapItem = useCallback(
+    (
+      item: SearchItemData,
+      index: number,
+      results: SearchItemData[],
+      innerRef?: React.Ref<HTMLAnchorElement>,
+    ) => {
+      let itemProduct;
+      if (!product && item.document.product) {
+        const folder = item.document.product?.folder;
+        const resolvedProduct = products.find((product) =>
+          product.slug.match(`/${folder.startsWith('./') ? folder.slice(2) : folder}/`),
+        );
+        itemProduct = resolvedProduct
+          ? { name: resolvedProduct.name, icon: resolvedProduct.icon }
+          : undefined;
+      }
+
+      return (
+        <SearchItem
+          key={`${index}-${item.document.id}`}
+          item={item}
+          product={itemProduct}
+          innerRef={innerRef}
+          onClick={() => {
+            addSearchHistoryItem(query);
+            otelTelemetry.send('search.result.clicked', {
+              query,
+              url: item.document.url,
+              total_results: results.length.toString(),
+              index: index.toString(),
+              search_engine: mode,
+            });
+          }}
+        />
       );
-      itemProduct = resolvedProduct
-        ? { name: resolvedProduct.name, icon: resolvedProduct.icon }
-        : undefined;
-    }
-
-    return (
-      <SearchItem
-        key={`${index}-${item.document.id}`}
-        item={item}
-        product={itemProduct}
-        innerRef={innerRef}
-        onClick={() => {
-          otelTelemetry.send('search.result.clicked', {
-            query,
-            url: item.document.url,
-            total_results: results.length.toString(),
-            index: index.toString(),
-            search_engine: mode,
-          });
-        }}
-      />
-    );
-  };
+    },
+    [product, products, addSearchHistoryItem, query, otelTelemetry, mode],
+  );
 
-  const showLoadMore = (groupKey: string, currentCount: number = 0) => {
-    const groupFacet = facets.find((facet) => facet.field === groupField);
-    let needLoadMore = false;
-    if (groupFacet) {
-      const groupValue = groupFacet.values.find((value) => {
-        if (typeof value === 'object') {
-          return value.value === groupKey;
-        } else return false;
-      }) as SearchFacetCount;
-      needLoadMore = groupValue ? groupValue.count > currentCount : false;
-    }
-    return needLoadMore;
-  };
+  const showLoadMore = useCallback(
+    (groupKey: string, currentCount: number = 0) => {
+      const groupFacet = facets.find((facet) => facet.field === groupField);
+      let needLoadMore = false;
+      if (groupFacet) {
+        const groupValue = groupFacet.values.find((value) => {
+          if (typeof value === 'object') {
+            return value.value === groupKey;
+          } else return false;
+        }) as SearchFacetCount;
+        needLoadMore = groupValue ? groupValue.count > currentCount : false;
+      }
+      return needLoadMore;
+    },
+    [facets, groupField],
+  );
 
   const showResults = !!((filter && filter.length) || query);
   const showSearchFilterButton = advancedSearch && mode === 'search';
@@ -410,7 +435,7 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
                 data-translation-key="search.cancel"
                 variant="secondary"
                 size="small"
-                onClick={onClose}
+                onClick={handleClose}
               >
                 {translate('search.cancel', 'Cancel')}
               </SearchCancelButton>

package/src/components/Search/SearchInput.tsx

@@ -6,7 +6,7 @@ import type { ChangeEvent, SyntheticEvent } from 'react';
 import { SearchIcon } from '@redocly/theme/icons/SearchIcon/SearchIcon';
 import { Spinner } from '@redocly/theme/icons/Spinner/Spinner';
 import { Button } from '@redocly/theme/components/Button/Button';
-import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { useInputKeyCommands, useRecentSearches, useThemeHooks } from '@redocly/theme/core/hooks';
 import { CloseFilledIcon } from '@redocly/theme/icons/CloseFilledIcon/CloseFilledIcon';
 import { ChevronLeftIcon } from '@redocly/theme/icons/ChevronLeftIcon/ChevronLeftIcon';
 
@@ -34,8 +34,14 @@ export function SearchInput({
   className,
 }: SearchInputProps): JSX.Element {
   const { useTelemetry } = useThemeHooks();
+  const { addSearchHistoryItem } = useRecentSearches();
   const telemetry = useTelemetry();
 
+  const { onKeyDown } = useInputKeyCommands({
+    onEnter: (event) => onSubmit?.(event),
+    onClear: () => addSearchHistoryItem(value),
+  });
+
   const stopPropagation = (event: SyntheticEvent) => event.stopPropagation();
 
   const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {
@@ -44,19 +50,10 @@ export function SearchInput({
 
   const handleOnReset = () => {
     onChange('');
+    addSearchHistoryItem(value);
     telemetry.send('search_input_reset_button_clicked', {});
   };
 
-  const handleOnKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (!onSubmit) {
-      return;
-    }
-
-    if (e.key === 'Enter') {
-      onSubmit(e);
-    }
-  };
-
   return (
     <SearchInputWrapper data-component-name="Search/SearchInput" className={className}>
       {showReturnButton ? (
@@ -72,7 +69,7 @@ export function SearchInput({
         placeholder={placeholder}
         onChange={handleOnChange}
         onClick={stopPropagation}
-        onKeyUp={handleOnKeyUp}
+        onKeyDown={onKeyDown}
       />
       {!!value && (
         <ResetButton