[ui][companies typeahead] Add isLabelHidden and placeHolder props (#361)

* [ui][companies typeahead] add isLabelHidden and placeHolder props

* [ui][companies typeahead] add isLabelHidden and placeHolder props

apps/portal/src/components/shared/CompaniesTypeahead.tsx

@@ -6,10 +6,17 @@ import { trpc } from '~/utils/trpc';
 
 type Props = Readonly<{
   disabled?: boolean;
+  isLabelHidden?: boolean;
   onSelect: (option: TypeaheadOption) => void;
+  placeHolder?: string;
 }>;
 
-export default function CompaniesTypeahead({ disabled, onSelect }: Props) {
+export default function CompaniesTypeahead({
+  disabled,
+  onSelect,
+  isLabelHidden,
+  placeHolder,
+}: Props) {
   const [query, setQuery] = useState('');
   const companies = trpc.useQuery([
     'companies.list',
@@ -23,6 +30,7 @@ export default function CompaniesTypeahead({ disabled, onSelect }: Props) {
   return (
     <Typeahead
       disabled={disabled}
+      isLabelHidden={isLabelHidden}
       label="Company"
       noResultsMessage="No companies found"
       nullable={true}
@@ -33,6 +41,7 @@ export default function CompaniesTypeahead({ disabled, onSelect }: Props) {
           value: id,
         })) ?? []
       }
+      placeholder={placeHolder}
       onQueryChange={setQuery}
       onSelect={onSelect}
     />

packages/ui/src/Typeahead/Typeahead.tsx

@@ -22,6 +22,7 @@ type Props = Readonly<{
   ) => void;
   onSelect: (option: TypeaheadOption) => void;
   options: ReadonlyArray<TypeaheadOption>;
+  placeholder?: string;
   value?: TypeaheadOption;
 }>;
 
@@ -35,6 +36,7 @@ export default function Typeahead({
   onQueryChange,
   value,
   onSelect,
+  placeholder,
 }: Props) {
   const [query, setQuery] = useState('');
   return (
@@ -77,6 +79,7 @@ export default function Typeahead({
             displayValue={(option) =>
               (option as unknown as TypeaheadOption)?.label
             }
+            placeholder={placeholder}
             onChange={(event) => {
               setQuery(event.target.value);
               onQueryChange(event.target.value, event);