@transferwise/components 0.0.0-experimental-11854c7 → 0.0.0-experimental-bf4cb26

package/build/types/dateInput/DateInput.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { SelectInputProps } from '..';
-import { DateMode, MonthFormat, SizeSmall, SizeMedium, SizeLarge } from '../common';
+import { DateMode, MonthFormat, SizeLarge, SizeMedium, SizeSmall } from '../common';
 export interface DateInputProps {
+    /** @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead. */
     'aria-label'?: string;
     'aria-labelledby'?: string;
     disabled?: boolean;
@@ -25,6 +26,6 @@ export interface DateInputProps {
     id?: string;
     selectProps?: Partial<SelectInputProps<number | null>>;
 }
-declare const DateInput: ({ "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, disabled, size, value, dayLabel, dayAutoComplete, monthLabel, yearLabel, yearAutoComplete, monthFormat, mode, onChange, onFocus, onBlur, placeholders, id, selectProps, }: DateInputProps) => import("react").JSX.Element;
+declare const DateInput: ({ "aria-labelledby": ariaLabelledByProp, "aria-label": ariaLabel, disabled, size, value, dayLabel, dayAutoComplete, monthLabel, yearLabel, yearAutoComplete, monthFormat, mode, onChange, onFocus, onBlur, placeholders, id: idProp, selectProps, }: DateInputProps) => import("react").JSX.Element;
 export default DateInput;
 //# sourceMappingURL=DateInput.d.ts.map

package/build/types/dateInput/DateInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/dateInput/DateInput.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAsB,gBAAgB,EAA4B,MAAM,IAAI,CAAC;AACpF,OAAO,EAAQ,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAM1F,MAAM,WAAW,cAAc;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACpD,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,WAAW,EAAE,CAAC;IAC/B,IAAI,CAAC,EAAE,GAAG,QAAQ,EAAE,CAAC;IACrB,YAAY,CAAC,EAAE;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;CACxD;AAED,QAAA,MAAM,SAAS,4OAmBZ,cAAc,gCAwShB,CAAC;AA8BF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/dateInput/DateInput.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAgD,gBAAgB,EAAE,MAAM,IAAI,CAAC;AACpF,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAQ,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAM1F,MAAM,WAAW,cAAc;IAC7B,kFAAkF;IAClF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACpD,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,WAAW,EAAE,CAAC;IAC/B,IAAI,CAAC,EAAE,GAAG,QAAQ,EAAE,CAAC;IACrB,YAAY,CAAC,EAAE;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;CACxD;AAED,QAAA,MAAM,SAAS,wPAmBZ,cAAc,gCA6ShB,CAAC;AA8BF,eAAe,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-11854c7",
+  "version": "0.0.0-experimental-bf4cb26",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/dateInput/DateInput.rtl.spec.tsx

@@ -0,0 +1,17 @@
+import { Field } from '../field/Field';
+import { mockMatchMedia, mockResizeObserver, render, screen } from '../test-utils';
+import DateInput from './DateInput';
+
+mockMatchMedia();
+mockResizeObserver();
+
+describe('DateInput', () => {
+  it('supports `Field` for labeling', () => {
+    render(
+      <Field label="Date of birth">
+        <DateInput onChange={() => {}} />
+      </Field>,
+    );
+    expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Date of birth/);
+  });
+});

package/src/dateInput/DateInput.tsx

@@ -2,14 +2,15 @@ import classNames from 'classnames';
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
 
-import { Input, SelectInput, SelectInputProps, SelectInputOptionContent } from '..';
-import { Size, DateMode, MonthFormat, SizeSmall, SizeMedium, SizeLarge } from '../common';
-import { getMonthNames, isDateValid, isMonthAndYearFormat, MDY, YMD } from '../common/dateUtils';
-
+import { Input, SelectInput, SelectInputOptionContent, SelectInputProps } from '..';
+import { DateMode, MonthFormat, Size, SizeLarge, SizeMedium, SizeSmall } from '../common';
+import { MDY, YMD, getMonthNames, isDateValid, isMonthAndYearFormat } from '../common/dateUtils';
+import { useInputAttributes } from '../inputs/contexts';
 import messages from './DateInput.messages';
 import { convertToLocalMidnight } from './utils';
 
 export interface DateInputProps {
+  /** @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead. */
   'aria-label'?: string;
   'aria-labelledby'?: string;
   disabled?: boolean;
@@ -35,7 +36,7 @@ export interface DateInputProps {
 }
 
 const DateInput = ({
-  'aria-labelledby': ariaLabelledBy,
+  'aria-labelledby': ariaLabelledByProp,
   'aria-label': ariaLabel,
   disabled = false,
   size = Size.MEDIUM,
@@ -51,9 +52,13 @@ const DateInput = ({
   onFocus,
   onBlur,
   placeholders,
-  id,
+  id: idProp,
   selectProps = {},
 }: DateInputProps) => {
+  const inputAttributes = useInputAttributes({ nonLabelable: true });
+  const id = idProp ?? inputAttributes.id;
+  const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];
+
   const { locale, formatMessage } = useIntl();
 
   const getDateObject = (): Date | undefined => {
@@ -95,9 +100,9 @@ const DateInput = ({
   );
   const monthNames = getMonthNames(locale, monthFormat);
 
-  dayLabel = dayLabel || formatMessage(messages.dayLabel);
-  monthLabel = monthLabel || formatMessage(messages.monthLabel);
-  yearLabel = yearLabel || formatMessage(messages.yearLabel);
+  dayLabel ||= formatMessage(messages.dayLabel);
+  monthLabel ||= formatMessage(messages.monthLabel);
+  yearLabel ||= formatMessage(messages.yearLabel);
   placeholders = {
     day: placeholders?.day || formatMessage(messages.dayPlaceholder),
     month: placeholders?.month || formatMessage(messages.monthLabel),
@@ -298,6 +303,7 @@ const DateInput = ({
   return (
     <div
       className="tw-date"
+      {...inputAttributes}
       id={id}
       aria-labelledby={ariaLabelledBy}
       aria-label={ariaLabel}
@@ -328,7 +334,8 @@ const DateInput = ({
                 {getYear()}
               </>
             );
-          } else if (yearFirst) {
+          }
+          if (yearFirst) {
             return (
               <>
                 {getYear()}
@@ -336,15 +343,14 @@ const DateInput = ({
                 {getDay()}
               </>
             );
-          } else {
-            return (
-              <>
-                {getDay()}
-                {getMonth()}
-                {getYear()}
-              </>
-            );
           }
+          return (
+            <>
+              {getDay()}
+              {getMonth()}
+              {getYear()}
+            </>
+          );
         })()}
       </div>
     </div>