@faststore/components 3.11.3 → 3.13.1

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/useDefineVariant.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import { SkuOption } from './SkuSelector'
+import type { SkuOption } from './SkuSelector'
 
 export type Variant = 'image' | 'color' | 'label'
 
@@ -10,12 +10,15 @@ const getImageName = (src: string) => {
 }
 
 /**
- * This hook infers what kind of SKU Selector will be displayed on the UI. 
+ * This hook infers what kind of SKU Selector will be displayed on the UI.
  * There are three different options, color, image, and label (default version).
  */
-export const useDefineVariant = (options: SkuOption[], variant?: Variant): Variant =>
+export const useDefineVariant = (
+  options: SkuOption[],
+  variant?: Variant
+): Variant =>
   useMemo(() => {
-    if(variant) return variant
+    if (variant) return variant
 
     const allOptionsHaveHexColor = options.every((option) => option.hexColor)
     if (allOptionsHaveHexColor) {
@@ -24,9 +27,9 @@ export const useDefineVariant = (options: SkuOption[], variant?: Variant): Varia
 
     const firstImageName = options[0]?.src && getImageName(options[0].src)
 
-    /* 
+    /*
      * If there's only one option (options.length === 1) and there is an image
-     * the correct return value is 'image'. 
+     * the correct return value is 'image'.
      * */
     if (firstImageName && options.length === 1) {
       return 'image'

package/src/molecules/SkuSelector/useSkuSlug.ts

@@ -1,5 +1,5 @@
 import { useCallback } from 'react'
-import { SkuOption } from './SkuSelector'
+import type { SkuOption } from './SkuSelector'
 
 function getSkuSlug(
   slugsMap: Record<string, string>,

package/src/molecules/Tag/Tag.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import React, { forwardRef } from 'react'
-import { Badge, BadgeProps, Icon } from '../..'
+import { Badge, type BadgeProps, Icon } from '../..'
 
 export interface TagProps extends BadgeProps {
   /**

package/src/organisms/CartSidebar/CartSidebar.tsx

@@ -4,14 +4,14 @@ import React from 'react'
 import {
   Alert,
   Badge,
-  OverlayProps,
+  type OverlayProps,
   SlideOver,
   SlideOverHeader,
   useFadeEffect,
   useUI,
 } from '../../'
 
-import { SlideOverDirection, SlideOverWidthSize } from '../SlideOver'
+import type { SlideOverDirection, SlideOverWidthSize } from '../SlideOver'
 
 export interface CartSidebarProps extends HTMLAttributes<HTMLDivElement> {
   /**

package/src/organisms/CartSidebar/CartSidebarFooter.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react'
+import React, { type ReactNode } from 'react'
 
 function CartSidebarFooter({ children }: { children: ReactNode }) {
   return <footer data-fs-cart-sidebar-footer>{children}</footer>

package/src/organisms/CartSidebar/CartSidebarList.tsx

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

package/src/organisms/Filter/Filter.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react'
+import React, { type PropsWithChildren } from 'react'
 import { Accordion } from '../../'
 
 export type OnFacetChange = (

package/src/organisms/Filter/FilterFacetBoolean.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react'
+import React, { type ReactNode } from 'react'
 import { List } from '../../'
 
 function FilterFacetBoolean({ children }: { children: ReactNode }) {

package/src/organisms/Filter/FilterFacetBooleanItem.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Badge, Checkbox, Label } from '../..'
-import { OnFacetChange } from './Filter'
+import type { OnFacetChange } from './Filter'
 
 export interface FilterFacetBooleanItemProps {
   /**

package/src/organisms/Filter/FilterFacetRange.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { PriceRange } from '../..'
-import { OnFacetChange } from './Filter'
+import type { OnFacetChange } from './Filter'
 
 export interface FilterFacetRangeProps {
   /**

package/src/organisms/Filter/FilterFacets.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react'
+import React, { type PropsWithChildren } from 'react'
 import { AccordionButton, AccordionItem, AccordionPanel } from '../..'
 
 export interface FilterFacetsProps {

package/src/organisms/Filter/FilterSlider.tsx

@@ -3,15 +3,15 @@ import React from 'react'
 
 import {
   Button,
-  ButtonProps,
-  OverlayProps,
+  type ButtonProps,
+  type OverlayProps,
   SlideOver,
   SlideOverHeader,
   useFadeEffect,
   useUI,
 } from '../../'
 
-import { SlideOverDirection, SlideOverWidthSize } from '../SlideOver'
+import type { SlideOverDirection, SlideOverWidthSize } from '../SlideOver'
 
 export interface FilterSliderProps extends HTMLAttributes<HTMLDivElement> {
   /**

package/src/organisms/Filter/index.ts

@@ -9,4 +9,3 @@ export { default as FilterFacets } from './FilterFacets'
 export type { FilterFacetsProps } from './FilterFacets'
 export { default as FilterSlider } from './FilterSlider'
 export type { FilterSliderProps } from './FilterSlider'
-

package/src/organisms/PriceRange/PriceRange.tsx

@@ -4,7 +4,8 @@ import type { AriaAttributes } from 'react'
 import { Price, Slider, InputField } from '../../'
 import type { PriceProps, SliderProps } from '../../'
 
-export interface PriceRangeProps extends Omit<SliderProps, 'absoluteValuesLabel'> {
+export interface PriceRangeProps
+  extends Omit<SliderProps, 'absoluteValuesLabel'> {
   /**
    * The current use case variant for prices.
    */

package/src/organisms/SKUMatrix/SKUMatrix.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
+import React, { forwardRef, type HTMLAttributes } from 'react'
 import SKUMatrixProvider from './provider/SKUMatrixProvider'
 
 export interface SKUMatrixProps extends HTMLAttributes<HTMLDivElement> {

package/src/organisms/SKUMatrix/SKUMatrixSidebar.tsx

@@ -3,7 +3,7 @@ import type { FunctionComponent } from 'react'
 import React, { useMemo } from 'react'
 import { Badge, Button, QuantitySelector, Skeleton } from '../..'
 import Icon from '../../atoms/Icon'
-import Price, { PriceFormatter } from '../../atoms/Price'
+import Price, { type PriceFormatter } from '../../atoms/Price'
 import { useFadeEffect, useSKUMatrix, useUI } from '../../hooks'
 import {
   Table,
@@ -12,7 +12,7 @@ import {
   TableHead,
   TableRow,
 } from '../../molecules/Table'
-import SlideOver, { SlideOverHeader, SlideOverProps } from '../SlideOver'
+import SlideOver, { SlideOverHeader, type SlideOverProps } from '../SlideOver'
 interface VariationProductColumn {
   name: string
   additionalColumns: Array<{ label: string; value: string }>