Improve range slider callbacks

jest.config.js

@@ -143,12 +143,7 @@ module.exports = {
   // snapshotSerializers: [],
 
   // The test environment that will be used for testing
-  // TODO: Some part of the create-react-app dependency set doesn't like
-  //   the latest version of jest/react-testing-library
-  //  See https://stackoverflow.com/questions/61036156/react-typescript-testing-typeerror-mutationobserver-is-not-a-constructor
-  //   for entrypoint into the conversation/band-aid fix. We should be able to use
-  //   the native jsdom environment once this issue is resolved.
-  testEnvironment: 'jest-environment-jsdom-sixteen',
+  testEnvironment: 'jsdom',
 
   // Options that will be passed to the testEnvironment
   // testEnvironmentOptions: {},
@@ -174,7 +169,9 @@ module.exports = {
   // testRunner: 'jasmine2',
 
   // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
-  // testURL: 'http://localhost',
+  testEnvironmentOptions: {
+    url: 'http://localhost:9009',
+  },
 
   // Setting this value to 'fake' allows the use of fake timers for functions such as 'setTimeout'
   // timers: 'real',

package.json

@@ -66,10 +66,10 @@
     "eslint-plugin-react-hooks": "^4.0.2",
     "faker": "^4.1.0",
     "husky": "^4.2.5",
-    "jest": "^26.0.1",
+    "jest": "^29.6.1",
     "jest-axe": "^3.5.0",
     "jest-coverage-badges": "^1.1.2",
-    "jest-environment-jsdom-sixteen": "^1.0.3",
+    "jest-environment-jsdom": "^29.6.1",
     "jest-styled-components": "^7.0.2",
     "lodash": "^4.17.15",
     "pre-commit": "^1.2.2",

src/components/Label/__tests__/__snapshots__/Label.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Label should have asterisk icon if isRequired is true 1`] = `
-Object {
+{
   "asFragment": [Function],
   "baseElement": .c0 {
   display: -webkit-inline-box;
@@ -162,7 +162,7 @@ Object {
 `;
 
 exports[`Label should have default color text if not given a isValid 1`] = `
-Object {
+{
   "asFragment": [Function],
   "baseElement": .c0 {
   display: -webkit-inline-box;

src/components/RangeSlider/RangeSlider.stories.tsx

@@ -1,14 +1,13 @@
 import React, { useState, useEffect, forwardRef } from 'react';
 import styled from 'styled-components';
-import { action } from '@storybook/addon-actions';
 import { Story, Meta } from '@storybook/react';
 import { readableColor, toColorString } from 'polished';
 
 import { withFoundryContext } from '../../../.storybook/decorators';
 import fonts from '../../enums/fonts';
 import colors from '../../enums/colors';
 import RangeSlider, { SlideRail } from './RangeSlider';
-import { RangeSliderProps } from './types';
+import { RangeSliderProps, ValueProp } from './types';
 import Card from '../Card';
 
 const Row = styled.div`
@@ -68,13 +67,12 @@ export const Default: Story<DefaultProps> = ({
   disabled,
   showDomainLabels,
   showSelectedRange,
-  motionBlur,
   springOnRelease,
   min,
   max,
-  debounceInterval,
-  axisLock,
+  dragHandleBehavior,
   readonly,
+  debounceInterval,
 }: DefaultProps) => {
   const [val, setVal] = useState(value);
 
@@ -83,7 +81,7 @@ export const Default: Story<DefaultProps> = ({
   }, [value]);
 
   const markersSelection = markers;
-  const markersArray = [];
+  const markersArray: Array<number | ValueProp> = [];
   if (markersSelection === 'all values') {
     for (let i = min; i <= max; i++) {
       markersArray.push(markerLabels ? { value: i, label: `${i}` } : i);
@@ -100,22 +98,13 @@ export const Default: Story<DefaultProps> = ({
         readonly={readonly}
         showDomainLabels={showDomainLabels}
         showSelectedRange={showSelectedRange}
-        motionBlur={motionBlur}
         springOnRelease={springOnRelease}
         min={min}
         max={max}
         debounceInterval={debounceInterval}
-        onDrag={(newVal: number) => {
-          setVal(Math.round(newVal));
-          action('onDrag')(newVal);
-        }}
-        axisLock={axisLock}
-        values={[
-          {
-            value: val,
-            label: val,
-          },
-        ]}
+        onDebounceChange={newVal => setVal(Math.round(newVal))}
+        dragHandleBehavior={dragHandleBehavior}
+        values={[{ value: val, label: val }]}
         markers={markersArray as RangeSliderProps['markers']}
       />
     </Row>
@@ -132,10 +121,9 @@ Default.args = {
   showDomainLabels: false,
   showHandleLabels: true,
   showSelectedRange: true,
-  motionBlur: false,
   springOnRelease: true,
-  debounceInterval: 8,
-  axisLock: 'x',
+  dragHandleBehavior: 'snapToValue',
+  debounceInterval: 10,
 };
 
 type RatingProps = Omit<RangeSliderProps, 'markers'> & {
@@ -147,19 +135,12 @@ export const Rating: Story<RatingProps> = ({
   disabled,
   showDomainLabels,
   showSelectedRange,
-  motionBlur,
   springOnRelease,
   min,
   max,
-  debounceInterval,
-  axisLock,
 }: RatingProps) => {
   const [val, setVal] = useState(value);
 
-  useEffect(() => {
-    setVal(value);
-  }, [value]);
-
   return (
     <Row>
       <span>ReactJS:&nbsp;&nbsp;&nbsp;&nbsp;</span>
@@ -168,16 +149,10 @@ export const Rating: Story<RatingProps> = ({
         disabled={disabled}
         showDomainLabels={showDomainLabels}
         showSelectedRange={showSelectedRange}
-        motionBlur={motionBlur}
         springOnRelease={springOnRelease}
         min={min}
         max={max}
-        debounceInterval={debounceInterval}
-        onDrag={(newVal: number) => {
-          setVal(Math.round(newVal));
-          action('onDrag')(newVal);
-        }}
-        axisLock={axisLock}
+        onChange={newVal => setVal(Math.round(newVal))}
         values={[
           {
             value: val,
@@ -194,12 +169,9 @@ Rating.args = {
   disabled: false,
   showDomainLabels: false,
   showSelectedRange: false,
-  motionBlur: false,
   springOnRelease: true,
   min: 0,
   max: 5,
-  debounceInterval: 8,
-  axisLock: 'x',
 };
 
 interface ColorPickerProps {
@@ -208,6 +180,7 @@ interface ColorPickerProps {
   saturation: number;
   disabled: boolean;
   showDomainLabels: boolean;
+  debounceInterval: number;
 }
 
 export const ColorPicker: Story<ColorPickerProps> = ({
@@ -216,6 +189,7 @@ export const ColorPicker: Story<ColorPickerProps> = ({
   saturation,
   disabled,
   showDomainLabels,
+  debounceInterval,
 }: ColorPickerProps) => {
   const [hue_, setHue] = useState(hue);
   const [sat, setSat] = useState(saturation);
@@ -275,10 +249,8 @@ export const ColorPicker: Story<ColorPickerProps> = ({
           showSelectedRange={false}
           min={0}
           max={360}
-          onDrag={(val: number) => {
-            setHue(Math.round(val));
-            action('onDrag hue')(val);
-          }}
+          debounceInterval={debounceInterval}
+          onDebounceChange={val => setHue(Math.round(val))}
           values={[
             {
               value: hue_,
@@ -302,10 +274,8 @@ export const ColorPicker: Story<ColorPickerProps> = ({
           ))}
           min={0}
           max={100}
-          onDrag={(val: number) => {
-            setSat(Math.round(val));
-            action('onDrag saturation')(val);
-          }}
+          debounceInterval={debounceInterval}
+          onDebounceChange={val => setSat(Math.round(val))}
           showDomainLabels={false}
           showSelectedRange={false}
           values={[
@@ -333,10 +303,8 @@ export const ColorPicker: Story<ColorPickerProps> = ({
           ))}
           min={0}
           max={100}
-          onDrag={(val: number) => {
-            setLight(Math.round(val));
-            action('onDrag light')(val);
-          }}
+          debounceInterval={debounceInterval}
+          onDebounceChange={val => setLight(Math.round(val))}
           showDomainLabels={false}
           showSelectedRange={false}
           values={[
@@ -357,6 +325,7 @@ ColorPicker.args = {
   lightness: 50,
   disabled: false,
   showDomainLabels: false,
+  debounceInterval: 10,
 };
 
 export default {
@@ -389,12 +358,6 @@ export default {
         step: 1,
       },
     },
-    axisLock: {
-      options: ['x', 'y', ''],
-      control: {
-        type: 'select',
-      },
-    },
     markers: {
       options: ['none', 'all values', 'middle value'],
       control: {
@@ -425,6 +388,12 @@ export default {
         step: 1,
       },
     },
+    dragHandleBehavior: {
+      control: {
+        type: 'radio',
+      },
+      options: ['followMouse', 'snapToValue'],
+    },
   },
   decorators: [withFoundryContext],
   parameters: {