@transferwise/components 0.0.0-experimental-ff10c0d → 0.0.0-experimental-3ebadff

package/src/inputs/SelectInput.story.tsx

@@ -516,97 +516,3 @@ 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,7 +155,6 @@ export interface SelectInputProps<T = string, M extends boolean = false> {
   multiple?: M;
   placeholder?: string;
   items: readonly SelectInputItem<NonNullable<T>>[];
-  autocomplete?: string;
   defaultValue?: M extends true ? readonly T[] : T;
   value?: M extends true ? readonly T[] : T;
   compareValues?:
@@ -182,6 +181,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;
@@ -256,7 +257,6 @@ export function SelectInput<T = string, M extends boolean = false>({
   name,
   multiple,
   placeholder,
-  autocomplete,
   items,
   defaultValue,
   value: controlledValue,
@@ -270,6 +270,7 @@ export function SelectInput<T = string, M extends boolean = false>({
   size = 'md',
   className,
   UNSAFE_triggerButtonProps,
+  triggerRef: externalTriggerRef,
   onFilterChange = noop,
   onChange,
   onOpen,
@@ -308,7 +309,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;
@@ -376,7 +377,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,
@@ -419,7 +425,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,
@@ -449,15 +457,7 @@ 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,9 +565,6 @@ interface SelectInputOptionsProps<T = string>
   onFilterChange: (query: string) => void;
   listBoxLabel?: string;
   listBoxLabelledBy?: string;
-  autocomplete?: string;
-  name?: string;
-  onAutocompleteSelect?: (value: T | T[] | null) => void;
 }
 
 function SelectInputOptions<T = string>({
@@ -584,9 +581,6 @@ function SelectInputOptions<T = string>({
   onFilterChange,
   listBoxLabel,
   listBoxLabelledBy,
-  autocomplete,
-  name,
-  onAutocompleteSelect,
 }: SelectInputOptionsProps<T>) {
   const intl = useIntl();
   const virtualiserHandlerRef = useRef<VirtualizerHandle>(null);
@@ -670,35 +664,6 @@ function SelectInputOptions<T = string>({
     );
   };
 
-  const findMatchingItem = (autocompleteValue: string): T | 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}
@@ -719,8 +684,6 @@ function SelectInputOptions<T = string>({
           <SearchInput
             ref={searchInputRef}
             id={id}
-            name={name}
-            autoComplete={autocomplete}
             role="combobox"
             shape="rectangle"
             placeholder={filterPlaceholder}
@@ -740,26 +703,8 @@ 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(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);
-              }
+              onFilterChange(event.currentTarget.value);
             }}
           />
         </div>

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/moneyInput/MoneyInput.spec.tsx

@@ -406,7 +406,7 @@ describe('Money Input', () => {
       </>,
     );
 
-    expect(screen.getAllByLabelText('Prioritized label')[0]).toHaveClass('input-group');
+    expect(screen.getAllByLabelText('Prioritized label')[0]).toHaveClass('np-form-control');
   });
 
   it('supports `Field` for labeling', () => {
@@ -415,6 +415,7 @@ describe('Money Input', () => {
         <MoneyInput {...initialProps} />
       </Field>,
     );
+
     expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Recipient gets/);
   });
 

package/src/moneyInput/MoneyInput.tsx

@@ -313,10 +313,10 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
     const selectedCurrencyElementId = `${inputAttributes?.id ?? amountInputId}SelectedCurrency`;
 
     return (
-      <div
-        role="group"
-        {...inputAttributes}
-        aria-labelledby={ariaLabelledBy}
+      <fieldset
+        aria-invalid={inputAttributes?.['aria-invalid']}
+        aria-describedby={inputAttributes?.['aria-describedby']}
+        aria-labelledby={inputAttributes?.id ?? amountInputId}
         className={clsx(
           this.style('tw-money-input'),
           this.style('input-group'),
@@ -324,7 +324,8 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
         )}
       >
         <Input
-          id={amountInputId}
+          id={inputAttributes?.id ?? amountInputId}
+          aria-labelledby={ariaLabelledBy}
           value={this.state.formattedAmount}
           inputMode="decimal"
           disabled={disabled}
@@ -430,7 +431,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
             />
           </div>
         )}
-      </div>
+      </fieldset>
     );
   }
 }

package/src/phoneNumberInput/PhoneNumberInput.tsx

@@ -1,8 +1,8 @@
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo, useRef } from 'react';
 import { useIntl } from 'react-intl';
 
 import { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';
-import { useInputAttributes } from '../inputs/contexts';
+import { useFieldLabelRef, useInputAttributes } from '../inputs/contexts';
 import { SelectInput, SelectInputOptionContent, SelectInputProps } from '../inputs/SelectInput';
 import messages from './PhoneNumberInput.messages';
 import countries from './data/countries';
@@ -58,7 +58,10 @@ const PhoneNumberInput = ({
   selectProps = defaultSelectProps,
   disabledCountries = defaultDisabledCountries,
 }: PhoneNumberInputProps) => {
+  const countryCodeSelectRef = useRef<HTMLButtonElement>(null);
+  const phoneNumberInputRef = useRef<HTMLInputElement>(null);
   const inputAttributes = useInputAttributes({ nonLabelable: true });
+  const fieldLabelRef = useFieldLabelRef();
   const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];
 
   const { locale, formatMessage } = useIntl();
@@ -71,6 +74,7 @@ const PhoneNumberInput = ({
     return `${backup}-${random}`;
   };
 
+  // Link the first non-disabled input to the the Field label, if present
   const ids = {
     countryCode: {
       label: createId(id, 'country-code-label'),
@@ -162,18 +166,34 @@ const PhoneNumberInput = ({
     setBroadcastedValue(internalValue);
   }, [onChange, broadcastedValue, internalValue]);
 
+  useEffect(() => {
+    const labelRef = fieldLabelRef?.current;
+
+    if (labelRef) {
+      const handleLabelClick = () => {
+        if (!selectProps.disabled) {
+          countryCodeSelectRef.current?.click();
+        } else {
+          phoneNumberInputRef.current?.focus();
+        }
+      };
+
+      labelRef.addEventListener('click', handleLabelClick);
+
+      return () => {
+        labelRef?.removeEventListener('click', handleLabelClick);
+      };
+    }
+  }, [fieldLabelRef, selectProps.disabled]);
+
   return (
-    <div
-      role="group"
-      {...inputAttributes}
-      aria-labelledby={ariaLabelledBy}
-      className="tw-telephone"
-    >
-      <label className="sr-only" id={ids.countryCode.label}>
+    <fieldset {...inputAttributes} aria-labelledby={ariaLabelledBy} className="tw-telephone">
+      <label className="sr-only" id={ids.countryCode.label} htmlFor={ids.countryCode.select}>
         {formatMessage(messages.countryCodeLabel)}
       </label>
       <div className="tw-telephone__country-select">
         <SelectInput
+          triggerRef={countryCodeSelectRef}
           placeholder={formatMessage(messages.selectInputPlaceholder)}
           items={[...countriesByPrefix].map(([prefix, countries]) => ({
             type: 'option',
@@ -227,6 +247,7 @@ const PhoneNumberInput = ({
       <div className="tw-telephone__number-input">
         <div className={`input-group input-group-${size}`}>
           <Input
+            ref={phoneNumberInputRef}
             id={ids.phoneNumber.input}
             autoComplete="tel-national"
             name="phoneNumber"
@@ -243,7 +264,7 @@ const PhoneNumberInput = ({
           />
         </div>
       </div>
-    </div>
+    </fieldset>
   );
 };