@faststore/components 3.99.0-dev.8 → 3.99.0-dev.9

package/dist/typings/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/typings/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,cAAc,EACd,yBAAyB,EACzB,gCAAgC,GACjC,MAAM,uBAAuB,CAAA;AAE9B,YAAY,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA"}

package/package.json

@@ -1,66 +1,60 @@
 {
   "name": "@faststore/components",
-  "version": "3.99.0-dev.8",
+  "version": "3.99.0-dev.9",
   "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "typings": "dist/esm/index.d.ts",
+  "module": "dist/es/index.mjs",
+  "typings": "dist/index.d.ts",
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build",
+    "test": "vitest run"
+  },
   "exports": {
     ".": {
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js",
-      "types": "./dist/esm/index.d.ts",
-      "default": "./dist/esm/index.js"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/es/index.mjs",
+      "require": "./dist/cjs/index.js"
     }
   },
-  "author": "Emerson Laurentino @emersonlaurentino",
-  "license": "MIT",
-  "scripts": {
-    "dev": "tsc --watch",
-    "build": "tsc --module commonjs --outDir dist/cjs && tsc --module esnext --outDir dist/esm",
-    "test": "jest"
-  },
+  "files": [
+    "dist",
+    "src"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/vtex/faststore",
     "directory": "packages/components"
   },
-  "sideEffects": false,
-  "files": [
-    "dist",
-    "src"
-  ],
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "tabbable": "catalog:"
   },
   "dependencies": {
-    "papaparse": "^5.5.3",
-    "react-dropzone": "^14.3.8",
-    "react-intersection-observer": "^8.32.5",
-    "react-swipeable": "^7.0.0",
-    "tabbable": "^5.2.1"
+    "react-intersection-observer": "catalog:",
+    "react-swipeable": "catalog:"
   },
   "devDependencies": {
-    "@jest/globals": "29.7.0",
-    "@testing-library/jest-dom": "^6.5.0",
-    "@testing-library/react": "^14.3.0",
-    "@types/jest": "29.1.0",
-    "@types/jest-axe": "^3.5.9",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "catalog:",
     "@types/papaparse": "^5.5.0",
-    "@types/react": "^18.2.42",
-    "@types/react-dom": "^18.2.17",
-    "@types/tabbable": "^3.1.1",
-    "jest": "^29.7.0",
-    "jest-axe": "^9.0.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "ts-jest": "^29.1.2",
-    "tslib": "^2.3.1"
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "@types/tabbable": "catalog:",
+    "papaparse": "^5.5.3",
+    "react-dropzone": "^14.3.8",
+    "tabbable": "catalog:",
+    "tslib": "catalog:",
+    "vite": "catalog:",
+    "vite-plugin-dts": "catalog:",
+    "vitest": "catalog:",
+    "vitest-axe": "^0.1.0"
   },
