@transferwise/components 46.119.3 → 46.119.4

package/src/chips/__snapshots__/Chips.spec.tsx.snap

@@ -13,12 +13,12 @@ exports[`Chips Choice Chips renders as expected 1`] = `
       role="radio"
       tabindex="0"
     >
-      <span
+      <div
         aria-hidden="false"
-        class="np-chip-label"
+        class="np-text-body-default-bold"
       >
         Accounting
-      </span>
+      </div>
     </div>
     <div
       aria-checked="true"
@@ -26,12 +26,12 @@ exports[`Chips Choice Chips renders as expected 1`] = `
       role="radio"
       tabindex="0"
     >
-      <span
+      <div
         aria-hidden="false"
-        class="np-chip-label"
+        class="np-text-body-default-bold"
       >
         Payroll
-      </span>
+      </div>
     </div>
     <div
       aria-checked="false"
@@ -39,12 +39,12 @@ exports[`Chips Choice Chips renders as expected 1`] = `
       role="radio"
       tabindex="0"
     >
-      <span
+      <div
         aria-hidden="false"
-        class="np-chip-label"
+        class="np-text-body-default-bold"
       >
         Reporting
-      </span>
+      </div>
     </div>
     <div
       aria-checked="false"
@@ -52,12 +52,12 @@ exports[`Chips Choice Chips renders as expected 1`] = `
       role="radio"
       tabindex="0"
     >
-      <span
+      <div
         aria-hidden="false"
-        class="np-chip-label"
+        class="np-text-body-default-bold"
       >
         Payments
-      </span>
+      </div>
     </div>
   </div>
 </div>
@@ -76,12 +76,12 @@ exports[`Chips Filter Chips renders as expected 1`] = `
       role="checkbox"
       tabindex="0"
     >
-      <span
+      <div
         aria-hidden="false"
-        class="np-chip-label"
+        class="np-text-body-default-bold"
       >
         Accounting
-      </span>
+      </div>
     </div>
     <div
       aria-checked="false"
@@ -89,12 +89,12 @@ exports[`Chips Filter Chips renders as expected 1`] = `
       role="checkbox"
       tabindex="0"
     >
-      <span
+      <div
         aria-hidden="false"
-        class="np-chip-label"
+        class="np-text-body-default-bold"
       >
         Payroll
-      </span>
+      </div>
     </div>
     <div
       aria-checked="false"
@@ -102,12 +102,12 @@ exports[`Chips Filter Chips renders as expected 1`] = `
       role="checkbox"
       tabindex="0"
     >
-      <span
+      <div
         aria-hidden="false"
-        class="np-chip-label"
+        class="np-text-body-default-bold"
       >
         Reporting
-      </span>
+      </div>
     </div>
     <div
       aria-checked="true"
@@ -115,20 +115,20 @@ exports[`Chips Filter Chips renders as expected 1`] = `
       role="checkbox"
       tabindex="-1"
     >
-      <span
-        aria-hidden="false"
-        class="np-chip-label"
+      <div
+        aria-hidden="true"
+        class="np-text-body-default-bold"
       >
         Payments
-      </span>
+      </div>
       <button
         aria-label="Clear Payments"
-        class="np-close-button close btn-link text-no-decoration btn-unstyled m-l-1"
+        class="np-close-button close btn-link text-no-decoration btn-unstyled"
         type="button"
       >
         <span
-          class="tw-icon tw-icon-cross "
-          data-testid="cross-icon"
+          class="tw-icon tw-icon-cross-circle-fill "
+          data-testid="cross-circle-fill-icon"
         >
           <svg
             aria-hidden="true"
