@transferwise/components 46.111.0 → 46.111.1

package/src/main.less

@@ -4,6 +4,7 @@
 @import "./actionOption/ActionOption.less";
 @import "./alert/Alert.less";
 @import "./avatar/Avatar.less";
+@import "./prompt/InlinePrompt/InlinePrompt.less";
 @import "./avatarView/AvatarView.less";
 @import "./avatarLayout/AvatarLayout.less";
 @import "./iconButton/IconButton.less";

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,9 +415,24 @@ describe('Money Input', () => {
         <MoneyInput {...initialProps} />
       </Field>,
     );
+
     expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Recipient gets/);
   });
 
+  it('focuses money input when `Field` label is clicked', async () => {
+    const label = 'Recipient gets';
+
+    render(
+      <Field label={label}>
+        <MoneyInput {...initialProps} />
+      </Field>,
+    );
+
+    const input = screen.getByRole('textbox');
+    await userEvent.click(screen.getByLabelText(label));
+    expect(input).toHaveFocus();
+  });
+
   describe('ids', () => {
     it('renders Select component with generated id when id is not provided', () => {
       customRender();

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

@@ -314,4 +314,36 @@ describe('PhoneNumberInput', () => {
     );
     expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Phone number/);
   });
+
+  it('focuses country code input when `Field` label is clicked', async () => {
+    const label = 'Phone number';
+
+    render(
+      <Field label={label}>
+        <PhoneNumberInput initialValue="+12345678" onChange={() => {}} />
+      </Field>,
+    );
+
+    await userEvent.click(screen.getByText(label, { selector: 'label:not(.sr-only)' })); // Have to use `getByText` due to the way `Field` handles group labelling
+    const countryCodeFilterInput = screen.getByRole('combobox');
+    expect(countryCodeFilterInput).toHaveFocus();
+  });
+
+  it('focuses number input when `Field` label is clicked and country code is disabled', async () => {
+    const label = 'Phone number';
+
+    render(
+      <Field label={label}>
+        <PhoneNumberInput
+          initialValue="+12345678"
+          selectProps={{ disabled: true }}
+          onChange={() => {}}
+        />
+      </Field>,
+    );
+
+    const phoneNumberInput = screen.getByRole('textbox');
+    await userEvent.click(screen.getByText(label, { selector: 'label:not(.sr-only)' })); // Have to use `getByText` due to the way `Field` handles group labelling
+    expect(phoneNumberInput).toHaveFocus();
+  });
 });

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',
@@ -225,8 +245,9 @@ const PhoneNumberInput = ({
         {formatMessage(messages.phoneNumberLabel)}
       </label>
       <div className="tw-telephone__number-input">
-        <div className={`input-group input-group-${size}`}>
+        <div className={`input-group input-group-${size} ${disabled ? 'disabled' : ''}`}>
           <Input
+            ref={phoneNumberInputRef}
             id={ids.phoneNumber.input}
             autoComplete="tel-national"
             name="phoneNumber"
@@ -243,7 +264,7 @@ const PhoneNumberInput = ({
           />
         </div>
       </div>
-    </div>
+    </fieldset>
   );
 };
 

package/src/{listItem/Prompt → prompt}/InlinePrompt/InlinePrompt.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { mockMatchMedia, render, screen } from '../../../test-utils';
+import { mockMatchMedia, render, screen } from '../../test-utils';
 import { InlinePrompt, InlinePromptProps } from './InlinePrompt';
-import { Sentiment } from '../../../common';
+import { Sentiment } from '../../common';
 
 mockMatchMedia();
 

package/src/{listItem/Prompt → prompt}/InlinePrompt/InlinePrompt.tsx

@@ -1,9 +1,9 @@
-import { Sentiment } from '../../../common';
+import { Sentiment } from '../../common';
 import { BackslashCircle } from '@transferwise/icons';
-import ProcessIndicator from '../../../processIndicator';
-import StatusIcon from '../../../statusIcon';
+import ProcessIndicator from '../../processIndicator';
+import StatusIcon from '../../statusIcon';
 import { clsx } from 'clsx';
-import Body from '../../../body';
+import Body from '../../body';
 
 export type InlinePromptProps = {
   sentiment?: `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`;

package/src/prompt/index.ts

@@ -0,0 +1,6 @@
+// Prompt
+// ..
+
+// InlinePrompt
+export type { InlinePromptProps } from './InlinePrompt';
+export { InlinePrompt } from './InlinePrompt';

package/build/listItem/Prompt/InlinePrompt/InlinePrompt.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"InlinePrompt.js","sources":["../../../../src/listItem/Prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../../common';\nimport { BackslashCircle } from '@transferwise/icons';\nimport ProcessIndicator from '../../../processIndicator';\nimport StatusIcon from '../../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../../body';\n\nexport type InlinePromptProps = {\n  sentiment?: `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`;\n  loading?: boolean;\n  /**\n   * Use for short-lived inline prompts to avoid swap of the icon (which is bad UX for short-lived prompts, e.g. when submit form)\n   */\n  muted?: boolean;\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  children: React.ReactNode;\n};\n\nexport const InlinePrompt = ({\n  sentiment = Sentiment.POSITIVE,\n  muted = false,\n  loading = false,\n  className,\n  children,\n  ...rest\n}: InlinePromptProps) => {\n  const renderMedia = () => {\n    if (muted) {\n      return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" />;\n    }\n    if (loading) {\n      return <ProcessIndicator data-testid=\"InlinePrompt_ProcessIndicator\" size=\"xxs\" />;\n    }\n    return <StatusIcon size={16} sentiment={sentiment} />;\n  };\n\n  return (\n    <div\n      className={clsx(\n        'wds-inline-prompt',\n        `wds-inline-prompt--${sentiment}`,\n        {\n          'wds-inline-prompt--muted': muted,\n          'wds-inline-prompt--loading': loading,\n        },\n        className,\n      )}\n      {...rest}\n    >\n      <div className=\"wds-inline-prompt__media-wrapper\">{renderMedia()}</div>\n      <Body>{children}</Body>\n    </div>\n  );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","rest","renderMedia","_jsx","BackslashCircle","size","ProcessIndicator","StatusIcon","_jsxs","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBO,MAAMA,YAAY,GAAGA,CAAC;aAC3BC,WAAS,GAAGC,mBAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;EACR,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIL,KAAK,EAAE;MACT,oBAAOM,cAAA,CAACC,qBAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAA,EAAY;AAAoB,QAAG;AACvE,IAAA;AACA,IAAA,IAAIP,OAAO,EAAE;MACX,oBAAOK,cAAA,CAACG,wBAAgB,EAAA;AAAC,QAAA,aAAA,EAAY,+BAA+B;AAACD,QAAAA,IAAI,EAAC;AAAK,OAAA,CAAG;AACpF,IAAA;IACA,oBAAOF,cAAA,CAACI,kBAAU,EAAA;AAACF,MAAAA,IAAI,EAAE,EAAG;AAACX,MAAAA,SAAS,EAAEA;AAAU,MAAG;EACvD,CAAC;AAED,EAAA,oBACEc,eAAA,CAAA,KAAA,EAAA;IACET,SAAS,EAAEU,SAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBf,WAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEE,IAAI;AAAAD,IAAAA,QAAA,gBAERG,cAAA,CAAA,KAAA,EAAA;AAAKJ,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEE,WAAW;AAAE,KAAM,CACtE,eAAAC,cAAA,CAACO,YAAI,EAAA;AAAAV,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAK,CAAC;AAEV;;;;"}

package/build/listItem/Prompt/InlinePrompt/InlinePrompt.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"InlinePrompt.mjs","sources":["../../../../src/listItem/Prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../../common';\nimport { BackslashCircle } from '@transferwise/icons';\nimport ProcessIndicator from '../../../processIndicator';\nimport StatusIcon from '../../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../../body';\n\nexport type InlinePromptProps = {\n  sentiment?: `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`;\n  loading?: boolean;\n  /**\n   * Use for short-lived inline prompts to avoid swap of the icon (which is bad UX for short-lived prompts, e.g. when submit form)\n   */\n  muted?: boolean;\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  children: React.ReactNode;\n};\n\nexport const InlinePrompt = ({\n  sentiment = Sentiment.POSITIVE,\n  muted = false,\n  loading = false,\n  className,\n  children,\n  ...rest\n}: InlinePromptProps) => {\n  const renderMedia = () => {\n    if (muted) {\n      return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" />;\n    }\n    if (loading) {\n      return <ProcessIndicator data-testid=\"InlinePrompt_ProcessIndicator\" size=\"xxs\" />;\n    }\n    return <StatusIcon size={16} sentiment={sentiment} />;\n  };\n\n  return (\n    <div\n      className={clsx(\n        'wds-inline-prompt',\n        `wds-inline-prompt--${sentiment}`,\n        {\n          'wds-inline-prompt--muted': muted,\n          'wds-inline-prompt--loading': loading,\n        },\n        className,\n      )}\n      {...rest}\n    >\n      <div className=\"wds-inline-prompt__media-wrapper\">{renderMedia()}</div>\n      <Body>{children}</Body>\n    </div>\n  );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","rest","renderMedia","_jsx","BackslashCircle","size","ProcessIndicator","StatusIcon","_jsxs","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBO,MAAMA,YAAY,GAAGA,CAAC;EAC3BC,SAAS,GAAGC,SAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;EACR,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIL,KAAK,EAAE;MACT,oBAAOM,GAAA,CAACC,eAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAA,EAAY;AAAoB,QAAG;AACvE,IAAA;AACA,IAAA,IAAIP,OAAO,EAAE;MACX,oBAAOK,GAAA,CAACG,gBAAgB,EAAA;AAAC,QAAA,aAAA,EAAY,+BAA+B;AAACD,QAAAA,IAAI,EAAC;AAAK,OAAA,CAAG;AACpF,IAAA;IACA,oBAAOF,GAAA,CAACI,UAAU,EAAA;AAACF,MAAAA,IAAI,EAAE,EAAG;AAACX,MAAAA,SAAS,EAAEA;AAAU,MAAG;EACvD,CAAC;AAED,EAAA,oBACEc,IAAA,CAAA,KAAA,EAAA;IACET,SAAS,EAAEU,IAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBf,SAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEE,IAAI;AAAAD,IAAAA,QAAA,gBAERG,GAAA,CAAA,KAAA,EAAA;AAAKJ,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEE,WAAW;AAAE,KAAM,CACtE,eAAAC,GAAA,CAACO,IAAI,EAAA;AAAAV,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAK,CAAC;AAEV;;;;"}

package/build/types/listItem/Prompt/InlinePrompt/InlinePrompt.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"InlinePrompt.d.ts","sourceRoot":"","sources":["../../../../../src/listItem/Prompt/InlinePrompt/InlinePrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAO5C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,CAAC,EAAE,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC;IACjG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,6DAO1B,iBAAiB,gCA4BnB,CAAC"}

package/build/types/listItem/Prompt/InlinePrompt/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/listItem/Prompt/InlinePrompt/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}