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

package/build/index.mjs

@@ -2,7 +2,7 @@ import * as React from 'react';
 import React__default, { forwardRef, useId, cloneElement, useState, useEffect, useRef, useMemo, Component, createContext, useContext, useSyncExternalStore, useCallback, useImperativeHandle, createElement, PureComponent, createRef, isValidElement, Children, Fragment as Fragment$1 } from 'react';
 import classNames from 'classnames';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ChevronUp, CrossCircleFill, Cross, Check, Info as Info$1, Alert as Alert$1, ClockBorderless, NavigateAway, Briefcase, Person, ArrowRight, Download, ChevronLeft, ChevronRight, AlertCircleFill, CheckCircleFill, ArrowLeft, QuestionMarkCircle, Search, CrossCircle, ChevronDown, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle, Bin } from '@transferwise/icons';
+import { ChevronUp, CrossCircleFill, Cross, Check, Info as Info$1, Alert as Alert$1, ClockBorderless, NavigateAway, Briefcase, Person, ArrowRight, Download, ChevronLeft, ChevronRight, AlertCircleFill, AlertCircle, ArrowLeft, QuestionMarkCircle, Search, CrossCircle, ChevronDown, CheckCircleFill, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle, Bin } from '@transferwise/icons';
 import { defineMessages, useIntl, injectIntl, IntlProvider } from 'react-intl';
 import commonmark from 'commonmark';
 import { useTheme, ThemeProvider } from '@wise/components-theming';
@@ -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)
           })
         })]
@@ -4849,42 +4837,12 @@ function InlineAlert({
   className,
   children
 }) {
-  const getStatusIcon = sentiment => {
-    switch (sentiment) {
-      case Sentiment.POSITIVE:
-      case Sentiment.SUCCESS:
-        return /*#__PURE__*/jsx(CheckCircleFill, {});
-      case Sentiment.WARNING:
-        return /*#__PURE__*/jsx(AlertCircleFill, {});
-      case Sentiment.NEGATIVE:
-      case Sentiment.ERROR:
-        return /*#__PURE__*/jsx(CrossCircleFill, {});
-      default:
-        return null;
-    }
-  };
-  const hasTextChildren = content => {
-    let label = '';
-    const fillLabel = childrenNodes => {
-      React__default.Children.map(childrenNodes, child => {
-        if (typeof child === 'string') {
-          label += child;
-        }
-        if (typeof child === 'object' && /*#__PURE__*/React__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__*/jsxs("div", {
     role: "alert",
     id: id,
-    className: classNames('alert alert-detach', `alert-${[Sentiment.NEGATIVE, Sentiment.ERROR].includes(type) ? 'danger' : type}`, className),
-    children: [hasTextChildren(children) && getStatusIcon(type), /*#__PURE__*/jsx("div", {
-      className: "np-text-body-default",
+    className: classNames('alert alert-detach', `alert-${danger ? 'danger' : type}`, className),
+    children: [danger && /*#__PURE__*/jsx(AlertCircle, {}), /*#__PURE__*/jsx("div", {
       children: children
     })]
   });
@@ -4899,7 +4857,7 @@ const Label = ({
   return /*#__PURE__*/jsx("label", {
     id: id,
     htmlFor: htmlFor,
-    className: classNames('control-label d-flex flex-column gap-y-xs m-b-0', className),
+    className: classNames('control-label d-flex flex-column gap-y-1 m-b-0', className),
     children: children
   });
 };
@@ -4907,15 +4865,13 @@ const Label = ({
 const Field = ({
   id,
   label,
-  message: propMessage,
-  type: propType,
+  hint,
+  error,
   className,
-  children,
-  ...props
+  children
 }) => {
-  const type = props.error ? Sentiment.NEGATIVE : propType;
-  const message = props.error || props.hint || propMessage;
-  const hasError = type === Sentiment.NEGATIVE;
+  const hasError = Boolean(error);
+  const hasHint = Boolean(hint) && !hasError;
   const labelId = useId();
   const fallbackInputId = useId();
   const inputId = id !== null ? id ?? fallbackInputId : undefined;
@@ -4925,24 +4881,26 @@ const Field = ({
     children: /*#__PURE__*/jsx(InputIdContextProvider, {
       value: inputId,
       children: /*#__PURE__*/jsx(InputDescribedByProvider, {
-        value: message ? descriptionId : undefined,
+        value: hasError || hasHint ? descriptionId : undefined,
         children: /*#__PURE__*/jsx(InputInvalidProvider, {
           value: hasError,
           children: /*#__PURE__*/jsxs("div", {
             className: classNames('form-group d-block', {
-              'has-success': type === Sentiment.POSITIVE,
-              'has-warning': type === Sentiment.WARNING,
               'has-error': hasError,
-              'has-info': type === Sentiment.NEUTRAL
+              'has-info': hasHint
             }, className),
             children: [/*#__PURE__*/jsxs(Label, {
               id: labelId,
               htmlFor: inputId,
               children: [label, children]
-            }), message && /*#__PURE__*/jsx(InlineAlert, {
-              type: type,
+            }), hasHint && /*#__PURE__*/jsx(InlineAlert, {
+              type: Sentiment.NEUTRAL,
               id: descriptionId,
-              children: message
+              children: hint
+            }), hasError && /*#__PURE__*/jsx(InlineAlert, {
+              type: Sentiment.NEGATIVE,
+              id: descriptionId,
+              children: error
             })]
           })
         })