@transferwise/components 46.124.0 → 46.125.0

package/build/types/tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/Tabs.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/Tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,KAAK,EAAa,MAAM,WAAW,CAAC;AAM7C,OAAO,EAKL,KAAK,EACN,MAAM,SAAS,CAAC;AAIjB,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC;IACzB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,UAAU,SAAS;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC;IACvD,KAAK,EAAE,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,OAAO,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAErF,MAAM,CAAC,YAAY;;;MAGY;IAE/B,kBAAkB,4CAA+B;gBAErC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC;IAWhC,SAAS,EAAE,cAAc,GAAG,IAAI,CAAQ;IAExC,cAAc,SAAK;IAEnB,OAAO,EAAE,CAAC,aAAa,GAAG,IAAI,CAAC,EAAE,CAAM;IAEvC,IAAI,SAAS,WAEZ;IAED,iBAAiB;IAWjB,kBAAkB,CAAC,aAAa,EAAE,SAAS;IA8B3C,oBAAoB;IAMpB,YAAY,aAEV;IAEF,uBAAuB,GAAI,MAAM,cAAc,GAAG,IAAI,UAGpD;IAEF,iBAAiB,GAAI,MAAM,cAAc,GAAG,IAAI,UAQ9C;IAEF,aAAa,GAAI,OAAO,MAAM,aAI5B;IAEF,eAAe,eAMb;IAEF,wBAAwB,GAAI,kBAAkB,MAAM,YAKlD;IAEF,WAAW,aAeT;IAEF,eAAe,eAWb;IAMF,cAAc,GAAI,UAAU,MAAM,EAAE,OAAO,KAAK,EAAE,KAAK,KAAK,KAAG,MAAM,CA4BnE;IAEF,yBAAyB,GAAI,YAAY,MAAM,aAA6C;IAE5F,SAAS,GAAI,OAAO,MAAM,UAGxB;IAEF,WAAW,GAAI,OAAO,MAAM,UAM1B;IAEF,aAAa,GAAI,OAAO,KAAK,UAM3B;IAEF,cAAc,GAAI,OAAO,MAAM,gBAE7B;IAEF,SAAS,GAAI,OAAO,MAAM,MAAM,OAAO,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,UAIvE;IAEF,gBAAgB,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CASvD;IAEF,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAgCtD;IAEF,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CA6BrD;IAEF,MAAM;CAgFP"}

package/build/types/tabs/utils.d.ts

