@instructure/ui-calendar 10.3.1-snapshot-0 → 10.3.1-snapshot-3

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.3.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.3.0...v10.3.1-snapshot-0) (2024-10-04)
+## [10.3.1-snapshot-3](https://github.com/instructure/instructure-ui/compare/v10.3.0...v10.3.1-snapshot-3) (2024-10-09)
 
-**Note:** Version bump only for package @instructure/ui-calendar
+
+### Bug Fixes
+
+* **ui-calendar:** fix duplicate dates for certain timezones ([f9181aa](https://github.com/instructure/instructure-ui/commit/f9181aa88c35eba1e374240505d32bf618c46b04))
 
 
 

package/es/Calendar/index.js

@@ -336,7 +336,21 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
     const currDate = DateTime.getFirstDayOfWeek(visibleMonth.clone().startOf('month'));
     const arr = [];
     for (let i = 0; i < Calendar.DAY_COUNT; i++) {
-      arr.push(currDate.clone());
+      // This workaround is needed because moment's `.add({days: 1})` function has a bug that happens when the date added lands perfectly onto the DST cutoff,
+      // in these cases adding 1 day results in 23 hours added instead,
+      // so `moment.tz('2024-09-07T00:00:00', 'America/Santiago').add({days: 1})` results
+      // in "Sat Sep 07 2024 23:00:00 GMT-0400" instead of "Sun Sep 08 2024 00:00:00 GMT-0400".
+      // which would cause duplicate dates in the calendar.
+      // More info on the bug: https://github.com/moment/moment/issues/4743
+      // Please note that this causes one hour of time difference in the affected timezones/dates and to
+      // fully solve this bug we need to change to something like luxon which handles this properly
+      if (currDate.clone().format('HH') === '23') {
+        arr.push(currDate.clone().add({
+          hours: 1
+        }));
+      } else {
+        arr.push(currDate.clone());
+      }
       currDate.add({
         days: 1
       });

package/lib/Calendar/index.js

@@ -347,7 +347,21 @@ let Calendar = exports.Calendar = (_dec = (0, _emotion.withStyle)(_styles.defaul
     const currDate = _DateTime.DateTime.getFirstDayOfWeek(visibleMonth.clone().startOf('month'));
     const arr = [];
     for (let i = 0; i < Calendar.DAY_COUNT; i++) {
-      arr.push(currDate.clone());
+      // This workaround is needed because moment's `.add({days: 1})` function has a bug that happens when the date added lands perfectly onto the DST cutoff,
+      // in these cases adding 1 day results in 23 hours added instead,
+      // so `moment.tz('2024-09-07T00:00:00', 'America/Santiago').add({days: 1})` results
+      // in "Sat Sep 07 2024 23:00:00 GMT-0400" instead of "Sun Sep 08 2024 00:00:00 GMT-0400".
+      // which would cause duplicate dates in the calendar.
+      // More info on the bug: https://github.com/moment/moment/issues/4743
+      // Please note that this causes one hour of time difference in the affected timezones/dates and to
+      // fully solve this bug we need to change to something like luxon which handles this properly
+      if (currDate.clone().format('HH') === '23') {
+        arr.push(currDate.clone().add({
+          hours: 1
+        }));
+      } else {
+        arr.push(currDate.clone());
+      }
       currDate.add({
         days: 1
       });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-calendar",
-  "version": "10.3.1-snapshot-0",
+  "version": "10.3.1-snapshot-3",
   "description": "A calendar component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,31 +23,31 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.3.1-snapshot-0",
-    "@instructure/ui-color-utils": "10.3.1-snapshot-0",
-    "@instructure/ui-test-locator": "10.3.1-snapshot-0",
-    "@instructure/ui-test-utils": "10.3.1-snapshot-0",
-    "@instructure/ui-themes": "10.3.1-snapshot-0",
+    "@instructure/ui-babel-preset": "10.3.1-snapshot-3",
+    "@instructure/ui-color-utils": "10.3.1-snapshot-3",
+    "@instructure/ui-test-locator": "10.3.1-snapshot-3",
+    "@instructure/ui-test-utils": "10.3.1-snapshot-3",
+    "@instructure/ui-themes": "10.3.1-snapshot-3",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.1",
     "vitest": "^2.1.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.25.6",
-    "@instructure/console": "10.3.1-snapshot-0",
-    "@instructure/emotion": "10.3.1-snapshot-0",
-    "@instructure/shared-types": "10.3.1-snapshot-0",
-    "@instructure/ui-a11y-content": "10.3.1-snapshot-0",
-    "@instructure/ui-buttons": "10.3.1-snapshot-0",
-    "@instructure/ui-i18n": "10.3.1-snapshot-0",
-    "@instructure/ui-icons": "10.3.1-snapshot-0",
-    "@instructure/ui-prop-types": "10.3.1-snapshot-0",
-    "@instructure/ui-react-utils": "10.3.1-snapshot-0",
-    "@instructure/ui-simple-select": "10.3.1-snapshot-0",
-    "@instructure/ui-testable": "10.3.1-snapshot-0",
-    "@instructure/ui-utils": "10.3.1-snapshot-0",
-    "@instructure/ui-view": "10.3.1-snapshot-0",
-    "@instructure/uid": "10.3.1-snapshot-0",
+    "@instructure/console": "10.3.1-snapshot-3",
+    "@instructure/emotion": "10.3.1-snapshot-3",
+    "@instructure/shared-types": "10.3.1-snapshot-3",
+    "@instructure/ui-a11y-content": "10.3.1-snapshot-3",
+    "@instructure/ui-buttons": "10.3.1-snapshot-3",
+    "@instructure/ui-i18n": "10.3.1-snapshot-3",
+    "@instructure/ui-icons": "10.3.1-snapshot-3",
+    "@instructure/ui-prop-types": "10.3.1-snapshot-3",
+    "@instructure/ui-react-utils": "10.3.1-snapshot-3",
+    "@instructure/ui-simple-select": "10.3.1-snapshot-3",
+    "@instructure/ui-testable": "10.3.1-snapshot-3",
+    "@instructure/ui-utils": "10.3.1-snapshot-3",
+    "@instructure/ui-view": "10.3.1-snapshot-3",
+    "@instructure/uid": "10.3.1-snapshot-3",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/Calendar/README.md

@@ -162,8 +162,21 @@ basic `Calendar` might be created using utilities from
 
       return Array.apply(null, Array(Calendar.DAY_COUNT)).map(() => {
         const currentDate = date.clone()
-        date.add(1, 'days')
-        return currentDate
+        date.add({days: 1})
+
+        // This workaround is needed because moment's `.add({days: 1})` function has a bug that happens when the date added lands perfectly onto the DST cutoff,
+        // in these cases adding 1 day results in 23 hours added instead,
+        // so `moment.tz('2024-09-07T00:00:00', 'America/Santiago').add({days: 1})` results
+        // in "Sat Sep 07 2024 23:00:00 GMT-0400" instead of "Sun Sep 08 2024 00:00:00 GMT-0400".
+        // which would cause duplicate dates in the calendar.
+        // More info on the bug: https://github.com/moment/moment/issues/4743
+        // Please note that this causes one hour of time difference in the affected timezones/dates and to
+        // fully solve this bug we need to change to something like luxon which handles this properly
+        if (currentDate.clone().format('HH') === '23') {
+          return currentDate.clone().add({hours: 1})
+        }
+
+        return currentDate.clone()
       })
     }
 
@@ -274,8 +287,21 @@ basic `Calendar` might be created using utilities from
 
       return Array.apply(null, Array(Calendar.DAY_COUNT)).map(() => {
         const currentDate = date.clone()
-        date.add(1, 'days')
-        return currentDate
+        date.add({days: 1})
+
+        // This workaround is needed because moment's `.add({days: 1})` function has a bug that happens when the date added lands perfectly onto the DST cutoff,
+        // in these cases adding 1 day results in 23 hours added instead,
+        // so `moment.tz('2024-09-07T00:00:00', 'America/Santiago').add({days: 1})` results
+        // in "Sat Sep 07 2024 23:00:00 GMT-0400" instead of "Sun Sep 08 2024 00:00:00 GMT-0400".
+        // which would cause duplicate dates in the calendar.
+        // More info on the bug: https://github.com/moment/moment/issues/4743
+        // Please note that this causes one hour of time difference in the affected timezones/dates and to
+        // fully solve this bug we need to change to something like luxon which handles this properly
+        if (currentDate.clone().format('HH') === '23') {
+          return currentDate.clone().add({hours: 1})
+        }
+
+        return currentDate.clone()
       })
     }
 

package/src/Calendar/index.tsx

@@ -499,10 +499,25 @@ class Calendar extends Component<CalendarProps, CalendarState> {
     const currDate = DateTime.getFirstDayOfWeek(
       visibleMonth.clone().startOf('month')
     )
+
     const arr: Moment[] = []
     for (let i = 0; i < Calendar.DAY_COUNT; i++) {
-      arr.push(currDate.clone())
-      currDate.add({ days: 1 })
+
+      // This workaround is needed because moment's `.add({days: 1})` function has a bug that happens when the date added lands perfectly onto the DST cutoff,
+      // in these cases adding 1 day results in 23 hours added instead,
+      // so `moment.tz('2024-09-07T00:00:00', 'America/Santiago').add({days: 1})` results
+      // in "Sat Sep 07 2024 23:00:00 GMT-0400" instead of "Sun Sep 08 2024 00:00:00 GMT-0400".
+      // which would cause duplicate dates in the calendar.
+      // More info on the bug: https://github.com/moment/moment/issues/4743
+      // Please note that this causes one hour of time difference in the affected timezones/dates and to
+      // fully solve this bug we need to change to something like luxon which handles this properly
+      if (currDate.clone().format('HH') === '23') {
+        arr.push(currDate.clone().add({hours: 1}))
+      } else {
+        arr.push(currDate.clone())
+      }
+
+      currDate.add({days: 1})
     }
     return arr.map((date) => {
       const dateStr = date.toISOString()