@transferwise/components 0.0.0-experimental-5cd0315 → 0.0.0-experimental-e49ee76

package/src/criticalBanner/CriticalCommsBanner.story.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import CriticalCommsBanner from '.';
-import { allModes } from '../../.storybook/modes';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 export default {
   component: CriticalCommsBanner,
@@ -24,13 +24,7 @@ export const Variants: Story = {
     subtitle: 'Add money within the next 30 days',
     action: { label: 'Take action', href: 'https://wise.com' },
   },
-  parameters: {
-    variants: ['default', 'dark', 'rtl'],
-    chromatic: {
-      dark: allModes.dark,
-      rtl: allModes.rtl,
-    },
-  },
+  ...withVariantConfig(['default', 'dark', 'rtl']),
 };
 
 export const Mobile: Story = {
@@ -40,12 +34,5 @@ export const Mobile: Story = {
     subtitle: 'Add money within the next 30 days',
     action: { label: 'Take action', href: 'https://wise.com' },
   },
-  parameters: {
-    variants: ['default', 'dark', 'rtl', 'mobile'],
-    chromatic: {
-      dark: allModes.dark,
-      rtl: allModes.rtl,
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['default', 'dark', 'rtl', 'mobile']),
 };

package/src/dateInput/DateInput.test.story.tsx

@@ -6,7 +6,7 @@ import { lorem10 } from '../test-utils';
 
 import Provider from '../provider/Provider';
 import translations from '../i18n';
-import { allModes } from '../../.storybook/modes';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 const meta: Meta<typeof DateInput> = {
   component: DateInput,
@@ -223,20 +223,10 @@ export const NoNonDigitsAllowed: Story = {
 
 export const BasicMobile: Story = {
   ...Basic,
-  parameters: {
-    variants: ['mobile'],
-    chromatic: {
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['mobile'], Basic),
 };
 
 export const InputErrorMobile: Story = {
   ...InputError,
-  parameters: {
-    variants: ['mobile'],
-    chromatic: {
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['mobile'], InputError),
 };

package/src/dateLookup/DateLookup.story.tsx

@@ -4,7 +4,7 @@ import { StoryObj } from '@storybook/react-webpack5';
 import { Field } from '..';
 import { Size } from '../common';
 import DateLookup, { type DateLookupProps } from './DateLookup';
-import { allModes } from '../../.storybook/modes';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 export default {
   component: DateLookup,
@@ -61,13 +61,15 @@ export const Basic: Story = {
 };
 export const Basic400Zoom: Story = {
   ...Basic,
-  parameters: {
-    chromatic: {
-      delay: 2000,
-      zoom400: allModes.zoom400,
+
+  ...withVariantConfig(['400%'], {
+    ...Basic,
+    parameters: {
+      chromatic: {
+        delay: 2000,
+      },
     },
-    variants: ['400%'],
-  },
+  }),
 };
 
 export const WithField: Story = {

package/src/header/Header.test.story.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import Header, { type HeaderProps } from './Header';
-import { allModes } from '../../.storybook/modes';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 const meta: Meta<typeof Header> = {
   component: Header,
@@ -85,16 +85,11 @@ export const SectionTrailingSpaceWithAction: Story = {
 };
 
 export const AllVariants: Story = {
-  parameters: {
-    padding: '0',
-    variants: ['default', 'dark', 'bright-green', 'forest-green', 'rtl'],
-    chromatic: {
-      dark: allModes.dark,
-      brightGreen: allModes.brightGreen,
-      forestGreen: allModes.forestGreen,
-      rtl: allModes.rtl,
+  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green', 'rtl'], {
+    parameters: {
+      padding: '0',
     },
-  },
+  }),
   render: () => (
     <div
       className="header-variants"

package/src/info/Info.story.tsx

@@ -4,7 +4,7 @@ import { userEvent, within } from 'storybook/test';
 import { lorem10 } from '../test-utils';
 
 import Info, { InfoPresentation } from '.';
-import { allModes } from '../../.storybook/modes';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 const meta = {
   component: Info,
@@ -27,13 +27,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Basic: Story = {
-  parameters: {
-    variants: ['default', 'dark', 'rtl'],
-    chromatic: {
-      dark: allModes.dark,
-      rtl: allModes.rtl,
-    },
-  },
+  ...withVariantConfig(['default', 'dark', 'rtl']),
 };
 
 export const OpenedPopover = {
@@ -50,12 +44,7 @@ export const OpenedPopover = {
 
 export const OpenedPopoverMobile: Story = {
   ...OpenedPopover,
-  parameters: {
-    variants: ['mobile'],
-    chromatic: {
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['mobile'], OpenedPopover),
 };
 
 export const OpenedModal = {
@@ -67,10 +56,5 @@ export const OpenedModal = {
 
 export const OpenedModalMobile: Story = {
   ...OpenedModal,
-  parameters: {
-    variants: ['mobile'],
-    chromatic: {
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['mobile'], OpenedModal),
 };

package/src/inputs/SelectInput.tsx

@@ -741,35 +741,15 @@ function SelectInputOptions<T = string>({
       return items;
     }
 
-    const dedupedItems = dedupeSelectInputItems(items, compareValues);
+    const filtered = filterSelectInputItems(dedupeSelectInputItems(items, compareValues), (item) =>
+      selectInputOptionItemIncludesNeedle(item, needle),
+    );
 
     if (sortFilteredOptions) {
-      // When sorting, filter out non-matching items completely to avoid ghost items
-      const filtered = dedupedItems.map((item) => {
-        if (item.type === 'option') {
-          return selectInputOptionItemIncludesNeedle(item, needle)
-            ? item
-            : { ...item, value: undefined };
-        }
-        if (item.type === 'group') {
-          return {
-            ...item,
-            options: item.options.map((option) =>
-              selectInputOptionItemIncludesNeedle(option, needle)
-                ? option
-                : { ...option, value: undefined },
-            ),
-          };
-        }
-        return item;
-      });
-
       return sortSelectInputItems(filtered, sortFilteredOptions, filterQuery);
     }
 
-    return filterSelectInputItems(dedupedItems, (item) =>
-      selectInputOptionItemIncludesNeedle(item, needle),
-    );
+    return filtered;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [needle, items, compareValues]);
   const resultsEmpty = needle != null && filteredItems.length === 0;
@@ -947,6 +927,7 @@ function SelectInputOptions<T = string>({
           ) : (
             <Virtualizer
               ref={virtualiserHandlerRef}
+              key={needle}
               data={filteredItems}
               keepMounted={mountedIndexes}
               scrollRef={listboxRef} // `VList` doesn't expose this

package/src/listItem/_stories/variants/ListItem.brightGreen.test.story.tsx

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/react-webpack5';
 import { ListItem, type ListItemProps } from '../../ListItem';
 import { VariantStory } from './helpers';
-import { allModes } from '../../../../.storybook/modes';
+import { withVariantConfig } from '../../../../.storybook/helpers';
 
 export default {
   component: ListItem,
@@ -16,12 +16,7 @@ export default {
 
 const Default = {
   ...VariantStory,
-  parameters: {
-    variants: ['bright-green'],
-    chromatic: {
-      'bright-green': allModes.brightGreen,
-    },
-  },
+  ...withVariantConfig(['bright-green'], VariantStory),
   args: { variant: 'bright-green' },
 };
 

package/src/listItem/_stories/variants/ListItem.dark.test.story.tsx

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/react-webpack5';
 import { ListItem, type ListItemProps } from '../../ListItem';
 import { VariantStory } from './helpers';
-import { allModes } from '../../../../.storybook/modes';
+import { withVariantConfig } from '../../../../.storybook/helpers';
 
 export default {
   component: ListItem,
@@ -16,12 +16,7 @@ export default {
 
 const Default = {
   ...VariantStory,
-  parameters: {
-    variants: ['dark'],
-    chromatic: {
-      dark: allModes.dark,
-    },
-  },
+  ...withVariantConfig(['dark'], VariantStory),
   args: { variant: 'dark' },
 };
 

package/src/listItem/_stories/variants/ListItem.forestGreen.test.story.tsx

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/react-webpack5';
 import { ListItem, type ListItemProps } from '../../ListItem';
 import { VariantStory } from './helpers';
-import { allModes } from '../../../../.storybook/modes';
+import { withVariantConfig } from '../../../../.storybook/helpers';
 
 export default {
   component: ListItem,
@@ -16,12 +16,7 @@ export default {
 
 const Default = {
   ...VariantStory,
-  parameters: {
-    variants: ['forest-green'],
-    chromatic: {
-      forestGreen: allModes.forestGreen,
-    },
-  },
+  ...withVariantConfig(['forest-green'], VariantStory),
   args: { variant: 'forest-green' },
 };
 

package/src/listItem/_stories/variants/ListItem.rtl.test.story.tsx

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/react-webpack5';
 import { ListItem, type ListItemProps } from '../../ListItem';
 import { VariantStory } from './helpers';
-import { allModes } from '../../../../.storybook/modes';
+import { withVariantConfig } from '../../../../.storybook/helpers';
 
 export default {
   component: ListItem,
@@ -16,12 +16,7 @@ export default {
 
 const Default = {
   ...VariantStory,
-  parameters: {
-    variants: ['rtl'],
-    chromatic: {
-      rtl: allModes.rtl,
-    },
-  },
+  ...withVariantConfig(['rtl'], VariantStory),
   args: { variant: 'rtl' },
 };
 

package/src/modal/Modal.story.tsx

@@ -6,7 +6,7 @@ import { useState } from 'react';
 import { Button, Modal, ModalProps } from '..';
 import { CommonProps, Scroll } from '../common';
 import { lorem10, lorem100, lorem1000 } from '../test-utils';
-import { allModes } from '../../.storybook/modes';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 export default {
   component: Modal,
@@ -78,12 +78,7 @@ export const Basic: Story = {
 
 export const BasicMobile: Story = {
   ...Basic,
-  parameters: {
-    variants: ['mobile'],
-    chromatic: {
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['mobile'], Basic),
 };
 
 export const ContentScroll: Story = {
@@ -97,12 +92,7 @@ export const ContentScroll: Story = {
 
 export const ContentScrollMobile: Story = {
   ...ContentScroll,
-  parameters: {
-    variants: ['mobile'],
-    chromatic: {
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['mobile'], ContentScroll),
 };
 
 export const ViewportScroll: Story = {
@@ -116,12 +106,7 @@ export const ViewportScroll: Story = {
 
 export const ViewportScrollMobile: Story = {
   ...ViewportScroll,
-  parameters: {
-    variants: ['mobile'],
-    chromatic: {
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['mobile'], ViewportScroll),
 };
 
 export const WithoutTitle: Story = {
@@ -134,12 +119,7 @@ export const WithoutTitle: Story = {
 
 export const WithoutTitleMobile: Story = {
   ...WithoutTitle,
-  parameters: {
-    variants: ['mobile'],
-    chromatic: {
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['mobile'], WithoutTitle),
 };
 
 export const WithThemeProviderInContent: Story = {
@@ -161,10 +141,5 @@ export const WithThemeProviderInContent: Story = {
 
 export const WithThemeProviderInContentMobile: Story = {
   ...WithThemeProviderInContent,
-  parameters: {
-    variants: ['mobile'],
-    chromatic: {
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['mobile'], WithThemeProviderInContent),
 };

package/src/prompt/ActionPrompt/ActionPrompt.story.tsx

@@ -4,7 +4,7 @@ import { fn } from 'storybook/test';
 import { Bank } from '@transferwise/icons';
 import { ActionPrompt } from './ActionPrompt';
 import { lorem10 } from '../../test-utils';
-import { allModes } from '../../../.storybook/modes';
+import { withVariantConfig } from '../../../.storybook/helpers';
 
 const meta: Meta<typeof ActionPrompt> = {
   title: 'Prompts/ActionPrompt',
@@ -17,22 +17,22 @@ type Story = StoryObj<typeof ActionPrompt>;
 
 const withComponentGrid =
   ({ maxWidth = 'auto', gap = '1rem' } = {}) =>
-    (Story: () => ReactElement) => (
-      <div
-        style={{
-          width: '100%',
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'flex-start',
-          alignItems: 'flex-start',
-          alignContent: 'flex-start',
-          gap,
-          maxWidth,
-        }}
-      >
-        <Story />
-      </div>
-    );
+  (Story: () => ReactElement) => (
+    <div
+      style={{
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+        alignContent: 'flex-start',
+        gap,
+        maxWidth,
+      }}
+    >
+      <Story />
+    </div>
+  );
 
 export const AllSentiments: Story = {
   render: () => {
@@ -60,12 +60,7 @@ export const AllSentiments: Story = {
 
 export const Mobile: Story = {
   ...AllSentiments,
-  parameters: {
-    variants: ['mobile'],
-    chromatic: {
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['mobile'], AllSentiments),
 };
 
 export const PrimaryActionOnly: Story = {

package/src/snackbar/Snackbar.test.story.tsx

@@ -7,7 +7,7 @@ import SnackbarProvider from './SnackbarProvider';
 import Button from '../button';
 import CheckboxOption from '../checkboxOption';
 import { wait } from '../test-utils/wait';
-import { allModes } from '../../.storybook/modes';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 export default {
   title: 'Dialogs/Snackbar/Tests',
@@ -115,12 +115,7 @@ export const Mobile = {
       </div>
     ) as React.ReactNode,
   },
-  parameters: {
-    variants: ['mobile'],
-    chromatic: {
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['mobile'], Default),
 };
 
 const switchToDarkMode = async (context: { canvasElement: HTMLElement }) => {
@@ -152,12 +147,7 @@ export const DarkMode = {
     ) as React.ReactNode,
   },
   play: switchToDarkMode,
-  parameters: {
-    variants: ['dark'],
-    chromatic: {
-      dark: allModes.dark,
-    },
-  },
+  ...withVariantConfig(['dark'], Default),
 };
 
 const switchToRTL = async (context: { canvasElement: HTMLElement }) => {
@@ -209,12 +199,7 @@ export const RTL = {
     ) as React.ReactNode,
   },
   play: switchToRTL,
-  parameters: {
-    variants: ['rtl'],
-    chromatic: {
-      rtl: allModes.rtl,
-    },
-  },
+  ...withVariantConfig(['rtl'], Default),
 };
 
 export const RTLMobile = {
@@ -223,13 +208,7 @@ export const RTLMobile = {
     ...RTL.args,
   },
   play: switchToRTL,
-  parameters: {
-    variants: ['rtl', 'mobile'],
-    chromatic: {
-      rtl: allModes.rtl,
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['rtl', 'mobile'], Default),
 };
 
 export const Zoom400 = {
@@ -254,12 +233,7 @@ export const Zoom400 = {
       </div>
     ),
   },
-  parameters: {
-    variants: ['400%'],
-    chromatic: {
-      zoom400: allModes.zoom400,
-    },
-  },
+  ...withVariantConfig(['400%'], Default),
 };
 
 export const MultipleClicks = {

package/src/statusIcon/StatusIcon.story.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Sentiment, Size, Status } from '../common';
 
 import StatusIcon, { StatusIconSentiment } from './StatusIcon';
-import { allModes } from '../../.storybook/modes';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 export default {
   component: StatusIcon,
@@ -30,15 +30,11 @@ export const Presentational: Story = {
 };
 
 export const Variants: Story = {
-  parameters: {
-    padding: '0',
-    variants: ['default', 'dark', 'bright-green', 'forest-green'],
-    chromatic: {
-      dark: allModes.dark,
-      brightGreen: allModes.brightGreen,
-      forestGreen: allModes.forestGreen,
+  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green'], {
+    parameters: {
+      padding: '0',
     },
-  },
+  }),
   render: () => (
     <span style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '400px' }}>
       {[

package/src/tooltip/Tooltip.story.tsx

@@ -4,7 +4,7 @@ import { userEvent, within } from 'storybook/test';
 import Button from '../button';
 
 import Tooltip from './Tooltip';
-import { allModes } from '../../.storybook/modes';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 export default {
   component: Tooltip,
@@ -40,10 +40,5 @@ export const OpenedTooltip: Story = {
 
 export const OpenedTooltipDark: Story = {
   ...OpenedTooltip,
-  parameters: {
-    variants: ['dark'],
-    chromatic: {
-      dark: allModes.dark,
-    },
-  },
+  ...withVariantConfig(['dark'], OpenedTooltip),
 };