@transferwise/components 0.0.0-experimental-322d55c → 0.0.0-experimental-cb4aafe

package/build/index.js

@@ -10656,7 +10656,9 @@ const SegmentedControl = ({
   }, [segmentsWithRefs, selectedValue]);
   React.useEffect(() => {
     onChange(selectedValue);
-  }, [onChange, selectedValue]);
+    // only call onChange once when the component mounts, to maintain previous behavior
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     ref: segmentsRef,
     "data-testid": "segmented-control",
@@ -10668,50 +10670,51 @@ const SegmentedControl = ({
         'segmented-control__segments--no-animate': !animate
       }),
       role: mode !== 'input' ? 'tablist' : undefined,
-      children: segmentsWithRefs.map(segment => mode === 'input' ? /*#__PURE__*/jsxRuntime.jsxs("label", {
-        ref: segment.ref,
-        htmlFor: segment.id,
-        className: classNames__default.default('segmented-control__segment', {
-          'segmented-control__selected-segment': selectedValue === segment.value
-        }),
-        children: [/*#__PURE__*/jsxRuntime.jsx("input", {
-          type: "radio",
-          className: "segmented-control__radio-input",
-          id: segment.id,
-          name: name,
-          value: segment.value,
-          checked: selectedValue === segment.value,
-          onChange: () => {
-            setAnimate(true);
-            setSelectedValue(segment.value);
-          }
-        }), /*#__PURE__*/jsxRuntime.jsx(Body, {
-          className: "segmented-control__text",
-          as: "span",
-          type: selectedValue === segment.value ? exports.Typography.BODY_DEFAULT_BOLD : exports.Typography.BODY_DEFAULT,
-          children: segment.label
-        })]
-      }, segment.id) : /*#__PURE__*/jsxRuntime.jsx("button", {
-        ref: segment.ref,
-        type: "button",
-        role: "tab",
-        id: segment.id,
-        "aria-controls": segment.controls,
-        "aria-selected": selectedValue === segment.value,
-        className: classNames__default.default('segmented-control__segment', 'segmented-control__button', {
-          'segmented-control__selected-segment': selectedValue === segment.value
-        }),
-        onClick: () => {
+      children: segmentsWithRefs.map(segment => {
+        const onSelect = () => {
           setAnimate(true);
           setSelectedValue(segment.value);
-        },
-        children: /*#__PURE__*/jsxRuntime.jsx(Body, {
-          as: "span",
-          className: "segmented-control__text",
-          type: selectedValue === segment.value ? exports.Typography.BODY_DEFAULT_BOLD : exports.Typography.BODY_DEFAULT,
-          children: segment.label
-        })
-      }, segment.id))
+          onChange(segment.value);
+        };
+        return mode === 'input' ? /*#__PURE__*/jsxRuntime.jsxs("label", {
+          ref: segment.ref,
+          htmlFor: segment.id,
+          className: classNames__default.default('segmented-control__segment', {
+            'segmented-control__selected-segment': selectedValue === segment.value
+          }),
+          children: [/*#__PURE__*/jsxRuntime.jsx("input", {
+            type: "radio",
+            className: "segmented-control__radio-input",
+            id: segment.id,
+            name: name,
+            value: segment.value,
+            checked: selectedValue === segment.value,
+            onChange: onSelect
+          }), /*#__PURE__*/jsxRuntime.jsx(Body, {
+            className: "segmented-control__text",
+            as: "span",
+            type: selectedValue === segment.value ? exports.Typography.BODY_DEFAULT_BOLD : exports.Typography.BODY_DEFAULT,
+            children: segment.label
+          })]
+        }, segment.id) : /*#__PURE__*/jsxRuntime.jsx("button", {
+          ref: segment.ref,
+          type: "button",
+          role: "tab",
+          id: segment.id,
+          "aria-controls": segment.controls,
+          "aria-selected": selectedValue === segment.value,
+          className: classNames__default.default('segmented-control__segment', 'segmented-control__button', {
+            'segmented-control__selected-segment': selectedValue === segment.value
+          }),
+          onClick: onSelect,
+          children: /*#__PURE__*/jsxRuntime.jsx(Body, {
+            as: "span",
+            className: "segmented-control__text",
+            type: selectedValue === segment.value ? exports.Typography.BODY_DEFAULT_BOLD : exports.Typography.BODY_DEFAULT,
+            children: segment.label
+          })
+        }, segment.id);
+      })
     })
   });
 };