diff --git a/apps/portal/src/components/questions/ContributeQuestionForm.tsx b/apps/portal/src/components/questions/ContributeQuestionForm.tsx index a0e4d0b6..54fad19b 100644 --- a/apps/portal/src/components/questions/ContributeQuestionForm.tsx +++ b/apps/portal/src/components/questions/ContributeQuestionForm.tsx @@ -84,6 +84,7 @@ export default function ContributeQuestionForm({ name="company" render={({ field }) => ( { field.onChange(id); }} diff --git a/apps/portal/src/components/shared/CompaniesTypeahead.tsx b/apps/portal/src/components/shared/CompaniesTypeahead.tsx index 2eacc357..1857c361 100644 --- a/apps/portal/src/components/shared/CompaniesTypeahead.tsx +++ b/apps/portal/src/components/shared/CompaniesTypeahead.tsx @@ -1,23 +1,30 @@ import { useState } from 'react'; -import type { TypeaheadOption } from '@tih/ui'; import { Typeahead } from '@tih/ui'; +import type { Props as TypeaheadProps } from '@tih/ui/src/Typeahead/Typeahead'; import { trpc } from '~/utils/trpc'; -type Props = Readonly<{ - disabled?: boolean; - isLabelHidden?: boolean; - onSelect: (option: TypeaheadOption) => void; - placeHolder?: string; -}>; +type Props = Omit< + TypeaheadProps, + 'noResultsMessage' | 'onQueryChange' | 'options' | 'query' +> & + Partial> & + ( + | Required> + | { + onQueryChange?: never; + query?: never; + } + ); export default function CompaniesTypeahead({ - disabled, - onSelect, - isLabelHidden, - placeHolder, + query: queryProp, + onQueryChange, + nullable = true, + ...typeaheadProps }: Props) { - const [query, setQuery] = useState(''); + const [queryState, setQuery] = useState(''); + const query = queryProp ?? queryState; const companies = trpc.useQuery([ 'companies.list', { @@ -29,11 +36,9 @@ export default function CompaniesTypeahead({ return ( ({ id, @@ -41,9 +46,8 @@ export default function CompaniesTypeahead({ value: id, })) ?? [] } - placeholder={placeHolder} - onQueryChange={setQuery} - onSelect={onSelect} + query={query} + onQueryChange={onQueryChange ?? setQuery} /> ); } diff --git a/apps/portal/src/pages/index.tsx b/apps/portal/src/pages/index.tsx index 360c81e8..7d2bfbcf 100644 --- a/apps/portal/src/pages/index.tsx +++ b/apps/portal/src/pages/index.tsx @@ -22,6 +22,7 @@ export default function HomePage() { Homepage setSelectedCompany(option)} />
{JSON.stringify(selectedCompany, null, 2)}
diff --git a/apps/portal/src/pages/offers/index.tsx b/apps/portal/src/pages/offers/index.tsx index eee97296..e96d3fe4 100644 --- a/apps/portal/src/pages/offers/index.tsx +++ b/apps/portal/src/pages/offers/index.tsx @@ -46,7 +46,8 @@ export default function OffersHomePage() {
setCompanyFilter(value)} />
diff --git a/packages/ui/src/Typeahead/Typeahead.tsx b/packages/ui/src/Typeahead/Typeahead.tsx index e84d03a3..7b840873 100644 --- a/packages/ui/src/Typeahead/Typeahead.tsx +++ b/packages/ui/src/Typeahead/Typeahead.tsx @@ -22,20 +22,26 @@ type Attributes = Pick< | 'required' >; -type Props = Readonly<{ +export type Props = Readonly<{ isLabelHidden?: boolean; label: string; noResultsMessage?: string; nullable?: boolean; - onQueryChange: ( - value: string, - event: React.ChangeEvent, - ) => void; onSelect: (option: TypeaheadOption) => void; options: ReadonlyArray; value?: TypeaheadOption; }> & - Readonly; + Readonly & + ( + | Record + | { + onQueryChange: ( + value: string, + event: React.ChangeEvent, + ) => void; + query: string; + } + ); export default function Typeahead({ disabled = false, @@ -44,13 +50,16 @@ export default function Typeahead({ noResultsMessage = 'No results', nullable = false, options, + query: queryProp, onQueryChange, required, value, onSelect, ...props }: Props) { - const [query, setQuery] = useState(''); + const [queryState, setQuery] = useState(''); + const query = queryProp ?? queryState; + return (