From a2ff711d1101b123db8459057f1f9e9c453d7db5 Mon Sep 17 00:00:00 2001
From: Arthur Andrade <arthur.andrade@vtex.com>
Date: Wed, 2 Oct 2024 20:04:50 -0300
Subject: [PATCH 01/10] feat: Improve Dropdown

---
 apps/site/middleware.ts                       | 32 ++++-----
 .../pages/components/molecules/dropdown.mdx   | 32 ++++++---
 .../src/molecules/Dropdown/Dropdown.tsx       | 48 +++++++------
 .../src/molecules/Dropdown/DropdownButton.tsx | 57 +++++++---------
 .../src/molecules/Dropdown/DropdownItem.tsx   | 43 ++----------
 .../src/molecules/Dropdown/DropdownMenu.tsx   | 67 +++++++++++++++----
 .../Dropdown/contexts/DropdownContext.ts      | 26 ++++---
 .../molecules/Dropdown/hooks/useDropdown.ts   |  8 +--
 .../Dropdown/hooks/useDropdownItem.ts         | 63 +++++++++++++++++
 .../Dropdown/hooks/useDropdownPosition.ts     |  4 +-
 .../Dropdown/hooks/useDropdownTrigger.ts      | 27 ++++++++
 11 files changed, 262 insertions(+), 145 deletions(-)
 create mode 100644 packages/components/src/molecules/Dropdown/hooks/useDropdownItem.ts
 create mode 100644 packages/components/src/molecules/Dropdown/hooks/useDropdownTrigger.ts

diff --git a/apps/site/middleware.ts b/apps/site/middleware.ts
index 5fcf566fd4..b3167eaec0 100644
--- a/apps/site/middleware.ts
+++ b/apps/site/middleware.ts
@@ -1,21 +1,21 @@
 import { NextResponse, NextRequest } from 'next/server'
 
 export function middleware(request: NextRequest) {
-  const { pathname } = new URL(request.url)
-  if (pathname.startsWith('/docs')) {
-    return NextResponse.redirect(
-      `https://developers.vtex.com/docs/guides/faststore${pathname.replace(
-        '/docs',
-        ''
-      )}`
-    )
-  }
-  if (pathname.startsWith('/components')) {
-    return NextResponse.redirect(
-      `https://developers.vtex.com/docs/guides/faststore${pathname
-        .replace('/components', '')
-        .replace(/\/([^\/]*)\//, '/$1-')}`
-    )
-  }
+  // const { pathname } = new URL(request.url)
+  // if (pathname.startsWith('/docs')) {
+  //   return NextResponse.redirect(
+  //     `https://developers.vtex.com/docs/guides/faststore${pathname.replace(
+  //       '/docs',
+  //       ''
+  //     )}`
+  //   )
+  // }
+  // if (pathname.startsWith('/components')) {
+  //   return NextResponse.redirect(
+  //     `https://developers.vtex.com/docs/guides/faststore${pathname
+  //       .replace('/components', '')
+  //       .replace(/\/([^\/]*)\//, '/$1-')}`
+  //   )
+  // }
   return NextResponse.next()
 }
diff --git a/apps/site/pages/components/molecules/dropdown.mdx b/apps/site/pages/components/molecules/dropdown.mdx
index 3945e39c96..22adb2a124 100644
--- a/apps/site/pages/components/molecules/dropdown.mdx
+++ b/apps/site/pages/components/molecules/dropdown.mdx
@@ -29,6 +29,7 @@ import { OverviewSection } from 'site/components/OverviewSection'
 import path from 'path'
 import { useSSG } from 'nextra/ssg'
 import { getComponentPropsFrom } from 'site/components/utilities/propsSection'
