Make slicing slider a controlled component

packages/lib/src/dimension-mapper/DimensionMapper.tsx

@@ -10,6 +10,7 @@ interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
   dimHints?: (string | undefined)[];
   dimMapping: DimensionMapping;
   withSlicingControls?: boolean;
+  defaultStride?: number;
   canSliceFast?: (nextMapping: DimensionMapping) => boolean;
   onChange: (d: DimensionMapping) => void;
 }
@@ -21,6 +22,7 @@ function DimensionMapper(props: Props) {
     dimHints,
     dimMapping,
     withSlicingControls = false,
+    defaultStride,
     canSliceFast,
     onChange,
     ...htmlProps
@@ -68,8 +70,9 @@ function DimensionMapper(props: Props) {
               key={index} // eslint-disable-line react/no-array-index-key
               dimension={index}
               length={dims[index]}
-              initialValue={val}
+              value={val}
               withControls={withSlicingControls}
+              defaultStride={defaultStride}
               isFastSlice={
                 canSliceFast &&
                 ((newVal) => {

packages/lib/src/dimension-mapper/SlicingSlider.tsx

@@ -15,8 +15,9 @@ const LONG_DELAY = 250;
 interface Props {
   dimension: number;
   length: number;
-  initialValue: number;
+  value: number;
   withControls: boolean;
+  defaultStride?: number;
   isFastSlice?: (value: number) => boolean;
   onChange: (value: number) => void;
 }
@@ -25,8 +26,9 @@ function SlicingSlider(props: Props) {
   const {
     dimension,
     length,
-    initialValue,
+    value,
     withControls,
+    defaultStride = 1,
     isFastSlice,
     onChange,
   } = props;
@@ -35,16 +37,23 @@ function SlicingSlider(props: Props) {
     throw new Error('Expected non-empty dimension');
   }
 
-  const [stride, setStride] = useState(1);
+  const [stride, setStride] = useState(defaultStride);
   const strideInputId = useId();
 
-  const [value, setValue] = useState(initialValue);
+  const [localValue, setLocalValue] = useState(value);
   const onDebouncedChange = useDynamicDebouncedCallback(
     onChange,
     [onChange],
     (val) => (isFastSlice?.(val) ? SHORT_DELAY : LONG_DELAY),
   );
 
+  // When the controlled value changes, adopt it during render
+  const [prevValue, setPrevValue] = useState(value);
+  if (value !== prevValue) {
+    setPrevValue(value);
+    setLocalValue(value);
+  }
+
   const [containerSize, containerRef] = useMeasure<HTMLDivElement>();
   const sliderLabelId = `${ID}-${dimension}-label`;
 
@@ -69,17 +78,17 @@ function SlicingSlider(props: Props) {
             markClassName={styles.mark}
             orientation="vertical"
             invert
-            value={value}
+            value={localValue}
             onChange={(newValue) => {
-              setValue(newValue);
+              setLocalValue(newValue);
               onDebouncedChange(newValue);
             }}
             /* When slicing in E2E tests, `onChange` is called with the old value.
              The `onChange` event is fired via a `setState` callback in `ReactSlider`:
              https://github.com/zillow/react-slider/blob/master/src/components/ReactSlider/ReactSlider.jsx#L908
              Adding `onAfterChange` fixes the issue for now with react-slider@2.0.4, but not with react-slider@2.0.5+ */
             onAfterChange={(newValue) => {
-              setValue(newValue);
+              setLocalValue(newValue);
               onDebouncedChange(newValue);
             }}
             renderThumb={({ key, ...thumbProps }, state) => (
@@ -100,8 +109,8 @@ function SlicingSlider(props: Props) {
                 iconOnly
                 small
                 onClick={() => {
-                  const newValue = Math.min(value + stride, length - 1);
-                  setValue(newValue);
+                  const newValue = Math.min(localValue + stride, length - 1);
+                  setLocalValue(newValue);
                   onDebouncedChange(newValue);
                 }}
               />
@@ -111,8 +120,8 @@ function SlicingSlider(props: Props) {
                 iconOnly
                 small
                 onClick={() => {
-                  const newValue = Math.max(value - stride, 0);
-                  setValue(newValue);
+                  const newValue = Math.max(localValue - stride, 0);
+                  setLocalValue(newValue);
                   onDebouncedChange(newValue);
                 }}
               />