From cabca302d5ad6b559b37e928fbcfc652884e2c32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=20Andre=CC=81s=20Granero?=
 <joseandres.granero@devo.com>
Date: Thu, 11 Jan 2024 07:28:34 +0100
Subject: [PATCH] feat: new name for component from Dropdown to Popover.

---
 .../components/Dropdown/components/index.ts   |   1 -
 .../core/src/components/Dropdown/index.ts     |   1 -
 .../Dropdown.mdx => Popover/Popover.mdx}      |  72 +++++-----
 .../Popover.stories.tsx}                      | 135 +++++++++++++-----
 .../Dropdown.tsx => Popover/Popover.tsx}      |  67 +++++++--
 .../components/PopoverPanel.tsx}              |   4 +-
 .../Popover/components/StyledPopoverArrow.ts  |  52 +++++++
 .../components/Popover/components/index.ts    |   2 +
 .../core/src/components/Popover/constants.ts  |   1 +
 packages/core/src/components/Popover/index.ts |   1 +
 packages/core/src/components/Popover/utils.ts |  10 ++
 packages/core/src/components/index.ts         |   2 +-
 .../src/editors/DateEditor/DateEditor.tsx     |  10 +-
 .../HeaderBulkRenderer/HeaderBulkRenderer.tsx |  12 +-
 .../ActionRenderer/ActionRenderer.tsx         |  14 +-
 .../renderers/ActionRenderer/MenuEntry.tsx    |  14 +-
 packages/table/stories/BasicTable.stories.tsx |  24 ++--
 .../table/stories/BulkActions.stories.tsx     |  47 +++---
 18 files changed, 319 insertions(+), 150 deletions(-)
 delete mode 100644 packages/core/src/components/Dropdown/components/index.ts
 delete mode 100644 packages/core/src/components/Dropdown/index.ts
 rename packages/core/src/components/{Dropdown/Dropdown.mdx => Popover/Popover.mdx} (73%)
 rename packages/core/src/components/{Dropdown/Dropdown.stories.tsx => Popover/Popover.stories.tsx} (58%)
 rename packages/core/src/components/{Dropdown/Dropdown.tsx => Popover/Popover.tsx} (57%)
 rename packages/core/src/components/{Dropdown/components/DropdownPanel.tsx => Popover/components/PopoverPanel.tsx} (76%)
 create mode 100644 packages/core/src/components/Popover/components/StyledPopoverArrow.ts
 create mode 100644 packages/core/src/components/Popover/components/index.ts
 create mode 100644 packages/core/src/components/Popover/constants.ts
 create mode 100644 packages/core/src/components/Popover/index.ts
 create mode 100644 packages/core/src/components/Popover/utils.ts

diff --git a/packages/core/src/components/Dropdown/components/index.ts b/packages/core/src/components/Dropdown/components/index.ts
deleted file mode 100644
index 2db0437fa..000000000
--- a/packages/core/src/components/Dropdown/components/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './DropdownPanel';
diff --git a/packages/core/src/components/Dropdown/index.ts b/packages/core/src/components/Dropdown/index.ts
deleted file mode 100644
index 2f29bad4e..000000000
--- a/packages/core/src/components/Dropdown/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Dropdown';
diff --git a/packages/core/src/components/Dropdown/Dropdown.mdx b/packages/core/src/components/Popover/Popover.mdx
similarity index 73%
rename from packages/core/src/components/Dropdown/Dropdown.mdx
rename to packages/core/src/components/Popover/Popover.mdx
index bc4d65be8..246e1aa1d 100644
--- a/packages/core/src/components/Dropdown/Dropdown.mdx
+++ b/packages/core/src/components/Popover/Popover.mdx
@@ -1,17 +1,17 @@
 import { Meta, Canvas, ArgTypes, Source } from '@storybook/blocks';
 
-import * as Stories from './Dropdown.stories';
+import * as Stories from './Popover.stories';
 
 <Meta of={Stories} />
 
-# Dropdown
+# Popover
 
 ## Overview
 
-This Dropdown component allows users to expand hidden contents using a trigger,
+This Popover component allows users to expand hidden contents using a trigger,
 usually a button, link or menu item.
 
-A Dropdown menu variant is a typical way of using this kind of component,
+A Popover menu variant is a typical way of using this kind of component,
 which allows users to select an option from a drop-down menu list.
 
 This component is valuable in web applications to enhance usability by
