@transferwise/components 0.0.0-experimental-28734fb → 0.0.0-experimental-d6f0f91

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. package/build/dateInput/DateInput.js +33 -8
  2. package/build/dateInput/DateInput.js.map +1 -1
  3. package/build/dateInput/DateInput.mjs +35 -10
  4. package/build/dateInput/DateInput.mjs.map +1 -1
  5. package/build/dateLookup/DateLookup.js +4 -2
  6. package/build/dateLookup/DateLookup.js.map +1 -1
  7. package/build/dateLookup/DateLookup.mjs +4 -2
  8. package/build/dateLookup/DateLookup.mjs.map +1 -1
  9. package/build/dateLookup/dateTrigger/DateTrigger.js +2 -0
  10. package/build/dateLookup/dateTrigger/DateTrigger.js.map +1 -1
  11. package/build/dateLookup/dateTrigger/DateTrigger.mjs +2 -0
  12. package/build/dateLookup/dateTrigger/DateTrigger.mjs.map +1 -1
  13. package/build/field/Field.js +7 -2
  14. package/build/field/Field.js.map +1 -1
  15. package/build/field/Field.mjs +13 -8
  16. package/build/field/Field.mjs.map +1 -1
  17. package/build/inputs/InputGroup.js +1 -1
  18. package/build/inputs/InputGroup.js.map +1 -1
  19. package/build/inputs/InputGroup.mjs +2 -2
  20. package/build/inputs/InputGroup.mjs.map +1 -1
  21. package/build/inputs/SelectInput.js +9 -3
  22. package/build/inputs/SelectInput.js.map +1 -1
  23. package/build/inputs/SelectInput.mjs +9 -3
  24. package/build/inputs/SelectInput.mjs.map +1 -1
  25. package/build/inputs/contexts.js +8 -4
  26. package/build/inputs/contexts.js.map +1 -1
  27. package/build/inputs/contexts.mjs +7 -4
  28. package/build/inputs/contexts.mjs.map +1 -1
  29. package/build/label/Label.js +14 -8
  30. package/build/label/Label.js.map +1 -1
  31. package/build/label/Label.mjs +14 -8
  32. package/build/label/Label.mjs.map +1 -1
  33. package/build/moneyInput/MoneyInput.js +6 -5
  34. package/build/moneyInput/MoneyInput.js.map +1 -1
  35. package/build/moneyInput/MoneyInput.mjs +6 -5
  36. package/build/moneyInput/MoneyInput.mjs.map +1 -1
  37. package/build/phoneNumberInput/PhoneNumberInput.js +24 -2
  38. package/build/phoneNumberInput/PhoneNumberInput.js.map +1 -1
  39. package/build/phoneNumberInput/PhoneNumberInput.mjs +26 -4
  40. package/build/phoneNumberInput/PhoneNumberInput.mjs.map +1 -1
  41. package/build/types/dateInput/DateInput.d.ts +2 -2
  42. package/build/types/dateInput/DateInput.d.ts.map +1 -1
  43. package/build/types/dateLookup/DateLookup.d.ts.map +1 -1
  44. package/build/types/dateLookup/dateTrigger/DateTrigger.d.ts +1 -0
  45. package/build/types/dateLookup/dateTrigger/DateTrigger.d.ts.map +1 -1
  46. package/build/types/field/Field.d.ts.map +1 -1
  47. package/build/types/inputs/InputGroup.d.ts.map +1 -1
  48. package/build/types/inputs/SelectInput.d.ts +3 -1
  49. package/build/types/inputs/SelectInput.d.ts.map +1 -1
  50. package/build/types/inputs/contexts.d.ts +6 -1
  51. package/build/types/inputs/contexts.d.ts.map +1 -1
  52. package/build/types/label/Label.d.ts +5 -15
  53. package/build/types/label/Label.d.ts.map +1 -1
  54. package/build/types/moneyInput/MoneyInput.d.ts.map +1 -1
  55. package/build/types/phoneNumberInput/PhoneNumberInput.d.ts.map +1 -1
  56. package/package.json +3 -3
  57. package/src/dateInput/DateInput.tsx +43 -13
  58. package/src/dateLookup/DateLookup.tsx +5 -3
  59. package/src/dateLookup/dateTrigger/DateTrigger.tsx +3 -0
  60. package/src/field/Field.tsx +6 -5
  61. package/src/inputs/InputGroup.tsx +3 -4
  62. package/src/inputs/SelectInput.tsx +13 -3
  63. package/src/inputs/contexts.tsx +12 -3
  64. package/src/label/Label.tsx +26 -20
  65. package/src/moneyInput/MoneyInput.spec.tsx +2 -1
  66. package/src/moneyInput/MoneyInput.tsx +7 -6
  67. package/src/phoneNumberInput/PhoneNumberInput.tsx +31 -10
