feat: table search can detect text values on change

packages/vibrant-components/src/lib/TableSearch/TableSearch.tsx

@@ -6,7 +6,7 @@ import { TableSearchField } from './TableSearchField';
 import { TableSearchOption } from './TableSearchOption';
 import type { TableSearchProps } from './TableSearchProps';
 
-export const TableSearch = ({ children, testId = 'table-search', onSubmit }: TableSearchProps) => {
+export const TableSearch = ({ children, testId = 'table-search', onSubmit, onTextChange }: TableSearchProps) => {
   const [optionValue, setOptionValue] = useState<string>();
   const searchFieldRef = useRef<TextInputRef>(null);
 
@@ -21,7 +21,12 @@ export const TableSearch = ({ children, testId = 'table-search', onSubmit }: Tab
   };
 
   return (
-    <TableSearchProvider searchFieldRef={searchFieldRef} onOptionChange={changeOption} onSubmit={submit}>
+    <TableSearchProvider
+      searchFieldRef={searchFieldRef}
+      onOptionChange={changeOption}
+      onSubmit={submit}
+      onTextChange={onTextChange}
+    >
       <HStack width="100%" alignVertical="center" spacing={4} data-testid={testId}>
         {children}
       </HStack>

packages/vibrant-components/src/lib/TableSearch/TableSearchContext/TableSearchContext.tsx

@@ -6,38 +6,43 @@ type TableSearchContextValue = {
   searchFieldRef: RefObject<TextInputRef> | null;
   onSubmit?: (value: string) => void;
   onOptionChange?: (value?: string) => void;
+  onTextChange?: ({ value, prevent }: { value: string; prevent: () => void }) => void;
 };
 
 const TableSearchContext = createContext<TableSearchContextValue>({
   searchFieldRef: null,
   onSubmit: () => {},
   onOptionChange: () => {},
+  onTextChange: () => {},
 });
 
 type TableSearchProviderProps = {
   children: ReactElement | ReactElement[];
   searchFieldRef: RefObject<TextInputRef> | null;
   onSubmit?: (value: string) => void;
   onOptionChange?: (value?: string) => void;
+  onTextChange?: ({ value, prevent }: { value: string; prevent: () => void }) => void;
 };
 
 export const TableSearchProvider: FC<TableSearchProviderProps> = ({
   children,
   searchFieldRef,
   onOptionChange,
+  onTextChange,
   onSubmit,
 }) => (
-  <TableSearchContext.Provider value={{ searchFieldRef, onOptionChange, onSubmit }}>
+  <TableSearchContext.Provider value={{ searchFieldRef, onOptionChange, onSubmit, onTextChange }}>
     {children}
   </TableSearchContext.Provider>
 );
 
 export const useTableSearch = () => {
-  const { searchFieldRef, onOptionChange, onSubmit } = useContext(TableSearchContext);
+  const { searchFieldRef, onOptionChange, onSubmit, onTextChange } = useContext(TableSearchContext);
 
   return {
     searchFieldRef,
     onOptionChange,
+    onTextChange,
     onSubmit,
   };
 };

packages/vibrant-components/src/lib/TableSearch/TableSearchField/TableSearchField.tsx

@@ -6,7 +6,7 @@ import { withTableSearchFieldVariation } from './TableSearchFieldProps';
 
 export const TableSearchField = withTableSearchFieldVariation(
   ({ maxWidth, testId = 'table-search-field', ...restProps }) => {
-    const { searchFieldRef, onSubmit } = useTableSearch();
+    const { searchFieldRef, onSubmit, onTextChange } = useTableSearch();
 
     return (
       <Box width="100%" maxWidth={maxWidth} data-testid={testId}>
@@ -17,6 +17,7 @@ export const TableSearchField = withTableSearchFieldVariation(
           clearable={true}
           renderStart={() => <Icon.Search.Thin size={20} fill="onView2" />}
           onSubmit={onSubmit}
+          onValueChange={onTextChange}
           {...restProps}
         />
       </Box>

packages/vibrant-components/src/lib/TableSearch/TableSearchProps.ts

@@ -5,6 +5,7 @@ export type TableSearchProps = {
   children: ReactElement | ReactElement[];
   testId?: string;
   onSubmit?: (fieldValue: string, optionValue?: string) => void;
+  onTextChange?: ({ value, prevent }: { value: string; prevent: () => void }) => void;
 };
 
 export const withTableSearchVariation = withVariation<TableSearchProps>('TableSearch')();