@transferwise/components 46.40.0 → 46.41.1

package/build/index.js

@@ -746,7 +746,7 @@ const StatusIcon = ({
   const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
   return /*#__PURE__*/jsxRuntime.jsx("span", {
     "data-testid": "status-icon",
-    className: classNames__default.default('status-circle', 'status-circle-' + size, sentiment),
+    className: classNames__default.default('status-circle', `status-circle-${size}`, sentiment),
     children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
       className: classNames__default.default('status-icon', iconColor)
     })
@@ -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)
           })
         })]
@@ -4878,14 +4866,20 @@ function InlineAlert({
   className,
   children
 }) {
-  const danger = type === 'negative' || type === 'error';
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
     role: "alert",
     id: id,
-    className: classNames__default.default('alert alert-detach', `alert-${danger ? 'danger' : type}`, className),
-    children: [danger && /*#__PURE__*/jsxRuntime.jsx(icons.AlertCircle, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
-      children: children
-    })]
+    className: classNames__default.default('alert alert-detach', `alert-${type === exports.Sentiment.NEGATIVE || type === exports.Sentiment.ERROR ? 'danger' : type}`, className),
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "d-inline-flex",
+      children: [type !== exports.Sentiment.NEUTRAL && type !== exports.Sentiment.PENDING && /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
+        sentiment: type,
+        size: exports.Size.SMALL
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "np-text-body-default",
+        children: children
+      })]
+    })
   });
 }
 
@@ -4906,13 +4900,15 @@ const Label = ({
 const Field = ({
   id,
   label,
-  hint,
-  error,
+  message: propMessage,
+  sentiment: propType = exports.Sentiment.NEUTRAL,
   className,
-  children
+  children,
+  ...props
 }) => {
-  const hasError = Boolean(error);
-  const hasHint = Boolean(hint) && !hasError;
+  const sentiment = props.error ? exports.Sentiment.NEGATIVE : propType;
+  const message = props.error || props.hint || propMessage;
+  const hasError = sentiment === exports.Sentiment.NEGATIVE;
   const labelId = React.useId();
   const fallbackInputId = React.useId();
   const inputId = id !== null ? id ?? fallbackInputId : undefined;
@@ -4922,26 +4918,24 @@ const Field = ({
     children: /*#__PURE__*/jsxRuntime.jsx(InputIdContextProvider, {
       value: inputId,
       children: /*#__PURE__*/jsxRuntime.jsx(InputDescribedByProvider, {
-        value: hasError || hasHint ? descriptionId : undefined,
+        value: message ? descriptionId : undefined,
         children: /*#__PURE__*/jsxRuntime.jsx(InputInvalidProvider, {
           value: hasError,
           children: /*#__PURE__*/jsxRuntime.jsxs("div", {
             className: classNames__default.default('form-group d-block', {
+              'has-success': sentiment === exports.Sentiment.POSITIVE,
+              'has-warning': sentiment === exports.Sentiment.WARNING,
               'has-error': hasError,
-              'has-info': hasHint
+              'has-info': sentiment === exports.Sentiment.NEUTRAL
             }, className),
             children: [/*#__PURE__*/jsxRuntime.jsxs(Label, {
               id: labelId,
               htmlFor: inputId,
               children: [label, children]
-            }), hasHint && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
-              type: exports.Sentiment.NEUTRAL,
+            }), message && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
+              type: sentiment,
               id: descriptionId,
-              children: hint
-            }), hasError && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
-              type: exports.Sentiment.NEGATIVE,
-              id: descriptionId,
-              children: error
+              children: message
             })]
           })
         })