@faststore/components 3.65.0 → 3.68.0

package/dist/esm/organisms/Filter/FilterSlider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterSlider.d.ts","sourceRoot":"","sources":["../../../../src/organisms/Filter/FilterSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAC9D,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,YAAY,EAKlB,MAAM,QAAQ,CAAA;AAEf,OAAO,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAA;AAE1E,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,SAAS,EAAE,kBAAkB,CAAA;IAC7B;;OAEG;IACH,IAAI,EAAE,kBAAkB,CAAA;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;IACpC;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;IACpC;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,iBAAS,YAAY,CAAC,EACpB,KAAK,EACL,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,aAAa,EACb,aAAa,EACb,YAAY,EACZ,OAAO,EACP,GAAG,UAAU,EACd,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,qBAyCtC;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"FilterSlider.d.ts","sourceRoot":"","sources":["../../../../src/organisms/Filter/FilterSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAC9D,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,YAAY,EAKlB,MAAM,QAAQ,CAAA;AAEf,OAAO,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAA;AAE1E,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,SAAS,EAAE,kBAAkB,CAAA;IAC7B;;OAEG;IACH,IAAI,EAAE,kBAAkB,CAAA;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;IACpC;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;IACpC;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,iBAAS,YAAY,CAAC,EACpB,MAA2B,EAC3B,KAAK,EACL,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,aAAa,EACb,aAAa,EACb,YAAY,EACZ,OAAO,EACP,SAAS,EACT,MAAa,EACb,GAAG,UAAU,EACd,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,qBA2DtC;AAED,eAAe,YAAY,CAAA"}

package/dist/esm/organisms/Filter/FilterSlider.js

@@ -1,9 +1,17 @@
 import React from 'react';
 import { Button, SlideOver, SlideOverHeader, useFadeEffect, useUI, } from '../../';
