react-magma-dom 4.12.2-next.0 → 4.12.2-next.1

package/dist/components/DatePicker/utils.d.ts

@@ -14,3 +14,4 @@ export declare function setMonthForDate(prevDate: any, numberMonth: number): Dat
 export declare function setYearForDate(prevDate: any, numberYear: number): Date;
 export declare const MAX_YEAR = 2099;
 export declare const MIN_YEAR = 1900;
+export declare const isYearOutOfRange: (year: number) => boolean;

package/dist/esm/index.js

@@ -492,6 +492,7 @@ var defaultI18n = {
     day: 'Day',
     month: 'Month',
     year: 'Year',
+    invalidYearError: 'Invalid date. Please enter a year between {minYear} and {maxYear}.',
     helpModal: {
       header: 'Keyboard Shortcuts',
       helpButtonAriaLabel: 'Keyboard instructions for calendar widget',
@@ -10754,6 +10755,9 @@ function setYearForDate(prevDate, numberYear) {
 }
 var MAX_YEAR = 2099;
 var MIN_YEAR = 1900;
+var isYearOutOfRange = function isYearOutOfRange(year) {
+  return year < MIN_YEAR || year > MAX_YEAR;
+};
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__$g() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 function getCalendarDayBackground(isInverse, isChosen, theme) {
@@ -13460,6 +13464,9 @@ var DateFieldInput = function DateFieldInput(props) {
   var _React$useState = useState(false),
     isFocused = _React$useState[0],
     setIsFocused = _React$useState[1];
+  var _React$useState2 = useState(false),
+    isInvalidYear = _React$useState2[0],
+    setIsInvalidYear = _React$useState2[1];
   var dayId = id + "__day";
   var monthId = id + "__month";
   var yearId = id + "__year";
@@ -13473,11 +13480,13 @@ var DateFieldInput = function DateFieldInput(props) {
     }
     return isEmpty(month) ? 3.25 : 2;
   };
+  var invalidYearErrorMessage = i18n.datePicker.invalidYearError.replace('{minYear}', MIN_YEAR.toString()).replace('{maxYear}', MAX_YEAR.toString());
+  var ariaDescribedBy = invalidYearErrorMessage || errorMessage || helperMessage ? "" + id + descriptionSuffix : undefined;
   var renderInput = function renderInput(key) {
     switch (key) {
       case InputDateFields.Day:
         return createElement(StyledNumInput, {
-          "aria-describedby": errorMessage || helperMessage ? "" + id + descriptionSuffix : undefined,
+          "aria-describedby": ariaDescribedBy,
           "aria-label": datePicker.day,
           "data-testid": "day-input",
           id: dayId,
@@ -13500,7 +13509,7 @@ var DateFieldInput = function DateFieldInput(props) {
         });
       case InputDateFields.Month:
         return createElement(StyledNumInput, {
-          "aria-describedby": errorMessage || helperMessage ? "" + id + descriptionSuffix : undefined,
+          "aria-describedby": ariaDescribedBy,
           "aria-label": datePicker.month,
           "data-testid": "month-input",
           id: monthId,
@@ -13523,7 +13532,7 @@ var DateFieldInput = function DateFieldInput(props) {
         });
       case InputDateFields.Year:
         return createElement(StyledNumInput, {
-          "aria-describedby": errorMessage || helperMessage ? "" + id + descriptionSuffix : undefined,
+          "aria-describedby": ariaDescribedBy,
           "aria-label": datePicker.year,
           "data-testid": "year-input",
           id: yearId,
@@ -13560,27 +13569,31 @@ var DateFieldInput = function DateFieldInput(props) {
     firstFieldRef == null || firstFieldRef.focus();
   };
   useEffect(function () {
-    var isMounted = true;
-    // Preventing calling handleDateChange and onClearDate on initial mount when fields are empty
     if (!didMountRef.current) {
       didMountRef.current = true;
       return;
     }
-    var allFieldsEmpty = isEmpty(day) && isEmpty(month) && isEmpty(year);
-    if (allFieldsEmpty && isMounted) {
+    var allFieldsEmpty = !month && !day && !year;
+    if (allFieldsEmpty) {
       handleDateChange == null || handleDateChange(null, null);
       onClearDate == null || onClearDate();
+      setIsInvalidYear(false);
+      return;
+    }
+    var hasAllFields = month && day && year;
+    if (!hasAllFields) {
+      setIsInvalidYear(false);
       return;
     }
-    var isCompletedDate = month && day && year && Number(year) >= MIN_YEAR && Number(year) <= MAX_YEAR;
-    if (!isCompletedDate) return;
-    var newDate = hasMonthLongFormat ? new Date(month + " " + day + ", " + year) : new Date(Number(year), Number(month) - 1, Number(day));
-    if (!isNaN(newDate.getTime()) && isMounted) {
+    var yearValue = Number(year);
+    if (isYearOutOfRange(yearValue)) {
+      return;
+    }
+    setIsInvalidYear(false);
+    var newDate = hasMonthLongFormat ? new Date(month + " " + day + ", " + year) : new Date(yearValue, Number(month) - 1, Number(day));
+    if (!isNaN(newDate.getTime())) {
       handleDateChange == null || handleDateChange(newDate, null);
     }
-    return function () {
-      isMounted = false;
-    };
   }, [month, day, year, hasMonthLongFormat]);
   useEffect(function () {
     var isMounted = true;
@@ -13637,12 +13650,18 @@ var DateFieldInput = function DateFieldInput(props) {
     setIsFocused(true);
   };
   var handleOnBlur = function handleOnBlur(e) {
+    var isLeavingGroup = !e.currentTarget.contains(e.relatedTarget);
+    if (isLeavingGroup && month && day && year) {
+      if (isYearOutOfRange(Number(year))) {
+        setIsInvalidYear(true);
+      }
+    }
     onInputBlur == null || onInputBlur(e);
     setIsFocused(false);
   };
   return createElement(FormFieldContainer, {
     containerStyle: containerStyle,
-    errorMessage: errorMessage,
+    errorMessage: isInvalidYear ? invalidYearErrorMessage : errorMessage,
     fieldId: id,
     helperMessage: helperMessage,
     isInverse: isInverse,
@@ -13690,7 +13709,11 @@ var DateFieldInput = function DateFieldInput(props) {
     type: ButtonType.button,
     variant: ButtonVariant.link,
     onKeyDown: onIconKeyDown
-  })))));
+  }))), createElement(VisuallyHidden, null, createElement("input", {
+    id: id,
+    "aria-hidden": "true",
+    tabIndex: -1
+  }))));
 };
 
 var _excluded$K = ["placeholder", "testId", "dateTimePickerContent"];