diff --git a/packages/vibrant-components/src/lib/TableSearch/TableSearch.tsx b/packages/vibrant-components/src/lib/TableSearch/TableSearch.tsx index 9e316e879..169a7d557 100644 --- a/packages/vibrant-components/src/lib/TableSearch/TableSearch.tsx +++ b/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(); const searchFieldRef = useRef(null); @@ -21,7 +21,12 @@ export const TableSearch = ({ children, testId = 'table-search', onSubmit }: Tab }; return ( - + {children} diff --git a/packages/vibrant-components/src/lib/TableSearch/TableSearchContext/TableSearchContext.tsx b/packages/vibrant-components/src/lib/TableSearch/TableSearchContext/TableSearchContext.tsx index e37ff6bab..25f8edfdf 100644 --- a/packages/vibrant-components/src/lib/TableSearch/TableSearchContext/TableSearchContext.tsx +++ b/packages/vibrant-components/src/lib/TableSearch/TableSearchContext/TableSearchContext.tsx @@ -6,12 +6,14 @@ type TableSearchContextValue = { searchFieldRef: RefObject | null; onSubmit?: (value: string) => void; onOptionChange?: (value?: string) => void; + onTextChange?: ({ value, prevent }: { value: string; prevent: () => void }) => void; }; const TableSearchContext = createContext({ searchFieldRef: null, onSubmit: () => {}, onOptionChange: () => {}, + onTextChange: () => {}, }); type TableSearchProviderProps = { @@ -19,25 +21,28 @@ type TableSearchProviderProps = { searchFieldRef: RefObject | null; onSubmit?: (value: string) => void; onOptionChange?: (value?: string) => void; + onTextChange?: ({ value, prevent }: { value: string; prevent: () => void }) => void; }; export const TableSearchProvider: FC = ({ children, searchFieldRef, onOptionChange, + onTextChange, onSubmit, }) => ( - + {children} ); export const useTableSearch = () => { - const { searchFieldRef, onOptionChange, onSubmit } = useContext(TableSearchContext); + const { searchFieldRef, onOptionChange, onSubmit, onTextChange } = useContext(TableSearchContext); return { searchFieldRef, onOptionChange, + onTextChange, onSubmit, }; }; diff --git a/packages/vibrant-components/src/lib/TableSearch/TableSearchField/TableSearchField.tsx b/packages/vibrant-components/src/lib/TableSearch/TableSearchField/TableSearchField.tsx index 941ae6c3e..3df449677 100644 --- a/packages/vibrant-components/src/lib/TableSearch/TableSearchField/TableSearchField.tsx +++ b/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 ( @@ -17,6 +17,7 @@ export const TableSearchField = withTableSearchFieldVariation( clearable={true} renderStart={() => } onSubmit={onSubmit} + onValueChange={onTextChange} {...restProps} /> diff --git a/packages/vibrant-components/src/lib/TableSearch/TableSearchProps.ts b/packages/vibrant-components/src/lib/TableSearch/TableSearchProps.ts index 069269179..51844bbf7 100644 --- a/packages/vibrant-components/src/lib/TableSearch/TableSearchProps.ts +++ b/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('TableSearch')();