@transferwise/components 46.1.1 → 46.3.0

package/src/inputs/SelectInput.spec.tsx

@@ -1,4 +1,4 @@
-import { act, screen, within } from '@testing-library/react';
+import { act, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { render, mockMatchMedia, mockResizeObserver } from '../test-utils';
@@ -30,7 +30,7 @@ describe('SelectInput', () => {
           { type: 'option', value: 'USD' },
           { type: 'option', value: 'EUR' },
         ]}
-        renderFooter={({ normalizedQuery }) =>
+        renderFooter={({ queryNormalized: normalizedQuery }) =>
           normalizedQuery != null ? (
             <>Showing results for ‘{normalizedQuery}’</>
           ) : (
@@ -129,8 +129,57 @@ describe('SelectInput', () => {
     expect(within(listbox).getByRole('option')).toBeInTheDocument();
 
     const option = within(listbox).getAllByRole('option')[0];
-    userEvent.click(option);
+    // eslint-disable-next-line @typescript-eslint/require-await
+    await act(async () => {
+      userEvent.click(option);
+    });
 
     expect(trigger).toHaveTextContent('EUR');
   });
+
+  it('clears filter query on close', async () => {
+    const handleFilterChange = jest.fn();
+
+    render(
+      <SelectInput
+        items={[
+          { type: 'option', value: 'USD' },
+          { type: 'option', value: 'EUR' },
+        ]}
+        filterable
+        onFilterChange={handleFilterChange}
+      />,
+    );
+
+    const trigger = screen.getAllByRole('button')[0];
+    // eslint-disable-next-line @typescript-eslint/require-await
+    await act(async () => {
+      userEvent.tab();
+      userEvent.keyboard(' ');
+    });
+
+    expect(handleFilterChange).not.toHaveBeenCalled();
+
+    userEvent.keyboard(' x');
+    expect(handleFilterChange).toHaveBeenLastCalledWith({
+      query: ' x',
+      queryNormalized: 'x',
+    });
+
+    userEvent.keyboard('{Escape}');
+    await waitFor(() => {
+      expect(handleFilterChange).toHaveBeenLastCalledWith({
+        query: '',
+        queryNormalized: null,
+      });
+    });
+
+    // eslint-disable-next-line @typescript-eslint/require-await
+    await act(async () => {
+      userEvent.click(trigger);
+    });
+
+    const listbox = screen.getByRole('listbox');
+    expect(within(listbox).getAllByRole('option')).toHaveLength(2);
+  });
 });

package/src/inputs/SelectInput.story.tsx

@@ -266,7 +266,7 @@ export const Currencies: StoryObj<{
             icon={<Flag code={currency.code} intrinsicSize={24} />}
           />
         )}
-        renderFooter={({ resultsEmpty, normalizedQuery }) =>
+        renderFooter={({ resultsEmpty, queryNormalized: normalizedQuery }) =>
           resultsEmpty && normalizedQuery != null && /^[a-z]{3}$/u.test(normalizedQuery) ? (
             <>
               It’s not possible use {normalizedQuery.toUpperCase()} yet.{' '}

package/src/inputs/SelectInput.tsx

@@ -138,7 +138,7 @@ export interface SelectInputProps<T = string> {
   renderValue?: (value: NonNullable<T>, withinTrigger: boolean) => React.ReactNode;
   renderFooter?: (args: {
     resultsEmpty: boolean;
-    normalizedQuery: string | null | undefined;
+    queryNormalized: string | null | undefined;
   }) => React.ReactNode;
   renderTrigger?: (args: {
     content: React.ReactNode;
@@ -153,8 +153,8 @@ export interface SelectInputProps<T = string> {
   disabled?: boolean;
   size?: 'md' | 'lg';
   className?: string;
+  onFilterChange?: (args: { query: string; queryNormalized: string | null }) => void;
   onChange?: (value: T) => void;
-  onSearchChange?: (query: string) => void;
   onClear?: () => void;
 }
 
@@ -209,6 +209,8 @@ function SelectInputClearButton({ className, onClick }: SelectInputClearButtonPr
   );
 }
 
+const noop = () => {};
+
 export function SelectInput<T = string>({
   name,
   placeholder,
@@ -224,12 +226,21 @@ export function SelectInput<T = string>({
   disabled,
   size = 'md',
   className,
+  onFilterChange = noop,
   onChange,
-  onSearchChange,
   onClear,
 }: SelectInputProps<T>) {
   const [open, setOpen] = useState(false);
 
+  const [filterQuery, _setFilterQuery] = useState('');
+  const setFilterQuery = useEffectEvent((query: string) => {
+    _setFilterQuery(query);
+    onFilterChange({
+      query,
+      queryNormalized: query ? searchableString(query) : null,
+    });
+  });
+
   const triggerRef = useRef<HTMLButtonElement>(null);
 
   const screenSm = useScreenSize(Breakpoint.SMALL);
@@ -311,6 +322,11 @@ export function SelectInput<T = string>({
           onClose={() => {
             setOpen(false);
           }}
+          onCloseEnd={() => {
+            if (filterQuery !== '') {
+              setFilterQuery('');
+            }
+          }}
         >
           <SelectInputOptions
             items={items}
@@ -320,7 +336,8 @@ export function SelectInput<T = string>({
             filterPlaceholder={filterPlaceholder}
             searchInputRef={searchInputRef}
             listboxRef={listboxRef}
-            onSearchChange={onSearchChange}
+            filterQuery={filterQuery}
+            onFilterChange={setFilterQuery}
           />
         </OptionsOverlay>
       )}
@@ -407,7 +424,8 @@ interface SelectInputOptionsProps<T = string>
   > {
   searchInputRef: React.RefObject<HTMLInputElement>;
   listboxRef: React.RefObject<HTMLDivElement>;
-  onSearchChange?: (query: string) => void;
+  filterQuery: string;
+  onFilterChange: (query: string) => void;
 }
 
 function SelectInputOptions<T = string>({
@@ -418,19 +436,19 @@ function SelectInputOptions<T = string>({
   filterPlaceholder,
   searchInputRef,
   listboxRef,
-  onSearchChange,
+  filterQuery,
+  onFilterChange,
 }: SelectInputOptionsProps<T>) {
   const intl = useIntl();
 
   const controllerRef = filterable ? searchInputRef : listboxRef;
 
-  const [query, setQuery] = useState('');
   const needle = useMemo(() => {
     if (filterable) {
-      return query ? searchableString(query) : null;
+      return filterQuery ? searchableString(filterQuery) : null;
     }
     return undefined;
-  }, [filterable, query]);
+  }, [filterQuery, filterable]);
   const resultsEmpty = needle != null && filterSelectInputItems(items, needle).length === 0;
 
   const listboxContainerRef = useRef<HTMLDivElement>(null);
@@ -458,6 +476,12 @@ function SelectInputOptions<T = string>({
             controllerRef.current.setAttribute('aria-activedescendant', value);
           } else {
             controllerRef.current.removeAttribute('aria-activedescendant');
+            if (filterQuery) {
+              // Ensure having an active option while filtering
+              controllerRef.current.dispatchEvent(
+                new KeyboardEvent('keydown', { key: 'Home', bubbles: true }),
+              );
+            }
           }
         }
       }}
@@ -468,7 +492,7 @@ function SelectInputOptions<T = string>({
             ref={searchInputRef}
             shape="rectangle"
             placeholder={filterPlaceholder}
-            value={query}
+            value={filterQuery}
             aria-controls={listboxId}
             aria-describedby={showStatus ? statusId : undefined}
             onKeyDown={(event) => {
@@ -479,10 +503,7 @@ function SelectInputOptions<T = string>({
               }
             }}
             onChange={(event) => {
-              setQuery(event.currentTarget.value);
-              if (onSearchChange) {
-                onSearchChange(event.currentTarget.value);
-              }
+              onFilterChange(event.currentTarget.value);
             }}
           />
         </div>
@@ -535,7 +556,7 @@ function SelectInputOptions<T = string>({
             >
               {renderFooter({
                 resultsEmpty,
-                normalizedQuery: needle,
+                queryNormalized: needle,
               })}
             </div>
           </footer>

package/src/inputs/TextArea.css

@@ -14,7 +14,6 @@
   color: #37517e;
   color: var(--color-content-primary);
   box-shadow: inset 0 0 0 1px #c9cbce;
-  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
   box-shadow: inset 0 0 0 var(--ring-width) var(--ring-color);
   transition-property: color, opacity, box-shadow;
   transition-timing-function: ease-in-out;

package/src/inputs/_BottomSheet.tsx

@@ -29,6 +29,7 @@ export interface BottomSheetProps {
   padding?: 'none' | 'md';
   children?: React.ReactNode;
   onClose?: () => void;
+  onCloseEnd?: () => void;
 }
 
 export function BottomSheet({
@@ -39,6 +40,7 @@ export function BottomSheet({
   padding = 'md',
   children,
   onClose,
+  onCloseEnd,
 }: BottomSheetProps) {
   const { refs, context } = useFloating<Element>({
     open,
@@ -73,6 +75,7 @@ export function BottomSheet({
             beforeEnter={() => {
               setFloatingKey((prev) => prev + 1);
             }}
+            afterLeave={onCloseEnd}
           >
             <FocusBoundary>
               <Transition.Child

package/src/inputs/_Popover.tsx

@@ -34,6 +34,7 @@ export interface PopoverProps {
   padding?: 'none' | 'md';
   children?: React.ReactNode;
   onClose?: () => void;
+  onCloseEnd?: () => void;
 }
 
 const floatingPadding = 16;
@@ -47,6 +48,7 @@ export function Popover({
   padding = 'md',
   children,
   onClose,
+  onCloseEnd,
 }: PopoverProps) {
   const { refs, floatingStyles, context } = useFloating<Element>({
     placement,
@@ -96,6 +98,7 @@ export function Popover({
             beforeEnter={() => {
               setFloatingKey((prev) => prev + 1);
             }}
+            afterLeave={onCloseEnd}
           >
             <FocusBoundary>
               <FloatingFocusManager context={context} guards={false} modal={false}>

package/src/main.css

@@ -5,7 +5,6 @@ div.critical-comms {
   --critical-comms-subtitle-color-padding-left: var(--size-16);
   --critical-comms-vertical-spacing: var(--size-8);
   background-color: rgba(255,135,135,0.10196);
-  background-color: var(--color-background-negative);
   background-color: var(--critical-comms-background-color);
   display: flex;
   justify-content: center;
@@ -1142,16 +1141,12 @@ div.critical-comms .critical-comms-body {
   flex-direction: column;
   align-items: stretch;
   background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
   background-color: var(--Card-background-color);
   border-radius: 32px;
-  border-radius: var(--size-32);
   border-radius: var(--Card-border-radius);
   gap: 16px;
-  gap: var(--size-16);
   gap: var(--Card-flex-gap);
   padding: 24px;
-  padding: var(--size-24);
   padding: var(--Card-padding);
   position: relative;
   box-sizing: border-box;
@@ -2047,9 +2042,19 @@ button.np-option {
   max-width: 1164px;
 }
 .np-flow-navigation__stepper {
-  padding-bottom: 0px !important;
-  padding-left: 0px !important;
-  padding-right: 0px !important;
+  padding-bottom: 0 !important;
+}
+[dir="rtl"] .np-flow-navigation__stepper {
+  padding-right: 0 !important;
+}
+html:not([dir="rtl"]) .np-flow-navigation__stepper {
+  padding-left: 0 !important;
+}
+[dir="rtl"] .np-flow-navigation__stepper {
+  padding-left: 0 !important;
+}
+html:not([dir="rtl"]) .np-flow-navigation__stepper {
+  padding-right: 0 !important;
 }
 .np-flow-navigation--xs-max .np-flow-navigation__stepper .tw-stepper-steps {
   display: none;
@@ -2061,11 +2066,23 @@ button.np-option {
   height: auto;
 }
 .np-flow-navigation--sm .np-flow-navigation__stepper {
+  min-height: 56px;
+}
+[dir="rtl"] .np-flow-navigation--sm .np-flow-navigation__stepper {
+  padding-right: 24px !important;
+  padding-right: var(--size-24) !important;
+}
+html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
+  padding-left: 24px !important;
+  padding-left: var(--size-24) !important;
+}
+[dir="rtl"] .np-flow-navigation--sm .np-flow-navigation__stepper {
   padding-left: 24px !important;
   padding-left: var(--size-24) !important;
+}
+html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   padding-right: 24px !important;
   padding-right: var(--size-24) !important;
-  min-height: 56px;
 }
 .np-flow-navigation--lg .np-flow-navigation__stepper {
   max-width: 562px;
@@ -2169,7 +2186,6 @@ button.np-option {
   color: #37517e;
   color: var(--color-content-primary);
   box-shadow: inset 0 0 0 1px #c9cbce;
-  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
   box-shadow: inset 0 0 0 var(--ring-width) var(--ring-color);
   transition-property: color, opacity, box-shadow;
   transition-timing-function: ease-in-out;
@@ -3424,15 +3440,12 @@ html:not([dir="rtl"]) .np-navigation-option {
   --nudge-control-background-color: var(--color-background-neutral);
   align-items: stretch;
   background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
   background-color: var(--nudge-background-color);
   border-radius: 16px;
-  border-radius: var(--radius-medium);
   border-radius: var(--nudge-border-radius);
   display: flex;
   flex: 1;
   gap: 16px;
-  gap: var(--size-16);
   gap: var(--nudge-flex-gap);
   min-height: 106px;
   min-height: var(--nudge-min-height);

package/src/moneyInput/MoneyInput.js

@@ -376,7 +376,9 @@ class MoneyInput extends Component {
               disabled={disabled}
               size={size}
               onChange={this.handleSelectChange}
-              onSearchChange={this.handleSearchChange}
+              onFilterChange={({ queryNormalized }) => {
+                this.handleSearchChange(queryNormalized ?? '');
+              }}
               {...selectProps}
             />
           </div>

package/src/moneyInput/MoneyInput.spec.js

@@ -95,7 +95,10 @@ describe('Money Input', () => {
   }
 
   function searchCurrencies(query) {
-    currencySelect().prop('onSearchChange')(query);
+    currencySelect().prop('onFilterChange')({
+      query,
+      queryNormalized: query.trim().replace(/\s+/gu, ' ').normalize('NFKC').toLowerCase(),
+    });
     component.update();
   }
 

package/src/nudge/Nudge.css

@@ -15,15 +15,12 @@
   --nudge-control-background-color: var(--color-background-neutral);
   align-items: stretch;
   background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
   background-color: var(--nudge-background-color);
   border-radius: 16px;
-  border-radius: var(--radius-medium);
   border-radius: var(--nudge-border-radius);
   display: flex;
   flex: 1;
   gap: 16px;
-  gap: var(--size-16);
   gap: var(--nudge-flex-gap);
   min-height: 106px;
   min-height: var(--nudge-min-height);