@@ -140,7 +140,9 @@ exports[`Chips Filter Chips renders as expected 1`] = `
             width="16"
           >
             <path
-              d="m12 13.414-7.293 7.293-1.414-1.414L10.586 12 3.293 4.707l1.414-1.414L12 10.586l7.293-7.293 1.414 1.414L13.414 12l7.293 7.293-1.414 1.414z"
+              clip-rule="evenodd"
+              d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10m-4.707-6.707L10.586 12 7.293 8.707l1.414-1.414L12 10.586l3.293-3.293 1.414 1.414L13.414 12l3.293 3.293-1.414 1.414L12 13.414l-3.293 3.293z"
+              fill-rule="evenodd"
             />
           </svg>
         </span>

package/src/inputs/SelectInput.spec.tsx

@@ -184,6 +184,46 @@ describe('SelectInput', () => {
     expect(within(listbox).getAllByRole('option')).toHaveLength(2);
   });
 
+  it('filters items ignoring diacritics/accents', async () => {
+    render(
+      <SelectInput
+        items={[
+          { type: 'option', value: 'AX', filterMatchers: ['Åland Islands'] },
+          { type: 'option', value: 'AL', filterMatchers: ['Albania'] },
+          { type: 'option', value: 'DZ', filterMatchers: ['Algeria'] },
+          { type: 'option', value: 'RE', filterMatchers: ['Réunion'] },
+        ]}
+        filterable
+      />,
+    );
+
+    await userEvent.tab();
+    await userEvent.keyboard(' ');
+
+    const listbox = screen.getByRole('listbox');
+    expect(within(listbox).getAllByRole('option')).toHaveLength(4);
+
+    await userEvent.keyboard('aland');
+    expect(within(listbox).getAllByRole('option')).toHaveLength(1);
+    expect(within(listbox).getByRole('option')).toHaveTextContent('AX');
+
+    const searchInput = screen.getByRole('combobox', { expanded: true });
+    await userEvent.clear(searchInput);
+    await userEvent.keyboard('reunion');
+    expect(within(listbox).getAllByRole('option')).toHaveLength(1);
+    expect(within(listbox).getByRole('option')).toHaveTextContent('RE');
+
+    await userEvent.clear(searchInput);
+    await userEvent.keyboard('Åland');
+    expect(within(listbox).getAllByRole('option')).toHaveLength(1);
+    expect(within(listbox).getByRole('option')).toHaveTextContent('AX');
+
+    await userEvent.clear(searchInput);
+    await userEvent.keyboard('Rèunion');
+    expect(within(listbox).getAllByRole('option')).toHaveLength(1);
+    expect(within(listbox).getByRole('option')).toHaveTextContent('RE');
+  });
+
   it('selects multiple options', async () => {
     render(
       <SelectInput

package/src/inputs/SelectInput.story.tsx

@@ -111,7 +111,7 @@ interface Currency {
 const popularCurrencies: Currency[] = [
   {
     code: 'USD',
-    name: 'United States dollar',
+    name: 'United States Dollar',
     countries: ['Hong Kong', 'Saudi Arabia'],
   },
   {
@@ -136,6 +136,11 @@ const otherCurrencies: Currency[] = [
     code: 'AUD',
     name: 'Australian dollar',
   },
+  {
+    code: 'ÅLD',
+    name: 'Ålandian peso',
+    countries: ['Ålandia'],
+  },
 ];
 
 const allCurrencies: Currency[] = [...popularCurrencies, ...otherCurrencies].sort((a, b) =>
@@ -205,7 +210,7 @@ export const Currencies: Story<Currency> = {
     });
 
     await step('Check if options are displayed', async () => {
-      await waitFor(async () => expect(await screen.findAllByRole('option')).toHaveLength(8));
+      await waitFor(async () => expect(await screen.findAllByRole('option')).toHaveLength(9));
       await waitFor(async () => expect(screen.getByText(/^Can’t find it?/u)).toBeInTheDocument());
     });
 
@@ -538,6 +543,7 @@ const countries: Country[] = [
   { code: 'NL', name: 'Netherlands' },
   { code: 'CH', name: 'Switzerland' },
   { code: 'SE', name: 'Sweden' },
+  { code: 'AL', name: 'Ålandia' },
 ];
 
 function countryOption(country: Country) {

package/src/inputs/SelectInput.tsx

@@ -38,7 +38,16 @@ import { ButtonProps } from '../button/Button.types';
 const MAX_ITEMS_WITHOUT_VIRTUALIZATION = 50;
 
 function searchableString(value: string) {
-  return value.trim().replace(/\s+/gu, ' ').normalize('NFKC').toLowerCase();
+  return (
+    value
+      .trim()
+      .replace(/\s+/gu, ' ')
+      // NFD converts an Å to A +  ̊ (and other special characters)
+      .normalize('NFD')
+      // and then this replaces the  ̊ with nothing (and other special characters)
+      .replace(/[\u0300-\u036f]/g, '')
+      .toLowerCase()
+  );
 }
 
 function inferSearchableStrings(value: unknown) {

package/src/progressBar/ProgressBar.tsx

@@ -1,4 +1,3 @@
-import { useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
 
 import Body from '../body';
@@ -23,14 +22,10 @@ const ProgressBar = ({
   progress,
   textEnd,
 }: ProgressBarProps) => {
-  const { isModern } = useTheme();
   return (
     <div className={clsx('np-progress-bar', className)}>
       <label className="np-progress-bar__title m-b-1" htmlFor={id}>
-        <Title
-          type={Typography.TITLE_BODY}
-          className={isModern ? `m-b-1 text-primary` : `text-primary`}
-        >
+        <Title type={Typography.TITLE_BODY} className="m-b-1 text-primary">
           {title}
         </Title>
         {description && <Body>{description}</Body>}

package/src/select/Select.tsx

@@ -163,7 +163,6 @@ export default function Select({
   const inputAttributes = useInputAttributes();
 
   const { formatMessage } = useIntl();
-  const { isModern } = useTheme();
   const s = (className: string) => classNamesProp[className] || className;
   const [open, setOpen] = useState(false);
   const [searchValue, setSearchValue] = useState(DEFAULT_SEARCH_VALUE);
@@ -599,7 +598,7 @@ export default function Select({
           </Drawer>
         ) : (
           <BottomSheet open={open} onClose={handleCloseOptions}>
-            {renderOptionsList({ className: isModern ? '' : 'p-a-1' })}
+            {renderOptionsList()}
           </BottomSheet>
         )
       ) : (