@faststore/ui 1.9.14 → 1.10.7

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.10.7](https://github.com/vtex/faststore/compare/v1.10.6...v1.10.7) (2022-07-06)
+
+
+### Features
+
+* Supports update of `Slider` and `PriceRange` values ([#1380](https://github.com/vtex/faststore/issues/1380)) ([41dca35](https://github.com/vtex/faststore/commit/41dca35f0c320cf1659e8a74032cc2ee755a9f6f))
+
+
+
+
+
+## 1.10.6 (2022-07-05)
+
+
+### Features
+
+* Support for cross selling API ([#1396](https://github.com/vtex/faststore/issues/1396)) ([98eb7e2](https://github.com/vtex/faststore/commit/98eb7e2cc6670bcb05d00418f901e26a2e9db8f0))
+
+
+
+
+
+## [1.9.19](https://github.com/vtex/faststore/compare/v1.9.18...v1.9.19) (2022-06-29)
+
+**Note:** Version bump only for package @faststore/ui
+
+
+
+
+
 ## [1.9.14](https://github.com/vtex/faststore/compare/v1.9.13...v1.9.14) (2022-06-23)
 
 **Note:** Version bump only for package @faststore/ui

package/dist/atoms/Slider/Slider.d.ts

@@ -1,4 +1,7 @@
-/// <reference types="react" />
+/**
+ * This code is inspired by the work of [sandra-lewis](https://codesandbox.io/u/sandra-lewis)
+ */
+import React from 'react';
 interface Range {
     absolute: number;
     selected: number;
@@ -41,5 +44,11 @@ export declare type SliderProps = {
      */
     className?: string;
 };
-declare const Slider: ({ min, max, onChange, onEnd, testId, getAriaValueText, className, }: SliderProps) => JSX.Element;
+declare type SliderRefType = {
+    setSliderValues: (values: {
+        min: number;
+        max: number;
+    }) => void;
+};
+declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<SliderRefType | undefined>>;
 export default Slider;

package/dist/atoms/Slider/Slider.js

@@ -1,9 +1,9 @@
 /**
  * This code is inspired by the work of [sandra-lewis](https://codesandbox.io/u/sandra-lewis)
  */
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useImperativeHandle, forwardRef, } from 'react';
 const percent = (value, min, max) => Math.round(((value - min) / (max - min)) * 100);
-const Slider = ({ min, max, onChange, onEnd, testId = 'store-slider', getAriaValueText, className, }) => {
+const Slider = forwardRef(function Slider({ min, max, onChange, onEnd, testId = 'store-slider', getAriaValueText, className, }, ref) {
     const [minPercent, setMinPercent] = useState(() => percent(min.selected, min.absolute, max.absolute));
     const [maxPercent, setMaxPercent] = useState(() => percent(max.selected, min.absolute, max.absolute));
     const { minVal, maxVal } = useMemo(() => {
@@ -13,8 +13,19 @@ const Slider = ({ min, max, onChange, onEnd, testId = 'store-slider', getAriaVal
             maxVal: min.absolute + maxPercent * widthPercent,
         };
     }, [min, max, maxPercent, minPercent]);
+    useImperativeHandle(ref, () => ({
+        setSliderValues: (values) => {
+            const sliderMinValue = Math.min(Number(values.min), maxVal);
+            const sliderMaxValue = Math.max(Number(values.max), minVal);
+            setMinPercent(percent(sliderMinValue, min.absolute, max.absolute));
+            setMaxPercent(percent(sliderMaxValue, min.absolute, max.absolute));
+        },
+    }));
     return (React.createElement("div", { "data-store-slider": true, "data-testid": testId, className: className },
-        React.createElement("div", { style: { left: `${minPercent}%`, width: `${maxPercent - minPercent}%` }, "data-slider-range": true }),
+        React.createElement("div", { style: {
+                left: `${minPercent}%`,
+                width: `${maxPercent - minPercent}%`,
+            }, "data-slider-range": true }),
         React.createElement("input", { type: "range", min: min.absolute, max: max.absolute, value: minVal, onMouseUp: () => onEnd?.({ min: minVal, max: maxVal }), onTouchEnd: () => onEnd?.({ min: minVal, max: maxVal }), onChange: (event) => {
                 const minValue = Math.min(Number(event.target.value), maxVal);
                 setMinPercent(percent(minValue, min.absolute, max.absolute));
@@ -25,6 +36,6 @@ const Slider = ({ min, max, onChange, onEnd, testId = 'store-slider', getAriaVal
                 setMaxPercent(percent(maxValue, min.absolute, max.absolute));
                 onChange?.({ min: minVal, max: maxValue });
             }, "data-slider-thumb": "right", "aria-valuemin": min.absolute, "aria-valuemax": max.absolute, "aria-valuenow": maxVal, "aria-label": String(maxVal), "aria-labelledby": getAriaValueText?.(maxVal, 'max') })));
-};
+});
 export default Slider;
 //# sourceMappingURL=Slider.js.map

package/dist/atoms/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/atoms/Slider/Slider.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/atoms/Slider/Slider.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -34,6 +34,8 @@ export { default as Label } from './atoms/Label';
 export type { LabelProps } from './atoms/Label';
 export { default as Incentive } from './atoms/Incentive';
 export type { IncentiveProps } from './atoms/Incentive';
+export { default as AggregateRating } from './molecules/AggregateRating';
+export type { AggregateRatingProps } from './molecules/AggregateRating';
 export { default as ProductCard, ProductCardImage, ProductCardContent, ProductCardActions, } from './molecules/ProductCard';
 export type { ProductCardProps, ProductCardImageProps, ProductCardContentProps, ProductCardActionsProps, } from './molecules/ProductCard';
 export { default as Card, CardImage, CardContent, CardActions, } from './molecules/Card';

package/dist/index.js

@@ -18,6 +18,7 @@ export { default as Spinner } from './atoms/Spinner';
 export { default as Label } from './atoms/Label';
 export { default as Incentive } from './atoms/Incentive';
 // Molecules
+export { default as AggregateRating } from './molecules/AggregateRating';
 export { default as ProductCard, ProductCardImage, ProductCardContent, ProductCardActions, } from './molecules/ProductCard';
 export { default as Card, CardImage, CardContent, CardActions, } from './molecules/Card';
 export { default as Bullets } from './molecules/Bullets';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/molecules/PriceRange/PriceRange.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { AriaAttributes } from 'react';
 import type { PriceProps } from '../../atoms/Price';
 import type { SliderProps } from '../../atoms/Slider';
@@ -19,5 +20,28 @@ export declare type PriceRangeProps = SliderProps & {
      */
     'aria-label'?: AriaAttributes['aria-label'];
 };
-declare const PriceRange: ({ className, formatter, max, min, onChange, onEnd, testId, variant, "aria-label": ariaLabel, }: PriceRangeProps) => JSX.Element;
+declare type PriceRangeRefType = {
+    setPriceRangeValues: (values: {
+        min: number;
+        max: number;
+    }) => void;
+};
+declare const PriceRange: React.ForwardRefExoticComponent<SliderProps & {
+    /**
+     * The current use case variant for prices.
+     */
+    variant?: PriceProps['variant'];
+    /**
+     * Formatter function that transforms the raw price value and render the result.
+     */
+    formatter: PriceProps['formatter'];
+    /**
+     * Returns the value of element's class content attribute.
+     */
+    className?: string | undefined;
+    /**
+     * Defines a string value that labels the current element.
+     */
+    'aria-label'?: AriaAttributes['aria-label'];
+} & React.RefAttributes<PriceRangeRefType | undefined>>;
 export default PriceRange;

package/dist/molecules/PriceRange/PriceRange.js

@@ -1,16 +1,24 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useImperativeHandle, forwardRef } from 'react';
 import Price from '../../atoms/Price';
 import Slider from '../../atoms/Slider';
-const PriceRange = ({ className, formatter, max, min, onChange, onEnd, testId = 'store-price-range', variant, 'aria-label': ariaLabel, }) => {
+const PriceRange = forwardRef(function PriceRange({ className, formatter, max, min, onChange, onEnd, testId = 'store-price-range', variant, 'aria-label': ariaLabel, }, ref) {
+    const sliderRef = useRef();
     const [edges, setEdges] = useState({ min: min.selected, max: max.selected });
+    useImperativeHandle(ref, () => ({
+        setPriceRangeValues: (values) => {
+            setEdges(values);
+            onChange?.(values);
+            sliderRef.current?.setSliderValues(values);
+        },
+    }));
     return (React.createElement("div", { "data-store-price-range": true, "data-testid": testId, className: className },
-        React.createElement(Slider, { min: min, max: max, onEnd: onEnd, onChange: (value) => {
+        React.createElement(Slider, { ref: sliderRef, min: min, max: max, onEnd: onEnd, onChange: (value) => {
                 setEdges(value);
                 onChange?.(value);
             }, "aria-label": ariaLabel }),
         React.createElement("div", { "data-price-range-values": true },
             React.createElement(Price, { formatter: formatter, "data-price-range-value": "min", value: edges.min, variant: variant }),
             React.createElement(Price, { formatter: formatter, "data-price-range-value": "max", value: edges.max, variant: variant }))));
-};
+});
 export default PriceRange;
 //# sourceMappingURL=PriceRange.js.map

package/dist/molecules/PriceRange/PriceRange.js.map

@@ -1 +1 @@
-{"version":3,"file":"PriceRange.js","sourceRoot":"","sources":["../../../src/molecules/PriceRange/PriceRange.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAGvC,OAAO,KAAK,MAAM,mBAAmB,CAAA;AACrC,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAuBvC,MAAM,UAAU,GAAG,CAAC,EAClB,SAAS,EACT,SAAS,EACT,GAAG,EACH,GAAG,EACH,QAAQ,EACR,KAAK,EACL,MAAM,GAAG,mBAAmB,EAC5B,OAAO,EACP,YAAY,EAAE,SAAS,GACP,EAAE,EAAE;IACpB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,QAAQ,EAAE,GAAG,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAA;IAE5E,OAAO,CACL,4EAAyC,MAAM,EAAE,SAAS,EAAE,SAAS;QACnE,oBAAC,MAAM,IACL,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;gBAClB,QAAQ,CAAC,KAAK,CAAC,CAAA;gBACf,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAA;YACnB,CAAC,gBACW,SAAS,GACrB;QACF;YACE,oBAAC,KAAK,IACJ,SAAS,EAAE,SAAS,4BACG,KAAK,EAC5B,KAAK,EAAE,KAAK,CAAC,GAAG,EAChB,OAAO,EAAE,OAAO,GAChB;YACF,oBAAC,KAAK,IACJ,SAAS,EAAE,SAAS,4BACG,KAAK,EAC5B,KAAK,EAAE,KAAK,CAAC,GAAG,EAChB,OAAO,EAAE,OAAO,GAChB,CACE,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,UAAU,CAAA"}
+{"version":3,"file":"PriceRange.js","sourceRoot":"","sources":["../../../src/molecules/PriceRange/PriceRange.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGhF,OAAO,KAAK,MAAM,mBAAmB,CAAA;AACrC,OAAO,MAAM,MAAM,oBAAoB,CAAA;AA2BvC,MAAM,UAAU,GAAG,UAAU,CAC3B,SAAS,UAAU,CACjB,EACE,SAAS,EACT,SAAS,EACT,GAAG,EACH,GAAG,EACH,QAAQ,EACR,KAAK,EACL,MAAM,GAAG,mBAAmB,EAC5B,OAAO,EACP,YAAY,EAAE,SAAS,GACxB,EACD,GAAG;IAEH,MAAM,SAAS,GAAG,MAAM,EAEpB,CAAA;IACJ,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,QAAQ,EAAE,GAAG,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAA;IAE5E,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,mBAAmB,EAAE,CAAC,MAAoC,EAAE,EAAE;YAC5D,QAAQ,CAAC,MAAM,CAAC,CAAA;YAChB,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAA;YAClB,SAAS,CAAC,OAAO,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;QAC5C,CAAC;KACF,CAAC,CAAC,CAAA;IAEH,OAAO,CACL,4EAAyC,MAAM,EAAE,SAAS,EAAE,SAAS;QACnE,oBAAC,MAAM,IACL,GAAG,EAAE,SAAS,EACd,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;gBAClB,QAAQ,CAAC,KAAK,CAAC,CAAA;gBACf,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAA;YACnB,CAAC,gBACW,SAAS,GACrB;QACF;YACE,oBAAC,KAAK,IACJ,SAAS,EAAE,SAAS,4BACG,KAAK,EAC5B,KAAK,EAAE,KAAK,CAAC,GAAG,EAChB,OAAO,EAAE,OAAO,GAChB;YACF,oBAAC,KAAK,IACJ,SAAS,EAAE,SAAS,4BACG,KAAK,EAC5B,KAAK,EAAE,KAAK,CAAC,GAAG,EAChB,OAAO,EAAE,OAAO,GAChB,CACE,CACF,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,UAAU,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/ui",
-  "version": "1.9.14",
+  "version": "1.10.7",
   "description": "A lightweight, framework agnostic component library for React",
   "author": "emersonlaurentino",
   "license": "MIT",
@@ -80,11 +80,11 @@
     "react": "^17.0.2",
     "react-docgen-typescript-loader": "^3.7.2",
     "react-dom": "^17.0.2",
-    "shared": "^1.9.14",
+    "shared": "^1.10.6",
     "size-limit": "^7.0.8",
     "storybook-addon-themes": "^6.1.0",
     "tsdx": "^0.14.1",
     "typescript": "^4.2.4"
   },
-  "gitHead": "d37facb5b238781bb18ce48afb1b245e5c53038b"
+  "gitHead": "ab0f41d7b3fba483a6ba1afcbb78e6dfc766380d"
 }

package/src/atoms/Slider/Slider.tsx

@@ -1,7 +1,12 @@
 /**
  * This code is inspired by the work of [sandra-lewis](https://codesandbox.io/u/sandra-lewis)
  */
-import React, { useState, useMemo } from 'react'
+import React, {
+  useState,
+  useMemo,
+  useImperativeHandle,
+  forwardRef,
+} from 'react'
 
 interface Range {
   absolute: number
@@ -41,83 +46,105 @@ export type SliderProps = {
   className?: string
 }
 
+type SliderRefType = {
+  setSliderValues: (values: { min: number; max: number }) => void
+}
+
 const percent = (value: number, min: number, max: number) =>
   Math.round(((value - min) / (max - min)) * 100)
 
-const Slider = ({
-  min,
-  max,
-  onChange,
-  onEnd,
-  testId = 'store-slider',
-  getAriaValueText,
-  className,
-}: SliderProps) => {
-  const [minPercent, setMinPercent] = useState(() =>
-    percent(min.selected, min.absolute, max.absolute)
-  )
+const Slider = forwardRef<SliderRefType | undefined, SliderProps>(
+  function Slider(
+    {
+      min,
+      max,
+      onChange,
+      onEnd,
+      testId = 'store-slider',
+      getAriaValueText,
+      className,
+    },
+    ref
+  ) {
+    const [minPercent, setMinPercent] = useState(() =>
+      percent(min.selected, min.absolute, max.absolute)
+    )
 
-  const [maxPercent, setMaxPercent] = useState(() =>
-    percent(max.selected, min.absolute, max.absolute)
-  )
+    const [maxPercent, setMaxPercent] = useState(() =>
+      percent(max.selected, min.absolute, max.absolute)
+    )
 
-  const { minVal, maxVal } = useMemo(() => {
-    const widthPercent = (max.absolute - min.absolute) / 100
+    const { minVal, maxVal } = useMemo(() => {
+      const widthPercent = (max.absolute - min.absolute) / 100
 
-    return {
-      minVal: min.absolute + minPercent * widthPercent,
-      maxVal: min.absolute + maxPercent * widthPercent,
-    }
-  }, [min, max, maxPercent, minPercent])
+      return {
+        minVal: min.absolute + minPercent * widthPercent,
+        maxVal: min.absolute + maxPercent * widthPercent,
+      }
+    }, [min, max, maxPercent, minPercent])
 
-  return (
-    <div data-store-slider data-testid={testId} className={className}>
-      <div
-        style={{ left: `${minPercent}%`, width: `${maxPercent - minPercent}%` }}
-        data-slider-range
-      />
-      <input
-        type="range"
-        min={min.absolute}
-        max={max.absolute}
-        value={minVal}
-        onMouseUp={() => onEnd?.({ min: minVal, max: maxVal })}
-        onTouchEnd={() => onEnd?.({ min: minVal, max: maxVal })}
-        onChange={(event) => {
-          const minValue = Math.min(Number(event.target.value), maxVal)
+    useImperativeHandle(ref, () => ({
+      setSliderValues: (values: { min: number; max: number }) => {
+        const sliderMinValue = Math.min(Number(values.min), maxVal)
+        const sliderMaxValue = Math.max(Number(values.max), minVal)
 
-          setMinPercent(percent(minValue, min.absolute, max.absolute))
-          onChange?.({ min: minValue, max: maxVal })
-        }}
-        data-slider-thumb="left"
-        aria-valuemin={min.absolute}
-        aria-valuemax={max.absolute}
-        aria-valuenow={minVal}
-        aria-label={String(minVal)}
-        aria-labelledby={getAriaValueText?.(minVal, 'min')}
-      />
-      <input
-        type="range"
-        min={min.absolute}
-        max={max.absolute}
-        value={maxVal}
-        onMouseUp={() => onEnd?.({ min: minVal, max: maxVal })}
-        onTouchEnd={() => onEnd?.({ min: minVal, max: maxVal })}
-        onChange={(event) => {
-          const maxValue = Math.max(Number(event.target.value), minVal)
+        setMinPercent(percent(sliderMinValue, min.absolute, max.absolute))
+        setMaxPercent(percent(sliderMaxValue, min.absolute, max.absolute))
+      },
+    }))
 
-          setMaxPercent(percent(maxValue, min.absolute, max.absolute))
-          onChange?.({ min: minVal, max: maxValue })
-        }}
-        data-slider-thumb="right"
-        aria-valuemin={min.absolute}
-        aria-valuemax={max.absolute}
-        aria-valuenow={maxVal}
-        aria-label={String(maxVal)}
-        aria-labelledby={getAriaValueText?.(maxVal, 'max')}
-      />
-    </div>
-  )
-}
+    return (
+      <div data-store-slider data-testid={testId} className={className}>
+        <div
+          style={{
+            left: `${minPercent}%`,
+            width: `${maxPercent - minPercent}%`,
+          }}
+          data-slider-range
+        />
+        <input
+          type="range"
+          min={min.absolute}
+          max={max.absolute}
+          value={minVal}
+          onMouseUp={() => onEnd?.({ min: minVal, max: maxVal })}
+          onTouchEnd={() => onEnd?.({ min: minVal, max: maxVal })}
+          onChange={(event) => {
+            const minValue = Math.min(Number(event.target.value), maxVal)
+
+            setMinPercent(percent(minValue, min.absolute, max.absolute))
+            onChange?.({ min: minValue, max: maxVal })
+          }}
+          data-slider-thumb="left"
+          aria-valuemin={min.absolute}
+          aria-valuemax={max.absolute}
+          aria-valuenow={minVal}
+          aria-label={String(minVal)}
+          aria-labelledby={getAriaValueText?.(minVal, 'min')}
+        />
+        <input
+          type="range"
+          min={min.absolute}
+          max={max.absolute}
+          value={maxVal}
+          onMouseUp={() => onEnd?.({ min: minVal, max: maxVal })}
+          onTouchEnd={() => onEnd?.({ min: minVal, max: maxVal })}
+          onChange={(event) => {
+            const maxValue = Math.max(Number(event.target.value), minVal)
+
+            setMaxPercent(percent(maxValue, min.absolute, max.absolute))
+            onChange?.({ min: minVal, max: maxValue })
+          }}
+          data-slider-thumb="right"
+          aria-valuemin={min.absolute}
+          aria-valuemax={max.absolute}
+          aria-valuenow={maxVal}
+          aria-label={String(maxVal)}
+          aria-labelledby={getAriaValueText?.(maxVal, 'max')}
+        />
+      </div>
+    )
+  }
+)
 
 export default Slider

package/src/index.ts

@@ -54,6 +54,9 @@ export { default as Incentive } from './atoms/Incentive'
 export type { IncentiveProps } from './atoms/Incentive'
 
 // Molecules
+export { default as AggregateRating } from './molecules/AggregateRating'
+export type { AggregateRatingProps } from './molecules/AggregateRating'
+
 export {
   default as ProductCard,
   ProductCardImage,

package/src/molecules/PriceRange/PriceRange.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useRef, useImperativeHandle, forwardRef } from 'react'
 import type { AriaAttributes } from 'react'
 
 import Price from '../../atoms/Price'
@@ -25,47 +25,68 @@ export type PriceRangeProps = SliderProps & {
   'aria-label'?: AriaAttributes['aria-label']
 }
 
-const PriceRange = ({
-  className,
-  formatter,
-  max,
-  min,
-  onChange,
-  onEnd,
-  testId = 'store-price-range',
-  variant,
-  'aria-label': ariaLabel,
-}: PriceRangeProps) => {
-  const [edges, setEdges] = useState({ min: min.selected, max: max.selected })
+type PriceRangeRefType = {
+  setPriceRangeValues: (values: { min: number; max: number }) => void
+}
 
-  return (
-    <div data-store-price-range data-testid={testId} className={className}>
-      <Slider
-        min={min}
-        max={max}
-        onEnd={onEnd}
-        onChange={(value) => {
-          setEdges(value)
-          onChange?.(value)
-        }}
-        aria-label={ariaLabel}
-      />
-      <div data-price-range-values>
-        <Price
-          formatter={formatter}
-          data-price-range-value="min"
-          value={edges.min}
-          variant={variant}
-        />
-        <Price
-          formatter={formatter}
-          data-price-range-value="max"
-          value={edges.max}
-          variant={variant}
+const PriceRange = forwardRef<PriceRangeRefType | undefined, PriceRangeProps>(
+  function PriceRange(
+    {
+      className,
+      formatter,
+      max,
+      min,
+      onChange,
+      onEnd,
+      testId = 'store-price-range',
+      variant,
+      'aria-label': ariaLabel,
+    },
+    ref
+  ) {
+    const sliderRef = useRef<{
+      setSliderValues: (values: { min: number; max: number }) => void
+    }>()
+    const [edges, setEdges] = useState({ min: min.selected, max: max.selected })
+
+    useImperativeHandle(ref, () => ({
+      setPriceRangeValues: (values: { min: number; max: number }) => {
+        setEdges(values)
+        onChange?.(values)
+        sliderRef.current?.setSliderValues(values)
+      },
+    }))
+
+    return (
+      <div data-store-price-range data-testid={testId} className={className}>
+        <Slider
+          ref={sliderRef}
+          min={min}
+          max={max}
+          onEnd={onEnd}
+          onChange={(value) => {
+            setEdges(value)
+            onChange?.(value)
+          }}
+          aria-label={ariaLabel}
         />
+        <div data-price-range-values>
+          <Price
+            formatter={formatter}
+            data-price-range-value="min"
+            value={edges.min}
+            variant={variant}
+          />
+          <Price
+            formatter={formatter}
+            data-price-range-value="max"
+            value={edges.max}
+            variant={variant}
+          />
+        </div>
       </div>
-    </div>
-  )
-}
+    )
+  }
+)
 
 export default PriceRange