Allow to clear input

.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-    ignorePatterns: ['*.test.ts', '*.spec.tsx','zustand.ts'],
+    ignorePatterns: ['*.test.ts', '*.spec.tsx', 'zustand.ts'],
     settings: {
         'import/resolver': {
             node: {
@@ -28,6 +28,7 @@ module.exports = {
             { unnamedComponents: 'arrow-function', namedComponents: 'arrow-function' },
         ],
         'array-callback-return': ['error', { checkForEach: true }],
-        'react/no-unstable-nested-components': 'warn',
+        'react/no-unstable-nested-components': ['warn', { allowAsProps: true }],
+        'react/display-name': 'off',
     },
 };

package.json

@@ -31,7 +31,7 @@
         "@types/react-dom": "^18.3.0",
         "@types/recharts": "1.8.29",
         "@types/node": "^20.12.12",
-        "@typescript-eslint/eslint-plugin": "^7.10.0",
+        "@typescript-eslint/eslint-plugin": "^7.11.0",
         "autoprefixer": "^10.4.19",
         "eslint": "^8.57.0",
         "eslint-config-unosquare": "0.13.0",
@@ -41,7 +41,7 @@
         "husky": "^9.0.11",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
-        "lint-staged": "^15.2.4",
+        "lint-staged": "^15.2.5",
         "postcss-loader": "^8.1.1",
         "prettier": "^3.2.5",
         "tailwindcss": "^3.4.3",

src/SearchBox/index.tsx

@@ -1,6 +1,6 @@
-import { Search12Regular } from '@fluentui/react-icons';
+import { Dismiss24Regular, Search24Regular } from '@fluentui/react-icons';
 import { TextInput } from '@tremor/react';
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import { useDebounce } from '../hooks';
 
 export type SearchBoxSettings = {
@@ -11,6 +11,9 @@ export type SearchBoxSettings = {
     initialValue?: string;
 };
 
+export const SearchOrClearButton = ({ hasValue = false, onClick }: { hasValue: boolean; onClick: () => void }) =>
+    hasValue ? <Dismiss24Regular className='cursor-pointer' onClick={() => onClick()} /> : <Search24Regular />;
+
 export const SearchBox = ({
     search,
     placeholder = 'Search',
@@ -26,15 +29,22 @@ export const SearchBox = ({
         if (focus && ref.current) setTimeout(() => ref.current?.focus(), 2000);
     }, [focus]);
 
-    const onChange = ({ target }: React.ChangeEvent<HTMLInputElement>) => {
-        setValue(target.value);
+    const setSearchValue = (x = '') => {
+        setValue(x);
         debounceCall();
     };
 
+    const onChange = ({ target }: React.ChangeEvent<HTMLInputElement>) => setSearchValue(target.value);
+
+    const icon = useMemo(
+        () => () => <SearchOrClearButton hasValue={value.length > 0} onClick={setSearchValue} />,
+        [value],
+    );
+
     return (
         <TextInput
-            className='max-w-[220px]'
-            icon={Search12Regular}
+            className='max-w-[220px] [&_input]:px-[10px] [&_svg]:ml-2'
+            icon={icon}
             ref={ref}
             value={value}
             onChange={onChange}