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

package/build/index.mjs

@@ -3159,8 +3159,10 @@ const DateInput = ({
     return null;
   };
   const [day, setDay] = useState(() => getInitialDate('day'));
+  const [displayDay, setDisplayDay] = useState(day?.toString());
   const [month, setMonth] = useState(() => getInitialDate('month'));
   const [year, setYear] = useState(() => getInitialDate('year'));
+  const [displayYear, setDisplayYear] = useState(year?.toString());
   const [lastBroadcastedValue, setLastBroadcastedValue] = useState(getDateObject);
   const monthNames = getMonthNames(locale, monthFormat);
   dayLabel ||= formatMessage(messages$9.dayLabel);
@@ -3186,8 +3188,8 @@ const DateInput = ({
   const getSelectElement = () => {
     return /*#__PURE__*/jsxs("label", {
       className: "d-flex flex-column",
-      children: [/*#__PURE__*/jsx("span", {
-        className: "sr-only",
+      children: [/*#__PURE__*/jsx(Body, {
+        type: Typography.BODY_DEFAULT,
         children: monthLabel
       }), /*#__PURE__*/jsx(SelectInput, {
         name: "month",
@@ -3209,12 +3211,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;
@@ -3228,11 +3241,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) {
@@ -3240,30 +3253,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);
     }
   };
@@ -3273,24 +3275,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 === DateMode.MONTH_YEAR;
   const monthWidth = classNames({
     'col-sm-8': monthYearOnly,
@@ -3306,8 +3290,8 @@ const DateInput = ({
     return /*#__PURE__*/jsx("div", {
       className: "col-sm-3",
       children: /*#__PURE__*/jsxs("label", {
-        children: [/*#__PURE__*/jsx("span", {
-          className: "sr-only",
+        children: [/*#__PURE__*/jsx(Body, {
+          type: Typography.BODY_DEFAULT,
           children: dayLabel
         }), /*#__PURE__*/jsx("div", {
           className: `input-group input-group-${size}`,
@@ -3317,10 +3301,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)
           })
         })]
@@ -3331,8 +3317,8 @@ const DateInput = ({
     return /*#__PURE__*/jsx("div", {
       className: "col-sm-4",
       children: /*#__PURE__*/jsxs("label", {
-        children: [/*#__PURE__*/jsx("span", {
-          className: "sr-only",
+        children: [/*#__PURE__*/jsx(Body, {
+          type: Typography.BODY_DEFAULT,
           children: yearLabel
         }), /*#__PURE__*/jsx("div", {
           className: `input-group input-group-${size}`,
@@ -3343,9 +3329,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)
           })
         })]
@@ -4908,14 +4896,14 @@ const Field = ({
   id,
   label,
   message: propMessage,
-  type: propType,
+  sentiment: propType,
   className,
   children,
   ...props
 }) => {
-  const type = props.error ? Sentiment.NEGATIVE : propType;
+  const sentiment = props.error ? Sentiment.NEGATIVE : propType;
   const message = props.error || props.hint || propMessage;
-  const hasError = type === Sentiment.NEGATIVE;
+  const hasError = sentiment === Sentiment.NEGATIVE;
   const labelId = useId();
   const fallbackInputId = useId();
   const inputId = id !== null ? id ?? fallbackInputId : undefined;
@@ -4930,17 +4918,17 @@ const Field = ({
           value: hasError,
           children: /*#__PURE__*/jsxs("div", {
             className: classNames('form-group d-block', {
-              'has-success': type === Sentiment.POSITIVE,
-              'has-warning': type === Sentiment.WARNING,
+              'has-success': sentiment === Sentiment.POSITIVE,
+              'has-warning': sentiment === Sentiment.WARNING,
               'has-error': hasError,
-              'has-info': type === Sentiment.NEUTRAL
+              'has-info': sentiment === Sentiment.NEUTRAL
             }, className),
             children: [/*#__PURE__*/jsxs(Label, {
               id: labelId,
               htmlFor: inputId,
               children: [label, children]
             }), message && /*#__PURE__*/jsx(InlineAlert, {
-              type: type,
+              type: sentiment,
               id: descriptionId,
               children: message
             })]