@transferwise/components 46.160.1 → 46.160.3

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],
+  );
+}

package/src/Label/_stories/Label.test.story.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import Info from '../../Info';
 import Label from '..';
 
@@ -12,25 +12,38 @@ export default {
 type Story = StoryObj<typeof Label>;
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <Label>Plain label text</Label>
-      <Label>
-        <Label.Optional>Label with optional marker</Label.Optional>
-      </Label>
-      <Label>
-        <div>
-          Label with info icon{' '}
-          <Info content="Helpful tooltip content" aria-label="More information" />
-        </div>
-      </Label>
-      <Label>
-        <Label.Optional>
-          Label with optional and info icon{' '}
-          <Info content="Helpful tooltip content" aria-label="More information" />
-        </Label.Optional>
-      </Label>
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <Label>{i18n.plain}</Label>
+        <Label>
+          <Label.Optional>{i18n.optional}</Label.Optional>
+        </Label>
+        <Label>
+          <div>
+            {i18n.withInfo} <Info content={i18n.tooltip} aria-label={i18n.moreInfo} />
+          </div>
+        </Label>
+        <Label>
+          <Label.Optional>
+            {i18n.optionalWithInfo} <Info content={i18n.tooltip} aria-label={i18n.moreInfo} />
+          </Label.Optional>
+        </Label>
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      plain: { ltr: 'Plain label text', rtl: 'نص التسمية العادي' },
+      optional: { ltr: 'Label with optional marker', rtl: 'تسمية مع علامة اختيارية' },
+      withInfo: { ltr: 'Label with info icon', rtl: 'تسمية مع أيقونة معلومات' },
+      optionalWithInfo: {
+        ltr: 'Label with optional and info icon',
+        rtl: 'تسمية مع اختيارية وأيقونة معلومات',
+      },
+      tooltip: { ltr: 'Helpful tooltip content', rtl: 'محتوى تلميح مفيد' },
+      moreInfo: { ltr: 'More information', rtl: 'مزيد من المعلومات' },
+    },
+  }),
 };

package/src/Popover/_stories/Popover.rtl.test.story.tsx

@@ -14,16 +14,6 @@ export default {
 
 type Story = StoryObj<typeof Popover>;
 
-const iframeDiff = withRTLDiff({ renderAs: 'iframe' });
-
-const containerStyle: React.CSSProperties = {
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  minHeight: '24rem',
-  width: '100%',
-};
-
 const clickTrigger = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
   const canvas = within(canvasElement);
   const trigger = canvas.queryByRole('button');
@@ -33,64 +23,64 @@ const clickTrigger = async ({ canvasElement }: { canvasElement: HTMLElement }) =
 
 export const PlacementRight: Story = {
   render: () => (
-    <div style={containerStyle}>
-      <Popover
-        preferredPlacement={Position.RIGHT}
-        title="Guaranteed rate"
-        content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
-      >
-        <Button v2>Placement right</Button>
-      </Popover>
-    </div>
+    <Popover
+      preferredPlacement={Position.RIGHT}
+      title="Guaranteed rate"
+      content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
+    >
+      <Button size="sm" v2>
+        right
+      </Button>
+    </Popover>
   ),
   play: clickTrigger,
-  ...iframeDiff,
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'left', vAlign: 'center' }),
 };
 
 export const PlacementLeft: Story = {
   render: () => (
-    <div style={containerStyle}>
-      <Popover
-        preferredPlacement={Position.LEFT}
-        title="Guaranteed rate"
-        content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
-      >
-        <Button v2>Placement left</Button>
-      </Popover>
-    </div>
+    <Popover
+      preferredPlacement={Position.LEFT}
+      title="Guaranteed rate"
+      content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
+    >
+      <Button size="sm" v2>
+        left
+      </Button>
+    </Popover>
   ),
   play: clickTrigger,
-  ...iframeDiff,
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'right', vAlign: 'center' }),
 };
 
 export const PlacementTop: Story = {
   render: () => (
-    <div style={containerStyle}>
-      <Popover
-        preferredPlacement={Position.TOP}
-        title="Guaranteed rate"
-        content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
-      >
-        <Button v2>Placement top</Button>
-      </Popover>
-    </div>
+    <Popover
+      preferredPlacement={Position.TOP}
+      title="Guaranteed rate"
+      content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
+    >
+      <Button size="sm" v2>
+        top
+      </Button>
+    </Popover>
   ),
   play: clickTrigger,
-  ...iframeDiff,
+  ...withRTLDiff({ renderAs: 'iframe', vAlign: 'bottom', hAlign: 'center' }),
 };
 
 export const PlacementBottom: Story = {
   render: () => (
-    <div style={containerStyle}>
-      <Popover
-        preferredPlacement={Position.BOTTOM}
-        title="Guaranteed rate"
-        content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
-      >
-        <Button v2>Placement bottom</Button>
-      </Popover>
-    </div>
+    <Popover
+      preferredPlacement={Position.BOTTOM}
+      title="Guaranteed rate"
+      content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
+    >
+      <Button size="sm" v2>
+        bottom
+      </Button>
+    </Popover>
   ),
   play: clickTrigger,
-  ...iframeDiff,
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center' }),
 };

