@faststore/components 3.0.134 → 3.0.141

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