Added OnKeyDown

jest.config.js

@@ -1,6 +1,27 @@
+/** @type {import('jest').Config} */
 module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'jsdom',
+
+  // Transform ESM modules like react-markdown
+  transform: {
+    '^.+\\.(ts|tsx|js|jsx)$': 'ts-jest',
+  },
+
+  transformIgnorePatterns: [
+    '/node_modules/(?!(react-markdown|remark-gfm|rehype-raw)/)', // allow ESM modules
+  ],
+
+  testMatch: [
+    '**/__testing__/**/*.test.(ts|tsx|js|jsx)',
+    '**/?(*.)+(spec|test).(ts|tsx|js|jsx)'
+  ],
+
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
+
+  // Remove deprecated globals config
+  globals: {},
+
   coverageThreshold: {
     global: {
       branches: 80,

src/__testing__/SearchBar.test.tsx

@@ -0,0 +1,41 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import SearchBar, { SearchBarProps } from '../custom/SearchBar';
+import { SistentThemeProvider } from '../theme';
+
+const renderWithTheme = (component: React.ReactElement) => {
+  return render(<SistentThemeProvider>{component}</SistentThemeProvider>);
+};
+
+describe('SearchBar Component', () => {
+  const defaultProps: SearchBarProps = {
+    onSearch: jest.fn(),
+    expanded: true,
+    setExpanded: jest.fn(),
+  };
+
+  describe('Integration (onSearch + onKeyDown)', () => {
+    it('should call onKeyDown when pressing Enter (onSearch not triggered yet)', () => {
+      const onKeyDownMock = jest.fn();
+      const onSearchMock = jest.fn();
+
+      renderWithTheme(
+        <SearchBar
+          {...defaultProps}
+          onKeyDown={onKeyDownMock}
+          onSearch={onSearchMock}
+          placeholder="Search"
+        />
+      );
+
+      const input = screen.getByTestId('searchbar-input');
+
+      fireEvent.change(input, { target: { value: 'test query' } });
+      fireEvent.keyDown(input, { key: 'Enter', code: 'Enter', keyCode: 13 });
+
+      // Assertions
+      expect(onKeyDownMock).toHaveBeenCalled(); // this is fine
+      expect(onSearchMock).not.toHaveBeenCalled(); // Enter does not trigger onSearch yet
+    });
+  });
+});

src/__testing__/StyledSearchBar.test.tsx

@@ -0,0 +1,57 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import { StyledSearchBar } from '../custom/StyledSearchBar';
+import { SistentThemeProvider } from '../theme';
+
+const renderWithTheme = (component: React.ReactElement) => {
+  return render(<SistentThemeProvider>{component}</SistentThemeProvider>);
+};
+
+describe('StyledSearchBar', () => {
+  describe('onKeyDown functionality', () => {
+    it('should call onKeyDown handler when key is pressed', () => {
+      const onKeyDownMock = jest.fn();
+      const onChangeMock = jest.fn();
+
+      renderWithTheme(
+        <StyledSearchBar
+          value=""
+          onChange={onChangeMock}
+          onKeyDown={onKeyDownMock}
+          placeholder="Search"
+        />
+      );
+
+      const input = screen.getByRole('searchbox');
+      fireEvent.keyDown(input, { key: 'Enter', code: 'Enter', keyCode: 13 });
+
+      expect(onKeyDownMock).toHaveBeenCalledTimes(1);
+    });
+
+    it('should handle Escape key to clear search', () => {
+      const onKeyDownMock = jest.fn((event) => {
+        if (event.key === 'Escape') {
+          // Simulate clearing logic
+          event.preventDefault();
+        }
+      });
+      const onChangeMock = jest.fn();
+
+      renderWithTheme(
+        <StyledSearchBar
+          value="test"
+          onChange={onChangeMock}
+          onKeyDown={onKeyDownMock}
+          placeholder="Search"
+        />
+      );
+
+      const input = screen.getByRole('searchbox');
+      fireEvent.keyDown(input, { key: 'Escape', code: 'Escape', keyCode: 27 });
+
+      expect(onKeyDownMock).toHaveBeenCalled();
+      const event = onKeyDownMock.mock.calls[0][0];
+      expect(event.key).toBe('Escape');
+    });
+  });
+});

src/custom/SearchBar.tsx

@@ -76,6 +76,7 @@ export interface SearchBarProps {
   expanded: boolean;
   setExpanded: (expanded: boolean) => void;
   'data-testid'?: string;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
 }
 
 function SearchBar({
@@ -84,13 +85,14 @@ function SearchBar({
   onClear,
   expanded,
   setExpanded,
-  'data-testid': testId = 'search-bar-wrapper'
+  'data-testid': testId = 'search-bar-wrapper',
+  onKeyDown
 }: SearchBarProps): JSX.Element {
   const [searchText, setSearchText] = React.useState('');
   const searchRef = React.useRef<HTMLInputElement | null>(null);
   const theme = useTheme();
 
-  // Debounce the onSearch function
+  // Debounce the onSearch function for normal typing
   const debouncedOnSearch = useCallback(
     debounce((value) => {
       onSearch(value);
@@ -130,15 +132,27 @@ function SearchBar({
     }
   };
 
+  // ✅ New unified keyDown handler
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    // Call external onKeyDown if provided
+    if (onKeyDown) {
+      onKeyDown(event);
+    }
+
+    // Trigger onSearch immediately when Enter is pressed
+    if (event.key === 'Enter') {
+      onSearch(searchText);
+    }
+  };
+
   return (
     <ClickAwayListener
       onClickAway={(event) => {
         event.stopPropagation();
         const isTable = (event.target as HTMLElement)?.closest('#ref');
 
-        if (searchText !== '') {
-          return;
-        }
+        if (searchText !== '') return;
+
         if (isTable) {
           handleClearIconClick(event as unknown as React.MouseEvent);
         }
@@ -149,10 +163,11 @@ function SearchBar({
           <TextField
             variant="standard"
             value={searchText}
-            onChange={handleSearchChange} // Updated to use the new handler
+            onChange={handleSearchChange}
             inputRef={searchRef}
             placeholder={placeholder}
             data-testid="searchbar-input"
+            onKeyDown={handleKeyDown} // <-- updated handler
             style={{
               width: expanded ? '150px' : '0',
               opacity: expanded ? 1 : 0,

src/custom/StyledSearchBar/StyledSearchBar.tsx

@@ -15,6 +15,7 @@ interface SearchBarProps {
   sx?: SxProps<Theme>;
   endAdornment?: React.ReactNode;
   debounceTime?: number;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
 }
 
 /**
@@ -38,8 +39,10 @@ function StyledSearchBar({
   sx,
   placeholder,
   endAdornment,
-  debounceTime = 300
+  debounceTime = 300,
+  onKeyDown
 }: SearchBarProps): JSX.Element {
+
   const theme = useTheme();
   const [inputValue, setInputValue] = useState(value);
 
@@ -87,20 +90,22 @@ function StyledSearchBar({
 
   return (
     <StyledSearchInput
-      type="search"
-      label={label}
-      fullWidth
-      value={inputValue}
-      onChange={handleChange}
-      sx={sx}
-      placeholder={placeholder ?? 'Search'}
-      startAdornment={
-        <InputAdornment position="start">
-          <SearchIcon fill={theme.palette.background.neutral?.default} />
-        </InputAdornment>
-      }
-      endAdornment={<InputAdornmentEnd position="end">{endAdornment}</InputAdornmentEnd>}
-    />
+    type="search"
+    label={label}
+    fullWidth
+    value={inputValue}
+    onChange={handleChange}
+    sx={sx}
+    placeholder={placeholder ?? 'Search'}
+    onKeyDown={onKeyDown}
+    startAdornment={
+      <InputAdornment position="start">
+        <SearchIcon fill={theme.palette.background.neutral?.default} />
+      </InputAdornment>
+    }
+    endAdornment={<InputAdornmentEnd position="end">{endAdornment}</InputAdornmentEnd>}
+  />
+
   );
 }
 

src/setupTests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';