Updated tables. Added MenuButton.

src/components/input/DateFilter.tsx

@@ -22,7 +22,6 @@ export function DateFilter({
   value,
   onChange,
   showAllTime = false,
-  ...props
 }: DateFilterProps) {
   const { formatMessage, labels } = useMessages();
   const [showPicker, setShowPicker] = useState(false);
@@ -93,7 +92,7 @@ export function DateFilter({
   };
 
   const renderValue = ({ defaultChildren }) => {
-    return value.startsWith('range') ? (
+    return value?.startsWith('range') ? (
       <DateDisplay startDate={startDate} endDate={endDate} />
     ) : (
       defaultChildren
@@ -103,10 +102,9 @@ export function DateFilter({
   return (
     <>
       <Select
-        {...props}
         selectedKey={value}
         placeholder={formatMessage(labels.selectDate)}
-        onSelectionChange={handleChange}
+        onChange={handleChange}
         renderValue={renderValue}
       >
         {options.map(({ label, value, divider }: any) => {

src/components/input/MenuButton.tsx

@@ -0,0 +1,30 @@
+import { ReactNode, Key } from 'react';
+import { DialogTrigger, Button, Menu, Popover, Icon } from '@umami/react-zen';
+import { Lucide } from '@/components/icons';
+
+export function MenuButton({
+  children,
+  onAction,
+}: {
+  children: ReactNode;
+  onAction?: (action: string) => void;
+}) {
+  const handleAction = (key: Key) => {
+    onAction?.(key.toString());
+  };
+
+  return (
+    <DialogTrigger>
+      <Button variant="outline">
+        <Icon>
+          <Lucide.Ellipsis />
+        </Icon>
+      </Button>
+      <Popover>
+        <Menu onAction={handleAction} style={{ minWidth: '140px' }}>
+          {children}
+        </Menu>
+      </Popover>
+    </DialogTrigger>
+  );
+}

src/components/input/TeamsButton.tsx

@@ -45,7 +45,7 @@ export function TeamsButton({
       <Button className={className} variant="quiet">
         <Row alignItems="center" gap="3">
           <Icon>{teamId ? <Users /> : <User />}</Icon>
-          {showText && <Text weight="bold">{teamId ? team?.name : user.username}</Text>}
+          {showText && <Text>{teamId ? team?.name : user.username}</Text>}
           <Icon rotate={90} size="xs">
             <Icons.Chevron />
           </Icon>

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>