@faststore/components 3.41.3 → 3.44.0

package/src/hooks/index.ts

@@ -1,6 +1,6 @@
 export { default as UIProvider, Toast as ToastProps, useUI } from './UIProvider'
 export { useFadeEffect } from './useFadeEffect'
-export { useTrapFocus } from './useTrapFocus'
+export { useOnClickOutside } from './useOnClickOutside'
 export { useSearch } from './useSearch'
 export { useSKUMatrix } from './useSKUMatrix'
 export { useScrollDirection } from './useScrollDirection'
@@ -12,3 +12,4 @@ export type {
   SlideDirection,
 } from './useSlider'
 export { useSlideVisibility } from './useSlideVisibility'
+export { useTrapFocus } from './useTrapFocus'

package/src/hooks/useOnClickOutside.ts

@@ -0,0 +1,40 @@
+import type { RefObject } from 'react'
+import { useEffect } from 'react'
+
+type Handler = (event: any) => void
+
+export function useOnClickOutside<T extends HTMLElement = HTMLElement>(
+  ref: RefObject<T> | undefined,
+  handler: Handler
+) {
+  useEffect(
+    () => {
+      if (!ref?.current) return
+
+      const listener: Handler = (event) => {
+        if (!ref?.current || ref.current.contains(event.target)) {
+          return
+        }
+
+        handler(event)
+      }
+
+      document.addEventListener('mousedown', listener)
+      document.addEventListener('touchstart', listener)
+
+      return () => {
+        document.removeEventListener('mousedown', listener)
+        document.removeEventListener('touchstart', listener)
+      }
+    },
+    /**
+     * Add ref and handler to effect dependencies.
+     * It's worth noting that because passed in handler is a new
+     * function on every render that will cause this effect
+     * callback/cleanup to run every render. It's not a big deal
+     * but to optimize you can wrap handler in useCallback before
+     * passing it into this hook.
+     */
+    [ref, handler]
+  )
+}

package/src/index.ts

@@ -131,6 +131,8 @@ export type {
 } from './molecules/NavbarLinks'
 export { default as OrderSummary } from './molecules/OrderSummary'
 export type { OrderSummaryProps } from './molecules/OrderSummary'
