Upgrade

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@duetds/date-picker",
-  "version": "1.4.0",
+  "name": "web-date-picker",
+  "version": "1.4.1",
   "description": "Duet Date Picker is an open source version of Duet Design System’s accessible date picker.",
   "author": "LocalTapiola Services Ltd <[email protected]>",
   "license": "MIT",
@@ -57,30 +57,31 @@
     "email": "[email protected]"
   },
   "dependencies": {
-    "@stencil/core": "^2.3.0"
+    "@stencil/core": "^4.12.0"
   },
   "devDependencies": {
-    "@stencil/sass": "1.3.2",
-    "@stencil/utils": "latest",
-    "@types/jest": "26.0.10",
-    "@types/jest-image-snapshot": "3.1.0",
-    "@types/puppeteer": "3.0.1",
-    "@typescript-eslint/eslint-plugin": "2.13.0",
-    "@typescript-eslint/parser": "2.13.0",
-    "eslint": "6.8.0",
-    "eslint-config-prettier": "6.7.0",
-    "eslint-plugin-prettier": "3.1.2",
-    "husky": "4.2.5",
-    "jest": "26.4.1",
-    "jest-cli": "26.4.1",
-    "jest-image-snapshot": "4.1.0",
-    "prettier": "1.19.1",
+    "@stencil/core": "^4.12.0",
+    "@stencil/sass": "^3.0.9",
+    "@types/jest": "^29.5.11",
+    "@types/jest-image-snapshot": "6.4.0",
+    "@types/puppeteer": "5.4.7",
+    "@typescript-eslint/eslint-plugin": "6.20.0",
+    "@typescript-eslint/parser": "6.20.0",
+    "eslint": "8.56.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-prettier": "5.1.3",
+    "husky": "9.0.7",
+    "jest": "^29.7.0",
+    "jest-cli": "^29.7.0",
+    "jest-image-snapshot": "6.4.0",
+    "prettier": "3.2.4",
     "prettier-stylelint": "0.4.2",
-    "pretty-quick": "^2.0.1",
-    "puppeteer": "5.2.1",
+    "pretty-quick": "^4.0.0",
+    "puppeteer": "^21.10.0",
     "sass-lint": "1.13.1",
     "sass-lint-auto-fix": "0.21.2",
-    "typescript": "3.9.7"
+    "typescript": "5.3.3",
+    "workbox-build": "^7.0.0"
   },
   "sasslintConfig": "./.sasslintrc.json",
   "eslintConfig": {

src/components/duet-date-picker/date-picker-month.tsx

@@ -1,7 +1,7 @@
 import { h, FunctionalComponent } from "@stencil/core"
 import { DuetLocalizedText } from "./date-localization"
 import { DatePickerDay, DatePickerDayProps } from "./date-picker-day"
-import { getViewOfMonth, inRange, DaysOfWeek, isEqual } from "./date-utils"
+import { getViewOfMonth, inRange, DaysOfWeek, isInList } from "./date-utils"
 import { DateDisabledPredicate } from "./duet-date-picker"
 
 function chunk<T>(array: T[], chunkSize: number): T[][] {
@@ -22,7 +22,7 @@ function mapWithOffset<T, U>(array: T[], startingOffset: number, mapFn: (item: T
 }
 
 type DatePickerMonthProps = {
-  selectedDate: Date
+  selectedDates: Date[]
   focusedDate: Date
   labelledById: string
   localization: DuetLocalizedText
@@ -37,7 +37,7 @@ type DatePickerMonthProps = {
 }
 
 export const DatePickerMonth: FunctionalComponent<DatePickerMonthProps> = ({
-  selectedDate,
+  selectedDates,
   focusedDate,
   labelledById,
   localization,
@@ -74,7 +74,7 @@ export const DatePickerMonth: FunctionalComponent<DatePickerMonthProps> = ({
                   day={day}
                   today={today}
                   focusedDay={focusedDate}
-                  isSelected={isEqual(day, selectedDate)}
+                  isSelected={isInList(day, selectedDates)}
                   disabled={isDateDisabled(day)}
                   inRange={inRange(day, min, max)}
                   onDaySelect={onDateSelect}

src/components/duet-date-picker/date-utils.ts

@@ -82,6 +82,13 @@ export function isEqual(a: Date, b: Date): boolean {
   return isEqualMonth(a, b) && a.getDate() === b.getDate()
 }
 
+/**
+ * Compare if date a is in date list b
+ */
+export function isInList(a: Date, b: Date[]): boolean {
+  return b.some(b => isEqual(a, b))
+}
+
 /**
  * Compare if two dates are in the same month of the same year.
  */