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

package/build/index.mjs

@@ -2592,6 +2592,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__*/createContext(undefined);
+const FieldLabelIdContextProvider = FieldLabelIdContext.Provider;
+const InputIdContext = /*#__PURE__*/createContext(undefined);
+const InputIdContextProvider = InputIdContext.Provider;
+const InputDescribedByContext = /*#__PURE__*/createContext(undefined);
+const InputDescribedByProvider = InputDescribedByContext.Provider;
+const InputInvalidContext = /*#__PURE__*/createContext(undefined);
+const InputInvalidProvider = InputInvalidContext.Provider;
+function useInputAttributes({
+  nonLabelable = false
+} = {}) {
+  const labelId = useContext(FieldLabelIdContext);
+  return {
+    id: useContext(InputIdContext),
+    'aria-labelledby': nonLabelable ? labelId : undefined,
+    'aria-describedby': useContext(InputDescribedByContext),
+    'aria-invalid': useContext(InputInvalidContext)
+  };
+}
+
 var messages$9 = defineMessages({
   monthLabel: {
     id: "neptune.DateInput.month.label"
@@ -2616,7 +2636,7 @@ const convertToLocalMidnight = date => {
 };
 
 const DateInput = ({
-  'aria-labelledby': ariaLabelledBy,
+  'aria-labelledby': ariaLabelledByProp,
   'aria-label': ariaLabel,
   disabled = false,
   size = Size.MEDIUM,
@@ -2632,9 +2652,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
@@ -2671,9 +2696,9 @@ const DateInput = ({
   const [year, setYear] = useState(() => getInitialDate('year'));
   const [lastBroadcastedValue, setLastBroadcastedValue] = 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),
@@ -2864,6 +2889,7 @@ const DateInput = ({
   const yearFirst = YMD.has(locale);
   return /*#__PURE__*/jsx("div", {
     className: "tw-date",
+    ...inputAttributes,
     id: id,
     "aria-labelledby": ariaLabelledBy,
     "aria-label": ariaLabel,
@@ -2883,15 +2909,15 @@ const DateInput = ({
           return /*#__PURE__*/jsxs(Fragment, {
             children: [getMonth(), getDay(), getYear()]
           });
-        } else if (yearFirst) {
+        }
+        if (yearFirst) {
           return /*#__PURE__*/jsxs(Fragment, {
             children: [getYear(), getMonth(), getDay()]
           });
-        } else {
-          return /*#__PURE__*/jsxs(Fragment, {
-            children: [getDay(), getMonth(), getYear()]
-          });
         }
+        return /*#__PURE__*/jsxs(Fragment, {
+          children: [getDay(), getMonth(), getYear()]
+        });
       })()
     })
   });
@@ -4890,26 +4916,6 @@ function InlineAlert({
   });
 }
 
-const FieldLabelIdContext = /*#__PURE__*/createContext(undefined);
-const FieldLabelIdContextProvider = FieldLabelIdContext.Provider;
-const InputIdContext = /*#__PURE__*/createContext(undefined);
-const InputIdContextProvider = InputIdContext.Provider;
-const InputDescribedByContext = /*#__PURE__*/createContext(undefined);
-const InputDescribedByProvider = InputDescribedByContext.Provider;
-const InputInvalidContext = /*#__PURE__*/createContext(undefined);
-const InputInvalidProvider = InputInvalidContext.Provider;
-function useInputAttributes({
-  nonLabelable = false
-} = {}) {
-  const labelId = useContext(FieldLabelIdContext);
-  return {
-    id: useContext(InputIdContext),
-    'aria-labelledby': nonLabelable ? labelId : undefined,
-    'aria-describedby': useContext(InputDescribedByContext),
-    'aria-invalid': useContext(InputInvalidContext)
-  };
-}
-
 const Label = ({
   id,
   htmlFor,