@kaizen/components 1.39.1 → 1.39.2

package/src/Filter/FilterBar/subcomponents/FilterBarDateRangePicker/FilterBarDateRangePicker.tsx

@@ -44,7 +44,7 @@ export const FilterBarDateRangePicker = ({
       renderTrigger={(triggerProps): JSX.Element => (
         <FilterBarButton
           {...triggerProps}
-          id={id}
+          filterId={id}
           isRemovable={filterState.isRemovable}
         />
       )}

package/src/Filter/FilterBar/subcomponents/FilterBarSelect/FilterBarSelect.tsx

@@ -55,7 +55,7 @@ export const FilterBarSelect = <Option extends SelectOption = SelectOption>({
       renderTrigger={(triggerProps): JSX.Element => (
         <FilterBarButton
           {...triggerProps}
-          id={id}
+          filterId={id}
           isRemovable={filterState.isRemovable}
         />
       )}

package/src/Filter/FilterDatePicker/FilterDatePicker.spec.stories.tsx

@@ -61,7 +61,7 @@ export const SubmitInputViaEnterKey: Story = {
     })
 
     await step("Type value and press Enter key", async () => {
-      const inputDate = getByLabelText("Date")
+      const inputDate = getByLabelText("Date", { selector: "input" })
       await userEvent.click(inputDate)
       await userEvent.type(inputDate, "03/05/2022")
       await userEvent.keyboard("{Enter}")

package/src/Filter/FilterDatePicker/FilterDatePicker.spec.tsx

@@ -1,5 +1,5 @@
 import React, { 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 { FilterButton } from "~components/Filter/FilterButton"
 import { FilterDatePicker, FilterDatePickerProps } from "."
@@ -75,10 +75,8 @@ describe("<FilterDatePicker />", () => {
       expect(dialog).toBeInTheDocument()
     })
 
-    const targetDay = screen.getByRole("button", {
-      name: "2nd May (Monday)",
-    })
-
+    const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+    const targetDay = within(targetMonth).getByRole("gridcell", { name: "2" })
     await user.click(targetDay)
 
     await waitFor(() => {

package/src/Filter/FilterDatePicker/hooks/useDateInputHandlers.ts

@@ -1,3 +1,4 @@
+import type { Locale } from "date-fns"
 import {
   DisabledDays,
   formatDateAsNumeral,

package/src/Filter/FilterDatePicker/subcomponents/DateInputField/DateInputField.tsx

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

package/src/Filter/FilterDatePicker/subcomponents/FilterDatePickerField/FilterDatePickerField.spec.tsx

@@ -1,5 +1,5 @@
 import React, { useState, FocusEvent } 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 { FilterDatePickerField, FilterDatePickerFieldProps } from "."
 
@@ -77,10 +77,11 @@ describe("<FilterDatePickerField />", () => {
         const inputDate = screen.getByLabelText("Date")
         expect(inputDate).toHaveValue("2 May 2022")
 
-        const targetDay = screen.getByRole("button", {
-          name: "1st May (Sunday)",
+        const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+        const targetDay = within(targetMonth).getByRole("gridcell", {
+          name: "1",
         })
-        expect(targetDay).not.toHaveAttribute("aria-pressed")
+        expect(targetDay).not.toHaveAttribute("aria-selected")
 
         await user.click(inputDate)
         await user.clear(inputDate)
@@ -91,7 +92,7 @@ describe("<FilterDatePickerField />", () => {
         await waitFor(() => {
           expect(inputDate).toHaveValue("1 May 2022")
           expect(inputDateOnBlur).toHaveBeenCalled()
-          expect(targetDay).toHaveAttribute("aria-pressed", "true")
+          expect(targetDay).toHaveAttribute("aria-selected", "true")
         })
       })
     })
@@ -105,10 +106,11 @@ describe("<FilterDatePickerField />", () => {
         const inputDate = screen.getByLabelText("Date")
         expect(inputDate).toHaveValue("2 May 2022")
 
-        const targetDay = screen.getByRole("button", {
-          name: "1st May (Sunday)",
+        const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+        const targetDay = within(targetMonth).getByRole("gridcell", {
+          name: "1",
         })
-        expect(targetDay).not.toHaveAttribute("aria-pressed")
+        expect(targetDay).not.toHaveAttribute("aria-selected")
 
         await user.click(inputDate)
         await user.clear(inputDate)
@@ -116,7 +118,7 @@ describe("<FilterDatePickerField />", () => {
         await user.keyboard("{Enter}")
 
         await waitFor(() => {
-          expect(targetDay).toHaveAttribute("aria-pressed", "true")
+          expect(targetDay).toHaveAttribute("aria-selected", "true")
           expect(inputDateOnSubmit).toHaveBeenCalledWith(new Date("2022-05-01"))
         })
       })
@@ -189,10 +191,10 @@ describe("<FilterDatePickerField />", () => {
       render(
         <FilterDatePickerFieldWrapper defaultMonth={new Date("2022-05-01")} />
       )
-      const targetDay = screen.getByRole("button", {
-        name: "15th May (Sunday)",
+      const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+      const targetDay = within(targetMonth).getByRole("gridcell", {
+        name: "15",
       })
-
       await user.click(targetDay)
 
       await waitFor(() => {
@@ -208,14 +210,15 @@ describe("<FilterDatePickerField />", () => {
       const inputDate = screen.getByLabelText("Date")
       expect(inputDate).toHaveValue("15 May 2022")
 
-      const targetDay = screen.getByRole("button", {
-        name: "12th May (Thursday)",
+      const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+      const targetDay = within(targetMonth).getByRole("gridcell", {
+        name: "12",
       })
-      expect(targetDay).not.toHaveAttribute("aria-pressed")
+      expect(targetDay).not.toHaveAttribute("aria-selected")
       await user.click(targetDay)
 
       await waitFor(() => {
-        expect(targetDay).toHaveAttribute("aria-pressed", "true")
+        expect(targetDay).toHaveAttribute("aria-selected", "true")
         expect(inputDate).toHaveValue("12 May 2022")
       })
     })
@@ -228,8 +231,9 @@ describe("<FilterDatePickerField />", () => {
       const inputDate = screen.getByLabelText("Date")
       expect(inputDate).toHaveValue("15 May 2022")
 
-      const firstSelectedDay = screen.getByRole("button", {
-        name: "15th May (Sunday)",
+      const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+      const firstSelectedDay = within(targetMonth).getByRole("gridcell", {
+        name: "15",
       })
       await user.click(firstSelectedDay)
 
@@ -323,10 +327,10 @@ describe("<FilterDatePickerField />", () => {
         )
       })
 
-      const targetDay = screen.getByRole("button", {
-        name: "12th May (Thursday)",
+      const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+      const targetDay = within(targetMonth).getByRole("gridcell", {
+        name: "12",
       })
-
       await user.click(targetDay)
 
       await waitFor(() => {

package/src/Filter/FilterDatePicker/utils/transformDateToInputValue.ts

@@ -1,3 +1,4 @@
+import type { Locale } from "date-fns"
 import { DisabledDays, formatDateAsText } from "~components/Calendar"
 
 export const transformDateToInputValue = (

package/src/Filter/FilterDateRangePicker/subcomponents/DateRangeDisplayLabel/DateRangeDisplayLabel.tsx

@@ -1,4 +1,5 @@
 import React from "react"
+import type { Locale } from "date-fns"
 import { formatDateAsText } from "~components/Calendar"
 import styles from "./DateRangeDisplayLabel.module.scss"
 

package/src/Filter/FilterDateRangePicker/subcomponents/DateRangeInputField/DateRangeInputField.tsx

@@ -1,5 +1,6 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
+import type { Locale } from "date-fns"
 import {
   DateInput,
   DateInputDescription,

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.spec.tsx

@@ -1,5 +1,5 @@
 import React, { useState, FocusEvent } 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 { DateRange } from "~components/Calendar"
 import { FilterDateRangePickerField, FilterDateRangePickerFieldProps } from "."
@@ -92,10 +92,11 @@ describe("<FilterDateRangePickerField />", () => {
         expect(inputStartDate).toHaveValue("2 May 2022")
         expect(inputEndDate).toHaveValue("22 May 2022")
 
-        const targetDay = screen.getByRole("button", {
-          name: "1st May (Sunday)",
+        const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+        const targetDay = within(targetMonth).getByRole("gridcell", {
+          name: "1",
         })
-        expect(targetDay).not.toHaveAttribute("aria-pressed")
+        expect(targetDay).not.toHaveAttribute("aria-selected")
 
         await user.click(inputStartDate)
         await user.clear(inputStartDate)
@@ -108,7 +109,7 @@ describe("<FilterDateRangePickerField />", () => {
           expect(startDateOnBlur).toHaveBeenCalled()
           expect(inputEndDate).toHaveValue("22 May 2022")
           expect(endDateOnBlur).not.toHaveBeenCalled()
-          expect(targetDay).toHaveAttribute("aria-pressed", "true")
+          expect(targetDay).toHaveAttribute("aria-selected", "true")
         })
       })
 
@@ -132,10 +133,11 @@ describe("<FilterDateRangePickerField />", () => {
         expect(inputStartDate).toHaveValue("1 May 2022")
         expect(inputEndDate).toHaveValue("22 May 2022")
 
-        const targetDay = screen.getByRole("button", {
-          name: "31st May (Tuesday)",
+        const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+        const targetDay = within(targetMonth).getByRole("gridcell", {
+          name: "31",
         })
-        expect(targetDay).not.toHaveAttribute("aria-pressed")
+        expect(targetDay).not.toHaveAttribute("aria-selected")
 
         await user.click(inputEndDate)
         await user.clear(inputEndDate)
@@ -148,7 +150,7 @@ describe("<FilterDateRangePickerField />", () => {
           expect(startDateOnBlur).not.toHaveBeenCalled()
           expect(inputEndDate).toHaveValue("31 May 2022")
           expect(endDateOnBlur).toHaveBeenCalled()
-          expect(targetDay).toHaveAttribute("aria-pressed", "true")
+          expect(targetDay).toHaveAttribute("aria-selected", "true")
         })
       })
     })
@@ -236,14 +238,15 @@ describe("<FilterDateRangePickerField />", () => {
       const inputStartDate = screen.getByLabelText("Date from")
       expect(inputStartDate).toHaveValue("15 May 2022")
 
-      const targetDay = screen.getByRole("button", {
-        name: "12th May (Thursday)",
+      const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+      const targetDay = within(targetMonth).getByRole("gridcell", {
+        name: "12",
       })
-      expect(targetDay).not.toHaveAttribute("aria-pressed")
+      expect(targetDay).not.toHaveAttribute("aria-selected")
       await user.click(targetDay)
 
       await waitFor(() => {
-        expect(targetDay).toHaveAttribute("aria-pressed", "true")
+        expect(targetDay).toHaveAttribute("aria-selected", "true")
         expect(inputStartDate).toHaveValue("12 May 2022")
       })
     })
@@ -261,14 +264,15 @@ describe("<FilterDateRangePickerField />", () => {
       const inputEndDate = screen.getByLabelText("Date to")
       expect(inputEndDate).toHaveValue("15 Jun 2022")
 
-      const targetDay = screen.getByRole("button", {
-        name: "23rd June (Thursday)",
+      const targetMonth = screen.getByRole("grid", { name: "June 2022" })
+      const targetDay = within(targetMonth).getByRole("gridcell", {
+        name: "23",
       })
-      expect(targetDay).not.toHaveAttribute("aria-pressed")
+      expect(targetDay).not.toHaveAttribute("aria-selected")
       await user.click(targetDay)
 
       await waitFor(() => {
-        expect(targetDay).toHaveAttribute("aria-pressed", "true")
+        expect(targetDay).toHaveAttribute("aria-selected", "true")
         expect(inputEndDate).toHaveValue("23 Jun 2022")
       })
     })
@@ -288,8 +292,9 @@ describe("<FilterDateRangePickerField />", () => {
       expect(inputStartDate).toHaveValue("15 May 2022")
       expect(inputEndDate).toHaveValue("22 May 2022")
 
-      const firstSelectedDay = screen.getByRole("button", {
-        name: "15th May (Sunday)",
+      const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+      const firstSelectedDay = within(targetMonth).getByRole("gridcell", {
+        name: "15",
       })
       await user.click(firstSelectedDay)
 
@@ -455,7 +460,7 @@ describe("<FilterDateRangePickerField />", () => {
             )
             // End date in Calendar is deselected
             expect(
-              screen.getAllByRole("button", { pressed: true }).length
+              screen.getAllByRole("gridcell", { selected: true }).length
             ).toEqual(1)
           })
 
@@ -470,7 +475,7 @@ describe("<FilterDateRangePickerField />", () => {
             expect(dateEndErrorContainer).not.toBeInTheDocument()
             // End date in Calendar is re-selected
             expect(
-              screen.getAllByRole("button", { pressed: true }).length
+              screen.getAllByRole("gridcell", { selected: true }).length
             ).toEqual(3)
           })
         })
@@ -499,7 +504,7 @@ describe("<FilterDateRangePickerField />", () => {
             )
             // End date in Calendar is deselected
             expect(
-              screen.getAllByRole("button", { pressed: true }).length
+              screen.getAllByRole("gridcell", { selected: true }).length
             ).toEqual(1)
           })
         })
@@ -636,8 +641,9 @@ describe("<FilterDateRangePickerField />", () => {
         )
       })
 
-      const targetDay = screen.getByRole("button", {
-        name: "12th May (Thursday)",
+      const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+      const targetDay = within(targetMonth).getByRole("gridcell", {
+        name: "12",
       })
       await user.click(targetDay)