@faststore/components 3.0.135 → 3.0.144

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,
+  }
+}

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

@@ -1,33 +1,76 @@
+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' | 'right' | 'transform'>
 
 /**
  * Hook used to find the DropdownMenu position in relation to DropdownButton
  * @returns Style with positions.
  */
-export const useDropdownPosition = (): DropdownPosition => {
-  const { dropdownButtonRef } = useDropdown()
+export const useDropdownPosition = (align: 'left' | 'center' | 'right' = 'left'): DropdownPosition => {
+  const { dropdownTriggerRef, isOpen } = useDropdown()
 
-  // Necessary to use this component in SSR
-  const isBrowser = typeof window !== 'undefined'
+  const [positionProps, setPositionProps] = useState({
+    top: 0,
+    left: 0 as React.CSSProperties['left'],
+    right: 'auto',
+    transform: 'none',
+    loading: true
+  })
 
-  const buttonRect = dropdownButtonRef?.current?.getBoundingClientRect()
-  const topLevel = buttonRect?.top ?? 0
-  const topOffset = buttonRect?.height ?? 0
-  const leftLevel = buttonRect?.left ?? 0
+  useEffect(() => {
+    const updateMenuPosition = () => {
+      // Necessary to use this component in SSR
+      const isBrowser = typeof window !== 'undefined'
 
-  // 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
+      if (!dropdownTriggerRef?.current) return
 
-  const topPosition = topLevel + topOffset + scrollTop
+      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
 
-  const leftPosition = leftLevel + scrollLeft
+      // 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
 
-  return {
-    position: 'absolute',
-    top: topPosition,
-    left: leftPosition,
-  }
+      const topPosition = topLevel + topOffset + scrollTop
+
+      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)
+    }
+
+    // Cleanup listener on unmount or close
+    return () => {
+      window.removeEventListener('resize', updateMenuPosition)
+    }
+  }, [dropdownTriggerRef, isOpen, align])
+
+  return { ...positionProps, position: 'absolute' as const }
 }

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

@@ -0,0 +1,26 @@
+import { useDropdown } from './useDropdown'
+import React, { useImperativeHandle } from 'react'
+
+type UseDropdownTriggerProps<T extends HTMLElement = HTMLElement> = {
+  triggerRef: React.ForwardedRef<T>
+  label?: string
+}
+
+export const useDropdownTrigger = <T extends HTMLElement = HTMLElement>({
+  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,
+  }
+}

package/src/molecules/QuantitySelector/QuantitySelector.tsx

@@ -113,7 +113,8 @@ const QuantitySelector = ({
   }, [initial])
 
   const changeInputValue = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setQuantity(Number(e.currentTarget.value))
+    const numericValue = e.target.value.replace(/\D/g, '')
+    setQuantity(Number(numericValue))
   }
 
   return (
@@ -139,6 +140,10 @@ const QuantitySelector = ({
         value={useUnitMultiplier ? multipliedUnit : quantity}
         onChange={changeInputValue}
         onBlur={validateBlur}
+        onInput={(event: React.FormEvent<HTMLInputElement>) => {
+          const input = event.currentTarget
+          input.value = input.value.replace(/\D/g, '')
+        }}
         disabled={disabled}
       />
       <IconButton