@transferwise/components 46.122.1 → 46.123.0

package/src/button/_stories/Button.forestGreen.tests.story.tsx

@@ -5,7 +5,7 @@ import { generateSurfaceVariant } from './helpers';
 const meta: Meta<typeof Button> = {
   component: Button,
   title: 'Actions/Button/Tests/theme: forest green',
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
 };
 export default meta;
 

package/src/button/_stories/Button.tests.story.tsx

@@ -8,7 +8,7 @@ import { allModes } from '../../../.storybook/modes';
 const meta: Meta<typeof Button> = {
   component: Button,
   title: 'Actions/Button/Tests',
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
 };
 export default meta;
 

package/src/circularButton/CircularButton.tests.story.tsx

@@ -6,6 +6,7 @@ import CircularButton from './CircularButton';
 export default {
   component: CircularButton,
   title: 'Actions/CircularButton/Tests',
+  tags: ['!manifest'],
 } satisfies Meta<typeof CircularButton>;
 
 type Story = StoryObj<typeof CircularButton>;

package/src/dateInput/DateInput.tests.story.tsx

@@ -11,6 +11,7 @@ import { allModes } from '../../.storybook/modes';
 const meta: Meta<typeof DateInput> = {
   component: DateInput,
   title: 'Forms/DateInput/Tests',
+  tags: ['!manifest'],
   args: {
     dayLabel: 'Day input',
     dayAutoComplete: 'bday-day',

package/src/dateLookup/DateLookup.tests.story.tsx

@@ -8,6 +8,7 @@ import DateLookup, { type DateLookupProps } from './DateLookup';
 export default {
   component: DateLookup,
   title: 'Forms/DateLookup/Tests',
+  tags: ['!manifest'],
 };
 
 const props: DateLookupProps = {

package/src/header/Header.tests.story.tsx

@@ -4,7 +4,7 @@ import { allModes } from '../../.storybook/modes';
 
 const meta: Meta<typeof Header> = {
   component: Header,
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
   title: 'Typography/Header/tests',
 };
 export default meta;

package/src/inputs/SelectInput.spec.tsx

@@ -386,6 +386,60 @@ describe('SelectInput', () => {
     expect(within(listbox).getByText('Item Two')).toBeInTheDocument();
   });
 
+  it('sorts filtered options using sortFilteredOptions prop', async () => {
+    interface Country {
+      code: string;
+      name: string;
+      keywords: string[];
+    }
+
+    const countries: Country[] = [
+      { code: 'AD', name: 'Andorra', keywords: ['united states dollar'] },
+      { code: 'DE', name: 'Germany', keywords: ['EUR'] },
+      { code: 'US', name: 'United States', keywords: ['United States dollar', 'USD'] },
+      { code: 'ZM', name: 'Zambia', keywords: ['USD', 'united states dollar'] },
+    ];
+
+    render(
+      <SelectInput<Country>
+        items={countries.map((country) => ({
+          type: 'option',
+          value: country,
+          filterMatchers: country.keywords,
+        }))}
+        renderValue={(country) => country.name}
+        filterable
+        sortFilteredOptions={(a, b, searchQuery) => {
+          const query = searchQuery.toLowerCase();
+          const nameA = a.value.name.toLowerCase();
+          const nameB = b.value.name.toLowerCase();
+
+          const aMatch = nameA.includes(query);
+          const bMatch = nameB.includes(query);
+
+          if (aMatch && !bMatch) return -1;
+          if (!aMatch && bMatch) return 1;
+
+          return nameA.localeCompare(nameB);
+        }}
+      />,
+    );
+
+    const trigger = screen.getByRole('combobox');
+    await userEvent.click(trigger);
+
+    const searchInput = screen.getByRole('combobox', { expanded: true });
+    await userEvent.type(searchInput, 'united');
+
+    const listbox = screen.getByRole('listbox');
+    const options = within(listbox).getAllByRole('option');
+
+    expect(options).toHaveLength(3);
+    expect(options[0]).toHaveTextContent('United States');
+    expect(options[1]).toHaveTextContent('Andorra');
+    expect(options[2]).toHaveTextContent('Zambia');
+  });
+
   describe('listbox label', () => {
     const fieldLabel = 'Fruits';
     const triggerLabel = 'Select fruit';

package/src/inputs/SelectInput.story.tsx

@@ -616,3 +616,71 @@ export const WithAutocomplete: Story<string> = {
     );
   },
 };
+
+interface CountryWithCurrency extends Country {
+  keywords: string[];
+}
+
+const countriesWithCurrency: CountryWithCurrency[] = [
+  { code: 'AD', name: 'Andorra', keywords: ['united states dollar'] },
+  { code: 'DE', name: 'Germany', keywords: ['EUR'] },
+  { code: 'US', name: 'United States', keywords: ['USD'] },
+  { code: 'ZM', name: 'Zambia', keywords: ['USD', 'united states dollar'] },
+];
+
+function countryWithCurrencyOption(country: CountryWithCurrency) {
+  return {
+    type: 'option',
+    value: country,
+    filterMatchers: [country.name, country.code, ...country.keywords],
+  } satisfies SelectInputItem<CountryWithCurrency>;
+}
+
+export const WithCustomSearchResultSorting: Story<CountryWithCurrency> = {
+  args: {
+    items: countriesWithCurrency.map(countryWithCurrencyOption),
+    compareValues: 'code',
+    renderValue: (country) => (
+      <SelectInputOptionContent
+        title={country.name}
+        icon={<Flag code={country.code} intrinsicSize={24} />}
+      />
+    ),
+    value: countriesWithCurrency[0],
+    filterable: true,
+    filterPlaceholder: 'Type a currency / country',
+    sortFilteredOptions: (a, b, searchQuery) => {
+      const normalizedQuery = searchQuery.toLowerCase();
+      const nameA = a.value.name.toLowerCase();
+      const nameB = b.value.name.toLowerCase();
+
+      // Prioritize countries where name contains the search query
+      const aNameMatch = nameA.includes(normalizedQuery);
+      const bNameMatch = nameB.includes(normalizedQuery);
+
+      if (aNameMatch && !bNameMatch) return -1;
+      if (!aNameMatch && bNameMatch) return 1;
+
+      // Then sort alphabetically
+      return nameA.localeCompare(nameB);
+    },
+    size: 'lg',
+  } satisfies Story<CountryWithCurrency>['args'],
+  decorators: [
+    (Story) => (
+      <div>
+        <p className="m-b-3 np-text-body-default" style={{ maxWidth: '600px' }}>
+          This example demonstrates custom sorting with the <code>sortFilteredOptions</code> prop.
+          <br />
+          <br />
+          Try searching for &quot;united&quot; - Without the custom sorter, it would just be the
+          provided options order.
+          <br />
+          With a customer sorter function in this story, the countries with &quot;United&quot; in
+          their name appear first, followed by countries that only match via keywords.
+        </p>
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/inputs/SelectInput.tsx

@@ -160,6 +160,38 @@ function filterSelectInputItems<T>(
   });
 }
 
+/**
+ * Flattens and sorts filtered options using the provided comparator.
+ * Extracts all options from groups, filters out undefined values (deduplicated items),
+ * sorts them, and returns as a flat list of option items.
+ */
+function sortSelectInputItems<T>(
+  items: readonly SelectInputItem<T | undefined>[],
+  compareFn: (
+    a: SelectInputOptionItem<NonNullable<T>>,
+    b: SelectInputOptionItem<NonNullable<T>>,
+    searchQuery: string,
+  ) => number,
+  searchQuery: string,
+): SelectInputItem<NonNullable<T>>[] {
+  const flattenedOption = items.flatMap((item) => {
+    if (item.type === 'option') {
+      return item.value !== undefined ? [item as SelectInputOptionItem<NonNullable<T>>] : [];
+    }
+
+    if (item.type === 'group') {
+      return item.options.filter(
+        (option): option is SelectInputOptionItem<NonNullable<T>> => option.value !== undefined,
+      );
+    }
+
+    return [];
+  });
+
+  // eslint-disable-next-line functional/immutable-data
+  return flattenedOption.sort((a, b) => compareFn(a, b, searchQuery));
+}
+
 export interface SelectInputProps<T = string, M extends boolean = false> {
   id?: string;
   /**
@@ -210,6 +242,11 @@ export interface SelectInputProps<T = string, M extends boolean = false> {
   }) => React.ReactNode;
   filterable?: boolean;
   filterPlaceholder?: string;
+  sortFilteredOptions?: (
+    a: SelectInputOptionItem<NonNullable<T>>,
+    b: SelectInputOptionItem<NonNullable<T>>,
+    searchQuery: string,
+  ) => number;
   disabled?: boolean;
   size?: 'sm' | 'md' | 'lg';
   className?: string;
@@ -304,6 +341,7 @@ export function SelectInput<T = string, M extends boolean = false>({
   renderTrigger = defaultRenderTrigger,
   filterable,
   filterPlaceholder,
+  sortFilteredOptions,
   disabled,
   size = 'md',
   className,
@@ -493,6 +531,7 @@ export function SelectInput<T = string, M extends boolean = false>({
               renderFooter={renderFooter}
               filterable={filterable}
               filterPlaceholder={filterPlaceholder}
+              sortFilteredOptions={sortFilteredOptions}
               searchInputRef={searchInputRef}
               listboxRef={listboxRef}
               filterQuery={deferredFilterQuery}
@@ -605,6 +644,7 @@ interface SelectInputOptionsProps<T = string> extends Pick<
   | 'id'
   | 'parentId'
   | 'compareValues'
+  | 'sortFilteredOptions'
 > {
   searchInputRef: React.MutableRefObject<HTMLInputElement | null>;
   listboxRef: React.MutableRefObject<HTMLDivElement | null>;
@@ -626,6 +666,7 @@ function SelectInputOptions<T = string>({
   renderFooter,
   filterable = false,
   filterPlaceholder,
+  sortFilteredOptions,
   searchInputRef,
   listboxRef,
   filterQuery,
@@ -685,12 +726,22 @@ function SelectInputOptions<T = string>({
     };
   }, [compareValuesProp]);
 
-  const filteredItems: readonly SelectInputItem<NonNullable<T> | undefined>[] =
-    needle != null
-      ? filterSelectInputItems(dedupeSelectInputItems(items, compareValues), (item) =>
-          selectInputOptionItemIncludesNeedle(item, needle),
-        )
-      : items;
+  const filteredItems: readonly SelectInputItem<NonNullable<T> | undefined>[] = useMemo(() => {
+    if (needle == null) {
+      return items;
+    }
+
+    const filtered = filterSelectInputItems(dedupeSelectInputItems(items, compareValues), (item) =>
+      selectInputOptionItemIncludesNeedle(item, needle),
+    );
+
+    if (sortFilteredOptions) {
+      return sortSelectInputItems(filtered, sortFilteredOptions, filterQuery);
+    }
+
+    return filtered;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [needle, items, compareValues]);
   const resultsEmpty = needle != null && filteredItems.length === 0;
 
   const virtualized = filteredItems.length > MAX_ITEMS_WITHOUT_VIRTUALIZATION;

package/src/legacylistItem/LegacyListItem.tests.story.tsx

@@ -6,7 +6,7 @@ import List from '../list';
 
 export default {
   component: LegacyListItem,
-  tags: ['!autodocs'],
+  tags: ['!autodocs', 'deprecated', '!manifest'],
   title: 'Content/LegacyListItem/tests',
 };
 

package/src/listItem/ListItem.spec.tsx

@@ -1526,10 +1526,9 @@ describe('ListItem', () => {
         );
         expect(screen.queryByText(prompt)).not.toBeInTheDocument();
         expect(screen.getByText(disabledPromptMessage)).toBeInTheDocument();
-        expect(screen.getByTestId('InlinePrompt_Muted').parentNode?.parentNode).toHaveAttribute(
-          'id',
-          expect.stringMatching(/_prompt$/),
-        );
+        expect(
+          screen.getByTestId('InlinePrompt_Muted').parentNode?.parentNode?.parentNode,
+        ).toHaveAttribute('id', expect.stringMatching(/_prompt$/));
       });
 
       it('should render muted prompt if disabled and disabledPromptMessage are set', () => {
@@ -1537,10 +1536,9 @@ describe('ListItem', () => {
           <ListItem title="Test Title" disabled disabledPromptMessage={disabledPromptMessage} />,
         );
         expect(screen.getByText(disabledPromptMessage)).toBeInTheDocument();
-        expect(screen.getByTestId('InlinePrompt_Muted').parentNode?.parentNode).toHaveAttribute(
-          'id',
-          expect.stringMatching(/_prompt$/),
-        );
+        expect(
+          screen.getByTestId('InlinePrompt_Muted').parentNode?.parentNode?.parentNode,
+        ).toHaveAttribute('id', expect.stringMatching(/_prompt$/));
       });
     });
   });

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

@@ -21,7 +21,7 @@ const waitForListItem = async (canvas: ReturnType<typeof within>, timeout = 3000
 export default {
   component: ListItem,
   title: 'Content/ListItem/tests/focus',
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },
     actions: { disable: true },

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

@@ -12,7 +12,7 @@ import { LISTITEM_CQ } from '../constants';
 
 export default {
   title: 'Content/ListItem/tests/layout',
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },
     actions: { disable: true },

package/src/listItem/_stories/variants/ListItem.brightGreen.test.story.tsx

@@ -6,7 +6,7 @@ import { allModes } from '../../../../.storybook/modes';
 export default {
   component: ListItem,
   title: 'Content/ListItem/tests/variants/theme: bright-green',
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },
     actions: { disable: true },

package/src/listItem/_stories/variants/ListItem.dark.test.story.tsx

@@ -6,7 +6,7 @@ import { allModes } from '../../../../.storybook/modes';
 export default {
   component: ListItem,
   title: 'Content/ListItem/tests/variants/theme: dark',
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },
     actions: { disable: true },

package/src/listItem/_stories/variants/ListItem.forestGreen.test.story.tsx

@@ -6,7 +6,7 @@ import { allModes } from '../../../../.storybook/modes';
 export default {
   component: ListItem,
   title: 'Content/ListItem/tests/variants/theme: forest-green',
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },
     actions: { disable: true },

package/src/listItem/_stories/variants/ListItem.medium.test.story.tsx

@@ -6,7 +6,7 @@ import { withSizedContainer } from '../helpers';
 export default {
   component: ListItem,
   title: 'Content/ListItem/tests/variants/cq: medium',
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },
     actions: { disable: true },

package/src/listItem/_stories/variants/ListItem.neutral.test.story.tsx

@@ -12,7 +12,7 @@ import {
 export default {
   component: ListItem,
   title: 'Content/ListItem/tests/variants/surface: neutral',
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },
     actions: { disable: true },

package/src/listItem/_stories/variants/ListItem.personal.test.story.tsx

@@ -11,7 +11,7 @@ import { VariantStory } from './helpers';
 export default {
   component: ListItem,
   title: 'Content/ListItem/tests/variants/theme: personal',
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },
     actions: { disable: true },

package/src/listItem/_stories/variants/ListItem.rtl.test.story.tsx

@@ -6,7 +6,7 @@ import { allModes } from '../../../../.storybook/modes';
 export default {
   component: ListItem,
   title: 'Content/ListItem/tests/variants/rtl',
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },
     actions: { disable: true },

package/src/listItem/_stories/variants/ListItem.small.test.story.tsx

@@ -6,7 +6,7 @@ import { withSizedContainer } from '../helpers';
 export default {
   component: ListItem,
   title: 'Content/ListItem/tests/variants/cq: small',
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },
     actions: { disable: true },

package/src/main.css

@@ -920,83 +920,6 @@
 .np-theme-personal .tw-avatar--outlined:not(.disabled):not(:disabled):hover {
   border-color: var(--color-interactive-primary-hover);
 }
-.wds-inline-prompt {
-  display: inline-flex;
-  text-align: left;
-  padding-top: calc(8px / 2);
-  padding-top: calc(var(--padding-x-small) / 2);
-  padding-bottom: calc(8px / 2);
-  padding-bottom: calc(var(--padding-x-small) / 2);
-  padding-left: calc(8px - 1px);
-  padding-left: calc(var(--padding-x-small) - 1px);
-  padding-right: 8px;
-  padding-right: var(--padding-x-small);
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-  word-break: break-word;
-  word-wrap: break-word;
-}
-.wds-inline-prompt:has(a),
-.wds-inline-prompt:has(button) {
-  position: relative;
-  z-index: 1;
-}
-.wds-inline-prompt:has(a):hover,
-.wds-inline-prompt:has(button):hover {
-  background-color: var(--color-sentiment-background-surface-hover);
-}
-.wds-inline-prompt:has(a):active,
-.wds-inline-prompt:has(button):active {
-  background-color: var(--color-sentiment-background-surface-active);
-}
-.wds-inline-prompt--full-width {
-  width: 100%;
-}
-.wds-inline-prompt--muted {
-  opacity: 0.93;
-  filter: grayscale(1);
-}
-.wds-inline-prompt a,
-.wds-inline-prompt button {
-  color: var(--color-sentiment-content-primary);
-  text-underline-offset: calc(4px / 2);
-  text-underline-offset: calc(var(--size-4) / 2);
-}
-.wds-inline-prompt a:hover,
-.wds-inline-prompt button:hover {
-  color: var(--color-sentiment-content-primary-hover);
-}
-.wds-inline-prompt a:active,
-.wds-inline-prompt button:active {
-  color: var(--color-sentiment-content-primary-active);
-}
-.wds-inline-prompt a:first-of-type:before,
-.wds-inline-prompt button:first-of-type:before {
-  content: "";
-  position: absolute;
-  inset: 0;
-}
-.wds-inline-prompt__media-wrapper {
-  padding-right: calc(12px / 2);
-  padding-right: calc(var(--size-12) / 2);
-  padding-top: calc(4px - 1px);
-  padding-top: calc(var(--size-4) - 1px);
-  padding-bottom: calc(4px - 1px);
-  padding-bottom: calc(var(--size-4) - 1px);
-}
-.wds-inline-prompt__media-wrapper .tw-icon-tags,
-.wds-inline-prompt__media-wrapper .tw-icon-confetti {
-  color: var(--color-sentiment-content-primary);
-}
-.wds-inline-prompt .wds-inline-prompt-process-indicator {
-  width: 16px;
-  width: var(--size-16);
-  height: 16px;
-  height: var(--size-16);
-}
-.wds-inline-prompt .wds-inline-prompt-process-indicator .process-circle {
-  stroke: currentColor;
-}
 .np-dot {
   --np-dot-size: 14px;
   position: relative;
@@ -5412,6 +5335,103 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-CardGroup .np-Card.np-Card--promoCard {
   max-width: 100%;
 }
+.wds-prompt {
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  display: flex;
+  word-wrap: break-word;
+  padding: 8px;
+  padding: var(--Prompt-padding, var(--padding-x-small));
+  text-align: left;
+  word-break: break-word;
+}
+.wds-prompt__content-wrapper {
+  display: grid;
+  grid-gap: 16px;
+  grid-gap: var(--Prompt-gap, var(--size-16));
+  gap: 16px;
+  gap: var(--Prompt-gap, var(--size-16));
+  grid-template-columns: auto 1fr;
+  width: 100%;
+}
+.wds-prompt__media-wrapper {
+  align-self: flex-start;
+  padding-top: calc(4px - 1px);
+  padding-top: calc(var(--size-4) - 1px);
+}
+.wds-prompt__media-wrapper .tw-icon-tags,
+.wds-prompt__media-wrapper .tw-icon-confetti {
+  color: var(--color-sentiment-content-primary);
+}
+.wds-prompt__actions-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  gap: var(--Prompt-actions-gap, var(--size-8));
+  grid-column-start: 2;
+}
+@media (max-width: 991px) {
+  .wds-prompt__actions-wrapper {
+    grid-column: span 2;
+    width: 100%;
+  }
+}
+.wds-inline-prompt {
+  --Prompt-gap: calc(var(--size-12) / 2);
+  --Prompt-padding: calc(var(--padding-x-small) / 2) var(--padding-x-small);
+  display: inline-flex;
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+}
+.wds-inline-prompt:has(a),
+.wds-inline-prompt:has(button) {
+  position: relative;
+  z-index: 1;
+}
+.wds-inline-prompt:has(a):hover,
+.wds-inline-prompt:has(button):hover {
+  background-color: var(--color-sentiment-background-surface-hover);
+}
+.wds-inline-prompt:has(a):active,
+.wds-inline-prompt:has(button):active {
+  background-color: var(--color-sentiment-background-surface-active);
+}
+.wds-inline-prompt--full-width {
+  width: 100%;
+}
+.wds-inline-prompt--muted {
+  opacity: 0.93;
+  filter: grayscale(1);
+}
+.wds-inline-prompt a,
+.wds-inline-prompt button {
+  color: var(--color-sentiment-content-primary);
+  text-underline-offset: calc(4px / 2);
+  text-underline-offset: calc(var(--size-4) / 2);
+}
+.wds-inline-prompt a:hover,
+.wds-inline-prompt button:hover {
+  color: var(--color-sentiment-content-primary-hover);
+}
+.wds-inline-prompt a:active,
+.wds-inline-prompt button:active {
+  color: var(--color-sentiment-content-primary-active);
+}
+.wds-inline-prompt a:first-of-type:before,
+.wds-inline-prompt button:first-of-type:before {
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+.wds-inline-prompt .wds-inline-prompt-process-indicator {
+  width: 16px;
+  width: var(--size-16);
+  height: 16px;
+  height: var(--size-16);
+}
+.wds-inline-prompt .wds-inline-prompt-process-indicator .process-circle {
+  stroke: currentColor;
+}
 .wds-radio-group .np-radio:last-child label {
   margin-bottom: 0;
 }

package/src/main.less

@@ -6,7 +6,6 @@
 @import "./actionOption/ActionOption.less";
 @import "./alert/Alert.less";
 @import "./avatar/Avatar.less";
-@import "./prompt/InlinePrompt/InlinePrompt.less";
 @import "./avatarView/AvatarView.less";
 @import "./avatarLayout/AvatarLayout.less";
 @import "./iconButton/IconButton.less";
@@ -61,6 +60,8 @@
 @import "./phoneNumberInput/PhoneNumberInput.less";
 @import "./popover/Popover.less";
 @import "./promoCard/PromoCard.less";
+@import "./prompt/PrimitivePrompt/PrimitivePrompt.less";
+@import "./prompt/InlinePrompt/InlinePrompt.less";
 @import "./radioGroup/RadioGroup.less";
 @import "./section/Section.less";
 @import "./slidingPanel/SlidingPanel.less";