@faststore/components 2.0.39-alpha.0 → 2.0.42-alpha.0

package/dist/molecules/Table/TableFooter.d.ts

@@ -1,14 +1,12 @@
-import type { HTMLAttributes } from 'react';
 import React from 'react';
+import type { HTMLAttributes } from 'react';
 export interface TableFooterProps extends HTMLAttributes<HTMLTableSectionElement> {
     /**
      * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
      */
     testId?: string;
-    /**
-     * Children for TableFooter components.
-     */
-    children: React.ReactNode;
 }
-declare const TableFooter: React.ForwardRefExoticComponent<TableFooterProps & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: React.ForwardRefExoticComponent<TableFooterProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLTableSectionElement>>;
 export default TableFooter;

package/dist/molecules/Table/TableFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableFooter.js","sourceRoot":"","sources":["../../../src/molecules/Table/TableFooter.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAczC,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAClB,EAAE,QAAQ,EAAE,MAAM,GAAG,iBAAiB,EAAE,GAAG,UAAU,EAAE,EACvD,GAAG;IAEH,OAAO,CACL,+BAAO,GAAG,EAAE,GAAG,iBAAe,MAAM,mCAA2B,UAAU,IACtE,QAAQ,CACH,CACT,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,WAAW,CAAA"}
+{"version":3,"file":"TableFooter.js","sourceRoot":"","sources":["../../../src/molecules/Table/TableFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAWzC,MAAM,WAAW,GAAG,UAAU,CAG5B,SAAS,WAAW,CACpB,EAAE,QAAQ,EAAE,MAAM,GAAG,iBAAiB,EAAE,GAAG,UAAU,EAAE,EACvD,GAAG;IAEH,OAAO,CACL,+BAAO,GAAG,EAAE,GAAG,iBAAe,MAAM,mCAA2B,UAAU,IACtE,QAAQ,CACH,CACT,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,WAAW,CAAA"}

package/dist/molecules/Table/TableHead.d.ts

@@ -1,14 +1,12 @@
-import type { HTMLAttributes } from 'react';
 import React from 'react';
+import type { HTMLAttributes } from 'react';
 export interface TableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {
     /**
      * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
      */
     testId?: string;
-    /**
-     * Children for TableHead components.
-     */
-    children: React.ReactNode;
 }
-declare const TableHead: React.ForwardRefExoticComponent<TableHeadProps & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableHead: React.ForwardRefExoticComponent<TableHeadProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLTableSectionElement>>;
 export default TableHead;

package/dist/molecules/Table/TableHead.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHead.js","sourceRoot":"","sources":["../../../src/molecules/Table/TableHead.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAczC,MAAM,SAAS,GAAG,UAAU,CAC1B,SAAS,SAAS,CAChB,EAAE,QAAQ,EAAE,MAAM,GAAG,eAAe,EAAE,GAAG,UAAU,EAAE,EACrD,GAAG;IAEH,OAAO,CACL,+BAAO,GAAG,EAAE,GAAG,iBAAe,MAAM,iCAAyB,UAAU,IACpE,QAAQ,CACH,CACT,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,SAAS,CAAA"}
+{"version":3,"file":"TableHead.js","sourceRoot":"","sources":["../../../src/molecules/Table/TableHead.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAWzC,MAAM,SAAS,GAAG,UAAU,CAG1B,SAAS,SAAS,CAClB,EAAE,QAAQ,EAAE,MAAM,GAAG,eAAe,EAAE,GAAG,UAAU,EAAE,EACrD,GAAG;IAEH,OAAO,CACL,+BAAO,GAAG,EAAE,GAAG,iBAAe,MAAM,iCAAyB,UAAU,IACpE,QAAQ,CACH,CACT,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,SAAS,CAAA"}

package/dist/molecules/Table/TableRow.d.ts

@@ -1,14 +1,12 @@
-import type { HTMLAttributes } from 'react';
 import React from 'react';
+import type { HTMLAttributes } from 'react';
 export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
     /**
      * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
      */
     testId?: string;
-    /**
-     * Children for TableRow components.
-     */
-    children: React.ReactNode;
 }
-declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLTableRowElement>>;
 export default TableRow;

package/dist/molecules/Table/TableRow.js

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-const TableRow = forwardRef(function TableRow({ testId = 'fs-table-row', children, ...otherProps }, ref) {
+const TableRow = forwardRef(function TableRow({ children, testId = 'fs-table-row', ...otherProps }, ref) {
     return (React.createElement("tr", { ref: ref, "data-fs-table-row": true, "data-testid": testId, ...otherProps }, children));
 });
 export default TableRow;

package/dist/molecules/Table/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../../../src/molecules/Table/TableRow.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAazC,MAAM,QAAQ,GAAG,UAAU,CACzB,SAAS,QAAQ,CACf,EAAE,MAAM,GAAG,cAAc,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EACpD,GAAG;IAEH,OAAO,CACL,4BAAI,GAAG,EAAE,GAAG,4CAAiC,MAAM,KAAM,UAAU,IAChE,QAAQ,CACN,CACN,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../../../src/molecules/Table/TableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAUzC,MAAM,QAAQ,GAAG,UAAU,CAGzB,SAAS,QAAQ,CAAC,EAAE,QAAQ,EAAE,MAAM,GAAG,cAAc,EAAE,GAAG,UAAU,EAAE,EAAE,GAAG;IAC3E,OAAO,CACL,4BAAI,GAAG,EAAE,GAAG,4CAAiC,MAAM,KAAM,UAAU,IAChE,QAAQ,CACN,CACN,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.39-alpha.0",
+  "version": "2.0.42-alpha.0",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
   "author": "Emerson Laurentino @emersonlaurentino",
@@ -30,5 +30,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "37b0633963fb020169849932535505cad22f8fd6"
+  "gitHead": "47ce2b7c180d5a90d1ebadd7628ee47d0ceb1280"
 }

package/src/assets/ArrowElbowDownRight.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import type { FC } from 'react'
+
+// Icon from Phosphor Icons
+const ArrowElbowDownRight: FC = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg" 
+    viewBox="0 0 256 256" 
+    fill="currentColor"
+    strokeWidth="16"
+    width={24}
+    height={24}
+  >
+    <rect width="256" height="256" fill="none"></rect>
+    <polyline 
+      points="160 128 208 176 160 224" 
+      fill="none" 
+      stroke="currentColor" 
+      stroke-linecap="round" 
+      stroke-linejoin="round" 
+      stroke-width="16"
+    ></polyline>
+    <polyline 
+      points="64 32 64 176 208 176" 
+      fill="none" 
+      stroke="currentColor" 
+      stroke-linecap="round" 
+      stroke-linejoin="round" 
+      stroke-width="16"
+    ></polyline>
+  </svg>
+)
+
+export default ArrowElbowDownRight

package/src/assets/index.ts

@@ -1,4 +1,5 @@
 export { default as ArrowRight } from './ArrowRight'
+export { default as ArrowElbowDownRight } from './ArrowElbowDownRight'
 export { default as CaretDown } from './CaretDown'
 export { default as Checked } from './Checked'
 export { default as House } from './House'

package/src/index.ts

@@ -48,6 +48,18 @@ export { default as IconButton } from './molecules/IconButton'
 export type { IconButtonProps } from './molecules/IconButton'
 export { default as DiscountBadge } from './molecules/DiscountBadge'
 export type { DiscountBadgeProps } from './molecules/DiscountBadge'
+export {
+  default as Dropdown,
+  DropdownButton,
+  DropdownItem,
+  DropdownMenu,
+} from './molecules/Dropdown'
+export type {
+  DropdownProps,
+  DropdownButtonProps,
+  DropdownItemProps,
+  DropdownMenuProps,
+} from './molecules/Dropdown'
 export { default as InputField } from './molecules/InputField'
 export type { InputFieldProps } from './molecules/InputField'
 export { default as LinkButton } from './molecules/LinkButton'

package/src/molecules/Dropdown/Dropdown.tsx

@@ -0,0 +1,101 @@
+import type { ReactNode } from 'react'
+import React, { useRef, useMemo, useState, useEffect, useCallback } from 'react'
+
+import DropdownContext from '../Dropdown/contexts/DropdownContext'
+
+export type DropdownProps = {
+  children: ReactNode
+  onDismiss?(): void
+  isOpen?: boolean
+  id?: string
+}
+
+const Dropdown = ({
+  children,
+  isOpen: isOpenDefault = false,
+  onDismiss,
+  id = 'fs-dropdown',
+}: DropdownProps) => {
+  const [isOpen, setIsOpen] = useState(isOpenDefault)
+  const dropdownItemsRef = useRef<HTMLButtonElement[]>([])
+  const selectedDropdownItemIndexRef = useRef(0)
+  const dropdownButtonRef = useRef<HTMLButtonElement>(null)
+
+  const close = useCallback(() => {
+    setIsOpen(false)
+    onDismiss?.()
+  }, [onDismiss])
+
+  const open = () => {
+    setIsOpen(true)
+  }
+
+  const toggle = useCallback(() => {
+    setIsOpen((old) => {
+      if (old) {
+        onDismiss?.()
+        dropdownButtonRef.current?.focus()
+      }
+
+      return !old
+    })
+  }, [onDismiss])
+
+  useEffect(() => {
+    setIsOpen(isOpenDefault)
+  }, [isOpenDefault])
+
+  useEffect(() => {
+    isOpen && dropdownItemsRef?.current[0]?.focus()
+  }, [isOpen])
+
+  useEffect(() => {
+    let firstClick = true
+
+    const event = (e: MouseEvent) => {
+      const someItemWasClicked = dropdownItemsRef?.current.some(
+        (item) => e.target === item
+      )
+
+      if (firstClick) {
+        firstClick = false
+
+        return
+      }
+
+      !someItemWasClicked && close()
+    }
+
+    if (isOpen) {
+      document.addEventListener('click', event)
+    } else {
+      document.removeEventListener('click', event)
+    }
+
+    return () => {
+      document.removeEventListener('click', event)
+    }
+  }, [close, isOpen])
+
+  const value = useMemo(() => {
+    return {
+      isOpen,
+      close,
+      open,
+      toggle,
+      dropdownButtonRef,
+      onDismiss,
+      selectedDropdownItemIndexRef,
+      dropdownItemsRef,
+      id,
+    }
+  }, [close, id, isOpen, onDismiss, toggle])
+
+  return (
+    <DropdownContext.Provider value={value}>
+      {children}
+    </DropdownContext.Provider>
+  )
+}
+
+export default Dropdown

package/src/molecules/Dropdown/DropdownButton.tsx

@@ -0,0 +1,43 @@
+import React, { forwardRef, useImperativeHandle } from 'react'
+import Button, { ButtonProps } from '../../atoms/Button'
+
+import { useDropdown } from './hooks/useDropdown'
+
+export interface DropdownButtonProps
+  extends Omit<ButtonProps, "variant" | "inverse" >{
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+}
+
+const DropdownButton = forwardRef<HTMLButtonElement, DropdownButtonProps>(
+  function DropdownButton(
+    { children, testId = 'fs-dropdown-button', ...otherProps },
+    ref
+  ) {
+    const { toggle, dropdownButtonRef, isOpen, id } = useDropdown()
+
+    useImperativeHandle(ref, () => dropdownButtonRef!.current!, [
+      dropdownButtonRef,
+    ])
+
+    return (
+      <Button
+        data-fs-dropdown-button
+        onClick={toggle}
+        data-testid={testId}
+        ref={dropdownButtonRef}
+        aria-expanded={isOpen}
+        aria-haspopup="menu"
+        aria-controls={id}
+        variant='tertiary'
+        {...otherProps}
+      >
+        {children}
+      </Button>
+    )
+  }
+)
+
+export default DropdownButton

package/src/molecules/Dropdown/DropdownItem.tsx

@@ -0,0 +1,75 @@
+import type { ButtonHTMLAttributes } from 'react'
+import Icon, { IconProps } from '../../atoms/Icon'
+import React, { useImperativeHandle, forwardRef, useRef, useState } from 'react'
+
+import { useDropdown } from './hooks/useDropdown'
+
+export interface DropdownItemProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * A React component that will be rendered as an icon.
+   */
+  icon?: IconProps["component"]
+}
+
+const DropdownItem = forwardRef<HTMLButtonElement, DropdownItemProps>(
+  function Button(
+    { 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!, [])
+
+    return (
+      <button
+        data-fs-dropdown-item
+        data-testid={testId}
+        ref={addToRefs}
+        onFocus={onFocusItem}
+        onMouseEnter={onFocusItem}
+        onClick={handleOnClickItem}
+        role="menuitem"
+        tabIndex={-1}
+        data-index={dropdownItemIndex}
+        {...otherProps}
+      >
+        {icon && <Icon data-fs-dropdown-item-icon component={icon} />}
+        {children}
+      </button>
+    )
+  }
+)
+
+export default DropdownItem

