@faststore/components 3.0.134 → 3.0.141

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "3.0.134",
+  "version": "3.0.141",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "typings": "dist/esm/index.d.ts",
@@ -35,8 +35,8 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@faststore/eslint-config": "^3.0.134",
-    "@faststore/shared": "^3.0.131",
+    "@faststore/eslint-config": "^3.0.135",
+    "@faststore/shared": "^3.0.135",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^14.3.0",
     "@types/jest-axe": "^3.5.9",
@@ -52,5 +52,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "0c869771785fd9f4326abe55ed4ed22483641f91"
+  "gitHead": "f972d71664e32d3e5b3d74a140e966cd34d73fd7"
 }

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"

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

@@ -1,6 +1,9 @@
 import { createContext } from 'react'
 
-export type DropdownContextState = {
+export type DropdownContextState<
+  T extends HTMLElement = HTMLElement,
+  E extends HTMLElement = HTMLElement,
+> = {
   /**
    * Control de Dropdown state as Opened (true) or Closed (false).
    */
@@ -8,7 +11,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 +19,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.
    */
@@ -33,16 +32,19 @@ 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.
+   */
+  addDropdownTriggerRef?(ref: T | null): void
 }
 
 const defaultState: DropdownContextState = {
   isOpen: false,
-  dropdownButtonRef: null,
+  dropdownTriggerRef: null,
   selectedDropdownItemIndexRef: null,
   dropdownItemsRef: null,
   id: 'fs-dropdown',

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

@@ -7,12 +7,12 @@ 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 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.')
   }
 
-  return context
+  return context as DropdownContextState<T, E>
 }

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

@@ -0,0 +1,56 @@
+import React, { useImperativeHandle, useRef, useState } from 'react'
+
+import { useDropdown } from './useDropdown'
+
+export type UseDropdownItemProps<E extends HTMLElement = HTMLElement> = {
+  ref: React.ForwardedRef<E>
+  onClick?: React.MouseEventHandler<E>
+  dismissOnClick?: boolean
+}
+
+export const useDropdownItem = <E extends HTMLElement = HTMLElement>({
+  ref,
+  onClick,
+  dismissOnClick = true,
+}: 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)
+    dismissOnClick && close?.()
+  }
+
+  useImperativeHandle(ref, () => dropdownItemRef.current!, [])
+
+  return {
+    ref: addToRefs,
+    onFocus: onFocusItem,
+    onMouseEnter: onFocusItem,
+    onClick: handleOnClickItem,
+    role: 'menuitem',
+    tabIndex: -1,
+    'data-index': dropdownItemIndex,
+  }
+}