@transferwise/components 46.121.2 → 46.122.1

package/src/inputs/SelectInput.tsx

@@ -93,8 +93,13 @@ export type SelectInputItem<T = string> =
 function dedupeSelectInputOptionItem<T>(
   item: SelectInputOptionItem<T>,
   existingValues: Set<T>,
+  compareValues?: (a: T, b: T) => boolean,
 ): SelectInputOptionItem<T | undefined> {
-  if (!existingValues.has(item.value)) {
+  const isDuplicate = compareValues
+    ? Array.from(existingValues).some((existingValue) => compareValues(item.value, existingValue))
+    : existingValues.has(item.value);
+
+  if (!isDuplicate) {
     existingValues.add(item.value);
     return item;
   }
@@ -108,18 +113,20 @@ function dedupeSelectInputOptionItem<T>(
  */
 function dedupeSelectInputItems<T>(
   items: readonly SelectInputItem<T>[],
+  compareValues?: (a: T, b: T) => boolean,
 ): SelectInputItem<T | undefined>[] {
   const existingValues = new Set<T>();
+
   return items.map((item) => {
     switch (item.type) {
       case 'option': {
-        return dedupeSelectInputOptionItem(item, existingValues);
+        return dedupeSelectInputOptionItem(item, existingValues, compareValues);
       }
       case 'group': {
         return {
           ...item,
           options: item.options.map((option) =>
-            dedupeSelectInputOptionItem(option, existingValues),
+            dedupeSelectInputOptionItem(option, existingValues, compareValues),
           ),
         };
       }
@@ -481,6 +488,7 @@ export function SelectInput<T = string, M extends boolean = false>({
               id={id ? `${id}Search` : undefined}
               parentId={parentId}
               items={items}
+              compareValues={compareValues}
               renderValue={renderValue}
               renderFooter={renderFooter}
               filterable={filterable}
@@ -589,7 +597,14 @@ const SelectInputOptionsContainer = forwardRef(function SelectInputOptionsContai
 
 interface SelectInputOptionsProps<T = string> extends Pick<
   SelectInputProps<T>,
-  'items' | 'renderValue' | 'renderFooter' | 'filterable' | 'filterPlaceholder' | 'id' | 'parentId'
+  | 'items'
+  | 'renderValue'
+  | 'renderFooter'
+  | 'filterable'
+  | 'filterPlaceholder'
+  | 'id'
+  | 'parentId'
+  | 'compareValues'
 > {
   searchInputRef: React.MutableRefObject<HTMLInputElement | null>;
   listboxRef: React.MutableRefObject<HTMLDivElement | null>;
@@ -606,6 +621,7 @@ function SelectInputOptions<T = string>({
   id,
   parentId,
   items,
+  compareValues: compareValuesProp,
   renderValue = String,
   renderFooter,
   filterable = false,
@@ -651,9 +667,27 @@ function SelectInputOptions<T = string>({
     }
   }, [controllerRef, needle]);
 
+  const compareValues = useMemo(() => {
+    if (!compareValuesProp) {
+      return undefined;
+    }
+
+    if (typeof compareValuesProp === 'function') {
+      return (a: NonNullable<T>, b: NonNullable<T>) => compareValuesProp(a, b);
+    }
+
+    const key = compareValuesProp;
+    return (a: NonNullable<T>, b: NonNullable<T>) => {
+      if (typeof a === 'object' && a != null && typeof b === 'object' && b != null) {
+        return (a as Record<string, unknown>)[key] === (b as Record<string, unknown>)[key];
+      }
+      return a === b;
+    };
+  }, [compareValuesProp]);
+
   const filteredItems: readonly SelectInputItem<NonNullable<T> | undefined>[] =
     needle != null
-      ? filterSelectInputItems(dedupeSelectInputItems(items), (item) =>
+      ? filterSelectInputItems(dedupeSelectInputItems(items, compareValues), (item) =>
           selectInputOptionItemIncludesNeedle(item, needle),
         )
       : items;

package/src/prompt/InlinePrompt/InlinePrompt.spec.tsx

@@ -23,12 +23,12 @@ describe('InlinePrompt', () => {
   });
 
   [
-    { sentiment: Sentiment.NEGATIVE as const, acceptsMedia: false, statusIconLabel: 'Error:' },
-    { sentiment: Sentiment.WARNING as const, acceptsMedia: false, statusIconLabel: 'Warning:' },
-    { sentiment: Sentiment.NEUTRAL as const, acceptsMedia: false, statusIconLabel: 'Information:' },
-    { sentiment: Sentiment.POSITIVE as const, acceptsMedia: true, statusIconLabel: 'Success:' },
-    { sentiment: 'proposition' as const, acceptsMedia: true, statusIconLabel: '' },
-  ].forEach(({ sentiment, statusIconLabel, acceptsMedia }) => {
+    { sentiment: Sentiment.NEGATIVE as const, statusIconLabel: 'Error:' },
+    { sentiment: Sentiment.WARNING as const, statusIconLabel: 'Warning:' },
+    { sentiment: Sentiment.NEUTRAL as const, statusIconLabel: 'Information:' },
+    { sentiment: Sentiment.POSITIVE as const, statusIconLabel: 'Success:' },
+    { sentiment: 'proposition' as const, statusIconLabel: '' },
+  ].forEach(({ sentiment, statusIconLabel }) => {
     describe(sentiment, () => {
       it('should apply correct styles', () => {
         render(<InlinePrompt {...defaultProps} sentiment={sentiment} />);
@@ -77,18 +77,10 @@ describe('InlinePrompt', () => {
       });
 
       describe('custom media', () => {
-        if (acceptsMedia) {
-          it('should respect `media`', () => {
-            render(<InlinePrompt {...defaultProps} sentiment={sentiment} media={MEDIA} />);
-            expect(screen.getByTestId('custom-media')).toBeInTheDocument();
-          });
-        } else {
-          it('should ignore `media`', () => {
-            render(<InlinePrompt {...defaultProps} sentiment={sentiment} media={MEDIA} />);
-            expect(screen.getByLabelText(statusIconLabel)).toBeInTheDocument();
-            expect(screen.queryByTestId('custom-media')).not.toBeInTheDocument();
-          });
-        }
+        it('should respect `media`', () => {
+          render(<InlinePrompt {...defaultProps} sentiment={sentiment} media={MEDIA} />);
+          expect(screen.getByTestId('custom-media')).toBeInTheDocument();
+        });
       });
 
       describe('mediaLabel', () => {

package/src/prompt/InlinePrompt/InlinePrompt.story.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { action } from 'storybook/actions';
-import { Taxi, Travel } from '@transferwise/icons';
+import { Clock, Id, Taxi, Travel } from '@transferwise/icons';
 import { lorem5 } from '../../test-utils';
 import Link from '../../link';
 import { InlinePrompt, InlinePromptProps } from './InlinePrompt';
@@ -222,8 +222,8 @@ export const Muted: StoryObj<PreviewStoryArgs> = {
 };
 
 /**
- * While main sentiments (`warning`, `negative`, `neutral`) must retain their associated
- * `StatusIcons`, the `positive` and `proposition` ones allow for Icon overrides to bring it
+ * While all main sentiments (`warning`, `negative`, `positive` and`neutral`) are associated with a
+ * default `StatusIcon`s, we also allow for Icon overrides to bring the prompt's visual language
  * closer to the prompt's content. <br /><br />
  * It's also possible to override the default icon's accessible name announced by screen readers
  * via `mediaLabel` prop, which is especially useful for the `proposition` sentiment.
@@ -232,14 +232,17 @@ export const IconOverrides: StoryObj<PreviewStoryArgs> = {
   render: (args: PreviewStoryArgs) => {
     return (
       <>
-        <InlinePrompt {...args} media={<Travel />} sentiment="positive">
+        <InlinePrompt {...args} media={<Travel />} sentiment="positive" mediaLabel="Success: ">
           Your travel account is set up and ready to use.
         </InlinePrompt>
         <InlinePrompt {...args} media={<Taxi />} sentiment="proposition" mediaLabel="Taxi addon: ">
           Connect Wise with your taxi app to get exclusive discounts.
         </InlinePrompt>
-        <InlinePrompt {...args} media={<Taxi />} sentiment="negative">
-          This icon override is ignored.
+        <InlinePrompt {...args} media={<Clock />} sentiment="warning" mediaLabel="Processing: ">
+          The account verification is taking longer than usual.
+        </InlinePrompt>
+        <InlinePrompt {...args} media={<Id />} sentiment="negative" mediaLabel="Error: ">
+          The identity document you provided has expired.
         </InlinePrompt>
       </>
     );

package/src/prompt/InlinePrompt/InlinePrompt.tsx

@@ -25,12 +25,12 @@ export type InlinePromptProps = {
    */
   muted?: boolean;
   /**
-   * Icon override for `proposition` and `positive` sentiments. Unsupported for remaining ones.
+   * Icon override for all sentiments. If the sentiment uses StatusIcon by default, it will be
+   * replaced by a plain icon.
    */
   media?: React.ReactNode;
   /**
    * Override for the sentiment's-derived, default, accessible name announced by the screen readers.
-   * To be used primarily for `proposition` sentiment.
    */
   mediaLabel?: string;
   /**
@@ -68,6 +68,7 @@ export const InlinePrompt = ({
     if (muted) {
       return <BackslashCircle size={16} data-testid="InlinePrompt_Muted" title={mediaLabel} />;
     }
+
     if (loading) {
       return (
         <ProcessIndicator
@@ -78,15 +79,11 @@ export const InlinePrompt = ({
       );
     }
 
-    if (sentiment === 'positive' && media) {
-      return media;
-    }
-
     if (sentiment === 'proposition') {
       return media || <GiftBox title={mediaLabel} />;
     }
 
-    return <StatusIcon size={16} sentiment={sentiment} iconLabel={mediaLabel} />;
+    return media || <StatusIcon size={16} sentiment={sentiment} iconLabel={mediaLabel} />;
   };
 
   return (