@transferwise/components 0.0.0-experimental-8a855e9 → 0.0.0-experimental-841c8df

package/src/inputs/{SelectInput/_stories/SelectInput.story.tsx → SelectInput.story.tsx}

@@ -5,19 +5,19 @@ import { Flag } from '@wise/art';
 import { clsx } from 'clsx';
 import { useState } from 'react';
 
-import Button from '../../../button';
-import { getMonthNames } from '../../../common/dateUtils';
-import Drawer from '../../../drawer';
-import { Field } from '../../../field/Field';
-import Modal from '../../../modal';
-import { wait } from '../../../test-utils/wait';
+import Button from '../button';
+import { getMonthNames } from '../common/dateUtils';
+import Drawer from '../drawer';
+import { Field } from '../field/Field';
+import Modal from '../modal';
+import { wait } from '../test-utils/wait';
 import {
   SelectInput,
   type SelectInputItem,
   SelectInputOptionContent,
   type SelectInputProps,
   SelectInputTriggerButton,
-} from '..';
+} from './SelectInput';
 
 const meta = {
   title: 'Forms/SelectInput',
@@ -35,10 +35,7 @@ const meta = {
       },
     },
   },
-  parameters: {
-    docs: { toc: true },
-    actions: { argTypesRegex: '' },
-  },
+  parameters: { actions: { argTypesRegex: '' } },
 } satisfies Meta<typeof SelectInput>;
 export default meta;
 

package/src/inputs/{SelectInput/_stories/SelectInput.test.story.tsx → SelectInput.test.story.tsx}

@@ -2,11 +2,16 @@ import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fireEvent, fn, type Mock, screen, userEvent, within } from 'storybook/test';
 import { useState } from 'react';
 
-import { allModes } from '../../../../.storybook/modes';
-import Body from '../../../body';
-import { Field } from '../../../field/Field';
-import { lorem5, lorem500 } from '../../../test-utils';
-import { SelectInput, SelectInputOptionContent, type SelectInputProps, sortByRelevance } from '..';
+import { allModes } from '../../.storybook/modes';
+import Body from '../body';
+import { Field } from '../field/Field';
+import { lorem5, lorem500 } from '../test-utils';
+import {
+  SelectInput,
+  SelectInputOptionContent,
+  type SelectInputProps,
+  sortByRelevance,
+} from './SelectInput';
 
 const meta = {
   title: 'Forms/SelectInput/Tests',

package/src/inputs/{SelectInput/SelectInput.test.tsx → SelectInput.test.tsx}

@@ -2,15 +2,15 @@ import { screen, waitFor, within } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import { mockAnimationsApi } from 'jsdom-testing-mocks';
 
-import { render, mockMatchMedia, mockResizeObserver } from '../../test-utils';
+import { render, mockMatchMedia, mockResizeObserver } from '../test-utils';
 
 import {
   SelectInput,
   SelectInputOptionContent,
   type SelectInputOptionItem,
   type SelectInputProps,
-} from '.';
-import { Field } from '../../field/Field';
+} from './SelectInput';
+import { Field } from '../field/Field';
 
 mockMatchMedia();
 mockResizeObserver();
@@ -40,7 +40,7 @@ describe('SelectInput', () => {
         ]}
         renderFooter={({ queryNormalized: normalizedQuery }) =>
           normalizedQuery != null ? (
-            <>Showing results for &apos;{normalizedQuery}&apos;</>
+            <>Showing results for ‘{normalizedQuery}’</>
           ) : (
             <>All items shown</>
           )
@@ -56,16 +56,16 @@ describe('SelectInput', () => {
     expect(footer).toBeInTheDocument();
 
     await userEvent.keyboard('u');
-    expect(footer).toHaveTextContent(/'u'$/);
+    expect(footer).toHaveTextContent(/‘u’$/);
 
     await userEvent.keyboard('r');
-    expect(footer).toHaveTextContent(/'ur'$/);
+    expect(footer).toHaveTextContent(/‘ur’$/);
 
     await userEvent.keyboard('x');
-    expect(footer).toHaveTextContent(/'urx'$/);
+    expect(footer).toHaveTextContent(/‘urx’$/);
 
     await userEvent.keyboard('{Backspace}');
-    expect(footer).toHaveTextContent(/'ur'$/);
+    expect(footer).toHaveTextContent(/‘ur’$/);
   });
 
   it('allows navigating the listbox with cursors', async () => {
@@ -76,7 +76,9 @@ describe('SelectInput', () => {
           { type: 'option', value: 'EUR' },
           { type: 'option', value: 'USD' },
         ]}
-        renderFooter={() => <button type="button">Footer button</button>}
+        renderFooter={({ queryNormalized: normalizedQuery }) => (
+          <button type="button">Footer button</button>
+        )}
         filterable
       />,
     );