@faststore/components 3.0.135 → 3.0.144

package/dist/esm/molecules/Dropdown/hooks/useDropdownPosition.js

@@ -1,25 +1,62 @@
+import { useEffect, useState } from 'react';
 import { useDropdown } from './useDropdown';
 /**
  * Hook used to find the DropdownMenu position in relation to DropdownButton
  * @returns Style with positions.
  */
-export const useDropdownPosition = () => {
-    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,
-    };
+export const useDropdownPosition = (align = 'left') => {
+    const { dropdownTriggerRef, isOpen } = useDropdown();
+    const [positionProps, setPositionProps] = useState({
+        top: 0,
+        left: 0,
+        right: 'auto',
+        transform: 'none',
+        loading: true
+    });
+    useEffect(() => {
+        const updateMenuPosition = () => {
+            // Necessary to use this component in SSR
+            const isBrowser = typeof window !== 'undefined';
+            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;
+            const scrollLeft = isBrowser ? document?.documentElement?.scrollLeft : 0;
+            const topPosition = topLevel + topOffset + scrollTop;
+            let leftPosition = 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);
+        }
+        // Cleanup listener on unmount or close
+        return () => {
+            window.removeEventListener('resize', updateMenuPosition);
+        };
+    }, [dropdownTriggerRef, isOpen, align]);
+    return { ...positionProps, position: 'absolute' };
 };
 //# sourceMappingURL=useDropdownPosition.js.map

package/dist/esm/molecules/Dropdown/hooks/useDropdownPosition.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDropdownPosition.js","sourceRoot":"","sources":["../../../../../src/molecules/Dropdown/hooks/useDropdownPosition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAI3C;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAqB,EAAE;IACxD,MAAM,EAAE,iBAAiB,EAAE,GAAG,WAAW,EAAE,CAAA;IAE3C,yCAAyC;IACzC,MAAM,SAAS,GAAG,OAAO,MAAM,KAAK,WAAW,CAAA;IAE/C,MAAM,UAAU,GAAG,iBAAiB,EAAE,OAAO,EAAE,qBAAqB,EAAE,CAAA;IACtE,MAAM,QAAQ,GAAG,UAAU,EAAE,GAAG,IAAI,CAAC,CAAA;IACrC,MAAM,SAAS,GAAG,UAAU,EAAE,MAAM,IAAI,CAAC,CAAA;IACzC,MAAM,SAAS,GAAG,UAAU,EAAE,IAAI,IAAI,CAAC,CAAA;IAEvC,uFAAuF;IACvF,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,eAAe,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;IACtE,MAAM,UAAU,GAAG,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,eAAe,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAA;IAExE,MAAM,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAA;IAEpD,MAAM,YAAY,GAAG,SAAS,GAAG,UAAU,CAAA;IAE3C,OAAO;QACL,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,WAAW;QAChB,IAAI,EAAE,YAAY;KACnB,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"useDropdownPosition.js","sourceRoot":"","sources":["../../../../../src/molecules/Dropdown/hooks/useDropdownPosition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAM3C;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,QAAqC,MAAM,EAAoB,EAAE;IACnG,MAAM,EAAE,kBAAkB,EAAE,MAAM,EAAE,GAAG,WAAW,EAAE,CAAA;IAEpD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC;QACjD,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAgC;QACtC,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,MAAM;QACjB,OAAO,EAAE,IAAI;KACd,CAAC,CAAA;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,kBAAkB,GAAG,GAAG,EAAE;YAC9B,yCAAyC;YACzC,MAAM,SAAS,GAAG,OAAO,MAAM,KAAK,WAAW,CAAA;YAE/C,IAAI,CAAC,kBAAkB,EAAE,OAAO;gBAAE,OAAM;YAExC,MAAM,UAAU,GAAG,kBAAkB,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAA;YACrE,MAAM,QAAQ,GAAG,UAAU,EAAE,GAAG,IAAI,CAAC,CAAA;YACrC,MAAM,SAAS,GAAG,UAAU,EAAE,MAAM,IAAI,CAAC,CAAA;YACzC,MAAM,SAAS,GAAG,UAAU,EAAE,IAAI,IAAI,CAAC,CAAA;YACvC,MAAM,WAAW,GAAG,UAAU,EAAE,KAAK,IAAI,CAAC,CAAA;YAE1C,uFAAuF;YACvF,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,eAAe,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;YACtE,MAAM,UAAU,GAAG,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,eAAe,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAA;YAExE,MAAM,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAA;YAEpD,IAAI,YAAY,GAAgC,SAAS,GAAG,UAAU,CAAA;YACtE,IAAI,aAAa,GAAG,MAAM,CAAA;YAC1B,IAAI,SAAS,GAAG,MAAM,CAAA;YAEtB,IAAI,KAAK,KAAK,OAAO,EAAE;gBACrB,aAAa,GAAG,GAAG,QAAQ,CAAC,eAAe,CAAC,WAAW,GAAG,SAAS,GAAG,WAAW,IAAI,CAAA;gBACrF,YAAY,GAAG,MAAM,CAAA;aACtB;iBAAM,IAAI,KAAK,KAAK,QAAQ,EAAE;gBAC7B,YAAY,GAAG,SAAS,GAAG,CAAC,WAAW,GAAG,CAAC,CAAC,GAAG,UAAU,CAAA;gBACzD,SAAS,GAAG,kBAAkB,CAAA;aAC/B;YAED,gBAAgB,CAAC;gBACf,GAAG,EAAE,WAAW;gBAChB,IAAI,EAAE,YAAY;gBAClB,KAAK,EAAE,aAAa;gBACpB,SAAS;gBACT,OAAO,EAAE,KAAK;aACf,CAAC,CAAA;QACJ,CAAC,CAAA;QAED,IAAI,MAAM,EAAE;YACV,kCAAkC;YAClC,kBAAkB,EAAE,CAAA;YACpB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAA;SACtD;QAED,uCAAuC;QACvC,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAA;QAC1D,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,kBAAkB,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAA;IAEvC,OAAO,EAAE,GAAG,aAAa,EAAE,QAAQ,EAAE,UAAmB,EAAE,CAAA;AAC5D,CAAC,CAAA"}

