@lumx/react 3.13.2-alpha.0 → 3.13.3-alpha.0

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.13.2-alpha.0",
-        "@lumx/icons": "^3.13.2-alpha.0",
+        "@lumx/core": "^3.13.3-alpha.0",
+        "@lumx/icons": "^3.13.3-alpha.0",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -110,5 +110,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.13.2-alpha.0"
+    "version": "3.13.3-alpha.0"
 }

package/src/components/date-picker/DatePickerField.stories.tsx

@@ -49,7 +49,28 @@ export const DefaultValue = {
         value: new Date('2019-02-28'),
     },
 };
+/**
+ * With default value selected and restricted range
+ */
+export const Restricted = {
+    args: {
+        ...LabelPlaceholderAndHelper.args,
+        value: new Date(new Date().setDate(10)),
+        minDate: new Date(new Date().setDate(4)),
+        maxDate: new Date(new Date().setDate(24)),
+    },
+};
 
+/**
+ * With default value selected and restricted range
+ */
+export const RestrictedEmpty = {
+    args: {
+        ...LabelPlaceholderAndHelper.args,
+        minDate: new Date(new Date().setDate(4)),
+        maxDate: new Date(new Date().setDate(24)),
+    },
+};
 /**
  * With default month
  */

package/src/utils/date/getMonthCalendar.test.ts

@@ -89,11 +89,11 @@ describe(getMonthCalendar.name, () => {
                 },
                 {
                     '0': { date: new Date('2017-02-05'), isOutOfRange: true },
-                    '1': { date: new Date('2017-02-06'), isOutOfRange: true },
+                    '1': { date: new Date('2017-02-06') },
                     '2': { date: new Date('2017-02-07') },
                     '3': { date: new Date('2017-02-08') },
                     '4': { date: new Date('2017-02-09') },
-                    '5': { date: new Date('2017-02-10'), isOutOfRange: true },
+                    '5': { date: new Date('2017-02-10') },
                     '6': { date: new Date('2017-02-11'), isOutOfRange: true },
                 },
                 {

package/src/utils/date/getMonthCalendar.ts

@@ -25,21 +25,30 @@ export const getMonthCalendar = (
     rangeMaxDate?: Date,
 ): MonthCalendar => {
     const month = referenceDate.getMonth();
-    const iterDate = new Date(referenceDate.getTime());
+    const iterDate = new Date(referenceDate);
     iterDate.setDate(1);
 
+    const minDate = rangeMinDate && new Date(rangeMinDate);
+    const maxDate = rangeMaxDate && new Date(rangeMaxDate);
+    // Reset time to compare dates only.
+    iterDate.setUTCHours(0, 0, 0, 0);
+    minDate?.setUTCHours(0, 0, 0, 0);
+    maxDate?.setUTCHours(0, 0, 0, 0);
+
     const weekDays = getWeekDays(locale);
     const lastDayOfWeek = last(weekDays) as WeekDayInfo;
 
     const weeks: Array<AnnotatedWeek> = [];
     let week: AnnotatedWeek = {};
     let rowCount = 0;
+
     while (rowCount < MONTH_ROW_COUNT) {
         const weekDayNumber = iterDate.getDay();
         const day: AnnotatedDay = { date: new Date(iterDate.getTime()) };
 
         // If a range is specified, check if the day is out of range.
-        if ((rangeMinDate && iterDate <= rangeMinDate) || (rangeMaxDate && iterDate >= rangeMaxDate)) {
+        // min and max date are included within the valid range.
+        if ((minDate && iterDate < minDate) || (maxDate && iterDate > maxDate)) {
             day.isOutOfRange = true;
         }