Small fixes.

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

@@ -93,7 +93,7 @@ export function ReportHeader({ icon }) {
         <LoadingButton
           variant="primary"
           isLoading={isCreating || isUpdating}
-          disabled={!websiteId || !dateRange?.value || !name}
+          isDisabled={!websiteId || !dateRange?.value || !name}
           onPress={handleSave}
         >
           {formatMessage(labels.save)}

src/app/(main)/reports/event-data/EventDataParameters.tsx

@@ -1,12 +1,12 @@
 import { useContext } from 'react';
 import {
   Form,
-  FormRow,
+  FormField,
   FormButtons,
-  SubmitButton,
-  PopupTrigger,
+  FormSubmitButton,
+  DialogTrigger,
   Icon,
-  Popup,
+  Popover,
 } from '@umami/react-zen';
 import { Empty } from '@/components/common/Empty';
 import { Icons } from '@/components/icons';
@@ -75,12 +75,12 @@ export function EventDataParameters() {
 
   const AddButton = ({ group, onAdd }) => {
     return (
-      <PopupTrigger>
+      <DialogTrigger>
         <Icon>
           <Icons.Plus />
         </Icon>
-        <Popup position="bottom" alignment="start">
-          {(close: () => void) => {
+        <Popover placement="bottom start">
+          {({ close }: any) => {
             return (
               <FieldAddForm
                 fields={data.map(({ dataKey, eventDataType }) => ({
@@ -93,8 +93,8 @@ export function EventDataParameters() {
               />
             );
           }}
-        </Popup>
-      </PopupTrigger>
+        </Popover>
+      </DialogTrigger>
     );
   };
 
@@ -106,11 +106,7 @@ export function EventDataParameters() {
         hasData &&
         parameterGroups.map(({ label, group }) => {
           return (
-            <FormRow
-              key={label}
-              label={label}
-              action={<AddButton group={group} onAdd={handleAdd} />}
-            >
+            <FormField name={label} key={label} label={label}>
               <ParameterList>
                 {parameterData[group].map(({ name, value }) => {
                   return (
@@ -134,13 +130,14 @@ export function EventDataParameters() {
                   );
                 })}
               </ParameterList>
-            </FormRow>
+              <AddButton group={group} onAdd={handleAdd} />
+            </FormField>
           );
         })}
       <FormButtons>
-        <SubmitButton variant="primary" disabled={!queryEnabled} isLoading={isRunning}>
+        <FormSubmitButton variant="primary" isDisabled={!queryEnabled} isLoading={isRunning}>
           {formatMessage(labels.runQuery)}
-        </SubmitButton>
+        </FormSubmitButton>
       </FormButtons>
     </Form>
   );

src/app/(main)/reports/funnel/FunnelParameters.tsx

@@ -4,11 +4,10 @@ import {
   Icon,
   Form,
   FormButtons,
-  FormInput,
-  FormRow,
-  PopupTrigger,
-  Popup,
-  SubmitButton,
+  FormField,
+  DialogTrigger,
+  Popover,
+  FormSubmitButton,
   TextField,
   Button,
 } from '@umami/react-zen';
@@ -60,37 +59,36 @@ export function FunnelParameters() {
 
   const AddStepButton = () => {
     return (
-      <PopupTrigger>
+      <DialogTrigger>
         <Button>
           <Icon>
             <Icons.Plus />
           </Icon>
         </Button>
-        <Popup alignment="start">
+        <Popover placement="start">
           <PopupForm>
             <FunnelStepAddForm onChange={handleAddStep} />
           </PopupForm>
-        </Popup>
-      </PopupTrigger>
+        </Popover>
+      </DialogTrigger>
     );
   };
 
   return (
     <Form values={parameters} onSubmit={handleSubmit} preventSubmit={true}>
       <BaseParameters allowWebsiteSelect={!id} />
-      <FormRow label={formatMessage(labels.window)}>
-        <FormInput
-          name="window"
-          rules={{ required: formatMessage(labels.required), pattern: /[0-9]+/ }}
-        >
-          <TextField autoComplete="off" />
-        </FormInput>
-      </FormRow>
-      <FormRow label={formatMessage(labels.steps)} action={<AddStepButton />}>
+      <FormField
+        label={formatMessage(labels.window)}
+        name="window"
+        rules={{ required: formatMessage(labels.required), pattern: /[0-9]+/ }}
+      >
+        <TextField autoComplete="off" />
+      </FormField>
+      <FormField name="steps" label={formatMessage(labels.steps)}>
         <ParameterList>
           {steps.map((step: { type: string; value: string }, index: number) => {
             return (
-              <PopupTrigger key={index}>
+              <DialogTrigger key={index}>
                 <ParameterList.Item
                   className={styles.item}
                   icon={step.type === 'url' ? <Icons.Eye /> : <Icons.Bolt />}
@@ -100,8 +98,8 @@ export function FunnelParameters() {
                     <div>{step.value}</div>
                   </div>
                 </ParameterList.Item>
-                <Popup alignment="start">
-                  {(close: () => void) => (
+                <Popover placement="start">
+                  {({ close }: any) => (
                     <PopupForm>
                       <FunnelStepAddForm
                         type={step.type}
@@ -110,16 +108,17 @@ export function FunnelParameters() {
                       />
                     </PopupForm>
                   )}
-                </Popup>
-              </PopupTrigger>
+                </Popover>
+              </DialogTrigger>
             );
           })}
         </ParameterList>
-      </FormRow>
+        <AddStepButton />
+      </FormField>
       <FormButtons>
-        <SubmitButton variant="primary" disabled={queryDisabled} isLoading={isRunning}>
+        <FormSubmitButton variant="primary" isDisabled={queryDisabled} isLoading={isRunning}>
           {formatMessage(labels.runQuery)}
-        </SubmitButton>
+        </FormSubmitButton>
       </FormButtons>
     </Form>
   );

src/app/(main)/reports/journey/JourneyView.tsx

@@ -194,7 +194,7 @@ export function JourneyView() {
                           <div className={styles.name} title={name}>
                             <TextOverflow> {name}</TextOverflow>
                           </div>
-                          <TooltipPopup label={dropOffPercent} disabled={!selected}>
+                          <TooltipPopup label={dropOffPercent} isDisabled={!selected}>
                             <div className={styles.count} title={nodeCount}>
                               {formatLongNumber(nodeCount)}
                             </div>

src/app/(main)/reports/retention/RetentionParameters.tsx

@@ -27,7 +27,7 @@ export function RetentionParameters() {
       <BaseParameters showDateSelect={false} allowWebsiteSelect={!id} />
 
       <FormButtons>
-        <FormSubmitButton variant="primary" disabled={queryDisabled} isLoading={isRunning}>
+        <FormSubmitButton variant="primary" isDisabled={queryDisabled} isLoading={isRunning}>
           {formatMessage(labels.runQuery)}
         </FormSubmitButton>
       </FormButtons>

src/app/(main)/reports/utm/UTMParameters.tsx

@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 import { useMessages } from '@/components/hooks';
-import { Form, FormButtons, SubmitButton } from '@umami/react-zen';
+import { Form, FormButtons, FormSubmitButton } from '@umami/react-zen';
 import { ReportContext } from '../[reportId]/Report';
 import { BaseParameters } from '../[reportId]/BaseParameters';
 
@@ -25,9 +25,9 @@ export function UTMParameters() {
     <Form values={parameters} onSubmit={handleSubmit} preventSubmit={true}>
       <BaseParameters showDateSelect={true} allowWebsiteSelect={!id} />
       <FormButtons>
-        <SubmitButton variant="primary" disabled={queryDisabled} isLoading={isRunning}>
+        <FormSubmitButton variant="primary" isDisabled={queryDisabled} isLoading={isRunning}>
           {formatMessage(labels.runQuery)}
-        </SubmitButton>
+        </FormSubmitButton>
       </FormButtons>
     </Form>
   );