@transferwise/components 0.0.0-experimental-3ede9cc → 0.0.0-experimental-e477c03

package/build/index.js

@@ -3188,8 +3188,10 @@ const DateInput = ({
     return null;
   };
   const [day, setDay] = React.useState(() => getInitialDate('day'));
+  const [displayDay, setDisplayDay] = React.useState(day?.toString());
   const [month, setMonth] = React.useState(() => getInitialDate('month'));
   const [year, setYear] = React.useState(() => getInitialDate('year'));
+  const [displayYear, setDisplayYear] = React.useState(year?.toString());
   const [lastBroadcastedValue, setLastBroadcastedValue] = React.useState(getDateObject);
   const monthNames = getMonthNames(locale, monthFormat);
   dayLabel ||= formatMessage(messages$9.dayLabel);
@@ -3215,8 +3217,8 @@ const DateInput = ({
   const getSelectElement = () => {
     return /*#__PURE__*/jsxRuntime.jsxs("label", {
       className: "d-flex flex-column",
-      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-        className: "sr-only",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Body, {
+        type: exports.Typography.BODY_DEFAULT,
         children: monthLabel
       }), /*#__PURE__*/jsxRuntime.jsx(SelectInput, {
         name: "month",
@@ -3238,12 +3240,23 @@ const DateInput = ({
       })]
     });
   };
+  const isDayValid = (newDay, newMonth, newYear) => {
+    const maxDay = new Date(newYear, newMonth + 1, 0).getDate();
+    return newDay <= maxDay;
+  };
   const handleInternalValue = (newDay = day, newMonth = month, newYear = year) => {
-    if (newDay == null || newMonth == null || newYear == null) {
+    if (newDay == null || newDay === 0 || newMonth == null || newYear == null || newYear === 0) {
+      broadcastNewValue(null);
+      return;
+    }
+    if (!isDayValid(newDay, newMonth, newYear)) {
       broadcastNewValue(null);
       return;
     }
     const dateValue = new Date(newYear, newMonth, newDay);
+    if (newYear < 100) {
+      dateValue.setFullYear(newYear);
+    }
     if (!isDateValid(dateValue)) {
       broadcastNewValue(null);
       return;
@@ -3257,11 +3270,11 @@ const DateInput = ({
     }
   };
   const handleDayChange = event => {
-    const {
-      checkedDay
-    } = checkDate(Number.parseInt(event.target.value, 10), month, year);
-    setDay(checkedDay);
-    handleInternalValue(checkedDay, month, year);
+    const newDayString = event.target.value.replace(/\D/g, '');
+    const newDayNumber = Number.parseInt(newDayString, 10);
+    setDay(newDayNumber);
+    setDisplayDay(newDayString);
+    handleInternalValue(newDayNumber, month, year);
   };
   const handleMonthChange = selectedMonth => {
     if (selectedMonth === null) {
@@ -3269,30 +3282,19 @@ const DateInput = ({
       handleInternalValue(day, null, year);
       return;
     }
-    const {
-      checkedDay
-    } = checkDate(day, selectedMonth, year);
     setMonth(selectedMonth);
-    if (day && checkedDay !== day) {
-      setDay(checkedDay);
-    }
-    handleInternalValue(checkedDay, selectedMonth, year);
+    handleInternalValue(day, selectedMonth, year);
   };
   const handleYearChange = event => {
-    const newValue = event.target.value;
-    const slicedYear = newValue.length > 4 ? newValue.slice(0, 4) : newValue;
-    if (slicedYear.toString().length === 4) {
-      // Correct day based on year and month.
-      const {
-        checkedDay
-      } = checkDate(day, month, Number.parseInt(newValue, 10));
-      if (day && checkedDay !== day) {
-        setDay(checkedDay);
-      }
-      setYear(Number.parseInt(slicedYear, 10));
-      handleInternalValue(checkedDay, month, Number.parseInt(slicedYear, 10));
+    const newYearString = event.target.value.replace(/\D/g, '');
+    const newYearNumber = Number.parseInt(newYearString, 10);
+    if (newYearString.length >= 4 && newYearString.length <= 6) {
+      setYear(newYearNumber);
+      setDisplayYear(newYearString);
+      handleInternalValue(day, month, newYearNumber);
     } else {
-      setYear(Number.parseInt(slicedYear, 10));
+      setYear(null);
+      setDisplayYear(newYearString);
       handleInternalValue(day, month, null);
     }
   };
@@ -3302,24 +3304,6 @@ const DateInput = ({
       onChange(newValue != null ? getDateAsString(newValue) : null);
     }
   };
-  const checkDate = (newDay = null, newMonth = 0, newYear = null) => {
-    let checkedDay = newDay;
-    const maxDay = new Date(newYear || 2000, newMonth != null ? newMonth + 1 : 1, 0).getDate();
-    if (!newDay) {
-      checkedDay = null;
-    }
-    if (newDay && newDay < 0) {
-      checkedDay = 1;
-    }
-    if (newDay && newMonth || newDay && newDay > 31) {
-      checkedDay = newDay > maxDay ? maxDay : newDay;
-    }
-    return {
-      checkedDay,
-      checkedMonth: newMonth,
-      checkedYear: newYear
-    };
-  };
   const monthYearOnly = mode === exports.DateMode.MONTH_YEAR;
   const monthWidth = classNames__default.default({
     'col-sm-8': monthYearOnly,
@@ -3335,8 +3319,8 @@ const DateInput = ({
     return /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "col-sm-3",
       children: /*#__PURE__*/jsxRuntime.jsxs("label", {
-        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-          className: "sr-only",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Body, {
+          type: exports.Typography.BODY_DEFAULT,
           children: dayLabel
         }), /*#__PURE__*/jsxRuntime.jsx("div", {
           className: `input-group input-group-${size}`,
@@ -3346,10 +3330,12 @@ const DateInput = ({
             pattern: "[0-9]*",
             name: "day",
             autoComplete: dayAutoComplete,
-            value: day || '',
+            value: displayDay || '',
             placeholder: placeholders?.day,
             disabled: disabled,
             min: 1,
+            max: 31,
+            maxLength: 2,
             onChange: event => handleDayChange(event)
           })
         })]
@@ -3360,8 +3346,8 @@ const DateInput = ({
     return /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "col-sm-4",
       children: /*#__PURE__*/jsxRuntime.jsxs("label", {
-        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-          className: "sr-only",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Body, {
+          type: exports.Typography.BODY_DEFAULT,
           children: yearLabel
         }), /*#__PURE__*/jsxRuntime.jsx("div", {
           className: `input-group input-group-${size}`,
@@ -3372,9 +3358,11 @@ const DateInput = ({
             name: "year",
             autoComplete: yearAutoComplete,
             placeholder: placeholders?.year,
-            value: year || '',
+            value: displayYear || '',
             disabled: disabled,
-            min: 1,
+            min: 0,
+            max: 9999,
+            maxLength: 6,
             onChange: event => handleYearChange(event)
           })
         })]
@@ -4937,14 +4925,14 @@ const Field = ({
   id,
   label,
   message: propMessage,
-  type: propType,
+  sentiment: propType,
   className,
   children,
   ...props
 }) => {
-  const type = props.error ? exports.Sentiment.NEGATIVE : propType;
+  const sentiment = props.error ? exports.Sentiment.NEGATIVE : propType;
   const message = props.error || props.hint || propMessage;
-  const hasError = type === exports.Sentiment.NEGATIVE;
+  const hasError = sentiment === exports.Sentiment.NEGATIVE;
   const labelId = React.useId();
   const fallbackInputId = React.useId();
   const inputId = id !== null ? id ?? fallbackInputId : undefined;
@@ -4959,17 +4947,17 @@ const Field = ({
           value: hasError,
           children: /*#__PURE__*/jsxRuntime.jsxs("div", {
             className: classNames__default.default('form-group d-block', {
-              'has-success': type === exports.Sentiment.POSITIVE,
-              'has-warning': type === exports.Sentiment.WARNING,
+              'has-success': sentiment === exports.Sentiment.POSITIVE,
+              'has-warning': sentiment === exports.Sentiment.WARNING,
               'has-error': hasError,
-              'has-info': type === exports.Sentiment.NEUTRAL
+              'has-info': sentiment === exports.Sentiment.NEUTRAL
             }, className),
             children: [/*#__PURE__*/jsxRuntime.jsxs(Label, {
               id: labelId,
               htmlFor: inputId,
               children: [label, children]
             }), message && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
-              type: type,
+              type: sentiment,
               id: descriptionId,
               children: message
             })]