package/src/molecules/Dropdown/DropdownMenu.tsx

@@ -0,0 +1,154 @@
+import type {
+  AriaAttributes,
+  KeyboardEvent,
+  PropsWithChildren,
+  MouseEvent,
+  ReactNode,
+  DetailedHTMLProps,
+  HTMLAttributes
+} from 'react'
+import React from 'react'
+import { createPortal } from 'react-dom'
+
+import { useDropdown } from './hooks/useDropdown'
+import { useDropdownPosition } from './hooks/useDropdownPosition'
+
+//TODO: Replace by ModalContentProps when Modal component be brought
+type BaseModalProps = Omit<
+DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+'ref' | 'onClick'
+>
+
+export interface DropdownMenuProps extends BaseModalProps {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * Identifies the element (or elements) that labels the current element.
+   * @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'
+
+  children: ReactNode[] | ReactNode
+}
+
+/*
+ * This component is based on @reach/dialog.
+ * https://github.com/reach/reach-ui/blob/main/packages/dialog/src/index.tsx
+ * https://reach.tech/dialog
+ */
+
+const DropdownMenu = ({
+  children,
+  testId = 'fs-dropdown-menu',
+  size = 'regular',
+  style,
+  ...otherProps
+}: PropsWithChildren<DropdownMenuProps>) => {
+  const { isOpen, close, dropdownItemsRef, selectedDropdownItemIndexRef, dropdownButtonRef, id } =
+    useDropdown()
+
+  const dropdownPosition = useDropdownPosition()
+
+  const childrenLength = React.Children.toArray(children).length
+
+  const handleDownPress = () => {
+    if (selectedDropdownItemIndexRef!.current < childrenLength - 1) {
+      selectedDropdownItemIndexRef!.current++
+    } else {
+      selectedDropdownItemIndexRef!.current = 0
+    }
+
+    dropdownItemsRef?.current[selectedDropdownItemIndexRef!.current]?.focus()
+  }
+
+  const handleUpPress = () => {
+    if (selectedDropdownItemIndexRef!.current > 0) {
+      selectedDropdownItemIndexRef!.current--
+    } else {
+      selectedDropdownItemIndexRef!.current = childrenLength - 1
+    }
+
+    dropdownItemsRef?.current[selectedDropdownItemIndexRef!.current]?.focus()
+  }
+
+  const handleHomePress = () => {
+    selectedDropdownItemIndexRef!.current = 0
+    dropdownItemsRef?.current[selectedDropdownItemIndexRef!.current]?.focus()
+  }
+
+  const handleEndPress = () => {
+    selectedDropdownItemIndexRef!.current = childrenLength - 1
+    dropdownItemsRef?.current[selectedDropdownItemIndexRef!.current]?.focus()
+  }
+
+  const handleEscapePress = () => {
+    close?.()
+    dropdownButtonRef?.current?.focus()
+  }
+
+  const handleBackdropKeyDown = (event: KeyboardEvent) => {
+    if (event.defaultPrevented || event.key === 'Enter') {
+      return
+    }
+
+    event.preventDefault()
+
+    event.key === 'Escape' && handleEscapePress()
+
+    event.key === 'ArrowDown' && handleDownPress()
+
+    event.key === 'ArrowUp' && handleUpPress()
+
+    event.key === 'Home' && handleHomePress()
+
+    event.key === 'End' && handleEndPress()
+
+    event.stopPropagation()
+  }
+
+  const clearChildrenReferences = () => {
+    dropdownItemsRef!.current = []
+
+    return null
+  }
+
+  return isOpen
+    ? createPortal(
+        <div
+          role="presentation"
+          data-fs-dropdown-overlay
+          onKeyDown={handleBackdropKeyDown}
+          data-testid={`${testId}-overlay`}
+        >
+          <div
+            role="menu"
+            aria-orientation="vertical"
+            data-fs-dropdown-menu
+            data-fs-dropdown-menu-size={size}
+            data-testid={testId}
+            style={{ ...dropdownPosition, ...style }}
+            id={id}
+            {...otherProps}
+          >
+            {children}
+          </div>
+        </div>,
+        document.body
+      )
+    : clearChildrenReferences()
+}
+
+export default DropdownMenu

