@transferwise/components 46.127.1 → 46.128.1

package/src/inputs/SelectInput.tsx

@@ -197,6 +197,52 @@ function sortSelectInputItems<T>(
   return flattenedOption.sort((a, b) => compareFn(a, b, searchQuery));
 }
 
+/**
+ * A prebuilt sort function for `sortFilteredOptions` that sorts options by relevance to the search query.
+ * Prioritizes: exact matches > starts with > contains > alphabetical.
+ *
+ * @param getLabel - Function to extract the label string from the option value. Defaults to using `title` property.
+ *
+ * @example
+ * ```tsx
+ * <SelectInput
+ *   filterable
+ *   sortFilteredOptions={sortByRelevance((value) => value.name)}
+ *   // ...
+ * />
+ * ```
+ */
+export function sortByRelevance<T>(
+  getLabel: (value: T) => string = (value) => (value as { title: string }).title,
+): (a: SelectInputOptionItem<T>, b: SelectInputOptionItem<T>, searchQuery: string) => number {
+  return (a, b, searchQuery) => {
+    const normalizedQuery = searchQuery.toLowerCase();
+    const labelA = getLabel(a.value).toLowerCase();
+    const labelB = getLabel(b.value).toLowerCase();
+
+    // Prioritize exact matches
+    const aExactMatch = labelA === normalizedQuery;
+    const bExactMatch = labelB === normalizedQuery;
+    if (aExactMatch && !bExactMatch) return -1;
+    if (!aExactMatch && bExactMatch) return 1;
+
+    // Then prioritize options where label starts with the search query
+    const aStartsWith = labelA.startsWith(normalizedQuery);
+    const bStartsWith = labelB.startsWith(normalizedQuery);
+    if (aStartsWith && !bStartsWith) return -1;
+    if (!aStartsWith && bStartsWith) return 1;
+
+    // Then prioritize options where label contains the search query
+    const aContains = labelA.includes(normalizedQuery);
+    const bContains = labelB.includes(normalizedQuery);
+    if (aContains && !bContains) return -1;
+    if (!aContains && bContains) return 1;
+
+    // Finally sort alphabetically
+    return labelA.localeCompare(labelB);
+  };
+}
+
 export interface SelectInputProps<T = string, M extends boolean = false> {
   id?: string;
   /**
@@ -558,6 +604,8 @@ export function SelectInput<T = string, M extends boolean = false>({
   );
 }
 
+SelectInput.sortByRelevance = sortByRelevance;
+
 const SelectInputTriggerButtonPropsContext = createContext<{
   ref?: React.ForwardedRef<HTMLButtonElement | null>;
   id?: string;
@@ -741,15 +789,35 @@ function SelectInputOptions<T = string>({
       return items;
     }
 
-    const filtered = filterSelectInputItems(dedupeSelectInputItems(items, compareValues), (item) =>
-      selectInputOptionItemIncludesNeedle(item, needle),
-    );
+    const dedupedItems = dedupeSelectInputItems(items, compareValues);
 
     if (sortFilteredOptions) {
+      // When sorting, filter out non-matching items completely to avoid ghost items
+      const filtered = dedupedItems.map((item) => {
+        if (item.type === 'option') {
+          return selectInputOptionItemIncludesNeedle(item, needle)
+            ? item
+            : { ...item, value: undefined };
+        }
+        if (item.type === 'group') {
+          return {
+            ...item,
+            options: item.options.map((option) =>
+              selectInputOptionItemIncludesNeedle(option, needle)
+                ? option
+                : { ...option, value: undefined },
+            ),
+          };
+        }
+        return item;
+      });
+
       return sortSelectInputItems(filtered, sortFilteredOptions, filterQuery);
     }
 
-    return filtered;
+    return filterSelectInputItems(dedupedItems, (item) =>
+      selectInputOptionItemIncludesNeedle(item, needle),
+    );
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [needle, items, compareValues]);
   const resultsEmpty = needle != null && filteredItems.length === 0;
@@ -760,17 +828,28 @@ function SelectInputOptions<T = string>({
   // 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);
+
   useEffect(() => {
-    // Ensure the 'End' key works as intended by keeping the last item mounted
-    setMountedIndexes((prevMountedIndexes) => {
-      const indexes = new Set(prevMountedIndexes);
-      indexes.add(filteredItems.length - 1);
-      return [...indexes]; // Sorting is redundant by nature here
-    });
-  }, [
-    needle, // Needed as `filteredItems.length` may be equal between two updates
-    filteredItems.length,
-  ]);
+    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) => {
+        const indexes = new Set(prevMountedIndexes);
+        indexes.add(filteredItems.length - 1);
+        return [...indexes]; // Sorting is redundant by nature here
+      });
+    }
+  }, [needle, filteredItems.length]);
 
   const listboxContainerRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
@@ -927,7 +1006,6 @@ function SelectInputOptions<T = string>({
           ) : (
             <Virtualizer
               ref={virtualiserHandlerRef}
-              key={needle}
               data={filteredItems}
               keepMounted={mountedIndexes}
               scrollRef={listboxRef} // `VList` doesn't expose this

package/src/listItem/Button/ListItemButton.tsx

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { useContext, forwardRef } from 'react';
 import { clsx } from 'clsx';
 import ButtonComp, { type ButtonAddonIcon, type NewButtonProps } from '../../button';
 import { useListItemControl } from '../useListItemControl';
@@ -22,35 +22,37 @@ export type ListItemButtonProps = Omit<
  * <br />
  * Please refer to the [Design documentation](https://wise.design/components/list-item---button) for details.
  */
-export const Button = ({
-  priority = 'secondary-neutral',
-  partiallyInteractive,
-  ...props
-}: ListItemButtonProps) => {
-  const { baseItemProps } = useListItemControl('button', { partiallyInteractive, ...props });
-  const { ids, describedByIds } = useContext(ListItemContext);
+export const Button = forwardRef<HTMLButtonElement, ListItemButtonProps>(
+  (
+    { priority = 'secondary-neutral', partiallyInteractive, ...props }: ListItemButtonProps,
+    ref,
+  ) => {
+    const { baseItemProps } = useListItemControl('button', { partiallyInteractive, ...props });
+    const { ids, describedByIds } = useContext(ListItemContext);
 
-  const commonProps = {
-    ...props,
-    className: clsx(
-      'wds-list-item-control',
-      !partiallyInteractive && props.href && 'wds-list-item-control_pseudo-element',
-    ),
-    id: ids.control,
-    priority,
-    v2: true,
-    size: 'sm',
-    disabled: baseItemProps.disabled,
-  };
+    const commonProps = {
+      ...props,
+      className: clsx(
+        'wds-list-item-control',
+        !partiallyInteractive && props.href && 'wds-list-item-control_pseudo-element',
+      ),
+      id: ids.control,
+      priority,
+      v2: true,
+      size: 'sm',
+      disabled: baseItemProps.disabled,
+    };
 
-  const buttonContentId = props.href || partiallyInteractive ? '' : `${ids.control}_content`;
+    const buttonContentId = props.href || partiallyInteractive ? '' : `${ids.control}_content`;
 
-  return (
-    <ButtonComp
-      aria-describedby={`${buttonContentId} ${describedByIds}`}
-      {...(commonProps as NewButtonProps)}
-    />
-  );
-};
+    return (
+      <ButtonComp
+        ref={ref}
+        aria-describedby={`${buttonContentId} ${describedByIds}`}
+        {...(commonProps as NewButtonProps)}
+      />
+    );
+  },
+);
 
 Button.displayName = 'ListItem.Button';

package/src/listItem/_stories/ListItem.story.tsx

@@ -252,7 +252,6 @@ const getPropsForPreview = (args: PreviewStoryArgs): [ListItemProps, Partial<Lis
 };
 
 export const Playground: StoryObj<PreviewStoryArgs> = {
-  tags: ['!autodocs'],
   render: (args: PreviewStoryArgs) => {
     const [props, previewProps] = getPropsForPreview(args);
 

package/src/main.css

@@ -5346,6 +5346,7 @@ html:not([dir="rtl"]) .np-navigation-option {
   padding: var(--Prompt-padding, var(--padding-x-small));
   text-align: left;
   word-break: break-word;
+  width: 100%;
 }
 .wds-prompt__content-wrapper {
   display: grid;
@@ -5405,8 +5406,9 @@ html:not([dir="rtl"]) .np-navigation-option {
 .wds-inline-prompt:has(button):active {
   background-color: var(--color-sentiment-background-surface-active);
 }
-.wds-inline-prompt--full-width {
-  width: 100%;
+.wds-inline-prompt--auto-width {
+  width: auto;
+  width: initial;
 }
 .wds-inline-prompt--muted {
   opacity: 0.93;
@@ -5442,13 +5444,16 @@ html:not([dir="rtl"]) .np-navigation-option {
   stroke: currentColor;
 }
 .wds-info-prompt {
+  --Prompt-border-radius: var(--radius-medium);
   --Prompt-gap: var(--size-8);
-  --Prompt-padding: 12px;
+  --Prompt-padding: var(--size-12);
 }
 .wds-info-prompt__content {
   display: flex;
   flex-direction: column;
   justify-content: center;
+  max-width: calc(48px * 10);
+  max-width: calc(var(--size-48) * 10);
 }
 .wds-info-prompt__content:has(.wds-info-prompt__title) {
   justify-content: flex-start;
@@ -5457,17 +5462,16 @@ html:not([dir="rtl"]) .np-navigation-option {
 .wds-info-prompt__title,
 .wds-info-prompt__description {
   display: block;
-  color: var(--color-sentiment-primary);
 }
 .wds-info-prompt__action {
+  align-self: flex-start;
   margin-top: var(--Prompt-gap);
 }
-.wds-info-prompt__media {
-  display: flex;
-}
 .wds-info-prompt__media svg {
   width: 24px;
+  width: var(--size-24);
   height: 24px;
+  height: var(--size-24);
 }
 .wds-info-prompt .wds-prompt__media-wrapper {
   padding: 0;
@@ -7484,3 +7488,7 @@ html:not([dir="rtl"]) .np-navigation-option {
     min-width: fit-content;
   }
 }
+.wds-action-prompt__content {
+  max-width: calc(48px * 10);
+  max-width: calc(var(--size-48) * 10);
+}

package/src/prompt/ActionPrompt/ActionPrompt.accessibility.docs.mdx

@@ -1,6 +1,6 @@
 import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';
 
-<Meta title="Prompts/ActionPrompt/Accessibility" />
+<Meta title="Prompts/ActionPrompt/Accessibility" tags={['new']} />
 
 # Accessibility
 
@@ -31,23 +31,7 @@ If you want to provide a custom label for screen readers, you can use the `aria-
 
 ## Media
 
-You can use the `aria-hidden` attribute on media assets to hide them from screen readers if they're not providing any additional information. This is useful when the media is purely decorative or when its content is already conveyed through other means (e.g., text).
-
-<Source
-  dark
-  code={`
-<ActionPrompt
-  media={{
-    'aria-hidden': true,
-    avatar: { asset: <People /> },
-  }}
-  title="Sync contacts for a faster experience"
-  ...
-/>
-`}
-/>
-
-You can also use `aria-label` on media assets to provide a custom label for screen readers.
+You can use `aria-label` on media assets to provide a custom label for screen readers.
 
 <Source
   dark

package/src/prompt/ActionPrompt/ActionPrompt.css

@@ -19,3 +19,7 @@
     min-width: fit-content;
   }
 }
+.wds-action-prompt__content {
+  max-width: calc(48px * 10);
+  max-width: calc(var(--size-48) * 10);
+}

package/src/prompt/ActionPrompt/ActionPrompt.less

@@ -20,4 +20,8 @@
       }
     }
   }
-}
+
+  &__content {
+    max-width: calc(var(--size-48) * 10);
+  }
+}