@@ -8,6 +8,4 @@ export declare const getSwipeDifference: (start: Swipe, end: Swipe, axis?: "x" |
 export declare const swipedLeftToRight: (start: Swipe, end: Swipe) => boolean;
 export declare const swipedRightToLeft: (start: Swipe, end: Swipe) => boolean;
 export declare const swipeShouldChangeTab: (start: Swipe, end: Swipe) => boolean;
-export declare function getVelocity(coords: Swipe[]): number;
-export declare const getElasticDragDifference: (difference: number) => number;
 //# sourceMappingURL=utils.d.ts.map

package/build/types/tabs/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/tabs/utils.ts"],"names":[],"mappings":"AAOA,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,gBAAgB,GAAI,OAAO,KAAK,EAAE,KAAK,KAAK,WAIxD,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,OAAO,KAAK,EAAE,KAAK,KAAK,EAAE,OAAM,GAAG,GAAG,GAAS,WAEjF,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,KAAK,EAAE,KAAK,KAAK,YAEzD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,KAAK,EAAE,KAAK,KAAK,YAEzD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,OAAO,KAAK,EAAE,KAAK,KAAK,YAK5D,CAAC;AAEF,wBAAgB,WAAW,CAAC,MAAM,EAAE,KAAK,EAAE,UAU1C;AAOD,eAAO,MAAM,wBAAwB,GAAI,YAAY,MAAM,WACmB,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/tabs/utils.ts"],"names":[],"mappings":"AAOA,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,gBAAgB,GAAI,OAAO,KAAK,EAAE,KAAK,KAAK,WAIxD,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,OAAO,KAAK,EAAE,KAAK,KAAK,EAAE,OAAM,GAAG,GAAG,GAAS,WAEjF,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,KAAK,EAAE,KAAK,KAAK,YAEzD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,KAAK,EAAE,KAAK,KAAK,YAEzD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,OAAO,KAAK,EAAE,KAAK,KAAK,YAK5D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.124.0",
+  "version": "46.125.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -56,7 +56,7 @@
     "@storybook/react-webpack5": "10.3.0-alpha.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.1",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@transferwise/icons": "^4.0.2",
     "@tsconfig/recommended": "^1.0.13",
@@ -78,6 +78,7 @@
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
+    "jsdom-testing-mocks": "^1.16.0",
     "lodash.times": "^4.3.2",
     "react-intl": "^7.1.11",
     "rollup": "^4.54.0",
@@ -103,11 +104,10 @@
   "dependencies": {
     "@babel/runtime": "^7.28.4",
     "@floating-ui/react": "^0.27.16",
-    "@headlessui/react": "^1.7.19",
+    "@headlessui/react": "^2.2.9",
     "@popperjs/core": "^2.11.8",
     "@react-aria/focus": "^3.21.3",
     "@react-aria/overlays": "^3.31.0",
-    "@react-spring/web": "~10.0.3",
     "@transferwise/formatting": "^2.13.4",
     "@transferwise/neptune-validation": "^3.3.1",
     "clsx": "^2.1.1",

package/src/actionButton/ActionButton.story.tsx

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Settings } from '@transferwise/icons';
 
 import ActionButton from './ActionButton';
-import { allModes } from '../../.storybook/modes';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 /**
  * This component is deprecated please use new [Button](?path=/docs/actions-button--docs).
@@ -47,14 +47,7 @@ export const Basic: Story = {
       </div>
     </div>
   ),
-  parameters: {
-    variants: ['default', 'dark', 'rtl', 'mobile'],
-    chromatic: {
-      dark: allModes.dark,
-      rtl: allModes.rtl,
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['default', 'dark', 'rtl', 'mobile']),
 };
 
 export const Disabled: Story = {

package/src/avatar/Avatar.story.tsx

@@ -5,7 +5,7 @@ import { Flag } from '@wise/art';
 import { Size } from '../common';
 
 import Avatar, { AvatarType } from '.';
-import { allModes } from '../../.storybook/modes';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 /**
  * @deprecated use **`AvatarView`** components instead
@@ -226,11 +226,5 @@ export const Table: Story = {
       </div>
     );
   },
-  parameters: {
-    variants: ['default', 'dark', 'rtl'],
-    chromatic: {
-      dark: allModes.dark,
-      rtl: allModes.rtl,
-    },
-  },
+  ...withVariantConfig(['default', 'dark', 'rtl']),
 };

package/src/button/_stories/{Button.tests.story.tsx → Button.test.story.tsx}

@@ -3,7 +3,7 @@ import { ArrowRight, ChevronRight, Freeze } from '@transferwise/icons';
 import { expect, userEvent, within } from 'storybook/test';
 import Button from '../Button.resolver';
 import { ButtonPriority } from '../Button.types';
-import { allModes } from '../../../.storybook/modes';
+import { withVariantConfig } from '../../../.storybook/helpers';
 
 const meta: Meta<typeof Button> = {
   component: Button,
@@ -32,16 +32,11 @@ const buttonPriorities = ['primary', 'secondary', 'secondary-neutral', 'tertiary
 const buttonSizes = ['sm', 'md', 'lg'] as const;
 export const AllVariants: Story = {
   tags: ['!autodocs'],
-  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="button-variants"

package/src/checkbox/Checkbox.story.tsx

@@ -5,7 +5,7 @@ import { Field } from '../field/Field';
 import { lorem10 } from '../test-utils';
 
 import Checkbox from './Checkbox';
-import { allModes } from '../../.storybook/modes';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 const meta: Meta<typeof Checkbox> = {
   component: Checkbox,
@@ -33,25 +33,12 @@ export const Multiple: Story = {
       </>
     );
   },
-  parameters: {
-    variants: ['default', 'dark', 'rtl'],
-    chromatic: {
-      dark: allModes.dark,
-      rtl: allModes.rtl,
-    },
-  },
+  ...withVariantConfig(['default', 'dark', 'rtl']),
 };
 
 export const MultipleMobile: Story = {
   ...Multiple,
-  parameters: {
-    variants: ['default', 'dark', 'rtl', 'mobile'],
-    chromatic: {
-      dark: allModes.dark,
-      rtl: allModes.rtl,
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['default', 'dark', 'rtl', 'mobile'], Multiple),
 };
 
 export const WithinField = {

package/src/circularButton/CircularButton.story.tsx

@@ -6,7 +6,7 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import CircularButton from './CircularButton';
 import Title from '../title';
 import Body from '../body';
-import { allModes } from '../../.storybook/modes';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 export default {
   component: CircularButton,
@@ -89,10 +89,5 @@ export const All: Story = {
 
 export const All400Zoom: Story = {
   ...All,
-  parameters: {
-    variants: ['400%'],
-    chromatic: {
-      '400%': allModes.zoom400,
-    },
-  },
+  ...withVariantConfig(['400%'], All),
 };

package/src/common/bottomSheet/BottomSheet.story.tsx

@@ -11,7 +11,7 @@ import Title from '../../title/Title';
 import { Typography } from '../propsValues/typography';
 
 import BottomSheet from './BottomSheet';
-import { allModes } from '../../../.storybook/modes';
+import { withVariantConfig } from '../../../.storybook/helpers';
 
 export default {
   component: BottomSheet,
@@ -67,12 +67,7 @@ export const Basic: Story = {
 
 export const BasicMobile: Story = {
   ...Basic,
-  parameters: {
-    variants: ['mobile'],
-    chromatic: {
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['mobile'], Basic),
 };
 
 export const WithOverflowContent: Story = {
@@ -106,41 +101,20 @@ export const WithOverflowContent: Story = {
 
 export const WithOverflowContentMobile: Story = {
   ...WithOverflowContent,
-  parameters: {
-    variants: ['mobile'],
-    chromatic: {
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['mobile'], WithOverflowContent),
 };
 
 export const WithOverflowContentDark: Story = {
   ...WithOverflowContent,
-  parameters: {
-    variants: ['dark'],
-    chromatic: {
-      dark: allModes.dark,
-    },
-  },
+  ...withVariantConfig(['dark'], WithOverflowContent),
 };
 
 export const WithOverflowContentDarkMobile: Story = {
   ...WithOverflowContent,
-  parameters: {
-    variants: ['dark', 'mobile'],
-    chromatic: {
-      dark: allModes.dark,
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['dark', 'mobile'], WithOverflowContent),
 };
 
 export const WithOverflowContentZoom400: Story = {
   ...WithOverflowContent,
-  parameters: {
-    variants: ['400%'],
-    chromatic: {
-      '400%': allModes.zoom400,
-    },
-  },
+  ...withVariantConfig(['400%'], WithOverflowContent),
 };

package/src/common/circle/Circle.story.tsx

@@ -3,7 +3,7 @@ import Circle from './Circle';
 import { Profile } from '@transferwise/icons';
 import { CircleProps } from '.';
 import Body from '../../body';
-import { allModes } from '../../../.storybook/modes';
+import { withVariantConfig } from '../../../.storybook/helpers';
 
 export default {
   title: 'Internal/Circle',
@@ -46,13 +46,7 @@ export const Sizes: Story = {
       </div>
     );
   },
-  parameters: {
-    variants: ['light', 'dark'],
-    chromatic: {
-      light: allModes.light,
-      dark: allModes.dark,
-    },
-  },
+  ...withVariantConfig(['light', 'dark']),
 };
 
 export const FixedSize: Story = {
@@ -83,10 +77,5 @@ export const FixedSize: Story = {
       </div>
     );
   },
-  parameters: {
-    variants: ['400%'],
-    chromatic: {
-      zoom400: allModes.zoom400,
-    },
-  },
+  ...withVariantConfig(['400%']),
 };

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.tests.story.tsx → 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.tests.story.tsx → 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/index.ts

@@ -35,7 +35,7 @@ export type { HeaderProps } from './header';
 export type { EmphasisProps } from './emphasis';
 export type { FieldProps } from './field/Field';
 export type { InfoProps } from './info';
-export type { InlinePromptProps } from './prompt';
+export type { InlinePromptProps, ActionPromptProps } from './prompt';
 export type { InputWithDisplayFormatProps } from './inputWithDisplayFormat';
 export type { InputProps } from './inputs/Input';
 export type { InputGroupProps } from './inputs/InputGroup';
@@ -171,7 +171,7 @@ export { default as Header } from './header';
 export { default as Image } from './image';
 export { default as Info } from './info';
 export { default as InlineAlert } from './inlineAlert';
-export { InlinePrompt } from './prompt';
+export { InlinePrompt, ActionPrompt } from './prompt';
 export { default as InputWithDisplayFormat } from './inputWithDisplayFormat';
 export { Input } from './inputs/Input';
 export { InputGroup } from './inputs/InputGroup';

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.spec.tsx → SelectInput.test.tsx}

@@ -1,19 +1,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,
-  mockRequestAnimationFrame,
-} from '../test-utils';
+import { render, mockMatchMedia, mockResizeObserver } from '../test-utils';
 
 import { SelectInput, type SelectInputOptionItem, type SelectInputProps } from './SelectInput';
 import { Field } from '../field/Field';
 
 mockMatchMedia();
 mockResizeObserver();
-mockRequestAnimationFrame();
+mockAnimationsApi();
 
 describe('SelectInput', () => {
   it('renders placeholder', () => {
@@ -67,6 +63,81 @@ describe('SelectInput', () => {
     expect(footer).toHaveTextContent(/‘ur’$/);
   });
 
+  it('allows navigating the listbox with cursors', async () => {
+    render(
+      <SelectInput
+        items={[
+          { type: 'option', value: 'GBP' },
+          { type: 'option', value: 'EUR' },
+          { type: 'option', value: 'USD' },
+        ]}
+        renderFooter={({ queryNormalized: normalizedQuery }) => (
+          <button type="button">Footer button</button>
+        )}
+        filterable
+      />,
+    );
+
+    // opened the dropbox, with search focused
+    await userEvent.tab();
+    await userEvent.keyboard(' ');
+    expect(screen.getByRole('combobox')).toHaveFocus();
+
+    // search still focused but listbox can be navigated via keyboard
+    await userEvent.keyboard('{ArrowDown}');
+    expect(screen.getByRole('combobox')).toHaveFocus();
+    expect(screen.getByRole('option', { name: 'EUR' })).toHaveClass(
+      'np-select-input-option-container--active',
+    );
+
+    // tab moves focus to listbox
+    await userEvent.tab();
+    expect(screen.getByRole('listbox')).toHaveFocus();
+    expect(screen.getByRole('combobox')).not.toHaveFocus();
+
+    // arrows still navigate within listbox
+    await userEvent.keyboard('{ArrowDown}');
+    expect(screen.getByRole('option', { name: 'USD' })).toHaveClass(
+      'np-select-input-option-container--active',
+    );
+
+    // tab moves focus to footer but highlighted option is retained
+    await userEvent.tab();
+    expect(screen.getByRole('listbox')).not.toHaveFocus();
+    expect(screen.getByRole('combobox')).not.toHaveFocus();
+    expect(screen.getByText('Footer button')).toHaveFocus();
+    expect(screen.getByRole('option', { name: 'USD' })).toHaveClass(
+      'np-select-input-option-container--active',
+    );
+
+    // shift+tab moves focus back to listbox
+    await userEvent.tab({ shift: true });
+    expect(screen.getByRole('listbox')).toHaveFocus();
+    expect(screen.getByRole('combobox')).not.toHaveFocus();
+    expect(screen.getByText('Footer button')).not.toHaveFocus();
+
+    // previously highlighted option is still active within listbox
+    expect(screen.getByRole('option', { name: 'USD' })).toHaveClass(
+      'np-select-input-option-container--active',
+    );
+
+    // arrows continue to navigate within listbox
+    await userEvent.keyboard('{ArrowUp}');
+    expect(screen.getByRole('option', { name: 'EUR' })).toHaveClass(
+      'np-select-input-option-container--active',
+    );
+
+    // shift+tab moves focus back to search input
+    await userEvent.tab({ shift: true });
+    expect(screen.getByRole('combobox')).toHaveFocus();
+
+    // arrows continue to navigate within listbox
+    await userEvent.keyboard('{ArrowUp}');
+    expect(screen.getByRole('option', { name: 'GBP' })).toHaveClass(
+      'np-select-input-option-container--active',
+    );
+  });
+
   it('shows item selected via mouse', async () => {
     const handleClose = jest.fn();