package/src/molecules/Dropdown/contexts/DropdownContext.ts

@@ -0,0 +1,53 @@
+import { createContext } from 'react'
+
+export type DropdownContextState = {
+  /**
+   * Control de Dropdown state as Opened (true) or Closed (false).
+   */
+  isOpen: boolean
+  /**
+   * Reference to DropdownButton, used to calculate a position for the DropdownMenu.
+   */
+  dropdownButtonRef: React.RefObject<HTMLButtonElement> | null
+  /**
+   * Reference to a selected DropdownItem, used to manipulate focus.
+   */
+  selectedDropdownItemIndexRef: React.MutableRefObject<number> | null
+  /**
+   * Array of References to dropdownItems in a DropdownMenu.
+   */
+  dropdownItemsRef: React.MutableRefObject<HTMLButtonElement[]> | null
+  /**
+   * Close DropdownMenu event inherited from Modal.
+   */
+  onDismiss?(): void
+  /**
+   * Function responsible for close the DropdownMenu in this context.
+   */
+  close?(): void
+  /**
+   * Function responsible for open the DropdownMenu in this context.
+   */
+  open?(): void
+  /**
+   * Function responsible for switch the the DropdownMenu state in this context.
+   */
+  toggle?(): void
+
+  /**
+   * Identifier to be used in aria-controls
+   */
+  id: string
+}
+
+const defaultState: DropdownContextState = {
+  isOpen: false,
+  dropdownButtonRef: null,
+  selectedDropdownItemIndexRef: null,
+  dropdownItemsRef: null,
+  id: 'fs-dropdown',
+}
+
+const DropdownContext = createContext<DropdownContextState>(defaultState)
+
+export default DropdownContext

