[PB-3520]:feat/Popover component update

src/components/popover/Popover.tsx

@@ -7,8 +7,13 @@ export interface PopoverProps {
   className?: string;
   classButton?: string;
   align?: 'left' | 'right';
+  direction?: 'up' | 'down';
 }
 
+const originMap: Record<'up' | 'down', Record<'left' | 'right', string>> = {
+  up: { left: 'origin-bottom-right', right: 'origin-bottom-left' },
+  down: { left: 'origin-top-right', right: 'origin-top-left' },
+};
 /**
  * Popover component
  *
@@ -25,12 +30,19 @@ export interface PopoverProps {
  *
  * @property {string} [classButton]
  * - Custom classes for the trigger button.
- *
+ * 
+ * @property {'left' | 'right'} [align='right']
+ * - The alignment of the popover panel relative to the trigger button.
+ * 
+ * @property {'up' | 'down'} [direction='down']
+ * - The direction of the popover panel relative to the trigger button.
+ * 
  * @returns {JSX.Element}
  * - The rendered Popover component.
+ * 
  */
 
-const Popover = ({ childrenButton, panel, className, classButton, align = 'right' }: PopoverProps): JSX.Element => {
+const Popover = ({ childrenButton, panel, className, classButton, align = 'right', direction = 'down' }: PopoverProps): JSX.Element => {
   const [isOpen, setIsOpen] = useState(false);
   const panelRef = useRef<HTMLDivElement | null>(null);
   const [showContent, setShowContent] = useState(isOpen);
@@ -88,8 +100,10 @@ const Popover = ({ childrenButton, panel, className, classButton, align = 'right
         <div
           ref={panelRef}
           className={
-            'absolute z-50 mt-1 transform rounded-md border border-gray-10 ' +
-            `${align === 'left' ? 'left-0 origin-top-left' : 'right-0 origin-top-right'} ` +
+            'absolute z-50 transform rounded-md border border-gray-10 ' +
+            `${direction === 'up' ? 'bottom-full mb-1' : 'mt-1'} ` +
+            `${align === 'left' ? 'right-0' : 'left-0'} ` +
+            `${originMap[direction][align]} ` +
             `bg-surface py-1.5 shadow-subtle duration-100 ease-out dark:bg-gray-5 ${transitionOpacity} ${transitionScale}`
           }
         >

src/components/popover/__test__/Popover.test.tsx

@@ -123,6 +123,22 @@ describe('Popover', () => {
     await waitFor(() => expect(getByText('Popover Content')).toBeInTheDocument());
   });
 
+  it('applies the correct classes for left alignment', () => {
+    const { getByText, queryByText } = renderPopover({ align: 'left' });
+    fireEvent.click(getByText('Open Popover'));
+    const leftPanel = queryByText('Popover Content')?.parentElement?.parentElement;
+    expect(leftPanel).toHaveClass('right-0');
+    expect(leftPanel).toHaveClass('origin-top-right');
+  });
+
+  it('applies the correct classes for right alignment', () => {
+    const { getByText, queryByText } = renderPopover({ align: 'right' });
+    fireEvent.click(getByText('Open Popover'));
+    const rightPanel = queryByText('Popover Content')?.parentElement?.parentElement;
+    expect(rightPanel).toHaveClass('left-0');
+    expect(rightPanel).toHaveClass('origin-top-left');
+  });
+
   it('should call onMouseDown stopPropagation when the button is clicked', () => {
     const stopPropagationSpy = vi.fn();
     const { getByText } = renderPopover();