@faststore/ui 2.0.37-alpha.0 → 2.0.41-alpha.0

package/src/components/molecules/Dropdown/Dropdown.tsx

@@ -1,102 +0,0 @@
-import type { ReactNode } from 'react'
-import React, { useRef, useMemo, useState, useEffect, useCallback } from 'react'
-
-import DropdownContext from './contexts/DropdownContext'
-
-export type DropdownProps = {
-  children: ReactNode
-  onDismiss?(): void
-  isOpen?: boolean
-  id?: string
-}
-
-const Dropdown = ({
-  children,
-  isOpen: isOpenDefault = false,
-  onDismiss,
-  id = 'store-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?.()
-    dropdownButtonRef.current?.focus()
-  }, [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/components/molecules/Dropdown/DropdownButton.tsx

@@ -1,42 +0,0 @@
-import type { ButtonHTMLAttributes } from 'react'
-import React, { forwardRef, useImperativeHandle } from 'react'
-
-import { useDropdown } from './hooks/useDropdown'
-
-export interface DropdownButtonProps
-  extends ButtonHTMLAttributes<HTMLButtonElement> {
-  /**
-   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-   */
-  testId?: string
-}
-
-const DropdownButton = forwardRef<HTMLButtonElement, DropdownButtonProps>(
-  function Button(
-    { children, testId = 'store-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}
-        {...otherProps}
-      >
-        {children}
-      </button>
-    )
-  }
-)
-
-export default DropdownButton

package/src/components/molecules/Dropdown/DropdownItem.tsx

@@ -1,69 +0,0 @@
-import type { ButtonHTMLAttributes } from 'react'
-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
-}
-
-const DropdownItem = forwardRef<HTMLButtonElement, DropdownItemProps>(
-  function Button(
-    { children, onClick, testId = 'store-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}
-      >
-        {children}
-      </button>
-    )
-  }
-)
-
-export default DropdownItem

package/src/components/molecules/Dropdown/DropdownMenu.tsx

@@ -1,139 +0,0 @@
-import type {
-  AriaAttributes,
-  KeyboardEvent,
-  PropsWithChildren,
-  MouseEvent,
-  ReactNode,
-} from 'react'
-import React from 'react'
-import { createPortal } from 'react-dom'
-
-import type { ModalContentProps } from '../Modal/ModalContent'
-import { useDropdown } from './hooks/useDropdown'
-import { useDropdownPosition } from './hooks/useDropdownPosition'
-
-export interface DropdownMenuProps extends ModalContentProps {
-  /**
-   * 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
-
-  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 = 'store-dropdown-menu',
-  style,
-  ...otherProps
-}: PropsWithChildren<DropdownMenuProps>) => {
-  const { isOpen, close, dropdownItemsRef, selectedDropdownItemIndexRef, 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?.()
-  }
-
-  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-testid={testId}
-            style={{ ...dropdownPosition, ...style }}
-            id={id}
-            {...otherProps}
-          >
-            {children}
-          </div>
-        </div>,
-        document.body
-      )
-    : clearChildrenReferences()
-}
-
-export default DropdownMenu

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

@@ -1,53 +0,0 @@
-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: 'store-dropdown',
-}
-
-const DropdownContext = createContext<DropdownContextState>(defaultState)
-
-export default DropdownContext

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

@@ -1,18 +0,0 @@
-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/components/molecules/Dropdown/hooks/useDropdownPosition.ts

@@ -1,33 +0,0 @@
-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/components/molecules/Dropdown/index.ts

@@ -1,11 +0,0 @@
-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'