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

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)
           })
         })]
@@ -4878,42 +4866,12 @@ function InlineAlert({
   className,
   children
 }) {
-  const getStatusIcon = sentiment => {
-    switch (sentiment) {
-      case exports.Sentiment.POSITIVE:
-      case exports.Sentiment.SUCCESS:
-        return /*#__PURE__*/jsxRuntime.jsx(icons.CheckCircleFill, {});
-      case exports.Sentiment.WARNING:
-        return /*#__PURE__*/jsxRuntime.jsx(icons.AlertCircleFill, {});
-      case exports.Sentiment.NEGATIVE:
-      case exports.Sentiment.ERROR:
-        return /*#__PURE__*/jsxRuntime.jsx(icons.CrossCircleFill, {});
-      default:
-        return null;
-    }
-  };
-  const hasTextChildren = content => {
-    let label = '';
-    const fillLabel = childrenNodes => {
-      React__namespace.default.Children.map(childrenNodes, child => {
-        if (typeof child === 'string') {
-          label += child;
-        }
-        if (typeof child === 'object' && /*#__PURE__*/React__namespace.default.isValidElement(child)) {
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-          fillLabel(child?.props?.children);
-        }
-      });
-    };
-    fillLabel(content);
-    return !!label.length;
-  };
+  const danger = type === 'negative' || type === 'error';
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     role: "alert",
     id: id,
-    className: classNames__default.default('alert alert-detach', `alert-${[exports.Sentiment.NEGATIVE, exports.Sentiment.ERROR].includes(type) ? 'danger' : type}`, className),
-    children: [hasTextChildren(children) && getStatusIcon(type), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "np-text-body-default",
+    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
     })]
   });
@@ -4928,7 +4886,7 @@ const Label = ({
   return /*#__PURE__*/jsxRuntime.jsx("label", {
     id: id,
     htmlFor: htmlFor,
-    className: classNames__default.default('control-label d-flex flex-column gap-y-xs m-b-0', className),
+    className: classNames__default.default('control-label d-flex flex-column gap-y-1 m-b-0', className),
     children: children
   });
 };
@@ -4936,15 +4894,13 @@ const Label = ({
 const Field = ({
   id,
   label,
-  message: propMessage,
-  type: propType,
+  hint,
+  error,
   className,
-  children,
-  ...props
+  children
 }) => {
-  const type = props.error ? exports.Sentiment.NEGATIVE : propType;
-  const message = props.error || props.hint || propMessage;
-  const hasError = type === exports.Sentiment.NEGATIVE;
+  const hasError = Boolean(error);
+  const hasHint = Boolean(hint) && !hasError;
   const labelId = React.useId();
   const fallbackInputId = React.useId();
   const inputId = id !== null ? id ?? fallbackInputId : undefined;
@@ -4954,24 +4910,26 @@ const Field = ({
     children: /*#__PURE__*/jsxRuntime.jsx(InputIdContextProvider, {
       value: inputId,
       children: /*#__PURE__*/jsxRuntime.jsx(InputDescribedByProvider, {
-        value: message ? descriptionId : undefined,
+        value: hasError || hasHint ? descriptionId : undefined,
         children: /*#__PURE__*/jsxRuntime.jsx(InputInvalidProvider, {
           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-error': hasError,
-              'has-info': type === exports.Sentiment.NEUTRAL
+              'has-info': hasHint
             }, className),
             children: [/*#__PURE__*/jsxRuntime.jsxs(Label, {
               id: labelId,
               htmlFor: inputId,
               children: [label, children]
-            }), message && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
-              type: type,
+            }), hasHint && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
+              type: exports.Sentiment.NEUTRAL,
               id: descriptionId,
-              children: message
+              children: hint
+            }), hasError && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
+              type: exports.Sentiment.NEGATIVE,
+              id: descriptionId,
+              children: error
             })]
           })
         })