+import { useState } from 'react'
 
 export const getStaticProps = () => {
   const dropdownPath = path.resolve(__filename)
@@ -84,25 +85,38 @@ Displays a set of actions/items to the user, usually used to show a menu of opti
 
 ## Overview
 
-<Tabs items={['Example', 'Code']} defaultIndex="0">
-  <Tab>
-    <OverviewSection>
-      <Dropdown>
-        <DropdownButton icon={<Icon name="CaretDown" />}>
-          {'Dropdown'}
+export const ControlledDropdown = () => {
+  const [isOpen, setIsOpen] = useState(true)
+  return (
+      <Dropdown isOpen={isOpen} onDismiss={() => {console.log("Dismiss"); setIsOpen(false)}}>
+        <DropdownButton asChild>
+          <button onClick={() => setIsOpen(old => !old)}>{'Dropdown'}</button>
         </DropdownButton>
         <DropdownMenu>
           <DropdownItem icon={<Icon name="ArrowElbowDownRight" />}>
-            {'Dropdown Item 1'}
+          <Icon name="ArrowElbowDownRight" />
+                <input type="checkbox" id="scales" name="scales" />
+    <label for="scales">Scales</label>
+            
           </DropdownItem>
           <DropdownItem icon={<Icon name="ArrowElbowDownRight" />}>
-            {'Dropdown Item 2'}
+            {'B - Dropdown Item 2'}
           </DropdownItem>
           <DropdownItem icon={<Icon name="ArrowElbowDownRight" />}>
-            {'Dropdown Item 3'}
+            {'C - Dropdown Item 3'}
+          </DropdownItem>
+                    <DropdownItem icon={<Icon name="ArrowElbowDownRight" />}>
+            {'B - Dropdown Item 3'}
           </DropdownItem>
         </DropdownMenu>
       </Dropdown>
+  )
+}
+
+<Tabs items={['Example', 'Code']} defaultIndex="0">
+  <Tab>
+    <OverviewSection>
+      <ControlledDropdown />
       <Dropdown>
         <DropdownButton icon={<Icon name="CaretDown" />}>
           {'Dropdown Small'}
diff --git a/packages/components/src/molecules/Dropdown/Dropdown.tsx b/packages/components/src/molecules/Dropdown/Dropdown.tsx
index aacec6e08a..96a857de03 100644
--- a/packages/components/src/molecules/Dropdown/Dropdown.tsx
+++ b/packages/components/src/molecules/Dropdown/Dropdown.tsx
@@ -1,7 +1,7 @@
 import type { PropsWithChildren } from 'react'
 import React, { useRef, useMemo, useState, useEffect, useCallback } from 'react'
 
-import DropdownContext from '../Dropdown/contexts/DropdownContext'
+import DropdownContext, { DropdownItemElement, DropdownTriggerElement } from '../Dropdown/contexts/DropdownContext'
 
 export interface DropdownProps {
   /**
@@ -20,49 +20,55 @@ export interface DropdownProps {
 
 const Dropdown = ({
   children,
-  isOpen: isOpenDefault = false,
+  isOpen: isOpenControlled,
   onDismiss,
   id = 'fs-dropdown',
 }: PropsWithChildren<DropdownProps>) => {
-  const [isOpen, setIsOpen] = useState(isOpenDefault)
-  const dropdownItemsRef = useRef<HTMLButtonElement[]>([])
+  const [isOpenInternal, setIsOpenInternal] = useState(false)
+  const dropdownItemsRef = useRef<DropdownItemElement[]>([])
   const selectedDropdownItemIndexRef = useRef(0)
-  const dropdownButtonRef = useRef<HTMLButtonElement>(null)
+  const dropdownTriggerRef = useRef<DropdownTriggerElement | null>(null)
+
+  const isOpen = isOpenControlled ?? isOpenInternal
 
   const close = useCallback(() => {
-    setIsOpen(false)
+    setIsOpenInternal(false)
     onDismiss?.()
   }, [onDismiss])
 
   const open = () => {
-    setIsOpen(true)
+    setIsOpenInternal(true)
   }
 
   const toggle = useCallback(() => {
-    setIsOpen((old) => {
-      if (old) {
+    setIsOpenInternal((currentIsOpen) => {
+      if (currentIsOpen) {
         onDismiss?.()
-        dropdownButtonRef.current?.focus()
+        dropdownTriggerRef.current?.focus()
       }
 
-      return !old
+      return !currentIsOpen
     })
   }, [onDismiss])
 
+  const addDropdownTriggerRef = useCallback(<T extends HTMLElement = HTMLElement>(ref: T) => {
+    dropdownTriggerRef.current = ref
+  }, [])
+
   useEffect(() => {
-    setIsOpen(isOpenDefault)
-  }, [isOpenDefault])
+    setIsOpenInternal(isOpenControlled ?? false)
+  }, [isOpenControlled])
 
   useEffect(() => {
-    isOpen && dropdownItemsRef?.current[0]?.focus()
-  }, [isOpen])
+    isOpenInternal && dropdownItemsRef?.current[0]?.focus()
+  }, [isOpenInternal])
 
   useEffect(() => {
     let firstClick = true
 
     const event = (e: MouseEvent) => {
-      const someItemWasClicked = dropdownItemsRef?.current.some(
-        (item) => e.target === item
+      const wasSomeItemClicked = dropdownItemsRef?.current.some(
+        (item) => e.target === item || item.contains(e.target as Node)
       )
 
       if (firstClick) {
@@ -71,7 +77,7 @@ const Dropdown = ({
         return
       }
 
-      !someItemWasClicked && close()
+      !wasSomeItemClicked && close()
     }
 
     if (isOpen) {
@@ -91,13 +97,13 @@ const Dropdown = ({
       close,
       open,
       toggle,
-      dropdownButtonRef,
-      onDismiss,
+      dropdownTriggerRef,
+      addDropdownTriggerRef,
       selectedDropdownItemIndexRef,
       dropdownItemsRef,
       id,
     }
-  }, [close, id, isOpen, onDismiss, toggle])
+  }, [isOpen, close, toggle, addDropdownTriggerRef, id])
 
   return (
     <DropdownContext.Provider value={value}>
diff --git a/packages/components/src/molecules/Dropdown/DropdownButton.tsx b/packages/components/src/molecules/Dropdown/DropdownButton.tsx
index 6ca2305cde..f3d91964f3 100644
--- a/packages/components/src/molecules/Dropdown/DropdownButton.tsx
+++ b/packages/components/src/molecules/Dropdown/DropdownButton.tsx
@@ -1,7 +1,6 @@
-import React, { forwardRef, useImperativeHandle, AriaAttributes } from 'react'
+import React, { cloneElement, forwardRef } from 'react'
 import Button, { ButtonProps } from '../../atoms/Button'
-
-import { useDropdown } from './hooks/useDropdown'
+import { useDropdownTrigger } from './hooks/useDropdownTrigger'
 
 export interface DropdownButtonProps
   extends Omit<ButtonProps, 'variant' | 'inverse'> {
@@ -9,43 +8,37 @@ export interface DropdownButtonProps
    * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
    */
   testId?: string
-  /**
-   * For accessibility purposes, add an ARIA label to the element when it doesn't have a label.
-   */
-  'aria-label'?: AriaAttributes['aria-label']
+
+  asChild?: boolean
 }
 
 const DropdownButton = forwardRef<HTMLButtonElement, DropdownButtonProps>(
   function DropdownButton(
-    {
-      testId = 'fs-dropdown-button',
-      'aria-label': ariaLabel,
-       children,
-      ...otherProps
-    },
-    ref
+    { testId = 'fs-dropdown-button', children, asChild = false, ...otherProps },
+    triggerRef
   ) {
-    const { toggle, dropdownButtonRef, isOpen, id } = useDropdown()
+    const triggerProps = useDropdownTrigger({ triggerRef })
 
-    useImperativeHandle(ref, () => dropdownButtonRef!.current!, [
-      dropdownButtonRef,
-    ])
+    const asChildrenTrigger = React.isValidElement(children)
+    ? cloneElement(children, { ...triggerProps, ...children.props })
+    : children;
 
     return (
-      <Button
-        data-fs-dropdown-button
-        onClick={toggle}
-        data-testid={testId}
-        ref={dropdownButtonRef}
-        aria-label={ariaLabel}
-        aria-expanded={isOpen}
-        aria-haspopup="menu"
-        aria-controls={id}
-        variant="tertiary"
-        {...otherProps}
-      >
-        {children}
-      </Button>
+      <>
+        {asChild ? (
+          asChildrenTrigger
+        ) : (
+          <Button
+            data-fs-dropdown-button
+            data-testid={testId}
+            variant="tertiary"
+            {...triggerProps}
+            {...otherProps}
+          >
+            {children}
+          </Button>
+        )}
+      </>
     )
   }
 )
diff --git a/packages/components/src/molecules/Dropdown/DropdownItem.tsx b/packages/components/src/molecules/Dropdown/DropdownItem.tsx
index 7fd3652fb3..3e6342323f 100644
--- a/packages/components/src/molecules/Dropdown/DropdownItem.tsx
+++ b/packages/components/src/molecules/Dropdown/DropdownItem.tsx
@@ -1,7 +1,7 @@
 import type { ButtonHTMLAttributes, ReactNode } from 'react'
-import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react'
+import React, { forwardRef } from 'react'
 
-import { useDropdown } from './hooks/useDropdown'
+import { useDropdownItem } from './hooks/useDropdownItem'
 
 export interface DropdownItemProps
   extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -20,48 +20,13 @@ const DropdownItem = forwardRef<HTMLButtonElement, DropdownItemProps>(
     { children, icon, onClick, testId = 'fs-dropdown-item', ...otherProps },
     ref
   ) {
-    const { dropdownItemsRef, selectedDropdownItemIndexRef, close } =
-      useDropdown()
-
-    const [dropdownItemIndex, setDropdownItemIndex] = useState(0)
-    const dropdownItemRef = useRef<HTMLButtonElement>()
-
-    const addToRefs = (el: HTMLButtonElement) => {
-      if (el && !dropdownItemsRef?.current.includes(el)) {
-        dropdownItemsRef?.current.push(el)
-        setDropdownItemIndex(
-          dropdownItemsRef?.current.findIndex((element) => element === el) ?? 0
-        )
-      }
-
-      dropdownItemRef.current = el
-    }
-
-    const onFocusItem = () => {
-      selectedDropdownItemIndexRef!.current = dropdownItemIndex
-      dropdownItemsRef?.current[selectedDropdownItemIndexRef!.current]?.focus()
-    }
-
-    const handleOnClickItem = (
-      event: React.MouseEvent<HTMLButtonElement, MouseEvent>
-    ) => {
-      onClick?.(event)
-      close?.()
-    }
-
-    useImperativeHandle(ref, () => dropdownItemRef.current!, [])
+    const itemProps = useDropdownItem({ ref, onClick })
 
     return (
       <button
         data-fs-dropdown-item
         data-testid={testId}
-        ref={addToRefs}
-        onFocus={onFocusItem}
-        onMouseEnter={onFocusItem}
-        onClick={handleOnClickItem}
-        role="menuitem"
-        tabIndex={-1}
-        data-index={dropdownItemIndex}
+        {...itemProps}
         {...otherProps}
       >
         {!!icon && icon}
diff --git a/packages/components/src/molecules/Dropdown/DropdownMenu.tsx b/packages/components/src/molecules/Dropdown/DropdownMenu.tsx
index fad2237f23..c336a20396 100644
--- a/packages/components/src/molecules/Dropdown/DropdownMenu.tsx
+++ b/packages/components/src/molecules/Dropdown/DropdownMenu.tsx
@@ -29,7 +29,7 @@ export interface DropdownMenuProps extends ModalContentProps {
    */
   onDismiss?: (event: MouseEvent | KeyboardEvent) => void
 
-   /**
+  /**
    * Specifies the size variant.
    */
   size?: 'small' | 'regular'
@@ -50,8 +50,14 @@ const DropdownMenu = ({
   style,
   ...otherProps
 }: PropsWithChildren<DropdownMenuProps>) => {
-  const { isOpen, close, dropdownItemsRef, selectedDropdownItemIndexRef, dropdownButtonRef, id } =
-    useDropdown()
+  const {
+    isOpen,
+    close,
+    dropdownItemsRef,
+    selectedDropdownItemIndexRef,
+    dropdownTriggerRef,
+    id,
+  } = useDropdown()
 
   const dropdownPosition = useDropdownPosition()
 
@@ -89,25 +95,58 @@ const DropdownMenu = ({
 
   const handleEscapePress = () => {
     close?.()
-    dropdownButtonRef?.current?.focus()
+    dropdownTriggerRef?.current?.focus()
   }
 
+  const handleKeyNavigatePress = (key: string) => {
+    const dropdownItems = dropdownItemsRef?.current ?? [];
+    const selectedIndex = selectedDropdownItemIndexRef!.current;
+  
+    const rearrangedDropdownItems = [
+      ...dropdownItems.slice(selectedIndex + 1),
+      ...dropdownItems.slice(0, selectedIndex + 1),
+    ];
+  
+    const matchItem = rearrangedDropdownItems.find(
+      (item) => item.textContent?.[0].toLowerCase() === key.toLowerCase()
+    );
+  
+    if (matchItem) {
+      selectedDropdownItemIndexRef!.current = dropdownItems.indexOf(matchItem);
+      matchItem.focus();
+    }
+  };
+  
+
   const handleBackdropKeyDown = (event: KeyboardEvent) => {
-    if (event.defaultPrevented || event.key === 'Enter') {
+    console.log(event.keyCode)
+    if (event.defaultPrevented || event.key === 'Enter' || event.keyCode === 32) {
       return
     }
+    
 
     event.preventDefault()
 
-    event.key === 'Escape' && handleEscapePress()
-
-    event.key === 'ArrowDown' && handleDownPress()
-
-    event.key === 'ArrowUp' && handleUpPress()
-
-    event.key === 'Home' && handleHomePress()
-
-    event.key === 'End' && handleEndPress()
+    switch (event.key) {
+      case 'Escape':
+        handleEscapePress()
+        break
+      case 'ArrowDown':
+        handleDownPress()
+        break
+      case 'ArrowUp':
+        handleUpPress()
+        break
+      case 'Home':
+        handleHomePress()
+        break
+      case 'End':
+        handleEndPress()
+        break
+      default:
+        handleKeyNavigatePress(event.key)
+        break
+    }
 
     event.stopPropagation()
   }
diff --git a/packages/components/src/molecules/Dropdown/contexts/DropdownContext.ts b/packages/components/src/molecules/Dropdown/contexts/DropdownContext.ts
index bd895ec1ca..d6ebb38e8c 100644
--- a/packages/components/src/molecules/Dropdown/contexts/DropdownContext.ts
+++ b/packages/components/src/molecules/Dropdown/contexts/DropdownContext.ts
@@ -1,6 +1,18 @@
 import { createContext } from 'react'
 
-export type DropdownContextState = {
+export type DropdownTriggerElement = {
+  focus(): void
+  getBoundingClientRect(): DOMRect
+} & Element
+
+export type DropdownItemElement = {
+  focus(): void
+} & Element
+
+export type DropdownContextState<
+  T extends DropdownTriggerElement = DropdownTriggerElement,
+  E extends DropdownItemElement = DropdownItemElement,
+> = {
   /**
    * Control de Dropdown state as Opened (true) or Closed (false).
    */
@@ -8,7 +20,7 @@ export type DropdownContextState = {
   /**
    * Reference to DropdownButton, used to calculate a position for the DropdownMenu.
    */
-  dropdownButtonRef: React.RefObject<HTMLButtonElement> | null
+  dropdownTriggerRef: React.MutableRefObject<T | null> | null
   /**
    * Reference to a selected DropdownItem, used to manipulate focus.
    */
@@ -16,11 +28,7 @@ export type DropdownContextState = {
   /**
    * Array of References to dropdownItems in a DropdownMenu.
    */
-  dropdownItemsRef: React.MutableRefObject<HTMLButtonElement[]> | null
-  /**
-   * Close DropdownMenu event inherited from Modal.
-   */
-  onDismiss?(): void
+  dropdownItemsRef: React.MutableRefObject<E[]> | null
   /**
    * Function responsible for close the DropdownMenu in this context.
    */
@@ -38,11 +46,13 @@ export type DropdownContextState = {
    * Identifier to be used in aria-controls
    */
   id: string
+
+  addDropdownTriggerRef?(ref: T | null): void
 }
 
 const defaultState: DropdownContextState = {
   isOpen: false,
-  dropdownButtonRef: null,
+  dropdownTriggerRef: null,
   selectedDropdownItemIndexRef: null,
   dropdownItemsRef: null,
   id: 'fs-dropdown',
diff --git a/packages/components/src/molecules/Dropdown/hooks/useDropdown.ts b/packages/components/src/molecules/Dropdown/hooks/useDropdown.ts
index 06aa17b3f3..4efb099808 100644
--- a/packages/components/src/molecules/Dropdown/hooks/useDropdown.ts
+++ b/packages/components/src/molecules/Dropdown/hooks/useDropdown.ts
@@ -1,18 +1,18 @@
 import { useContext } from 'react'
 
-import type { DropdownContextState } from '../contexts/DropdownContext'
+import type { DropdownContextState, DropdownItemElement, DropdownTriggerElement } from '../contexts/DropdownContext'
 import DropdownContext from '../contexts/DropdownContext'
 
 /**
  * Hook to use the Dropdown context.
  * @returns Dropdown context.
  */
-export const useDropdown = () => {
-  const context = useContext<DropdownContextState>(DropdownContext)
+export const useDropdown = <T extends DropdownTriggerElement = DropdownTriggerElement, E extends DropdownItemElement = DropdownItemElement>() => {
+  const context = useContext<DropdownContextState<DropdownTriggerElement, DropdownItemElement>>(DropdownContext)
 
   if (context === undefined) {
     throw new Error('Do not use useDropdown hook outside the Dropdown context.')
   }
 
-  return context
+  return context as DropdownContextState<T, E>
 }
diff --git a/packages/components/src/molecules/Dropdown/hooks/useDropdownItem.ts b/packages/components/src/molecules/Dropdown/hooks/useDropdownItem.ts
new file mode 100644
index 0000000000..a759b2a7d4
--- /dev/null
+++ b/packages/components/src/molecules/Dropdown/hooks/useDropdownItem.ts
@@ -0,0 +1,63 @@
+import React, { useImperativeHandle, useRef, useState } from 'react'
+
+import { DropdownItemElement } from '../contexts/DropdownContext'
+import { useDropdown } from './useDropdown'
+
+export type UseDropdownItemProps<
+  E extends DropdownItemElement = DropdownItemElement,
+> = {
+  ref: React.ForwardedRef<E>
+  onClick?: React.MouseEventHandler<E>
+}
+
+export const useDropdownItem = <
+  E extends DropdownItemElement = DropdownItemElement,
+>({
+  ref,
+  onClick,
+}: UseDropdownItemProps<E>) => {
+  const { dropdownItemsRef, selectedDropdownItemIndexRef, 
+    // close 
+  } = useDropdown<
+    never,
+    E
+  >()
+
+  const [dropdownItemIndex, setDropdownItemIndex] = useState(0)
+  const dropdownItemRef = useRef<E>()
+
+  const addToRefs = (el: E) => {
+    if (el && !dropdownItemsRef?.current.includes(el)) {
+      dropdownItemsRef?.current.push(el)
+      setDropdownItemIndex(
+        dropdownItemsRef?.current.findIndex((element) => element === el) ?? 0
+      )
+    }
+
+    dropdownItemRef.current = el
+  }
+
+  const onFocusItem = () => {
+    selectedDropdownItemIndexRef!.current = dropdownItemIndex
+    dropdownItemsRef?.current[selectedDropdownItemIndexRef!.current]?.focus()
+  }
+
+  const handleOnClickItem = (
+    event: React.MouseEvent<E, MouseEvent>
+  ) => {
+    onClick?.(event)
+    // close?.()
+  }
+
+  useImperativeHandle(ref, () => dropdownItemRef.current!, [])
+
+  return {
+    ref: addToRefs,
+    onFocus: onFocusItem,
+    onMouseEnter: onFocusItem,
+    onClick: handleOnClickItem,
+    role: 'menuitem',
+    tabIndex: -1,
+    'data-index': dropdownItemIndex,
+  }
+}
diff --git a/packages/components/src/molecules/Dropdown/hooks/useDropdownPosition.ts b/packages/components/src/molecules/Dropdown/hooks/useDropdownPosition.ts
index c4abd9edd5..7f84c0567d 100644
--- a/packages/components/src/molecules/Dropdown/hooks/useDropdownPosition.ts
+++ b/packages/components/src/molecules/Dropdown/hooks/useDropdownPosition.ts
@@ -7,12 +7,12 @@ type DropdownPosition = Pick<React.CSSProperties, 'position' | 'top' | 'left'>
  * @returns Style with positions.
  */
 export const useDropdownPosition = (): DropdownPosition => {
-  const { dropdownButtonRef } = useDropdown()
+  const { dropdownTriggerRef } = useDropdown()
 
   // Necessary to use this component in SSR
   const isBrowser = typeof window !== 'undefined'
 
-  const buttonRect = dropdownButtonRef?.current?.getBoundingClientRect()
+  const buttonRect = dropdownTriggerRef?.current?.getBoundingClientRect()
   const topLevel = buttonRect?.top ?? 0
   const topOffset = buttonRect?.height ?? 0
   const leftLevel = buttonRect?.left ?? 0
diff --git a/packages/components/src/molecules/Dropdown/hooks/useDropdownTrigger.ts b/packages/components/src/molecules/Dropdown/hooks/useDropdownTrigger.ts
new file mode 100644
index 0000000000..c3e8ed9cfa
--- /dev/null
+++ b/packages/components/src/molecules/Dropdown/hooks/useDropdownTrigger.ts
@@ -0,0 +1,27 @@
+import { DropdownTriggerElement } from '../contexts/DropdownContext'
+import { useDropdown } from './useDropdown'
+import React, { useImperativeHandle } from 'react'
+
+type UseDropdownTriggerProps<T extends DropdownTriggerElement = DropdownTriggerElement> = {
+  triggerRef: React.ForwardedRef<T>
+  label?: string
+}
+
+export const useDropdownTrigger = <T extends DropdownTriggerElement = DropdownTriggerElement>({
+  triggerRef,
+}: UseDropdownTriggerProps<T>) => {
+  const { toggle, dropdownTriggerRef, addDropdownTriggerRef, isOpen, id } =
+    useDropdown<T>()
+
+  useImperativeHandle(triggerRef, () => dropdownTriggerRef!.current!, [
+    dropdownTriggerRef,
+  ])
+
+  return {
+    onClick: toggle,
+    ref: addDropdownTriggerRef,
+    'aria-expanded': isOpen,
+    'aria-controls': id,
+    'aria-haspopup': 'menu' as const,
+  }
+}

From 40db848b66ab52f5b6a49ac52d8f3100f33f7753 Mon Sep 17 00:00:00 2001
From: Arthur Andrade <arthur.andrade@vtex.com>
Date: Wed, 2 Oct 2024 20:12:02 -0300
Subject: [PATCH 02/10] feat: Simplify DropdownItemElement

---
 .../components/src/molecules/Dropdown/Dropdown.tsx  |  6 +++---
 .../molecules/Dropdown/contexts/DropdownContext.ts  | 13 ++-----------
 .../src/molecules/Dropdown/hooks/useDropdown.ts     |  6 +++---
 .../src/molecules/Dropdown/hooks/useDropdownItem.ts |  9 ++++-----
 .../molecules/Dropdown/hooks/useDropdownTrigger.ts  |  5 ++---
 5 files changed, 14 insertions(+), 25 deletions(-)

diff --git a/packages/components/src/molecules/Dropdown/Dropdown.tsx b/packages/components/src/molecules/Dropdown/Dropdown.tsx
index 96a857de03..58255d0012 100644
--- a/packages/components/src/molecules/Dropdown/Dropdown.tsx
+++ b/packages/components/src/molecules/Dropdown/Dropdown.tsx
@@ -1,7 +1,7 @@
 import type { PropsWithChildren } from 'react'
 import React, { useRef, useMemo, useState, useEffect, useCallback } from 'react'
 
-import DropdownContext, { DropdownItemElement, DropdownTriggerElement } from '../Dropdown/contexts/DropdownContext'
+import DropdownContext from '../Dropdown/contexts/DropdownContext'
 
 export interface DropdownProps {
   /**
@@ -25,9 +25,9 @@ const Dropdown = ({
   id = 'fs-dropdown',
 }: PropsWithChildren<DropdownProps>) => {
   const [isOpenInternal, setIsOpenInternal] = useState(false)
-  const dropdownItemsRef = useRef<DropdownItemElement[]>([])
+  const dropdownItemsRef = useRef<HTMLElement[]>([])
   const selectedDropdownItemIndexRef = useRef(0)
-  const dropdownTriggerRef = useRef<DropdownTriggerElement | null>(null)
+  const dropdownTriggerRef = useRef<HTMLElement | null>(null)
 
   const isOpen = isOpenControlled ?? isOpenInternal
 
diff --git a/packages/components/src/molecules/Dropdown/contexts/DropdownContext.ts b/packages/components/src/molecules/Dropdown/contexts/DropdownContext.ts
index d6ebb38e8c..378a63fea6 100644
--- a/packages/components/src/molecules/Dropdown/contexts/DropdownContext.ts
+++ b/packages/components/src/molecules/Dropdown/contexts/DropdownContext.ts
@@ -1,17 +1,8 @@
 import { createContext } from 'react'
 
-export type DropdownTriggerElement = {
-  focus(): void
-  getBoundingClientRect(): DOMRect
-} & Element
-
-export type DropdownItemElement = {
-  focus(): void
-} & Element
-
 export type DropdownContextState<
-  T extends DropdownTriggerElement = DropdownTriggerElement,
-  E extends DropdownItemElement = DropdownItemElement,
+  T extends HTMLElement = HTMLElement,
+  E extends HTMLElement = HTMLElement,
 > = {
   /**
    * Control de Dropdown state as Opened (true) or Closed (false).
diff --git a/packages/components/src/molecules/Dropdown/hooks/useDropdown.ts b/packages/components/src/molecules/Dropdown/hooks/useDropdown.ts
index 4efb099808..22d24d6e86 100644
--- a/packages/components/src/molecules/Dropdown/hooks/useDropdown.ts
+++ b/packages/components/src/molecules/Dropdown/hooks/useDropdown.ts
@@ -1,14 +1,14 @@
 import { useContext } from 'react'
 
-import type { DropdownContextState, DropdownItemElement, DropdownTriggerElement } from '../contexts/DropdownContext'
+import type { DropdownContextState } from '../contexts/DropdownContext'
 import DropdownContext from '../contexts/DropdownContext'
 
 /**
  * Hook to use the Dropdown context.
  * @returns Dropdown context.
  */
-export const useDropdown = <T extends DropdownTriggerElement = DropdownTriggerElement, E extends DropdownItemElement = DropdownItemElement>() => {
-  const context = useContext<DropdownContextState<DropdownTriggerElement, DropdownItemElement>>(DropdownContext)
+export const useDropdown = <T extends HTMLElement = HTMLElement, E extends HTMLElement = HTMLElement>() => {
+  const context = useContext<DropdownContextState<HTMLElement, HTMLElement>>(DropdownContext)
 
   if (context === undefined) {
     throw new Error('Do not use useDropdown hook outside the Dropdown context.')
diff --git a/packages/components/src/molecules/Dropdown/hooks/useDropdownItem.ts b/packages/components/src/molecules/Dropdown/hooks/useDropdownItem.ts
index a759b2a7d4..6cbc88e346 100644
--- a/packages/components/src/molecules/Dropdown/hooks/useDropdownItem.ts
+++ b/packages/components/src/molecules/Dropdown/hooks/useDropdownItem.ts
@@ -1,17 +1,16 @@
 import React, { useImperativeHandle, useRef, useState } from 'react'
 
-import { DropdownItemElement } from '../contexts/DropdownContext'
 import { useDropdown } from './useDropdown'
 
 export type UseDropdownItemProps<
-  E extends DropdownItemElement = DropdownItemElement,
+  E extends HTMLElement = HTMLElement,
 > = {
   ref: React.ForwardedRef<E>
   onClick?: React.MouseEventHandler<E>
 }
 
 export const useDropdownItem = <
-  E extends DropdownItemElement = DropdownItemElement,
+  E extends HTMLElement = HTMLElement,
 >({
   ref,
   onClick,
@@ -38,8 +37,8 @@ export const useDropdownItem = <
   }
 
   const onFocusItem = () => {
-    selectedDropdownItemIndexRef!.current = dropdownItemIndex
-    dropdownItemsRef?.current[selectedDropdownItemIndexRef!.current]?.focus()
+    selectedDropdownItemIndexRef!.current = dropdownItemIndex;
+    (dropdownItemsRef?.current[selectedDropdownItemIndexRef!.current])?.focus()
   }
 
   const handleOnClickItem = (
diff --git a/packages/components/src/molecules/Dropdown/hooks/useDropdownTrigger.ts b/packages/components/src/molecules/Dropdown/hooks/useDropdownTrigger.ts
index c3e8ed9cfa..d85962f313 100644
--- a/packages/components/src/molecules/Dropdown/hooks/useDropdownTrigger.ts
+++ b/packages/components/src/molecules/Dropdown/hooks/useDropdownTrigger.ts
@@ -1,13 +1,12 @@
-import { DropdownTriggerElement } from '../contexts/DropdownContext'
 import { useDropdown } from './useDropdown'
 import React, { useImperativeHandle } from 'react'
 
-type UseDropdownTriggerProps<T extends DropdownTriggerElement = DropdownTriggerElement> = {
+type UseDropdownTriggerProps<T extends HTMLElement = HTMLElement> = {
   triggerRef: React.ForwardedRef<T>
   label?: string
 }
 
-export const useDropdownTrigger = <T extends DropdownTriggerElement = DropdownTriggerElement>({
+export const useDropdownTrigger = <T extends HTMLElement = HTMLElement>({
   triggerRef,
 }: UseDropdownTriggerProps<T>) => {
   const { toggle, dropdownTriggerRef, addDropdownTriggerRef, isOpen, id } =

From 196747392dce5232f0914a3424fe164436cd7525 Mon Sep 17 00:00:00 2001
From: Arthur Andrade <arthur.andrade@vtex.com>
Date: Thu, 3 Oct 2024 09:49:03 -0300
Subject: [PATCH 03/10] feat: Update dropdown position

---
 .../src/molecules/Dropdown/Dropdown.tsx       |  4 +-
 .../src/molecules/Dropdown/DropdownItem.tsx   | 38 +++++++---
 .../src/molecules/Dropdown/DropdownMenu.tsx   | 10 +--
 .../Dropdown/hooks/useDropdownItem.ts         |  6 +-
 .../Dropdown/hooks/useDropdownPosition.ts     | 75 +++++++++++++------
 5 files changed, 87 insertions(+), 46 deletions(-)

diff --git a/packages/components/src/molecules/Dropdown/Dropdown.tsx b/packages/components/src/molecules/Dropdown/Dropdown.tsx
index 58255d0012..00c47228a8 100644
--- a/packages/components/src/molecules/Dropdown/Dropdown.tsx
+++ b/packages/components/src/molecules/Dropdown/Dropdown.tsx
@@ -60,8 +60,8 @@ const Dropdown = ({
   }, [isOpenControlled])
 
   useEffect(() => {
-    isOpenInternal && dropdownItemsRef?.current[0]?.focus()
-  }, [isOpenInternal])
+    isOpen && dropdownItemsRef?.current[0]?.focus()
+  }, [isOpen])
 
   useEffect(() => {
     let firstClick = true
diff --git a/packages/components/src/molecules/Dropdown/DropdownItem.tsx b/packages/components/src/molecules/Dropdown/DropdownItem.tsx
index 3e6342323f..d907675542 100644
--- a/packages/components/src/molecules/Dropdown/DropdownItem.tsx
+++ b/packages/components/src/molecules/Dropdown/DropdownItem.tsx
@@ -1,5 +1,5 @@
 import type { ButtonHTMLAttributes, ReactNode } from 'react'
-import React, { forwardRef } from 'react'
+import React, { cloneElement, forwardRef } from 'react'
 
 import { useDropdownItem } from './hooks/useDropdownItem'
 
@@ -13,25 +13,39 @@ export interface DropdownItemProps
    * A React component that will be rendered as an icon.
    */
   icon?: ReactNode
+
+  asChild?: boolean
+
+  dismissOnClick?: boolean
 }
 
 const DropdownItem = forwardRef<HTMLButtonElement, DropdownItemProps>(
   function Button(
-    { children, icon, onClick, testId = 'fs-dropdown-item', ...otherProps },
+    { children, asChild, icon, onClick, dismissOnClick = true, testId = 'fs-dropdown-item', ...otherProps },
     ref
   ) {
-    const itemProps = useDropdownItem({ ref, onClick })
+    const itemProps = useDropdownItem({ ref, onClick, dismissOnClick })
+
+    const asChildrenItem = React.isValidElement(children)
+    ? cloneElement(children, { ...itemProps, ...children.props })
+    : children;
 
     return (
-      <button
-        data-fs-dropdown-item
-        data-testid={testId}
-        {...itemProps}
-        {...otherProps}
-      >
-        {!!icon && icon}
-        {children}
-      </button>
+      <>
+      {asChild ? (
+        asChildrenItem
+      ) : (
+        <button
+          data-fs-dropdown-item
+          data-testid={testId}
+          {...itemProps}
+          {...otherProps}
+        >
+          {!!icon && icon}
+          {children}
+        </button>
+        )}
+      </>
     )
   }
 )
diff --git a/packages/components/src/molecules/Dropdown/DropdownMenu.tsx b/packages/components/src/molecules/Dropdown/DropdownMenu.tsx
index c336a20396..00e6f2a8ee 100644
--- a/packages/components/src/molecules/Dropdown/DropdownMenu.tsx
+++ b/packages/components/src/molecules/Dropdown/DropdownMenu.tsx
@@ -59,7 +59,7 @@ const DropdownMenu = ({
     id,
   } = useDropdown()
 
-  const dropdownPosition = useDropdownPosition()
+  const { loading: loadingPosition, ...dropdownPosition } = useDropdownPosition()
 
   const childrenLength = React.Children.toArray(children).length
 
@@ -108,7 +108,7 @@ const DropdownMenu = ({
     ];
   
     const matchItem = rearrangedDropdownItems.find(
-      (item) => item.textContent?.[0].toLowerCase() === key.toLowerCase()
+      (item) => item.textContent?.[0]?.toLowerCase() === key.toLowerCase()
     );
   
     if (matchItem) {
@@ -119,11 +119,9 @@ const DropdownMenu = ({
   
 
   const handleBackdropKeyDown = (event: KeyboardEvent) => {
-    console.log(event.keyCode)
-    if (event.defaultPrevented || event.key === 'Enter' || event.keyCode === 32) {
+    if (event.defaultPrevented || event.key === 'Enter' || event.key === ' ') {
       return
     }
-    
 
     event.preventDefault()
 
@@ -157,7 +155,7 @@ const DropdownMenu = ({
     return null
   }
 
-  return isOpen
+  return (isOpen && !loadingPosition)
     ? createPortal(
         <div
           role="presentation"
diff --git a/packages/components/src/molecules/Dropdown/hooks/useDropdownItem.ts b/packages/components/src/molecules/Dropdown/hooks/useDropdownItem.ts
index 6cbc88e346..bdab0098b6 100644
--- a/packages/components/src/molecules/Dropdown/hooks/useDropdownItem.ts
+++ b/packages/components/src/molecules/Dropdown/hooks/useDropdownItem.ts
@@ -7,6 +7,7 @@ export type UseDropdownItemProps<
 > = {
   ref: React.ForwardedRef<E>
   onClick?: React.MouseEventHandler<E>
+  dismissOnClick?: boolean
 }
 
 export const useDropdownItem = <
@@ -14,9 +15,10 @@ export const useDropdownItem = <
 >({
   ref,
   onClick,
+  dismissOnClick = true
 }: UseDropdownItemProps<E>) => {
   const { dropdownItemsRef, selectedDropdownItemIndexRef, 
-    // close 
+    close 
   } = useDropdown<
     never,
     E
@@ -45,7 +47,7 @@ export const useDropdownItem = <
     event: React.MouseEvent<E, MouseEvent>
   ) => {
     onClick?.(event)
-    // close?.()
+    dismissOnClick && close?.()
   }
 
   useImperativeHandle(ref, () => dropdownItemRef.current!, [])
diff --git a/packages/components/src/molecules/Dropdown/hooks/useDropdownPosition.ts b/packages/components/src/molecules/Dropdown/hooks/useDropdownPosition.ts
index 7f84c0567d..736511918f 100644
--- a/packages/components/src/molecules/Dropdown/hooks/useDropdownPosition.ts
+++ b/packages/components/src/molecules/Dropdown/hooks/useDropdownPosition.ts
@@ -1,33 +1,60 @@
+import { useEffect, useState } from 'react'
 import { useDropdown } from './useDropdown'
 
-type DropdownPosition = Pick<React.CSSProperties, 'position' | 'top' | 'left'>
+type DropdownPosition = {
+  loading: boolean
+} & Pick<React.CSSProperties, 'position' | 'top' | 'left'>
 
 /**
  * Hook used to find the DropdownMenu position in relation to DropdownButton
  * @returns Style with positions.
  */
 export const useDropdownPosition = (): DropdownPosition => {
-  const { dropdownTriggerRef } = useDropdown()
-
-  // Necessary to use this component in SSR
-  const isBrowser = typeof window !== 'undefined'
-
-  const buttonRect = dropdownTriggerRef?.current?.getBoundingClientRect()
-  const topLevel = buttonRect?.top ?? 0
-  const topOffset = buttonRect?.height ?? 0
-  const leftLevel = buttonRect?.left ?? 0
-
-  // The scroll properties fix the position of DropdownMenu when the scroll is activated.
-  const scrollTop = isBrowser ? document?.documentElement?.scrollTop : 0
-  const scrollLeft = isBrowser ? document?.documentElement?.scrollLeft : 0
-
-  const topPosition = topLevel + topOffset + scrollTop
-
-  const leftPosition = leftLevel + scrollLeft
-
-  return {
-    position: 'absolute',
-    top: topPosition,
-    left: leftPosition,
-  }
+  const { dropdownTriggerRef, isOpen } = useDropdown()
+
+  const [positionProps, setPositionProps] = useState({
+    top: 0,
+    left: 0,
+    loading: true
+  })
+
+  useEffect(() => {
+    const updateMenuPosition = () => {
+      // Necessary to use this component in SSR
+      const isBrowser = typeof window !== 'undefined'
+
+      const buttonRect = dropdownTriggerRef?.current?.getBoundingClientRect()
+      const topLevel = buttonRect?.top ?? 0
+      const topOffset = buttonRect?.height ?? 0
+      const leftLevel = buttonRect?.left ?? 0
+
+      // The scroll properties fix the position of DropdownMenu when the scroll is activated.
+      const scrollTop = isBrowser ? document?.documentElement?.scrollTop : 0
+      const scrollLeft = isBrowser ? document?.documentElement?.scrollLeft : 0
+
+      const topPosition = topLevel + topOffset + scrollTop
+
+      const leftPosition = leftLevel + scrollLeft
+
+      setPositionProps({
+        top: topPosition,
+        left: leftPosition,
+        loading: false
+      })
+    }
+
+      if (isOpen) {
+        // Update the position of the menu
+        updateMenuPosition()
+        window.addEventListener('resize', updateMenuPosition)
+      }
+
+      // Cleanup listener on unmount or close
+      return () => {
+        window.removeEventListener('resize', updateMenuPosition)
+      }
+    }
+  , [dropdownTriggerRef, isOpen])
+
+  return { ...positionProps, position: 'absolute' as const }
 }

From 814264f1f5b11944c72ad0a550642b6173f5cd14 Mon Sep 17 00:00:00 2001
From: Arthur Andrade <arthur.andrade@vtex.com>
Date: Fri, 4 Oct 2024 10:01:13 -0300
Subject: [PATCH 04/10] docs: Adjust Dropdown Docs

---
 .../pages/components/molecules/dropdown.mdx   | 98 ++++++++++++++-----
 .../src/molecules/Dropdown/DropdownButton.tsx |  2 +-
 .../src/molecules/Dropdown/DropdownItem.tsx   |  8 +-
 3 files changed, 82 insertions(+), 26 deletions(-)

diff --git a/apps/site/pages/components/molecules/dropdown.mdx b/apps/site/pages/components/molecules/dropdown.mdx
index 22adb2a124..1166bf896c 100644
--- a/apps/site/pages/components/molecules/dropdown.mdx
+++ b/apps/site/pages/components/molecules/dropdown.mdx
@@ -85,38 +85,23 @@ Displays a set of actions/items to the user, usually used to show a menu of opti
 
 ## Overview
 
-export const ControlledDropdown = () => {
-  const [isOpen, setIsOpen] = useState(true)
-  return (
-      <Dropdown isOpen={isOpen} onDismiss={() => {console.log("Dismiss"); setIsOpen(false)}}>
-        <DropdownButton asChild>
-          <button onClick={() => setIsOpen(old => !old)}>{'Dropdown'}</button>
-        </DropdownButton>
+<Tabs items={['Example', 'Code']} defaultIndex="0">
+  <Tab>
+    <OverviewSection>
+      <Dropdown>
+        <DropdownButton icon={<Icon name="CaretDown" />}>Dropdown</DropdownButton>
         <DropdownMenu>
           <DropdownItem icon={<Icon name="ArrowElbowDownRight" />}>
-          <Icon name="ArrowElbowDownRight" />
-                <input type="checkbox" id="scales" name="scales" />
-    <label for="scales">Scales</label>
-            
+            Dropdown Item 1
           </DropdownItem>
           <DropdownItem icon={<Icon name="ArrowElbowDownRight" />}>
-            {'B - Dropdown Item 2'}
+            Dropdown Item 2
           </DropdownItem>
           <DropdownItem icon={<Icon name="ArrowElbowDownRight" />}>
-            {'C - Dropdown Item 3'}
-          </DropdownItem>
-                    <DropdownItem icon={<Icon name="ArrowElbowDownRight" />}>
-            {'B - Dropdown Item 3'}
+            Dropdown Item 3
           </DropdownItem>
         </DropdownMenu>
       </Dropdown>
-  )
-}
-
-<Tabs items={['Example', 'Code']} defaultIndex="0">
-  <Tab>
-    <OverviewSection>
-      <ControlledDropdown />
       <Dropdown>
         <DropdownButton icon={<Icon name="CaretDown" />}>
           {'Dropdown Small'}
@@ -200,6 +185,8 @@ Follow the instructions in the [Importing FastStore UI component styles](/docs/c
 
 ## Usage
 
+#### Default
+
 <Tabs items={['Example', 'Code']} defaultIndex="0">
   <Tab>
     <OverviewSection>
@@ -245,6 +232,71 @@ Follow the instructions in the [Importing FastStore UI component styles](/docs/c
   </Tab>
 </Tabs>
 
+#### Controlled
+
+export const ControlledDropdown = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  return (
+    <Dropdown isOpen={isOpen} onDismiss={() => {console.log("Dismiss"); setIsOpen(false)}}>
+      <DropdownButton asChild>
+        <button onClick={() => setIsOpen(old => !old)}>{'Controlled Dropdown with trigger as child'}</button>
+      </DropdownButton>
+      <DropdownMenu style={{ backgroundColor: "white"}}>
+        <DropdownItem  asChild>
+          <button>A - Dropdown item as child</button>
+        </DropdownItem>
+        <DropdownItem  asChild>
+          <button>B - Dropdown item as child</button>
+        </DropdownItem>
+        <DropdownItem  asChild>
+          <button>C - Dropdown item as child</button>
+        </DropdownItem>
+        <DropdownItem  asChild>
+          <button>D - Dropdown item as child</button>
+        </DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  )
+}
+
+<Tabs items={['Example', 'Code']} defaultIndex="0">
+  <Tab>
+    <OverviewSection>
+      <ControlledDropdown/>
+    </OverviewSection>
+  </Tab>
+  <Tab>
+    ```tsx
+    <OverviewSection>
+      export const ControlledDropdown = () => {
+        const [isOpen, setIsOpen] = useState(true)
+        return (
+            <Dropdown isOpen={isOpen} onDismiss={() => {console.log("Dismiss"); setIsOpen(false)}}>
+              <DropdownButton asChild>
+                <button onClick={() => setIsOpen(old => !old)}>{'Controlled Dropdown with trigger as child'}</button>
+              </DropdownButton>
+              <DropdownMenu style={{ backgroundColor: "white"}}>
+                <DropdownItem  asChild>
+                  <button>A - Dropdown item as child</button>
+                </DropdownItem>
+                <DropdownItem  asChild>
+                  <button>B - Dropdown item as child</button>
+                </DropdownItem>
+                <DropdownItem  asChild>
+                  <button>C - Dropdown item as child</button>
+                </DropdownItem>
+                <DropdownItem  asChild>
+                  <button>D - Dropdown item as child</button>
+                </DropdownItem>
+              </DropdownMenu>
+            </Dropdown>
+        )
+      }
+    </OverviewSection>
+    ```
+  </Tab>
+</Tabs>
+
 ---
 
 ## Props
diff --git a/packages/components/src/molecules/Dropdown/DropdownButton.tsx b/packages/components/src/molecules/Dropdown/DropdownButton.tsx
index f3d91964f3..6068ff2218 100644
--- a/packages/components/src/molecules/Dropdown/DropdownButton.tsx
+++ b/packages/components/src/molecules/Dropdown/DropdownButton.tsx
@@ -8,7 +8,7 @@ export interface DropdownButtonProps
    * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
    */
   testId?: string
-
+  /** Replace the default rendered element with the one passed as a child, merging their props and behavior. */
   asChild?: boolean
 }
 
diff --git a/packages/components/src/molecules/Dropdown/DropdownItem.tsx b/packages/components/src/molecules/Dropdown/DropdownItem.tsx
index d907675542..2acf17b5eb 100644
--- a/packages/components/src/molecules/Dropdown/DropdownItem.tsx
+++ b/packages/components/src/molecules/Dropdown/DropdownItem.tsx
@@ -13,9 +13,13 @@ export interface DropdownItemProps
    * A React component that will be rendered as an icon.
    */
   icon?: ReactNode
-
+  /** 
+   * Replace the default rendered element with the one passed as a child, merging their props and behavior. 
+   * */
   asChild?: boolean
-
+  /**
+   *  Emit onDismiss eventwhen the component is clicked.
+   */
   dismissOnClick?: boolean
 }
 

From aba94bd9cf987af6e5541d69e6c2e716b854cf7d Mon Sep 17 00:00:00 2001
From: Arthur Andrade <arthurfelandrade@gmail.com>
Date: Mon, 7 Oct 2024 23:07:34 -0300
Subject: [PATCH 05/10] feat: Add align position in DropdownMenu

---
 .../pages/components/molecules/dropdown.mdx   | 122 +++++++++++-------
 packages/components/src/atoms/Button/index.ts |   2 +-
 .../src/molecules/Dropdown/Dropdown.tsx       |   9 +-
 .../src/molecules/Dropdown/DropdownButton.tsx |  24 +++-
 .../src/molecules/Dropdown/DropdownItem.tsx   |   1 +
 .../src/molecules/Dropdown/DropdownMenu.tsx   |   9 +-
 .../Dropdown/hooks/useDropdownPosition.ts     |  46 ++++---
 7 files changed, 144 insertions(+), 69 deletions(-)

diff --git a/apps/site/pages/components/molecules/dropdown.mdx b/apps/site/pages/components/molecules/dropdown.mdx
index 1166bf896c..89120b839e 100644
--- a/apps/site/pages/components/molecules/dropdown.mdx
+++ b/apps/site/pages/components/molecules/dropdown.mdx
@@ -90,15 +90,15 @@ Displays a set of actions/items to the user, usually used to show a menu of opti
     <OverviewSection>
       <Dropdown>
         <DropdownButton icon={<Icon name="CaretDown" />}>Dropdown</DropdownButton>
-        <DropdownMenu>
+        <DropdownMenu size="regular" align="left">
           <DropdownItem icon={<Icon name="ArrowElbowDownRight" />}>
-            Dropdown Item 1
+            {'Dropdown Item 1'}
           </DropdownItem>
           <DropdownItem icon={<Icon name="ArrowElbowDownRight" />}>
-            Dropdown Item 2
+            {'Dropdown Item 2'}
           </DropdownItem>
           <DropdownItem icon={<Icon name="ArrowElbowDownRight" />}>
-            Dropdown Item 3
+            {'Dropdown Item 3'}
           </DropdownItem>
         </DropdownMenu>
       </Dropdown>
@@ -106,7 +106,7 @@ Displays a set of actions/items to the user, usually used to show a menu of opti
         <DropdownButton icon={<Icon name="CaretDown" />}>
           {'Dropdown Small'}
         </DropdownButton>
-        <DropdownMenu size="small">
+        <DropdownMenu size="small"  align="center">
           <DropdownItem icon={<Icon name="ArrowElbowDownRight" />}>
             {'Dropdown Item 1'}
           </DropdownItem>
@@ -237,23 +237,13 @@ Follow the instructions in the [Importing FastStore UI component styles](/docs/c
 export const ControlledDropdown = () => {
   const [isOpen, setIsOpen] = useState(false)
   return (
-    <Dropdown isOpen={isOpen} onDismiss={() => {console.log("Dismiss"); setIsOpen(false)}}>
-      <DropdownButton asChild>
-        <button onClick={() => setIsOpen(old => !old)}>{'Controlled Dropdown with trigger as child'}</button>
-      </DropdownButton>
-      <DropdownMenu style={{ backgroundColor: "white"}}>
-        <DropdownItem  asChild>
-          <button>A - Dropdown item as child</button>
-        </DropdownItem>
-        <DropdownItem  asChild>
-          <button>B - Dropdown item as child</button>
-        </DropdownItem>
-        <DropdownItem  asChild>
-          <button>C - Dropdown item as child</button>
-        </DropdownItem>
-        <DropdownItem  asChild>
-          <button>D - Dropdown item as child</button>
-        </DropdownItem>
+    <Dropdown isOpen={isOpen} onDismiss={() => {setIsOpen(false)}}>
+      <DropdownButton onClick={()=> setIsOpen(true)}>Controlled Dropdown</DropdownButton>
+      <DropdownMenu>
+        <DropdownItem>A - Dropdown item as child</DropdownItem>
+        <DropdownItem>B - Dropdown item as child</DropdownItem>
+        <DropdownItem>C - Dropdown item as child</DropdownItem>
+        <DropdownItem>D - Dropdown item as child</DropdownItem>
       </DropdownMenu>
     </Dropdown>
   )
@@ -268,30 +258,70 @@ export const ControlledDropdown = () => {
   <Tab>
     ```tsx
     <OverviewSection>
-      export const ControlledDropdown = () => {
-        const [isOpen, setIsOpen] = useState(true)
-        return (
-            <Dropdown isOpen={isOpen} onDismiss={() => {console.log("Dismiss"); setIsOpen(false)}}>
-              <DropdownButton asChild>
-                <button onClick={() => setIsOpen(old => !old)}>{'Controlled Dropdown with trigger as child'}</button>
-              </DropdownButton>
-              <DropdownMenu style={{ backgroundColor: "white"}}>
-                <DropdownItem  asChild>
-                  <button>A - Dropdown item as child</button>
-                </DropdownItem>
-                <DropdownItem  asChild>
-                  <button>B - Dropdown item as child</button>
-                </DropdownItem>
-                <DropdownItem  asChild>
-                  <button>C - Dropdown item as child</button>
-                </DropdownItem>
-                <DropdownItem  asChild>
-                  <button>D - Dropdown item as child</button>
-                </DropdownItem>
-              </DropdownMenu>
-            </Dropdown>
-        )
-      }
+      const [isOpen, setIsOpen] = useState(false)
+      return (
+        <Dropdown isOpen={isOpen} onDismiss={() => {setIsOpen(false)}}>
+          <DropdownButton>Controlled Dropdown</DropdownButton>
+          <DropdownMenu>
+            <DropdownItem>A - Dropdown item as child</DropdownItem>
+            <DropdownItem>B - Dropdown item as child</DropdownItem>
+            <DropdownItem>C - Dropdown item as child</DropdownItem>
+            <DropdownItem>D - Dropdown item as child</DropdownItem>
+          </DropdownMenu>
+        </Dropdown>
+    </OverviewSection>
+    ```
+  </Tab>
+</Tabs>
+
+#### As Child
+
+<Tabs items={['Example', 'Code']} defaultIndex="0">
+  <Tab>
+    <OverviewSection>
+      <Dropdown>
+        <DropdownButton asChild>
+          <button>{'Dropdown with trigger as child'}</button>
+        </DropdownButton>
+        <DropdownMenu style={{ backgroundColor: "white"}}>
+          <DropdownItem  asChild>
+            <button>A - Dropdown item as child</button>
+          </DropdownItem>
+          <DropdownItem  asChild>
+            <button>B - Dropdown item as child</button>
+          </DropdownItem>
+          <DropdownItem  asChild>
+            <button>C - Dropdown item as child</button>
+          </DropdownItem>
+          <DropdownItem  asChild>
+            <button>D - Dropdown item as child</button>
+          </DropdownItem>
+        </DropdownMenu>
+      </Dropdown>
+    </OverviewSection>
+  </Tab>
+  <Tab>
+    ```tsx
+    <OverviewSection>
+      <Dropdown>
+        <DropdownButton asChild>
+          <button>{'Dropdown with trigger as child'}</button>
+        </DropdownButton>
+        <DropdownMenu style={{ backgroundColor: "white"}}>
+          <DropdownItem  asChild>
+            <button>A - Dropdown item as child</button>
+          </DropdownItem>
+          <DropdownItem  asChild>
+            <button>B - Dropdown item as child</button>
+          </DropdownItem>
+          <DropdownItem  asChild>
+            <button>C - Dropdown item as child</button>
+          </DropdownItem>
+          <DropdownItem  asChild>
+            <button>D - Dropdown item as child</button>
+          </DropdownItem>
+        </DropdownMenu>
+      </Dropdown>
     </OverviewSection>
     ```
   </Tab>
diff --git a/packages/components/src/atoms/Button/index.ts b/packages/components/src/atoms/Button/index.ts
index c378f002c0..f19f72d177 100644
--- a/packages/components/src/atoms/Button/index.ts
+++ b/packages/components/src/atoms/Button/index.ts
@@ -1,2 +1,2 @@
 export { default } from './Button'
-export type { ButtonProps } from './Button'
+export type { ButtonProps, Variant, Size, IconPosition } from './Button'
diff --git a/packages/components/src/molecules/Dropdown/Dropdown.tsx b/packages/components/src/molecules/Dropdown/Dropdown.tsx
index 00c47228a8..552c4000f6 100644
--- a/packages/components/src/molecules/Dropdown/Dropdown.tsx
+++ b/packages/components/src/molecules/Dropdown/Dropdown.tsx
@@ -60,7 +60,14 @@ const Dropdown = ({
   }, [isOpenControlled])
 
   useEffect(() => {
-    isOpen && dropdownItemsRef?.current[0]?.focus()
+    if(isOpen) {
+      dropdownItemsRef?.current[0]?.focus()
+      document.body.style.overflow = 'hidden'
+
+      return
+    }
+
+    document.body.style.overflow = 'auto'
   }, [isOpen])
 
   useEffect(() => {
diff --git a/packages/components/src/molecules/Dropdown/DropdownButton.tsx b/packages/components/src/molecules/Dropdown/DropdownButton.tsx
index 6068ff2218..53327cacd9 100644
--- a/packages/components/src/molecules/Dropdown/DropdownButton.tsx
+++ b/packages/components/src/molecules/Dropdown/DropdownButton.tsx
@@ -1,15 +1,33 @@
-import React, { cloneElement, forwardRef } from 'react'
-import Button, { ButtonProps } from '../../atoms/Button'
+import React, { cloneElement, forwardRef, ReactNode } from 'react'
+import Button, { ButtonProps, IconPosition } from '../../atoms/Button'
 import { useDropdownTrigger } from './hooks/useDropdownTrigger'
 
 export interface DropdownButtonProps
-  extends Omit<ButtonProps, 'variant' | 'inverse'> {
+  extends Omit<ButtonProps, 'variant' | 'inverse' | 'icon' | 'iconPosition' > {
   /**
    * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
    */
   testId?: string
   /** Replace the default rendered element with the one passed as a child, merging their props and behavior. */
   asChild?: boolean
+  /**
+   * Boolean that represents a loading state.
+   */
+  loading?: boolean
+  /**
+   * Specifies a label for loading state.
+   */
+  loadingLabel?: string
+  /**
+   * @deprecated
+   * A React component that will be rendered as an icon.
+   */
+  icon?: ReactNode
+  /**
+   * @deprecated
+   * Specifies where the icon should be positioned
+   */
+  iconPosition?: IconPosition
 }
 
 const DropdownButton = forwardRef<HTMLButtonElement, DropdownButtonProps>(
diff --git a/packages/components/src/molecules/Dropdown/DropdownItem.tsx b/packages/components/src/molecules/Dropdown/DropdownItem.tsx
index 2acf17b5eb..5cfd30bcae 100644
--- a/packages/components/src/molecules/Dropdown/DropdownItem.tsx
+++ b/packages/components/src/molecules/Dropdown/DropdownItem.tsx
@@ -10,6 +10,7 @@ export interface DropdownItemProps
    */
   testId?: string
   /**
+   * @deprecated
    * A React component that will be rendered as an icon.
    */
   icon?: ReactNode
diff --git a/packages/components/src/molecules/Dropdown/DropdownMenu.tsx b/packages/components/src/molecules/Dropdown/DropdownMenu.tsx
index 00e6f2a8ee..b213f9cf96 100644
--- a/packages/components/src/molecules/Dropdown/DropdownMenu.tsx
+++ b/packages/components/src/molecules/Dropdown/DropdownMenu.tsx
@@ -22,17 +22,19 @@ export interface DropdownMenuProps extends ModalContentProps {
    * @see aria-labelledby https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby
    */
   'aria-labelledby'?: AriaAttributes['aria-label']
-
   /**
    * This function is called whenever the user hits "Escape" or clicks outside
    * the dialog.
    */
   onDismiss?: (event: MouseEvent | KeyboardEvent) => void
-
   /**
    * Specifies the size variant.
    */
   size?: 'small' | 'regular'
+  /**
+   * Alignment for the dropdown
+   */
+  align?: 'left' | 'right' | 'center'
 
   children: ReactNode[] | ReactNode
 }
@@ -47,6 +49,7 @@ const DropdownMenu = ({
   children,
   testId = 'fs-dropdown-menu',
   size = 'regular',
+  align = 'left',
   style,
   ...otherProps
 }: PropsWithChildren<DropdownMenuProps>) => {
@@ -59,7 +62,7 @@ const DropdownMenu = ({
     id,
   } = useDropdown()
 
-  const { loading: loadingPosition, ...dropdownPosition } = useDropdownPosition()
+  const { loading: loadingPosition, ...dropdownPosition } = useDropdownPosition(align)
 
   const childrenLength = React.Children.toArray(children).length
 
diff --git a/packages/components/src/molecules/Dropdown/hooks/useDropdownPosition.ts b/packages/components/src/molecules/Dropdown/hooks/useDropdownPosition.ts
index 736511918f..73fbe1f95b 100644
--- a/packages/components/src/molecules/Dropdown/hooks/useDropdownPosition.ts
+++ b/packages/components/src/molecules/Dropdown/hooks/useDropdownPosition.ts
@@ -3,18 +3,20 @@ import { useDropdown } from './useDropdown'
 
 type DropdownPosition = {
   loading: boolean
-} & Pick<React.CSSProperties, 'position' | 'top' | 'left'>
+} & Pick<React.CSSProperties, 'position' | 'top' | 'left' | 'right' | 'transform'>
 
 /**
  * Hook used to find the DropdownMenu position in relation to DropdownButton
  * @returns Style with positions.
  */
-export const useDropdownPosition = (): DropdownPosition => {
+export const useDropdownPosition = (align: 'left' | 'center' | 'right' = 'left'): DropdownPosition => {
   const { dropdownTriggerRef, isOpen } = useDropdown()
 
   const [positionProps, setPositionProps] = useState({
     top: 0,
-    left: 0,
+    left: 0 as React.CSSProperties['left'],
+    right: 'auto',
+    transform: 'none',
     loading: true
   })
 
@@ -23,10 +25,13 @@ export const useDropdownPosition = (): DropdownPosition => {
       // Necessary to use this component in SSR
       const isBrowser = typeof window !== 'undefined'
 
-      const buttonRect = dropdownTriggerRef?.current?.getBoundingClientRect()
+      if (!dropdownTriggerRef?.current) return
+
+      const buttonRect = dropdownTriggerRef.current.getBoundingClientRect()
       const topLevel = buttonRect?.top ?? 0
       const topOffset = buttonRect?.height ?? 0
       const leftLevel = buttonRect?.left ?? 0
+      const buttonWidth = buttonRect?.width ?? 0
 
       // The scroll properties fix the position of DropdownMenu when the scroll is activated.
       const scrollTop = isBrowser ? document?.documentElement?.scrollTop : 0
@@ -34,27 +39,38 @@ export const useDropdownPosition = (): DropdownPosition => {
 
       const topPosition = topLevel + topOffset + scrollTop
 
-      const leftPosition = leftLevel + scrollLeft
+      let leftPosition: React.CSSProperties['left'] = leftLevel + scrollLeft
+      let rightPosition = 'auto'
+      let transform = 'none'
+
+      if (align === 'right') {
+        rightPosition = `${document.documentElement.clientWidth - leftLevel - buttonWidth}px`
+        leftPosition = 'auto'
+      } else if (align === 'center') {
+        leftPosition = leftLevel + (buttonWidth / 2) + scrollLeft
+        transform = 'translateX(-50%)'
+      }
 
       setPositionProps({
         top: topPosition,
         left: leftPosition,
+        right: rightPosition,
+        transform,
         loading: false
       })
     }
 
-      if (isOpen) {
-        // Update the position of the menu
-        updateMenuPosition()
-        window.addEventListener('resize', updateMenuPosition)
-      }
+    if (isOpen) {
+      // Update the position of the menu
+      updateMenuPosition()
+      window.addEventListener('resize', updateMenuPosition)
+    }
 
-      // Cleanup listener on unmount or close
-      return () => {
-        window.removeEventListener('resize', updateMenuPosition)
-      }
+    // Cleanup listener on unmount or close
+    return () => {
+      window.removeEventListener('resize', updateMenuPosition)
     }
-  , [dropdownTriggerRef, isOpen])
+  }, [dropdownTriggerRef, isOpen, align])
 
   return { ...positionProps, position: 'absolute' as const }
 }

From 9aa21f86f6c207b871231f41ab355290ce258781 Mon Sep 17 00:00:00 2001
From: Arthur Andrade <arthurfelandrade@gmail.com>
Date: Wed, 16 Oct 2024 14:32:13 -0300
Subject: [PATCH 06/10] Update
 packages/components/src/molecules/Dropdown/DropdownButton.tsx

Co-authored-by: Fanny Chien <fanny.chien@vtex.com>
---
 packages/components/src/molecules/Dropdown/DropdownButton.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/molecules/Dropdown/DropdownButton.tsx b/packages/components/src/molecules/Dropdown/DropdownButton.tsx
index 53327cacd9..99400b3933 100644
--- a/packages/components/src/molecules/Dropdown/DropdownButton.tsx
+++ b/packages/components/src/molecules/Dropdown/DropdownButton.tsx
@@ -8,7 +8,9 @@ export interface DropdownButtonProps
    * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
    */
   testId?: string
-  /** Replace the default rendered element with the one passed as a child, merging their props and behavior. */
+  /**
+   * Replace the default rendered element with the provided child element, merging their props and behavior.
+   */
   asChild?: boolean
   /**
    * Boolean that represents a loading state.

From b64df8dbabddcd4d3f867e2aba137d92d960832a Mon Sep 17 00:00:00 2001
From: Arthur Andrade <arthurfelandrade@gmail.com>
Date: Fri, 18 Oct 2024 08:38:51 -0300
Subject: [PATCH 07/10] Update packages/components/src/atoms/Button/index.ts

---
 packages/components/src/atoms/Button/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/atoms/Button/index.ts b/packages/components/src/atoms/Button/index.ts
index f19f72d177..8dbc1909ca 100644
--- a/packages/components/src/atoms/Button/index.ts
+++ b/packages/components/src/atoms/Button/index.ts
@@ -1,2 +1,2 @@
 export { default } from './Button'
-export type { ButtonProps, Variant, Size, IconPosition } from './Button'
+export type { ButtonProps, Variant as ButtonVariant, Size as ButtonSize, IconPosition as ButtonIconPosition } from './Button'

From 450d8b4e034c3c6e35f3928a125c8ee224db93f6 Mon Sep 17 00:00:00 2001
From: Arthur Andrade <arthurfelandrade@gmail.com>
Date: Tue, 22 Oct 2024 11:36:16 -0300
Subject: [PATCH 08/10] feat: apply adjusts in Dropdown

---
 .../pages/components/molecules/dropdown.mdx   | 16 +++----
 .../src/molecules/Dropdown/DropdownButton.tsx | 10 ++---
 .../src/molecules/Dropdown/DropdownItem.tsx   | 44 +++++++++++--------
 .../Dropdown/contexts/DropdownContext.ts      |  3 ++
 .../Dropdown/hooks/useDropdownItem.ts         | 22 +++-------
 5 files changed, 49 insertions(+), 46 deletions(-)

diff --git a/apps/site/pages/components/molecules/dropdown.mdx b/apps/site/pages/components/molecules/dropdown.mdx
index 89120b839e..998a53eca8 100644
--- a/apps/site/pages/components/molecules/dropdown.mdx
+++ b/apps/site/pages/components/molecules/dropdown.mdx
@@ -240,10 +240,10 @@ export const ControlledDropdown = () => {
     <Dropdown isOpen={isOpen} onDismiss={() => {setIsOpen(false)}}>
       <DropdownButton onClick={()=> setIsOpen(true)}>Controlled Dropdown</DropdownButton>
       <DropdownMenu>
-        <DropdownItem>A - Dropdown item as child</DropdownItem>
-        <DropdownItem>B - Dropdown item as child</DropdownItem>
-        <DropdownItem>C - Dropdown item as child</DropdownItem>
-        <DropdownItem>D - Dropdown item as child</DropdownItem>
+        <DropdownItem>A - Dropdown item</DropdownItem>
+        <DropdownItem>B - Dropdown item</DropdownItem>
+        <DropdownItem>C - Dropdown item</DropdownItem>
+        <DropdownItem>D - Dropdown item</DropdownItem>
       </DropdownMenu>
     </Dropdown>
   )
@@ -263,10 +263,10 @@ export const ControlledDropdown = () => {
         <Dropdown isOpen={isOpen} onDismiss={() => {setIsOpen(false)}}>
           <DropdownButton>Controlled Dropdown</DropdownButton>
           <DropdownMenu>
-            <DropdownItem>A - Dropdown item as child</DropdownItem>
-            <DropdownItem>B - Dropdown item as child</DropdownItem>
-            <DropdownItem>C - Dropdown item as child</DropdownItem>
-            <DropdownItem>D - Dropdown item as child</DropdownItem>
+            <DropdownItem>A - Dropdown item</DropdownItem>
+            <DropdownItem>B - Dropdown item</DropdownItem>
+            <DropdownItem>C - Dropdown item</DropdownItem>
+            <DropdownItem>D - Dropdown item</DropdownItem>
           </DropdownMenu>
         </Dropdown>
     </OverviewSection>
diff --git a/packages/components/src/molecules/Dropdown/DropdownButton.tsx b/packages/components/src/molecules/Dropdown/DropdownButton.tsx
index 99400b3933..115d1b8aaa 100644
--- a/packages/components/src/molecules/Dropdown/DropdownButton.tsx
+++ b/packages/components/src/molecules/Dropdown/DropdownButton.tsx
@@ -1,9 +1,9 @@
 import React, { cloneElement, forwardRef, ReactNode } from 'react'
-import Button, { ButtonProps, IconPosition } from '../../atoms/Button'
+import Button, { ButtonProps, ButtonIconPosition } from '../../atoms/Button'
 import { useDropdownTrigger } from './hooks/useDropdownTrigger'
 
 export interface DropdownButtonProps
-  extends Omit<ButtonProps, 'variant' | 'inverse' | 'icon' | 'iconPosition' > {
+  extends Omit<ButtonProps, 'variant' | 'inverse' | 'icon' | 'iconPosition'> {
   /**
    * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
    */
@@ -29,7 +29,7 @@ export interface DropdownButtonProps
    * @deprecated
    * Specifies where the icon should be positioned
    */
-  iconPosition?: IconPosition
+  iconPosition?: ButtonIconPosition
 }
 
 const DropdownButton = forwardRef<HTMLButtonElement, DropdownButtonProps>(
@@ -40,8 +40,8 @@ const DropdownButton = forwardRef<HTMLButtonElement, DropdownButtonProps>(
     const triggerProps = useDropdownTrigger({ triggerRef })
 
     const asChildrenTrigger = React.isValidElement(children)
-    ? cloneElement(children, { ...triggerProps, ...children.props })
-    : children;
+      ? cloneElement(children, { ...triggerProps, ...children.props })
+      : children
 
     return (
       <>
diff --git a/packages/components/src/molecules/Dropdown/DropdownItem.tsx b/packages/components/src/molecules/Dropdown/DropdownItem.tsx
index 5cfd30bcae..2c48c4bc6d 100644
--- a/packages/components/src/molecules/Dropdown/DropdownItem.tsx
+++ b/packages/components/src/molecules/Dropdown/DropdownItem.tsx
@@ -14,41 +14,49 @@ export interface DropdownItemProps
    * A React component that will be rendered as an icon.
    */
   icon?: ReactNode
-  /** 
-   * Replace the default rendered element with the one passed as a child, merging their props and behavior. 
+  /**
+   * Replace the default rendered element with the one passed as a child, merging their props and behavior.
    * */
   asChild?: boolean
   /**
-   *  Emit onDismiss eventwhen the component is clicked.
+   * Emit onDismiss event when the component is clicked.
    */
   dismissOnClick?: boolean
 }
 
 const DropdownItem = forwardRef<HTMLButtonElement, DropdownItemProps>(
   function Button(
-    { children, asChild, icon, onClick, dismissOnClick = true, testId = 'fs-dropdown-item', ...otherProps },
+    {
+      children,
+      asChild,
+      icon,
+      onClick,
+      dismissOnClick = true,
+      testId = 'fs-dropdown-item',
+      ...otherProps
+    },
     ref
   ) {
     const itemProps = useDropdownItem({ ref, onClick, dismissOnClick })
 
     const asChildrenItem = React.isValidElement(children)
-    ? cloneElement(children, { ...itemProps, ...children.props })
-    : children;
+      ? cloneElement(children, { ...itemProps, ...children.props })
+      : children
 
     return (
       <>
-      {asChild ? (
-        asChildrenItem
-      ) : (
-        <button
-          data-fs-dropdown-item
-          data-testid={testId}
-          {...itemProps}
-          {...otherProps}
-        >
-          {!!icon && icon}
-          {children}
-        </button>
+        {asChild ? (
+          asChildrenItem
+        ) : (
+          <button
+            data-fs-dropdown-item
+            data-testid={testId}
+            {...itemProps}
+            {...otherProps}
+          >
+            {!!icon && icon}
+            {children}
+          </button>
         )}
       </>
     )
diff --git a/packages/components/src/molecules/Dropdown/contexts/DropdownContext.ts b/packages/components/src/molecules/Dropdown/contexts/DropdownContext.ts
index 378a63fea6..0ad7871bb9 100644
--- a/packages/components/src/molecules/Dropdown/contexts/DropdownContext.ts
+++ b/packages/components/src/molecules/Dropdown/contexts/DropdownContext.ts
@@ -38,6 +38,9 @@ export type DropdownContextState<
    */
   id: string
 
+  /**
+   * Associates the dropdown trigger element's ref for managing its position and interaction events.
+   */
   addDropdownTriggerRef?(ref: T | null): void
 }
 
diff --git a/packages/components/src/molecules/Dropdown/hooks/useDropdownItem.ts b/packages/components/src/molecules/Dropdown/hooks/useDropdownItem.ts
index bdab0098b6..112f46bba8 100644
--- a/packages/components/src/molecules/Dropdown/hooks/useDropdownItem.ts
+++ b/packages/components/src/molecules/Dropdown/hooks/useDropdownItem.ts
@@ -2,24 +2,18 @@ import React, { useImperativeHandle, useRef, useState } from 'react'
 
 import { useDropdown } from './useDropdown'
 
-export type UseDropdownItemProps<
-  E extends HTMLElement = HTMLElement,
-> = {
+export type UseDropdownItemProps<E extends HTMLElement = HTMLElement> = {
   ref: React.ForwardedRef<E>
   onClick?: React.MouseEventHandler<E>
   dismissOnClick?: boolean
 }
 
-export const useDropdownItem = <
-  E extends HTMLElement = HTMLElement,
->({
+export const useDropdownItem = <E extends HTMLElement = HTMLElement>({
   ref,
   onClick,
-  dismissOnClick = true
+  dismissOnClick = true,
 }: UseDropdownItemProps<E>) => {
-  const { dropdownItemsRef, selectedDropdownItemIndexRef, 
-    close 
-  } = useDropdown<
+  const { dropdownItemsRef, selectedDropdownItemIndexRef, close } = useDropdown<
     never,
     E
   >()
@@ -39,13 +33,11 @@ export const useDropdownItem = <
   }
 
   const onFocusItem = () => {
-    selectedDropdownItemIndexRef!.current = dropdownItemIndex;
-    (dropdownItemsRef?.current[selectedDropdownItemIndexRef!.current])?.focus()
+    selectedDropdownItemIndexRef!.current = dropdownItemIndex
+    dropdownItemsRef?.current[selectedDropdownItemIndexRef!.current]?.focus()
   }
 
-  const handleOnClickItem = (
-    event: React.MouseEvent<E, MouseEvent>
-  ) => {
+  const handleOnClickItem = (event: React.MouseEvent<E, MouseEvent>) => {
     onClick?.(event)
     dismissOnClick && close?.()
   }

From 9ae264e5d34618806210eaa4ba93e96e2668fe4c Mon Sep 17 00:00:00 2001
From: Arthur Andrade <arthurfelandrade@gmail.com>
Date: Tue, 22 Oct 2024 11:40:56 -0300
Subject: [PATCH 09/10] feat: apply adjusts in Dropdown

---
 .../src/molecules/Dropdown/contexts/DropdownContext.ts          | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/components/src/molecules/Dropdown/contexts/DropdownContext.ts b/packages/components/src/molecules/Dropdown/contexts/DropdownContext.ts
index 0ad7871bb9..8ada094460 100644
--- a/packages/components/src/molecules/Dropdown/contexts/DropdownContext.ts
+++ b/packages/components/src/molecules/Dropdown/contexts/DropdownContext.ts
@@ -32,12 +32,10 @@ export type DropdownContextState<
    * Function responsible for switch the the DropdownMenu state in this context.
    */
   toggle?(): void
-
   /**
    * Identifier to be used in aria-controls
    */
   id: string
-
   /**
    * Associates the dropdown trigger element's ref for managing its position and interaction events.
    */

From 07912b165ffca84b1da7f39a02e664d542815830 Mon Sep 17 00:00:00 2001
From: Arthur Andrade <arthurfelandrade@gmail.com>
Date: Thu, 31 Oct 2024 09:52:06 -0300
Subject: [PATCH 10/10] feat: remove lock scroll

---
 .../src/molecules/Dropdown/Dropdown.tsx        | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/packages/components/src/molecules/Dropdown/Dropdown.tsx b/packages/components/src/molecules/Dropdown/Dropdown.tsx
index 552c4000f6..40c58ef362 100644
--- a/packages/components/src/molecules/Dropdown/Dropdown.tsx
+++ b/packages/components/src/molecules/Dropdown/Dropdown.tsx
@@ -51,23 +51,19 @@ const Dropdown = ({
     })
   }, [onDismiss])
 
-  const addDropdownTriggerRef = useCallback(<T extends HTMLElement = HTMLElement>(ref: T) => {
-    dropdownTriggerRef.current = ref
-  }, [])
+  const addDropdownTriggerRef = useCallback(
+    <T extends HTMLElement = HTMLElement>(ref: T) => {
+      dropdownTriggerRef.current = ref
+    },
+    []
+  )
 
   useEffect(() => {
     setIsOpenInternal(isOpenControlled ?? false)
   }, [isOpenControlled])
 
   useEffect(() => {
-    if(isOpen) {
-      dropdownItemsRef?.current[0]?.focus()
-      document.body.style.overflow = 'hidden'
-
-      return
-    }
-
-    document.body.style.overflow = 'auto'
+    isOpen && dropdownItemsRef?.current[0]?.focus()
   }, [isOpen])
 
   useEffect(() => {