@transferwise/components 0.0.0-experimental-b785d66 → 0.0.0-experimental-a2f2fc6

package/build/types/segmentedControl/SegmentedControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/segmentedControl/SegmentedControl.tsx"],"names":[],"mappings":";AAMA,KAAK,WAAW,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhE,KAAK,OAAO,GAAG,WAAW,GAAG;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAClD,KAAK,mBAAmB,GAAG,WAAW,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9D,MAAM,MAAM,QAAQ,GAAG,SAAS,OAAO,EAAE,GAAG,SAAS,mBAAmB,EAAE,CAAC;AAE3E,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,SAAS,mBAAmB,EAAE,CAAC;CAC1C,CAAC;AAEF,KAAK,0BAA0B,GAAG;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,SAAS,OAAO,EAAE,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,GAC3D,CAAC,yBAAyB,GAAG,0BAA0B,CAAC,CAAC;AAE3D,QAAA,MAAM,gBAAgB,sDAMnB,qBAAqB,gCAsIvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/segmentedControl/SegmentedControl.tsx"],"names":[],"mappings":";AAMA,KAAK,WAAW,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhE,KAAK,OAAO,GAAG,WAAW,GAAG;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAClD,KAAK,mBAAmB,GAAG,WAAW,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9D,MAAM,MAAM,QAAQ,GAAG,SAAS,OAAO,EAAE,GAAG,SAAS,mBAAmB,EAAE,CAAC;AAE3E,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,SAAS,mBAAmB,EAAE,CAAC;CAC1C,CAAC;AAEF,KAAK,0BAA0B,GAAG;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,SAAS,OAAO,EAAE,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,GAC3D,CAAC,yBAAyB,GAAG,0BAA0B,CAAC,CAAC;AAE3D,QAAA,MAAM,gBAAgB,sDAMnB,qBAAqB,gCAiIvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-b785d66",
+  "version": "0.0.0-experimental-a2f2fc6",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/segmentedControl/SegmentedControl.spec.tsx

@@ -1,5 +1,7 @@
 import '@testing-library/jest-dom';
-import { render, screen, userEvent } from '../test-utils';
+import React from 'react';
+
+import { render, screen, userEvent, waitFor } from '../test-utils';
 
 import SegmentedControl, { SegmentedControlProps } from './SegmentedControl';
 
@@ -86,6 +88,52 @@ describe('SegmentedControl', () => {
     expect(onChange).toHaveBeenCalledWith('reporting');
   });
 
+  it('does not call onChange on mount', async () => {
+    let onChangeCallCount = 0;
+
+    const ParentComponent = () => {
+      const [_, simulateRerender] = React.useState({});
+
+      // new function is created on every render
+      const onChange = () => {
+        onChangeCallCount++;
+        simulateRerender({});
+      };
+
+      return <SegmentedControl {...defaultProps} onChange={onChange} />;
+    };
+
+    render(<ParentComponent />);
+
+    await waitFor(() => {
+      expect(onChangeCallCount).toBe(0);
+    });
+  });
+
+  it('does not repeatedly call the onChange when the provided onChange prop changes on every render of its parent component', async () => {
+    let onChangeCallCount = 0;
+
+    const ParentComponent = () => {
+      const [_, simulateRerender] = React.useState({});
+
+      // a new onChange function is created on every render
+      const onChange = () => {
+        onChangeCallCount++;
+        simulateRerender({});
+      };
+
+      return <SegmentedControl {...defaultProps} onChange={onChange} />;
+    };
+
+    const { rerender } = render(<ParentComponent />);
+
+    rerender(<ParentComponent />);
+
+    await waitFor(() => {
+      expect(onChangeCallCount).toBe(0);
+    });
+  });
+
   it('throws error if user tries to add too many segments', () => {
     expect(() => {
       renderSegmentedControl({

package/src/segmentedControl/SegmentedControl.tsx

@@ -85,10 +85,6 @@ const SegmentedControl = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [segmentsWithRefs, selectedValue]);
 
-  useEffect(() => {
-    onChange(selectedValue);
-  }, [onChange, selectedValue]);
-
   return (
     <div
       ref={segmentsRef}
@@ -103,8 +99,13 @@ const SegmentedControl = ({
         })}
         role={mode !== 'input' ? 'tablist' : undefined}
       >
-        {segmentsWithRefs.map((segment) =>
-          mode === 'input' ? (
+        {segmentsWithRefs.map((segment) => {
+          const onSelect = () => {
+            setAnimate(true);
+            setSelectedValue(segment.value);
+            onChange(segment.value);
+          };
+          return mode === 'input' ? (
             <label
               ref={segment.ref as React.RefObject<HTMLLabelElement>}
               key={segment.id}
@@ -120,10 +121,7 @@ const SegmentedControl = ({
                 name={name}
                 value={segment.value}
                 checked={selectedValue === segment.value}
-                onChange={() => {
-                  setAnimate(true);
-                  setSelectedValue(segment.value);
-                }}
+                onChange={onSelect}
               />
               <Body
                 className="segmented-control__text"
@@ -149,10 +147,7 @@ const SegmentedControl = ({
               className={classNames('segmented-control__segment', 'segmented-control__button', {
                 'segmented-control__selected-segment': selectedValue === segment.value,
               })}
-              onClick={() => {
-                setAnimate(true);
-                setSelectedValue(segment.value);
-              }}
+              onClick={onSelect}
             >
               <Body
                 as="span"
@@ -166,8 +161,8 @@ const SegmentedControl = ({
                 {segment.label}
               </Body>
             </button>
-          ),
-        )}
+          );
+        })}
       </div>
     </div>
   );