@transferwise/components 46.140.1 → 46.142.0

package/src/field/Field.tsx

@@ -1,9 +1,14 @@
 import { clsx } from 'clsx';
-import { useId, useRef } from 'react';
+import { useCallback, useId, useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
 
+import Body from '../body';
 import { Sentiment } from '../common';
+import messages from './Field.messages';
 import { InlinePrompt, type InlinePromptProps } from '../prompt';
 import {
+  TextareaCharacterCountProvider,
+  type TextareaCharacterCountState,
   FieldLabelContextProvider,
   InputDescribedByProvider,
   InputIdContextProvider,
@@ -54,6 +59,7 @@ export const Field = ({
   children,
   ...props
 }: FieldProps) => {
+  const { formatMessage } = useIntl();
   const labelRef = useRef<HTMLLabelElement>(null);
   const sentiment = props.error ? Sentiment.NEGATIVE : propType;
   const message = propMessage || props.error;
@@ -66,6 +72,18 @@ export const Field = ({
 
   const messageId = useId();
   const descriptionId = useId();
+  const textareaCharCounterId = useId();
+
+  const [textareaCharacterCount, setTextareaCharacterCount] =
+    useState<TextareaCharacterCountState>(null);
+  const handleTextareaCharacterCount = useCallback(
+    (state: TextareaCharacterCountState) => setTextareaCharacterCount(state),
+    [],
+  );
+
+  const isNearCharLimit =
+    textareaCharacterCount != null &&
+    textareaCharacterCount.current >= textareaCharacterCount.max * 0.8;
 
   /**
    * form control can have multiple messages to describe it,
@@ -79,6 +97,9 @@ export const Field = ({
     if (message) {
       messageIds.push(messageId);
     }
+    if (textareaCharacterCount) {
+      messageIds.push(textareaCharCounterId);
+    }
     return messageIds.length > 0 ? messageIds.join(' ') : undefined;
   }
 
@@ -87,43 +108,69 @@ export const Field = ({
       <InputIdContextProvider value={inputId}>
         <InputDescribedByProvider value={ariaDescribedbyByIds()}>
           <InputInvalidProvider value={hasError}>
-            <div
-              className={clsx(
-                'np-field form-group d-block',
-                {
-                  'has-success': sentiment === Sentiment.POSITIVE,
-                  'has-warning': sentiment === Sentiment.WARNING,
-                  'has-error': hasError,
-                  'has-info': sentiment === Sentiment.NEUTRAL,
-                },
-                className,
-              )}
-            >
-              {label != null ? (
-                <>
-                  <Label ref={labelRef} id={labelId} htmlFor={inputId}>
-                    {required ? label : <Label.Optional>{label}</Label.Optional>}
-                  </Label>
-                  <Label.Description id={descriptionId}>{description}</Label.Description>
-                  <div className="np-field-control">{children}</div>
-                </>
-              ) : (
-                children
-              )}
+            <TextareaCharacterCountProvider value={handleTextareaCharacterCount}>
+              <div
+                className={clsx(
+                  'np-field form-group d-block',
+                  {
+                    'has-success': sentiment === Sentiment.POSITIVE,
+                    'has-warning': sentiment === Sentiment.WARNING,
+                    'has-error': hasError,
+                    'has-info': sentiment === Sentiment.NEUTRAL,
+                  },
+                  className,
+                )}
+              >
+                {label != null ? (
+                  <>
+                    <Label ref={labelRef} id={labelId} htmlFor={inputId}>
+                      {required ? label : <Label.Optional>{label}</Label.Optional>}
+                    </Label>
+                    <Label.Description id={descriptionId}>{description}</Label.Description>
+                    <div className="np-field-control">{children}</div>
+                  </>
+                ) : (
+                  children
+                )}
 
-              {message && (
-                <InlinePrompt
-                  sentiment={sentiment}
-                  id={messageId}
-                  mediaLabel={messageIconLabel}
-                  className="np-field__prompt"
-                  loading={messageLoading}
-                  width="full"
-                >
-                  {message}
-                </InlinePrompt>
-              )}
-            </div>
+                {(message || textareaCharacterCount) && (
+                  <div className="np-field-validation">
+                    {message && (
+                      <InlinePrompt
+                        sentiment={sentiment}
+                        id={messageId}
+                        mediaLabel={messageIconLabel}
+                        className="np-field__prompt"
+                        loading={messageLoading}
+                        width="full"
+                      >
+                        {message}
+                      </InlinePrompt>
+                    )}
+                    {textareaCharacterCount && (
+                      <Body
+                        as="span"
+                        id={textareaCharCounterId}
+                        {...(isNearCharLimit
+                          ? {
+                              role: 'status' as const,
+                              'aria-live': 'polite' as const,
+                              'aria-atomic': 'true' as const,
+                            }
+                          : {})}
+                        aria-label={formatMessage(messages.characterCount, {
+                          current: textareaCharacterCount.current,
+                          max: textareaCharacterCount.max,
+                        })}
+                        className="np-field-textarea-char-counter"
+                      >
+                        {textareaCharacterCount.current}/{textareaCharacterCount.max}
+                      </Body>
+                    )}
+                  </div>
+                )}
+              </div>
+            </TextareaCharacterCountProvider>
           </InputInvalidProvider>
         </InputDescribedByProvider>
       </InputIdContextProvider>

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/i18n/en.json

@@ -20,6 +20,7 @@
   "neptune.Expander.expandAriaLabel": "Expand",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Type a currency / country",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Select currency",
+  "neptune.Field.characterCount": "{current} of {max} characters used",
   "neptune.FlowNavigation.back": "back to previous step",
   "neptune.Info.ariaLabel": "More information",
   "neptune.Label.optional": "(Optional)",

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/inputs/TextArea.story.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { Field } from '../field/Field';
+import { Sentiment } from '../common';
+import { TextArea } from './TextArea';
+
+/**
+ * TextArea must be the only input with `maxLength` inside a given Field.
+ * The character counter uses shared context — multiple TextAreas with maxLength
+ * in the same Field will race to set the counter state.
+ */
+const meta: Meta<typeof TextArea> = {
+  title: 'Forms/TextArea',
+  component: TextArea,
+  argTypes: {
+    value: {
+      control: 'text',
+    },
+    maxLength: {
+      control: 'number',
+    },
+    placeholder: {
+      control: 'text',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    rows: {
+      control: 'number',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TextArea>;
+
+/** Explore all props via the controls panel. */
+export const Playground: Story = {
+  args: {
+    value: '',
+    maxLength: 200,
+    placeholder: 'Type something...',
+  },
+  render: (args) => {
+    const [value, setValue] = useState(args.value ?? '');
+    useEffect(() => setValue(args.value ?? ''), [args.value]);
+
+    return (
+      <Field label="Message" required={false}>
+        <TextArea {...args} value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+    );
+  },
+};
+
+export const Basic: Story = {
+  render: () => {
+    const [value, setValue] = useState('');
+
+    return (
+      <Field label="Message" required={false}>
+        <TextArea maxLength={200} value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+    );
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Field label="Message" required={false}>
+  <TextArea
+    maxLength={200}
+    value={value}
+    onChange={({ target }) => setValue(target.value)}
+  />
+</Field>`,
+      },
+    },
+  },
+};
+
+export const WithError: Story = {
+  render: () => {
+    const [value, setValue] = useState('');
+
+    return (
+      <Field
+        label="Message"
+        required={false}
+        sentiment={Sentiment.NEGATIVE}
+        message="You have exceeded the character limit"
+      >
+        <TextArea maxLength={200} value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+    );
+  },
+};

package/src/inputs/TextArea.test.story.tsx

@@ -0,0 +1,142 @@
+import { useState } from 'react';
+import { userEvent, within } from 'storybook/test';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { Field } from '../field/Field';
+import { TextArea } from './TextArea';
+
+const meta: Meta<typeof TextArea> = {
+  title: 'Forms/TextArea/Tests',
+  component: TextArea,
+  tags: ['!autodocs', '!manifest'],
+};
+
+export default meta;
+type Story = StoryObj<typeof TextArea>;
+
+export const AsciiCharacters: Story = {
+  name: 'counter at limit with ASCII input',
+  render: () => {
+    const [value, setValue] = useState('');
+
+    return (
+      <Field label="Message" required={false}>
+        <TextArea maxLength={10} value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByRole('textbox'), '0123456789');
+  },
+};
+
+export const EmojiCharacters: Story = {
+  name: 'counter with emoji input',
+  render: () => {
+    const [value, setValue] = useState('');
+
+    return (
+      <Field label="Message" required={false}>
+        <TextArea maxLength={10} value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const textarea = canvas.getByRole('textbox');
+    await userEvent.click(textarea);
+    await userEvent.paste('🐱💕🐱💕');
+  },
+};
+
+export const EmojiAtLimit: Story = {
+  name: 'truncates emoji paste exceeding limit',
+  render: () => {
+    const [value, setValue] = useState('');
+
+    return (
+      <Field label="Message" required={false}>
+        <TextArea maxLength={10} value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const textarea = canvas.getByRole('textbox');
+    await userEvent.click(textarea);
+    await userEvent.paste('🐱💕🐱💕🐱💕🐱💕🐱💕🐱💕🐱💕');
+  },
+};
+
+export const CJKCharacters: Story = {
+  name: 'truncates CJK paste exceeding limit',
+  render: () => {
+    const [value, setValue] = useState('');
+
+    return (
+      <Field label="Message" required={false}>
+        <TextArea maxLength={10} value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const textarea = canvas.getByRole('textbox');
+    await userEvent.click(textarea);
+    await userEvent.paste('吉𣘺吉𣘺吉𣘺吉𣘺吉𣘺吉𣘺');
+  },
+};
+
+export const InitialValueExceedsLimit: Story = {
+  name: 'initial value exceeding maxLength is preserved',
+  render: () => {
+    const [value, setValue] = useState('Hello World!');
+
+    return (
+      <Field label="Message" required={false}>
+        <TextArea maxLength={3} value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+    );
+  },
+};
+
+export const EmojiTypingBlocked: Story = {
+  name: 'blocks emoji paste when already at limit',
+  render: () => {
+    const [value, setValue] = useState('');
+
+    return (
+      <Field label="Message" required={false}>
+        <TextArea maxLength={3} value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const textarea = canvas.getByRole('textbox');
+    await userEvent.click(textarea);
+    await userEvent.paste('🐱💕');
+    await userEvent.paste('🎉🎉🎉');
+  },
+};
+
+export const CJKTypingBlocked: Story = {
+  name: 'blocks CJK paste when already at limit',
+  render: () => {
+    const [value, setValue] = useState('');
+
+    return (
+      <Field label="Message" required={false}>
+        <TextArea maxLength={3} value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const textarea = canvas.getByRole('textbox');
+    await userEvent.click(textarea);
+    await userEvent.paste('吉𣘺');
+    await userEvent.paste('吉𣘺吉𣘺吉𣘺');
+  },
+};