package/src/SegmentedControl/SegmentedControl.css

@@ -35,7 +35,8 @@
   background: var(--color-background-screen);
   border-radius: 24px;
   border-radius: var(--size-24);
-  transition: left 300ms;
+  transition: left 300ms,
+    right 300ms;
 }
 .segmented-control__segments--no-animate::after {
   transition: none !important;

package/src/SegmentedControl/SegmentedControl.less

@@ -12,7 +12,7 @@
   justify-content: center;
   align-items: center;
   background: var(--color-background-neutral);
-  border-radius: var(--size-24);  
+  border-radius: var(--size-24);
   transition: outline 300ms;
   outline: 2px solid transparent;
 }
@@ -31,7 +31,9 @@
   z-index: 0;
   background: var(--color-background-screen);
   border-radius: var(--size-24);
-  transition: left 300ms;
+  transition:
+    left 300ms,
+    right 300ms;
 }
 
 .segmented-control__segments--no-animate::after {

package/src/SegmentedControl/SegmentedControl.tsx

@@ -3,6 +3,7 @@ import { createRef, useEffect, useRef, useState } from 'react';
 
 import Body from '../Body';
 import { Typography } from '../common';
+import { useDirection } from '../common/hooks';
 
 type SegmentBase = { id: string; label: string; value: string };
 
@@ -40,6 +41,7 @@ const SegmentedControl = ({
 }: SegmentedControlProps) => {
   const isMountedRef = useRef(false);
   const [animate, setAnimate] = useState(false);
+  const { isRTL } = useDirection();
 
   const segmentsRef = useRef<HTMLDivElement>(null);
 
@@ -62,8 +64,12 @@ const SegmentedControl = ({
     // This is so we can animate the highlight to the selected segment
     if (selectedSegmentRef?.current && segmentsRef.current) {
       const { style } = segmentsRef.current;
-      style.setProperty('--segment-highlight-width', `${selectedSegmentRef.current.offsetWidth}px`);
-      style.setProperty('--segment-highlight-x', `${selectedSegmentRef.current.offsetLeft}px`);
+      const segment = selectedSegmentRef.current;
+      const inlineOffset = isRTL
+        ? segmentsRef.current.offsetWidth - segment.offsetLeft - segment.offsetWidth
+        : segment.offsetLeft;
+      style.setProperty('--segment-highlight-width', `${segment.offsetWidth}px`);
+      style.setProperty('--segment-highlight-x', `${inlineOffset}px`);
     }
   };
 

package/src/SegmentedControl/_stories/SegmentedControl.test.story.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import SegmentedControl from '../SegmentedControl';
@@ -22,24 +23,31 @@ const viewSegments = [
   { id: 'seg-gamma', label: 'Gamma', value: 'gamma', controls: 'panel-gamma' },
 ] as const;
 
-export const RTLDiff: Story = {
-  render: () => (
+function InteractiveSegmentedControl() {
+  const [inputValue, setInputValue] = useState('one');
+  const [viewValue, setViewValue] = useState('beta');
+
+  return (
     <>
       <SegmentedControl
         name="rtl-input"
         mode="input"
         segments={inputSegments}
-        value="one"
-        onChange={() => {}}
+        value={inputValue}
+        onChange={setInputValue}
       />
       <SegmentedControl
         name="rtl-view"
         mode="view"
         segments={viewSegments}
-        value="alpha"
-        onChange={() => {}}
+        value={viewValue}
+        onChange={setViewValue}
       />
     </>
-  ),
-  ...withRTLDiff(),
+  );
+}
+
+export const RTLDiff: Story = {
+  render: () => <InteractiveSegmentedControl />,
+  ...withRTLDiff({ width: 'stretch', renderAs: 'iframe' }),
 };

package/src/Tooltip/Tooltip.css

@@ -42,9 +42,3 @@
   visibility: visible;
   visibility: initial;
 }
-.np-panel[data-popper-placement^="right"] > .np-panel__content.tooltip-inner .np-panel__arrow {
-  inset-inline-start: -7px;
-}
-.np-panel[data-popper-placement^="left"] > .np-panel__content.tooltip-inner .np-panel__arrow {
-  inset-inline-end: -7px;
-}

package/src/Tooltip/Tooltip.less

@@ -48,15 +48,3 @@
     }
   }
 }
