chore(deps): update dependencies (#57)

* chore(deps): update @Kaizen packages

* chore(deps): update react-day-picker and date-fns

* chore: yarn.lock refresh

* fix: update types

* test: fix datepicker tests

* chore(deps): version lock @kaizen/components

* test: fix Calendar test selectors

* chore(date-picker): fix clean script

.changeset/pink-apples-kneel.md

@@ -0,0 +1,6 @@
+---
+"@kaizen/date-picker": patch
+---
+
+Update dependencies `react-day-picker` and `date-fns`.
+Add missing `Locale` type imports.

.changeset/red-buttons-confess.md

@@ -0,0 +1,5 @@
+---
+"@kaizen/select": patch
+---
+
+Fix `Key` type.

draft-packages/form/KaizenDraft/Form/Primitives/InputSearch/InputSearch.module.scss

@@ -46,8 +46,7 @@ $story-className--input-search-focus: ":global(.story__input-search-focus)";
   border: $border-solid-border-width $border-solid-border-style transparent;
   border-radius: $border-solid-border-radius-curved;
   padding-block: 0;
-  padding-inline-start: $input-padding-with-icon;
-  padding-inline-end: $input-padding-after-end-icon;
+  padding-inline: $input-padding-with-icon $input-padding-after-end-icon;
   font-size: 1rem;
   line-height: 1.5;
 

draft-packages/guidance-block/KaizenDraft/GuidanceBlock/GuidanceBlock.tsx

@@ -270,8 +270,8 @@ class GuidanceBlock extends React.Component<
               isMobile || componentIsMobile
                 ? 0
                 : this.props.layout === "default"
-                ? 0.5
-                : 0
+                  ? 0.5
+                  : 0
             }
           >
             <div

draft-packages/modal/KaizenDraft/Modal/Presets/ConfirmationModal.module.scss

@@ -120,8 +120,7 @@ $dt-assertive-header-background: $color-orange-100;
     @media (max-width: $layout-breakpoints-medium) {
       display: flex;
       flex-direction: column;
-      align-content: flex-start;
-      justify-content: center;
+      place-content: flex-start center;
       align-items: flex-start;
     }
 

draft-packages/modal/KaizenDraft/Modal/Primitives/GenericModal.tsx

