@transferwise/components 46.111.1 → 46.112.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.111.1",
+  "version": "46.112.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -84,8 +84,8 @@
     "storybook-addon-tag-badges": "^2.0.2",
     "storybook-addon-test-codegen": "^2.0.1",
     "@transferwise/less-config": "3.1.2",
-    "@wise/components-theming": "1.7.0",
     "@transferwise/neptune-css": "14.25.0",
+    "@wise/components-theming": "1.7.0",
     "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {

package/src/avatarLayout/AvatarLayout.tsx

@@ -4,7 +4,7 @@ import { useDirection } from '../common/hooks';
 
 type SingleAvatarType = { asset?: AvatarViewProps['children'] } & Omit<
   AvatarViewProps,
-  'notification' | 'selected' | 'size' | 'badge' | 'children' | 'interactive'
+  'selected' | 'size' | 'badge' | 'children' | 'interactive'
 >;
 
 export type Props = {

package/src/avatarView/AvatarView.css

@@ -1,23 +1,29 @@
-.np-notification-dot {
-  --np-notification-dot-size: 14px;
+.np-dot {
+  --np-dot-size: 14px;
   position: relative;
   display: inline-block;
 }
-.np-notification-dot-mask {
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-notification-dot-size) / 2)) left calc(100% - (var(--np-notification-dot-size) / 2)), transparent 0, transparent calc(var(--np-notification-dot-size) / 2 + var(--np-notification-dot-offset)), black 0);
-          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-notification-dot-size) / 2)) left calc(100% - (var(--np-notification-dot-size) / 2)), transparent 0, transparent calc(var(--np-notification-dot-size) / 2 + var(--np-notification-dot-offset)), black 0);
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-notification-dot-size) / 2)) left calc(100% - calc(var(--np-notification-dot-size) / 2)), transparent 0, transparent calc(var(--np-notification-dot-size) / 2 + var(--np-notification-dot-offset)), black 0);
-          mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-notification-dot-size) / 2)) left calc(100% - calc(var(--np-notification-dot-size) / 2)), transparent 0, transparent calc(var(--np-notification-dot-size) / 2 + var(--np-notification-dot-offset)), black 0);
+.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-notification-dot-badge {
+.np-dot-badge {
   position: absolute;
-  width: var(--np-notification-dot-size);
-  height: var(--np-notification-dot-size);
-  background-color: var(--color-sentiment-negative);
+  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);
+}
 .np-avatar-view .np-avatar-view-content {
   color: #37517e;
   color: var(--color-content-primary);

package/src/avatarView/AvatarView.less

@@ -1,4 +1,4 @@
-@import './NotificationDot.less';
+@import './Dot.less';
 
 .np-avatar-view {
   .np-avatar-view-content {

package/src/avatarView/AvatarView.story.tsx

@@ -67,42 +67,6 @@ export const Selected: Story = {
   },
 };
 
-export const Notification: Story = {
-  render: () => (
-    <div
-      style={{
-        gap: '1em',
-        display: 'grid',
-        justifyContent: 'space-between',
-        gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
-      }}
-    >
-      {sizes.map((size) => (
-        <Body type="body-large-bold">{size}</Body>
-      ))}
-      {sizes.map((size) => (
-        <AvatarView key={size} size={size} notification>
-          <Freeze />
-        </AvatarView>
-      ))}
-      {sizes.map((size) => (
-        <AvatarView key={size} size={size} notification interactive>
-          <Freeze />
-        </AvatarView>
-      ))}
-      {sizes.map((size) => (
-        <AvatarView
-          key={size}
-          size={size}
-          imgSrc="../avatar-rectangle-fox.webp"
-          notification
-          interactive
-        />
-      ))}
-    </div>
-  ),
-};
-
 export const Badge: Story = {
   render: () => {
     const currencies = ['USD', 'EUR', 'GBP', 'AUD', 'CAD', 'JPY', 'CNY'];
@@ -219,6 +183,7 @@ export const Badge: Story = {
             badge={{ icon: <Convert /> }}
           />
         ))}
+
         {sizes.map((size) => (
           <AvatarView
             key={size}
@@ -241,11 +206,102 @@ export const Badge: Story = {
             }}
           />
         ))}
+
+        {sizes.map((size) => (
+          <AvatarView
+            key={size}
+            size={size}
+            imgSrc="../avatar-square-dude.webp"
+            badge={{ type: 'notification' }}
+          />
+        ))}
+
+        {sizes.map((size) => (
+          <AvatarView
+            key={size}
+            size={size}
+            imgSrc="../avatar-square-dude.webp"
+            badge={{ type: 'online' }}
+          />
+        ))}
       </div>
     );
   },
 };
 
+export const Notification: Story = {
+  render: () => (
+    <div
+      style={{
+        gap: '1em',
+        display: 'grid',
+        justifyContent: 'space-between',
+        gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
+      }}
+    >
+      {sizes.map((size) => (
+        <Body type="body-large-bold">{size}</Body>
+      ))}
+      {sizes.map((size) => (
+        <AvatarView key={size} size={size} badge={{ type: 'notification' }}>
+          <Freeze />
+        </AvatarView>
+      ))}
+      {sizes.map((size) => (
+        <AvatarView key={size} size={size} badge={{ type: 'notification' }} interactive>
+          <Freeze />
+        </AvatarView>
+      ))}
+      {sizes.map((size) => (
+        <AvatarView
+          key={size}
+          size={size}
+          imgSrc="../avatar-rectangle-fox.webp"
+          badge={{ type: 'notification' }}
+          interactive
+        />
+      ))}
+    </div>
+  ),
+};
+
+export const Online: Story = {
+  tags: ['new'],
+  render: () => (
+    <div
+      style={{
+        gap: '1em',
+        display: 'grid',
+        justifyContent: 'space-between',
+        gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
+      }}
+    >
+      {sizes.map((size) => (
+        <Body type="body-large-bold">{size}</Body>
+      ))}
+      {sizes.map((size) => (
+        <AvatarView key={size} size={size} badge={{ type: 'online' }}>
+          <Freeze />
+        </AvatarView>
+      ))}
+      {sizes.map((size) => (
+        <AvatarView key={size} size={size} badge={{ type: 'online' }} interactive>
+          <Freeze />
+        </AvatarView>
+      ))}
+      {sizes.map((size) => (
+        <AvatarView
+          key={size}
+          size={size}
+          imgSrc="../avatar-rectangle-fox.webp"
+          badge={{ type: 'online' }}
+          interactive
+        />
+      ))}
+    </div>
+  ),
+};
+
 export const Images: Story = {
   render: () => {
     return (

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>