@transferwise/components 0.0.0-experimental-7a83d86 → 0.0.0-experimental-b2a535a

package/src/segmentedControl/SegmentedControl.spec.tsx

@@ -32,7 +32,7 @@ const onChange = jest.fn();
 
 const defaultProps: SegmentedControlProps = {
   name: 'segmentedControl',
-  defaultValue: defaultSegments[0].value,
+  selectedValue: defaultSegments[0].value,
   mode: 'input',
   segments: defaultSegments,
   onChange,
@@ -96,7 +96,7 @@ describe('SegmentedControl', () => {
 
       // new function is created on every render
       const onChange = () => {
-        onChangeCallCount += 1;
+        onChangeCallCount++;
         simulateRerender({});
       };
 
@@ -118,7 +118,7 @@ describe('SegmentedControl', () => {
 
       // a new onChange function is created on every render
       const onChange = () => {
-        onChangeCallCount += 1;
+        onChangeCallCount++;
         simulateRerender({});
       };
 
@@ -134,6 +134,44 @@ describe('SegmentedControl', () => {
     });
   });
 
+  it('updates the selected segment when the selectedValue prop changes', () => {
+    const { rerender } = render(<SegmentedControl {...defaultProps} />);
+
+    const payroll = screen.getByRole('radio', { name: 'Payroll' });
+    userEvent.click(payroll);
+
+    expect(onChange).toHaveBeenCalledWith('payroll');
+
+    rerender(<SegmentedControl {...defaultProps} selectedValue="reporting" />);
+
+    const reporting = screen.getByRole('radio', { name: 'Reporting' });
+    expect(reporting).toBeChecked();
+  });
+
+  it('updates the options when the segments prop changes', () => {
+    const { rerender } = render(<SegmentedControl {...defaultProps} />);
+
+    const newSegments = [
+      {
+        id: '1',
+        value: 'payroll',
+        label: 'Payroll',
+      },
+      {
+        id: '3',
+        value: 'anotherOne',
+        label: 'Another One',
+      },
+    ];
+
+    rerender(<SegmentedControl {...defaultProps} segments={newSegments} />);
+
+    const anotherOne = screen.getByRole('radio', { name: 'Another One' });
+    userEvent.click(anotherOne);
+
+    expect(onChange).toHaveBeenCalledWith('anotherOne');
+  });
+
   it('throws error if user tries to add too many segments', () => {
     expect(() => {
       renderSegmentedControl({

package/src/segmentedControl/SegmentedControl.story.tsx

@@ -1,33 +1,36 @@
 import { StoryFn } from '@storybook/react';
 import React from 'react';
 
-import SegmentedControl, { Segments } from './SegmentedControl';
+import Button from '../button';
+
+import SegmentedControl from './SegmentedControl';
 
 export default {
   component: SegmentedControl,
   title: 'Forms/SegmentedControl',
 };
 
-const segments: Segments = [
-  { id: 'CUPCAKE', label: 'Cupcakes', value: 'cupcakes' },
-  { id: 'SPONGECAKE', label: 'Sponge cake', value: 'spongecake' },
-  { id: 'CARROT_CAKE', label: 'Carrot cake', value: 'carrotcake' },
-];
+const Template: StoryFn = (args) => {
+  const [segments, setSegments] = React.useState([
+    { id: 'CUPCAKE', label: 'Cupcakes', value: 'cupcakes' },
+    { id: 'SPONGECAKE', label: 'Sponge cake', value: 'spongecake' },
+    { id: 'CARROT_CAKE', label: 'Carrot cake', value: 'carrotcake' },
+  ]);
 
-const segmentsWithControls: Segments = [
-  { id: 'CUPCAKE', label: 'Cupcakes', value: 'cupcakes', controls: 'aControlId' },
-  { id: 'SPONGECAKE', label: 'Sponge cake', value: 'spongecake', controls: 'aControlId' },
-  { id: 'CARROT_CAKE', label: 'Carrot cake', value: 'carrotcake', controls: 'aControlId' },
-];
+  const [segmentsWithControls, setSegmentsWithControls] = React.useState([
+    { id: 'CUPCAKE', label: 'Cupcakes', value: 'cupcakes', controls: 'aControlId' },
+    { id: 'SPONGECAKE', label: 'Sponge cake', value: 'spongecake', controls: 'aControlId' },
+    { id: 'CARROT_CAKE', label: 'Carrot cake', value: 'carrotcake', controls: 'aControlId' },
+  ]);
 
-const Template: StoryFn = (args) => {
   const [selectedValue, setSelectedValue] = React.useState(segments[0].value);
 
+  console.log('render: segments.length', segments.length);
   return (
     <div className="p-a-2">
       <SegmentedControl
         name="aSegmentedControl"
-        defaultValue={selectedValue}
+        selectedValue={selectedValue}
         onChange={setSelectedValue}
         {...(args.mode === 'view'
           ? { segments: segmentsWithControls, mode: 'view', controls: 'aControlId' }
@@ -36,6 +39,41 @@ const Template: StoryFn = (args) => {
       <div className="m-a-2" id="aControlId">
         <p>Selected value: {selectedValue}</p>
       </div>
+      <div className="m-a-2">
+        <p>
+          Force the <b>selectedValue</b> to be one of the following:
+          <ul>
+            {segments.map((segment) => (
+              <li key={segment.id}>
+                <a
+                  href="/"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    setSelectedValue(segment.value);
+                  }}
+                >
+                  {segment.label}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </p>
+      </div>
+      <div className="m-a-2">
+        <Button
+          priority="secondary"
+          type="danger"
+          size="sm"
+          disabled={segments.length < 2}
+          onClick={() => {
+            const index = segments.findIndex((s) => s.value !== selectedValue);
+            setSegments((prev) => prev.filter((_, i) => i !== index));
+            setSegmentsWithControls((prev) => prev.filter((_, i) => i !== index));
+          }}
+        >
+          Remove one segment
+        </Button>
+      </div>
     </div>
   );
 };

package/src/segmentedControl/SegmentedControl.tsx

@@ -13,7 +13,7 @@ export type Segments = readonly Segment[] | readonly SegmentWithControls[];
 
 type SegmentedControlPropsBase = {
   name: string;
-  defaultValue: string;
+  selectedValue: string;
   mode: 'input' | 'view';
   onChange: (value: string) => void;
 };
@@ -33,12 +33,11 @@ export type SegmentedControlProps = SegmentedControlPropsBase &
 
 const SegmentedControl = ({
   name,
-  defaultValue,
+  selectedValue,
   mode = 'input',
   segments,
   onChange,
 }: SegmentedControlProps) => {
-  const [selectedValue, setSelectedValue] = useState(defaultValue || segments[0].value);
   const [animate, setAnimate] = useState(false);
 
   const segmentsRef = useRef<HTMLDivElement>(null);
@@ -70,6 +69,7 @@ const SegmentedControl = ({
   };
 
   useEffect(() => {
+    setAnimate(true);
     updateSegmentPosition();
 
     const handleWindowSizeChange = () => {
@@ -102,7 +102,6 @@ const SegmentedControl = ({
         {segmentsWithRefs.map((segment) => {
           const onSelect = () => {
             setAnimate(true);
-            setSelectedValue(segment.value);
             onChange(segment.value);
           };
           return mode === 'input' ? (

package/src/select/Select.js

@@ -246,8 +246,8 @@ export default function Select({
   };
 
   function selectKeyboardFocusedOption() {
-    if (keyboardFocusedOptionIndex != null && selectableOptions.length > 0) {
-      selectOption(selectableOptions[keyboardFocusedOptionIndex]);
+    if (keyboardFocusedOptionIndex != null) {
+      selectableOptions.length > 0 && selectOption(selectableOptions[keyboardFocusedOptionIndex]);
     }
   }
 
@@ -511,6 +511,7 @@ export default function Select({
         disabled={disabled}
         aria-controls={listboxId}
         aria-expanded={open}
+        aria-autocomplete="none"
         onClick={handleOnClick}
         {...buttonProps}
       >

package/src/stepper/deviceDetection.js

@@ -1,5 +1,6 @@
 function supportsTouchEvents() {
   const onTouchStartIsDefined = typeof window !== 'undefined' && window.ontouchstart !== undefined;
+  // eslint-disable-next-line compat/compat
   const maxTouchPointsIsDefined = typeof navigator !== 'undefined' && navigator.maxTouchPoints;
   const documentTouchIsDefined =
     typeof window !== 'undefined' &&
@@ -20,7 +21,7 @@ function userAgentSuggestsTouchDevice() {
     'bada',
   ];
   const matchString = sampleTouchDevices.map((device) => `(${device})`).join('|');
-  const regex = new RegExp(matchString, 'gi');
+  const regex = new RegExp(matchString, 'ig');
   return typeof navigator !== 'undefined' && !!navigator.userAgent.match(regex);
 }
 // Important: this is not fool-proof! It gives false positives and negatives, and will be outdated.

package/src/stepper/deviceDetection.spec.js

@@ -2,17 +2,12 @@ import { isTouchDevice } from './deviceDetection';
 
 describe('Device detection', () => {
   function fakeUserAgent(userAgent) {
-    Object.defineProperty(navigator, 'userAgent', {
-      value: userAgent,
-      configurable: true,
-    });
+    navigator.__defineGetter__('userAgent', () => userAgent);
+    // need to use this instead of defineProperty, as it's blocked from overriding
   }
 
   function fakeMaxTouchPoints(maxTouchPoints) {
-    Object.defineProperty(navigator, 'maxTouchPoints', {
-      value: maxTouchPoints,
-      configurable: true,
-    });
+    navigator.__defineGetter__('maxTouchPoints', () => maxTouchPoints);
   }
 
   // We don't test DocumentTouch api as it's basically impossible to test :(

package/src/test-utils/index.js

@@ -13,7 +13,7 @@ import en from '../i18n/en.json';
  */
 function customRender(ui, { locale = DEFAULT_LOCALE, messages = en, ...renderOptions } = {}) {
   // eslint-disable-next-line react/prop-types
-  const Wrapper = ({ children }) => {
+  var Wrapper = ({ children }) => {
     return <Provider i18n={{ locale, messages }}>{children}</Provider>;
   };
   return render(ui, { wrapper: Wrapper, ...renderOptions });

package/src/test-utils/story-config.ts

@@ -30,7 +30,7 @@ interface StoryConfig {
 
 const getViewportWidth = (viewport: (typeof viewports)[keyof typeof viewports]) => {
   if (viewport.styles && typeof viewport.styles === 'object') {
-    return Number.parseInt(viewport.styles.width, 10);
+    return parseInt(viewport.styles.width);
   }
   throw new Error('Unknown viewport styles');
 };

package/src/title/Title.spec.tsx

@@ -34,7 +34,7 @@ describe('Title', () => {
 
   it('handles unsupported typography type', () => {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error
+    // @ts-ignore
     render(<Title type={Typography.BODY_LARGE_BOLD}>Test</Title>);
     const copy = screen.getByText('Test');
     expect(copy).toBeInTheDocument();

package/src/typeahead/Typeahead.spec.js

@@ -314,9 +314,7 @@ describe('Typeahead', () => {
     let selectedOption;
 
     component.setProps({
-      onChange: (selections) => {
-        selectedOption = selections[0];
-      },
+      onChange: (selections) => (selectedOption = selections[0]),
       options: options,
     });
 
@@ -342,7 +340,7 @@ describe('Typeahead', () => {
     it('renders all options', () => {
       const options = option().map((optNode) => optNode.text());
       expect(options).toHaveLength(props.options.length);
-      expect(options.every((label, i) => label === props.options[i].label)).toBe(true);
+      expect(options.every((label, i) => label === props.options[i].label));
     });
 
     it('does not render new option if showNewEntry is false', () => {

package/src/upload/Upload.spec.js

@@ -8,7 +8,7 @@ import Upload from '.';
 
 jest.useFakeTimers();
 jest.mock('./utils/postData', () => ({
-  postData: async () => 'ServerResponse',
+  postData: () => new Promise((resolve) => resolve('ServerResponse')),
 }));
 
 jest.mock('./utils/asyncFileRead');
@@ -88,7 +88,7 @@ describe('Upload', () => {
   let component;
   beforeEach(() => {
     component = shallow(<Upload {...props} />).dive();
-    asyncFileRead.mockImplementation(async () => 'a value');
+    asyncFileRead.mockImplementation(() => new Promise((resolve) => resolve('a value')));
   });
 
   afterEach(() => {
@@ -183,9 +183,7 @@ describe('Upload', () => {
     });
 
     it('step ProcessingStep is called with error props', async () => {
-      asyncFileRead.mockImplementation(async () => {
-        throw 'An error';
-      });
+      asyncFileRead.mockImplementation(() => new Promise((resolve, reject) => reject('An error')));
 
       await component.instance().fileDropped(TEST_FILE);
       jest.advanceTimersByTime(props.animationDelay);
@@ -232,9 +230,7 @@ describe('Upload', () => {
     it('step CompleteStep is called with error props', async () => {
       component = mount(<Upload {...props} />);
       const upload = component.children();
-      asyncFileRead.mockImplementation(async () => {
-        throw 'An error';
-      });
+      asyncFileRead.mockImplementation(() => new Promise((resolve, reject) => reject('An error')));
 
       await upload.instance().fileDropped(TEST_FILE);
       jest.advanceTimersByTime(props.animationDelay + ANIMATION_DELAY);

package/src/uploadInput/uploadButton/UploadButton.tsx

@@ -225,7 +225,6 @@ const UploadButton = ({
         data-testid={TEST_IDS.uploadInput}
         onChange={filesSelected}
       />
-      {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
       <label
         htmlFor={id}
         className={classNames('btn', 'np-upload-accent', 'np-upload-button', {