fix(hooks): fix start of the month

affects: @datepicker-react/hooks, @datepicker-react/styled

ISSUES CLOSED: #7

Author: tresko

packages/hooks/lib/index.cjs.js

@@ -2359,7 +2359,7 @@ function getDays(e) {
     u = startOfMonth(s),
     d = getDay(u),
     c = endOfMonth(s),
-    l = Array.from(Array(d >= a ? d - a : a).keys()).fill(0),
+    l = Array.from(Array(d >= a ? d - a : 6 - a + d + 1).keys()).fill(0),
     f = eachDayOfInterval({start: u, end: c}).map(function(e) {
       return {date: e, dayLabel: o(e)}
     })

packages/hooks/lib/index.esm.js

@@ -2296,7 +2296,7 @@ function It(t) {
         n = e.getMonth()
       return e.setFullYear(e.getFullYear(), n + 1, 0), e.setHours(23, 59, 59, 999), e
     })(u),
-    l = Array.from(Array(c >= a ? c - a : a).keys()).fill(0),
+    l = Array.from(Array(c >= a ? c - a : 6 - a + c + 1).keys()).fill(0),
     f = Lt({start: s, end: d}).map(function(t) {
       return {date: t, dayLabel: o(t)}
     })

packages/hooks/src/useMonth/useMonth.test.ts

@@ -64,6 +64,18 @@ describe('getDays', () => {
     expect(result.current[result.current.length - 1].dayLabel).toBe('31')
   })
 
+  test('should return days for september 2019', () => {
+    const {result} = renderHook(() => getDays({year: 2019, month: 8}))
+    expect(result.current.length).toBe(36)
+    expect(typeof result.current[0]).toBe('number')
+    expect(typeof result.current[5]).toBe('number')
+    expect(typeof result.current[6]).toBe('object')
+    // @ts-ignore
+    expect(result.current[6].dayLabel).toBe('01')
+    // @ts-ignore
+    expect(result.current[result.current.length - 1].dayLabel).toBe('30')
+  })
+
   test('should return days for march 2019 start with sunday', () => {
     const {result} = renderHook(() => getDays({year: 2019, month: 2, firstDayOfWeek: 0}))
     expect(result.current.length).toBe(36)

packages/hooks/src/useMonth/useMonth.utils.ts

@@ -50,7 +50,11 @@ export function getDays({
   const monthEnd = endOfMonth(date)
 
   const prevMonthDays = Array.from(
-    Array(monthStartDay >= firstDayOfWeek ? monthStartDay - firstDayOfWeek : firstDayOfWeek).keys(),
+    Array(
+      monthStartDay >= firstDayOfWeek
+        ? monthStartDay - firstDayOfWeek
+        : 6 - firstDayOfWeek + monthStartDay + 1,
+    ).keys(),
   ).fill(0)
   const days = eachDay({start: monthStart, end: monthEnd}).map(date => ({
     date,

packages/styled/lib/index.cjs.js

@@ -2304,7 +2304,7 @@ function It(e) {
         r = t.getMonth()
       return t.setFullYear(t.getFullYear(), r + 1, 0), t.setHours(23, 59, 59, 999), t
     })(s),
-    u = Array.from(Array(c >= n ? c - n : n).keys()).fill(0),
+    u = Array.from(Array(c >= n ? c - n : 6 - n + c + 1).keys()).fill(0),
     p = Lt({start: l, end: d}).map(function(e) {
       return {date: e, dayLabel: i(e)}
     })

packages/styled/lib/index.esm.js

@@ -2200,7 +2200,7 @@ function Oe(e) {
                 r = t.getMonth()
               return t.setFullYear(t.getFullYear(), r + 1, 0), t.setHours(23, 59, 59, 999), t
             })(s),
-            u = Array.from(Array(c >= a ? c - a : a).keys()).fill(0),
+            u = Array.from(Array(c >= a ? c - a : 6 - a + c + 1).keys()).fill(0),
             p = Me({start: d, end: l}).map(function(e) {
               return {date: e, dayLabel: i(e)}
             })