package/dist/esm/molecules/Dropdown/hooks/useDropdownTrigger.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+type UseDropdownTriggerProps<T extends HTMLElement = HTMLElement> = {
+    triggerRef: React.ForwardedRef<T>;
+    label?: string;
+};
+export declare const useDropdownTrigger: <T extends HTMLElement = HTMLElement>({ triggerRef, }: UseDropdownTriggerProps<T>) => {
+    onClick: (() => void) | undefined;
+    ref: ((ref: T | null) => void) | undefined;
+    'aria-expanded': boolean;
+    'aria-controls': string;
+    'aria-haspopup': "menu";
+};
+export {};

package/dist/esm/molecules/Dropdown/hooks/useDropdownTrigger.js

@@ -0,0 +1,16 @@
+import { useDropdown } from './useDropdown';
+import { useImperativeHandle } from 'react';
+export const useDropdownTrigger = ({ triggerRef, }) => {
+    const { toggle, dropdownTriggerRef, addDropdownTriggerRef, isOpen, id } = useDropdown();
+    useImperativeHandle(triggerRef, () => dropdownTriggerRef.current, [
+        dropdownTriggerRef,
+    ]);
+    return {
+        onClick: toggle,
+        ref: addDropdownTriggerRef,
+        'aria-expanded': isOpen,
+        'aria-controls': id,
+        'aria-haspopup': 'menu',
+    };
+};
+//# sourceMappingURL=useDropdownTrigger.js.map

package/dist/esm/molecules/Dropdown/hooks/useDropdownTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDropdownTrigger.js","sourceRoot":"","sources":["../../../../../src/molecules/Dropdown/hooks/useDropdownTrigger.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAc,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAOlD,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAsC,EACtE,UAAU,GACiB,EAAE,EAAE;IAC/B,MAAM,EAAE,MAAM,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,EAAE,EAAE,EAAE,GACrE,WAAW,EAAK,CAAA;IAElB,mBAAmB,CAAC,UAAU,EAAE,GAAG,EAAE,CAAC,kBAAmB,CAAC,OAAQ,EAAE;QAClE,kBAAkB;KACnB,CAAC,CAAA;IAEF,OAAO;QACL,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,qBAAqB;QAC1B,eAAe,EAAE,MAAM;QACvB,eAAe,EAAE,EAAE;QACnB,eAAe,EAAE,MAAe;KACjC,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/molecules/QuantitySelector/QuantitySelector.js

@@ -43,11 +43,15 @@ const QuantitySelector = ({ max, min = 1, unitMultiplier = 1, useUnitMultiplier,
         initial && setQuantity(initial);
     }, [initial]);
     const changeInputValue = (e) => {
-        setQuantity(Number(e.currentTarget.value));
+        const numericValue = e.target.value.replace(/\D/g, '');
+        setQuantity(Number(numericValue));
     };
     return (React.createElement("div", { "data-fs-quantity-selector": disabled ? 'disabled' : 'true', "data-testid": testId, ...otherProps },
         React.createElement(IconButton, { "data-quantity-selector-button": "left", icon: React.createElement(Icon, { name: "Minus", width: 16, height: 16, weight: "bold" }), "aria-label": "Decrement Quantity", "aria-controls": "quantity-selector-input", disabled: isLeftDisabled || disabled, onClick: decrease, testId: `${testId}-left-button`, size: "small" }),
-        React.createElement(Input, { "data-quantity-selector-input": true, id: "quantity-selector-input", "aria-label": "Quantity", value: useUnitMultiplier ? multipliedUnit : quantity, onChange: changeInputValue, onBlur: validateBlur, disabled: disabled }),
+        React.createElement(Input, { "data-quantity-selector-input": true, id: "quantity-selector-input", "aria-label": "Quantity", value: useUnitMultiplier ? multipliedUnit : quantity, onChange: changeInputValue, onBlur: validateBlur, onInput: (event) => {
+                const input = event.currentTarget;
+                input.value = input.value.replace(/\D/g, '');
+            }, disabled: disabled }),
         React.createElement(IconButton, { "data-quantity-selector-button": "right", "aria-controls": "quantity-selector-input", "aria-label": "Increment Quantity", disabled: isRightDisabled || disabled, icon: React.createElement(Icon, { name: "Plus", width: 16, height: 16, weight: "bold" }), onClick: increase, testId: `${testId}-right-button`, size: "small" })));
 };
 export default QuantitySelector;