package/src/molecules/Dropdown/hooks/useDropdown.ts

@@ -0,0 +1,18 @@
+import { useContext } from 'react'
+
+import type { DropdownContextState } 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)
+
+  if (context === undefined) {
+    throw new Error('Do not use useDropdown hook outside the Dropdown context.')
+  }
+
+  return context
+}

package/src/molecules/Dropdown/hooks/useDropdownPosition.ts

@@ -0,0 +1,33 @@
+import { useDropdown } from './useDropdown'
+
+type DropdownPosition = 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 { dropdownButtonRef } = useDropdown()
+
+  // Necessary to use this component in SSR
+  const isBrowser = typeof window !== 'undefined'
+
+  const buttonRect = dropdownButtonRef?.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,
+  }
+}

package/src/molecules/Dropdown/index.ts

@@ -0,0 +1,11 @@
+export { default } from './Dropdown'
+export type { DropdownProps } from './Dropdown'
+
+export { default as DropdownButton } from './DropdownButton'
+export type { DropdownButtonProps } from './DropdownButton'
+
+export { default as DropdownItem } from './DropdownItem'
+export type { DropdownItemProps } from './DropdownItem'
+
+export { default as DropdownMenu } from './DropdownMenu'
+export type { DropdownMenuProps } from './DropdownMenu'