@transferwise/components 46.160.2 → 46.160.3

package/build/Inputs/SelectInput/hooks/useTypeahead.mjs

@@ -0,0 +1,54 @@
+import { useRef, useCallback, useEffect } from 'react';
+import { TYPEAHEAD_QUERY_RESET_TIMEOUT_MS } from '../constants.mjs';
+import { searchableString } from '../SelectInput.utils.mjs';
+
+const resetsTypeaheadQuery = key => key === 'ArrowDown' || key === 'ArrowUp' || key === 'Home' || key === 'End' || key === 'PageDown' || key === 'PageUp';
+const isTypingKey = (event, query = '') => !event.metaKey && !event.ctrlKey && !event.nativeEvent.isComposing && /^.$/u.test(event.key) && (event.key !== ' ' || query !== '');
+function useTypeahead({
+  disabled = false,
+  onMatch
+} = {}) {
+  const queryRef = useRef('');
+  const timeoutRef = useRef(null);
+  const resetQuery = useCallback(() => {
+    queryRef.current = '';
+    if (timeoutRef.current != null) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+  useEffect(() => resetQuery, [resetQuery]);
+  return useCallback(event => {
+    if (disabled || !isTypingKey(event, queryRef.current)) {
+      if (resetsTypeaheadQuery(event.key)) {
+        resetQuery();
+      }
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    queryRef.current += event.key;
+    const needle = searchableString(queryRef.current);
+    if (timeoutRef.current != null) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(resetQuery, TYPEAHEAD_QUERY_RESET_TIMEOUT_MS);
+    const options = Array.from(event.currentTarget.querySelectorAll('[role="option"]:not([aria-disabled="true"])'));
+    const optionLabels = options.map(option => searchableString(option.textContent ?? ''));
+    const matchingIndex = optionLabels.findIndex(label => label.startsWith(needle));
+    const closestIndex = matchingIndex === -1 ? optionLabels.findIndex(label => label.includes(needle)) : matchingIndex;
+    if (closestIndex === -1) {
+      return;
+    }
+    options[closestIndex].focus({
+      preventScroll: true
+    });
+    event.currentTarget.focus({
+      preventScroll: true
+    });
+    onMatch?.();
+  }, [disabled, onMatch, resetQuery]);
+}
+
+export { isTypingKey, useTypeahead };
+//# sourceMappingURL=useTypeahead.mjs.map

package/build/Inputs/SelectInput/hooks/useTypeahead.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTypeahead.mjs","sources":["../../../../src/Inputs/SelectInput/hooks/useTypeahead.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\n\nimport { TYPEAHEAD_QUERY_RESET_TIMEOUT_MS } from '../constants';\nimport { searchableString } from '../SelectInput.utils';\n\nconst resetsTypeaheadQuery = (key: string) =>\n  key === 'ArrowDown' ||\n  key === 'ArrowUp' ||\n  key === 'Home' ||\n  key === 'End' ||\n  key === 'PageDown' ||\n  key === 'PageUp';\n\nexport const isTypingKey = (event: React.KeyboardEvent, query = '') =>\n  !event.metaKey &&\n  !event.ctrlKey &&\n  !event.nativeEvent.isComposing &&\n  /^.$/u.test(event.key) &&\n  (event.key !== ' ' || query !== '');\n\ninterface UseTypeaheadParams {\n  disabled?: boolean;\n  onMatch?: () => void;\n}\n\nexport function useTypeahead({ disabled = false, onMatch }: UseTypeaheadParams = {}) {\n  const queryRef = useRef('');\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const resetQuery = useCallback(() => {\n    queryRef.current = '';\n    if (timeoutRef.current != null) {\n      clearTimeout(timeoutRef.current);\n      timeoutRef.current = null;\n    }\n  }, []);\n\n  useEffect(() => resetQuery, [resetQuery]);\n\n  return useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (disabled || !isTypingKey(event, queryRef.current)) {\n        if (resetsTypeaheadQuery(event.key)) {\n          resetQuery();\n        }\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      queryRef.current += event.key;\n      const needle = searchableString(queryRef.current);\n\n      if (timeoutRef.current != null) {\n        clearTimeout(timeoutRef.current);\n      }\n      timeoutRef.current = setTimeout(resetQuery, TYPEAHEAD_QUERY_RESET_TIMEOUT_MS);\n\n      const options = Array.from(\n        event.currentTarget.querySelectorAll<HTMLElement>(\n          '[role=\"option\"]:not([aria-disabled=\"true\"])',\n        ),\n      );\n      const optionLabels = options.map((option) => searchableString(option.textContent ?? ''));\n      const matchingIndex = optionLabels.findIndex((label) => label.startsWith(needle));\n      const closestIndex =\n        matchingIndex === -1\n          ? optionLabels.findIndex((label) => label.includes(needle))\n          : matchingIndex;\n\n      if (closestIndex === -1) {\n        return;\n      }\n\n      options[closestIndex].focus({ preventScroll: true });\n      event.currentTarget.focus({ preventScroll: true });\n      onMatch?.();\n    },\n    [disabled, onMatch, resetQuery],\n  );\n}\n"],"names":["resetsTypeaheadQuery","key","isTypingKey","event","query","metaKey","ctrlKey","nativeEvent","isComposing","test","useTypeahead","disabled","onMatch","queryRef","useRef","timeoutRef","resetQuery","useCallback","current","clearTimeout","useEffect","preventDefault","stopPropagation","needle","searchableString","setTimeout","TYPEAHEAD_QUERY_RESET_TIMEOUT_MS","options","Array","from","currentTarget","querySelectorAll","optionLabels","map","option","textContent","matchingIndex","findIndex","label","startsWith","closestIndex","includes","focus","preventScroll"],"mappings":"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"}

package/build/i18n/ja.json

@@ -50,7 +50,7 @@
   "neptune.Table.loaded": "テーブルデータが読み込まれました",
   "neptune.Table.loading": "テーブルデータを読み込み中です",
   "neptune.Table.refreshPage": "ページを更新する",
-  "neptune.Typeahead.suggestionsLabel": "Suggestions",
+  "neptune.Typeahead.suggestionsLabel": "提案",
   "neptune.Upload.csButtonText": "別のファイルをアップロードしますか？",
   "neptune.Upload.csFailureText": "アップロードに失敗しました。もう一度やり直してください。",
   "neptune.Upload.csSuccessText": "アップロードが完了しました。",

package/build/i18n/ja.json.js

@@ -54,7 +54,7 @@ var ja = {
 	"neptune.Table.loaded": "テーブルデータが読み込まれました",
 	"neptune.Table.loading": "テーブルデータを読み込み中です",
 	"neptune.Table.refreshPage": "ページを更新する",
-	"neptune.Typeahead.suggestionsLabel": "Suggestions",
+	"neptune.Typeahead.suggestionsLabel": "提案",
 	"neptune.Upload.csButtonText": "別のファイルをアップロードしますか？",
 	"neptune.Upload.csFailureText": "アップロードに失敗しました。もう一度やり直してください。",
 	"neptune.Upload.csSuccessText": "アップロードが完了しました。",

package/build/i18n/ja.json.mjs

@@ -50,7 +50,7 @@ var ja = {
 	"neptune.Table.loaded": "テーブルデータが読み込まれました",
 	"neptune.Table.loading": "テーブルデータを読み込み中です",
 	"neptune.Table.refreshPage": "ページを更新する",
-	"neptune.Typeahead.suggestionsLabel": "Suggestions",
+	"neptune.Typeahead.suggestionsLabel": "提案",
 	"neptune.Upload.csButtonText": "別のファイルをアップロードしますか？",
 	"neptune.Upload.csFailureText": "アップロードに失敗しました。もう一度やり直してください。",
 	"neptune.Upload.csSuccessText": "アップロードが完了しました。",

package/build/types/Inputs/SelectInput/Options/SelectInputOptions.d.ts

@@ -6,7 +6,9 @@ export interface SelectInputOptionsProps<T = string> extends Pick<SelectInputPro
     searchInputRef: React.MutableRefObject<HTMLInputElement | null>;
     listboxRef: React.MutableRefObject<HTMLDivElement | null>;
     filterQuery: string;
+    initialTypeaheadKey?: string | null;
     onFilterChange: (query: string) => void;
+    onInitialTypeaheadHandled?: () => void;
     listBoxLabel?: string;
     listBoxLabelledBy?: string;
     autocomplete?: string;
@@ -17,5 +19,5 @@ export interface SelectInputOptionsProps<T = string> extends Pick<SelectInputPro
  * The main options container component for SelectInput.
  * Manages filtering, virtualisation, and rendering of options.
  */
-export declare function SelectInputOptions<T = string>({ id, parentId, items, compareValues: compareValuesProp, renderValue, renderFooter, filterable, filterPlaceholder, sortFilteredOptions, searchInputRef, listboxRef, filterQuery, onFilterChange, listBoxLabel, listBoxLabelledBy, autocomplete, name, onAutocompleteSelect, }: SelectInputOptionsProps<T>): import("react").JSX.Element;
+export declare function SelectInputOptions<T = string>({ id, parentId, items, compareValues: compareValuesProp, renderValue, renderFooter, filterable, filterPlaceholder, sortFilteredOptions, searchInputRef, listboxRef, filterQuery, initialTypeaheadKey, onFilterChange, onInitialTypeaheadHandled, listBoxLabel, listBoxLabelledBy, autocomplete, name, onAutocompleteSelect, }: SelectInputOptionsProps<T>): import("react").JSX.Element;
 //# sourceMappingURL=SelectInputOptions.d.ts.map

package/build/types/Inputs/SelectInput/Options/SelectInputOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInputOptions.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/SelectInput/Options/SelectInputOptions.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAyB,gBAAgB,EAAmB,MAAM,sBAAsB,CAAC;AAMhG;;GAEG;AACH,MAAM,WAAW,uBAAuB,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,IAAI,CAC/D,gBAAgB,CAAC,CAAC,CAAC,EACjB,OAAO,GACP,aAAa,GACb,cAAc,GACd,YAAY,GACZ,mBAAmB,GACnB,IAAI,GACJ,UAAU,GACV,eAAe,GACf,qBAAqB,CACxB;IACC,cAAc,EAAE,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAChE,UAAU,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC1D,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CAC3C;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,GAAG,MAAM,EAAE,EAC7C,EAAE,EACF,QAAQ,EACR,KAAK,EACL,aAAa,EAAE,iBAAiB,EAChC,WAAoB,EACpB,YAAY,EACZ,UAAkB,EAClB,iBAAiB,EACjB,mBAAmB,EACnB,cAAc,EACd,UAAU,EACV,WAAW,EACX,cAAc,EACd,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,IAAI,EACJ,oBAAoB,GACrB,EAAE,uBAAuB,CAAC,CAAC,CAAC,+BA+V5B"}
+{"version":3,"file":"SelectInputOptions.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/SelectInput/Options/SelectInputOptions.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAyB,gBAAgB,EAAmB,MAAM,sBAAsB,CAAC;AAMhG;;GAEG;AACH,MAAM,WAAW,uBAAuB,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,IAAI,CAC/D,gBAAgB,CAAC,CAAC,CAAC,EACjB,OAAO,GACP,aAAa,GACb,cAAc,GACd,YAAY,GACZ,mBAAmB,GACnB,IAAI,GACJ,UAAU,GACV,eAAe,GACf,qBAAqB,CACxB;IACC,cAAc,EAAE,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAChE,UAAU,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC1D,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,yBAAyB,CAAC,EAAE,MAAM,IAAI,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CAC3C;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,GAAG,MAAM,EAAE,EAC7C,EAAE,EACF,QAAQ,EACR,KAAK,EACL,aAAa,EAAE,iBAAiB,EAChC,WAAoB,EACpB,YAAY,EACZ,UAAkB,EAClB,iBAAiB,EACjB,mBAAmB,EACnB,cAAc,EACd,UAAU,EACV,WAAW,EACX,mBAAmB,EACnB,cAAc,EACd,yBAAyB,EACzB,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,IAAI,EACJ,oBAAoB,GACrB,EAAE,uBAAuB,CAAC,CAAC,CAAC,+BAwX5B"}

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

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/SelectInput/SelectInput.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAIvD;;;GAGG;AACH,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,YAAY,EACZ,KAAK,EACL,YAAY,EACZ,KAAK,EAAE,eAAe,EACtB,aAAa,EACb,WAAoB,EACpB,YAAY,EACZ,aAAoC,EACpC,UAAU,EACV,iBAAiB,EACjB,mBAAmB,EACnB,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,+BA8MxB;yBAzOe,WAAW"}
+{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/SelectInput/SelectInput.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAIvD;;;GAGG;AACH,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,YAAY,EACZ,KAAK,EACL,YAAY,EACZ,KAAK,EAAE,eAAe,EACtB,aAAa,EACb,WAAoB,EACpB,YAAY,EACZ,aAAoC,EACpC,UAAU,EACV,iBAAiB,EACjB,mBAAmB,EACnB,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,+BAuOxB;yBAlQe,WAAW"}

package/build/types/Inputs/SelectInput/SelectInput.utils.d.ts

@@ -1,5 +1,4 @@
 import { SelectInputItem, SelectInputOptionItem } from './SelectInput.types';
-export declare const MAX_ITEMS_WITHOUT_VIRTUALIZATION = 50;
 /**
  * Converts a string to a normalized, searchable format by:
  * - Trimming whitespace

package/build/types/Inputs/SelectInput/SelectInput.utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.utils.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/SelectInput/SelectInput.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAE7E,eAAO,MAAM,gCAAgC,KAAK,CAAC;AAEnD;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,UAW7C;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,OAAO,YAYpD;AAED;;GAEG;AACH,wBAAgB,2BAA2B,CAAC,CAAC,EAC3C,IAAI,EAAE,qBAAqB,CAAC,CAAC,CAAC,EAC9B,cAAc,EAAE,GAAG,CAAC,CAAC,CAAC,EACtB,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,OAAO,GACtC,qBAAqB,CAAC,CAAC,GAAG,SAAS,CAAC,CAUtC;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,EACtC,KAAK,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,EAAE,EACpC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,OAAO,GACtC,eAAe,CAAC,CAAC,GAAG,SAAS,CAAC,EAAE,CAoBlC;AAED;;GAEG;AACH,wBAAgB,mCAAmC,CAAC,CAAC,EACnD,IAAI,EAAE,qBAAqB,CAAC,CAAC,CAAC,EAC9B,MAAM,EAAE,MAAM,WAKf;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,EACtC,KAAK,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,EAAE,EACpC,SAAS,EAAE,CAAC,IAAI,EAAE,qBAAqB,CAAC,CAAC,CAAC,KAAK,OAAO,wBAcvD;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EACpC,KAAK,EAAE,SAAS,eAAe,CAAC,CAAC,GAAG,SAAS,CAAC,EAAE,EAChD,SAAS,EAAE,CACT,CAAC,EAAE,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EACxC,CAAC,EAAE,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EACxC,WAAW,EAAE,MAAM,KAChB,MAAM,EACX,WAAW,EAAE,MAAM,GAClB,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EAAE,CAiBnC;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAC/B,QAAQ,GAAE,CAAC,KAAK,EAAE,CAAC,KAAK,MAAsD,GAC7E,CAAC,CAAC,EAAE,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,qBAAqB,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,MAAM,KAAK,MAAM,CA2B3F"}
+{"version":3,"file":"SelectInput.utils.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/SelectInput/SelectInput.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAE7E;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,UAW7C;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,OAAO,YAYpD;AAED;;GAEG;AACH,wBAAgB,2BAA2B,CAAC,CAAC,EAC3C,IAAI,EAAE,qBAAqB,CAAC,CAAC,CAAC,EAC9B,cAAc,EAAE,GAAG,CAAC,CAAC,CAAC,EACtB,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,OAAO,GACtC,qBAAqB,CAAC,CAAC,GAAG,SAAS,CAAC,CAUtC;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,EACtC,KAAK,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,EAAE,EACpC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,OAAO,GACtC,eAAe,CAAC,CAAC,GAAG,SAAS,CAAC,EAAE,CAoBlC;AAED;;GAEG;AACH,wBAAgB,mCAAmC,CAAC,CAAC,EACnD,IAAI,EAAE,qBAAqB,CAAC,CAAC,CAAC,EAC9B,MAAM,EAAE,MAAM,WAKf;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,EACtC,KAAK,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,EAAE,EACpC,SAAS,EAAE,CAAC,IAAI,EAAE,qBAAqB,CAAC,CAAC,CAAC,KAAK,OAAO,wBAcvD;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EACpC,KAAK,EAAE,SAAS,eAAe,CAAC,CAAC,GAAG,SAAS,CAAC,EAAE,EAChD,SAAS,EAAE,CACT,CAAC,EAAE,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EACxC,CAAC,EAAE,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EACxC,WAAW,EAAE,MAAM,KAChB,MAAM,EACX,WAAW,EAAE,MAAM,GAClB,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EAAE,CAiBnC;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAC/B,QAAQ,GAAE,CAAC,KAAK,EAAE,CAAC,KAAK,MAAsD,GAC7E,CAAC,CAAC,EAAE,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,qBAAqB,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,MAAM,KAAK,MAAM,CA2B3F"}

package/build/types/Inputs/SelectInput/TriggerButton/SelectInputTriggerButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInputTriggerButton.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/SelectInput/TriggerButton/SelectInputTriggerButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAGvC,MAAM,MAAM,mCAAmC,GAAG,KAAK,CAAC,WAAW,CAAC;AAEpE,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;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,CAAC,SAAS,mCAAmC,GAAG,QAAQ,EAAE,EACjG,EAAkB,EAClB,GAAG,SAAS,EACb,EAAE,6BAA6B,CAAC,CAAC,CAAC,+BAclC"}
+{"version":3,"file":"SelectInputTriggerButton.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/SelectInput/TriggerButton/SelectInputTriggerButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAGvC,MAAM,MAAM,mCAAmC,GAAG,KAAK,CAAC,WAAW,CAAC;AAEpE,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;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,CAAC,SAAS,mCAAmC,GAAG,QAAQ,EAAE,EACjG,EAAkB,EAClB,GAAG,SAAS,EACb,EAAE,6BAA6B,CAAC,CAAC,CAAC,+BAiBlC"}

package/build/types/Inputs/SelectInput/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const MAX_ITEMS_WITHOUT_VIRTUALIZATION = 50;
+export declare const TYPEAHEAD_QUERY_RESET_TIMEOUT_MS = 350;
+//# sourceMappingURL=constants.d.ts.map

package/build/types/Inputs/SelectInput/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/SelectInput/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gCAAgC,KAAK,CAAC;AAEnD,eAAO,MAAM,gCAAgC,MAAM,CAAC"}

package/build/types/Inputs/SelectInput/hooks/useTypeahead.d.ts

@@ -0,0 +1,8 @@
+export declare const isTypingKey: (event: React.KeyboardEvent, query?: string) => boolean;
+interface UseTypeaheadParams {
+    disabled?: boolean;
+    onMatch?: () => void;
+}
+export declare function useTypeahead({ disabled, onMatch }?: UseTypeaheadParams): (event: React.KeyboardEvent<HTMLDivElement>) => void;
+export {};
+//# sourceMappingURL=useTypeahead.d.ts.map

package/build/types/Inputs/SelectInput/hooks/useTypeahead.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTypeahead.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/SelectInput/hooks/useTypeahead.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,WAAW,GAAI,OAAO,KAAK,CAAC,aAAa,EAAE,cAAU,YAK7B,CAAC;AAEtC,UAAU,kBAAkB;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAgB,EAAE,OAAO,EAAE,GAAE,kBAAuB,WAevE,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,UAyC9C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.160.2",
+  "version": "46.160.3",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/Inputs/SelectInput/Options/SelectInputOptions.tsx

@@ -1,11 +1,13 @@
 import { CrossCircle } from '@transferwise/icons';
 import { ListboxOptions } from '@headlessui/react';
 import { clsx } from 'clsx';
-import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { useDeferredValue, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { Virtualizer, type VirtualizerHandle } from 'virtua';
 
 import { SearchInput } from '../../SearchInput/SearchInput';
+import { MAX_ITEMS_WITHOUT_VIRTUALIZATION } from '../constants';
+import { useTypeahead } from '../hooks/useTypeahead';
 import {
   SelectInputItemsCountContext,
   SelectInputItemPositionContext,
@@ -13,7 +15,6 @@ import {
 import {
   dedupeSelectInputItems,
   filterSelectInputItems,
-  MAX_ITEMS_WITHOUT_VIRTUALIZATION,
   searchableString,
   selectInputOptionItemIncludesNeedle,
   sortSelectInputItems,
@@ -42,7 +43,9 @@ export interface SelectInputOptionsProps<T = string> extends Pick<
   searchInputRef: React.MutableRefObject<HTMLInputElement | null>;
   listboxRef: React.MutableRefObject<HTMLDivElement | null>;
   filterQuery: string;
+  initialTypeaheadKey?: string | null;
   onFilterChange: (query: string) => void;
+  onInitialTypeaheadHandled?: () => void;
   listBoxLabel?: string;
   listBoxLabelledBy?: string;
   autocomplete?: string;
@@ -67,7 +70,9 @@ export function SelectInputOptions<T = string>({
   searchInputRef,
   listboxRef,
   filterQuery,
+  initialTypeaheadKey,
   onFilterChange,
+  onInitialTypeaheadHandled,
   listBoxLabel,
   listBoxLabelledBy,
   autocomplete,
@@ -78,13 +83,37 @@ export function SelectInputOptions<T = string>({
   const virtualiserHandlerRef = useRef<VirtualizerHandle>(null);
   const controllerRef = filterable ? searchInputRef : listboxRef;
   const initialRenderRef = useRef(true);
+  const deferredFilterQuery = useDeferredValue(filterQuery);
+  const handleTypeahead = useTypeahead({
+    disabled: filterable,
+    onMatch: onInitialTypeaheadHandled,
+  });
+
+  useEffect(() => {
+    if (filterable || initialTypeaheadKey == null) {
+      return;
+    }
+
+    const animationFrame = requestAnimationFrame(() => {
+      if (listboxRef.current == null) {
+        return;
+      }
+
+      listboxRef.current.focus({ preventScroll: true });
+      listboxRef.current.dispatchEvent(
+        new KeyboardEvent('keydown', { key: initialTypeaheadKey, bubbles: true }),
+      );
+    });
+
+    return () => cancelAnimationFrame(animationFrame);
+  }, [filterable, initialTypeaheadKey, listboxRef]);
 
   const needle = useMemo(() => {
     if (filterable) {
-      return filterQuery ? searchableString(filterQuery) : null;
+      return deferredFilterQuery ? searchableString(deferredFilterQuery) : null;
     }
     return undefined;
-  }, [filterQuery, filterable]);
+  }, [deferredFilterQuery, filterable]);
   useEffect(() => {
     if (needle) {
       // Ensure having an active option while filtering.
@@ -151,7 +180,7 @@ export function SelectInputOptions<T = string>({
         return item;
       });
 
-      return sortSelectInputItems(filtered, sortFilteredOptions, filterQuery);
+      return sortSelectInputItems(filtered, sortFilteredOptions, deferredFilterQuery);
     }
 
     return filterSelectInputItems(dedupedItems, (item) =>
@@ -284,7 +313,7 @@ export function SelectInputOptions<T = string>({
             shape="rectangle"
             placeholder={filterPlaceholder}
             aria-label={filterPlaceholder}
-            defaultValue={filterQuery}
+            value={filterQuery}
             aria-autocomplete="list"
             aria-expanded
             aria-controls={listboxId}
@@ -352,6 +381,7 @@ export function SelectInputOptions<T = string>({
           aria-labelledby={listBoxLabelledBy}
           tabIndex={0}
           className="np-select-input-listbox"
+          onKeyDownCapture={handleTypeahead}
         >
           {!virtualized ? (
             filteredItems.map((_, index) => getItemNode(index))

package/src/Inputs/SelectInput/SelectInput.test.tsx

@@ -34,6 +34,20 @@ describe('SelectInput', () => {
     expect(screen.getByText('Currency')).toBeInTheDocument();
   });
 
+  it('explicitly includes the trigger in the sequential keyboard focus order', () => {
+    render(
+      <SelectInput
+        placeholder="Currency"
+        items={[
+          { type: 'option', value: 'USD' },
+          { type: 'option', value: 'EUR' },
+        ]}
+      />,
+    );
+
+    expect(screen.getByRole('combobox')).toHaveAttribute('tabindex', '0');
+  });
+
   it('renders footer', async () => {
     render(
       <SelectInput
@@ -221,6 +235,135 @@ describe('SelectInput', () => {
     expect(trigger).toHaveTextContent('EUR');
   });
 
+  it('starts filtering when typing on the focused trigger', async () => {
+    const handleFilterChange = jest.fn();
+
+    render(
+      <SelectInput
+        items={[
+          { type: 'option', value: 'January' },
+          { type: 'option', value: 'February' },
+          { type: 'option', value: 'March' },
+        ]}
+        filterable
+        onFilterChange={handleFilterChange}
+      />,
+    );
+
+    const trigger = screen.getByRole('combobox');
+    await userEvent.tab();
+    expect(trigger).toHaveFocus();
+    await userEvent.keyboard('f');
+
+    const searchInput = screen.getByRole('combobox', { expanded: true });
+    expect(searchInput).toHaveFocus();
+    expect(searchInput).toHaveValue('f');
+    expect(handleFilterChange).toHaveBeenLastCalledWith({
+      query: 'f',
+      queryNormalized: 'f',
+    });
+    expect(screen.getByRole('option', { name: 'February' })).toBeInTheDocument();
+    expect(screen.queryByRole('option', { name: 'January' })).not.toBeInTheDocument();
+  });
+
+  it('starts typeahead when typing on the focused trigger', async () => {
+    render(
+      <SelectInput
+        items={[
+          { type: 'option', value: 'Frost' },
+          { type: 'option', value: 'February' },
+          { type: 'option', value: 'March' },
+        ]}
+      />,
+    );
+
+    const trigger = screen.getByRole('combobox');
+    await userEvent.tab();
+    expect(trigger).toHaveFocus();
+    await userEvent.keyboard('f');
+
+    const listbox = screen.getByRole('listbox');
+    const frost = within(listbox).getByRole('option', { name: 'Frost' });
+    const february = within(listbox).getByRole('option', { name: 'February' });
+    await waitFor(() => {
+      expect(listbox).toHaveFocus();
+    });
+    await waitFor(() => {
+      expect(frost).toHaveClass('np-select-input-option-container--active');
+    });
+
+    await userEvent.keyboard('e');
+    await waitFor(() => {
+      expect(february).toHaveClass('np-select-input-option-container--active');
+    });
+
+    await userEvent.keyboard('{ArrowDown}');
+    expect(within(listbox).getByRole('option', { name: 'March' })).toHaveClass(
+      'np-select-input-option-container--active',
+    );
+  });
+
+  it('continues typeahead across spaces after the query starts', async () => {
+    render(
+      <SelectInput
+        items={[
+          { type: 'option', value: 'New Zealand' },
+          { type: 'option', value: 'New York' },
+          { type: 'option', value: 'Yorkshire' },
+        ]}
+      />,
+    );
+
+    await userEvent.tab();
+    await userEvent.keyboard('n');
+
+    const listbox = screen.getByRole('listbox');
+    await waitFor(() => {
+      expect(listbox).toHaveFocus();
+    });
+
+    await userEvent.keyboard('ew y');
+
+    await waitFor(() => {
+      expect(within(listbox).getByRole('option', { name: 'New York' })).toHaveClass(
+        'np-select-input-option-container--active',
+      );
+    });
+  });
+
+  it.each([
+    ['filterable', true],
+    ['non-filterable', false],
+  ])('supports arrow navigation after opening a %s select with Enter', async (_, filterable) => {
+    render(
+      <SelectInput
+        items={[
+          { type: 'option', value: 'GBP' },
+          { type: 'option', value: 'EUR' },
+          { type: 'option', value: 'USD' },
+        ]}
+        filterable={filterable}
+      />,
+    );
+
+    const trigger = screen.getByRole('combobox');
+    await userEvent.tab();
+    expect(trigger).toHaveFocus();
+    await userEvent.keyboard('{Enter}');
+
+    const controller = filterable
+      ? screen.getByRole('combobox', { expanded: true })
+      : screen.getByRole('listbox');
+    await waitFor(() => {
+      expect(controller).toHaveFocus();
+    });
+
+    await userEvent.keyboard('{ArrowDown}');
+    expect(screen.getByRole('option', { name: 'EUR' })).toHaveClass(
+      'np-select-input-option-container--active',
+    );
+  });
+
   it('clears filter query on close', async () => {
     const handleFilterChange = jest.fn();
 

package/src/Inputs/SelectInput/SelectInput.tsx

@@ -1,5 +1,5 @@
 import mergeProps from 'merge-props';
-import { useCallback, useEffect, useRef, useState, useDeferredValue } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { Listbox as ListboxBase } from '@headlessui/react';
 import { Breakpoint } from '@transferwise/neptune-tokens';
 import { useScreenSize } from '../../common/hooks/useScreenSize';
@@ -10,6 +10,7 @@ import { SelectInputBottomSheet } from './BottomSheet';
 import { SelectInputPopover } from './Popover';
 import { SelectInputOptions } from './Options';
 import { DefaultRenderTrigger } from './DefaultRenderTrigger';
+import { isTypingKey } from './hooks/useTypeahead';
 
 import {
   SelectInputOptionContentWithinTriggerContext,
@@ -74,7 +75,6 @@ export function SelectInput<T = string, M extends boolean = false>({
   }, [open]);
 
   const [filterQuery, _setFilterQuery] = useState('');
-  const deferredFilterQuery = useDeferredValue(filterQuery);
   const previousFilterQueryRef = useRef(filterQuery);
 
   const setFilterQuery = useCallback(
@@ -94,6 +94,7 @@ export function SelectInput<T = string, M extends boolean = false>({
   const internalTriggerRef = useRef<HTMLButtonElement | null>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);
   const listboxRef = useRef<HTMLDivElement>(null);
+  const [initialTypeaheadKey, setInitialTypeaheadKey] = useState<string | null>(null);
   const controllerRef = filterable ? searchInputRef : listboxRef;
 
   const screenSm = useScreenSize(Breakpoint.SMALL);
@@ -175,13 +176,33 @@ export function SelectInput<T = string, M extends boolean = false>({
                         setOpen((prev) => !prev);
                       },
                       onKeyDown: (event: React.KeyboardEvent) => {
+                        if (event.key === 'Enter') {
+                          event.preventDefault();
+                          event.currentTarget.dispatchEvent(
+                            new KeyboardEvent('keydown', { key: ' ', bubbles: true }),
+                          );
+                          return;
+                        }
+
+                        if (!open && isTypingKey(event)) {
+                          event.preventDefault();
+
+                          if (filterable) {
+                            setFilterQuery(event.key);
+                          } else {
+                            setInitialTypeaheadKey(event.key);
+                          }
+
+                          (event.currentTarget as HTMLButtonElement).click();
+                          return;
+                        }
+
                         if (
                           event.key === ' ' ||
-                          event.key === 'Enter' ||
                           event.key === 'ArrowDown' ||
                           event.key === 'ArrowUp'
                         ) {
-                          setOpen((prev) => !prev);
+                          setOpen(true);
                         }
                       },
                     },
@@ -225,6 +246,7 @@ export function SelectInput<T = string, M extends boolean = false>({
               setOpen(false);
             }}
             onCloseEnd={() => {
+              setInitialTypeaheadKey(null);
               setFilterQuery('');
             }}
           >
@@ -240,10 +262,14 @@ export function SelectInput<T = string, M extends boolean = false>({
               sortFilteredOptions={sortFilteredOptions}
               searchInputRef={searchInputRef}
               listboxRef={listboxRef}
-              filterQuery={deferredFilterQuery}
+              filterQuery={filterQuery}
+              initialTypeaheadKey={initialTypeaheadKey}
               autocomplete={autocomplete}
               name={name}
               onFilterChange={setFilterQuery}
+              onInitialTypeaheadHandled={() => {
+                setInitialTypeaheadKey(null);
+              }}
               onAutocompleteSelect={(matchedValue) => {
                 onChange?.(matchedValue as M extends true ? T[] : T);
                 if (!multiple) {

package/src/Inputs/SelectInput/SelectInput.utils.ts

@@ -1,7 +1,5 @@
 import { SelectInputItem, SelectInputOptionItem } from './SelectInput.types';
 
-export const MAX_ITEMS_WITHOUT_VIRTUALIZATION = 50;
-
 /**
  * Converts a string to a normalized, searchable format by:
  * - Trimming whitespace

package/src/Inputs/SelectInput/TriggerButton/SelectInputTriggerButton.tsx

@@ -29,6 +29,9 @@ export function SelectInputTriggerButton<T extends SelectInputTriggerButtonEleme
       ref={ref}
       as={PolymorphicWithOverrides}
       role="combobox"
+      // Safari can omit buttons from sequential keyboard navigation unless their
+      // focus order is explicit. Zero keeps the trigger in the natural tab order.
+      tabIndex={0}
       __overrides={{ as, size, ...interactionProps }}
       {...mergeProps({ onClick, onKeyDown }, restProps)}
     />

package/src/Inputs/SelectInput/constants.ts

@@ -0,0 +1,3 @@
+export const MAX_ITEMS_WITHOUT_VIRTUALIZATION = 50;
+
+export const TYPEAHEAD_QUERY_RESET_TIMEOUT_MS = 350;

package/src/Inputs/SelectInput/hooks/useTypeahead.ts

@@ -0,0 +1,82 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+import { TYPEAHEAD_QUERY_RESET_TIMEOUT_MS } from '../constants';
+import { searchableString } from '../SelectInput.utils';
+
+const resetsTypeaheadQuery = (key: string) =>
+  key === 'ArrowDown' ||
+  key === 'ArrowUp' ||
+  key === 'Home' ||
+  key === 'End' ||
+  key === 'PageDown' ||
+  key === 'PageUp';
+
+export const isTypingKey = (event: React.KeyboardEvent, query = '') =>
+  !event.metaKey &&
+  !event.ctrlKey &&
+  !event.nativeEvent.isComposing &&
+  /^.$/u.test(event.key) &&
+  (event.key !== ' ' || query !== '');
+
+interface UseTypeaheadParams {
+  disabled?: boolean;
+  onMatch?: () => void;
+}
+
+export function useTypeahead({ disabled = false, onMatch }: UseTypeaheadParams = {}) {
+  const queryRef = useRef('');
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const resetQuery = useCallback(() => {
+    queryRef.current = '';
+    if (timeoutRef.current != null) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+
+  useEffect(() => resetQuery, [resetQuery]);
+
+  return useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (disabled || !isTypingKey(event, queryRef.current)) {
+        if (resetsTypeaheadQuery(event.key)) {
+          resetQuery();
+        }
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      queryRef.current += event.key;
+      const needle = searchableString(queryRef.current);
+
+      if (timeoutRef.current != null) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(resetQuery, TYPEAHEAD_QUERY_RESET_TIMEOUT_MS);
+
+      const options = Array.from(
+        event.currentTarget.querySelectorAll<HTMLElement>(
+          '[role="option"]:not([aria-disabled="true"])',
+        ),
+      );
+      const optionLabels = options.map((option) => searchableString(option.textContent ?? ''));
+      const matchingIndex = optionLabels.findIndex((label) => label.startsWith(needle));
+      const closestIndex =
+        matchingIndex === -1
+          ? optionLabels.findIndex((label) => label.includes(needle))
+          : matchingIndex;
+
+      if (closestIndex === -1) {
+        return;
+      }
+
+      options[closestIndex].focus({ preventScroll: true });
+      event.currentTarget.focus({ preventScroll: true });
+      onMatch?.();
+    },
+    [disabled, onMatch, resetQuery],
+  );
+}