@@ -233,8 +233,8 @@ const getOwnerDocument = <T extends HTMLElement = HTMLElement>(
   element && element.ownerDocument
     ? element.ownerDocument
     : canUseDOM()
-    ? document
-    : null
+      ? document
+      : null
 
 /**
  * Check if the DOM exists and is usable

draft-packages/select/KaizenDraft/Select/Select.tsx

@@ -64,8 +64,8 @@ export const Select = React.forwardRef<any, SelectProps>((props, ref) => {
     props.fullWidth != null
       ? props.fullWidth
       : variant === "secondary" || variant === "secondary-small"
-      ? false
-      : true
+        ? false
+        : true
 
   const classes = classnames(
     props.className,

draft-packages/tag/KaizenDraft/Tag/Tag.module.scss

@@ -44,13 +44,11 @@ $small: $spacing-md;
 .validationIcon {
   align-items: center;
   display: flex;
-  margin-inline-start: calc(#{$spacing-md} * -0.15);
-  margin-inline-end: $spacing-xs;
+  margin-inline: calc(#{$spacing-md} * -0.15) $spacing-xs;
 }
 
 .profile {
-  margin-inline-start: calc(#{$spacing-md} * -0.15);
-  margin-inline-end: $spacing-xs;
+  margin-inline: calc(#{$spacing-md} * -0.15) $spacing-xs;
   display: inline-flex;
   align-items: center;
 }
@@ -79,8 +77,7 @@ $small: $spacing-md;
   height: 100%;
   align-items: center;
   padding: 0 $spacing-xs;
-  margin-inline-end: -0.6625rem;
-  margin-inline-start: -0.225rem;
+  margin-inline: -0.225rem -0.6625rem;
   color: rgba($color-purple-800-rgb, 0.7);
   cursor: pointer;
 

package.json

@@ -34,10 +34,13 @@
     "ci:version": "yarn turbo build && yarn changeset version",
     "ci:publish": "yarn turbo build && yarn changeset publish"
   },
+  "dependenciesComments": {
+    "@kaizen/components": "Version locked as attempt to upgrade to 1.39.2 causes build errors"
+  },
   "dependencies": {
-    "@kaizen/components": "^1.21.0",
-    "@kaizen/design-tokens": "^10.3.11",
-    "@kaizen/tailwind": "1.0.5",
+    "@kaizen/components": "1.21.0",
+    "@kaizen/design-tokens": "^10.3.17",
+    "@kaizen/tailwind": "1.2.3",
     "@storybook/addons": "^7.2.1",
     "@storybook/api": "^7.2.1",
     "@storybook/blocks": "^7.2.1",

packages/date-picker/docs/Calendars.stories.tsx

@@ -132,32 +132,32 @@ const StickerSheetTemplate: StoryFn = () => (
 const applyStickerSheetStyles = (canvasElement: HTMLElement): void => {
   const canvas = within(canvasElement)
 
-  const getElementWithinCalendar = (id: string, name: string): HTMLElement => {
+  const getElementWithinCalendar = (
+    id: string,
+    role: string,
+    name: string
+  ): HTMLElement => {
     const calendar = canvas.getByTestId(id)
-    return within(calendar).getByRole("button", {
-      name,
-    })
+    return within(calendar).getByRole(role, { name })
   }
 
   const todayCalendarIds = ["today-default", "today-selected", "today-disabled"]
 
   todayCalendarIds.forEach(id => {
-    getElementWithinCalendar(id, "1st May (Sunday)").classList.add(
-      styles.dayToday
-    )
+    getElementWithinCalendar(id, "gridcell", "1").classList.add(styles.dayToday)
   })
 
   const calendars = [
-    { row: "default", buttonDescription: "5th September (Sunday)" },
-    { row: "selected", buttonDescription: "5th September (Sunday)" },
-    { row: "navigation", buttonDescription: "Go to previous month" },
+    { row: "default", role: "gridcell", name: "5" },
+    { row: "selected", role: "gridcell", name: "5" },
+    { row: "navigation", role: "button", name: "Go to previous month" },
   ]
 
-  calendars.forEach(({ row, buttonDescription }) => {
-    getElementWithinCalendar(`${row}-hover`, buttonDescription).classList.add(
+  calendars.forEach(({ row, role, name }) => {
+    getElementWithinCalendar(`${row}-hover`, role, name).classList.add(
       "story__datepicker__calendar--hover"
     )
-    getElementWithinCalendar(`${row}-focus`, buttonDescription).classList.add(
+    getElementWithinCalendar(`${row}-focus`, role, name).classList.add(
       "story__datepicker__calendar--focus"
     )
   })

packages/date-picker/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "prepublishOnly": "tsc --project tsconfig.dist.json",
     "build": "yarn clean && yarn prepublishOnly",
-    "clean": "rimraf -g '**/*.d.ts' '**/*.js' '**/*.map'"
+    "clean": "rimraf -g 'src/**/*.d.ts' 'src/**/*.js' 'src/**/*.map' 'index.d.ts' 'index.js' 'index.js.map'"
   },
   "repository": {
     "type": "git",
@@ -36,15 +36,12 @@
     "@react-aria/i18n": "^3.8.1",
     "@react-stately/datepicker": "^3.6.0",
     "classnames": "^2.3.2",
-    "date-fns": "^2.30.0",
-    "react-day-picker": "8.4.1",
+    "date-fns": "^3.2.0",
+    "react-day-picker": "8.10.0",
     "react-focus-on": "^3.9.1",
     "react-popper": "^2.3.0",
     "uuid": "^9.0.0"
   },
-  "dependenciesComments": {
-    "react-day-picker": "Version locked until a11y gets fixed (https://github.com/gpbl/react-day-picker/pull/1708)"
-  },
   "peerDependencies": {
     "@kaizen/design-tokens": "^2.10.3 || ^3.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0",
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0"

packages/date-picker/src/DatePicker/DatePicker.spec.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react"
-import { render, screen, waitFor } from "@testing-library/react"
+import { render, screen, waitFor, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { ValidationResponse } from "../types"
 import { DatePicker } from "./DatePicker"
@@ -166,9 +166,8 @@ describe("<DatePicker /> - Focus element", () => {
         expect(screen.queryByRole("dialog")).toBeVisible()
       })
 
-      const dateToSelect = screen.getByRole("button", {
-        name: "6th March (Sunday)",
-      })
+      const month = screen.getByRole("grid", { name: "March 2022" })
+      const dateToSelect = within(month).getByRole("gridcell", { name: "6" })
       await user.click(dateToSelect)
 
       const input = screen.getByLabelText("Input label")
@@ -193,9 +192,8 @@ describe("<DatePicker /> - Focus element", () => {
         expect(screen.queryByRole("dialog")).toBeVisible()
       })
 
-      const selectedDate = screen.getByRole("button", {
-        name: "1st March (Tuesday)",
-      })
+      const month = screen.getByRole("grid", { name: "March 2022" })
+      const selectedDate = within(month).getByRole("gridcell", { name: "1" })
       expect(selectedDate).toHaveFocus()
     })
 