-
-.np-panel[data-popper-placement^="right"] > .np-panel__content.tooltip-inner {
-  .np-panel__arrow {
-    left: -7px;
-  }
-}
-
-.np-panel[data-popper-placement^="left"] > .np-panel__content.tooltip-inner {
-  .np-panel__arrow {
-    right: -7px;
-  }
-}

package/src/Tooltip/Tooltip.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 
+import { DirectionProvider } from '../Provider/Direction/DirectionProvider';
 import Tooltip from '.';
 
 describe('Tooltip Component', () => {
@@ -102,4 +103,54 @@ describe('Tooltip Component', () => {
     const tooltipElement = screen.getByRole('tooltip', { hidden: true });
     expect(tooltipElement).toBeVisible();
   });
+
+  describe('RTL position mirroring', () => {
+    it('mirrors position="left" to right in RTL', async () => {
+      render(
+        <DirectionProvider direction="rtl">
+          <Tooltip label="Test Tooltip" position="left">
+            <span>Hover me</span>
+          </Tooltip>
+        </DirectionProvider>,
+      );
+      const triggerElement = screen.getByText('Hover me');
+      await userEvent.hover(triggerElement);
+
+      const tooltip = screen.getByRole('tooltip', { hidden: true });
+      expect(tooltip).toHaveAttribute('data-popper-placement', 'right');
+    });
+
+    it('mirrors position="right" to left in RTL', async () => {
+      render(
+        <DirectionProvider direction="rtl">
+          <Tooltip label="Test Tooltip" position="right">
+            <span>Hover me</span>
+          </Tooltip>
+        </DirectionProvider>,
+      );
+      const triggerElement = screen.getByText('Hover me');
+      await userEvent.hover(triggerElement);
+
+      const tooltip = screen.getByRole('tooltip', { hidden: true });
+      expect(tooltip).toHaveAttribute('data-popper-placement', 'left');
+    });
+
+    it.each(['top', 'bottom'] as const)(
+      'does not mirror position="%s" in RTL',
+      async (position) => {
+        render(
+          <DirectionProvider direction="rtl">
+            <Tooltip label="Test Tooltip" position={position}>
+              <span>Hover me</span>
+            </Tooltip>
+          </DirectionProvider>,
+        );
+        const triggerElement = screen.getByText('Hover me');
+        await userEvent.hover(triggerElement);
+
+        const tooltip = screen.getByRole('tooltip', { hidden: true });
+        expect(tooltip).toHaveAttribute('data-popper-placement', position);
+      },
+    );
+  });
 });

package/src/Tooltip/Tooltip.tsx

@@ -19,6 +19,7 @@ import {
 } from 'react';
 
 import { CommonProps, Position } from '../common';
+import useDirection from '../common/hooks/useDirection';
 import {
   PositionBottom,
   PositionLeft,
@@ -42,12 +43,21 @@ const Tooltip = ({
 }: TooltipProps) => {
   const [open, setOpen] = useState(false);
   const arrowRef = useRef<HTMLDivElement | null>(null);
+  const { isRTL } = useDirection();
+
+  const resolvedPosition = isRTL
+    ? position === 'left'
+      ? 'right'
+      : position === 'right'
+        ? 'left'
+        : position
+    : position;
 
   const fallbackId = useId();
   const tooltipId = id ?? fallbackId;
 
   const { refs, floatingStyles, placement, middlewareData } = useFloating({
-    placement: position,
+    placement: resolvedPosition,
     middleware: [
       offset(16),
       flip({ fallbackPlacements: [Position.TOP] }),