package/dist/esm/molecules/QuantitySelector/QuantitySelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuantitySelector.js","sourceRoot":"","sources":["../../../../src/molecules/QuantitySelector/QuantitySelector.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"QuantitySelector.js","sourceRoot":"","sources":["../../../../src/molecules/QuantitySelector/QuantitySelector.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "3.0.135",
+  "version": "3.0.144",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "typings": "dist/esm/index.d.ts",
@@ -52,5 +52,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "611283638dc01f55a65d0b5fd01e4a0163d53f4b"
+  "gitHead": "90c18b6ff88534e99b479e2ece4e156af16b011d"
 }

package/src/atoms/Button/index.ts

@@ -1,2 +1,2 @@
 export { default } from './Button'
-export type { ButtonProps } from './Button'
+export type { ButtonProps, Variant as ButtonVariant, Size as ButtonSize, IconPosition as ButtonIconPosition } from './Button'

package/src/molecules/Dropdown/Dropdown.tsx

@@ -20,38 +20,47 @@ 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<HTMLElement[]>([])
   const selectedDropdownItemIndexRef = useRef(0)
-  const dropdownButtonRef = useRef<HTMLButtonElement>(null)
+  const dropdownTriggerRef = useRef<HTMLElement | 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()
@@ -61,8 +70,8 @@ const Dropdown = ({
     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 +80,7 @@ const Dropdown = ({
         return
       }
 
-      !someItemWasClicked && close()
+      !wasSomeItemClicked && close()
     }
 
     if (isOpen) {
@@ -91,13 +100,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}>

package/src/molecules/Dropdown/DropdownButton.tsx

@@ -1,51 +1,64 @@
-import React, { forwardRef, useImperativeHandle, AriaAttributes } from 'react'
-import Button, { ButtonProps } from '../../atoms/Button'
-
-import { useDropdown } from './hooks/useDropdown'
+import React, { cloneElement, forwardRef, ReactNode } from 'react'
+import Button, { ButtonProps, ButtonIconPosition } 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
   /**
-   * For accessibility purposes, add an ARIA label to the element when it doesn't have a label.
+   * Replace the default rendered element with the provided child element, 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
    */
-  'aria-label'?: AriaAttributes['aria-label']
+  iconPosition?: ButtonIconPosition
 }
 
 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>
+        )}
+      </>
     )
   }
 )

package/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, { cloneElement, forwardRef } from 'react'
 
-import { useDropdown } from './hooks/useDropdown'
+import { useDropdownItem } from './hooks/useDropdownItem'
 
 export interface DropdownItemProps
   extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -10,63 +10,55 @@ export interface DropdownItemProps
    */
   testId?: string
   /**
+   * @deprecated
    * 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 event when the component is clicked.
+   */
+  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 { 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?.()
-    }
+    const itemProps = useDropdownItem({ ref, onClick, dismissOnClick })
 
-    useImperativeHandle(ref, () => dropdownItemRef.current!, [])
+    const asChildrenItem = React.isValidElement(children)
+      ? cloneElement(children, { ...itemProps, ...children.props })
+      : children
 
     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}
-        {children}
-      </button>
+      <>
+        {asChild ? (
+          asChildrenItem
+        ) : (
+          <button
+            data-fs-dropdown-item
+            data-testid={testId}
+            {...itemProps}
+            {...otherProps}
+          >
+            {!!icon && icon}
+            {children}
+          </button>
+        )}
+      </>
     )
   }
 )

package/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,13 +49,20 @@ const DropdownMenu = ({
   children,
   testId = 'fs-dropdown-menu',
   size = 'regular',
+  align = 'left',
   style,
   ...otherProps
 }: PropsWithChildren<DropdownMenuProps>) => {
-  const { isOpen, close, dropdownItemsRef, selectedDropdownItemIndexRef, dropdownButtonRef, id } =
-    useDropdown()
+  const {
+    isOpen,
+    close,
+    dropdownItemsRef,
+    selectedDropdownItemIndexRef,
+    dropdownTriggerRef,
+    id,
+  } = useDropdown()
 
-  const dropdownPosition = useDropdownPosition()
+  const { loading: loadingPosition, ...dropdownPosition } = useDropdownPosition(align)
 
   const childrenLength = React.Children.toArray(children).length
 
@@ -89,25 +98,56 @@ 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') {
+    if (event.defaultPrevented || event.key === 'Enter' || event.key === ' ') {
       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()
   }
@@ -118,7 +158,7 @@ const DropdownMenu = ({
     return null
   }
 
-  return isOpen
+  return (isOpen && !loadingPosition)
     ? createPortal(
         <div
           role="presentation"