From 93dce211319e20ea279e5ec652f20bb62f198944 Mon Sep 17 00:00:00 2001
From: VINEETH ASOK KUMAR <vineeth.asokkumar@clickhouse.com>
Date: Fri, 29 Sep 2023 13:04:32 +0200
Subject: [PATCH] Fix dropdown popover wrapper changes

---
 src/components/Dropdown/Dropdown.stories.tsx |  4 +---
 src/components/Dropdown/Dropdown.test.tsx    |  4 +---
 src/components/Dropdown/Dropdown.tsx         | 10 +++++++---
 src/components/Popover/Popover.stories.tsx   |  4 +---
 src/components/Popover/Popover.test.tsx      |  4 +---
 src/components/Popover/Popover.tsx           |  4 ++--
 6 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/src/components/Dropdown/Dropdown.stories.tsx b/src/components/Dropdown/Dropdown.stories.tsx
index 673bf7b84..548441c53 100644
--- a/src/components/Dropdown/Dropdown.stories.tsx
+++ b/src/components/Dropdown/Dropdown.stories.tsx
@@ -11,9 +11,7 @@ const DropdownExample = ({ showArrow, disabled, side, ...props }: Props) => {
   return (
     <GridCenter>
       <Dropdown {...props}>
-        <Dropdown.Trigger disabled={disabled}>
-          <div>Dropdown Trigger</div>
-        </Dropdown.Trigger>
+        <Dropdown.Trigger disabled={disabled}>Dropdown Trigger</Dropdown.Trigger>
         <Dropdown.Content
           showArrow={showArrow}
           side={side}
diff --git a/src/components/Dropdown/Dropdown.test.tsx b/src/components/Dropdown/Dropdown.test.tsx
index 88723cc9e..f9f91906d 100644
--- a/src/components/Dropdown/Dropdown.test.tsx
+++ b/src/components/Dropdown/Dropdown.test.tsx
@@ -20,9 +20,7 @@ describe("Dropdown", () => {
   const renderDropdown = ({ disabled, ...props }: Props) =>
     renderCUI(
       <Dropdown {...props}>
-        <Dropdown.Trigger disabled={disabled}>
-          <div>Dropdown Trigger</div>
-        </Dropdown.Trigger>
+        <Dropdown.Trigger disabled={disabled}>Dropdown Trigger</Dropdown.Trigger>
         <Dropdown.Content>
           <Dropdown.Group>
             <Dropdown.Item>Content0</Dropdown.Item>
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index 43f43f403..21ba26d7c 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -4,7 +4,7 @@ import { HorizontalDirection, Icon, IconName } from "@/components";
 import { Arrow, GenericMenuItem, GenericMenuPanel } from "../GenericMenu";
 import PopoverArrow from "../icons/PopoverArrow";
 import IconWrapper from "../IconWrapper/IconWrapper";
-import { HTMLAttributes } from "react";
+import { EmptyButton } from "../commonElement";
 
 export const Dropdown = (props: DropdownMenu.DropdownMenuProps) => (
   <DropdownMenu.Root {...props} />
@@ -62,9 +62,13 @@ const DropdownTrigger = ({
       </DropdownMenuItem>
     );
   }
+  const { disabled, ...otherProps } = props as DropdownTriggerProps;
   return (
-    <Trigger asChild>
-      <div {...(props as HTMLAttributes<HTMLDivElement>)} />
+    <Trigger
+      asChild
+      disabled={disabled}
+    >
+      <EmptyButton {...otherProps} />
     </Trigger>
   );
 };
diff --git a/src/components/Popover/Popover.stories.tsx b/src/components/Popover/Popover.stories.tsx
index 7bf4a0291..24c4d92f2 100644
--- a/src/components/Popover/Popover.stories.tsx
+++ b/src/components/Popover/Popover.stories.tsx
@@ -24,9 +24,7 @@ const PopoverComponent = ({
       open={open === "default" ? undefined : open === "open"}
       modal={modal}
     >
-      <Popover.Trigger>
-        <div>Click Here</div>
-      </Popover.Trigger>
+      <Popover.Trigger>Click Here</Popover.Trigger>
       <Popover.Content
         side={side}
         showArrow={showArrow}
diff --git a/src/components/Popover/Popover.test.tsx b/src/components/Popover/Popover.test.tsx
index 43c4029d8..f79c930b2 100644
--- a/src/components/Popover/Popover.test.tsx
+++ b/src/components/Popover/Popover.test.tsx
@@ -7,9 +7,7 @@ describe("Popover", () => {
   const renderPopover = (props: PopoverProps) =>
     renderCUI(
       <Popover {...props}>
-        <Popover.Trigger>
-          <div>Click Here</div>
-        </Popover.Trigger>
+        <Popover.Trigger>Click Here</Popover.Trigger>
         <Popover.Content>
           <div>
             Click on the input element below
diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx
index 1fb1aba84..597d51924 100644
--- a/src/components/Popover/Popover.tsx
+++ b/src/components/Popover/Popover.tsx
@@ -1,7 +1,7 @@
 import * as RadixPopover from "@radix-ui/react-popover";
 import { Arrow, GenericMenuPanel } from "../GenericMenu";
 import styled from "styled-components";
-import { HTMLAttributes, ReactNode } from "react";
+import { ReactNode } from "react";
 import { Icon } from "@/components";
 import { EmptyButton } from "../commonElement";
 import PopoverArrow from "../icons/PopoverArrow";
@@ -24,7 +24,7 @@ const PopoverTrigger = ({ anchor, ...props }: TriggerProps) => {
   return (
     <>
       <Trigger asChild>
-        <div {...(props as HTMLAttributes<HTMLDivElement>)} />
+        <EmptyButton {...props} />
       </Trigger>
       {anchor && <RadixPopover.Anchor asChild>{anchor}</RadixPopover.Anchor>}
     </>