@faststore/components 3.65.0 → 3.70.2

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>
   )
 }

package/src/organisms/SKUMatrix/SKUMatrixSidebar.tsx

@@ -20,8 +20,8 @@ interface VariationProductColumn {
     label: string
     stockDisplaySettings: 'showStockQuantity' | 'showAvailability'
   }
-  price: number
-  quantitySelector: number
+  price: string
+  quantitySelector: string
 }
 
 const ImageComponentFallback: SKUMatrixSidebarProps['ImageComponent'] = ({