Updated tables. Added MenuButton.

src/components/input/WebsiteSelect.tsx

@@ -1,19 +1,23 @@
-import { useState, Key } from 'react';
+import { useState } from 'react';
 import { Select, ListItem } from '@umami/react-zen';
 import { useWebsites, useMessages } from '@/components/hooks';
+import type { SelectProps } from '@umami/react-zen/Select';
 
 export function WebsiteSelect({
   websiteId,
   teamId,
+  variant,
   onSelect,
+  ...props
 }: {
   websiteId?: string;
   teamId?: string;
+  variant?: 'primary' | 'secondary' | 'outline' | 'quiet' | 'danger' | 'zero';
   onSelect?: (key: any) => void;
-}) {
+} & SelectProps) {
   const { formatMessage, labels } = useMessages();
   const [search, setSearch] = useState('');
-  const [selectedId, setSelectedId] = useState<Key>(websiteId);
+  const [selectedId, setSelectedId] = useState(websiteId);
 
   const queryResult = useWebsites({ teamId }, { search, pageSize: 5 });
 
@@ -26,15 +30,20 @@ export function WebsiteSelect({
     setSearch(value);
   };
 
+  const items = queryResult?.result?.data as any[];
+
   return (
     <Select
-      items={queryResult?.result?.data as any[]}
-      value={selectedId as string}
-      onChange={handleSelect}
+      {...props}
+      items={items}
+      value={selectedId}
       placeholder={formatMessage(labels.selectWebsite)}
-      allowSearch={true}
-      onSearch={handleSearch}
       isLoading={queryResult.query.isLoading}
+      buttonProps={{ variant }}
+      allowSearch={true}
+      searchValue={search}
+      onSearch={handleSearch}
+      onChange={handleSelect}
     >
       {({ id, name }: any) => <ListItem key={id}>{name}</ListItem>}
     </Select>