@uncinc/uncinc-react-kitchen-sink 2.11.1 → 2.11.3

package/dist/components/Form/DateSelect/index.js

@@ -11,6 +11,9 @@ import GenericFormElement from '../GenericFormElement';
 import SelectInput from '../Select/Input';
 import { useExtendedFormikContext } from '../FormikWrapper';
 import './style.scss';
+function toTwoDigits(value) {
+  return ('0' + value).slice(-2);
+}
 var DateSelect = function DateSelect(props) {
   var title = props.title,
     fieldName = props.fieldName,
@@ -116,11 +119,28 @@ var DateSelect = function DateSelect(props) {
   useEffect(function () {
     hideYear && setYear(fixedYear || new Date().getFullYear());
 
+    // In some cases, this element can re-render while there's already a value in the Formik Context.
+    // For example, when we build a Webform with multiplate pages, and you go báck a page.
+    //
+    // The values will still be in the Formik Context, but we need to set them again in useState
+    if (value) {
+      value.getDate() && setDay(value.getDate());
+
+      // months are zero-indexed
+      value.getMonth() !== undefined && setMonth(value.getMonth() + 1);
+      value.getFullYear() && setYear(value.getFullYear());
+    }
+
     // All options are filled, start validation
     if (required && (!day || !month || !year)) {
       setFieldError(fieldName, requiredError);
     } else if (day && month && year) {
-      var date = new Date("".concat(year, "-").concat(month, "-").concat(day));
+      // The JavaScript specification only specifies one date format to be universally supported:
+      // the date time string format. (See: https://tc39.es/ecma262/multipage/numbers-and-dates.html#sec-date-time-string-format)
+      //
+      // This means we have to format month and day to a two digits format (we receive them as
+      // a single digit), otherwise this will break on some browsers (like Safari).
+      var date = new Date("".concat(year, "-").concat(toTwoDigits(month), "-").concat(toTwoDigits(day)));
       setFieldValue(fieldName, date);
     }
   }, [isSubmitting, day, month, year]);
@@ -131,7 +151,7 @@ var DateSelect = function DateSelect(props) {
     if (required && (!day || !month || !year)) {
       return requiredError || t(['webform.components.date_select.required', 'webform.required', 'webform_required']);
     }
-    var date = new Date("".concat(year, "-").concat(month, "-").concat(day));
+    var date = new Date("".concat(year, "-").concat(toTwoDigits(month), "-").concat(toTwoDigits(day)));
     if (!(
     // Take note of the exclamation mark
     date.getDate() === day && date.getMonth() + 1 === month && date.getFullYear() === year)) {

package/dist/components/Form/Number/index.js

@@ -20,12 +20,12 @@ var Number = function Number(props) {
       return requiredError || t(['webform.number.required', 'webform.required', 'webform_required']);
     }
     if (min && parseInt(value) < min) {
-      return t(['webform.number.min', 'webform.min', 'webform_min'], {
+      return t(['webform.components.number.min', 'webform.number.min', 'webform.min', 'webform_min'], {
         min: min
       });
     }
     if (max && parseInt(value) > max) {
-      return t(['webform.number.max', 'webform.max', 'webform_max'], {
+      return t(['webform.components.number.max', 'webform.number.max', 'webform.max', 'webform_max'], {
         max: max
       });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.11.1",
+  "version": "2.11.3",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",