Zen components conversion.

src/app/(main)/reports/[reportId]/FieldSelectForm.tsx

@@ -1,4 +1,4 @@
-import { Menu, Item, Form, FormRow } from 'react-basics';
+import { List, ListItem, Label, Column } from '@umami/react-zen';
 import { useMessages } from '@/components/hooks';
 import styles from './FieldSelectForm.module.css';
 import { Key } from 'react';
@@ -13,19 +13,18 @@ export function FieldSelectForm({ fields = [], onSelect, showType = true }: Fiel
   const { formatMessage, labels } = useMessages();
 
   return (
-    <Form>
-      <FormRow label={formatMessage(labels.fields)}>
-        <Menu className={styles.menu} onSelect={key => onSelect(fields[key as any])}>
-          {fields.map(({ name, label, type }: any, index: Key) => {
-            return (
-              <Item key={index} className={styles.item}>
-                <div>{label || name}</div>
-                {showType && type && <div className={styles.type}>{type}</div>}
-              </Item>
-            );
-          })}
-        </Menu>
-      </FormRow>
-    </Form>
+    <Column>
+      <Label>{formatMessage(labels.fields)}</Label>
+      <List onSelectionChange={key => onSelect(fields[key as any])}>
+        {fields.map(({ name, label, type }: any, index: Key) => {
+          return (
+            <ListItem key={index} className={styles.item}>
+              <div>{label || name}</div>
+              {showType && type && <div className={styles.type}>{type}</div>}
+            </ListItem>
+          );
+        })}
+      </List>
+    </Column>
   );
 }