@transferwise/components 46.111.0 → 46.112.0

package/src/inputs/SelectInput.tsx

@@ -146,10 +146,34 @@ function filterSelectInputItems<T>(
 
 export interface SelectInputProps<T = string, M extends boolean = false> {
   id?: string;
+  /**
+   * Sets the `data-wds-parent` attribute on the listbox container, which is needed for complex components like DateInput to correctly manage event handling.
+   * @internal
+   */
+  parentId?: string;
   name?: string;
   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?:
@@ -176,6 +200,8 @@ export interface SelectInputProps<T = string, M extends boolean = false> {
   UNSAFE_triggerButtonProps?: WithInputAttributesProps['inputAttributes'] & {
     'aria-label'?: string;
   };
+  /** Ref to the select trigger button element. */
+  triggerRef?: React.MutableRefObject<HTMLButtonElement | null>;
   onFilterChange?: (args: { query: string; queryNormalized: string | null }) => void;
   onChange?: (value: M extends true ? T[] : T) => void;
   onOpen?: () => void;
@@ -246,9 +272,11 @@ const noop = () => {};
 
 export function SelectInput<T = string, M extends boolean = false>({
   id: idProp,
+  parentId,
   name,
   multiple,
   placeholder,
+  autocomplete,
   items,
   defaultValue,
   value: controlledValue,
@@ -262,6 +290,7 @@ export function SelectInput<T = string, M extends boolean = false>({
   size = 'md',
   className,
   UNSAFE_triggerButtonProps,
+  triggerRef: externalTriggerRef,
   onFilterChange = noop,
   onChange,
   onOpen,
@@ -300,7 +329,7 @@ export function SelectInput<T = string, M extends boolean = false>({
     }
   });
 
-  const triggerRef = useRef<HTMLButtonElement | null>(null);
+  const internalTriggerRef = useRef<HTMLButtonElement | null>(null);
 
   const screenSm = useScreenSize(Breakpoint.SMALL);
   const OptionsOverlay = screenSm ? Popover : BottomSheet;
@@ -368,7 +397,12 @@ export function SelectInput<T = string, M extends boolean = false>({
                 value={{
                   ref: (node) => {
                     ref(node);
-                    triggerRef.current = node;
+                    if (externalTriggerRef) {
+                      // eslint-disable-next-line no-param-reassign
+                      externalTriggerRef.current = node;
+                    } else {
+                      internalTriggerRef.current = node;
+                    }
                   },
                   ...inputAttributes,
                   ...UNSAFE_triggerButtonProps,
@@ -411,7 +445,9 @@ export function SelectInput<T = string, M extends boolean = false>({
                     onClear != null
                       ? () => {
                           onClear();
-                          triggerRef.current?.focus({ preventScroll: true });
+                          (externalTriggerRef?.current ?? internalTriggerRef.current)?.focus({
+                            preventScroll: true,
+                          });
                         }
                       : undefined,
                   disabled: uiDisabled,
@@ -432,6 +468,7 @@ export function SelectInput<T = string, M extends boolean = false>({
           >
             <SelectInputOptions
               id={id ? `${id}Search` : undefined}
+              parentId={parentId}
               items={items}
               renderValue={renderValue}
               renderFooter={renderFooter}
@@ -440,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>
@@ -534,7 +579,13 @@ const SelectInputOptionsContainer = forwardRef(function SelectInputOptionsContai
 interface SelectInputOptionsProps<T = string>
   extends Pick<
     SelectInputProps<T>,
-    'items' | 'renderValue' | 'renderFooter' | 'filterable' | 'filterPlaceholder' | 'id'
+    | 'items'
+    | 'renderValue'
+    | 'renderFooter'
+    | 'filterable'
+    | 'filterPlaceholder'
+    | 'id'
+    | 'parentId'
   > {
   searchInputRef: React.MutableRefObject<HTMLInputElement | null>;
   listboxRef: React.MutableRefObject<HTMLDivElement | null>;
@@ -542,10 +593,14 @@ interface SelectInputOptionsProps<T = string>
   onFilterChange: (query: string) => void;
   listBoxLabel?: string;
   listBoxLabelledBy?: string;
+  autocomplete?: string;
+  name?: string;
+  onAutocompleteSelect?: (value: T) => void;
 }
 
 function SelectInputOptions<T = string>({
   id,
+  parentId,
   items,
   renderValue = String,
   renderFooter,
@@ -557,6 +612,9 @@ function SelectInputOptions<T = string>({
   onFilterChange,
   listBoxLabel,
   listBoxLabelledBy,
+  autocomplete,
+  name,
+  onAutocompleteSelect,
 }: SelectInputOptionsProps<T>) {
   const intl = useIntl();
   const virtualiserHandlerRef = useRef<VirtualizerHandle>(null);
@@ -640,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}
@@ -660,6 +747,8 @@ function SelectInputOptions<T = string>({
           <SearchInput
             ref={searchInputRef}
             id={id}
+            name={name}
+            autoComplete={autocomplete}
             role="combobox"
             shape="rectangle"
             placeholder={filterPlaceholder}
@@ -679,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>
@@ -696,6 +803,7 @@ function SelectInputOptions<T = string>({
             items.some((item) => item.type === 'group') &&
             'np-select-input-listbox-container--has-group',
         )}
+        data-wds-parent={parentId ?? undefined}
       >
         {resultsEmpty ? (
           <div id={statusId} className="np-select-input-options-status">

package/src/inputs/TextArea.css

@@ -18,6 +18,11 @@
   transition-duration: 300ms;
   /* TODO: Remove these overrides once `.form-control` isn’t used anymore */
 }
+.disabled .np-form-control,
+:disabled .np-form-control {
+  opacity: 1;
+  opacity: initial;
+}
 .np-form-control:focus-visible {
   outline: none;
 }

package/src/inputs/_common.less

@@ -15,6 +15,11 @@
   transition-timing-function: ease-in-out;
   transition-duration: 300ms;
 
+  .disabled &,
+  :disabled & {
+    opacity: unset;
+  }
+
   &:focus-visible {
     outline: none;
   }

package/src/inputs/contexts.tsx

@@ -1,7 +1,12 @@
 import { createContext, useContext } from 'react';
 
-const FieldLabelIdContext = createContext<string | undefined>(undefined);
-export const FieldLabelIdContextProvider = FieldLabelIdContext.Provider;
+type FieldLabelContextType = {
+  id?: string;
+  ref?: React.RefObject<HTMLLabelElement>;
+};
+
+const FieldLabelContext = createContext<FieldLabelContextType | undefined>(undefined);
+export const FieldLabelContextProvider = FieldLabelContext.Provider;
 
 const InputIdContext = createContext<string | undefined>(undefined);
 export const InputIdContextProvider = InputIdContext.Provider;
@@ -18,7 +23,7 @@ interface UseInputAttributesArgs {
 }
 
 export function useInputAttributes({ nonLabelable }: UseInputAttributesArgs = {}) {
-  const labelId = useContext(FieldLabelIdContext);
+  const labelId = useContext(FieldLabelContext)?.id;
   return {
     id: useContext(InputIdContext),
     'aria-labelledby': nonLabelable ? labelId : undefined,
@@ -27,6 +32,10 @@ export function useInputAttributes({ nonLabelable }: UseInputAttributesArgs = {}
   } satisfies React.HTMLAttributes<HTMLElement>;
 }
 
+export function useFieldLabelRef() {
+  return useContext(FieldLabelContext)?.ref;
+}
+
 export interface WithInputAttributesProps {
   inputAttributes: ReturnType<typeof useInputAttributes>;
 }

package/src/label/Label.tsx

@@ -3,7 +3,7 @@ import messages from './Label.messages';
 import { useIntl } from 'react-intl';
 import Body from '../body';
 import { CommonProps } from '../common';
-import { PropsWithChildren } from 'react';
+import { forwardRef, PropsWithChildren } from 'react';
 
 export type LabelProps = {
   id?: string;
@@ -21,25 +21,29 @@ export type LabelProps = {
  * <Field label={..} description={..} required={..}>..</Field>
  * ```
  */
-const Label = ({ className, children, htmlFor, id }: LabelProps) => {
-  return (
-    <label
-      id={id}
-      htmlFor={htmlFor}
-      className={clsx(
-        'np-label d-flex flex-column np-text-body-default-bold text-primary m-b-0',
-        className,
-      )}
-    >
-      {children}
-    </label>
-  );
-};
+const Label = forwardRef<HTMLLabelElement, LabelProps>(
+  ({ className, children, htmlFor, id }: LabelProps, ref) => {
+    return (
+      <label
+        ref={ref}
+        id={id}
+        htmlFor={htmlFor}
+        className={clsx(
+          'np-label d-flex flex-column np-text-body-default-bold text-primary m-b-0',
+          className,
+        )}
+      >
+        {children}
+      </label>
+    );
+  },
+);
+
+Label.displayName = 'Label';
 
 export type LabelOptionalProps = PropsWithChildren<CommonProps>;
 
-// eslint-disable-next-line functional/immutable-data
-Label.Optional = function Optional({ children, className }: LabelOptionalProps) {
+const Optional = function Optional({ children, className }: LabelOptionalProps) {
   const { formatMessage } = useIntl();
   return (
     <div>
@@ -53,8 +57,7 @@ Label.Optional = function Optional({ children, className }: LabelOptionalProps)
 
 export type LabelDescriptionProps = PropsWithChildren<CommonProps> & { id?: string };
 
-// eslint-disable-next-line functional/immutable-data
-Label.Description = function Description({ id, children, className }: LabelDescriptionProps) {
+const Description = function Description({ id, children, className }: LabelDescriptionProps) {
   return children ? (
     <Body id={id} className={clsx('text-secondary', className)}>
       {children}
@@ -62,4 +65,7 @@ Label.Description = function Description({ id, children, className }: LabelDescr
   ) : null;
 };
 
-export { Label };
+// eslint-disable-next-line functional/immutable-data
+const LabelNamespace = Object.assign(Label, { Optional, Description });
+
+export { LabelNamespace as Label };

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>