@transferwise/components 46.111.1 → 46.112.1

package/src/avatarView/AvatarView.tsx

@@ -1,5 +1,5 @@
 import Badge, { BadgeAssets, BadgeProps, BadgeAssetsProps } from '../badge';
-import NotificationDot from './NotificationDot';
+import Dot, { DotProps } from './Dot';
 import Circle from '../common/circle';
 import Image from '../image';
 import { HTMLAttributes, PropsWithChildren, useState } from 'react';
@@ -26,7 +26,6 @@ export type Props = {
   profileName?: string | null;
   profileType?: ProfileTypeBusiness | ProfileTypePersonal;
   size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;
-  notification?: boolean;
   badge?: AvatarViewBadgeProps;
   interactive?: boolean;
   selected?: boolean;
@@ -40,7 +39,6 @@ function AvatarView({
   children = undefined,
   size = 48,
   selected,
-  notification,
   badge,
   interactive = false,
   className,
@@ -62,7 +60,7 @@ function AvatarView({
       )}
       {...restProps}
     >
-      <Badges avatar={{ size, notification, selected }} {...badge}>
+      <Badges avatar={{ size, selected }} {...badge}>
         <Circle
           size={size}
           fixedSize
@@ -115,7 +113,7 @@ const MAP_BADGE_POSITION = {
 
 type BadgesProps = AvatarViewBadgeProps &
   PropsWithChildren<{
-    avatar: Pick<Props, 'selected' | 'size' | 'notification'>;
+    avatar: Pick<Props, 'selected' | 'size'>;
   }>;
 
 /**
@@ -128,36 +126,43 @@ function Badges({
   asset: customBadge,
   ...badgeAssets
 }: BadgesProps) {
-  const { size = 48, selected, notification } = avatar;
+  const { size = 48, selected } = avatar;
   const anyBadge = Object.values({ customBadge, ...badgeAssets }).filter(Boolean).length > 0;
-  if ((anyBadge || selected) && size > 16) {
-    const badgeSize: BadgeAssetsProps['size'] = MAP_BADGE_ASSET_SIZE[size];
+
+  if ((!anyBadge && !selected) || size <= 16) {
+    return children;
+  }
+
+  if (badgeAssets.type === 'notification' || badgeAssets.type === 'online') {
     return (
-      <Badge
-        aria-label={ariaLabel}
-        size={badgeSize}
-        badge={
-          customBadge ? (
-            <Circle fixedSize size={badgeSize}>
-              {customBadge}
-            </Circle>
-          ) : (
-            <BadgeAssets {...(selected ? { status: 'positive' } : badgeAssets)} size={badgeSize} />
-          )
-        }
-        style={{
-          // @ts-expect-error CSS custom props allowed
-          '--badge-content-position': `${MAP_BADGE_POSITION[size] ?? 0}px`,
-        }}
-      >
+      <Dot avatarSize={size} variant={badgeAssets.type === 'online' ? 'online' : 'notification'}>
         {children}
-      </Badge>
+      </Dot>
     );
   }
-  if (notification) {
-    return <NotificationDot avatarSize={size}>{children}</NotificationDot>;
-  }
-  return children;
+
+  const badgeSize: BadgeAssetsProps['size'] = MAP_BADGE_ASSET_SIZE[size];
+  return (
+    <Badge
+      aria-label={ariaLabel}
+      size={badgeSize}
+      badge={
+        customBadge ? (
+          <Circle fixedSize size={badgeSize}>
+            {customBadge}
+          </Circle>
+        ) : (
+          <BadgeAssets {...(selected ? { status: 'positive' } : badgeAssets)} size={badgeSize} />
+        )
+      }
+      style={{
+        // @ts-expect-error CSS custom props allowed
+        '--badge-content-position': `${MAP_BADGE_POSITION[size] ?? 0}px`,
+      }}
+    >
+      {children}
+    </Badge>
+  );
 }
 
 function AvatarViewContent({

package/src/avatarView/Dot.css

@@ -0,0 +1,26 @@
+.np-dot {
+  --np-dot-size: 14px;
+  position: relative;
+  display: inline-block;
+}
+.np-dot-mask {
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
+          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
+          mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
+}
+.np-dot-badge {
+  position: absolute;
+  width: var(--np-dot-size);
+  height: var(--np-dot-size);
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+  right: 0;
+}
+.np-dot-badge-notification {
+  background-color: var(--color-sentiment-negative);
+}
+.np-dot-badge-online {
+  background-color: #00a2dd;
+  background-color: var(--color-interactive-accent);
+}

package/src/avatarView/Dot.less

@@ -0,0 +1,31 @@
+.np-dot {
+  --np-dot-size: 14px;
+  position: relative;
+  display: inline-block;
+
+  &-mask {
+    mask-image: radial-gradient(
+        circle at bottom calc(100% - calc(var(--np-dot-size) / 2))
+                  left calc(100% - calc(var(--np-dot-size) / 2)),
+        transparent 0,
+        transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)),
+        black 0
+    );
+  }
+
+  &-badge {
+    position: absolute;
+    width: var(--np-dot-size);
+    height: var(--np-dot-size);
+    border-radius: var(--radius-full);
+    right: 0;
+    
+    &-notification {
+      background-color: var(--color-sentiment-negative);
+    }
+
+    &-online {
+      background-color: var(--color-interactive-accent);
+    }
+  }
+}

package/src/avatarView/Dot.tsx

@@ -0,0 +1,42 @@
+import { HTMLAttributes } from 'react';
+import { Props as AvatarViewProps } from './AvatarView';
+import { clsx } from 'clsx';
+
+export type DotProps = Pick<HTMLAttributes<HTMLDivElement>, 'children'> & {
+  avatarSize?: AvatarViewProps['size'];
+  variant?: 'notification' | 'online';
+};
+
+/**
+ * Depending on avatar size, dot size and offset are different
+ */
+const MAP_STYLE_CONFIG = {
+  16: { size: 6, offset: 1 },
+  24: { size: 8, offset: 2 },
+  32: { size: 10, offset: 2 },
+  40: { size: 10, offset: 2 },
+  48: { size: 14, offset: 2 },
+  56: { size: 16, offset: 3 },
+  72: { size: 20, offset: 3 },
+};
+
+export default function Dot({ children, avatarSize = 48, variant = 'notification' }: DotProps) {
+  return (
+    <div
+      className="np-dot"
+      style={{
+        // @ts-expect-error CSS custom props allowed
+        '--np-dot-size': `${MAP_STYLE_CONFIG[avatarSize].size}px`,
+        '--np-dot-offset': `${MAP_STYLE_CONFIG[avatarSize].offset}px`,
+      }}
+    >
+      <div
+        className={clsx('np-dot-badge', {
+          'np-dot-badge-notification': variant === 'notification',
+          'np-dot-badge-online': variant === 'online',
+        })}
+      />
+      <div className="np-dot-mask">{children}</div>
+    </div>
+  );
+}

package/src/badge/BadgeAssets.tsx

@@ -9,7 +9,7 @@ export type Props = {
   flagCode?: string;
   imgSrc?: string;
   icon?: React.ReactNode;
-  type?: 'action' | 'reference';
+  type?: 'action' | 'reference' | 'notification' | 'online';
   size?: 16 | 24;
 };
 

package/src/inputs/SelectInput.story.tsx

@@ -516,3 +516,97 @@ export const WithinModal: Story<Currency> = {
     },
   ],
 };
+
+interface Country {
+  code: string;
+  name: string;
+}
+
+const countries: Country[] = [
+  { code: 'US', name: 'United States' },
+  { code: 'GB', name: 'United Kingdom' },
+  { code: 'CA', name: 'Canada' },
+  { code: 'AU', name: 'Australia' },
+  { code: 'DE', name: 'Germany' },
+  { code: 'FR', name: 'France' },
+  { code: 'JP', name: 'Japan' },
+  { code: 'BR', name: 'Brazil' },
+  { code: 'IN', name: 'India' },
+  { code: 'CN', name: 'China' },
+  { code: 'IT', name: 'Italy' },
+  { code: 'ES', name: 'Spain' },
+  { code: 'NL', name: 'Netherlands' },
+  { code: 'CH', name: 'Switzerland' },
+  { code: 'SE', name: 'Sweden' },
+];
+
+function countryOption(country: Country) {
+  return {
+    type: 'option',
+    value: country.code,
+    filterMatchers: [country.code, country.name],
+  } satisfies SelectInputItem;
+}
+
+export const WithAutocomplete: Story<string> = {
+  args: {
+    name: 'country',
+    autocomplete: 'country-name',
+    placeholder: 'Select your country',
+    items: countries.map(countryOption),
+    renderValue: (countryCode, withinTrigger) => {
+      const country = countries.find((c) => c.code === countryCode);
+      return (
+        <SelectInputOptionContent
+          title={withinTrigger ? countryCode : country?.name || countryCode}
+          note={withinTrigger ? undefined : countryCode}
+          icon={<Flag code={countryCode} intrinsicSize={24} />}
+        />
+      );
+    },
+    filterable: true,
+    filterPlaceholder: 'Type a country name',
+    size: 'lg',
+  },
+  render: function Render({ onChange, onClear, ...args }) {
+    const [selectedCountry, setSelectedCountry] = useState<string | undefined>(undefined);
+
+    return (
+      <div>
+        <form
+          method="post"
+          onSubmit={(e) => {
+            e.preventDefault();
+            console.log(
+              `Form submitted with country: ${selectedCountry}. This saves data for browser autocomplete!`,
+            );
+          }}
+        >
+          <div>
+            <label htmlFor="country-select" className="block text-sm font-medium mb-2">
+              Country Selection with Autocomplete:
+            </label>
+            <SelectInput
+              {...args}
+              id="country-select"
+              value={selectedCountry}
+              onChange={(country) => {
+                setSelectedCountry(country);
+                onChange?.(country);
+                console.log('Country selected via SelectInput:', country);
+              }}
+              onClear={() => {
+                setSelectedCountry(undefined);
+                onClear?.();
+              }}
+            />
+          </div>
+
+          <Button type="submit" v2 className="m-t-2" data-testid="submit-btn">
+            Submit Form
+          </Button>
+        </form>
+      </div>
+    );
+  },
+};

package/src/inputs/SelectInput.tsx

@@ -155,6 +155,25 @@ export interface SelectInputProps<T = string, M extends boolean = false> {
   multiple?: M;
   placeholder?: string;
   items: readonly SelectInputItem<NonNullable<T>>[];
+  /**
+   * Enables browser autocomplete integration through the search input.
+   * Accepts standard HTML autocomplete values (e.g., "country-name", "address-level1").
+   *
+   * Requires `filterable={true}` to enable the search input.
+   *
+   * @example
+   * <SelectInput
+   *   name="country"
+   *   autocomplete="country-name"
+   *   filterable={true}
+   *   items={[{
+   *     type: 'option',
+   *     value: 'GB',
+   *     filterMatchers: ['United Kingdom', 'UK']
+   *   }]}
+   * />
+   */
+  autocomplete?: string;
   defaultValue?: M extends true ? readonly T[] : T;
   value?: M extends true ? readonly T[] : T;
   compareValues?:
@@ -257,6 +276,7 @@ export function SelectInput<T = string, M extends boolean = false>({
   name,
   multiple,
   placeholder,
+  autocomplete,
   items,
   defaultValue,
   value: controlledValue,
@@ -457,7 +477,15 @@ export function SelectInput<T = string, M extends boolean = false>({
               searchInputRef={searchInputRef}
               listboxRef={listboxRef}
               filterQuery={deferredFilterQuery}
+              autocomplete={autocomplete}
+              name={name}
               onFilterChange={setFilterQuery}
+              onAutocompleteSelect={(matchedValue) => {
+                onChange?.(matchedValue as M extends true ? T[] : T);
+                if (!multiple) {
+                  setOpen(false);
+                }
+              }}
               {...getListBoxLabelProps()}
             />
           </OptionsOverlay>
@@ -565,6 +593,9 @@ interface SelectInputOptionsProps<T = string>
   onFilterChange: (query: string) => void;
   listBoxLabel?: string;
   listBoxLabelledBy?: string;
+  autocomplete?: string;
+  name?: string;
+  onAutocompleteSelect?: (value: T) => void;
 }
 
 function SelectInputOptions<T = string>({
@@ -581,6 +612,9 @@ function SelectInputOptions<T = string>({
   onFilterChange,
   listBoxLabel,
   listBoxLabelledBy,
+  autocomplete,
+  name,
+  onAutocompleteSelect,
 }: SelectInputOptionsProps<T>) {
   const intl = useIntl();
   const virtualiserHandlerRef = useRef<VirtualizerHandle>(null);
@@ -664,6 +698,35 @@ function SelectInputOptions<T = string>({
     );
   };
 
+  const findMatchingItem = (autocompleteValue: string): T | null => {
+    const flatOptions = items
+      .flatMap((item) =>
+        item.type === 'group' ? item.options : item.type === 'option' ? [item] : [],
+      )
+      .filter(
+        (item): item is SelectInputOptionItem<NonNullable<T>> =>
+          item.type === 'option' && item.value != null,
+      );
+
+    const exactMatch = flatOptions.find(
+      (option) =>
+        String(option.value) === autocompleteValue ||
+        option.filterMatchers?.some((matcher) => matcher === autocompleteValue),
+    );
+
+    if (exactMatch) {
+      return exactMatch.value;
+    }
+
+    const fuzzyMatch = flatOptions.find((option) =>
+      option.filterMatchers?.some((matcher) =>
+        matcher.toLowerCase().includes(autocompleteValue.toLowerCase()),
+      ),
+    );
+
+    return fuzzyMatch ? fuzzyMatch.value : null;
+  };
+
   return (
     <ListboxBase.Options
       as={SelectInputOptionsContainer}
@@ -684,6 +747,8 @@ function SelectInputOptions<T = string>({
           <SearchInput
             ref={searchInputRef}
             id={id}
+            name={name}
+            autoComplete={autocomplete}
             role="combobox"
             shape="rectangle"
             placeholder={filterPlaceholder}
@@ -703,8 +768,26 @@ function SelectInputOptions<T = string>({
             onChange={(event) => {
               // Free up resources and ensure not to go out of bounds when the
               // resulting item count is less than before
+              const inputValue = event.currentTarget.value;
+
+              // Free up resources and ensure not to go out of bounds
               setMountedIndexes([]);
-              onFilterChange(event.currentTarget.value);
+              onFilterChange(inputValue);
+            }}
+            onInput={(event) => {
+              const inputValue = event.currentTarget.value;
+              const inputElement = event.currentTarget;
+
+              if (autocomplete && onAutocompleteSelect && inputValue) {
+                setTimeout(() => {
+                  if (inputElement.value === inputValue && inputValue.length > 2) {
+                    const matchedValue = findMatchingItem(inputValue);
+                    if (matchedValue !== null) {
+                      onAutocompleteSelect(matchedValue);
+                    }
+                  }
+                }, 50);
+              }
             }}
           />
         </div>

package/src/listItem/AvatarView/ListItemAvatarView.story.tsx

@@ -47,6 +47,8 @@ const BADGES = {
       </div>
     ),
   },
+  'Notification badge': { type: 'notification' },
+  'Online badge': { type: 'online' },
 } as const;
 
 export default {
@@ -61,7 +63,6 @@ export default {
     size: 48,
     selected: false,
     badge: { type: 'action' },
-    notification: false,
     profileName: undefined,
     profileType: undefined,
     imgSrc: undefined,
@@ -88,20 +89,23 @@ export default {
         type: { summary: 'ProfileType' },
       },
     },
-    notification: {
-      control: 'boolean',
-      description: 'Shows notification dot',
-    },
-    selected: {
-      control: 'boolean',
-      description: 'Toggles selected state',
-    },
     badge: {
-      description: 'Badge configuration object',
+      control: 'select',
+      options: ['action', 'notification', 'online'],
+      description: 'Badge type',
+      mapping: {
+        action: { type: 'action' },
+        notification: { type: 'notification' },
+        online: { type: 'online' },
+      },
       table: {
         type: { summary: 'AvatarViewBadgeProps' },
       },
     },
+    selected: {
+      control: 'boolean',
+      description: 'Toggles selected state',
+    },
     children: {
       table: {
         type: { summary: 'ReactNode' },
@@ -243,8 +247,48 @@ export const Sizes: Story = {
 };
 
 /**
- * Similarly, AvatarView also support a notification dot, which also adjusts to the Avatar's size. <br />
- * **NB:** You cannot use notification and badge at the same time – badge will always take precedence over notification.
+ * AvatarView supports different types of badges for additional context and information. <br />
+ * Refer to the [design documentation](https://wise.design/components/avatar#:~:text=support%20the%20information.-,With%20badge,-Badges%20contain%20additional) for details.
+ */
+export const Badges: Story = {
+  args: {
+    imgSrc: '../avatar-square-dude.webp',
+  },
+  argTypes: hideControls([
+    'profileName',
+    'imgSrc',
+    'profileType',
+    'notification',
+    'dot',
+    'selected',
+  ]),
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: 'hidden',
+      },
+    },
+  },
+  render: (args) => {
+    return (
+      <List>
+        {Object.entries(BADGES).map(([title, badge]) => (
+          <ListItem
+            key={title}
+            title={title}
+            subtitle={lorem10}
+            media={<ListItem.AvatarView {...args} badge={badge} />}
+            control={CONTROLS.iconButton}
+          />
+        ))}
+      </List>
+    );
+  },
+};
+
+/**
+ * `notification` is a particular `type` of Badge that appears in the top right corner as a red dot. It also adjusts to the Avatar's size. <br />
+ * **NB:** You can only choose one badge at a time, so the notification badge cannot be combined with any other badge type.
  */
 export const Notification: Story = {
   parameters: {
@@ -263,6 +307,7 @@ export const Notification: Story = {
     'profileType',
     'size',
     'notification',
+    'dot',
     'selected',
   ]),
   render: (args) => {
@@ -274,7 +319,7 @@ export const Notification: Story = {
             title={`Size ${size}`}
             subtitle={lorem10}
             media={
-              <ListItem.AvatarView {...args} size={size} notification>
+              <ListItem.AvatarView {...args} size={size} badge={{ type: 'notification' }}>
                 <Taxi />
               </ListItem.AvatarView>
             }
@@ -287,14 +332,11 @@ export const Notification: Story = {
 };
 
 /**
- * AvatarView supports different type of badges for additional context and information. <br />
- * Refer to the [design documentation](https://wise.design/components/avatar#:~:text=support%20the%20information.-,With%20badge,-Badges%20contain%20additional) for details.
+ * Similarly, Badge also has an `online` `type` which is green and also adjusts to the Avatar's size. <br />
+ * **NB:** You can only choose one badge at a time, so the online badge cannot be combined with any other badge type.
  */
-export const Badges: Story = {
-  args: {
-    imgSrc: '../avatar-square-dude.webp',
-  },
-  argTypes: hideControls(['profileName', 'imgSrc', 'profileType', 'notification', 'selected']),
+export const Online: Story = {
+  tags: ['new'],
   parameters: {
     docs: {
       canvas: {
@@ -302,15 +344,30 @@ export const Badges: Story = {
       },
     },
   },
+  args: {
+    badge: undefined,
+  },
+  argTypes: hideControls([
+    'profileName',
+    'imgSrc',
+    'profileType',
+    'size',
+    'notification',
+    'selected',
+  ]),
   render: (args) => {
     return (
       <List>
-        {Object.entries(BADGES).map(([title, badge]) => (
+        {SIZES.map((size) => (
           <ListItem
-            key={title}
-            title={title}
+            key={size}
+            title={`Size ${size}`}
             subtitle={lorem10}
-            media={<ListItem.AvatarView {...args} badge={badge} />}
+            media={
+              <ListItem.AvatarView {...args} size={size} badge={{ type: 'online' }}>
+                <Taxi />
+              </ListItem.AvatarView>
+            }
             control={CONTROLS.iconButton}
           />
         ))}
@@ -323,7 +380,14 @@ export const Badges: Story = {
  * AvatarView supports selected state for interactive contexts.
  */
 export const Selected: Story = {
-  argTypes: hideControls(['profileName', 'imgSrc', 'profileType', 'notification', 'selected']),
+  argTypes: hideControls([
+    'profileName',
+    'imgSrc',
+    'profileType',
+    'notification',
+    'dot',
+    'selected',
+  ]),
   render: (args) => {
     return (
       <List>

package/src/listItem/useListItemControl.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect } from 'react';
+import { useContext, useLayoutEffect } from 'react';
 import { ListItemContext, type ListItemContextData } from './ListItemContext';
 import type { ListItemTypes, ListItemControlProps } from './ListItem';
 
@@ -9,7 +9,7 @@ export function useListItemControl(controlType: ListItemTypes, controlProps: Lis
     props: baseItemProps,
   } = useContext<ListItemContextData>(ListItemContext);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     setControlType(controlType);
     setControlProps(controlProps);
   }, [controlType, controlProps, setControlType, setControlProps]);

package/src/listItem/useListItemMedia.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect } from 'react';
+import { useContext, useLayoutEffect } from 'react';
 import {
   ListItemContext,
   type ListItemContextData,
@@ -8,7 +8,7 @@ import {
 export function useListItemMedia(size?: ListItemMediaSize) {
   const { setMediaSize, mediaSize } = useContext<ListItemContextData>(ListItemContext);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     setMediaSize(size);
   }, [size, setMediaSize]);