@transferwise/components 0.0.0-experimental-dd495d2 → 0.0.0-experimental-3776330

package/build/index.js

@@ -11077,6 +11077,102 @@ Select.defaultProps = {
   dropdownProps: {}
 };
 
+const SegmentedControl = ({
+  name,
+  defaultValue,
+  mode = 'input',
+  segments,
+  onChange
+}) => {
+  const [selectedValue, setSelectedValue] = React.useState(defaultValue || segments[0].value);
+  const [animate, setAnimate] = React.useState(false);
+  const segmentsRef = React.useRef(null);
+  if (segments.length > 3) {
+    throw new Error('SegmentedControl only supports up to 3 segments. Please refer to: https://wise.design/components/segmented-control');
+  }
+  const segmentsWithRefs = segments.map(segment => ({
+    ...segment,
+    ref: /*#__PURE__*/React.createRef()
+  }));
+  const updateSegmentPosition = () => {
+    const selectedSegmentRef = segmentsWithRefs.find(segment => segment.value === selectedValue)?.ref;
+    // We grab the active segments style object from the ref
+    // and set the css variables to the selected segments width and x position.
+    // This is so we can animate the highlight to the selected segment
+    if (selectedSegmentRef?.current && segmentsRef.current) {
+      const {
+        style
+      } = segmentsRef.current;
+      style.setProperty('--segment-highlight-width', `${selectedSegmentRef.current.offsetWidth}px`);
+      style.setProperty('--segment-highlight-x', `${selectedSegmentRef.current.offsetLeft}px`);
+    }
+  };
+  React.useEffect(() => {
+    updateSegmentPosition();
+    const handleWindowSizeChange = () => {
+      setAnimate(false);
+      updateSegmentPosition();
+    };
+    window.addEventListener('resize', handleWindowSizeChange);
+    return () => {
+      window.removeEventListener('resize', handleWindowSizeChange);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [segmentsWithRefs, selectedValue]);
+  React.useEffect(() => {
+    onChange(selectedValue);
+  }, [onChange, selectedValue]);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    ref: segmentsRef,
+    "data-testid": "segmented-control",
+    className: classNames__default.default('segmented-control', {
+      'segmented-control--input': mode === 'input'
+    }),
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: classNames__default.default('segmented-control__segments', {
+        'segmented-control__segments--no-animate': !animate
+      }),
+      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("div", {
+          className: "segmented-control__label-text",
+          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: () => {
+          setAnimate(true);
+          setSelectedValue(segment.value);
+        },
+        children: segment.label
+      }, segment.id))
+    })
+  });
+};
+
 const CSS_TRANSITION_DURATION = 400;
 class Snackbar extends React.Component {
   /** @type {RefObject<HTMLSpanElement>} */
@@ -15546,6 +15642,7 @@ exports.RadioOption = RadioOption$1;
 exports.SUPPORTED_LANGUAGES = SUPPORTED_LANGUAGES;
 exports.SearchInput = SearchInput;
 exports.Section = Section;
+exports.SegmentedControl = SegmentedControl;
 exports.Select = Select;
 exports.SelectInput = SelectInput;
 exports.SelectInputOptionContent = SelectInputOptionContent;