@@ -233,9 +231,8 @@ describe("<DatePicker /> - Focus element", () => {
         expect(screen.getByRole("dialog")).toBeVisible()
       })
 
-      const selectedDate = screen.getByRole("button", {
-        name: "1st March (Tuesday)",
-      })
+      const month = screen.getByRole("grid", { name: "March 2022" })
+      const selectedDate = within(month).getByRole("gridcell", { name: "1" })
       expect(selectedDate).toHaveFocus()
     })
 
@@ -278,9 +275,8 @@ describe("<DatePicker /> - Focus element", () => {
         expect(screen.getByRole("dialog")).toBeVisible()
       })
 
-      const selectedDate = screen.getByRole("button", {
-        name: "1st March (Tuesday)",
-      })
+      const month = screen.getByRole("grid", { name: "March 2022" })
+      const selectedDate = within(month).getByRole("gridcell", { name: "1" })
       expect(selectedDate).toHaveFocus()
     })
 
@@ -418,9 +414,9 @@ describe("<DatePicker /> - Validation", () => {
       await waitFor(() => {
         expect(screen.queryByRole("dialog")).toBeVisible()
       })
-      const dateToSelect = screen.getByRole("button", {
-        name: "6th March (Sunday)",
-      })
+
+      const month = screen.getByRole("grid", { name: "March 2022" })
+      const dateToSelect = within(month).getByRole("gridcell", { name: "6" })
       await user.click(dateToSelect)
       await waitFor(() => {
         expect(onValidate).toBeCalledTimes(1)

packages/date-picker/src/DatePicker/components/DateInputField/DateInputField.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import classnames from "classnames"
+import type { Locale } from "date-fns"
 import { FieldMessage, FieldMessageStatus } from "@kaizen/draft-form"
 import {
   DateInputWithIconButton,

packages/date-picker/src/_subcomponents/Calendar/LegacyCalendarRange.tsx

@@ -1,4 +1,5 @@
 import React from "react"
+import type { Locale } from "date-fns"
 import {
   DayPicker,
   DateRange,

packages/date-picker/src/_subcomponents/DateInputDescription/DateInputDescription.tsx

@@ -1,4 +1,5 @@
 import React from "react"
+import type { Locale } from "date-fns"
 import { formatDescriptionInputFormat } from "../../utils/formatDescriptionInputFormat"
 import styles from "./DateInputDescription.module.scss"
 

packages/date-picker/src/hooks/useDateInputHandlers.ts

@@ -1,4 +1,5 @@
 import { Dispatch } from "react"
+import type { Locale } from "date-fns"
 import { DateInputProps } from "../_subcomponents/DateInput"
 import { DisabledDays } from "../types"
 import { formatDateAsNumeral } from "../utils/formatDateAsNumeral"

packages/date-picker/src/utils/formatDateAsNumeral.ts

@@ -1,4 +1,4 @@
-import { format } from "date-fns"
+import { Locale, format } from "date-fns"
 import { DateFormat } from "../enums"
 import { isInvalidDate } from "./isInvalidDate"
 

packages/date-picker/src/utils/formatDateAsText.ts

@@ -1,4 +1,4 @@
-import { format } from "date-fns"
+import { Locale, format } from "date-fns"
 import { DateFormat } from "../enums"
 import { DisabledDays } from "../types"
 import { isDisabledDate } from "./isDisabledDate"

packages/date-picker/src/utils/formatDescriptionInputFormat.ts

@@ -1,2 +1,4 @@
+import type { Locale } from "date-fns"
+
 export const formatDescriptionInputFormat = (locale: Locale): string =>
   locale.formatLong?.date({ width: "short" }).toLowerCase()

packages/date-picker/src/utils/getLocale.ts

@@ -1,3 +1,4 @@
+import type { Locale } from "date-fns"
 import { enAU, enUS } from "date-fns/locale"
 import { SupportedLocales } from "../types"
 

packages/date-picker/src/utils/isSelectingDayInCalendar.spec.tsx

@@ -1,15 +1,14 @@
 import React from "react"
-import { render, screen } from "@testing-library/react"
+import { render, screen, within } from "@testing-library/react"
 import { CalendarSingle } from "../_subcomponents/Calendar"
 import { isSelectingDayInCalendar } from "./isSelectingDayInCalendar"
 
 describe("isSelectingDayInCalendar", () => {
   it("returns true when target is a Calendar day", () => {
     render(<CalendarSingle defaultMonth={new Date("2022-02-01")} />)
-    const calendarDayElement = screen.getByRole("button", {
-      name: "1st February (Tuesday)",
-    })
-    expect(isSelectingDayInCalendar(calendarDayElement)).toBe(true)
+    const targetMonth = screen.getByRole("grid", { name: "February 2022" })
+    const targetDay = within(targetMonth).getByRole("gridcell", { name: "1" })
+    expect(isSelectingDayInCalendar(targetDay)).toBe(true)
   })
 
   it("returns false when target is not a Calendar day", () => {

packages/date-picker/src/utils/parseDateAsTextOrNumeral.ts

@@ -1,3 +1,4 @@
+import type { Locale } from "date-fns"
 import { parseDateFromNumeralFormatValue } from "./parseDateFromNumeralFormatValue"
 import { parseDateFromTextFormatValue } from "./parseDateFromTextFormatValue"
 

packages/date-picker/src/utils/parseDateFromNumeralFormatValue.ts

@@ -1,4 +1,4 @@
-import { parse } from "date-fns"
+import { Locale, parse } from "date-fns"
 import { DateFormat } from "../enums"
 
 export const parseDateFromNumeralFormatValue = (

packages/date-picker/src/utils/parseDateFromTextFormatValue.ts

@@ -1,4 +1,4 @@
-import { parse } from "date-fns"
+import { Locale, parse } from "date-fns"
 import { DateFormat } from "../enums"
 
 export const parseDateFromTextFormatValue = (

packages/date-picker/src/utils/setFocusInCalendar.spec.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { render, screen } from "@testing-library/react"
+import { render, screen, within } from "@testing-library/react"
 import { format } from "date-fns"
 import { enUS } from "date-fns/locale"
 import { CalendarSingle, CalendarSingleProps } from "../_subcomponents/Calendar"
@@ -18,38 +18,43 @@ const CalendarWrapper = (props: Partial<CalendarSingleProps>): JSX.Element => (
 )
 
 const today = new Date()
-const todayFormatted = format(today, "do MMMM (eeee)") // e.g 6th June (Monday)
+const todayMonth = format(today, "MMMM yyyy") // e.g "June 2023"
+const todayDay = today.getDate().toString() // e.g "6"
 
 describe("setFocusInCalendar", () => {
   it("should focus on today when no date is selected", () => {
     render(<CalendarWrapper />)
 
-    const dayToFocus = screen.getByRole("button", { name: todayFormatted })
-    expect(dayToFocus).toHaveFocus()
+    const targetMonth = screen.getByRole("grid", { name: todayMonth })
+    const targetDay = within(targetMonth).getByRole("gridcell", {
+      name: todayDay,
+    })
+    expect(targetDay).toHaveFocus()
   })
 
   it("should focus on the selected day", () => {
     render(<CalendarWrapper selected={new Date("2022-08-15")} />)
 
-    const dayToFocus = screen.getByRole("button", {
-      name: "15th August (Monday)",
-    })
-    expect(dayToFocus).toHaveFocus()
+    const targetMonth = screen.getByRole("grid", { name: "August 2022" })
+    const targetDay = within(targetMonth).getByRole("gridcell", { name: "15" })
+    expect(targetDay).toHaveFocus()
   })
 
   it("should focus on today when selected date is invalid", () => {
     render(<CalendarWrapper selected={new Date("potato")} />)
 
-    const dayToFocus = screen.getByRole("button", { name: todayFormatted })
-    expect(dayToFocus).toHaveFocus()
+    const targetMonth = screen.getByRole("grid", { name: todayMonth })
+    const targetDay = within(targetMonth).getByRole("gridcell", {
+      name: todayDay,
+    })
+    expect(targetDay).toHaveFocus()
   })
 
   it("should focus on the first of the month when there is no selected day nor in the current month", () => {
     render(<CalendarWrapper defaultMonth={new Date("2022-05-01")} />)
 
-    const dayToFocus = screen.getByRole("button", {
-      name: "1st May (Sunday)",
-    })
-    expect(dayToFocus).toHaveFocus()
+    const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+    const targetDay = within(targetMonth).getByRole("gridcell", { name: "1" })
+    expect(targetDay).toHaveFocus()
   })
 })