@transferwise/components 46.111.0 → 46.112.0

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/common/panel/Panel.tsx

@@ -37,6 +37,7 @@ export type PanelProps = PropsWithChildren<{
   position?: PositionBottom | PositionLeft | PositionRight | PositionTop;
   anchorRef: MutableRefObject<Element | null>;
   anchorWidth?: boolean;
+  considerHeight?: boolean;
 }> &
   HTMLAttributes<HTMLDivElement>;
 
@@ -51,6 +52,7 @@ const Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(
     position = Position.BOTTOM,
     anchorRef,
     anchorWidth = false,
+    considerHeight = false,
     ...rest
   }: PanelProps,
   reference,

package/src/common/responsivePanel/ResponsivePanel.tsx

@@ -4,6 +4,7 @@ import { Position } from '..';
 import BottomSheet from '../bottomSheet';
 import { useLayout } from '../hooks';
 import Panel, { type PanelProps } from '../panel';
+import { isServerSide } from '../domHelpers';
 
 const ResponsivePanel = forwardRef<HTMLDivElement, PanelProps>(function ResponsivePanel(
   {
@@ -17,12 +18,16 @@ const ResponsivePanel = forwardRef<HTMLDivElement, PanelProps>(function Responsi
     position = Position.BOTTOM,
     anchorWidth = false,
     'aria-label': ariaLabel,
+    considerHeight = false,
     'aria-labelledby': ariaLabelledBy,
   }: PanelProps,
   reference,
 ) {
   const { isMobile } = useLayout();
-  if (isMobile) {
+  const SHORT_SCREEN = 500;
+  const isShortViewport = considerHeight && !isServerSide() && window.innerHeight < SHORT_SCREEN;
+
+  if (isMobile || isShortViewport) {
     return (
       <BottomSheet
         key="bottomSheet"
@@ -47,6 +52,7 @@ const ResponsivePanel = forwardRef<HTMLDivElement, PanelProps>(function Responsi
       anchorWidth={anchorWidth}
       anchorRef={anchorRef}
       aria-label={ariaLabel}
+      considerHeight={considerHeight}
       aria-labelledby={ariaLabelledBy}
       className={className}
       onClose={onClose}

package/src/dateInput/DateInput.spec.tsx

@@ -200,15 +200,26 @@ describe('Date Input Component', () => {
       );
       const externalButton = screen.getByRole('button', { name: 'external button' });
 
-      await userEvent.click(externalButton);
-      await userEvent.click(screen.getByRole('textbox', { name: /day/i }));
-      await userEvent.click(screen.getByRole('textbox', { name: /year/i }));
-      await userEvent.click(externalButton);
+      const day = screen.getByRole('textbox', { name: /day/i });
+      const month = screen.getByRole('combobox', { name: /month/i });
+      const year = screen.getByRole('textbox', { name: /year/i });
 
-      // 1 call is caused by the initial switch to the component,
-      // as reflected in `should propagate if focusing from or
-      // blurring to external component` test
+      await userEvent.click(externalButton);
+      await userEvent.click(day);
       expect(props.onFocus).toHaveBeenCalledTimes(1);
+      expect(props.onBlur).toHaveBeenCalledTimes(0);
+
+      await userEvent.click(month);
+      // selectinput really likes to refocus, apparently.
+      expect(props.onFocus).toHaveBeenCalledTimes(4);
+      expect(props.onBlur).toHaveBeenCalledTimes(0);
+
+      await userEvent.click(year);
+      expect(props.onFocus).toHaveBeenCalledTimes(5);
+      expect(props.onBlur).toHaveBeenCalledTimes(0);
+
+      await userEvent.click(externalButton);
+      expect(props.onFocus).toHaveBeenCalledTimes(5);
       expect(props.onBlur).toHaveBeenCalledTimes(1);
     });
   });
@@ -236,4 +247,31 @@ describe('Date Input Component', () => {
     );
     expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Date of birth/);
   });
+
+  it('focuses day input when `Field` label is clicked', async () => {
+    const label = 'Date of birth';
+
+    render(
+      <Field label={label}>
+        <DateInput onChange={() => {}} />
+      </Field>,
+    );
+
+    const dayInput = screen.getByRole('textbox', { name: /day/i });
+    await userEvent.click(screen.getByText(label, { selector: 'label' })); // Have to use `getByText` due to the way `Field` handles group labelling
+    expect(dayInput).toHaveFocus();
+  });
+
+  it('focuses month input when `Field` label is clicked and day is not present', async () => {
+    const label = 'Date of birth';
+
+    render(
+      <Field label={label}>
+        <DateInput mode="month-year" onChange={() => {}} />
+      </Field>,
+    );
+    const monthTrigger = screen.getByRole('combobox');
+    await userEvent.click(screen.getByText(label, { selector: 'label' })); // Have to use `getByText` due to the way `Field` handles group labelling
+    expect(monthTrigger).toHaveAttribute('aria-expanded', 'true');
+  });
 });

