@transferwise/components 46.140.0 → 46.141.0

package/src/expressiveMoneyInput/amountInput/AmountInput.tsx

@@ -42,7 +42,7 @@ export const AmountInput = ({
   const intl = useIntl();
   const { focus, setFocus, visualFocus, setVisualFocus } = useFocus();
 
-  const [value, setValue] = useState<string>(
+  const [value, setValue] = useState<string>(() =>
     amount
       ? getFormattedString({
           value: amount,
@@ -51,6 +51,7 @@ export const AmountInput = ({
         })
       : '',
   );
+  const prevAmountRef = useRef<string | number | null | undefined>(amount);
   const numericValue = useMemo(() => {
     return getUnformattedNumber({
       value,
@@ -85,23 +86,28 @@ export const AmountInput = ({
   const decimalMode = decimalSeparator && value.includes(decimalSeparator);
 
   useEffect(() => {
-    if (!focus) {
-      setValue(
-        amount
-          ? getFormattedString({
-              value: amount,
-              currency,
-              locale: intl.locale,
-            })
-          : '',
-      );
+    if (prevAmountRef.current !== amount) {
+      prevAmountRef.current = amount;
+
+      // Only update the displayed value if not focused (preserve user input when focused)
+      if (!focus) {
+        // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing external prop to internal state when unfocused
+        setValue(
+          amount
+            ? getFormattedString({
+                value: amount,
+                currency,
+                locale: intl.locale,
+              })
+            : '',
+        );
+      }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [amount]);
+  }, [amount, focus, currency, intl.locale]);
 
   useEffect(() => {
     onFocusChange?.(visualFocus);
-  }, [visualFocus]);
+  }, [onFocusChange, visualFocus]);
 
   const shouldReformatAfterUserInput = (newValue: string) => {
     // don't reformat if formatting would wipe out user's input
@@ -246,6 +252,7 @@ export const AmountInput = ({
   const addonContent = useMemo((): string | null | undefined => {
     // because we're using a separate "addon" element for the placeholder decimals, there is a possibility that the input itself will become scrollable
     // and the decimals will appear on top of the input. Safest thing to do is to just hide the addon if there is not enough room
+    // eslint-disable-next-line react-hooks/refs -- Reading layout dimensions for overflow detection
     if (isInputPossiblyOverflowing({ ref, value })) {
       return null;
     }
@@ -284,7 +291,7 @@ export const AmountInput = ({
     // whenever decimals are shown, we need to account for the full decimal part for the font size calculation
     value: addonContent ? valueWithFullDecimals : value,
     focus: visualFocus,
-    inputElement: ref.current,
+    inputElement: ref,
     loading,
   });
 

package/src/expressiveMoneyInput/hooks/useInputStyle.ts

@@ -1,17 +1,27 @@
-import { type CSSProperties, useEffect, useLayoutEffect, useState } from 'react';
+import {
+  type CSSProperties,
+  type RefObject,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useState,
+} from 'react';
 import { Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
 
 type InputStyleObject = {
   value: string;
   focus: boolean;
-  inputElement: HTMLInputElement | null;
+  inputElement: RefObject<HTMLInputElement> | null;
 } & Pick<ExpressiveMoneyInputProps, 'loading'>;
 
 export const useInputStyle = ({ value, focus, inputElement, loading }: InputStyleObject) => {
   const initialRender = !useTimeout(300);
-  const inputWidth = useFirstDefinedValue(inputElement?.clientWidth, [inputElement, value]);
+  const inputWidth = useFirstDefinedValue(inputElement?.current?.clientWidth, [
+    inputElement?.current,
+    value,
+  ]);
 
-  const getStyle = (): CSSProperties => {
+  const getStyle = useCallback((): CSSProperties => {
     const fontSize = getFontSize(value, focus, inputWidth);
 
     return {
@@ -23,13 +33,14 @@ export const useInputStyle = ({ value, focus, inputElement, loading }: InputStyl
       transition: initialRender ? 'none' : undefined,
       color: loading ? 'var(--color-interactive-secondary)' : undefined,
     };
-  };
+  }, [value, focus, inputWidth, loading, initialRender]);
 
-  const [style, setStyle] = useState(getStyle());
+  const [style, setStyle] = useState<CSSProperties>(() => getStyle());
 
   useLayoutEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- Computing style based on layout measurements
     setStyle(getStyle());
-  }, [value, focus, loading, inputWidth]);
+  }, [value, focus, loading, inputWidth, getStyle]);
 
   return style;
 };
@@ -60,10 +71,11 @@ const useFirstDefinedValue = (newValue: number | undefined, dependencies: unknow
 
   useLayoutEffect(() => {
     if (typeof newValue !== 'undefined' && typeof value === 'undefined') {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- Lazy initialization from prop
       setValue(newValue);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [...dependencies, value]);
+  }, [...dependencies, value, newValue]);
 
   return value;
 };

package/src/expressiveMoneyInput/hooks/useSelectionRange.ts

@@ -15,9 +15,11 @@ export const useSelectionRange = () => {
     selection.current = undefined;
   };
 
+  /* eslint-disable react-hooks/refs */
   return {
     selection: selection.current,
     handleSelect,
     handleSelectionBlur,
   };
+  /* eslint-enable react-hooks/refs */
 };

package/src/header/Header.tsx

@@ -104,7 +104,7 @@ const Header: FunctionComponent<HeaderProps> = React.forwardRef(
     useEffect(() => {
       if (as === 'legend' && internalRef.current) {
         const { parentElement } = internalRef.current;
-        if (!parentElement || parentElement.tagName.toLowerCase() !== 'fieldset') {
+        if (parentElement?.tagName.toLowerCase() !== 'fieldset') {
           console.warn(
             'Legends should be the first child in a fieldset, and this is not possible when including an action',
           );
@@ -121,7 +121,7 @@ const Header: FunctionComponent<HeaderProps> = React.forwardRef(
     }
 
     return (
-      <div {...commonProps} {...props} ref={ref as React.Ref<HTMLDivElement>}>
+      <div {...commonProps} {...props} ref={ref}>
         <Title as={as} type={levelTypography} className="np-header__title">
           {title}
         </Title>

package/src/inputs/SelectInput/BottomSheet/SelectInputBottomSheet.tsx

@@ -65,10 +65,12 @@ export function SelectInputBottomSheet({
   return (
     <>
       {open ? <PreventScroll /> : null}
+      {/* eslint-disable react-hooks/refs -- setReference is a callback ref from floating-ui, safe to pass during render */}
       {renderTrigger?.({
         ref: refs.setReference,
         getInteractionProps: getReferenceProps,
       })}
+      {/* eslint-enable react-hooks/refs */}
 
       <FloatingPortal>
         <ThemeProvider theme="personal" screenMode={theme === 'personal' ? screenMode : 'light'}>
@@ -94,6 +96,7 @@ export function SelectInputBottomSheet({
                   <Fragment
                     key={floatingKey} // Force inner state invalidation on open
                   >
+                    {/* eslint-disable react-hooks/refs -- setFloating is a callback ref from floating-ui, safe to pass during render */}
                     <TransitionChild
                       ref={refs.setFloating}
                       as="div"
@@ -102,6 +105,7 @@ export function SelectInputBottomSheet({
                       leaveTo="np-bottom-sheet-v2-content--closed"
                       {...getFloatingProps()}
                     >
+                      {/* eslint-enable react-hooks/refs */}
                       <div className="np-bottom-sheet-v2-header">
                         <CloseButton
                           size={Size.SMALL}

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

@@ -77,7 +77,7 @@ export function SelectInputOptions<T = string>({
   const intl = useIntl();
   const virtualiserHandlerRef = useRef<VirtualizerHandle>(null);
   const controllerRef = filterable ? searchInputRef : listboxRef;
-  const [initialRender, setInitialRender] = useState(true);
+  const initialRenderRef = useRef(true);
 
   const needle = useMemo(() => {
     if (filterable) {
@@ -166,28 +166,42 @@ export function SelectInputOptions<T = string>({
   // Items shown once shall be kept mounted until the needle changes, otherwise
   // the scroll position may jump around inadvertently. Pattern adopted from:
   // https://inokawa.github.io/virtua/?path=/story/advanced-keep-offscreen-items--append-only
-  const [mountedIndexes, setMountedIndexes] = useState<number[]>([]);
-  const prevNeedleRef = useRef(needle);
-
+  const [virtualState, setVirtualState] = useState<{
+    needle: typeof needle;
+    length: number;
+    mountedIndexes: number[];
+  }>({
+    needle,
+    length: filteredItems.length,
+    mountedIndexes: [],
+  });
+
+  // Note: virtualState.mountedIndexes is in deps but only read in the guarded branch.
+  // This means external updates to mountedIndexes will trigger this effect but hit the guard
+  // and bail out early. This is intentional and harmless - the guard ensures no unnecessary work.
   useEffect(() => {
-    const needleChanged = prevNeedleRef.current !== needle;
-    prevNeedleRef.current = needle;
-
-    if (needleChanged) {
-      // Reset mounted indexes when search changes to avoid stale scroll positions
-      setMountedIndexes([]);
-      return;
-    }
-
-    // Ensure the 'End' key works as intended by keeping the last item mounted.
-    // Skipped on needle change to prevent auto-scrolling on search.
-    if (filteredItems.length > 0) {
-      setMountedIndexes((prevMountedIndexes) => {
-        // Create a new array with existing indexes plus the last item index
-        return [...new Set([...prevMountedIndexes, filteredItems.length - 1])]; // Sorting is redundant by nature here
+    if (virtualState.needle !== needle || virtualState.length !== filteredItems.length) {
+      const needleChanged = virtualState.needle !== needle;
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing virtual scroll state with filtered items
+      setVirtualState({
+        needle,
+        length: filteredItems.length,
+        mountedIndexes: needleChanged
+          ? [] // Reset on needle change
+          : filteredItems.length > 0
+            ? [...new Set([...virtualState.mountedIndexes, filteredItems.length - 1])] // Add last index
+            : virtualState.mountedIndexes,
       });
     }
-  }, [needle, filteredItems.length]);
+  }, [
+    needle,
+    filteredItems.length,
+    virtualState.needle,
+    virtualState.length,
+    virtualState.mountedIndexes,
+  ]);
+
+  const { mountedIndexes } = virtualState;
 
   const listboxContainerRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
@@ -200,7 +214,7 @@ export function SelectInputOptions<T = string>({
   }, []);
 
   useEffect(() => {
-    setInitialRender(false);
+    initialRenderRef.current = false;
   }, []);
 
   const showStatus = resultsEmpty;
@@ -251,7 +265,7 @@ export function SelectInputOptions<T = string>({
       className="np-select-input-options-container"
       onAriaActiveDescendantChange={(value: React.AriaAttributes['aria-activedescendant']) => {
         if (controllerRef.current != null) {
-          if (!initialRender && value != null) {
+          if (!initialRenderRef.current && value != null) {
             controllerRef.current.setAttribute('aria-activedescendant', value);
           } else {
             controllerRef.current.removeAttribute('aria-activedescendant');
@@ -288,7 +302,7 @@ export function SelectInputOptions<T = string>({
               const inputValue = event.currentTarget.value;
 
               // Free up resources and ensure not to go out of bounds
-              setMountedIndexes([]);
+              setVirtualState((prev) => ({ ...prev, mountedIndexes: [] }));
               onFilterChange(inputValue);
             }}
             onInput={(event) => {
@@ -358,7 +372,7 @@ export function SelectInputOptions<T = string>({
                     virtualiserHandlerRef.current.viewportSize,
                 );
 
-                setMountedIndexes((prevMountedIndexes) => {
+                setVirtualState((prev) => {
                   // Create an array of all indexes that should be visible
 
                   const visibleIndexes = [];
@@ -368,9 +382,11 @@ export function SelectInputOptions<T = string>({
                   }
 
                   // Combine with previous indexes and sort
-                  return [...new Set([...prevMountedIndexes, ...visibleIndexes])].sort(
-                    (a, b) => a - b,
-                  );
+                  const newMountedIndexes = [
+                    ...new Set([...prev.mountedIndexes, ...visibleIndexes]),
+                  ].sort((a, b) => a - b);
+
+                  return { ...prev, mountedIndexes: newMountedIndexes };
                 });
               }}
             >

package/src/inputs/SelectInput/Popover/SelectInputPopover.tsx

@@ -85,10 +85,12 @@ export function SelectInputPopover({
   return (
     <>
       {open ? <PreventScroll /> : null}
+      {/* eslint-disable react-hooks/refs -- setReference is a callback ref from floating-ui, safe to pass during render */}
       {renderTrigger({
         ref: refs.setReference,
         getInteractionProps: getReferenceProps,
       })}
+      {/* eslint-enable react-hooks/refs */}
 
       <FloatingPortal>
         <ThemeProvider theme="personal" screenMode={theme === 'personal' ? screenMode : 'light'}>
@@ -104,6 +106,7 @@ export function SelectInputPopover({
           >
             <FocusScope>
               <FloatingFocusManager context={context}>
+                {/* eslint-disable react-hooks/refs -- setFloating is a callback ref from floating-ui, safe to pass during render */}
                 <div
                   key={floatingKey} // Force inner state invalidation on open
                   ref={refs.setFloating}
@@ -114,6 +117,7 @@ export function SelectInputPopover({
                   style={floatingStyles}
                   {...getFloatingProps()}
                 >
+                  {/* eslint-enable react-hooks/refs */}
                   <div
                     className={clsx('np-popover-v2', title && 'np-popover-v2--has-title', {
                       'np-popover-v2--padding-md': padding === 'md',

package/src/inputs/SelectInput/SelectInput.tsx

@@ -1,5 +1,5 @@
 import mergeProps from 'merge-props';
-import { useEffect, useRef, useState, useDeferredValue } from 'react';
+import { useCallback, useEffect, useRef, useState, useDeferredValue } from 'react';
 import { Listbox as ListboxBase } from '@headlessui/react';
 import { useScreenSize } from '../../common/hooks/useScreenSize';
 import { Breakpoint } from '../../common/propsValues/breakpoint';
@@ -60,6 +60,7 @@ export function SelectInput<T = string, M extends boolean = false>({
   const initialized = useRef(false);
   const handleClose = useEffectEvent(onClose ?? (() => {}));
   const handleOpen = useEffectEvent(onOpen ?? (() => {}));
+
   useEffect(() => {
     if (initialized.current) {
       if (open) {
@@ -70,29 +71,34 @@ export function SelectInput<T = string, M extends boolean = false>({
     } else {
       initialized.current = true;
     }
-  }, [handleClose, handleOpen, open]);
+  }, [open]);
 
   const [filterQuery, _setFilterQuery] = useState('');
   const deferredFilterQuery = useDeferredValue(filterQuery);
-  const setFilterQuery = useEffectEvent((query: string) => {
-    _setFilterQuery(query);
-    if (query !== filterQuery) {
-      onFilterChange({
-        query,
-        queryNormalized: query ? searchableString(query) : null,
-      });
-    }
-  });
-
-  const internalTriggerRef = useRef<HTMLButtonElement | null>(null);
+  const previousFilterQueryRef = useRef(filterQuery);
 
-  const screenSm = useScreenSize(Breakpoint.SMALL);
-  const OptionsOverlay = screenSm ? SelectInputPopover : SelectInputBottomSheet;
+  const setFilterQuery = useCallback(
+    (query: string) => {
+      _setFilterQuery(query);
+      if (query !== previousFilterQueryRef.current) {
+        onFilterChange({
+          query,
+          queryNormalized: query ? searchableString(query) : null,
+        });
+        previousFilterQueryRef.current = query;
+      }
+    },
+    [onFilterChange],
+  );
 
+  const internalTriggerRef = useRef<HTMLButtonElement | null>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);
   const listboxRef = useRef<HTMLDivElement>(null);
   const controllerRef = filterable ? searchInputRef : listboxRef;
 
+  const screenSm = useScreenSize(Breakpoint.SMALL);
+  const OptionsOverlay = screenSm ? SelectInputPopover : SelectInputBottomSheet;
+
   /**
    * Attempts to resolve the `listbox` label
    * @see https://storybook.wise.design/?path=/docs/forms-selectinput-accessibility--docs#labelling

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

@@ -29,7 +29,7 @@ export function SelectInputTriggerButton<T extends SelectInputTriggerButtonEleme
       ref={ref}
       as={PolymorphicWithOverrides}
       role="combobox"
-      __overrides={{ as, size, ...interactionProps } as Record<string, unknown>}
+      __overrides={{ as, size, ...interactionProps }}
       {...mergeProps({ onClick, onKeyDown }, restProps)}
     />
   );

package/src/main.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:11 GMT
+ * Generated on Thu, 14 May 2026 16:11:43 GMT
  */
 
 :root {
@@ -144,7 +144,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-personal {
@@ -328,7 +328,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-personal--forest-green {
@@ -512,7 +512,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-personal--bright-green {
@@ -696,7 +696,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-personal--dark {
@@ -880,7 +880,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-platform {
@@ -1064,7 +1064,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-platform--forest-green {
@@ -1248,7 +1248,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-business {
@@ -1433,7 +1433,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-business--dark {
@@ -1618,7 +1618,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-business--forest-green {
@@ -1803,7 +1803,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-business--bright-green {
@@ -4351,48 +4351,53 @@ a.text-inverse:focus {
 
 @media (max-width: 320px) {
   .np-theme-personal {
-    --delta: 2;
-    --size-4: calc(4px / var(--delta));
-    --size-5: calc(5px / var(--delta));
-    --size-8: calc(8px / var(--delta));
-    --size-10: calc(10px / var(--delta));
-    --size-12: calc(12px / var(--delta));
-    --size-14: calc(14px / var(--delta));
-    --size-16: calc(16px / var(--delta));
-    --size-24: calc(24px / var(--delta));
-    --size-32: calc(32px / var(--delta));
-    --size-40: calc(40px / var(--delta));
-    --size-48: calc(48px / var(--delta));
-    --size-52: calc(52px / var(--delta));
-    --size-56: calc(56px / var(--delta));
-    --size-60: calc(60px / var(--delta));
-    --size-64: calc(64px / var(--delta));
-    --size-72: calc(72px / var(--delta));
-    --size-80: calc(80px / var(--delta));
-    --size-88: calc(88px / var(--delta));
-    --size-96: calc(96px / var(--delta));
-    --size-104: calc(104px / var(--delta));
-    --size-112: calc(112px / var(--delta));
-    --size-120: calc(120px / var(--delta));
-    --size-126: calc(126px / var(--delta));
-    --size-128: calc(128px / var(--delta));
-    --size-146: calc(146px / var(--delta));
-    --size-154: calc(154px / var(--delta));
-    --size-x-small: calc(24px / var(--delta));
-    --size-small: calc(32px / var(--delta));
-    --size-medium: calc(40px / var(--delta));
-    --size-large: calc(48px / var(--delta));
-    --size-x-large: calc(56px / var(--delta));
-    --size-2x-large: calc(72px / var(--delta));
-    --space-content-horizontal: calc(16px / var(--delta));
-    --space-small: calc(16px / var(--delta));
-    --space-medium: calc(32px / var(--delta));
-    --space-large: calc(40px / var(--delta));
-    --space-x-large: calc(56px / var(--delta));
-    --padding-x-small: var(--size-8);
-    --padding-small: var(--size-16);
-    --padding-medium: var(--size-24);
-    --padding-large: var(--size-32);
+    --padding-x-small: 4px;
+    --padding-small: 8px;
+    --padding-medium: 12px;
+    --padding-large: 16px;
+    --size-4: 2px;
+    --size-5: 2.5px;
+    --size-8: 4px;
+    --size-10: 5px;
+    --size-12: 6px;
+    --size-14: 7px;
+    --size-16: 8px;
+    --size-24: 12px;
+    --size-32: 16px;
+    --size-40: 20px;
+    --size-48: 24px;
+    --size-52: 26px;
+    --size-56: 28px;
+    --size-60: 30px;
+    --size-64: 32px;
+    --size-72: 36px;
+    --size-80: 40px;
+    --size-88: 44px;
+    --size-96: 48px;
+    --size-104: 52px;
+    --size-112: 56px;
+    --size-120: 60px;
+    --size-126: 63px;
+    --size-128: 64px;
+    --size-146: 73px;
+    --size-154: 77px;
+    --size-160: 80px;
+    --size-x-small: 12px;
+    --size-small: 16px;
+    --size-medium: 20px;
+    --size-large: 24px;
+    --size-x-large: 28px;
+    --size-2x-large: 36px;
+    --space-content-horizontal: 8px;
+    --space-small: 8px;
+    --space-medium: 16px;
+    --space-large: 20px;
+    --space-x-large: 28px;
+  }
+}
+
+@media (max-width: 320px) {
+  .np-theme-personal {
     --input-height-base: var(--size-32);
     --input-height-large: var(--input-height-small);
     --input-padding: var(--input-padding-small);