package/src/inputs/contexts.tsx CHANGED
@@ -1,7 +1,12 @@
1
1
  import { createContext, useContext } from 'react';
2
2
 
3
- const FieldLabelIdContext = createContext<string | undefined>(undefined);
4
- export const FieldLabelIdContextProvider = FieldLabelIdContext.Provider;
3
+ type FieldLabelContextType = {
4
+ id?: string;
5
+ ref?: React.RefObject<HTMLLabelElement>;
6
+ };
7
+
8
+ const FieldLabelContext = createContext<FieldLabelContextType | undefined>(undefined);
9
+ export const FieldLabelContextProvider = FieldLabelContext.Provider;
5
10
 
6
11
  const InputIdContext = createContext<string | undefined>(undefined);
7
12
  export const InputIdContextProvider = InputIdContext.Provider;
@@ -18,7 +23,7 @@ interface UseInputAttributesArgs {
18
23
  }
19
24
 
20
25
  export function useInputAttributes({ nonLabelable }: UseInputAttributesArgs = {}) {
21
- const labelId = useContext(FieldLabelIdContext);
26
+ const labelId = useContext(FieldLabelContext)?.id;
22
27
  return {
23
28
  id: useContext(InputIdContext),
24
29
  'aria-labelledby': nonLabelable ? labelId : undefined,
@@ -27,6 +32,10 @@ export function useInputAttributes({ nonLabelable }: UseInputAttributesArgs = {}
27
32
  } satisfies React.HTMLAttributes<HTMLElement>;
28
33
  }
29
34
 
35
+ export function useFieldLabelRef() {
36
+ return useContext(FieldLabelContext)?.ref;
37
+ }
38
+
30
39
  export interface WithInputAttributesProps {
31
40
  inputAttributes: ReturnType<typeof useInputAttributes>;
32
41
  }
package/src/label/Label.tsx CHANGED
@@ -3,7 +3,7 @@ import messages from './Label.messages';
3
3
  import { useIntl } from 'react-intl';
4
4
  import Body from '../body';
5
5
  import { CommonProps } from '../common';
6
- import { PropsWithChildren } from 'react';
6
+ import { forwardRef, PropsWithChildren } from 'react';
7
7
 
8
8
  export type LabelProps = {
9
9
  id?: string;
@@ -21,25 +21,29 @@ export type LabelProps = {
21
21
  * <Field label={..} description={..} required={..}>..</Field>
22
22
  * ```
23
23
  */
24
- const Label = ({ className, children, htmlFor, id }: LabelProps) => {
25
- return (
26
- <label
27
- id={id}
28
- htmlFor={htmlFor}
29
- className={clsx(
30
- 'np-label d-flex flex-column np-text-body-default-bold text-primary m-b-0',
31
- className,
32
- )}
33
- >
34
- {children}
35
- </label>
36
- );
37
- };
24
+ const Label = forwardRef<HTMLLabelElement, LabelProps>(
25
+ ({ className, children, htmlFor, id }: LabelProps, ref) => {
26
+ return (
27
+ <label
28
+ ref={ref}
29
+ id={id}
30
+ htmlFor={htmlFor}
31
+ className={clsx(
32
+ 'np-label d-flex flex-column np-text-body-default-bold text-primary m-b-0',
33
+ className,
34
+ )}
35
+ >
36
+ {children}
37
+ </label>
38
+ );
39
+ },
40
+ );
41
+
42
+ Label.displayName = 'Label';
38
43
 
39
44
  export type LabelOptionalProps = PropsWithChildren<CommonProps>;
40
45
 
41
- // eslint-disable-next-line functional/immutable-data
42
- Label.Optional = function Optional({ children, className }: LabelOptionalProps) {
46
+ const Optional = function Optional({ children, className }: LabelOptionalProps) {
43
47
  const { formatMessage } = useIntl();
44
48
  return (
45
49
  <div>
@@ -53,8 +57,7 @@ Label.Optional = function Optional({ children, className }: LabelOptionalProps)
53
57
 
54
58
  export type LabelDescriptionProps = PropsWithChildren<CommonProps> & { id?: string };
55
59
 
56
- // eslint-disable-next-line functional/immutable-data
57
- Label.Description = function Description({ id, children, className }: LabelDescriptionProps) {
60
+ const Description = function Description({ id, children, className }: LabelDescriptionProps) {
58
61
  return children ? (
59
62
  <Body id={id} className={clsx('text-secondary', className)}>
60
63
  {children}
@@ -62,4 +65,7 @@ Label.Description = function Description({ id, children, className }: LabelDescr
62
65
  ) : null;
63
66
  };
64
67
 
65
- export { Label };
68
+ // eslint-disable-next-line functional/immutable-data
69
+ const LabelNamespace = Object.assign(Label, { Optional, Description });
70
+
71
+ export { LabelNamespace as Label };
package/src/moneyInput/MoneyInput.spec.tsx CHANGED
@@ -406,7 +406,7 @@ describe('Money Input', () => {
406
406
  </>,
407
407
  );
408
408
 
409
- expect(screen.getAllByLabelText('Prioritized label')[0]).toHaveClass('input-group');
409
+ expect(screen.getAllByLabelText('Prioritized label')[0]).toHaveClass('np-form-control');
410
410
  });
411
411
 
412
412
  it('supports `Field` for labeling', () => {
@@ -415,6 +415,7 @@ describe('Money Input', () => {
415
415
  <MoneyInput {...initialProps} />
416
416
  </Field>,
417
417
  );
418
+
418
419
  expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Recipient gets/);
419
420
  });
420
421
 
package/src/moneyInput/MoneyInput.tsx CHANGED
@@ -313,10 +313,10 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
313
313
  const selectedCurrencyElementId = `${inputAttributes?.id ?? amountInputId}SelectedCurrency`;
314
314
 
315
315
  return (
316
- <div
317
- role="group"
318
- {...inputAttributes}
319
- aria-labelledby={ariaLabelledBy}
316
+ <fieldset
317
+ aria-invalid={inputAttributes?.['aria-invalid']}
318
+ aria-describedby={inputAttributes?.['aria-describedby']}
319
+ aria-labelledby={inputAttributes?.id ?? amountInputId}
320
320
  className={clsx(
321
321
  this.style('tw-money-input'),
322
322
  this.style('input-group'),
@@ -324,7 +324,8 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
324
324
  )}
325
325
  >
326
326
  <Input
327
- id={amountInputId}
327
+ id={inputAttributes?.id ?? amountInputId}
328
+ aria-labelledby={ariaLabelledBy}
328
329
  value={this.state.formattedAmount}
329
330
  inputMode="decimal"
330
331
  disabled={disabled}
@@ -430,7 +431,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
430
431
  />
431
432
  </div>
432
433
  )}
433
- </div>
434
+ </fieldset>
434
435
  );
435
436
  }
436
437
  }
package/src/phoneNumberInput/PhoneNumberInput.tsx CHANGED
@@ -1,8 +1,8 @@
1
- import { useState, useEffect, useMemo } from 'react';
1
+ import { useState, useEffect, useMemo, useRef } from 'react';
2
2
  import { useIntl } from 'react-intl';
3
3
 
4
4
  import { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';
5
- import { useInputAttributes } from '../inputs/contexts';
5
+ import { useFieldLabelRef, useInputAttributes } from '../inputs/contexts';
6
6
  import { SelectInput, SelectInputOptionContent, SelectInputProps } from '../inputs/SelectInput';
7
7
  import messages from './PhoneNumberInput.messages';
8
8
  import countries from './data/countries';
@@ -58,7 +58,10 @@ const PhoneNumberInput = ({
58
58
  selectProps = defaultSelectProps,
59
59
  disabledCountries = defaultDisabledCountries,
60
60
  }: PhoneNumberInputProps) => {
61
+ const countryCodeSelectRef = useRef<HTMLButtonElement>(null);
62
+ const phoneNumberInputRef = useRef<HTMLInputElement>(null);
61
63
  const inputAttributes = useInputAttributes({ nonLabelable: true });
64
+ const fieldLabelRef = useFieldLabelRef();
62
65
  const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];
63
66
 
64
67
  const { locale, formatMessage } = useIntl();
@@ -71,6 +74,7 @@ const PhoneNumberInput = ({
71
74
  return `${backup}-${random}`;
72
75
  };
73
76
 
77
+ // Link the first non-disabled input to the the Field label, if present
74
78
  const ids = {
75
79
  countryCode: {
76
80
  label: createId(id, 'country-code-label'),
@@ -162,18 +166,34 @@ const PhoneNumberInput = ({
162
166
  setBroadcastedValue(internalValue);
163
167
  }, [onChange, broadcastedValue, internalValue]);
164
168
 
169
+ useEffect(() => {
170
+ const labelRef = fieldLabelRef?.current;
171
+
172
+ if (labelRef) {
173
+ const handleLabelClick = () => {
174
+ if (!selectProps.disabled) {
175
+ countryCodeSelectRef.current?.click();
176
+ } else {
177
+ phoneNumberInputRef.current?.focus();
178
+ }
179
+ };
180
+
181
+ labelRef.addEventListener('click', handleLabelClick);
182
+
183
+ return () => {
184
+ labelRef?.removeEventListener('click', handleLabelClick);
185
+ };
186
+ }
187
+ }, [fieldLabelRef, selectProps.disabled]);
188
+
165
189
  return (
166
- <div
167
- role="group"
168
- {...inputAttributes}
169
- aria-labelledby={ariaLabelledBy}
170
- className="tw-telephone"
171
- >
172
- <label className="sr-only" id={ids.countryCode.label}>
190
+ <fieldset {...inputAttributes} aria-labelledby={ariaLabelledBy} className="tw-telephone">
191
+ <label className="sr-only" id={ids.countryCode.label} htmlFor={ids.countryCode.select}>
173
192
  {formatMessage(messages.countryCodeLabel)}
174
193
  </label>
175
194
  <div className="tw-telephone__country-select">
176
195
  <SelectInput
196
+ triggerRef={countryCodeSelectRef}
177
197
  placeholder={formatMessage(messages.selectInputPlaceholder)}
178
198
  items={[...countriesByPrefix].map(([prefix, countries]) => ({
179
199
  type: 'option',
@@ -227,6 +247,7 @@ const PhoneNumberInput = ({
227
247
  <div className="tw-telephone__number-input">
228
248
  <div className={`input-group input-group-${size}`}>
229
249
  <Input
250
+ ref={phoneNumberInputRef}
230
251
  id={ids.phoneNumber.input}
231
252
  autoComplete="tel-national"
232
253
  name="phoneNumber"
@@ -243,7 +264,7 @@ const PhoneNumberInput = ({
243
264
  />
244
265
  </div>
245
266
  </div>
246
- </div>
267
+ </fieldset>
247
268
  );
248
269
  };
249
270