+export { default as Popover } from './molecules/Popover'
+export type { PopoverProps } from './molecules/Popover'
 export {
   default as ProductCard,
   ProductCardImage,

package/src/molecules/Modal/Modal.tsx

@@ -20,7 +20,8 @@ export type ModalChildrenProps = {
 
 type ModalChildrenFunction = (props: ModalChildrenProps) => ReactNode
 
-export interface ModalProps extends Omit<ModalContentProps, 'children'> {
+export interface ModalProps
+  extends Omit<ModalContentProps, 'children' | 'onEntered'> {
   /**
    * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
    */
@@ -31,21 +32,29 @@ export interface ModalProps extends Omit<ModalContentProps, 'children'> {
    */
   'aria-labelledby'?: AriaAttributes['aria-label']
   /**
-   * A boolean value that represents the state of the Modal
+   * A boolean value that represents the state of the Modal.
    */
   isOpen?: boolean
   /**
-   * Event emitted when the modal is closed
+   * Event emitted when the modal is closed.
    */
   onDismiss?: () => void
   /**
-   * Props forwarded to the `Overlay` component
+   * Callback function when the modal is opened.
+   */
+  onEntered?: () => void
+  /**
+   * Props forwarded to the `Overlay` component.
    */
   overlayProps?: OverlayProps
   /**
-   * Children or function as a children
+   * Children or function as a children.
    */
   children: ModalChildrenFunction | ReactNode
+  /**
+   * Disable being closed using the Escape key.
+   */
+  disableEscapeKeyDown?: boolean
 }
 
 /*
@@ -60,13 +69,15 @@ const Modal = ({
   isOpen = true,
   onDismiss,
   overlayProps,
+  disableEscapeKeyDown = false,
+  onEntered,
   ...otherProps
 }: ModalProps) => {
   const { closeModal } = useUI()
   const { fade, fadeOut, fadeIn } = useFadeEffect()
 
   const handleBackdropClick = (event: MouseEvent) => {
-    if (event.defaultPrevented) {
+    if (disableEscapeKeyDown || event.defaultPrevented) {
       return
     }
 
@@ -76,7 +87,11 @@ const Modal = ({
   }
 
   const handleBackdropKeyDown = (event: KeyboardEvent) => {
-    if (event.key !== 'Escape' || event.defaultPrevented) {
+    if (
+      disableEscapeKeyDown ||
+      event.key !== 'Escape' ||
+      event.defaultPrevented
+    ) {
       return
     }
 
@@ -93,7 +108,13 @@ const Modal = ({
           {...overlayProps}
         >
           <ModalContent
-            onTransitionEnd={() => fade === 'out' && closeModal()}
+            onTransitionEnd={() => {
+              if (fade === 'out') {
+                closeModal()
+              } else if (fade === 'in' && onEntered) {
+                onEntered()
+              }
+            }}
             data-fs-modal
             data-fs-modal-state={fade}
             testId={testId}

package/src/molecules/Popover/Popover.tsx

@@ -0,0 +1,209 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type HTMLAttributes,
+  type KeyboardEvent,
+  type ReactNode,
+  type RefObject,
+} from 'react'
+import Icon from '../../atoms/Icon'
+import IconButton from '../IconButton'
+
+import { useOnClickOutside, useUI } from '../../hooks'
+
+/**
+ * Specifies Popover position.
+ */
+export type Side = 'bottom' | 'top'
+
+/**
+ * Specifies tooltip alignment.
+ */
+export type Alignment = 'start' | 'center' | 'end'
+
+/**
+ * Combines side + alignment (e.g., "top-start").
+ */
+export type Placement = `${Side}-${Alignment}`
+
+export interface PopoverProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
+  /**
+   * The Popover header's title.
+   */
+  title?: string
+  /**
+   * Content of the Popover.
+   */
+  content: ReactNode
+  /**
+   * Defines the side or side-alignment (e.g., "bottom-start", "bottom-center") of the Popover.
+   */
+  placement?: Placement
+  /**
+   * If the Popover can be closed by a button.
+   */
+  dismissible?: boolean
+  /**
+   * Called when the Popover is dismissed.
+   */
+  onDismiss?: () => void
+  /**
+   * Callback when the Popover is fully rendered and positioned.
+   */
+  onEntered?: () => void
+  /**
+   * Close button aria-label.
+   */
+  closeButtonAriaLabel?: string
+  /**
+   * Controls whether the Popover is open.
+   */
+  isOpen: boolean
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * Offset value for top position (e.g.: 12).
+   * @default '8'
+   */
+  offsetTop?: number
+  /**
+   * Offset value for left position (e.g.: 12).
+   * @default '0'
+   */
+  offsetLeft?: number
+  /**
+   * Reference to the trigger element that opens the Popover.
+   */
+  triggerRef?: RefObject<HTMLElement>
+}
+
+const calculatePosition = (
+  rect: DOMRect,
+  placement: Placement,
+  offsetTop: number,
+  offsetLeft: number
+) => {
+  const { top, left, height } = rect
+
+  switch (true) {
+    case placement.startsWith('top'):
+      return {
+        top: top + height + window.scrollY - offsetTop,
+        left: left + window.scrollX + offsetLeft,
+      }
+    case placement.startsWith('bottom'):
+      return {
+        top: top + height + window.scrollY + offsetTop,
+        left: left + window.scrollX + offsetLeft,
+      }
+    default:
+      return { top: 0, left: 0 }
+  }
+}
+
+const Popover = forwardRef<HTMLDivElement, PopoverProps>(function Popover(
+  {
+    title,
+    content,
+    placement = 'bottom-start',
+    dismissible = false,
+    onDismiss,
+    isOpen,
+    triggerRef: propTriggerRef,
+    offsetTop = 8,
+    offsetLeft = 0,
+    closeButtonAriaLabel = 'Close Popover',
+    testId = 'fs-popover',
+    style,
+    onEntered,
+    ...otherProps
+  },
+  ref
+) {
+  // Use forwarded ref or internal ref for fallback
+  const popoverRef = ref || useRef<HTMLDivElement>(null)
+
+  const [popoverPosition, setPopoverPosition] = useState({ top: 0, left: 0 })
+  const { popover, closePopover } = useUI()
+
+  const contextTriggerRef = popover.triggerRef
+
+  // Use the propTriggerRef if provided, otherwise fallback to contextTriggerRef
+  const triggerRef = propTriggerRef || contextTriggerRef
+
+  useEffect(() => {
+    if (!isOpen || !triggerRef?.current) return
+
+    // Set the position according to the trigger element and placement
+    const rect = triggerRef.current.getBoundingClientRect()
+
+    setPopoverPosition(
+      calculatePosition(rect, placement, offsetTop, offsetLeft)
+    )
+
+    // Trigger the onEntered callback after positioning
+    if (onEntered) {
+      onEntered()
+    }
+  }, [isOpen, triggerRef, offsetTop, offsetLeft, placement])
+
+  const handleDismiss = useCallback(() => {
+    closePopover()
+    onDismiss?.()
+  }, [closePopover, onDismiss])
+
+  useOnClickOutside(
+    isOpen ? (popoverRef as RefObject<HTMLDivElement>) : undefined,
+    handleDismiss
+  )
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'Escape') {
+        handleDismiss()
+      }
+    },
+    [handleDismiss]
+  )
+
+  if (!isOpen) {
+    return null
+  }
+
+  return (
+    <div
+      data-fs-popover
+      role="dialog"
+      ref={popoverRef}
+      data-fs-popover-placement={placement}
+      onKeyDown={handleKeyDown}
+      data-testid={testId}
+      style={{ position: 'absolute', ...popoverPosition, ...style }}
+      {...otherProps}
+    >
+      <header data-fs-popover-header>
+        {title && <h3 data-fs-popover-header-title>{title}</h3>}
+        {dismissible && (
+          <IconButton
+            data-fs-popover-header-dismiss-button
+            size="small"
+            variant="tertiary"
+            icon={<Icon name="X" width={20} height={20} />}
+            aria-label={closeButtonAriaLabel}
+            onClick={handleDismiss}
+          />
+        )}
+      </header>
+      <div data-fs-popover-content>{content}</div>
+      <span data-fs-popover-indicator aria-hidden="true" />
+    </div>
+  )
+})
+
+export default Popover

