@faststore/components 3.42.0 → 3.45.0

package/dist/esm/organisms/RegionModal/RegionModal.d.ts

@@ -43,6 +43,10 @@ export interface RegionModalProps extends Omit<ModalProps, 'children'> {
      * Postal code input's label.
      */
     inputLabel?: string;
+    /**
+     * The text displayed on the InputField Button. Suggestion: maximum 9 characters.
+     */
+    inputButtonActionText?: string;
     /**
      * Enables fadeOut effect on modal after onSubmit function
      */
@@ -67,6 +71,11 @@ export interface RegionModalProps extends Omit<ModalProps, 'children'> {
      * Callback function when the input clear button is clicked.
      */
     onClear?: () => void;
+    /**
+     * Determines if the modal can be dismissed using the close button or the Escape key.
+     * @default true
+     */
+    dismissible?: boolean;
 }
-declare function RegionModal({ testId, title, description, closeButtonAriaLabel, idkPostalCodeLinkProps, errorMessage, inputRef, inputValue, inputLabel, fadeOutOnSubmit, overlayProps, onClose, onInput, onSubmit, onClear, ...otherProps }: RegionModalProps): React.JSX.Element;
+declare function RegionModal({ testId, title, description, closeButtonAriaLabel, idkPostalCodeLinkProps, errorMessage, inputRef, inputValue, inputLabel, inputButtonActionText, fadeOutOnSubmit, overlayProps, onClose, onInput, onSubmit, onClear, dismissible, ...otherProps }: RegionModalProps): React.JSX.Element;
 export default RegionModal;

package/dist/esm/organisms/RegionModal/RegionModal.js

@@ -1,19 +1,26 @@
 import React from 'react';
 import { InputField, Link, Modal, ModalBody, ModalHeader } from '../..';
-function RegionModal({ testId = 'fs-region-modal', title = 'Set your location', description = 'Prices, offers and availability may vary according to your location.', closeButtonAriaLabel = 'Close Region Modal', idkPostalCodeLinkProps, errorMessage, inputRef, inputValue, inputLabel = 'Postal Code', fadeOutOnSubmit, overlayProps, onClose, onInput, onSubmit, onClear, ...otherProps }) {
-    return (React.createElement(Modal, { "data-fs-region-modal": true, testId: testId, overlayProps: overlayProps, title: "Region modal", "aria-label": "Region modal", ...otherProps }, ({ fadeOut }) => (React.createElement(React.Fragment, null,
-        React.createElement(ModalHeader, { onClose: () => {
-                fadeOut();
-                onClose?.();
-            }, title: title, description: description, closeBtnProps: {
+function RegionModal({ testId = 'fs-region-modal', title = 'Set your location', description = 'Offers and availability vary by location.', closeButtonAriaLabel = 'Close Region Modal', idkPostalCodeLinkProps, errorMessage, inputRef, inputValue, inputLabel = 'Postal Code', inputButtonActionText = 'Apply', fadeOutOnSubmit, overlayProps, onClose, onInput, onSubmit, onClear, dismissible = true, ...otherProps }) {
+    return (React.createElement(Modal, { "data-fs-region-modal": true, testId: testId, overlayProps: overlayProps, title: "Region modal", "aria-label": "Region modal", disableEscapeKeyDown: !dismissible, onEntered: () => {
+            if (inputRef?.current) {
+                inputRef.current.focus();
+            }
+        }, ...otherProps }, ({ fadeOut }) => (React.createElement(React.Fragment, null,
+        React.createElement(ModalHeader, { ...(dismissible && {
+                onClose: () => {
+                    fadeOut();
+                    onClear?.();
+                    onClose?.();
+                },
+            }), title: title, description: description, closeBtnProps: {
                 'aria-label': closeButtonAriaLabel,
             } }),
         React.createElement(ModalBody, null,
-            React.createElement(InputField, { "data-fs-region-modal-input": true, id: `${testId}-input-field`, inputRef: inputRef, label: inputLabel, actionable: true, value: inputValue, onInput: (event) => onInput?.(event), onSubmit: () => {
+            React.createElement(InputField, { "data-fs-region-modal-input": true, id: `${testId}-input-field`, inputRef: inputRef, label: inputLabel, actionable: true, value: inputValue, buttonActionText: inputButtonActionText, onInput: (event) => onInput?.(event), onSubmit: () => {
                     onSubmit?.();
                     fadeOutOnSubmit ? fadeOut() : null;
                 }, onClear: () => onClear?.(), error: errorMessage }),
-            React.createElement(Link, { "data-fs-region-modal-link": true, ...idkPostalCodeLinkProps }))))));
+            idkPostalCodeLinkProps && (React.createElement(Link, { "data-fs-region-modal-link": true, ...idkPostalCodeLinkProps })))))));
 }
 export default RegionModal;
 //# sourceMappingURL=RegionModal.js.map

package/dist/esm/organisms/RegionModal/RegionModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"RegionModal.js","sourceRoot":"","sources":["../../../../src/organisms/RegionModal/RegionModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AA4EvE,SAAS,WAAW,CAAC,EACnB,MAAM,GAAG,iBAAiB,EAC1B,KAAK,GAAG,mBAAmB,EAC3B,WAAW,GAAG,sEAAsE,EACpF,oBAAoB,GAAG,oBAAoB,EAC3C,sBAAsB,EACtB,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,UAAU,GAAG,aAAa,EAC1B,eAAe,EACf,YAAY,EACZ,OAAO,EACP,OAAO,EACP,QAAQ,EACR,OAAO,EACP,GAAG,UAAU,EACI;IACjB,OAAO,CACL,oBAAC,KAAK,kCAEJ,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAC,cAAc,gBACT,cAAc,KACrB,UAAU,IAEb,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAChB;QACE,oBAAC,WAAW,IACV,OAAO,EAAE,GAAG,EAAE;gBACZ,OAAO,EAAE,CAAA;gBACT,OAAO,EAAE,EAAE,CAAA;YACb,CAAC,EACD,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE;gBACb,YAAY,EAAE,oBAAoB;aACnC,GACD;QACF,oBAAC,SAAS;YACR,oBAAC,UAAU,wCAET,EAAE,EAAE,GAAG,MAAM,cAAc,EAC3B,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,UAAU,EACjB,UAAU,QACV,KAAK,EAAE,UAAU,EACjB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,EACpC,QAAQ,EAAE,GAAG,EAAE;oBACb,QAAQ,EAAE,EAAE,CAAA;oBACZ,eAAe,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;gBACpC,CAAC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,EAC1B,KAAK,EAAE,YAAY,GACnB;YAEF,oBAAC,IAAI,0CAA+B,sBAAsB,GAAI,CACpD,CACX,CACJ,CACK,CACT,CAAA;AACH,CAAC;AAED,eAAe,WAAW,CAAA"}
+{"version":3,"file":"RegionModal.js","sourceRoot":"","sources":["../../../../src/organisms/RegionModal/RegionModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAqFvE,SAAS,WAAW,CAAC,EACnB,MAAM,GAAG,iBAAiB,EAC1B,KAAK,GAAG,mBAAmB,EAC3B,WAAW,GAAG,2CAA2C,EACzD,oBAAoB,GAAG,oBAAoB,EAC3C,sBAAsB,EACtB,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,UAAU,GAAG,aAAa,EAC1B,qBAAqB,GAAG,OAAO,EAC/B,eAAe,EACf,YAAY,EACZ,OAAO,EACP,OAAO,EACP,QAAQ,EACR,OAAO,EACP,WAAW,GAAG,IAAI,EAClB,GAAG,UAAU,EACI;IACjB,OAAO,CACL,oBAAC,KAAK,kCAEJ,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAC,cAAc,gBACT,cAAc,EACzB,oBAAoB,EAAE,CAAC,WAAW,EAClC,SAAS,EAAE,GAAG,EAAE;YACd,IAAI,QAAQ,EAAE,OAAO,EAAE,CAAC;gBACtB,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,CAAA;YAC1B,CAAC;QACH,CAAC,KACG,UAAU,IAEb,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAChB;QACE,oBAAC,WAAW,OACN,CAAC,WAAW,IAAI;gBAClB,OAAO,EAAE,GAAG,EAAE;oBACZ,OAAO,EAAE,CAAA;oBACT,OAAO,EAAE,EAAE,CAAA;oBACX,OAAO,EAAE,EAAE,CAAA;gBACb,CAAC;aACF,CAAC,EACF,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE;gBACb,YAAY,EAAE,oBAAoB;aACnC,GACD;QACF,oBAAC,SAAS;YACR,oBAAC,UAAU,wCAET,EAAE,EAAE,GAAG,MAAM,cAAc,EAC3B,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,UAAU,EACjB,UAAU,QACV,KAAK,EAAE,UAAU,EACjB,gBAAgB,EAAE,qBAAqB,EACvC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,EACpC,QAAQ,EAAE,GAAG,EAAE;oBACb,QAAQ,EAAE,EAAE,CAAA;oBACZ,eAAe,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;gBACpC,CAAC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,EAC1B,KAAK,EAAE,YAAY,GACnB;YACD,sBAAsB,IAAI,CACzB,oBAAC,IAAI,0CAA+B,sBAAsB,GAAI,CAC/D,CACS,CACX,CACJ,CACK,CACT,CAAA;AACH,CAAC;AAED,eAAe,WAAW,CAAA"}

package/dist/esm/organisms/ShippingSimulation/ShippingSimulation.d.ts

@@ -54,9 +54,9 @@ interface Address {
      */
     reference?: string;
     /**
-     * Address geoCoordinates
+     * Address geoCoordinates. [longitude, latitude]
      */
-    geoCoordinates?: [number];
+    geoCoordinates?: [number, number];
 }
 export interface ShippingSimulationProps extends HTMLAttributes<HTMLDivElement> {
     /**

package/dist/esm/organisms/SlideOver/SlideOverHeader.d.ts

@@ -5,7 +5,7 @@ export interface SlideOverHeaderProps extends Omit<HTMLAttributes<HTMLDivElement
     /**
      * A react component to be used as the title in the header.
      */
-    children: ReactNode;
+    children?: ReactNode;
     /**
      * Props for the Close Button component.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "3.42.0",
+  "version": "3.45.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "typings": "dist/esm/index.d.ts",
@@ -56,5 +56,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "d8814aed0849211cb76d06b880c6d556bf1ac898"
+  "gitHead": "7a888c79aa95c02416c95820f1a912f829fa379c"
 }

package/src/hooks/UIProvider.tsx

@@ -1,4 +1,4 @@
-import type { PropsWithChildren, ReactNode } from 'react'
+import type { PropsWithChildren, ReactNode, RefObject } from 'react'
 import React, { createContext, useContext, useMemo, useReducer } from 'react'
 
 export interface Toast {
@@ -8,6 +8,11 @@ export interface Toast {
   icon?: ReactNode
 }
 
+export interface Popover {
+  isOpen: boolean
+  triggerRef?: RefObject<HTMLElement>
+}
+
 interface State {
   /** Cart sidebar */
   cart: boolean
@@ -17,7 +22,10 @@ interface State {
   navbar: boolean
   /** Search page filter slider */
   filter: boolean
+  /** Toast notifications */
   toasts: Toast[]
+  /** Region Popover */
+  popover: Popover
 }
 
 type UIElement = 'navbar' | 'cart' | 'modal' | 'filter'
@@ -38,6 +46,16 @@ type Action =
   | {
       type: 'popToast'
     }
+  | {
+      type: 'openPopover'
+      payload: {
+        isOpen: boolean
+        triggerRef?: RefObject<HTMLElement>
+      }
+    }
+  | {
+      type: 'closePopover'
+    }
 
 const reducer = (state: State, action: Action): State => {
   const { type } = action
@@ -89,6 +107,26 @@ const reducer = (state: State, action: Action): State => {
       }
     }
 
+    case 'openPopover': {
+      return {
+        ...state,
+        popover: {
+          isOpen: true,
+          triggerRef: action.payload.triggerRef,
+        },
+      }
+    }
+
+    case 'closePopover': {
+      return {
+        ...state,
+        popover: {
+          isOpen: false,
+          triggerRef: undefined,
+        },
+      }
+    }
+
     default:
       throw new Error(`Action ${type} not implemented`)
   }
@@ -100,6 +138,10 @@ const initializer = (): State => ({
   navbar: false,
   filter: false,
   toasts: [],
+  popover: {
+    isOpen: false,
+    triggerRef: undefined,
+  },
 })
 
 interface Context extends State {
@@ -113,6 +155,8 @@ interface Context extends State {
   closeModal: () => void
   pushToast: (data: Toast) => void
   popToast: () => void
+  openPopover: (popover: Popover) => void
+  closePopover: () => void
 }
 
 const UIContext = createContext<Context | undefined>(undefined)
@@ -133,6 +177,9 @@ function UIProvider({ children }: PropsWithChildren<unknown>) {
       pushToast: (toast: Toast) =>
         dispatch({ type: 'pushToast', payload: toast }),
       popToast: () => dispatch({ type: 'popToast' }),
+      openPopover: (popover: Popover) =>
+        dispatch({ type: 'openPopover', payload: popover }),
+      closePopover: () => dispatch({ type: 'closePopover' }),
     }),
     []
   )

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/Accordion/AccordionButton.tsx

@@ -78,7 +78,7 @@ const AccordionButton = forwardRef<HTMLButtonElement, AccordionButtonProps>(
         ref={ref}
         id={button}
         variant="tertiary"
-        data-fs-accordion-button
+        data-fs-accordion-button={indices.has(index) ? 'expanded' : 'collapsed'}
         aria-expanded={indices.has(index)}
         icon={indices.has(index) ? expandedIcon : collapsedIcon}
         iconPosition="right"

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>}
           </>
         ) : (