@@ -24,14 +24,14 @@ This component is based on [Popper JS library](https://popper.js.org/).
 
 ## How to import
 
-<Source code={`import { Dropdown } from '@devoinc/genesys-ui';`} />
+<Source code={`import { Popover } from '@devoinc/genesys-ui';`} />
 
 ## Basic usage
 
-The `Dropdown` component must have two children components.
+The `Popover` component must have two children components.
 First, the trigger element and right after the content to be displayed.
 
-This content usually should be wrapped by the `Dropdown.Panel` component,
+This content usually should be wrapped by the `Popover.Panel` component,
 which provides the elevation styles (box shadow, radius, z-index... etc.)
 according to the design pattern.
 
@@ -42,15 +42,15 @@ indicating when it's opened.
 
 - `ref`: used to retrieve the React ref of the _popper_ element.
 - `toggle`: function to toggle the content of the component.
-- `setOpened`: function to force display or hide the dropdown menu.
-- `isOpened`: a boolean indicating if the dropdown menu is open.
+- `setOpened`: function to force display or hide the Popover floating content.
+- `isOpened`: a boolean indicating if the Popover floating content is open.
 
 <Source
   code={`
 import * as React from 'react';
-import { Button, Dropdown, Menu } from '@devoinc/genesys-ui';
-export const MyDropdown = () =>
-  <Dropdown placement="bottom-start" id="basic-usage">
+import { Button, Popover, Menu } from '@devoinc/genesys-ui';
+export const MyPopover = () =>
+  <Popover placement="bottom-start" id="basic-usage">
     {({ toggle, ref, isOpened, setOpened }) => (
       <Button
         aria-controls="basic-usage"
@@ -64,33 +64,33 @@ export const MyDropdown = () =>
         TriggerElement
       </Button>
     )}
-    <Dropdown.Panel>
+    <Popover.Panel>
       <Menu>
         <Menu.Item label="Option 1" />
         <Menu.Item label="Option 2" />
         <Menu.Item label="Option 3" />
       </Menu>
-    </Dropdown.Panel>
-  </Dropdown>
+    </Popover.Panel>
+  </Popover>
 `}
 />
 
-## Nested Dropdown
+## Nested Popover
 
-`Dropdown` component allows the creation of hierarchical structures,
-where one Dropdown can contain other Dropdowns as selectable options.
+`Popover` component allows the creation of hierarchical structures,
+where one Popover can contain other Popovers as selectable options.
 
 **IMPORTANT:** to avoid the parent being closed when a nested one is clicked
 due to problems with the `ref`, we have to define `appendTo={null}`
-in the nested dropdowns. This way, the first parent container will be appended
+in the nested popovers. This way, the first parent container will be appended
 by default to the end of the `body`, and the nested ones will be rendered inside this one.
 
 <Source
   code={`
 import * as React from 'react';
-import { Button, Dropdown, Menu } from '@devoinc/genesys-ui';
-export const MyDropdown = () =>
-  <Dropdown id="nested" placement="bottom-start">
+import { Button, Popover, Menu } from '@devoinc/genesys-ui';
+export const MyPopover = () =>
+  <Popover id="nested" placement="bottom-start">
       {({ toggle, ref, isOpened, setOpened }) => (
         <Button
           aria-controls="nested"
@@ -104,12 +104,12 @@ export const MyDropdown = () =>
           TriggerElement
         </Button>
       )}
-      <Dropdown.Panel>
+      <Popover.Panel>
         <Menu>
           <Menu.Item label="Option 1" />
           <Menu.Item label="Option 2" />
           <Menu.Item label="Option 3" />
-          <Dropdown id="nested-one" appendTo={null}>
+          <Popover id="nested-one" appendTo={null}>
             {({ toggle, ref, isOpened, setOpened }) => (
               <Menu.Item
                 aria-controls="nested-one"
@@ -124,12 +124,12 @@ export const MyDropdown = () =>
                 state={isOpened ? 'expanded' : 'enabled'}
               />
             )}
-            <Dropdown.Panel>
+            <Popover.Panel>
               <Menu>
                 <Menu.Item label="Option 4.1" />
                 <Menu.Item label="Option 4.2" />
                 <Menu.Item label="Option 4.3" />
-                <Dropdown id="nested-two" appendTo={null}>
+                <Popover id="nested-two" appendTo={null}>
                   {({ toggle, ref, isOpened, setOpened }) => (
                     <Menu.Item
                       aria-controls="nested-two"
@@ -144,20 +144,20 @@ export const MyDropdown = () =>
                       state={isOpened ? 'expanded' : 'enabled'}
                     />
                   )}
-                  <Dropdown.Panel>
+                  <Popover.Panel>
                     <Menu>
                       <Menu.Item label="Option 4.3.1" />
                       <Menu.Item label="Option 4.3.3" />
                       <Menu.Item label="Option 4.3.2" />
                     </Menu>
-                  </Dropdown.Panel>
-                </Dropdown>
+                  </Popover.Panel>
+                </Popover>
               </Menu>
-            </Dropdown.Panel>
-          </Dropdown>
+            </Popover.Panel>
+          </Popover>
         </Menu>
-      </Dropdown.Panel>
-    </Dropdown>
+      </Popover.Panel>
+    </Popover>
 `}
 />
 
@@ -167,11 +167,11 @@ To ensure full accessibility of the component, we need to consider multiple aspe
 These include:
 
 - Adding a value for the `id` prop of the component. This value is automatically mapped to the attribute
-  of the 'div' HTML element which wraps the dropdown content. This value has to be used as
-  the `aria-controls` prop value of the dropdown trigger.
+  of the 'div' HTML element which wraps the Popover content. This value has to be used as
+  the `aria-controls` prop value of the Popover trigger.
 - Each trigger component should have defined the `onClick` property to get the key events.
 - Add to the trigger the `aria-haspopup` prop value to true.
-- Add to the trigger the `aria-expanded` prop value to true when the dropdown is opened.
+- Add to the trigger the `aria-expanded` prop value to true when the Popover is opened.
 - Add to the trigger the `aria-controls` prop value with the same value of the `id` prop of the component.
 
 ## Props
diff --git a/packages/core/src/components/Dropdown/Dropdown.stories.tsx b/packages/core/src/components/Popover/Popover.stories.tsx
similarity index 58%
rename from packages/core/src/components/Dropdown/Dropdown.stories.tsx
rename to packages/core/src/components/Popover/Popover.stories.tsx
index 761e513a4..7d40304fb 100644
--- a/packages/core/src/components/Dropdown/Dropdown.stories.tsx
+++ b/packages/core/src/components/Popover/Popover.stories.tsx
@@ -1,23 +1,23 @@
 import * as React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
-import { Button, Dropdown, Menu, Panel, Typography } from '../../components';
+import { Button, Popover, Menu, Panel, Typography } from '../../components';
 
-const meta: Meta<typeof Dropdown> = {
-  title: 'Components/Core/Navigation/Dropdown',
-  component: Dropdown,
+const meta: Meta<typeof Popover> = {
+  title: 'Components/Core/Navigation/Popover',
+  component: Popover,
 };
 
 export default meta;
-type Story = StoryObj<typeof Dropdown>;
+type Story = StoryObj<typeof Popover>;
 
 export const Base: Story = {
   render: () => {
-    const dropdownId = 'base';
+    const popoverId = 'base';
     return (
-      <Dropdown id={dropdownId} placement="bottom-start">
+      <Popover id={popoverId}>
         {({ toggle, ref, isOpened }) => (
           <Button
-            aria-controls={dropdownId}
+            aria-controls={popoverId}
             aria-expanded={isOpened}
             aria-haspopup={true}
             onClick={toggle}
@@ -27,26 +27,83 @@ export const Base: Story = {
             TriggerElement
           </Button>
         )}
-        <Dropdown.Panel>
+        <Popover.Panel padding="cmp-sm">
+          <Typography.Paragraph>
+            This is the content of the Popover.
+          </Typography.Paragraph>
+        </Popover.Panel>
+      </Popover>
+    );
+  },
+};
+
+export const WithArrow: Story = {
+  render: () => {
+    const popoverId = 'with-arrow';
+    return (
+      <Popover
+        id={popoverId}
+        arrow={({ placement }) => <Popover.Arrow placement={placement} />}
+      >
+        {({ toggle, ref, isOpened }) => (
+          <Button
+            aria-controls={popoverId}
+            aria-expanded={isOpened}
+            aria-haspopup={true}
+            onClick={toggle}
+            ref={ref}
+            state={isOpened ? 'expanded' : undefined}
+          >
+            TriggerElement
+          </Button>
+        )}
+        <Popover.Panel padding="cmp-sm">
+          <Typography.Paragraph>
+            This is the content of the Popover.
+          </Typography.Paragraph>
+        </Popover.Panel>
+      </Popover>
+    );
+  },
+};
+
+export const AsDropdownMenu: Story = {
+  render: () => {
+    const popoverId = 'base';
+    return (
+      <Popover id={popoverId} placement="bottom-start">
+        {({ toggle, ref, isOpened }) => (
+          <Button
+            aria-controls={popoverId}
+            aria-expanded={isOpened}
+            aria-haspopup={true}
+            onClick={toggle}
+            ref={ref}
+            state={isOpened ? 'expanded' : undefined}
+          >
+            TriggerElement
+          </Button>
+        )}
+        <Popover.Panel>
           <Menu>
             <Menu.Item label="Option 1" />
             <Menu.Item label="Option 2" />
             <Menu.Item label="Option 3" />
           </Menu>
-        </Dropdown.Panel>
-      </Dropdown>
+        </Popover.Panel>
+      </Popover>
     );
   },
 };
 
 export const OnHover: Story = {
   render: () => {
-    const dropdownId = 'on-hover';
+    const popoverId = 'on-hover';
     return (
-      <Dropdown appendTo={null} id={dropdownId} placement="bottom-start">
+      <Popover appendTo={null} id={popoverId} placement="bottom-start">
         {({ toggle, ref, isOpened, setOpened }) => (
           <Button
-            aria-controls={dropdownId}
+            aria-controls={popoverId}
             aria-expanded={isOpened}
             aria-haspopup={true}
             onClick={toggle}
@@ -58,26 +115,26 @@ export const OnHover: Story = {
             TriggerElement
           </Button>
         )}
-        <Dropdown.Panel>
+        <Popover.Panel>
           <Menu>
             <Menu.Item label="Option 1" />
             <Menu.Item label="Option 2" />
             <Menu.Item label="Option 3" />
           </Menu>
-        </Dropdown.Panel>
-      </Dropdown>
+        </Popover.Panel>
+      </Popover>
     );
   },
 };
 
 export const Nested: Story = {
   render: () => {
-    const dropdownId = 'nested';
+    const popoverId = 'nested';
     return (
-      <Dropdown id={dropdownId} placement="bottom-start">
+      <Popover id={popoverId} placement="bottom-start">
         {({ toggle, ref, isOpened }) => (
           <Button
-            aria-controls={dropdownId}
+            aria-controls={popoverId}
             aria-expanded={isOpened}
             aria-haspopup={true}
             onClick={toggle}
@@ -87,15 +144,15 @@ export const Nested: Story = {
             TriggerElement
           </Button>
         )}
-        <Dropdown.Panel>
+        <Popover.Panel>
           <Menu>
             <Menu.Item label="Option 1" />
             <Menu.Item label="Option 2" />
             <Menu.Item label="Option 3" />
-            <Dropdown id={`${dropdownId}-1`} appendTo={null}>
+            <Popover id={`${popoverId}-1`} appendTo={null}>
               {({ toggle, ref, isOpened }) => (
                 <Menu.Item
-                  aria-controls={`${dropdownId}-1`}
+                  aria-controls={`${popoverId}-1`}
                   aria-expanded={isOpened}
                   aria-haspopup={true}
                   expandable
@@ -105,15 +162,15 @@ export const Nested: Story = {
                   state={isOpened ? 'expanded' : undefined}
                 />
               )}
-              <Dropdown.Panel>
+              <Popover.Panel>
                 <Menu>
                   <Menu.Item label="Option 4.1" />
                   <Menu.Item label="Option 4.2" />
                   <Menu.Item label="Option 4.3" />
-                  <Dropdown id={`${dropdownId}-2`} appendTo={null}>
+                  <Popover id={`${popoverId}-2`} appendTo={null}>
                     {({ toggle, ref, isOpened }) => (
                       <Menu.Item
-                        aria-controls={`${dropdownId}-2`}
+                        aria-controls={`${popoverId}-2`}
                         aria-expanded={isOpened}
                         aria-haspopup={true}
                         expandable
@@ -123,32 +180,32 @@ export const Nested: Story = {
                         state={isOpened ? 'expanded' : undefined}
                       />
                     )}
-                    <Dropdown.Panel>
+                    <Popover.Panel>
                       <Menu>
                         <Menu.Item label="Option 4.3.1" />
                         <Menu.Item label="Option 4.3.3" />
                         <Menu.Item label="Option 4.3.2" />
                       </Menu>
-                    </Dropdown.Panel>
-                  </Dropdown>
+                    </Popover.Panel>
+                  </Popover>
                 </Menu>
-              </Dropdown.Panel>
-            </Dropdown>
+              </Popover.Panel>
+            </Popover>
           </Menu>
-        </Dropdown.Panel>
-      </Dropdown>
+        </Popover.Panel>
+      </Popover>
     );
   },
 };
 
 export const ComplexPanel: Story = {
   render: () => {
-    const dropdownId = 'complex-panel';
+    const popoverId = 'complex-panel';
     return (
-      <Dropdown id={dropdownId} placement="bottom-start">
+      <Popover id={popoverId} placement="bottom-start">
         {({ toggle, ref, isOpened }) => (
           <Button
-            aria-controls={dropdownId}
+            aria-controls={popoverId}
             aria-expanded={isOpened}
             aria-haspopup={true}
             onClick={toggle}
@@ -158,7 +215,7 @@ export const ComplexPanel: Story = {
             TriggerElement
           </Button>
         )}
-        <Dropdown.Panel width="28rem" padding="0">
+        <Popover.Panel width="28rem" padding="0">
           <Panel.Header bordered size="sm" title="Panel title" />
           <Panel.Body size="sm">
             <Typography.Paragraph>
@@ -172,8 +229,8 @@ export const ComplexPanel: Story = {
               <Menu.Item label="Option 3" />
             </Menu>
           </Panel.Body>
-        </Dropdown.Panel>
-      </Dropdown>
+        </Popover.Panel>
+      </Popover>
     );
   },
 };
diff --git a/packages/core/src/components/Dropdown/Dropdown.tsx b/packages/core/src/components/Popover/Popover.tsx
similarity index 57%
rename from packages/core/src/components/Dropdown/Dropdown.tsx
rename to packages/core/src/components/Popover/Popover.tsx
index 4c6c6bd91..98b77bc5e 100644
--- a/packages/core/src/components/Dropdown/Dropdown.tsx
+++ b/packages/core/src/components/Popover/Popover.tsx
@@ -1,10 +1,18 @@
 import * as React from 'react';
-import { type PopperProps, usePopper } from 'react-popper';
-
-import { useOnEventOutside } from '../../hooks';
 import ReactDOM from 'react-dom';
-import { DropdownPanel } from './components';
 import { useTheme } from 'styled-components';
+import { type PopperProps, StrictModifier, usePopper } from 'react-popper';
+import { ComputedPlacement } from '@popperjs/core';
+
+import { useOnEventOutside } from '../../hooks';
+
+import { getMarginByPlacement } from './utils';
+
+import {
+  PopoverPanel,
+  StyledPopoverArrow,
+  StyledPopoverArrowProps,
+} from './components';
 
 type TriggerProps = (props: {
   ref: any;
@@ -15,28 +23,33 @@ type TriggerProps = (props: {
 
 type ChildrenProps = React.ReactNode;
 
-export interface DropdownProps
+export interface PopoverProps
   extends Omit<
     PopperProps<unknown>,
-    'children' | 'innerRef' | 'referenceElement' | 'onFirstUpdate'
+    'children' | 'innerRef' | 'referenceElement' | 'onFirstUpdate' | 'modifiers'
   > {
   /** DOM element where the popper is appended. It is appended to the body
    * by default. */
   appendTo?: HTMLElement;
+  /** The HTML id attribute which is added to the wrapper div of the floating content and should be used as 'aria-controls' value of the trigger. */
   id: React.HTMLAttributes<HTMLDivElement>['id'];
   children?: [TriggerProps, ChildrenProps];
+  /** If the floating content is visible/opened by default. */
   isOpened?: boolean;
+  arrow?: (arrowProps: StyledPopoverArrowProps) => React.ReactNode;
+  modifiers?: StrictModifier[];
 }
 
 const defaultAppendToProp =
   typeof window !== 'undefined' ? document.body : null;
 
-export const InternalDropdown: React.FC<DropdownProps> = ({
+export const InternalPopover: React.FC<PopoverProps> = ({
+  arrow,
   appendTo = defaultAppendToProp,
   children: [triggerEl, childrenEl],
   id,
   isOpened = false,
-  modifiers,
+  modifiers = [],
   placement = 'auto-start',
   strategy = 'fixed',
 }) => {
@@ -44,6 +57,17 @@ export const InternalDropdown: React.FC<DropdownProps> = ({
 
   const [referenceElement, setReferenceElement] = React.useState(null);
   const [popperElement, setPopperElement] = React.useState(null);
+  const [arrowRef, setArrowRef] = React.useState<HTMLElement>(null);
+
+  if (arrow) {
+    modifiers.push({
+      name: 'arrow',
+      options: {
+        element: arrowRef,
+        padding: 10,
+      },
+    });
+  }
 
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
     modifiers,
@@ -67,18 +91,31 @@ export const InternalDropdown: React.FC<DropdownProps> = ({
   });
 
   const theme = useTheme();
-
+  const zIndex = theme.alias.elevation.zIndex.depth.activated;
   const PopperCmp = opened && referenceElement && (
     <div
       id={id}
       ref={setPopperElement}
       style={{
-        zIndex: theme.alias.elevation.zIndex.depth.activated,
+        zIndex,
+        ...getMarginByPlacement(
+          attributes?.popper?.['data-popper-placement'] as ComputedPlacement,
+        ),
         ...styles.popper,
       }}
       {...attributes.popper}
     >
       {childrenEl}
+      {arrow && (
+        <div ref={setArrowRef} style={{ zIndex: zIndex + 1, ...styles.arrow }}>
+          {arrow({
+            placement:
+              (attributes?.popper?.[
+                'data-popper-placement'
+              ] as ComputedPlacement) ?? undefined,
+          })}
+        </div>
+      )}
     </div>
   );
 
@@ -97,10 +134,12 @@ export const InternalDropdown: React.FC<DropdownProps> = ({
   );
 };
 
-export const Dropdown = InternalDropdown as typeof InternalDropdown & {
-  Panel: typeof DropdownPanel;
+export const Popover = InternalPopover as typeof InternalPopover & {
+  Arrow: typeof StyledPopoverArrow;
+  Panel: typeof PopoverPanel;
 };
 
-Dropdown.Panel = DropdownPanel;
+Popover.Arrow = StyledPopoverArrow;
+Popover.Panel = PopoverPanel;
 
-InternalDropdown.displayName = 'Dropdown';
+InternalPopover.displayName = 'Popover';
diff --git a/packages/core/src/components/Dropdown/components/DropdownPanel.tsx b/packages/core/src/components/Popover/components/PopoverPanel.tsx
similarity index 76%
rename from packages/core/src/components/Dropdown/components/DropdownPanel.tsx
rename to packages/core/src/components/Popover/components/PopoverPanel.tsx
index b0147670d..2af5318cb 100644
--- a/packages/core/src/components/Dropdown/components/DropdownPanel.tsx
+++ b/packages/core/src/components/Popover/components/PopoverPanel.tsx
@@ -3,9 +3,9 @@ import { Panel } from '../../../components';
 import { PanelContainerProps } from '../../Panel/components';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface DropdownPanelProps extends Omit<PanelContainerProps, 'elevation'> {}
+interface PopoverPanelProps extends Omit<PanelContainerProps, 'elevation'> {}
 
-export const DropdownPanel: React.FC<DropdownPanelProps> = ({
+export const PopoverPanel: React.FC<PopoverPanelProps> = ({
   children,
   padding = 'cmp-xxs',
   width = '20rem',
diff --git a/packages/core/src/components/Popover/components/StyledPopoverArrow.ts b/packages/core/src/components/Popover/components/StyledPopoverArrow.ts
new file mode 100644
index 000000000..9ecbefa6f
--- /dev/null
+++ b/packages/core/src/components/Popover/components/StyledPopoverArrow.ts
@@ -0,0 +1,52 @@
+import styled, { css } from 'styled-components';
+import * as PopperJS from '@popperjs/core';
+import { POPOVER_ARROW_SIZE } from '../constants';
+
+export interface StyledPopoverArrowProps {
+  placement?: PopperJS.ComputedPlacement;
+}
+
+export const StyledPopoverArrow = styled.div<StyledPopoverArrowProps>`
+  border-color: transparent;
+  border-style: solid;
+
+  ${({ placement, theme }) => {
+    const bgColor = theme.cmp.panel.color.background;
+    // TODO: Tokenize the Popover component QUV-2016
+    const arrowSize = POPOVER_ARROW_SIZE;
+
+    return css`
+      position: relative;
+      width: ${arrowSize};
+      height: ${arrowSize};
+
+      ${placement?.includes('top') &&
+      css`
+        top: calc(100% - 0.1rem);
+        border-top-color: ${bgColor};
+        border-width: ${arrowSize} ${arrowSize} 0;
+      `};
+
+      ${placement?.includes('bottom') &&
+      css`
+        bottom: calc(100% - ${arrowSize});
+        border-bottom-color: ${bgColor};
+        border-width: 0 ${arrowSize} ${arrowSize};
+      `};
+
+      ${placement?.includes('right') &&
+      css`
+        right: calc(100% - 0.9rem);
+        border-right-color: ${bgColor};
+        border-width: ${arrowSize} ${arrowSize} ${arrowSize} 0;
+      `};
+
+      ${placement?.includes('left') &&
+      css`
+        left: calc(100% - 0.1rem);
+        border-left-color: ${bgColor};
+        border-width: ${arrowSize} 0 ${arrowSize} ${arrowSize};
+      `};
+    `;
+  }};
+`;
diff --git a/packages/core/src/components/Popover/components/index.ts b/packages/core/src/components/Popover/components/index.ts
new file mode 100644
index 000000000..8a564a8d6
--- /dev/null
+++ b/packages/core/src/components/Popover/components/index.ts
@@ -0,0 +1,2 @@
+export * from './PopoverPanel';
+export * from './StyledPopoverArrow';
diff --git a/packages/core/src/components/Popover/constants.ts b/packages/core/src/components/Popover/constants.ts
new file mode 100644
index 000000000..9a51e00ab
--- /dev/null
+++ b/packages/core/src/components/Popover/constants.ts
@@ -0,0 +1 @@
+export const POPOVER_ARROW_SIZE: string = '1rem';
diff --git a/packages/core/src/components/Popover/index.ts b/packages/core/src/components/Popover/index.ts
new file mode 100644
index 000000000..8f473de4b
--- /dev/null
+++ b/packages/core/src/components/Popover/index.ts
@@ -0,0 +1 @@
+export * from './Popover';
diff --git a/packages/core/src/components/Popover/utils.ts b/packages/core/src/components/Popover/utils.ts
new file mode 100644
index 000000000..5fbf7ecce
--- /dev/null
+++ b/packages/core/src/components/Popover/utils.ts
@@ -0,0 +1,10 @@
+import { POPOVER_ARROW_SIZE } from './constants';
+import { ComputedPlacement } from '@popperjs/core';
+
+export const getMarginByPlacement = (placement: ComputedPlacement) => {
+  if (placement?.includes('top')) return { marginBottom: POPOVER_ARROW_SIZE };
+  if (placement?.includes('bottom')) return { marginTop: POPOVER_ARROW_SIZE };
+  if (placement?.includes('left')) return { marginRight: POPOVER_ARROW_SIZE };
+  if (placement?.includes('right')) return { marginLeft: POPOVER_ARROW_SIZE };
+  return {};
+};
diff --git a/packages/core/src/components/index.ts b/packages/core/src/components/index.ts
index 2322b5987..1064b1b35 100644
--- a/packages/core/src/components/index.ts
+++ b/packages/core/src/components/index.ts
@@ -15,7 +15,7 @@ export * from './ContentSwitcher';
 export * from './DecoratorBar';
 export * from './DevoLogoLoader';
 export * from './Divider';
-export * from './Dropdown';
+export * from './Popover';
 export * from './EditableContent';
 export * from './Field';
 export * from './Flex';
diff --git a/packages/table/src/editors/DateEditor/DateEditor.tsx b/packages/table/src/editors/DateEditor/DateEditor.tsx
index c1621b163..a566385b8 100644
--- a/packages/table/src/editors/DateEditor/DateEditor.tsx
+++ b/packages/table/src/editors/DateEditor/DateEditor.tsx
@@ -4,7 +4,7 @@ import { DateTimePicker } from '@devoinc/genesys-ui-datetime';
 
 import { TableContext } from '../../context/TableContext';
 import { ROW_HEIGHT_MD } from '../../constants';
-import { Dropdown, getPxFromRem } from '@devoinc/genesys-ui';
+import { Popover, getPxFromRem } from '@devoinc/genesys-ui';
 import { CellEditorProps } from '../declarations';
 import { useTheme } from 'styled-components';
 
@@ -19,7 +19,7 @@ export const DateEditor: React.FC<CellEditorProps> = ({
   const dropdownId = `${colDef.id}-date-editor-${rowIndex}`;
   const offsetX = getPxFromRem(theme.cmp.table.cell.space.padding.hor[density]);
   return (
-    <Dropdown
+    <Popover
       placement="bottom-start"
       appendTo={null}
       id={dropdownId}
@@ -34,7 +34,7 @@ export const DateEditor: React.FC<CellEditorProps> = ({
       ]}
     >
       {({ ref }) => <div ref={ref}></div>}
-      <Dropdown.Panel width={'auto'}>
+      <Popover.Panel width={'auto'}>
         <DateTimePicker
           size={
             density === 'compact' && rowHeight <= ROW_HEIGHT_MD ? 'sm' : 'md'
@@ -44,7 +44,7 @@ export const DateEditor: React.FC<CellEditorProps> = ({
           }
           value={new Date(value as Date)}
         />
-      </Dropdown.Panel>
-    </Dropdown>
+      </Popover.Panel>
+    </Popover>
   );
 };
diff --git a/packages/table/src/headerRenderers/HeaderBulkRenderer/HeaderBulkRenderer.tsx b/packages/table/src/headerRenderers/HeaderBulkRenderer/HeaderBulkRenderer.tsx
index cb38406db..5fb50de86 100644
--- a/packages/table/src/headerRenderers/HeaderBulkRenderer/HeaderBulkRenderer.tsx
+++ b/packages/table/src/headerRenderers/HeaderBulkRenderer/HeaderBulkRenderer.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { GIAngleDown } from '@devoinc/genesys-icons';
 import {
   CheckboxControl,
-  Dropdown,
+  Popover,
   HFlex,
   IconButton,
 } from '@devoinc/genesys-ui';
@@ -21,7 +21,7 @@ export const HeaderBulkRenderer: React.FC<HeaderRendererProps> = ({
         ? true
         : true
       : false;
-  const dropdownId = `${colDef.id}-bulk-actions-menu`;
+  const popoverId = `${colDef.id}-bulk-actions-menu`;
   return (
     <HFlex spacing="cmp-xxs">
       <CheckboxControl
@@ -35,10 +35,10 @@ export const HeaderBulkRenderer: React.FC<HeaderRendererProps> = ({
         aria-label="Select all rows"
       />
       {(context?.headerBulkMenu ?? false) && (
-        <Dropdown id={dropdownId} placement="bottom-start">
+        <Popover id={popoverId} placement="bottom-start">
           {({ isOpened, toggle, ref }) => (
             <IconButton
-              aria-controls={dropdownId}
+              aria-controls={popoverId}
               aria-haspopup="true"
               aria-label="Open the bulk actions menu"
               aria-expanded={isOpened}
@@ -50,8 +50,8 @@ export const HeaderBulkRenderer: React.FC<HeaderRendererProps> = ({
               <GIAngleDown size="12" />
             </IconButton>
           )}
-          <Dropdown.Panel>{context.headerBulkMenu}</Dropdown.Panel>
-        </Dropdown>
+          <Popover.Panel>{context.headerBulkMenu}</Popover.Panel>
+        </Popover>
       )}
     </HFlex>
   );
diff --git a/packages/table/src/renderers/ActionRenderer/ActionRenderer.tsx b/packages/table/src/renderers/ActionRenderer/ActionRenderer.tsx
index 163c696cd..288343a51 100644
--- a/packages/table/src/renderers/ActionRenderer/ActionRenderer.tsx
+++ b/packages/table/src/renderers/ActionRenderer/ActionRenderer.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { GIAngleDown } from '@devoinc/genesys-icons';
-import { Dropdown, HFlex, IconButton, Menu } from '@devoinc/genesys-ui';
+import { Popover, HFlex, IconButton, Menu } from '@devoinc/genesys-ui';
 
 import { CellRendererProps } from '../declarations';
 import { ActionContext } from '../../facade';
@@ -12,7 +12,7 @@ export const ActionRenderer: React.FC<CellRendererProps> = ({
   rowIndex,
 }) => {
   const context = colDef?.context as ActionContext;
-  const dropdownId = `${colDef.id}-actions-menu-${rowIndex}`;
+  const popoverId = `${colDef.id}-actions-menu-${rowIndex}`;
   return (
     <HFlex spacing="cmp-xxs" alignItems="end">
       {(context?.quickActions ?? []).map(({ Icon, onClick }, idx) => (
@@ -29,10 +29,10 @@ export const ActionRenderer: React.FC<CellRendererProps> = ({
         </IconButton>
       ))}
       {context?.actionMenu ? (
-        <Dropdown id={dropdownId} placement="bottom-end">
+        <Popover id={popoverId} placement="bottom-end">
           {({ isOpened, toggle, ref }) => (
             <IconButton
-              aria-controls={dropdownId}
+              aria-controls={popoverId}
               aria-haspopup="true"
               aria-label="Open the bulk actions menu"
               aria-expanded={isOpened}
@@ -44,7 +44,7 @@ export const ActionRenderer: React.FC<CellRendererProps> = ({
               <GIAngleDown size="12" />
             </IconButton>
           )}
-          <Dropdown.Panel>
+          <Popover.Panel>
             <Menu>
               {context.actionMenu.map((entry, idx) => (
                 <MenuEntry
@@ -55,8 +55,8 @@ export const ActionRenderer: React.FC<CellRendererProps> = ({
                 />
               ))}
             </Menu>
-          </Dropdown.Panel>
-        </Dropdown>
+          </Popover.Panel>
+        </Popover>
       ) : null}
     </HFlex>
   );
diff --git a/packages/table/src/renderers/ActionRenderer/MenuEntry.tsx b/packages/table/src/renderers/ActionRenderer/MenuEntry.tsx
index 9b108c0f0..171e2cd94 100644
--- a/packages/table/src/renderers/ActionRenderer/MenuEntry.tsx
+++ b/packages/table/src/renderers/ActionRenderer/MenuEntry.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { Dropdown, Menu } from '@devoinc/genesys-ui';
+import { Popover, Menu } from '@devoinc/genesys-ui';
 
 import { ActionMenuEntry } from '../../facade';
 
@@ -14,12 +14,12 @@ export const MenuEntry: React.FC<Props> = ({ entry, level = 0, rowIndex }) => {
   if (entry?.component === 'separator') {
     return <Menu.Separator />;
   } else if (entry?.children) {
-    const dropdownId = `${rowIndex}-${level}-actions-menu`;
+    const popoverId = `${rowIndex}-${level}-actions-menu`;
     return (
-      <Dropdown placement="right-start" id={dropdownId}>
+      <Popover placement="right-start" id={popoverId}>
         {({ toggle, ref, setOpened, isOpened }) => (
           <Menu.Item
-            aria-controls={dropdownId}
+            aria-controls={popoverId}
             aria-haspopup="true"
             aria-expanded={isOpened}
             onClick={() => {
@@ -36,7 +36,7 @@ export const MenuEntry: React.FC<Props> = ({ entry, level = 0, rowIndex }) => {
             {entry?.text}
           </Menu.Item>
         )}
-        <Dropdown.Panel>
+        <Popover.Panel>
           <Menu>
             {(entry?.children ?? []).map((childEntry, index) => (
               <MenuEntry
@@ -47,8 +47,8 @@ export const MenuEntry: React.FC<Props> = ({ entry, level = 0, rowIndex }) => {
               />
             ))}
           </Menu>
-        </Dropdown.Panel>
-      </Dropdown>
+        </Popover.Panel>
+      </Popover>
     );
   }
   const Icon = entry?.Icon;
diff --git a/packages/table/stories/BasicTable.stories.tsx b/packages/table/stories/BasicTable.stories.tsx
index 2214df1d1..988483546 100644
--- a/packages/table/stories/BasicTable.stories.tsx
+++ b/packages/table/stories/BasicTable.stories.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { Holo } from '@devoinc/holo';
-import { Button, Dropdown, Menu } from '@devoinc/genesys-ui';
+import { Button, Menu, Popover } from '@devoinc/genesys-ui';
 import { GIEyeViewFilled, GIPencilEdit } from '@devoinc/genesys-icons';
 
 import { ActionContext, BasicTable } from '../src';
@@ -41,7 +41,7 @@ export const Base: Story = {
         headerName: 'Menu',
         cellRenderer: ({ colDef }) => {
           return (
-            <Dropdown>
+            <Popover id="custom-col-menu">
               {({ toggle, ref, isOpened }) => (
                 <Button
                   aria-expanded={isOpened}
@@ -52,15 +52,17 @@ export const Base: Story = {
                   Actions
                 </Button>
               )}
-              <Menu>
-                <Menu.Item
-                  label="Option 1"
-                  onClick={() => {
-                    console.log(colDef);
-                  }}
-                />
-              </Menu>
-            </Dropdown>
+              <Popover.Panel>
+                <Menu>
+                  <Menu.Item
+                    label="Option 1"
+                    onClick={() => {
+                      console.log(colDef);
+                    }}
+                  />
+                </Menu>
+              </Popover.Panel>
+            </Popover>
           );
         },
       },
diff --git a/packages/table/stories/BulkActions.stories.tsx b/packages/table/stories/BulkActions.stories.tsx
index a5e06756a..83c3159c2 100644
--- a/packages/table/stories/BulkActions.stories.tsx
+++ b/packages/table/stories/BulkActions.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 
-import { Button, Dropdown, Flex, Menu } from '@devoinc/genesys-ui';
+import { Button, Flex, Menu, Popover } from '@devoinc/genesys-ui';
 
 import {
   BooleanRenderer,
@@ -52,6 +52,7 @@ const BulkExample = () => {
       bulkDisabled,
     });
 
+  const popoverId = 'bul-actions-menu-nested';
   return (
     <Flex flexDirection="column" gap="cmp-md">
       <Flex.Item>
@@ -91,9 +92,12 @@ const BulkExample = () => {
                       <Menu.Separator />
                       <Menu.Item>Dummy action 1</Menu.Item>
                       <Menu.Item>Dummy action 2</Menu.Item>
-                      <Dropdown placement="right-start" width={'200px'}>
+                      <Popover placement="right-start" id={popoverId}>
                         {({ toggle, ref, isOpened, setOpened }) => (
                           <Menu.Item
+                            aria-controls={popoverId}
+                            aria-haspopup="true"
+                            aria-expanded={isOpened}
                             ref={ref}
                             onClick={() => {
                               setOpened(true);
@@ -103,28 +107,31 @@ const BulkExample = () => {
                               setOpened(true);
                             }}
                             expandable
-                            state={isOpened ? 'expanded' : 'enabled'}
+                            state={isOpened ? 'expanded' : undefined}
                           >
                             Danger actions
                           </Menu.Item>
                         )}
-                        <Menu>
-                          <Menu.Item>Dummy action 1</Menu.Item>
-                          <Menu.Item>Dummy action 2</Menu.Item>
-                          <Menu.Item
-                            onClick={() => {
-                              setData((prev) =>
-                                prev.filter(
-                                  (_, index) => !bulkSelection.includes(index),
-                                ),
-                              );
-                              clear();
-                            }}
-                          >
-                            Remove row(s)
-                          </Menu.Item>
-                        </Menu>
-                      </Dropdown>
+                        <Popover.Panel>
+                          <Menu>
+                            <Menu.Item>Dummy action 1</Menu.Item>
+                            <Menu.Item>Dummy action 2</Menu.Item>
+                            <Menu.Item
+                              onClick={() => {
+                                setData((prev) =>
+                                  prev.filter(
+                                    (_, index) =>
+                                      !bulkSelection.includes(index),
+                                  ),
+                                );
+                                clear();
+                              }}
+                            >
+                              Remove row(s)
+                            </Menu.Item>
+                          </Menu>
+                        </Popover.Panel>
+                      </Popover>
                     </Menu>
                   ) : undefined,
                 bulkSelection,