package/src/molecules/Popover/index.tsx

@@ -0,0 +1,2 @@
+export { default } from './Popover'
+export type { PopoverProps } from './Popover'

package/src/molecules/RegionBar/RegionBar.tsx

@@ -1,11 +1,17 @@
-import type { HTMLAttributes, ReactNode } from 'react'
+import type { HTMLAttributes, ReactNode, RefAttributes } from 'react'
 import React, { forwardRef } from 'react'
 
 import { Button } from '../../'
 
-export interface RegionBarProps extends HTMLAttributes<HTMLDivElement> {
+export interface RegionBarProps
+  extends HTMLAttributes<HTMLDivElement>,
+    RefAttributes<HTMLDivElement> {
   /**
-   * Postal code string to be display in the component
+   * City to be displayed in the component.
+   */
+  city?: string
+  /**
+   * Postal code string to be display in the component.
    */
   postalCode?: string
   /**
@@ -28,16 +34,23 @@ export interface RegionBarProps extends HTMLAttributes<HTMLDivElement> {
    * A React component that will be rendered as an icon.
    */
   buttonIcon?: ReactNode
+  /**
+   * Boolean to control whether postal code should be visible or not.
+   * @default true
+   */
+  shouldDisplayPostalCode?: boolean
 }
 
 const RegionBar = forwardRef<HTMLDivElement, RegionBarProps>(function RegionBar(
   {
+    city,
     postalCode,
     icon,
     label,
     editLabel,
     buttonIcon,
     onButtonClick,
+    shouldDisplayPostalCode = true,
     ...otherProps
   },
   ref
@@ -51,9 +64,12 @@ const RegionBar = forwardRef<HTMLDivElement, RegionBarProps>(function RegionBar(
         icon={buttonIcon}
       >
         {!!icon && icon}
-        {postalCode ? (
+        {city && postalCode ? (
           <>
-            <span data-fs-region-bar-postal-code>{postalCode}</span>
+            <span data-fs-region-bar-postal-code>
+              {city}
+              {shouldDisplayPostalCode && `, ${postalCode}`}
+            </span>
             {!!editLabel && <span data-fs-region-bar-cta>{editLabel}</span>}
           </>
         ) : (

package/src/molecules/SearchProducts/SearchProductItemContent.tsx

@@ -1,5 +1,6 @@
-import React, { forwardRef } from 'react'
+import React, { forwardRef, useCallback } from 'react'
 import { ProductPrice } from '../..'
+import SearchProductItemControl from './SearchProductItemControl'
 
 import type { PriceDefinition } from '../../typings/PriceDefinition'
 
@@ -12,23 +13,73 @@ export interface SearchProductItemContentProps {
    * Specifies product's prices.
    */
   price: PriceDefinition
+  /**
+   * Quick order settings.
+   */
+  quickOrder?: {
+    enabled: boolean
+    outOfStockLabel: string
+    availability: boolean
+    hasVariants: boolean
+    skuMatrixControl: React.ReactNode
+    quantity: number
+    min?: number
+    max?: number
+    onChangeQuantity(value: number): void
+    buyProps?: {
+      onClick: (e: React.MouseEvent<HTMLButtonElement>) => void
+      'data-testid': string
+      'data-sku': string
+      'data-seller': string
+    }
+  }
+  /**
+   * Event emitted when value is out of the min and max bounds
+   */
+  onValidateBlur?: (min: number, maxValue: number, quantity: number) => void
 }
 
 const SearchProductItemContent = forwardRef<
   HTMLElement,
   SearchProductItemContentProps
->(function SearchProductItemContent({ price, title, ...otherProps }, ref) {
+>(function SearchProductItemContent(
+  { price, title, quickOrder, onValidateBlur, ...otherProps },
+  ref
+) {
+  const renderProductItemContent = useCallback(() => {
+    return (
+      <>
+        <p data-fs-search-product-item-title>{title}</p>
+        {price.value !== 0 && (
+          <ProductPrice
+            data-fs-search-product-item-prices
+            listPrice={price.listPrice}
+            value={price.value}
+            formatter={price.formatter}
+          />
+        )}
+      </>
+    )
+  }, [price.formatter, price.listPrice, price.value, title])
+
   return (
     <section ref={ref} data-fs-search-product-item-content {...otherProps}>
-      <p data-fs-search-product-item-title>{title}</p>
+      {!quickOrder?.enabled && renderProductItemContent()}
 
-      {price.value !== 0 && (
-        <ProductPrice
-          data-fs-search-product-item-prices
-          listPrice={price.listPrice}
-          value={price.value}
-          formatter={price.formatter}
-        />
+      {quickOrder?.enabled && (
+        <SearchProductItemControl
+          outOfStockLabel={quickOrder.outOfStockLabel}
+          availability={quickOrder.availability}
+          hasVariants={quickOrder.hasVariants}
+          skuMatrixControl={quickOrder.skuMatrixControl}
+          quantity={quickOrder.quantity}
+          onChangeQuantity={quickOrder.onChangeQuantity}
+          max={quickOrder.max}
+          onValidateBlur={onValidateBlur}
+          {...quickOrder.buyProps}
+        >
+          {renderProductItemContent()}
+        </SearchProductItemControl>
       )}
     </section>
   )