-  "volta": {
-    "extends": "../../package.json"
+  "engines": {
+    "node": ">=20"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5a04cd847b5f269a1fbcbb0525bd6fb158ba772a"
+  "gitHead": "4d4ac3a20644a58ccb98c8f2e8df3b1ab1936652"
 }

package/src/atoms/Link/Link.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from 'react'
 import type { ElementType } from 'react'
+import React, { forwardRef } from 'react'
 import type {
   PolymorphicComponentPropsWithRef,
   PolymorphicRef,

package/src/atoms/List/List.tsx

@@ -1,9 +1,9 @@
-import React, { forwardRef } from 'react'
 import type { ElementType, ReactElement } from 'react'
+import React, { forwardRef } from 'react'
 
 import type {
-  PolymorphicRef,
   PolymorphicComponentPropsWithRef,
+  PolymorphicRef,
 } from '../../typings'
 
 interface BaseProps {

package/src/hooks/index.ts

@@ -1,8 +1,8 @@
 export {
-  Toast as ToastProps,
-  default as UIProvider,
   regionSliderTypes,
+  default as UIProvider,
   useUI,
+  type Toast as ToastProps,
 } from './UIProvider'
 export { useCSVParser } from './useCSVParser'
 export type {
@@ -11,7 +11,7 @@ export type {
   CSVParserOptions,
 } from './useCSVParser'
 export { useFadeEffect } from './useFadeEffect'
-export { useFileUpload } from './useFileUpload'
+export { FileRejectionCode, useFileUpload } from './useFileUpload'
 export { useOnClickOutside } from './useOnClickOutside'
 export { useProductComparison } from './useProductComparison'
 export { useRTL } from './useRTL'
@@ -27,4 +27,3 @@ export type {
 } from './useSlider'
 export { useSlideVisibility } from './useSlideVisibility'
 export { useTrapFocus } from './useTrapFocus'
-export { FileRejectionCode } from './useFileUpload'

package/src/index.ts

@@ -185,7 +185,7 @@ export type {
 } from './molecules/SearchAutoComplete'
 export {
   default as SearchDropdown,
-  SearchDropdownProps,
+  type SearchDropdownProps,
 } from './molecules/SearchDropdown'
 export {
   default as SearchHistory,

package/src/molecules/Accordion/Accordion.tsx

@@ -1,9 +1,9 @@
-import type { HTMLAttributes, ReactElement } from 'react'
+import type { AriaAttributes, HTMLAttributes, ReactElement } from 'react'
 import React, {
-  useContext,
   cloneElement,
-  forwardRef,
   createContext,
+  forwardRef,
+  useContext,
 } from 'react'
 
 interface AccordionContext {
@@ -29,10 +29,21 @@ export interface AccordionProps
    * Function that is triggered when an accordion item is opened/closed.
    */
   onChange: (index: number) => void
+  /**
+   * For accessibility purposes, define a string that labels the current accodion.
+   */
+  'aria-label'?: AriaAttributes['aria-label']
 }
 
 const Accordion = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(
-  { testId = 'fs-accordion', indices, onChange, children, ...otherProps },
+  {
+    testId = 'fs-accordion',
+    indices,
+    onChange,
+    children,
+    'aria-label': ariaLabel,
+    ...otherProps
+  },
   ref
 ) {
   const childrenWithIndex = React.Children.map(
@@ -57,6 +68,7 @@ const Accordion = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(
         data-fs-accordion
         role="region"
         data-testid={testId}
+        aria-label={ariaLabel}
         {...otherProps}
       >
         {childrenWithIndex}

package/src/molecules/Accordion/AccordionItem.tsx

@@ -1,5 +1,5 @@
-import React, { useContext, forwardRef, createContext } from 'react'
 import type { ElementType, HTMLAttributes, ReactElement } from 'react'
+import React, { createContext, forwardRef, useContext } from 'react'
 import type {
   PolymorphicComponentPropsWithRef,
   PolymorphicRef,

package/src/molecules/Popover/Popover.tsx

@@ -9,6 +9,7 @@ import React, {
   type ReactNode,
   type RefObject,
 } from 'react'
+import { createPortal } from 'react-dom'
 import Icon from '../../atoms/Icon'
 import IconButton from '../IconButton'
 
@@ -81,30 +82,115 @@ export interface PopoverProps
    * Reference to the trigger element that opens the Popover.
    */
   triggerRef?: RefObject<HTMLElement>
+  /**
+   * Whether to render the Popover using a React portal.
+   * @default false
+   */
+  enablePortal?: boolean
+  /**
+   * Props for the wrapper div when using portal.
+   */
+  wrapperProps?: HTMLAttributes<HTMLDivElement>
+}
+
+/**
+ * `top` / `bottom` / `left` are all optional so portal calcs can use either
+ * vertical anchor; `transform` must always be set in portal mode to suppress
+ * the stylesheet transform that uses % values unsuitable for fixed positioning.
+ */
+type PopoverCoords = {
+  top?: number
+  bottom?: number
+  left?: number
+  transform?: string
 }
 
+/**
+ * For portal (`position: fixed`) we compute pixel coords from
+ * `getBoundingClientRect()` (viewport-relative). We use `bottom` instead of
+ * `top` for `top-*` placements so the arrow sits just above the trigger without
+ * fighting the CSS `bottom: 100%` rule.
+ * For non-portal (`position: absolute`) we keep the original simple coords and
+ * let the stylesheet handle placement/transforms.
+ */
 const calculatePosition = (
   rect: DOMRect,
   placement: Placement,
   offsetTop: number,
-  offsetLeft: number
-) => {
-  const { top, left, height } = rect
+  offsetLeft: number,
+  enablePortal: boolean
+): PopoverCoords => {
+  const { top, left, height, width } = rect
 
-  switch (true) {
-    case placement.startsWith('top'):
+  if (enablePortal) {
+    // pixels from viewport bottom to the trigger's top edge (with optional gap)
+    const bottomAnchor = window.innerHeight - rect.top + offsetTop
+    // pixels from viewport top to the trigger's bottom edge (with optional gap)
+    const topAnchor = top + height + offsetTop
+
+    if (placement.startsWith('top')) {
+      if (placement === 'top-center') {
+        return {
+          bottom: bottomAnchor,
+          left: left + width / 2 + offsetLeft,
+          transform: 'translateX(-50%)',
+        }
+      }
+      if (placement === 'top-end') {
+        return {
+          bottom: bottomAnchor,
+          left: left + width + offsetLeft,
+          transform: 'translateX(-100%)',
+        }
+      }
       return {
-        top: top + height + window.scrollY - offsetTop,
-        left: left + window.scrollX + offsetLeft,
+        bottom: bottomAnchor,
+        left: left + offsetLeft,
+        transform: 'none',
+      }
+    }
+
+    if (placement.startsWith('bottom')) {
+      if (placement === 'bottom-center') {
+        return {
+          top: topAnchor,
+          left: left + width / 2 + offsetLeft,
+          transform: 'translateX(-50%)',
+        }
+      }
+      if (placement === 'bottom-end') {
+        return {
+          top: topAnchor,
+          left: left + width + offsetLeft,
+          transform: 'translateX(-100%)',
+        }
       }
-    case placement.startsWith('bottom'):
       return {
-        top: top + height + window.scrollY + offsetTop,
-        left: left + window.scrollX + offsetLeft,
+        top: topAnchor,
+        left: left + offsetLeft,
+        transform: 'none',
       }
-    default:
-      return { top: 0, left: 0 }
+    }
+
+    return { top: 0, left: 0, transform: 'none' }
+  }
+
+  // Non-portal: absolute positioning; let CSS handle placement transforms
+  if (placement.startsWith('top')) {
+    return {
+      top: top + height + window.scrollY - offsetTop,
+      left: left + window.scrollX + offsetLeft,
+    }
   }
+
+  if (placement.startsWith('bottom')) {
+    return {
+      top: top + height + window.scrollY + offsetTop,
+      left: left + window.scrollX + offsetLeft,
+    }
+  }
+
+  return { top: 0, left: 0 }
 }
 
 const Popover = forwardRef<HTMLDivElement, PopoverProps>(function Popover(
@@ -122,14 +208,21 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(function Popover(
     testId = 'fs-popover',
     style,
     onEntered,
+    enablePortal = false,
+    wrapperProps,
     ...otherProps
   },
   ref
 ) {
   // Use forwarded ref or internal ref for fallback
-  const popoverRef = ref || useRef<HTMLDivElement>(null)
+  const localRef = useRef<HTMLDivElement>(null)
+  const popoverRef = ref ?? localRef
+
+  const [popoverPosition, setPopoverPosition] = useState<PopoverCoords>({
+    top: 0,
+    left: 0,
+  })
 
-  const [popoverPosition, setPopoverPosition] = useState({ top: 0, left: 0 })
   const { popover, closePopover } = useUI()
 
   const contextTriggerRef = popover.triggerRef
@@ -144,14 +237,14 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(function Popover(
     const rect = triggerRef.current.getBoundingClientRect()
 
     setPopoverPosition(
-      calculatePosition(rect, placement, offsetTop, offsetLeft)
+      calculatePosition(rect, placement, offsetTop, offsetLeft, enablePortal)
     )
 
     // Trigger the onEntered callback after positioning
     if (onEntered) {
       onEntered()
     }
-  }, [isOpen, triggerRef, offsetTop, offsetLeft, placement])
+  }, [isOpen, triggerRef, offsetTop, offsetLeft, placement, enablePortal])
 
   const handleDismiss = useCallback(() => {
     closePopover()
@@ -176,7 +269,7 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(function Popover(
     return null
   }
 
-  return (
+  const popoverElement = (
     <div
       data-fs-popover
       role="dialog"
@@ -184,7 +277,18 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(function Popover(
       data-fs-popover-placement={placement}
       onKeyDown={handleKeyDown}
       data-testid={testId}
-      style={{ position: 'absolute', ...popoverPosition, ...style }}
+      style={{
+        position: enablePortal ? 'fixed' : 'absolute',
+        top: popoverPosition.top,
+        bottom: popoverPosition.bottom,
+        left: popoverPosition.left,
+        // In portal mode the transform is always provided (even 'none') to
+        // prevent the stylesheet transform from applying to fixed coordinates.
+        ...(popoverPosition.transform !== undefined
+          ? { transform: popoverPosition.transform }
+          : {}),
+        ...style,
+      }}
       {...otherProps}
     >
       <header data-fs-popover-header>
@@ -204,6 +308,15 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(function Popover(
       <span data-fs-popover-indicator aria-hidden="true" />
     </div>
   )
+
+  if (enablePortal) {
+    return createPortal(
+      <div {...wrapperProps}>{popoverElement}</div>,
+      document.body
+    )
+  }
+
+  return popoverElement
 })
 
 export default Popover

package/src/molecules/ProductCard/ProductCardContent.tsx

@@ -91,16 +91,16 @@ const ProductCardContent = forwardRef<HTMLElement, ProductCardContentProps>(
       linkProps,
       price,
       outOfStock,
-      outOfStockLabel = 'Out of stock',
+      outOfStockLabel,
       ratingValue,
       showDiscountBadge,
-      buttonLabel = 'Add',
+      buttonLabel,
       onButtonClick,
       children,
       includeTaxes = false,
-      includeTaxesLabel = 'Tax included',
+      includeTaxesLabel,
       sponsored = false,
-      sponsoredLabel = 'Sponsored',
+      sponsoredLabel,
       deliveryPromiseBadges,
       ...otherProps
     },

package/src/molecules/SearchDropdown/SearchDropdown.tsx

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, ReactNode, PropsWithChildren } from 'react'
+import type { HTMLAttributes, PropsWithChildren, ReactNode } from 'react'
 import React, { forwardRef } from 'react'
 import { useSearch } from '../../hooks'
 
@@ -9,15 +9,16 @@ export interface SearchDropdownProps extends HTMLAttributes<HTMLDivElement> {
    */
   testId?: string
   children?: ReactNode
+  loadingLabel?: string
 }
 
-const SearchLoading = () => {
+const SearchLoading = ({ loadingLabel }: { loadingLabel?: string }) => {
   const { inContext, values } = useSearch()
 
   return (
     <>
       {inContext && values.isLoading && (
-        <p data-fs-search-dropdown-loading-text>Loading...</p>
+        <p data-fs-search-dropdown-loading-text>{loadingLabel}</p>
       )}
     </>
   )
@@ -27,13 +28,13 @@ const SearchDropdown = forwardRef<
   HTMLDivElement,
   PropsWithChildren<SearchDropdownProps>
 >(function SearchDropdown(
-  { testId = 'fs-search-dropdown', children, ...otherProps },
+  { testId = 'fs-search-dropdown', children, loadingLabel, ...otherProps },
   ref
 ) {
   return (
     <div ref={ref} data-fs-search-dropdown data-testid={testId} {...otherProps}>
       <section>
-        <SearchLoading />
+        <SearchLoading loadingLabel={loadingLabel} />
         {children}
       </section>
     </div>

package/src/molecules/SearchInputField/SearchInputField.tsx

@@ -13,6 +13,7 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'onSubmit'>
 type ButtonProps = {
   onClick?: () => void
   testId?: string
+  'aria-label'?: string
 }
 
 export interface SearchInputFieldProps extends InputProps {
@@ -96,6 +97,9 @@ const SearchInputField = forwardRef<
     }
   }
 
+  const { 'aria-label': buttonAriaLabel, ...otherButtonProps } =
+    buttonProps ?? {}
+
   useImperativeHandle(ref, () => ({
     inputRef: inputRef.current,
     formRef: formRef.current,
@@ -121,11 +125,11 @@ const SearchInputField = forwardRef<
           {showAttachmentButton && (
             <>
               <IconButton
+                data-fs-search-input-field-attachment-button
                 type="button"
                 aria-label={attachmentButtonAriaLabel}
                 icon={attachmentButtonIcon ?? <Icon name="Paperclip" />}
                 size="small"
-                data-fs-search-input-field-attachment-button
                 {...attachmentButtonProps}
               />
 
@@ -134,12 +138,12 @@ const SearchInputField = forwardRef<
           )}
 
           <IconButton
+            data-fs-search-input-field-submit-button
             type="submit"
             aria-label={submitButtonAriaLabel}
             icon={buttonIcon ?? <Icon name="MagnifyingGlass" />}
             size="small"
-            data-fs-search-input-field-submit-button
-            {...buttonProps}
+            {...otherButtonProps}
           />
         </div>
       </form>

package/src/molecules/Toast/Toast.tsx

@@ -5,7 +5,7 @@ import { useUI } from '../../hooks'
 function Toast() {
   const { toasts, popToast } = useUI()
   const toast = toasts[toasts.length - 1]
-  const timeoutRef = useRef<NodeJS.Timeout>()
+  const timeoutRef = useRef<number>()
 
   const [visible, setVisible] = useState(false)
 
@@ -22,7 +22,9 @@ function Toast() {
   useEffect(() => {
     timeoutRef.current = setTimeout(() => setVisible(false), 6e3)
 
-    return () => timeoutRef.current && clearTimeout(timeoutRef.current)
+    return () => {
+      timeoutRef.current && clearTimeout(timeoutRef.current)
+    }
   }, [toast])
 
   if (toast === undefined) {

package/src/organisms/Filter/FilterFacetRange.tsx

@@ -23,6 +23,22 @@ export interface FilterFacetRangeProps {
    * This function is called when `Checkbox` from the facet changes.
    */
   onFacetChange: OnFacetChange
+  /**
+   * Label for the minimum value input field.
+   */
+  minLabel?: string
+  /**
+   * Label for the maximum value input field.
+   */
+  maxLabel?: string
+  /**
+   * Error message for the minimum price input field.
+   */
+  minPriceErrorMessage?: string
+  /**
+   * Error message for the maximum price input field.
+   */
+  maxPriceErrorMessage?: string
 }
 
 const formatRange = (min: number, max: number) =>
@@ -34,6 +50,10 @@ function FilterFacetRange({
   formatter,
   facetKey,
   onFacetChange,
+  minLabel,
+  maxLabel,
+  minPriceErrorMessage,
+  maxPriceErrorMessage,
 }: FilterFacetRangeProps) {
   return (
     <PriceRange
@@ -42,6 +62,10 @@ function FilterFacetRange({
       max={max}
       formatter={formatter}
       step={1}
+      minLabel={minLabel}
+      maxLabel={maxLabel}
+      minPriceErrorMessage={minPriceErrorMessage}
+      maxPriceErrorMessage={maxPriceErrorMessage}
       onEnd={(v) =>
         onFacetChange(
           {

package/src/organisms/OutOfStock/OutOfStock.tsx

@@ -48,7 +48,7 @@ const OutOfStock = forwardRef<HTMLFormElement, OutOfStockProps>(
       testId = 'fs-out-of-stock',
       title,
       buttonLabel = 'Notify Me',
-      loadingLabel = 'Loading',
+      loadingLabel,
       inputLabel,
       subtitle,
       disabled,