@faststore/components 3.11.2 → 3.11.4

package/src/molecules/Breadcrumb/Divider.tsx

@@ -1,18 +1,21 @@
-import React from "react"
-import { BreadcrumbBaseProps } from "./BreadcrumbBase"
+import React from 'react'
+import type { BreadcrumbBaseProps } from './BreadcrumbBase'
 
-const Divider = ({ divider, testId }: Omit<BreadcrumbBaseProps, "breadcrumbList">) => {
-    const props = {
-      'data-fs-breadcrumb-divider': true,
-      'aria-hidden': true,
-      'data-testid': `${testId}-divider`,
-    }
-  
-    if (React.isValidElement(divider)) {
-      return React.cloneElement(divider, props)
-    }
-  
-    return <span {...props}>{divider ?? '/'}</span>
+const Divider = ({
+  divider,
+  testId,
+}: Omit<BreadcrumbBaseProps, 'breadcrumbList'>) => {
+  const props = {
+    'data-fs-breadcrumb-divider': true,
+    'aria-hidden': true,
+    'data-testid': `${testId}-divider`,
+  }
+
+  if (React.isValidElement(divider)) {
+    return React.cloneElement(divider, props)
+  }
+
+  return <span {...props}>{divider ?? '/'}</span>
 }
 
 export default Divider

package/src/molecules/Breadcrumb/ListItem.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react'
-import { BreadcrumbBaseProps } from './BreadcrumbBase'
+import React, { type ReactNode } from 'react'
+import type { BreadcrumbBaseProps } from './BreadcrumbBase'
 import Divider from './Divider'
 
 type ListItemProps = {

package/src/molecules/Card/Card.tsx

@@ -1,53 +1,64 @@
-import type { HTMLAttributes } from "react";
+import type { HTMLAttributes } from 'react'
 import React, { forwardRef } from 'react'
 
 import { IconButton, Icon } from '../..'
 
-export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
+export interface CardProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
   /**
-  * Specifies the text to be loaded into the header.
-  */
+   * Specifies the text to be loaded into the header.
+   */
   title: string
   /**
-  * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-  */
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
   testId?: string
   /**
-  * Specifies the card max width.
-  */
+   * Specifies the card max width.
+   */
   maxWidth?: string
   /**
-  * Specifies what icon to use following the FastStore Icon sheet.
-  */
+   * Specifies what icon to use following the FastStore Icon sheet.
+   */
   iconName?: string
   /**
-  * Function that should be executed when the icon is clicked
-  */
+   * Function that should be executed when the icon is clicked
+   */
   iconAction?: () => void
 }
 
-const Card = forwardRef<HTMLDivElement, CardProps>(function Card({
-  title,
-  maxWidth,
-  testId = 'fs-card',
-  iconName,
-  iconAction,
-  children,
-  ...otherProps
-}, ref) {
+const Card = forwardRef<HTMLDivElement, CardProps>(function Card(
+  {
+    title,
+    maxWidth,
+    testId = 'fs-card',
+    iconName,
+    iconAction,
+    children,
+    ...otherProps
+  },
+  ref
+) {
   return (
-    <section data-testid={testId} ref={ref} data-fs-card style={{ maxWidth: `${maxWidth}` }} {...otherProps}>
+    <section
+      data-testid={testId}
+      ref={ref}
+      data-fs-card
+      style={{ maxWidth: `${maxWidth}` }}
+      {...otherProps}
+    >
       <div data-fs-card-header>
         <div data-fs-card-title>{title}</div>
         {iconName && (
-          <IconButton icon={<Icon name={iconName} width={20} height={20} />}
-            aria-label={`${title} action`} onClick={iconAction} />
+          <IconButton
+            icon={<Icon name={iconName} width={20} height={20} />}
+            aria-label={`${title} action`}
+            onClick={iconAction}
+          />
         )}
       </div>
-      <div data-fs-card-body>
-        {children}
-      </div>
-    </section >
+      <div data-fs-card-body>{children}</div>
+    </section>
   )
 })
 

package/src/molecules/Carousel/Carousel.tsx

@@ -135,7 +135,7 @@ function Carousel({
       setMarginRight(getComputedStyle(item).getPropertyValue('margin-right'))
 
       setCarouselItemsWidth(
-        Number(item.clientWidth) + parseInt(marginRight, 10) + 1
+        Number(item.clientWidth) + Number.parseInt(marginRight, 10) + 1
       )
     }
   }, [carouselItemsWidth])
@@ -270,7 +270,7 @@ function Carousel({
       return
     }
 
-    let scrollOffset = index * carouselItemsWidth * itemsPerPage
+    const scrollOffset = index * carouselItemsWidth * itemsPerPage
 
     carouselTrackRef.current?.scrollTo({
       left: scrollOffset,

package/src/molecules/Carousel/CarouselItem.tsx

@@ -1,6 +1,6 @@
 import type { CSSProperties, HTMLAttributes, PropsWithChildren } from 'react'
 import React from 'react'
-import { SliderState, useSlideVisibility } from '../../hooks'
+import { type SliderState, useSlideVisibility } from '../../hooks'
 
 export interface CarouselItemProps extends HTMLAttributes<HTMLLIElement> {
   index: number
@@ -34,9 +34,10 @@ function CarouselItem({
     })`,
   } as CSSProperties
 
-  const style = isScrollCarousel && state.itemsPerPage > 1
-    ? { ...scrollCarouselStyle }
-    : { ...defaultStyle }
+  const style =
+    isScrollCarousel && state.itemsPerPage > 1
+      ? { ...scrollCarouselStyle }
+      : { ...defaultStyle }
 
   const shouldDisplayItem =
     isScrollCarousel || shouldRenderItem(index - Number(infiniteMode))

package/src/molecules/CartItem/CartItem.tsx

@@ -4,7 +4,7 @@ import React, { forwardRef } from 'react'
 import {
   Icon,
   IconButton,
-  IconButtonProps,
+  type IconButtonProps,
   ProductPrice,
   QuantitySelector,
 } from '../../'
@@ -25,14 +25,14 @@ export interface CartItemProps extends HTMLAttributes<HTMLDivElement> {
    */
   quantity?: number
   /**
-   * Controls by how many units the value advances 
+   * Controls by how many units the value advances
    **/
   unitMultiplier?: number
-    /**
-   * Controls wheter you use or not the unitMultiplier 
-  */
+  /**
+   * Controls wheter you use or not the unitMultiplier
+   */
   useUnitMultiplier?: boolean
-   /** 
+  /**
    * Specifies that this product is unavailable.
    */
   unavailable?: boolean

package/src/molecules/CheckboxField/CheckboxField.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react'
-import Checkbox, { CheckboxProps } from '../../atoms/Checkbox'
+import Checkbox, { type CheckboxProps } from '../../atoms/Checkbox'
 import Label from '../../atoms/Label'
 
 export interface CheckboxFieldProps extends CheckboxProps {

package/src/molecules/DiscountBadge/DiscountBadge.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Badge, BadgeProps } from '../..'
+import { Badge, type BadgeProps } from '../..'
 
 import { useDiscountPercent } from '../DiscountBadge/useDiscountPercent'
 
@@ -45,8 +45,8 @@ const DiscountBadge = ({
     discountPercent <= thresholdLow
       ? 'low'
       : discountPercent <= thresholdHigh
-      ? 'medium'
-      : 'high'
+        ? 'medium'
+        : 'high'
 
   return (
     <Badge

package/src/molecules/Dropdown/DropdownButton.tsx

@@ -1,5 +1,8 @@
-import React, { cloneElement, forwardRef, ReactNode } from 'react'
-import Button, { ButtonProps, ButtonIconPosition } from '../../atoms/Button'
+import React, { cloneElement, forwardRef, type ReactNode } from 'react'
+import Button, {
+  type ButtonProps,
+  type ButtonIconPosition,
+} from '../../atoms/Button'
 import { useDropdownTrigger } from './hooks/useDropdownTrigger'
 
 export interface DropdownButtonProps

package/src/molecules/Dropdown/DropdownMenu.tsx

@@ -62,7 +62,8 @@ const DropdownMenu = ({
     id,
   } = useDropdown()
 
-  const { loading: loadingPosition, ...dropdownPosition } = useDropdownPosition(align)
+  const { loading: loadingPosition, ...dropdownPosition } =
+    useDropdownPosition(align)
 
   const childrenLength = React.Children.toArray(children).length
 
@@ -102,24 +103,23 @@ const DropdownMenu = ({
   }
 
   const handleKeyNavigatePress = (key: string) => {
-    const dropdownItems = dropdownItemsRef?.current ?? [];
-    const selectedIndex = selectedDropdownItemIndexRef!.current;
-  
+    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();
+      selectedDropdownItemIndexRef!.current = dropdownItems.indexOf(matchItem)
+      matchItem.focus()
     }
-  };
-  
+  }
 
   const handleBackdropKeyDown = (event: KeyboardEvent) => {
     if (event.defaultPrevented || event.key === 'Enter' || event.key === ' ') {
@@ -158,7 +158,7 @@ const DropdownMenu = ({
     return null
   }
 
-  return (isOpen && !loadingPosition)
+  return isOpen && !loadingPosition
     ? createPortal(
         <div
           role="presentation"

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

@@ -7,8 +7,12 @@ import DropdownContext from '../contexts/DropdownContext'
  * Hook to use the Dropdown context.
  * @returns Dropdown context.
  */
-export const useDropdown = <T extends HTMLElement = HTMLElement, E extends HTMLElement = HTMLElement>() => {
-  const context = useContext<DropdownContextState<HTMLElement, HTMLElement>>(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.')

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

@@ -3,13 +3,18 @@ import { useDropdown } from './useDropdown'
 
 type DropdownPosition = {
   loading: boolean
-} & Pick<React.CSSProperties, 'position' | 'top' | 'left' | 'right' | 'transform'>
+} & 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 = (align: 'left' | 'center' | 'right' = 'left'): DropdownPosition => {
+export const useDropdownPosition = (
+  align: 'left' | 'center' | 'right' = 'left'
+): DropdownPosition => {
   const { dropdownTriggerRef, isOpen } = useDropdown()
 
   const [positionProps, setPositionProps] = useState({
@@ -17,7 +22,7 @@ export const useDropdownPosition = (align: 'left' | 'center' | 'right' = 'left')
     left: 0 as React.CSSProperties['left'],
     right: 'auto',
     transform: 'none',
-    loading: true
+    loading: true,
   })
 
   useEffect(() => {
@@ -47,7 +52,7 @@ export const useDropdownPosition = (align: 'left' | 'center' | 'right' = 'left')
         rightPosition = `${document.documentElement.clientWidth - leftLevel - buttonWidth}px`
         leftPosition = 'auto'
       } else if (align === 'center') {
-        leftPosition = leftLevel + (buttonWidth / 2) + scrollLeft
+        leftPosition = leftLevel + buttonWidth / 2 + scrollLeft
         transform = 'translateX(-50%)'
       }
 
@@ -56,7 +61,7 @@ export const useDropdownPosition = (align: 'left' | 'center' | 'right' = 'left')
         left: leftPosition,
         right: rightPosition,
         transform,
-        loading: false
+        loading: false,
       })
     }
 

package/src/molecules/Modal/Modal.tsx

@@ -7,7 +7,7 @@ import type {
 import React from 'react'
 import { createPortal } from 'react-dom'
 
-import { Overlay, OverlayProps } from '../..'
+import { Overlay, type OverlayProps } from '../..'
 import { useFadeEffect, useUI } from '../../hooks'
 import type { ModalContentProps } from './ModalContent'
 import ModalContent from './ModalContent'

package/src/molecules/Modal/ModalBody.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, HTMLAttributes } from 'react'
+import React, { type ReactNode, type HTMLAttributes } from 'react'
 
 export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
   /**

package/src/molecules/Modal/ModalHeader.tsx

@@ -1,6 +1,6 @@
-import React, { HTMLAttributes } from 'react'
+import React, { type HTMLAttributes } from 'react'
 import Icon from '../../atoms/Icon'
-import IconButton, { IconButtonProps } from '../IconButton'
+import IconButton, { type IconButtonProps } from '../IconButton'
 
 export interface ModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
   /**

package/src/molecules/OrderSummary/OrderSummary.tsx

@@ -54,7 +54,7 @@ const OrderSummary = forwardRef<HTMLUListElement, OrderSummaryProps>(
       totalLabel = 'Total',
       totalValue,
       includeTaxes = false,
-      includeTaxesLabel = "Tax included",
+      includeTaxesLabel = 'Tax included',
       ...otherProps
     },
     ref
@@ -116,7 +116,7 @@ const OrderSummary = forwardRef<HTMLUListElement, OrderSummaryProps>(
           <li data-fs-order-summary-taxes-label>
             <Label>{includeTaxesLabel}</Label>
           </li>
-          )}
+        )}
       </List>
     )
   }

package/src/molecules/ProductCard/ProductCardContent.tsx

@@ -10,8 +10,8 @@ import {
   Icon,
   Label,
   Link,
-  LinkElementType,
-  LinkProps,
+  type LinkElementType,
+  type LinkProps,
   ProductPrice,
   Rating,
 } from '../../'

package/src/molecules/ProductCard/ProductCardImage.tsx

@@ -29,7 +29,7 @@ const ProductCardImage = forwardRef<HTMLDivElement, ProductCardImageProps>(
         data-testid={testId}
         style={
           {
-            '--fs-product-card-image-aspect-ratio': aspectRatio
+            '--fs-product-card-image-aspect-ratio': aspectRatio,
           } as React.CSSProperties
         }
         {...otherProps}

package/src/molecules/ProductTitle/ProductTitle.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
+import React, { forwardRef, type HTMLAttributes } from 'react'
 import type { ReactNode } from 'react'
 
 import { Rating } from '../../'

package/src/molecules/Rating/Rating.tsx

@@ -1,4 +1,9 @@
-import React, { forwardRef, HTMLAttributes, ReactNode, useState } from 'react'
+import React, {
+  forwardRef,
+  type HTMLAttributes,
+  type ReactNode,
+  useState,
+} from 'react'
 
 import { Icon, IconButton } from '../..'
 import List from '../../atoms/List'

package/src/molecules/SearchAutoComplete/SearchAutoComplete.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react'
+import React, { type HTMLAttributes } from 'react'
 import { List, useSearch } from '../..'
 
 export interface SearchAutoCompleteProps
@@ -14,7 +14,6 @@ const SearchAutoComplete = ({
   children,
   ...otherProps
 }: SearchAutoCompleteProps) => {
-
   const { inContext, values } = useSearch()
 
   if (inContext && (values.terms.length <= 0 || values.term.length <= 0)) {

package/src/molecules/SearchAutoComplete/SearchAutoCompleteTerm.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
-import React, { Fragment, HTMLAttributes } from 'react'
-import { Icon, Link, LinkElementType, LinkProps } from '../..'
+import React, { Fragment, type HTMLAttributes } from 'react'
+import { Icon, Link, type LinkElementType, type LinkProps } from '../..'
 
 function formatSearchTerm(
   indexSubstring: number,

package/src/molecules/SearchDropdown/SearchDropdown.tsx

@@ -16,7 +16,9 @@ const SearchLoading = () => {
 
   return (
     <>
-      { (inContext && values.isLoading) && <p data-fs-search-dropdown-loading-text>Loading...</p> }
+      {inContext && values.isLoading && (
+        <p data-fs-search-dropdown-loading-text>Loading...</p>
+      )}
     </>
   )
 }
@@ -25,17 +27,13 @@ const SearchDropdown = forwardRef<
   HTMLDivElement,
   PropsWithChildren<SearchDropdownProps>
 >(function SearchDropdown(
-  {
-    testId = 'fs-search-dropdown',
-    children,
-    ...otherProps
-  },
+  { testId = 'fs-search-dropdown', children, ...otherProps },
   ref
 ) {
   return (
     <div ref={ref} data-fs-search-dropdown data-testid={testId} {...otherProps}>
       <section>
-        <SearchLoading/>
+        <SearchLoading />
         {children}
       </section>
     </div>

package/src/molecules/SearchHistory/SearchHistory.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react'
+import React, { type HTMLAttributes } from 'react'
 import { List, Button, useSearch } from '../..'
 
 export interface SearchHistoryProps extends HTMLAttributes<HTMLDivElement> {
@@ -28,7 +28,6 @@ const SearchHistory = ({
   children,
   ...otherProps
 }: SearchHistoryProps) => {
-
   const { inContext, values } = useSearch()
 
   if (inContext && (values.term.length !== 0 || values.isLoading)) {

package/src/molecules/SearchHistory/SearchHistoryTerm.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
-import React, { HTMLAttributes } from 'react'
-import { Icon, Link, LinkElementType, LinkProps } from '../..'
+import React, { type HTMLAttributes } from 'react'
+import { Icon, Link, type LinkElementType, type LinkProps } from '../..'
 
 export interface SearchHistoryTermProps extends HTMLAttributes<HTMLDivElement> {
   /**

package/src/molecules/SearchInputField/SearchInputField.tsx

@@ -2,7 +2,7 @@ import type {
   AriaAttributes,
   FormEvent,
   InputHTMLAttributes,
-  ReactNode
+  ReactNode,
 } from 'react'
 import React, { forwardRef, useImperativeHandle, useRef } from 'react'
 

package/src/molecules/SearchProducts/SearchProductItem.tsx

@@ -1,7 +1,7 @@
 import type { HTMLAttributes } from 'react'
 import React, { forwardRef } from 'react'
 
-import { Link, LinkElementType, LinkProps } from '../..'
+import { Link, type LinkElementType, type LinkProps } from '../..'
 
 export interface SearchProductItemProps extends HTMLAttributes<HTMLDivElement> {
   /**

package/src/molecules/SearchProducts/SearchProducts.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react'
+import React, { type HTMLAttributes } from 'react'
 import { List, useSearch } from '../..'
 
 export interface SearchProductsProps extends HTMLAttributes<HTMLDivElement> {
@@ -20,7 +20,7 @@ const SearchProductsProps = ({
 }: SearchProductsProps) => {
   const { inContext, values } = useSearch()
 
-  if (inContext && (values.products.length <= 0)) {
+  if (inContext && values.products.length <= 0) {
     return null
   }
   return (

package/src/molecules/SearchProvider/index.ts

@@ -1,2 +1,2 @@
 export { default } from './SearchProvider'
-export type { SearchProviderContextValue } from './SearchProvider'
+export type { SearchProviderContextValue } from './SearchProvider'

package/src/molecules/SearchTop/SearchTop.tsx

@@ -16,15 +16,9 @@ export interface SearchTopProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 const SearchTop = forwardRef<HTMLDivElement, SearchTopProps>(function SearchTop(
-  {
-    testId = 'fs-top-search',
-    title = 'Top Search',
-    children,
-    ...otherProps
-  },
+  { testId = 'fs-top-search', title = 'Top Search', children, ...otherProps },
   ref
 ) {
-
   const { inContext, values } = useSearch()
 
   if (inContext && (values.term.length !== 0 || values.isLoading)) {
@@ -33,10 +27,10 @@ const SearchTop = forwardRef<HTMLDivElement, SearchTopProps>(function SearchTop(
 
   return (
     <section ref={ref} data-testid={testId} data-fs-search-top {...otherProps}>
-        <header data-fs-search-top-header>
-          <p data-fs-search-top-title>{title}</p>
-        </header>
-        <List as="ol">{children}</List>
+      <header data-fs-search-top-header>
+        <p data-fs-search-top-title>{title}</p>
+      </header>
+      <List as="ol">{children}</List>
     </section>
   )
 })

package/src/molecules/SearchTop/SearchTopTerm.tsx

@@ -1,7 +1,7 @@
 import type { HTMLAttributes } from 'react'
 import React, { forwardRef } from 'react'
 
-import { Badge, Link, LinkElementType, LinkProps } from '../../'
+import { Badge, Link, type LinkElementType, type LinkProps } from '../../'
 
 export interface SearchTopTermProps extends HTMLAttributes<HTMLDivElement> {
   /**

package/src/molecules/SkuSelector/SkuSelector.tsx

@@ -1,11 +1,16 @@
-/* eslint-disable @next/next/no-img-element */
 import type { FunctionComponent, HTMLAttributes } from 'react'
-import React, { forwardRef } from 'react'
-import { Label, SROnly, Link, LinkProps, LinkElementType } from '../..'
-import { useDefineVariant, Variant } from './useDefineVariant'
+import React from 'react'
+import { forwardRef } from 'react'
+import {
+  Label,
+  SROnly,
+  Link,
+  type LinkProps,
+  type LinkElementType,
+} from '../..'
+import { useDefineVariant, type Variant } from './useDefineVariant'
 import { useSkuSlug } from './useSkuSlug'
 
-
 // TODO: Change by ImageComponent when it be right
 const ImageComponentFallback: SkuSelectorProps['ImageComponent'] = ({
   src,
@@ -108,7 +113,12 @@ const SkuSelector = forwardRef<HTMLDivElement, SkuSelectorProps>(
 
     const variant = useDefineVariant(options, variantProp)
 
-    const { getItemHref } = useSkuSlug(activeVariations, slugsMap, skuPropertyName, getItemHrefProp)
+    const { getItemHref } = useSkuSlug(
+      activeVariations,
+      slugsMap,
+      skuPropertyName,
+      getItemHrefProp
+    )
 
     return (
       <div