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

package/build/index.js

@@ -2622,6 +2622,26 @@ const isMonthAndYearFormat = dateString => validDateString(dateString) && dateSt
 const MDY = new Set(['en-US']);
 const YMD = new Set(['hu', 'hu-HU', 'zh-HK', 'zh-CN', 'ja', 'ja-JP']);
 
+const FieldLabelIdContext = /*#__PURE__*/React.createContext(undefined);
+const FieldLabelIdContextProvider = FieldLabelIdContext.Provider;
+const InputIdContext = /*#__PURE__*/React.createContext(undefined);
+const InputIdContextProvider = InputIdContext.Provider;
+const InputDescribedByContext = /*#__PURE__*/React.createContext(undefined);
+const InputDescribedByProvider = InputDescribedByContext.Provider;
+const InputInvalidContext = /*#__PURE__*/React.createContext(undefined);
+const InputInvalidProvider = InputInvalidContext.Provider;
+function useInputAttributes({
+  nonLabelable = false
+} = {}) {
+  const labelId = React.useContext(FieldLabelIdContext);
+  return {
+    id: React.useContext(InputIdContext),
+    'aria-labelledby': nonLabelable ? labelId : undefined,
+    'aria-describedby': React.useContext(InputDescribedByContext),
+    'aria-invalid': React.useContext(InputInvalidContext)
+  };
+}
+
 var messages$9 = reactIntl.defineMessages({
   monthLabel: {
     id: "neptune.DateInput.month.label"
@@ -2646,7 +2666,7 @@ const convertToLocalMidnight = date => {
 };
 
 const DateInput = ({
-  'aria-labelledby': ariaLabelledBy,
+  'aria-labelledby': ariaLabelledByProp,
   'aria-label': ariaLabel,
   disabled = false,
   size = exports.Size.MEDIUM,
@@ -2662,9 +2682,14 @@ const DateInput = ({
   onFocus,
   onBlur,
   placeholders,
-  id,
+  id: idProp,
   selectProps = {}
 }) => {
+  const inputAttributes = useInputAttributes({
+    nonLabelable: true
+  });
+  const id = idProp ?? inputAttributes.id;
+  const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];
   const {
     locale,
     formatMessage
@@ -2701,9 +2726,9 @@ const DateInput = ({
   const [year, setYear] = React.useState(() => getInitialDate('year'));
   const [lastBroadcastedValue, setLastBroadcastedValue] = React.useState(getDateObject);
   const monthNames = getMonthNames(locale, monthFormat);
-  dayLabel = dayLabel || formatMessage(messages$9.dayLabel);
-  monthLabel = monthLabel || formatMessage(messages$9.monthLabel);
-  yearLabel = yearLabel || formatMessage(messages$9.yearLabel);
+  dayLabel ||= formatMessage(messages$9.dayLabel);
+  monthLabel ||= formatMessage(messages$9.monthLabel);
+  yearLabel ||= formatMessage(messages$9.yearLabel);
   placeholders = {
     day: placeholders?.day || formatMessage(messages$9.dayPlaceholder),
     month: placeholders?.month || formatMessage(messages$9.monthLabel),
@@ -2894,6 +2919,7 @@ const DateInput = ({
   const yearFirst = YMD.has(locale);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "tw-date",
+    ...inputAttributes,
     id: id,
     "aria-labelledby": ariaLabelledBy,
     "aria-label": ariaLabel,
@@ -2913,15 +2939,15 @@ const DateInput = ({
           return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [getMonth(), getDay(), getYear()]
           });
-        } else if (yearFirst) {
+        }
+        if (yearFirst) {
           return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [getYear(), getMonth(), getDay()]
           });
-        } else {
-          return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-            children: [getDay(), getMonth(), getYear()]
-          });
         }
+        return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [getDay(), getMonth(), getYear()]
+        });
       })()
     })
   });
@@ -4920,26 +4946,6 @@ function InlineAlert({
   });
 }
 
-const FieldLabelIdContext = /*#__PURE__*/React.createContext(undefined);
-const FieldLabelIdContextProvider = FieldLabelIdContext.Provider;
-const InputIdContext = /*#__PURE__*/React.createContext(undefined);
-const InputIdContextProvider = InputIdContext.Provider;
-const InputDescribedByContext = /*#__PURE__*/React.createContext(undefined);
-const InputDescribedByProvider = InputDescribedByContext.Provider;
-const InputInvalidContext = /*#__PURE__*/React.createContext(undefined);
-const InputInvalidProvider = InputInvalidContext.Provider;
-function useInputAttributes({
-  nonLabelable = false
-} = {}) {
-  const labelId = React.useContext(FieldLabelIdContext);
-  return {
-    id: React.useContext(InputIdContext),
-    'aria-labelledby': nonLabelable ? labelId : undefined,
-    'aria-describedby': React.useContext(InputDescribedByContext),
-    'aria-invalid': React.useContext(InputInvalidContext)
-  };
-}
-
 const Label = ({
   id,
   htmlFor,