fix: Update dependencies to fix disabled dates not updating correctly

Also, updated tests to test disabled dates updating correctly when
`showWeekNumber` is set to true.

package.json

@@ -68,7 +68,7 @@
     "@material/mwc-button": "^0.13.0",
     "lit-element": "^2.2.1",
     "lit-html": "^1.1.2",
-    "nodemod": "^2.4.0",
+    "nodemod": "^2.4.1",
     "tslib": "^1.11.1"
   },
   "devDependencies": {
@@ -77,7 +77,7 @@
     "@types/mocha": "^7.0.2",
     "@types/pretty": "^2.0.0",
     "@types/request": "^2.48.4",
-    "@wdio/cli": "^5.21.0",
+    "@wdio/cli": "^5.22.0",
     "@wdio/local-runner": "^5.21.0",
     "@wdio/mocha-framework": "^5.18.7",
     "@wdio/sauce-service": "^5.16.10",

src/datepicker.ts

@@ -18,7 +18,7 @@ import { classMap } from 'lit-html/directives/class-map.js';
 import { repeat } from 'lit-html/directives/repeat.js';
 
 import type { WeekNumberType } from 'nodemod/dist/calendar/calendar_typing.js';
-import { toUTCDate } from 'nodemod/dist/calendar/to-utc-date.js';
+import { toUTCDate } from 'nodemod/dist/calendar/helpers/to-utc-date.js';
 import { iconChevronLeft, iconChevronRight } from './app-datepicker-icons.js';
 import { datepickerVariables, resetButton } from './common-styles.js';
 import { ALL_NAV_KEYS_SET } from './constants.js';
@@ -868,12 +868,12 @@ export class Datepicker extends LitElement {
                   const { disabled, fullDate, label, value } = calendarCol;
 
                   /** Empty day */
-                  if (value == null) {
+                  if (!value) {
                     return html`<td class="full-calendar__day day--empty" part="calendar-day"></td>`;
                   }
 
                   /** Week label, if any */
-                  if (fullDate == null && value && showWeekNumber && i < 1) {
+                  if (!fullDate && value && showWeekNumber && i < 1) {
                     return html`<th
                       class="full-calendar__day weekday-label"
                       part="calendar-day"

src/helpers/compute-next-focus-date.ts

@@ -1,4 +1,4 @@
-import { toUTCDate } from 'nodemod/dist/calendar/to-utc-date.js';
+import { toUTCDate } from 'nodemod/dist/calendar/helpers/to-utc-date.js';
 import { NEXT_KEY_CODES_SET, PREV_KEY_CODES_SET } from '../constants.js';
 import { KEY_CODES_MAP } from '../custom_typings.js';
 import { getNextSelectableDate } from './get-selectable-date.js';

src/helpers/get-multi-calendars.ts

@@ -6,7 +6,7 @@ import type {
   WeekNumberType,
 } from 'nodemod/dist/calendar/calendar_typing.js';
 import { getWeekdays } from 'nodemod/dist/calendar/get-weekdays.js';
-import { toUTCDate } from 'nodemod/dist/calendar/to-utc-date.js';
+import { toUTCDate } from 'nodemod/dist/calendar/helpers/to-utc-date.js';
 
 interface MultiCalendars extends NonNullable<Omit<Calendar, 'calendar' | 'key'>> {
   key: string;

src/helpers/get-resolved-date.ts

@@ -1,4 +1,4 @@
-import { toUTCDate } from 'nodemod/dist/calendar/to-utc-date.js';
+import { toUTCDate } from 'nodemod/dist/calendar/helpers/to-utc-date.js';
 
 export function getResolvedDate(date?: number | Date | string | undefined): Date {
   const dateDate = date == null ? new Date() : new Date(date);

src/helpers/get-selectable-date.ts

@@ -1,4 +1,4 @@
-import { toUTCDate } from 'nodemod/dist/calendar/to-utc-date.js';
+import { toUTCDate } from 'nodemod/dist/calendar/helpers/to-utc-date.js';
 import { NEXT_DAY_KEY_CODES_SET, PREV_DAY_KEY_CODES_SET } from '../constants.js';
 import { getDateRange } from './get-date-range.js';
 

src/tests/app-datepicker/attributes.spec.ts

@@ -595,62 +595,93 @@ describe('attributes', () => {
     );
   });
 
-  it(`renders with different 'firstdayofweek' and 'disableddays'`, async () => {
-    type A = [number, string, string, string, string, string[]];
-
-    const [
-      prop,
-      attr,
-      prop2,
-      attr2,
-      focusedDateContent,
-      disabledDatesContents,
-    ]: A = await browser.executeAsync(async (a, b, c, done) => {
-      const n = document.body.querySelector<Datepicker>(a)!;
-
-      n.min = '2000-01-01';
-      n.value = '2020-01-15';
-      n.setAttribute('firstdayofweek', '2');
-      n.setAttribute('disableddays', '1,5');
-
-      await n.updateComplete;
-
-      const root = n.shadowRoot!;
-
-      const focusedDate = root.querySelector<HTMLTableCellElement>(b)!;
-      const disabledDates = Array.from(
-        root.querySelectorAll<HTMLTableCellElement>(c), o => o.outerHTML);
-
-      done([
-        n.firstDayOfWeek,
-        n.getAttribute('firstdayofweek'),
-        n.disabledDays,
-        n.getAttribute('disableddays'),
-        focusedDate.outerHTML,
-        disabledDates,
-      ] as A);
-    },
-    DATEPICKER_NAME,
-    toSelector('tbody > tr:nth-of-type(3) > td:nth-of-type(2)'),
-    toSelector('.day--disabled'));
-
-    strictEqual(prop, 2);
-    strictEqual(attr, '2');
-    allStrictEqual([prop2, attr2], '1,5');
-    strictEqual(cleanHtml(focusedDateContent), prettyHtml`
+  it(`renders with different 'showweeknumber', 'firstdayofweek', and 'disableddays'`, async () => {
+    type A = [number, string, string, string, boolean, string, string[]];
+
+    const props: number[] = [];
+    const attrs: string[] = [];
+    const props2: string[] = [];
+    const attrs2: string[] = [];
+    const showWeekNumberProps: boolean[] = [];
+    const focusedDateContents: string[] = [];
+    const disabledDatesContents: string[][] = [];
+
+    for (const showWeekNumber of [true, false]) {
+      const [
+        prop,
+        attr,
+        prop2,
+        attr2,
+        prop3,
+        focusedDateContent,
+        disabledDatesContent,
+      ]: A = await browser.executeAsync(async (a, b, c, d, done) => {
+        const n = document.body.querySelector<Datepicker>(a)!;
+
+        n.min = '2000-01-01';
+        n.value = '2020-01-15';
+        n.setAttribute('firstdayofweek', '2');
+        n.setAttribute('disableddays', '1,5');
+
+        if (b) {
+          n.setAttribute('showweeknumber', '');
+        } else {
+          n.removeAttribute('showweeknumber');
+        }
+
+        await n.updateComplete;
+
+        const root = n.shadowRoot!;
+
+        const focusedDate = root.querySelector<HTMLTableCellElement>(c)!;
+        const disabledDates = Array.from(
+          root.querySelectorAll<HTMLTableCellElement>(d), o => o.outerHTML);
+
+        done([
+          n.firstDayOfWeek,
+          n.getAttribute('firstdayofweek'),
+          n.disabledDays,
+          n.getAttribute('disableddays'),
+          n.showWeekNumber,
+          focusedDate.outerHTML,
+          disabledDates,
+        ] as A);
+      },
+      DATEPICKER_NAME,
+      showWeekNumber,
+      toSelector('tbody > tr:nth-of-type(3) > td:nth-of-type(2)'),
+      toSelector('.day--disabled'));
+
+      props.push(prop);
+      attrs.push(attr);
+      props2.push(prop2);
+      attrs2.push(attr2);
+      showWeekNumberProps.push(prop3);
+      focusedDateContents.push(focusedDateContent);
+      disabledDatesContents.push(disabledDatesContent);
+    }
+
+    allStrictEqual(props, 2);
+    allStrictEqual(attrs, '2');
+    allStrictEqual(props2.concat(attrs2), '1,5');
+    deepStrictEqual(showWeekNumberProps, [true, false]);
+    allStrictEqual(focusedDateContents.map(n => cleanHtml(n)), prettyHtml`
     <td class="full-calendar__day day--focused" aria-disabled="false" aria-label="Jan 15, 2020" aria-selected="true">
       <div class="calendar-day">15</div>
     </td>
     `);
-    deepStrictEqual(disabledDatesContents.map(n => cleanHtml(n)), [
+
+    const expectedDisabledDatesContent = [
       3, 6, 10, 13, 17, 20, 24, 27, 31,
     ].map((n) => {
       return prettyHtml(`
       <td class="full-calendar__day day--disabled" aria-disabled="true" aria-label="Jan ${n}, 2020" aria-selected="false">
         <div class="calendar-day">${n}</div>
       </td>
       `);
-    }));
+    });
+    deepStrictEqual(disabledDatesContents[0].map(n => cleanHtml(n)), expectedDisabledDatesContent);
+    deepStrictEqual(disabledDatesContents[1].map(n => cleanHtml(n)), expectedDisabledDatesContent);
   });
 
 });

src/tests/app-datepicker/properties.spec.ts

@@ -607,51 +607,73 @@ describe('properties', () => {
     );
   });
 
-  it(`renders with different 'firstDayOfWeek' and 'disabledDays'`, async () => {
-    type A = [number, string, string, string, string[]];
-
-    const [
-      prop,
-      attr,
-      prop2,
-      focusedDateContent,
-      disabledDatesContents,
-    ]: A = await browser.executeAsync(async (a, b, c, done) => {
-      const n = document.body.querySelector<Datepicker>(a)!;
-      const root = n.shadowRoot!;
-
-      n.min = '2000-01-01';
-      n.value = '2020-01-15';
-      n.firstDayOfWeek = 2;
-      n.disabledDays = '1,5';
-
-      await n.updateComplete;
-
-      const focusedDate = root.querySelector<HTMLTableCellElement>(b)!;
-      const disabledDates = Array.from(
-        root.querySelectorAll<HTMLTableCellElement>(c), o => o.outerHTML);
-
-      done([
-        n.firstDayOfWeek,
-        n.getAttribute('firstdayofweek'),
-        n.disabledDays,
-        focusedDate.outerHTML,
-        disabledDates,
-      ] as A);
-    },
-    DATEPICKER_NAME,
-    toSelector('tbody > tr:nth-of-type(3) > td:nth-of-type(2)'),
-    toSelector('.day--disabled'));
-
-    strictEqual(prop, 2);
-    strictEqual(attr, '2');
-    strictEqual(prop2, '1,5');
-    strictEqual(cleanHtml(focusedDateContent), prettyHtml`
+  it(`renders with different 'showWeekNumber', 'firstDayOfWeek', and 'disabledDays'`, async () => {
+    type A = [number, string, string, boolean, string, string[]];
+
+    const props: number[] = [];
+    const attrs: string[] = [];
+    const props2: string[] = [];
+    const showWeekNumberProps: boolean[] = [];
+    const focusedDateContents: string[] = [];
+    const disabledDatesContents: string[][] = [];
+
+    for (const showWeekNumber of [true, false]) {
+      const [
+        prop,
+        attr,
+        prop2,
+        prop3,
+        focusedDateContent,
+        disabledDatesContent,
+      ]: A = await browser.executeAsync(async (a, b, c, d, done) => {
+        const n = document.body.querySelector<Datepicker>(a)!;
+        const root = n.shadowRoot!;
+
+        n.min = '2000-01-01';
+        n.value = '2020-01-15';
+        n.firstDayOfWeek = 2;
+        n.disabledDays = '1,5';
+        n.showWeekNumber = b;
+
+        await n.updateComplete;
+
+        const focusedDate = root.querySelector<HTMLTableCellElement>(c)!;
+        const disabledDates = Array.from(
+          root.querySelectorAll<HTMLTableCellElement>(d), o => o.outerHTML);
+
+        done([
+          n.firstDayOfWeek,
+          n.getAttribute('firstdayofweek'),
+          n.disabledDays,
+          n.showWeekNumber,
+          focusedDate.outerHTML,
+          disabledDates,
+        ] as A);
+      },
+      DATEPICKER_NAME,
+      showWeekNumber,
+      toSelector('tbody > tr:nth-of-type(3) > td:nth-of-type(2)'),
+      toSelector('.day--disabled'));
+
+      props.push(prop);
+      attrs.push(attr);
+      props2.push(prop2);
+      showWeekNumberProps.push(prop3);
+      focusedDateContents.push(focusedDateContent);
+      disabledDatesContents.push(disabledDatesContent);
+    }
+
+    allStrictEqual(props, 2);
+    allStrictEqual(attrs, '2');
+    allStrictEqual(props2, '1,5');
+    deepStrictEqual(showWeekNumberProps, [true, false]);
+    allStrictEqual(focusedDateContents.map(n => cleanHtml(n)), prettyHtml`
     <td class="full-calendar__day day--focused" aria-disabled="false" aria-label="Jan 15, 2020" aria-selected="true">
       <div class="calendar-day">15</div>
     </td>
     `);
-    deepStrictEqual(disabledDatesContents.map(n => cleanHtml(n)), [
+
+    const expectedDisabledDatesContent = [
       3,
       6,
       10,
@@ -667,7 +689,9 @@ describe('properties', () => {
         <div class="calendar-day">${n}</div>
       </td>
       `);
-    }));
+    });
+    deepStrictEqual(disabledDatesContents[0].map(n => cleanHtml(n)), expectedDisabledDatesContent);
+    deepStrictEqual(disabledDatesContents[1].map(n => cleanHtml(n)), expectedDisabledDatesContent);
   });
 
 });