@transferwise/components 0.0.0-experimental-6fb3b67 → 0.0.0-experimental-4658255

package/build/styles/main.css

@@ -3524,13 +3524,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   padding-inline-start: 8px;
   padding-inline-start: var(--size-8);
 }
-.wds-select-input-scroll-freeze {
-  scroll-behavior: unset !important;
-  height: 100vh;
-}
-.wds-select-input-scroll-freeze body {
-  height: 100vh;
-}
 .np-bottom-sheet-v2-container {
   position: relative;
   z-index: 1060;
@@ -3544,8 +3537,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   transition-property: opacity;
   transition-timing-function: ease-out;
   transition-duration: 300ms;
-  will-change: transform;
-  min-height: 100vh;
 }
 .np-bottom-sheet-v2-backdrop--closed {
   opacity: 0;
@@ -3553,7 +3544,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .np-bottom-sheet-v2 {
   position: fixed;
   inset: 0px;
-  bottom: env(safe-area-inset-bottom, 0);
+  bottom: env(keyboard-inset-height, 0px);
   margin-left: 8px;
   margin-left: var(--size-8);
   margin-right: 8px;
@@ -3563,19 +3554,18 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  height: calc(100vh - 64px - 40px);
-  height: calc(100vh - var(--size-64) - 40px);
 }
 .np-bottom-sheet-v2-content {
   display: flex;
   flex-direction: column;
   overflow: auto;
-  border-radius: 32px;
-  border-radius: var(--size-32);
+  border-top-left-radius: 32px;
+  /* TODO: Tokenize */
+  border-top-right-radius: 32px;
+  /* TODO: Tokenize */
   background-color: #ffffff;
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
-  will-change: transform;
 }
 .np-bottom-sheet-v2-content:focus {
   outline: none;

package/build/types/inputs/SelectInput.d.ts

@@ -32,6 +32,25 @@ export interface SelectInputProps<T = string, M extends boolean = false> {
     multiple?: M;
     placeholder?: string;
     items: readonly SelectInputItem<NonNullable<T>>[];
+    /**
+     * Enables browser autocomplete integration through the search input.
+     * Accepts standard HTML autocomplete values (e.g., "country-name", "address-level1").
+     *
+     * Requires `filterable={true}` to enable the search input.
+     *
+     * @example
+     * <SelectInput
+     *   name="country"
+     *   autocomplete="country-name"
+     *   filterable={true}
+     *   items={[{
+     *     type: 'option',
+     *     value: 'GB',
+     *     filterMatchers: ['United Kingdom', 'UK']
+     *   }]}
+     * />
+     */
+    autocomplete?: string;
     defaultValue?: M extends true ? readonly T[] : T;
     value?: M extends true ? readonly T[] : T;
     compareValues?: (keyof NonNullable<T> & string) | ((a: T | undefined, b: T | undefined) => boolean);
@@ -67,7 +86,7 @@ export interface SelectInputProps<T = string, M extends boolean = false> {
     onClose?: () => void;
     onClear?: () => void;
 }
-export declare function SelectInput<T = string, M extends boolean = false>({ id: idProp, parentId, name, multiple, placeholder, items, defaultValue, value: controlledValue, compareValues, renderValue, renderFooter, renderTrigger, filterable, filterPlaceholder, disabled, size, className, UNSAFE_triggerButtonProps, triggerRef: externalTriggerRef, onFilterChange, onChange, onOpen, onClose, onClear, }: SelectInputProps<T, M>): import("react").JSX.Element;
+export declare function SelectInput<T = string, M extends boolean = false>({ id: idProp, parentId, name, multiple, placeholder, autocomplete, items, defaultValue, value: controlledValue, compareValues, renderValue, renderFooter, renderTrigger, filterable, filterPlaceholder, disabled, size, className, UNSAFE_triggerButtonProps, triggerRef: externalTriggerRef, onFilterChange, onChange, onOpen, onClose, onClear, }: SelectInputProps<T, M>): import("react").JSX.Element;
 type SelectInputTriggerButtonElementType = 'button' | React.ComponentType;
 export type SelectInputTriggerButtonProps<T extends SelectInputTriggerButtonElementType = 'button'> = Merge<React.ComponentPropsWithoutRef<T>, {
     as?: T;

package/build/types/inputs/SelectInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../src/inputs/SelectInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGL,SAAS,EAQV,MAAM,OAAO,CAAC;AASf,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAKjC,OAAO,EAAsB,wBAAwB,EAAE,MAAM,YAAY,CAAC;AAM1E,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAsBrD,MAAM,WAAW,qBAAqB,CAAC,CAAC,GAAG,MAAM;IAC/C,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,CAAC,CAAC;IACT,cAAc,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,oBAAoB,CAAC,CAAC,GAAG,MAAM;IAC9C,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,SAAS,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7C,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;KACjC,CAAC;CACH;AAED,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,WAAW,CAAC;CACnB;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,GAAG,MAAM,IAClC,qBAAqB,CAAC,CAAC,CAAC,GACxB,oBAAoB,CAAC,CAAC,CAAC,GACvB,wBAAwB,CAAC;AAiE7B,MAAM,WAAW,gBAAgB,CAAC,CAAC,GAAG,MAAM,EAAE,CAAC,SAAS,OAAO,GAAG,KAAK;IACrE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,SAAS,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAClD,YAAY,CAAC,EAAE,CAAC,SAAS,IAAI,GAAG,SAAS,CAAC,EAAE,GAAG,CAAC,CAAC;IACjD,KAAK,CAAC,EAAE,CAAC,SAAS,IAAI,GAAG,SAAS,CAAC,EAAE,GAAG,CAAC,CAAC;IAC1C,aAAa,CAAC,EACV,CAAC,MAAM,WAAW,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,GAC/B,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,SAAS,EAAE,CAAC,EAAE,CAAC,GAAG,SAAS,KAAK,OAAO,CAAC,CAAC;IACtD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IACjF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QACpB,YAAY,EAAE,OAAO,CAAC;QACtB,eAAe,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;KAC5C,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QACrB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,gBAAgB,EAAE,OAAO,CAAC;QAC1B,KAAK,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;QAChC,QAAQ,EAAE,OAAO,CAAC;QAClB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;QACzB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;KAC/B,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB,CAAC,EAAE,wBAAwB,CAAC,iBAAiB,CAAC,GAAG;QACxE,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;IACF,gDAAgD;IAChD,UAAU,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IAC9D,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IACnF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,SAAS,IAAI,GAAG,CAAC,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IACrD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AA+DD,wBAAgB,WAAW,CAAC,CAAC,GAAG,MAAM,EAAE,CAAC,SAAS,OAAO,GAAG,KAAK,EAAE,EACjE,EAAE,EAAE,MAAM,EACV,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,KAAK,EACL,YAAY,EACZ,KAAK,EAAE,eAAe,EACtB,aAAa,EACb,WAAoB,EACpB,YAAY,EACZ,aAAoC,EACpC,UAAU,EACV,iBAAiB,EACjB,QAAQ,EACR,IAAW,EACX,SAAS,EACT,yBAAyB,EACzB,UAAU,EAAE,kBAAkB,EAC9B,cAAqB,EACrB,QAAQ,EACR,MAAM,EACN,OAAO,EACP,OAAO,GACR,EAAE,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,+BA6LxB;AAUD,KAAK,mCAAmC,GAAG,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC;AAE1E,MAAM,MAAM,6BAA6B,CACvC,CAAC,SAAS,mCAAmC,GAAG,QAAQ,IACtD,KAAK,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE;IAAE,EAAE,CAAC,EAAE,CAAC,CAAA;CAAE,CAAC,CAAC;AAEzD,wBAAgB,wBAAwB,CAAC,CAAC,SAAS,mCAAmC,GAAG,QAAQ,EAAE,EACjG,EAAkB,EAClB,GAAG,SAAS,EACb,EAAE,6BAA6B,CAAC,CAAC,CAAC,+BAclC;AAsbD,MAAM,WAAW,6BAA6B;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,IAAI,EACJ,WAAW,EACX,IAAI,GACL,EAAE,6BAA6B,+BAiD/B"}
+{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../src/inputs/SelectInput.tsx"],"names":[],"mappings":"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"}

package/build/types/inputs/_BottomSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/inputs/_BottomSheet.tsx"],"names":[],"mappings":"AAkBA,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QACrB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAeD,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,aAAa,EACb,KAAK,EACL,eAAe,EACf,OAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,gBAAgB,+BAiGlB"}
+{"version":3,"file":"_BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/inputs/_BottomSheet.tsx"],"names":[],"mappings":"AAmBA,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QACrB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,aAAa,EACb,KAAK,EACL,eAAe,EACf,OAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,gBAAgB,+BA6FlB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-6fb3b67",
+  "version": "0.0.0-experimental-4658255",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -83,8 +83,8 @@
     "storybook": "^9.1.3",
     "storybook-addon-tag-badges": "^2.0.2",
     "storybook-addon-test-codegen": "^2.0.1",
-    "@transferwise/neptune-css": "14.25.0",
     "@transferwise/less-config": "3.1.2",
+    "@transferwise/neptune-css": "14.25.0",
     "@wise/components-theming": "1.7.0",
     "@wise/wds-configs": "0.0.0"
   },
@@ -102,8 +102,8 @@
     "@floating-ui/react": "^0.27.16",
     "@headlessui/react": "^1.7.19",
     "@popperjs/core": "^2.11.8",
-    "@react-aria/focus": "^3.21.1",
-    "@react-aria/overlays": "^3.29.1",
+    "@react-aria/focus": "^3.21.0",
+    "@react-aria/overlays": "^3.28.0",
     "@react-spring/web": "~10.0.1",
     "@transferwise/formatting": "^2.13.4",
     "@transferwise/neptune-validation": "^3.3.1",

package/src/inputs/SelectInput.css

@@ -1,10 +1,3 @@
-.wds-select-input-scroll-freeze {
-  scroll-behavior: unset !important;
-  height: 100vh;
-}
-.wds-select-input-scroll-freeze body {
-  height: 100vh;
-}
 .np-bottom-sheet-v2-container {
   position: relative;
   z-index: 1060;
@@ -18,8 +11,6 @@
   transition-property: opacity;
   transition-timing-function: ease-out;
   transition-duration: 300ms;
-  will-change: transform;
-  min-height: 100vh;
 }
 .np-bottom-sheet-v2-backdrop--closed {
   opacity: 0;
@@ -27,7 +18,7 @@
 .np-bottom-sheet-v2 {
   position: fixed;
   inset: 0px;
-  bottom: env(safe-area-inset-bottom, 0);
+  bottom: env(keyboard-inset-height, 0px);
   margin-left: 8px;
   margin-left: var(--size-8);
   margin-right: 8px;
@@ -37,19 +28,18 @@
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  height: calc(100vh - 64px - 40px);
-  height: calc(100vh - var(--size-64) - 40px);
 }
 .np-bottom-sheet-v2-content {
   display: flex;
   flex-direction: column;
   overflow: auto;
-  border-radius: 32px;
-  border-radius: var(--size-32);
+  border-top-left-radius: 32px;
+  /* TODO: Tokenize */
+  border-top-right-radius: 32px;
+  /* TODO: Tokenize */
   background-color: #ffffff;
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
-  will-change: transform;
 }
 .np-bottom-sheet-v2-content:focus {
   outline: none;

package/src/inputs/SelectInput.spec.tsx

@@ -3,21 +3,13 @@ import { userEvent } from '@testing-library/user-event';
 
 import { render, mockMatchMedia, mockResizeObserver } from '../test-utils';
 
-import { useScreenSize } from '../common/hooks/useScreenSize';
 import { SelectInput, type SelectInputOptionItem, type SelectInputProps } from './SelectInput';
 import { Field } from '../field/Field';
 
 mockMatchMedia();
 mockResizeObserver();
-jest.mock('../common/hooks/useScreenSize');
 
 describe('SelectInput', () => {
-  beforeEach(() => {
-    (useScreenSize as jest.Mock).mockReturnValue(true);
-  });
-
-  afterEach(jest.clearAllMocks);
-
   it('renders placeholder', () => {
     render(
       <SelectInput
@@ -317,29 +309,4 @@ describe('SelectInput', () => {
       expect(listBox).not.toHaveAttribute('aria-labelledby');
     });
   });
-
-  describe('smooth scroll reset', () => {
-    const options: SelectInputOptionItem[] = [
-      { type: 'option', value: 'Banana' },
-      { type: 'option', value: 'Orange' },
-      { type: 'option', value: 'Olive' },
-    ];
-
-    beforeEach(() => {
-      (useScreenSize as jest.Mock).mockReturnValue(false);
-    });
-
-    afterEach(jest.clearAllMocks);
-
-    it('toggles scroll-resetting class', async () => {
-      render(<SelectInput items={options} />);
-      expect(document.documentElement).not.toHaveClass('wds-select-input-scroll-freeze');
-
-      await userEvent.click(screen.getByRole('combobox'));
-      expect(document.documentElement).toHaveClass('wds-select-input-scroll-freeze');
-
-      await userEvent.click(document.documentElement);
-      expect(document.documentElement).not.toHaveClass('wds-select-input-scroll-freeze');
-    });
-  });
 });

package/src/inputs/SelectInput.story.tsx

@@ -516,3 +516,97 @@ export const WithinModal: Story<Currency> = {
     },
   ],
 };
+
+interface Country {
+  code: string;
+  name: string;
+}
+
+const countries: Country[] = [
+  { code: 'US', name: 'United States' },
+  { code: 'GB', name: 'United Kingdom' },
+  { code: 'CA', name: 'Canada' },
+  { code: 'AU', name: 'Australia' },
+  { code: 'DE', name: 'Germany' },
+  { code: 'FR', name: 'France' },
+  { code: 'JP', name: 'Japan' },
+  { code: 'BR', name: 'Brazil' },
+  { code: 'IN', name: 'India' },
+  { code: 'CN', name: 'China' },
+  { code: 'IT', name: 'Italy' },
+  { code: 'ES', name: 'Spain' },
+  { code: 'NL', name: 'Netherlands' },
+  { code: 'CH', name: 'Switzerland' },
+  { code: 'SE', name: 'Sweden' },
+];
+
+function countryOption(country: Country) {
+  return {
+    type: 'option',
+    value: country.code,
+    filterMatchers: [country.code, country.name],
+  } satisfies SelectInputItem;
+}
+
+export const WithAutocomplete: Story<string> = {
+  args: {
+    name: 'country',
+    autocomplete: 'country-name',
+    placeholder: 'Select your country',
+    items: countries.map(countryOption),
+    renderValue: (countryCode, withinTrigger) => {
+      const country = countries.find((c) => c.code === countryCode);
+      return (
+        <SelectInputOptionContent
+          title={withinTrigger ? countryCode : country?.name || countryCode}
+          note={withinTrigger ? undefined : countryCode}
+          icon={<Flag code={countryCode} intrinsicSize={24} />}
+        />
+      );
+    },
+    filterable: true,
+    filterPlaceholder: 'Type a country name',
+    size: 'lg',
+  },
+  render: function Render({ onChange, onClear, ...args }) {
+    const [selectedCountry, setSelectedCountry] = useState<string | undefined>(undefined);
+
+    return (
+      <div>
+        <form
+          method="post"
+          onSubmit={(e) => {
+            e.preventDefault();
+            console.log(
+              `Form submitted with country: ${selectedCountry}. This saves data for browser autocomplete!`,
+            );
+          }}
+        >
+          <div>
+            <label htmlFor="country-select" className="block text-sm font-medium mb-2">
+              Country Selection with Autocomplete:
+            </label>
+            <SelectInput
+              {...args}
+              id="country-select"
+              value={selectedCountry}
+              onChange={(country) => {
+                setSelectedCountry(country);
+                onChange?.(country);
+                console.log('Country selected via SelectInput:', country);
+              }}
+              onClear={() => {
+                setSelectedCountry(undefined);
+                onClear?.();
+              }}
+            />
+          </div>
+
+          <Button type="submit" v2 className="m-t-2" data-testid="submit-btn">
+            Submit Form
+          </Button>
+        </form>
+      </div>
+    );
+  },
+};

package/src/inputs/SelectInput.tsx

@@ -155,6 +155,25 @@ export interface SelectInputProps<T = string, M extends boolean = false> {
   multiple?: M;
   placeholder?: string;
   items: readonly SelectInputItem<NonNullable<T>>[];
+  /**
+   * Enables browser autocomplete integration through the search input.
+   * Accepts standard HTML autocomplete values (e.g., "country-name", "address-level1").
+   *
+   * Requires `filterable={true}` to enable the search input.
+   *
+   * @example
+   * <SelectInput
+   *   name="country"
+   *   autocomplete="country-name"
+   *   filterable={true}
+   *   items={[{
+   *     type: 'option',
+   *     value: 'GB',
+   *     filterMatchers: ['United Kingdom', 'UK']
+   *   }]}
+   * />
+   */
+  autocomplete?: string;
   defaultValue?: M extends true ? readonly T[] : T;
   value?: M extends true ? readonly T[] : T;
   compareValues?:
@@ -257,6 +276,7 @@ export function SelectInput<T = string, M extends boolean = false>({
   name,
   multiple,
   placeholder,
+  autocomplete,
   items,
   defaultValue,
   value: controlledValue,
@@ -457,7 +477,15 @@ export function SelectInput<T = string, M extends boolean = false>({
               searchInputRef={searchInputRef}
               listboxRef={listboxRef}
               filterQuery={deferredFilterQuery}
+              autocomplete={autocomplete}
+              name={name}
               onFilterChange={setFilterQuery}
+              onAutocompleteSelect={(matchedValue) => {
+                onChange?.(matchedValue as M extends true ? T[] : T);
+                if (!multiple) {
+                  setOpen(false);
+                }
+              }}
               {...getListBoxLabelProps()}
             />
           </OptionsOverlay>
@@ -565,6 +593,9 @@ interface SelectInputOptionsProps<T = string>
   onFilterChange: (query: string) => void;
   listBoxLabel?: string;
   listBoxLabelledBy?: string;
+  autocomplete?: string;
+  name?: string;
+  onAutocompleteSelect?: (value: T) => void;
 }
 
 function SelectInputOptions<T = string>({
@@ -581,6 +612,9 @@ function SelectInputOptions<T = string>({
   onFilterChange,
   listBoxLabel,
   listBoxLabelledBy,
+  autocomplete,
+  name,
+  onAutocompleteSelect,
 }: SelectInputOptionsProps<T>) {
   const intl = useIntl();
   const virtualiserHandlerRef = useRef<VirtualizerHandle>(null);
@@ -664,6 +698,35 @@ function SelectInputOptions<T = string>({
     );
   };
 
+  const findMatchingItem = (autocompleteValue: string): T | null => {
+    const flatOptions = items
+      .flatMap((item) =>
+        item.type === 'group' ? item.options : item.type === 'option' ? [item] : [],
+      )
+      .filter(
+        (item): item is SelectInputOptionItem<NonNullable<T>> =>
+          item.type === 'option' && item.value != null,
+      );
+
+    const exactMatch = flatOptions.find(
+      (option) =>
+        String(option.value) === autocompleteValue ||
+        option.filterMatchers?.some((matcher) => matcher === autocompleteValue),
+    );
+
+    if (exactMatch) {
+      return exactMatch.value;
+    }
+
+    const fuzzyMatch = flatOptions.find((option) =>
+      option.filterMatchers?.some((matcher) =>
+        matcher.toLowerCase().includes(autocompleteValue.toLowerCase()),
+      ),
+    );
+
+    return fuzzyMatch ? fuzzyMatch.value : null;
+  };
+
   return (
     <ListboxBase.Options
       as={SelectInputOptionsContainer}
@@ -684,6 +747,8 @@ function SelectInputOptions<T = string>({
           <SearchInput
             ref={searchInputRef}
             id={id}
+            name={name}
+            autoComplete={autocomplete}
             role="combobox"
             shape="rectangle"
             placeholder={filterPlaceholder}
@@ -703,8 +768,26 @@ function SelectInputOptions<T = string>({
             onChange={(event) => {
               // Free up resources and ensure not to go out of bounds when the
               // resulting item count is less than before
+              const inputValue = event.currentTarget.value;
+
+              // Free up resources and ensure not to go out of bounds
               setMountedIndexes([]);
-              onFilterChange(event.currentTarget.value);
+              onFilterChange(inputValue);
+            }}
+            onInput={(event) => {
+              const inputValue = event.currentTarget.value;
+              const inputElement = event.currentTarget;
+
+              if (autocomplete && onAutocompleteSelect && inputValue) {
+                setTimeout(() => {
+                  if (inputElement.value === inputValue && inputValue.length > 2) {
+                    const matchedValue = findMatchingItem(inputValue);
+                    if (matchedValue !== null) {
+                      onAutocompleteSelect(matchedValue);
+                    }
+                  }
+                }, 50);
+              }
             }}
           />
         </div>

package/src/inputs/_BottomSheet.less

@@ -1,12 +1,3 @@
-.wds-select-input-scroll-freeze {
-  scroll-behavior: unset !important;
-  height: 100vh;
-
-  body{
-    height: 100vh;
-  }
-}
-
 .np-bottom-sheet-v2-container {
   position: relative;
   z-index: 1060;
@@ -20,8 +11,6 @@
   transition-property: opacity;
   transition-timing-function: ease-out;
   transition-duration: 300ms;
-  will-change: transform;
-  min-height: 100vh;
 
   &--closed {
     opacity: 0;
@@ -31,24 +20,23 @@
 .np-bottom-sheet-v2 {
   position: fixed;
   inset: 0px;
-  bottom: env(safe-area-inset-bottom, 0);
+  bottom: env(keyboard-inset-height, 0px);
   margin-left: var(--size-8);
   margin-right: var(--size-8);
   margin-top: var(--size-64);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  height: calc(100vh - var(--size-64) - 40px);
 }
 
 .np-bottom-sheet-v2-content {
   display: flex;
   flex-direction: column;
   overflow: auto;
-  border-radius: var(--size-32);
+  border-top-left-radius: 32px; /* TODO: Tokenize */
+  border-top-right-radius: 32px; /* TODO: Tokenize */
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgb(69 71 69 / 0.2);
-  will-change: transform;
 
   &:focus {
     outline: none;

package/src/inputs/_BottomSheet.tsx

@@ -10,11 +10,12 @@ import { Transition } from '@headlessui/react';
 import { FocusScope } from '@react-aria/focus';
 import { ThemeProvider, useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
-import { Fragment, useEffect, useState } from 'react';
+import { Fragment, useState } from 'react';
 
-import { CloseButton , Size } from '../common';
+import { CloseButton } from '../common/closeButton';
 import { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';
 import { PreventScroll } from '../common/preventScroll/PreventScroll';
+import { Size } from '../common/propsValues/size';
 
 export interface BottomSheetProps {
   open: boolean;
@@ -32,19 +33,6 @@ export interface BottomSheetProps {
   onCloseEnd?: () => void;
 }
 
-/**
- * App pages set scroll-behavior to 'smooth' which causes mobile Safari to
- * slow-scroll and glitch. This function temporarily disables that behaviour
- * while the BottomSheet is open. It complements <PreventScroll />.
- */
-const freezeScroll = (shouldFreeze = true) => {
-  if (shouldFreeze) {
-    document.documentElement.classList.add('wds-select-input-scroll-freeze');
-  } else {
-    document.documentElement.classList.remove('wds-select-input-scroll-freeze');
-  }
-};
-
 export function BottomSheet({
   open,
   renderTrigger,
@@ -66,10 +54,6 @@ export function BottomSheet({
     },
   });
 
-  useEffect(() => {
-    freezeScroll(open);
-  }, [open]);
-
   const dismiss = useDismiss(context);
   const role = useRole(context);
   const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, role]);

package/src/main.css

@@ -3524,13 +3524,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   padding-inline-start: 8px;
   padding-inline-start: var(--size-8);
 }
-.wds-select-input-scroll-freeze {
-  scroll-behavior: unset !important;
-  height: 100vh;
-}
-.wds-select-input-scroll-freeze body {
-  height: 100vh;
-}
 .np-bottom-sheet-v2-container {
   position: relative;
   z-index: 1060;
@@ -3544,8 +3537,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   transition-property: opacity;
   transition-timing-function: ease-out;
   transition-duration: 300ms;
-  will-change: transform;
-  min-height: 100vh;
 }
 .np-bottom-sheet-v2-backdrop--closed {
   opacity: 0;
@@ -3553,7 +3544,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .np-bottom-sheet-v2 {
   position: fixed;
   inset: 0px;
-  bottom: env(safe-area-inset-bottom, 0);
+  bottom: env(keyboard-inset-height, 0px);
   margin-left: 8px;
   margin-left: var(--size-8);
   margin-right: 8px;
@@ -3563,19 +3554,18 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  height: calc(100vh - 64px - 40px);
-  height: calc(100vh - var(--size-64) - 40px);
 }
 .np-bottom-sheet-v2-content {
   display: flex;
   flex-direction: column;
   overflow: auto;
-  border-radius: 32px;
-  border-radius: var(--size-32);
+  border-top-left-radius: 32px;
+  /* TODO: Tokenize */
+  border-top-right-radius: 32px;
+  /* TODO: Tokenize */
   background-color: #ffffff;
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
-  will-change: transform;
 }
 .np-bottom-sheet-v2-content:focus {
   outline: none;