package/src/dateInput/DateInput.story.tsx

@@ -15,5 +15,7 @@ type Story = StoryObj<typeof meta>;
 export const Basic: Story = {
   args: {
     onChange: fn(),
+    onBlur: fn(),
+    onFocus: fn(),
   },
 } satisfies Story;

package/src/dateInput/DateInput.tsx

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 
 import Body from '../body';
@@ -19,7 +19,7 @@ import {
   Typography,
 } from '../common';
 import { MDY, YMD, getMonthNames, isDateValid, isMonthAndYearFormat } from '../common/dateUtils';
-import { useInputAttributes } from '../inputs/contexts';
+import { useFieldLabelRef, useInputAttributes } from '../inputs/contexts';
 import messages from './DateInput.messages';
 import { convertToLocalMidnight } from './utils';
 
@@ -31,8 +31,8 @@ export interface DateInputProps {
   size?: SizeSmall | SizeMedium | SizeLarge;
   value?: Date | string;
   onChange: (value: string | null) => void;
-  onFocus?: React.FocusEventHandler<HTMLDivElement>;
-  onBlur?: React.FocusEventHandler<HTMLDivElement>;
+  onFocus?: React.FocusEventHandler<HTMLDivElement | HTMLFieldSetElement>;
+  onBlur?: React.FocusEventHandler<HTMLDivElement | HTMLFieldSetElement>;
   dayLabel?: string;
   dayAutoComplete?: string;
   monthLabel?: string;
@@ -49,6 +49,11 @@ export interface DateInputProps {
   selectProps?: Partial<SelectInputProps<number | null>>;
 }
 
+/**
+ * To be passed to SelectInput's parentId prop for correct blur handling.
+ */
+const DATE_INPUT_PARENT_ID = 'dateInput';
+
 const DateInput = ({
   'aria-labelledby': ariaLabelledByProp,
   'aria-label': ariaLabel,
@@ -70,6 +75,10 @@ const DateInput = ({
   selectProps = {},
 }: DateInputProps) => {
   const inputAttributes = useInputAttributes({ nonLabelable: true });
+  const fieldLabelRef = useFieldLabelRef();
+  const dayRef = useRef<HTMLInputElement>(null);
+  const monthRef = useRef<HTMLButtonElement>(null);
+  const yearRef = useRef<HTMLInputElement>(null);
   const id = idProp ?? inputAttributes.id;
   const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];
 
@@ -116,6 +125,10 @@ const DateInput = ({
   );
   const monthNames = getMonthNames(locale, monthFormat);
 
+  const monthYearOnly = mode === DateMode.MONTH_YEAR;
+  const monthBeforeDay = MDY.has(locale);
+  const yearFirst = YMD.has(locale);
+
   dayLabel ||= formatMessage(messages.dayLabel);
   monthLabel ||= formatMessage(messages.monthLabel);
   yearLabel ||= formatMessage(messages.yearLabel);
@@ -125,6 +138,29 @@ const DateInput = ({
     year: placeholders?.year || formatMessage(messages.yearPlaceholder),
   };
 
+  useEffect(() => {
+    const labelRef = fieldLabelRef?.current;
+
+    if (labelRef) {
+      const handleLabelClick = () => {
+        // Not the best way to do this, but we're forced to recreate the native Label-click behavior
+        if (monthYearOnly || monthBeforeDay) {
+          monthRef.current?.click();
+        } else if (yearFirst) {
+          yearRef.current?.focus();
+        } else {
+          dayRef.current?.focus();
+        }
+      };
+
+      labelRef.addEventListener('click', handleLabelClick);
+
+      return () => {
+        labelRef?.removeEventListener('click', handleLabelClick);
+      };
+    }
+  }, [fieldLabelRef, id, monthBeforeDay, monthYearOnly, yearFirst]);
+
   const getDateAsString = (date: Date) => {
     if (!isDateValid(date)) {
       return '';
@@ -147,7 +183,9 @@ const DateInput = ({
       <label className="d-flex flex-column">
         <Body type={Typography.BODY_DEFAULT}>{monthLabel}</Body>
         <SelectInput
+          triggerRef={monthRef}
           id={`${id}:month`}
+          parentId={DATE_INPUT_PARENT_ID}
           name="month"
           disabled={disabled}
           placeholder={placeholders?.month}
@@ -239,8 +277,6 @@ const DateInput = ({
     }
   };
 
-  const monthYearOnly = mode === DateMode.MONTH_YEAR;
-
   const monthWidth = clsx({
     'col-sm-8 tw-date--month': monthYearOnly,
     'col-sm-5 tw-date--month': !monthYearOnly,
@@ -255,8 +291,9 @@ const DateInput = ({
       <div className="col-sm-3 tw-date--day">
         <label>
           <Body type={Typography.BODY_DEFAULT}>{dayLabel}</Body>
-          <div className={`input-group input-group-${size}`}>
+          <div className={`input-group input-group-${size} ${disabled ? 'disabled' : ''}`}>
             <Input
+              ref={dayRef}
               id={`${id}:day`}
               type="text"
               inputMode="numeric"
@@ -282,8 +319,9 @@ const DateInput = ({
       <div className="col-sm-4 tw-date--year">
         <label>
           <Body type={Typography.BODY_DEFAULT}>{yearLabel}</Body>
-          <div className={`input-group input-group-${size}`}>
+          <div className={`input-group input-group-${size} ${disabled ? 'disabled' : ''}`}>
             <Input
+              ref={yearRef}
               id={`${id}:year`}
               type="text"
               inputMode="numeric"
@@ -303,17 +341,16 @@ const DateInput = ({
       </div>
     );
   };
-  const monthBeforeDay = MDY.has(locale);
-  const yearFirst = YMD.has(locale);
 
   return (
-    <div
-      className="tw-date"
-      {...inputAttributes}
+    <fieldset
       id={id}
+      className="tw-date"
+      aria-describedby={inputAttributes['aria-describedby']}
+      aria-invalid={inputAttributes['aria-invalid']}
       aria-labelledby={ariaLabelledBy}
       aria-label={ariaLabel}
-      role="group" // Add role attribute to indicate container for interactive elements
+      data-wds-dateinput=""
       onFocus={(event) =>
         shouldPropagateOnFocus(event) ? onFocus?.(event) : event.stopPropagation()
       }
@@ -357,7 +394,7 @@ const DateInput = ({
           );
         })()}
       </div>
-    </div>
+    </fieldset>
   );
 };
 
@@ -366,27 +403,25 @@ function shouldPropagateOnFocus({
   target,
   relatedTarget,
 }: Pick<React.FocusEvent, 'target' | 'relatedTarget'>) {
-  const targetParent = target.closest('.tw-date');
-  const relatedParent = relatedTarget && relatedTarget.closest('.tw-date');
-  return targetParent !== relatedParent;
+  const blurredElementParent = target.closest('[data-wds-dateinput]');
+  const focusedElementParent = relatedTarget?.closest('[data-wds-dateinput]');
+  return blurredElementParent !== focusedElementParent;
 }
 
-// Should only propagate if the relatedTarget or the activeElement is not part of this DateInput component.
+// Should only propagate if the focus-gaining element is not part
+// of this DateInput component or the (dropdown) of the month select.
 function shouldPropagateOnBlur({
   target,
   relatedTarget,
 }: Pick<React.FocusEvent, 'target' | 'relatedTarget'>) {
-  const blurElementParent = target.closest('.tw-date');
-  // Even though FocusEvent.relatedTarget is supported by IE
-  // (https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent/relatedTarget)
-  // "IE11 sets document.activeElement to the next focused element before the blur event is called."
-  // (https://stackoverflow.com/a/49325196/986241)
-  // Therefore if the relatedTarget is null, we try the document.activeElement,
-  // which may contain the HTML element that is gaining focus
-  const focusElement =
-    relatedTarget || (document.activeElement !== target ? document.activeElement : null);
-  const focusElementParent = focusElement && focusElement.closest('.tw-date');
-  return blurElementParent !== focusElementParent;
+  const blurredElementParent = target.closest('[data-wds-dateinput]');
+  const focusedElementParent = relatedTarget?.closest('[data-wds-dateinput]');
+
+  return (
+    blurredElementParent !== focusedElementParent &&
+    !target?.closest(`[data-wds-parent="${DATE_INPUT_PARENT_ID}"]`) &&
+    !relatedTarget?.closest(`[data-wds-parent="${DATE_INPUT_PARENT_ID}"]`)
+  );
 }
 
 export default DateInput;

package/src/dateLookup/DateLookup.spec.tsx

@@ -42,6 +42,22 @@ describe('DateLookup', () => {
     expect(button).toHaveAttribute('aria-haspopup');
   });
 
+  it('focuses trigger and opens panel when `Field` label is clicked', async () => {
+    const label = 'Date of birth';
+
+    render(
+      <Field label={label}>
+        <DateLookup value={initialValue} onChange={() => {}} />
+      </Field>,
+    );
+
+    const button = screen.getByRole('button', { name: /^Date of birth/ });
+    await user.click(screen.getByLabelText(label));
+
+    expect(button).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByRole('button', { name: /next/iu })).toBeInTheDocument();
+  });
+
   it.each([' ', '{Enter}', '{ArrowDown}', '{ArrowUp}', '{ArrowRight}', '{ArrowLeft}'] as const)(
     "opens with '%s' and closes with '{Escape}'",
     async (text: string) => {

package/src/dateLookup/DateLookup.tsx

@@ -13,7 +13,7 @@ import {
 import { isWithinRange, moveToWithinRange, returnDateView } from '../common/dateUtils';
 import ResponsivePanel from '../common/responsivePanel';
 import { WithInputAttributesProps, withInputAttributes } from '../inputs/contexts';
-import { OverlayIdContext, OverlayIdProvider } from '../provider/overlay/OverlayIdProvider';
+import { OverlayIdProvider } from '../provider/overlay/OverlayIdProvider';
 import DateTrigger from './dateTrigger';
 import DayCalendar from './dayCalendar';
 import { getStartOfDay } from './getStartOfDay';
@@ -319,13 +319,15 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
     return (
       <div
         ref={this.element}
-        {...inputAttributes}
-        id={id}
+        aria-labelledby={id}
+        aria-invalid={inputAttributes?.['aria-invalid']}
+        aria-describedby={inputAttributes?.['aria-describedby']}
         className="input-group"
         onKeyDown={this.handleKeyDown}
       >
         <OverlayIdProvider open={open}>
           <DateTrigger
+            id={id}
             ariaLabelledBy={ariaLabelledBy}
             selectedDate={selectedDate}
             size={size}
@@ -341,6 +343,7 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
             open={open}
             className="tw-date-lookup-menu"
             position={Position.BOTTOM}
+            considerHeight
             onClose={this.discard}
           >
             {this.getCalendar()}

package/src/dateLookup/dateTrigger/DateTrigger.tsx

@@ -21,6 +21,7 @@ interface DateTriggerProps {
   disabled: boolean;
   onClick: () => void;
   onClear?: () => void;
+  id?: string;
 }
 
 const DateTrigger: React.FC<DateTriggerProps> = ({
@@ -28,6 +29,7 @@ const DateTrigger: React.FC<DateTriggerProps> = ({
   size = Size.MEDIUM,
   placeholder,
   label,
+  id,
   monthFormat,
   disabled,
   ariaLabelledBy,
@@ -42,6 +44,7 @@ const DateTrigger: React.FC<DateTriggerProps> = ({
   return (
     <>
       <button
+        id={id}
         aria-haspopup="dialog"
         aria-expanded={overlayId != null}
         aria-controls={overlayId}

package/src/field/Field.tsx

@@ -1,10 +1,10 @@
 import { clsx } from 'clsx';
-import { useId } from 'react';
+import { useId, useRef } from 'react';
 
 import { Sentiment } from '../common';
 import InlineAlert from '../inlineAlert/InlineAlert';
 import {
-  FieldLabelIdContextProvider,
+  FieldLabelContextProvider,
   InputDescribedByProvider,
   InputIdContextProvider,
   InputInvalidProvider,
@@ -46,6 +46,7 @@ export const Field = ({
   children,
   ...props
 }: FieldProps) => {
+  const labelRef = useRef<HTMLLabelElement>(null);
   const sentiment = props.error ? Sentiment.NEGATIVE : propType;
   const message = propMessage || props.error;
   const hasError = sentiment === Sentiment.NEGATIVE;
@@ -74,7 +75,7 @@ export const Field = ({
   }
 
   return (
-    <FieldLabelIdContextProvider value={labelId}>
+    <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>
       <InputIdContextProvider value={inputId}>
         <InputDescribedByProvider value={ariaDescribedbyByIds()}>
           <InputInvalidProvider value={hasError}>
@@ -92,7 +93,7 @@ export const Field = ({
             >
               {label != null ? (
                 <>
-                  <Label id={labelId} htmlFor={inputId}>
+                  <Label ref={labelRef} id={labelId} htmlFor={inputId}>
                     {required ? label : <Label.Optional>{label}</Label.Optional>}
                   </Label>
                   <Label.Description id={descriptionId}>{description}</Label.Description>
@@ -111,6 +112,6 @@ export const Field = ({
           </InputInvalidProvider>
         </InputDescribedByProvider>
       </InputIdContextProvider>
-    </FieldLabelIdContextProvider>
+    </FieldLabelContextProvider>
   );
 };

package/src/inputs/Input.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/InputGroup.tsx

@@ -4,11 +4,10 @@ import { createContext, useContext, useMemo, useRef, useState } from 'react';
 import { useResizeObserver } from '../common/hooks/useResizeObserver';
 import { cssValueWithUnit } from '../utilities/cssValueWithUnit';
 import {
-  FieldLabelIdContextProvider,
+  FieldLabelContextProvider,
   InputDescribedByProvider,
   InputIdContextProvider,
   InputInvalidProvider,
-  useInputAttributes,
 } from './contexts';
 
 type InputPaddingContextType = [
@@ -129,7 +128,7 @@ function InputAddon({
 
   return (
     /* Prevent nested controls from being labeled redundantly */
-    <FieldLabelIdContextProvider value={undefined}>
+    <FieldLabelContextProvider value={undefined}>
       <InputIdContextProvider value={undefined}>
         <InputDescribedByProvider value={undefined}>
           <InputInvalidProvider value={undefined}>
@@ -153,6 +152,6 @@ function InputAddon({
           </InputInvalidProvider>
         </InputDescribedByProvider>
       </InputIdContextProvider>
-    </FieldLabelIdContextProvider>
+    </FieldLabelContextProvider>
   );
 }

package/src/inputs/SelectInput.story.tsx

@@ -28,6 +28,13 @@ const meta = {
     onClose: fn() satisfies Mock,
     onOpen: fn() satisfies Mock,
   },
+  argTypes: {
+    parentId: {
+      table: {
+        category: 'WDS internal',
+      },
+    },
+  },
   parameters: { actions: { argTypesRegex: '' } },
 } satisfies Meta<typeof SelectInput>;
 export default meta;
@@ -509,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>
+    );
+  },
+};