@transferwise/components 0.0.0-experimental-28734fb → 0.0.0-experimental-25d8a30

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/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.tsx

@@ -181,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;
@@ -268,6 +270,7 @@ export function SelectInput<T = string, M extends boolean = false>({
   size = 'md',
   className,
   UNSAFE_triggerButtonProps,
+  triggerRef: externalTriggerRef,
   onFilterChange = noop,
   onChange,
   onOpen,
@@ -306,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;
@@ -374,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,
@@ -417,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,

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>
   );
 };