-function FilterSlider({ title, size, direction, children, applyBtnProps, clearBtnProps, overlayProps, onClose, ...otherProps }) {
+function FilterSlider({ testId = 'fs-filter-slider', title, size, direction, children, applyBtnProps, clearBtnProps, overlayProps, onClose, onDismiss, footer = true, ...otherProps }) {
     const { fade, fadeOut } = useFadeEffect();
-    const { closeFilter } = useUI();
-    return (React.createElement(SlideOver, { "data-fs-filter-slider": true, isOpen: true, fade: fade, onDismiss: fadeOut, size: size, direction: direction, onTransitionEnd: () => fade === 'out' && closeFilter(), overlayProps: overlayProps, ...otherProps },
+    const { closeFilter, closeRegionSlider } = useUI();
+    return (React.createElement(SlideOver, { "data-fs-filter-slider": true, isOpen: true, fade: fade, onDismiss: () => {
+            fadeOut();
+            onDismiss?.();
+        }, size: size, direction: direction, onTransitionEnd: () => {
+            if (fade === 'out') {
+                closeFilter();
+                closeRegionSlider();
+            }
+        }, testId: testId, overlayProps: overlayProps, ...otherProps },
         React.createElement("div", { "data-fs-filter-slider-content": true },
             React.createElement(SlideOverHeader, { onClose: () => {
                     onClose();
@@ -11,12 +19,12 @@ function FilterSlider({ title, size, direction, children, applyBtnProps, clearBt
                 } },
                 React.createElement("h2", { "data-fs-filter-slider-title": true }, title)),
             children),
-        React.createElement("footer", { "data-fs-filter-slider-footer": true },
-            React.createElement(Button, { "data-fs-filter-slider-footer-button-clear": true, ...clearBtnProps }),
-            React.createElement(Button, { "data-fs-filter-slider-footer-button-apply": true, "data-testid": "filter-slider-button-apply", ...applyBtnProps, onClick: (e) => {
+        footer && (React.createElement("footer", { "data-fs-filter-slider-footer": true },
+            clearBtnProps && (React.createElement(Button, { "data-fs-filter-slider-footer-button-clear": true, ...clearBtnProps })),
+            applyBtnProps && (React.createElement(Button, { "data-fs-filter-slider-footer-button-apply": true, testId: `${testId}-button-apply`, ...applyBtnProps, onClick: (e) => {
                     applyBtnProps?.onClick?.(e);
                     fadeOut();
-                } }))));
+                } }))))));
 }
 export default FilterSlider;
 //# sourceMappingURL=FilterSlider.js.map

package/dist/esm/organisms/Filter/FilterSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterSlider.js","sourceRoot":"","sources":["../../../../src/organisms/Filter/FilterSlider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EACL,MAAM,EAGN,SAAS,EACT,eAAe,EACf,aAAa,EACb,KAAK,GACN,MAAM,QAAQ,CAAA;AAmCf,SAAS,YAAY,CAAC,EACpB,KAAK,EACL,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,aAAa,EACb,aAAa,EACb,YAAY,EACZ,OAAO,EACP,GAAG,UAAU,EACwB;IACrC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,aAAa,EAAE,CAAA;IACzC,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,CAAA;IAE/B,OAAO,CACL,oBAAC,SAAS,mCAER,MAAM,QACN,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,OAAO,EAClB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,GAAG,EAAE,CAAC,IAAI,KAAK,KAAK,IAAI,WAAW,EAAE,EACtD,YAAY,EAAE,YAAY,KACtB,UAAU;QAEd;YACE,oBAAC,eAAe,IACd,OAAO,EAAE,GAAG,EAAE;oBACZ,OAAO,EAAE,CAAA;oBACT,OAAO,EAAE,CAAA;gBACX,CAAC;gBAED,mEAAiC,KAAK,CAAM,CAC5B;YACjB,QAAQ,CACL;QACN;YACE,oBAAC,MAAM,0DAA+C,aAAa,GAAI;YACvE,oBAAC,MAAM,sEAEO,4BAA4B,KACpC,aAAa,EACjB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,aAAa,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;oBAC3B,OAAO,EAAE,CAAA;gBACX,CAAC,GACD,CACK,CACC,CACb,CAAA;AACH,CAAC;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"FilterSlider.js","sourceRoot":"","sources":["../../../../src/organisms/Filter/FilterSlider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EACL,MAAM,EAGN,SAAS,EACT,eAAe,EACf,aAAa,EACb,KAAK,GACN,MAAM,QAAQ,CAAA;AAiDf,SAAS,YAAY,CAAC,EACpB,MAAM,GAAG,kBAAkB,EAC3B,KAAK,EACL,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,aAAa,EACb,aAAa,EACb,YAAY,EACZ,OAAO,EACP,SAAS,EACT,MAAM,GAAG,IAAI,EACb,GAAG,UAAU,EACwB;IACrC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,aAAa,EAAE,CAAA;IACzC,MAAM,EAAE,WAAW,EAAE,iBAAiB,EAAE,GAAG,KAAK,EAAE,CAAA;IAElD,OAAO,CACL,oBAAC,SAAS,mCAER,MAAM,QACN,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,GAAG,EAAE;YACd,OAAO,EAAE,CAAA;YACT,SAAS,EAAE,EAAE,CAAA;QACf,CAAC,EACD,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,GAAG,EAAE;YACpB,IAAI,IAAI,KAAK,KAAK,EAAE,CAAC;gBACnB,WAAW,EAAE,CAAA;gBACb,iBAAiB,EAAE,CAAA;YACrB,CAAC;QACH,CAAC,EACD,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,KACtB,UAAU;QAEd;YACE,oBAAC,eAAe,IACd,OAAO,EAAE,GAAG,EAAE;oBACZ,OAAO,EAAE,CAAA;oBACT,OAAO,EAAE,CAAA;gBACX,CAAC;gBAED,mEAAiC,KAAK,CAAM,CAC5B;YACjB,QAAQ,CACL;QACL,MAAM,IAAI,CACT;YACG,aAAa,IAAI,CAChB,oBAAC,MAAM,0DAED,aAAa,GACjB,CACH;YACA,aAAa,IAAI,CAChB,oBAAC,MAAM,uDAEL,MAAM,EAAE,GAAG,MAAM,eAAe,KAC5B,aAAa,EACjB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,aAAa,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;oBAC3B,OAAO,EAAE,CAAA;gBACX,CAAC,GACD,CACH,CACM,CACV,CACS,CACb,CAAA;AACH,CAAC;AAED,eAAe,YAAY,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "3.65.0",
+  "version": "3.68.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": "1dea73f0a9afa63aa0edcc3eb8433bd1155f3e74"
+  "gitHead": "ecc700eec58eaa22c6ae8c5f655c204ecf18f598"
 }

package/src/hooks/UIProvider.tsx

@@ -13,6 +13,21 @@ export interface Popover {
   triggerRef?: RefObject<HTMLElement>
 }
 
+export const regionSliderTypes = {
+  setLocation: 'setLocation',
+  changeLocation: 'changeLocation',
+  changePickupPoint: 'changePickupPoint',
+  globalChangePickupPoint: 'globalChangePickupPoint',
+} as const
+
+type RegionSliderType =
+  (typeof regionSliderTypes)[keyof typeof regionSliderTypes]
+
+export type RegionSlider = {
+  type: RegionSliderType | 'none'
+  isOpen: boolean
+}
+
 interface State {
   /** Cart sidebar */
   cart: boolean
@@ -26,6 +41,8 @@ interface State {
   toasts: Toast[]
   /** Region Popover */
   popover: Popover
+  /** Region slider */
+  regionSlider: RegionSlider
 }
 
 type UIElement = 'navbar' | 'cart' | 'modal' | 'filter'
@@ -56,6 +73,13 @@ type Action =
   | {
       type: 'closePopover'
     }
+  | {
+      type: 'openRegionSlider'
+      payload: RegionSliderType
+    }
+  | {
+      type: 'closeRegionSlider'
+    }
 
 const reducer = (state: State, action: Action): State => {
   const { type } = action
@@ -127,6 +151,30 @@ const reducer = (state: State, action: Action): State => {
       }
     }
 
+    case 'openRegionSlider': {
+      document.body.classList.add('no-scroll')
+
+      return {
+        ...state,
+        regionSlider: {
+          type: action.payload,
+          isOpen: true,
+        },
+      }
+    }
+    case 'closeRegionSlider':
+      if (!state.filter) {
+        document.body.classList.remove('no-scroll')
+      }
+
+      return {
+        ...state,
+        regionSlider: {
+          type: 'none',
+          isOpen: false,
+        },
+      }
+
     default:
       throw new Error(`Action ${type} not implemented`)
   }
@@ -142,6 +190,10 @@ const initializer = (): State => ({
     isOpen: false,
     triggerRef: undefined,
   },
+  regionSlider: {
+    type: 'none',
+    isOpen: false,
+  },
 })
 
 interface Context extends State {
@@ -157,6 +209,8 @@ interface Context extends State {
   popToast: () => void
   openPopover: (popover: Popover) => void
   closePopover: () => void
+  openRegionSlider: (type: RegionSliderType) => void
+  closeRegionSlider: () => void
 }
 
 const UIContext = createContext<Context | undefined>(undefined)
@@ -180,6 +234,9 @@ function UIProvider({ children }: PropsWithChildren<unknown>) {
       openPopover: (popover: Popover) =>
         dispatch({ type: 'openPopover', payload: popover }),
       closePopover: () => dispatch({ type: 'closePopover' }),
+      openRegionSlider: (type: RegionSliderType) =>
+        dispatch({ type: 'openRegionSlider', payload: type }),
+      closeRegionSlider: () => dispatch({ type: 'closeRegionSlider' }),
     }),
     []
   )

package/src/hooks/index.ts

@@ -1,15 +1,20 @@
-export { default as UIProvider, Toast as ToastProps, useUI } from './UIProvider'
+export {
+  regionSliderTypes,
+  Toast as ToastProps,
+  default as UIProvider,
+  useUI,
+} from './UIProvider'
 export { useFadeEffect } from './useFadeEffect'
 export { useOnClickOutside } from './useOnClickOutside'
+export { useScrollDirection } from './useScrollDirection'
 export { useSearch } from './useSearch'
 export { useSKUMatrix } from './useSKUMatrix'
-export { useScrollDirection } from './useScrollDirection'
 export { useSlider } from './useSlider'
 export type {
-  UseSliderArgs,
-  SliderState,
-  SliderDispatch,
   SlideDirection,
+  SliderDispatch,
+  SliderState,
+  UseSliderArgs,
 } from './useSlider'
 export { useSlideVisibility } from './useSlideVisibility'
 export { useTrapFocus } from './useTrapFocus'

package/src/molecules/Accordion/Accordion.tsx

@@ -37,7 +37,11 @@ const Accordion = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(
 ) {
   const childrenWithIndex = React.Children.map(
     children as ReactElement,
-    (child, index) => cloneElement(child, { index: child.props.index ?? index })
+    (child, index) => {
+      if (!child) return
+
+      return cloneElement(child, { index: child.props.index ?? index })
+    }
   )
 
   const context = {

package/src/molecules/Modal/Modal.tsx

@@ -108,13 +108,15 @@ const Modal = ({
           {...overlayProps}
         >
           <ModalContent
-            // TODO:
-            // Using onTransitionEnd can lead to unexpected behavior. Since ModalContentPure uses the useTrapFocus hook,
-            // focus is automatically moved to the first focusable element inside the modal—typically the Close Button.
-            // This causes the onTransitionEnd event listener to attach to the Close Button instead of the ModalContent.
-            // As a result, we may end up listening to the transition of the button (e.g., its focus animation) rather than
-            // the intended transform transition of the modal content, which can introduce bugs during modal animations.
-            onTransitionEnd={() => {
+            onTransitionEnd={(e) => {
+              // Checks if the event wast triggered by this modal or is a bubble event
+              if ((e.target as HTMLElement)?.dataset?.testid !== testId) return
+              // TODO:
+              // Using onTransitionEnd can lead to unexpected behavior. Since ModalContentPure uses the useTrapFocus hook,
+              // focus is automatically moved to the first focusable element inside the modal—typically the Close Button.
+              // This causes the onTransitionEnd event listener to attach to the Close Button instead of the ModalContent.
+              // As a result, we may end up listening to the transition of the button (e.g., its focus animation) rather than
+              // the intended transform transition of the modal content, which can introduce bugs during modal animations.
               if (fade === 'out') {
                 closeModal()
               } else if (fade === 'in' && onEntered) {

package/src/molecules/RadioField/RadioField.tsx

@@ -1,10 +1,13 @@
-import type { HTMLAttributes } from 'react'
+import type { HTMLAttributes, ReactNode, InputHTMLAttributes } from 'react'
 import React, { forwardRef } from 'react'
 
 import Label from '../../atoms/Label'
 import Radio from '../../atoms/Radio'
 
-export interface RadioFieldProps extends HTMLAttributes<HTMLDivElement> {
+type EnhancedRadioFieldProps = HTMLAttributes<HTMLDivElement> &
+  Pick<InputHTMLAttributes<HTMLInputElement>, 'checked'>
+
+export interface RadioFieldProps extends EnhancedRadioFieldProps {
   /**
    * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
    */
@@ -14,9 +17,9 @@ export interface RadioFieldProps extends HTMLAttributes<HTMLDivElement> {
    */
   id: string
   /**
-   * The text displayed to identify the input radio.
+   * The text or component displayed to identify the input radio.
    */
-  label: string
+  label: string | ReactNode
   /**
    * The value to identify the input radio.
    */
@@ -34,7 +37,12 @@ const RadioField = forwardRef<HTMLDivElement, RadioFieldProps>(
   ) {
     return (
       <div ref={ref} data-fs-radio-field data-testid={testId}>
-        <Radio id={id} value={value ?? label} name={name} {...otherProps} />
+        <Radio
+          id={id}
+          value={typeof label === 'string' ? label : value}
+          name={name}
+          {...otherProps}
+        />
         <Label htmlFor={id}>{label}</Label>
       </div>
     )

package/src/molecules/RegionBar/RegionBar.tsx

@@ -15,11 +15,11 @@ export interface RegionBarProps
    */
   postalCode?: string
   /**
-   * Function called when button is clicked.
+   * Function called when location button is clicked.
    */
   onButtonClick?: () => void
   /**
-   * A React component that will be rendered as an icon.
+   * A React component that will be rendered as the location icon.
    */
   icon?: ReactNode
   /**
@@ -27,7 +27,8 @@ export interface RegionBarProps
    */
   label: string
   /**
-   * Specifies a label for the edit text.
+   * Specifies a label for the edit location text.
+   * @deprecated
    */
   editLabel?: string
   /**
@@ -39,18 +40,51 @@ export interface RegionBarProps
    * @default true
    */
   shouldDisplayPostalCode?: boolean
+  /**
+   * Properties of the global filter button.
+   */
+  filterButton?: {
+    /**
+     * A React component that will be rendered as the filter icon.
+     */
+    icon?: ReactNode
+    /**
+     * Specifies a label for the filter text.
+     */
+    label?: string
+    /**
+     * The current selected filter name.
+     */
+    selectedFilter?: string
+    /**
+     * Boolean to control whether the filter button should be visible or not.
+     * @default false
+     */
+    shouldDisplayFilterButton?: boolean
+    /**
+     * Function called when filter button is clicked.
+     */
+    onClick?: () => void
+  }
 }
 
 const RegionBar = forwardRef<HTMLDivElement, RegionBarProps>(function RegionBar(
   {
     city,
     postalCode,
-    icon,
-    label,
-    editLabel,
+    icon: locationIcon,
+    label: locationLabel,
+    editLabel: _ = undefined,
     buttonIcon,
-    onButtonClick,
+    onButtonClick: onLocationButtonClick,
     shouldDisplayPostalCode = true,
+    filterButton: {
+      icon: filterIcon,
+      label: filterLabel,
+      selectedFilter,
+      shouldDisplayFilterButton = false,
+      onClick: onFilterButtonClick,
+    } = {},
     ...otherProps
   },
   ref
@@ -59,23 +93,44 @@ const RegionBar = forwardRef<HTMLDivElement, RegionBarProps>(function RegionBar(
     <div ref={ref} data-fs-region-bar {...otherProps}>
       <Button
         variant="tertiary"
-        iconPosition="right"
-        onClick={onButtonClick}
-        icon={buttonIcon}
+        iconPosition={buttonIcon ? 'right' : undefined}
+        onClick={onLocationButtonClick}
+        icon={buttonIcon ?? undefined}
       >
-        {!!icon && icon}
+        {!!locationIcon && locationIcon}
         {city && postalCode ? (
-          <>
-            <span data-fs-region-bar-postal-code>
+          <div data-fs-region-bar-location>
+            <span
+              data-fs-region-bar-postal-code
+              data-fs-region-bar-location-city
+            >
               {city}
+            </span>
+            <span data-fs-region-bar-location-postal-code>
               {shouldDisplayPostalCode && `, ${postalCode}`}
             </span>
-            {!!editLabel && <span data-fs-region-bar-cta>{editLabel}</span>}
-          </>
+          </div>
         ) : (
-          <span data-fs-region-bar-message>{label}</span>
+          <span data-fs-region-bar-message data-fs-region-bar-location-message>
+            {locationLabel}
+          </span>
         )}
       </Button>
+      {shouldDisplayFilterButton && (
+        <Button
+          variant="tertiary"
+          iconPosition={buttonIcon ? 'right' : undefined}
+          onClick={onFilterButtonClick}
+          icon={buttonIcon ?? undefined}
+        >
+          {!!filterIcon && filterIcon}
+          {selectedFilter ? (
+            <span data-fs-region-bar-filter>{selectedFilter}</span>
+          ) : (
+            <span data-fs-region-bar-filter-message>{filterLabel}</span>
+          )}
+        </Button>
+      )}
     </div>
   )
 })

package/src/organisms/Filter/FilterFacetBooleanItem.tsx

@@ -1,5 +1,6 @@
+import type { ReactNode } from 'react'
 import React from 'react'
-import { Badge, Checkbox, Label } from '../..'
+import { Badge, Checkbox, Label, RadioField } from '../..'
 import type { OnFacetChange } from './Filter'
 
 export interface FilterFacetBooleanItemProps {
@@ -10,7 +11,7 @@ export interface FilterFacetBooleanItemProps {
   /**
    * The text displayed to identify the Boolean Facet Item.
    */
-  label: string
+  label: string | ReactNode
   /**
    * Value to be emitted when Checkbox is clicked.
    */
@@ -22,7 +23,7 @@ export interface FilterFacetBooleanItemProps {
   /**
    * Counter badge shown besides the Facet Item.
    */
-  quantity: number
+  quantity?: number
   /**
    * ID to identify the Checkbox and corresponding label.
    */
@@ -35,6 +36,10 @@ export interface FilterFacetBooleanItemProps {
    * This function is called when `Checkbox` from the facet changes.
    */
   onFacetChange: OnFacetChange
+  /**
+   * Type of the Facet Item.
+   */
+  type?: 'checkbox' | 'radio'
 }
 
 function FilterFacetBooleanItem({
@@ -45,26 +50,43 @@ function FilterFacetBooleanItem({
   quantity,
   facetKey,
   label,
+  type = 'checkbox',
   onFacetChange,
 }: FilterFacetBooleanItemProps) {
   return (
     <li key={id} data-fs-filter-list-item>
-      <Checkbox
-        id={id}
-        checked={selected}
-        onChange={() => onFacetChange({ key: facetKey, value }, 'BOOLEAN')}
-        data-fs-filter-list-item-checkbox
-        data-testid={`${testId}-accordion-panel-checkbox`}
-        data-value={value}
-        data-quantity={quantity}
-      />
-      <Label
-        htmlFor={id}
-        className="text__title-mini-alt"
-        data-fs-filter-list-item-label
-      >
-        {label} <Badge data-fs-filter-list-item-badge>{quantity}</Badge>
-      </Label>
+      {type === 'checkbox' ? (
+        <>
+          <Checkbox
+            id={id}
+            checked={selected}
+            onChange={() => onFacetChange({ key: facetKey, value }, 'BOOLEAN')}
+            data-fs-filter-list-item-checkbox
+            data-testid={`${testId}-accordion-panel-checkbox`}
+            data-value={value}
+            data-quantity={quantity}
+          />
+          <Label
+            htmlFor={id}
+            className="text__title-mini-alt"
+            data-fs-filter-list-item-label
+          >
+            {label} <Badge data-fs-filter-list-item-badge>{quantity}</Badge>
+          </Label>
+        </>
+      ) : (
+        <RadioField
+          id={id}
+          name={facetKey}
+          value={value}
+          checked={selected}
+          onChange={() => onFacetChange({ key: facetKey, value }, 'BOOLEAN')}
+          data-fs-filter-list-item-radio
+          data-testid={`${testId}-accordion-panel-radio`}
+          data-value={value}
+          label={label}
+        />
+      )}
     </li>
   )
 }

package/src/organisms/Filter/FilterFacets.tsx

@@ -18,6 +18,10 @@ export interface FilterFacetsProps {
    * The text displayed to identify the Facet.
    */
   label: string
+  /**
+   * The description displayed to identify the Facet.
+   */
+  description?: string
 }
 
 function FilterFacets({
@@ -26,6 +30,7 @@ function FilterFacets({
   index,
   children,
   type,
+  description,
 }: PropsWithChildren<FilterFacetsProps>) {
   return (
     <AccordionItem
@@ -39,7 +44,12 @@ function FilterFacets({
       <AccordionButton testId={`${testId}-accordion-button`}>
         {label}
       </AccordionButton>
-      <AccordionPanel>{children}</AccordionPanel>
+      <AccordionPanel>
+        {description && (
+          <span data-fs-filter-accordion-item-description>{description}</span>
+        )}
+        {children}
+      </AccordionPanel>
     </AccordionItem>
   )
 }

package/src/organisms/Filter/FilterSlider.tsx

@@ -14,6 +14,11 @@ import {
 import type { SlideOverDirection, SlideOverWidthSize } from '../SlideOver'
 
 export interface FilterSliderProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
   /**
    * Title for the FilterSlider component.
    */
@@ -42,9 +47,19 @@ export interface FilterSliderProps extends HTMLAttributes<HTMLDivElement> {
    * Function called when Close Button is clicked.
    */
   onClose: () => void
+  /**
+   * This function is called whenever the user clicks outside the slider content.
+   */
+  onDismiss?: () => void
+  /**
+   * Display FilterSlider footer with buttons.
+   * @default true
+   */
+  footer?: boolean
 }
 
 function FilterSlider({
+  testId = 'fs-filter-slider',
   title,
   size,
   direction,
@@ -53,20 +68,31 @@ function FilterSlider({
   clearBtnProps,
   overlayProps,
   onClose,
+  onDismiss,
+  footer = true,
   ...otherProps
 }: PropsWithChildren<FilterSliderProps>) {
   const { fade, fadeOut } = useFadeEffect()
-  const { closeFilter } = useUI()
+  const { closeFilter, closeRegionSlider } = useUI()
 
   return (
     <SlideOver
       data-fs-filter-slider
       isOpen
       fade={fade}
-      onDismiss={fadeOut}
+      onDismiss={() => {
+        fadeOut()
+        onDismiss?.()
+      }}
       size={size}
       direction={direction}
-      onTransitionEnd={() => fade === 'out' && closeFilter()}
+      onTransitionEnd={() => {
+        if (fade === 'out') {
+          closeFilter()
+          closeRegionSlider()
+        }
+      }}
+      testId={testId}
       overlayProps={overlayProps}
       {...otherProps}
     >
@@ -81,18 +107,27 @@ function FilterSlider({
         </SlideOverHeader>
         {children}
       </div>
-      <footer data-fs-filter-slider-footer>
-        <Button data-fs-filter-slider-footer-button-clear {...clearBtnProps} />
-        <Button
-          data-fs-filter-slider-footer-button-apply
-          data-testid="filter-slider-button-apply"
-          {...applyBtnProps}
-          onClick={(e) => {
-            applyBtnProps?.onClick?.(e)
-            fadeOut()
-          }}
-        />
-      </footer>
+      {footer && (
+        <footer data-fs-filter-slider-footer>
+          {clearBtnProps && (
+            <Button
+              data-fs-filter-slider-footer-button-clear
+              {...clearBtnProps}
+            />
+          )}
+          {applyBtnProps && (
+            <Button
+              data-fs-filter-slider-footer-button-apply
+              testId={`${testId}-button-apply`}
+              {...applyBtnProps}
+              onClick={(e) => {
+                applyBtnProps?.onClick?.(e)
+                fadeOut()
+              }}
+            />
+          )}
+        </footer>
+      )}
     </SlideOver>
   )
 }