@kaizen/components 1.52.0 → 1.53.0

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

@@ -1,6 +1,7 @@
 import React, { useState } from "react"
-import { render, screen, waitFor, within } from "@testing-library/react"
+import { screen, waitFor, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { renderWithIntl } from "~tests"
 import {
   FilterAttributes,
   FilterBarProvider,
@@ -51,35 +52,44 @@ const FilterBarDateRangePickerWrapper = ({
 }
 
 describe("<FilterBarDateRangePicker />", () => {
-  it("shows the name in the trigger button", () => {
-    const { getByRole } = render(<FilterBarDateRangePickerWrapper />)
-    const triggerButton = getByRole("button", { name: "Dates" })
-    expect(triggerButton).toBeInTheDocument()
+  it("shows the name in the trigger button", async () => {
+    renderWithIntl(<FilterBarDateRangePickerWrapper />)
+    await waitFor(() => {
+      const triggerButton = screen.getByRole("button", { name: "Dates" })
+      expect(triggerButton).toBeInTheDocument()
+    })
   })
 
   describe("Removable", () => {
-    it("does not show the remove button when isRemovable is false", () => {
-      const { queryByRole } = render(<FilterBarDateRangePickerWrapper />)
-      expect(
-        queryByRole("button", { name: "Remove filter - Dates" })
-      ).not.toBeInTheDocument()
+    it("does not show the remove button when isRemovable is false", async () => {
+      renderWithIntl(<FilterBarDateRangePickerWrapper />)
+      await waitFor(() => {
+        expect(
+          screen.getByRole("button", { name: "Dates" })
+        ).toBeInTheDocument()
+        expect(
+          screen.queryByRole("button", { name: "Remove filter - Dates" })
+        ).not.toBeInTheDocument()
+      })
     })
 
-    it("shows the remove button when isRemovable is true", () => {
-      const { getByRole } = render(
+    it("shows the remove button when isRemovable is true", async () => {
+      const { getByRole } = renderWithIntl(
         <FilterBarDateRangePickerWrapper
           filterAttributes={{ isRemovable: true }}
           defaultValues={{ range: { from: new Date("2023-05-01") } }}
         />
       )
-      expect(
-        getByRole("button", { name: "Remove filter - Dates" })
-      ).toBeVisible()
+      await waitFor(() => {
+        expect(
+          getByRole("button", { name: "Remove filter - Dates" })
+        ).toBeVisible()
+      })
     })
   })
 
   it("can toggle its open state", async () => {
-    const { getByRole, queryByRole } = render(
+    const { getByRole, queryByRole } = renderWithIntl(
       <FilterBarDateRangePickerWrapper />
     )
     const triggerButton = getByRole("button", { name: "Dates" })
@@ -97,8 +107,8 @@ describe("<FilterBarDateRangePicker />", () => {
     })
   })
 
-  it("shows a selected value when provided", () => {
-    const { getByRole } = render(
+  it("shows a selected value when provided", async () => {
+    const { getByRole } = renderWithIntl(
       <FilterBarDateRangePickerWrapper
         defaultValues={{
           range: {
@@ -108,14 +118,16 @@ describe("<FilterBarDateRangePicker />", () => {
         }}
       />
     )
-    const triggerButton = getByRole("button", {
-      name: "Dates : 1 May 2022 - 25 Nov 2022",
+    await waitFor(() => {
+      const triggerButton = getByRole("button", {
+        name: "Dates : 1 May 2022 - 25 Nov 2022",
+      })
+      expect(triggerButton).toBeInTheDocument()
     })
-    expect(triggerButton).toBeInTheDocument()
   })
 
   it("updates the selected value in the trigger button", async () => {
-    const { getByRole, getByText } = render(
+    const { getByRole, getByText } = renderWithIntl(
       <FilterBarDateRangePickerWrapper
         defaultValues={{
           range: {
@@ -148,7 +160,7 @@ describe("<FilterBarDateRangePicker />", () => {
 
   it("allows calling additional functions on value change", async () => {
     const onChange = jest.fn<void, [DateRange | undefined]>()
-    const { getByRole, getByText } = render(
+    const { getByRole, getByText } = renderWithIntl(
       <FilterBarDateRangePickerWrapper
         defaultValues={{
           range: {

package/src/Filter/FilterBar/subcomponents/FilterBarMultiSelect/FilterBarMultiSelect.spec.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react"
-import { Selection } from "@react-types/shared"
-import { render, waitFor } from "@testing-library/react"
+import { screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { renderWithIntl } from "~tests"
 import {
   FilterAttributes,
   FilterBarProvider,
@@ -90,41 +90,53 @@ const FilterBarMultiSelectWrapper = <ValuesMap extends FiltersValues = Values>({
 }
 
 describe("<FilterBarMultiSelect />", () => {
-  it("shows the name in the trigger button", () => {
-    const { getByRole } = render(<FilterBarMultiSelectWrapper />)
-    const triggerButton = getByRole("button", { name: "Toppings" })
-    expect(triggerButton).toBeVisible()
+  it("shows the name in the trigger button", async () => {
+    const { getByRole } = renderWithIntl(<FilterBarMultiSelectWrapper />)
+    await waitFor(() => {
+      const triggerButton = getByRole("button", { name: "Toppings" })
+      expect(triggerButton).toBeVisible()
+    })
   })
 
   describe("Removable", () => {
-    it("does not show the remove button when isRemovable is false", () => {
-      const { queryByRole } = render(<FilterBarMultiSelectWrapper />)
+    it("does not show the remove button when isRemovable is false", async () => {
+      const { queryByRole } = renderWithIntl(<FilterBarMultiSelectWrapper />)
+      await waitFor(() => {
+        expect(screen.getByRole("button", { name: "Toppings" })).toBeVisible()
+      })
       expect(
         queryByRole("button", { name: "Remove filter - Toppings" })
       ).not.toBeInTheDocument()
     })
 
-    it("shows the remove button when isRemovable is true", () => {
-      const { getByRole } = render(
+    it("shows the remove button when isRemovable is true", async () => {
+      const { getByRole } = renderWithIntl(
         <FilterBarMultiSelectWrapper
           filterAttributes={{ isRemovable: true }}
           defaultValues={{ toppings: ["pearls"] }}
         />
       )
-      expect(
-        getByRole("button", { name: "Remove filter - Toppings" })
-      ).toBeVisible()
+      await waitFor(() => {
+        expect(
+          getByRole("button", { name: "Remove filter - Toppings" })
+        ).toBeVisible()
+      })
     })
 
     it("hides the filter when remove button is clicked", async () => {
-      const { getByRole } = render(
+      const { getByRole } = renderWithIntl(
         <FilterBarMultiSelectWrapper
           filterAttributes={{ isRemovable: true }}
           defaultValues={{ toppings: ["pearls"] }}
         />
       )
-      const triggerButton = getByRole("button", { name: "Toppings : Pearls" })
-      expect(triggerButton).toBeVisible()
+
+      const triggerButton = await screen.findByRole("button", {
+        name: "Toppings : Pearls",
+      })
+      await waitFor(() => {
+        expect(triggerButton).toBeVisible()
+      })
 
       const removeButton = getByRole("button", {
         name: "Remove filter - Toppings",
@@ -137,7 +149,9 @@ describe("<FilterBarMultiSelect />", () => {
   })
 
   it("can toggle its open state", async () => {
-    const { getByRole, queryByRole } = render(<FilterBarMultiSelectWrapper />)
+    const { getByRole, queryByRole } = renderWithIntl(
+      <FilterBarMultiSelectWrapper />
+    )
     const triggerButton = getByRole("button", { name: "Toppings" })
 
     await user.click(triggerButton)
@@ -153,20 +167,22 @@ describe("<FilterBarMultiSelect />", () => {
     })
   })
 
-  it("shows a selected value when provided", () => {
-    const { getByRole } = render(
+  it("shows a selected value when provided", async () => {
+    const { getByRole } = renderWithIntl(
       <FilterBarMultiSelectWrapper
         defaultValues={{ toppings: ["pearls", "fruit-jelly"] }}
       />
     )
-    const triggerButton = getByRole("button", {
-      name: "Toppings : Pearls, Fruit Jelly",
+    await waitFor(() => {
+      const triggerButton = getByRole("button", {
+        name: "Toppings : Pearls, Fruit Jelly",
+      })
+      expect(triggerButton).toBeInTheDocument()
     })
-    expect(triggerButton).toBeInTheDocument()
   })
 
   it("updates the selected value in the trigger button", async () => {
-    const { getByRole } = render(
+    const { getByRole } = renderWithIntl(
       <FilterBarMultiSelectWrapper defaultValues={{ toppings: ["pearls"] }} />
     )
     const triggerButton = getByRole("button", {
@@ -188,8 +204,8 @@ describe("<FilterBarMultiSelect />", () => {
   })
 
   it("allows calling additional functions on selection change", async () => {
-    const onChange = jest.fn<void, [Selection]>()
-    const { getByRole } = render(
+    const onChange = jest.fn()
+    const { getByRole } = renderWithIntl(
       <FilterBarMultiSelectWrapper onSelectionChange={onChange} />
     )
     const triggerButton = getByRole("button", { name: "Toppings" })
@@ -241,7 +257,7 @@ describe("<FilterBarMultiSelect />", () => {
       )
     }
 
-    const { getByRole, getAllByRole, getByTestId } = render(
+    const { getByRole, getAllByRole, getByTestId } = renderWithIntl(
       <FilterBarMultiSelectWrapper<ValuesDependent>
         additionalFilters={[
           {

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react"
-import { Key } from "@react-types/shared"
-import { render, waitFor } from "@testing-library/react"
+import { waitFor, screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { renderWithIntl } from "~tests"
 import {
   FilterAttributes,
   FilterBarProvider,
@@ -66,35 +66,46 @@ const FilterBarSelectWrapper = <ValuesMap extends FiltersValues = Values>({
 }
 
 describe("<FilterBarSelect />", () => {
-  it("shows the name in the trigger button", () => {
-    const { getByRole } = render(<FilterBarSelectWrapper />)
-    const triggerButton = getByRole("button", { name: "Flavour" })
-    expect(triggerButton).toBeInTheDocument()
+  it("shows the name in the trigger button", async () => {
+    renderWithIntl(<FilterBarSelectWrapper />)
+    await waitFor(() => {
+      const triggerButton = screen.getByRole("button", { name: "Flavour" })
+      expect(triggerButton).toBeInTheDocument()
+    })
   })
 
   describe("Removable", () => {
-    it("does not show the remove button when isRemovable is false", () => {
-      const { queryByRole } = render(<FilterBarSelectWrapper />)
+    it("does not show the remove button when isRemovable is false", async () => {
+      renderWithIntl(<FilterBarSelectWrapper />)
+      await waitFor(() => {
+        expect(
+          screen.getByRole("button", { name: "Flavour" })
+        ).toBeInTheDocument()
+      })
       expect(
-        queryByRole("button", { name: "Remove filter - Flavour" })
+        screen.queryByRole("button", { name: "Remove filter - Flavour" })
       ).not.toBeInTheDocument()
     })
 
-    it("shows the remove button when isRemovable is true", () => {
-      const { getByRole } = render(
+    it("shows the remove button when isRemovable is true", async () => {
+      renderWithIntl(
         <FilterBarSelectWrapper
           filterAttributes={{ isRemovable: true }}
           defaultValues={{ flavour: "jasmine-milk-tea" }}
         />
       )
-      expect(
-        getByRole("button", { name: "Remove filter - Flavour" })
-      ).toBeVisible()
+      await waitFor(() => {
+        expect(
+          screen.getByRole("button", { name: "Remove filter - Flavour" })
+        ).toBeVisible()
+      })
     })
   })
 
   it("can toggle its open state", async () => {
-    const { getByRole, queryByRole } = render(<FilterBarSelectWrapper />)
+    const { getByRole, queryByRole } = renderWithIntl(
+      <FilterBarSelectWrapper />
+    )
     const triggerButton = getByRole("button", { name: "Flavour" })
 
     await user.click(triggerButton)
@@ -110,18 +121,20 @@ describe("<FilterBarSelect />", () => {
     })
   })
 
-  it("shows a selected value when provided", () => {
-    const { getByRole } = render(
+  it("shows a selected value when provided", async () => {
+    const { getByRole } = renderWithIntl(
       <FilterBarSelectWrapper defaultValues={{ flavour: "jasmine-milk-tea" }} />
     )
-    const triggerButton = getByRole("button", {
-      name: "Flavour : Jasmine Milk Tea",
+    await waitFor(() => {
+      const triggerButton = getByRole("button", {
+        name: "Flavour : Jasmine Milk Tea",
+      })
+      expect(triggerButton).toBeInTheDocument()
     })
-    expect(triggerButton).toBeInTheDocument()
   })
 
   it("updates the selected value in the trigger button", async () => {
-    const { getByRole } = render(
+    const { getByRole } = renderWithIntl(
       <FilterBarSelectWrapper defaultValues={{ flavour: "jasmine-milk-tea" }} />
     )
     const triggerButton = getByRole("button", {
@@ -143,8 +156,8 @@ describe("<FilterBarSelect />", () => {
   })
 
   it("allows calling additional functions on selection change", async () => {
-    const onChange = jest.fn<void, [Key]>()
-    const { getByRole } = render(
+    const onChange = jest.fn()
+    const { getByRole } = renderWithIntl(
       <FilterBarSelectWrapper onSelectionChange={onChange} />
     )
     const triggerButton = getByRole("button", { name: "Flavour" })
@@ -195,7 +208,7 @@ describe("<FilterBarSelect />", () => {
       return <FilterBarSelect id="topping" items={items} />
     }
 
-    const { getByRole, getAllByRole, getByTestId } = render(
+    const { getByRole, getAllByRole, getByTestId } = renderWithIntl(
       <FilterBarSelectWrapper<ValuesDependent>
         additionalFilters={[
           {

package/src/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.spec.tsx

@@ -1,6 +1,7 @@
 import React, { useRef } from "react"
-import { render, screen } from "@testing-library/react"
+import { screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { renderWithIntl } from "~tests"
 import {
   FilterButtonRemovable,
   FilterButtonRemovableProps,
@@ -27,19 +28,18 @@ const FilterButtonRemovableWrapper = ({
 )
 
 describe("<FilterButtonRemovable />", () => {
-  it("should use fallback label for remove button if not specified", () => {
-    render(<FilterButtonRemovableWrapper />)
-    expect(
-      screen.getByRole("button", { name: "Remove filter - Desserts" })
-    ).toBeVisible()
+  it("should use fallback label for remove button if not specified", async () => {
+    renderWithIntl(<FilterButtonRemovableWrapper />)
+    await waitFor(() => {
+      expect(
+        screen.getByRole("button", { name: "Remove filter - Desserts" })
+      ).toBeVisible()
+    })
   })
 
   describe("Refs", () => {
     it("correctly passes through both button refs", async () => {
-      const onClick = jest.fn<
-        void,
-        [string | null | undefined, string | null | undefined]
-      >()
+      const onClick = jest.fn()
 
       const Wrapper = (): JSX.Element => {
         const triggerRef = useRef<HTMLButtonElement>(null)
@@ -72,10 +72,10 @@ describe("<FilterButtonRemovable />", () => {
         )
       }
 
-      render(<Wrapper />)
+      renderWithIntl(<Wrapper />)
 
       await user.click(screen.getByText("Click me"))
-      expect(onClick).toBeCalledWith(
+      expect(onClick).toHaveBeenCalledWith(
         "test__trigger-button",
         "test__remove-button"
       )

package/src/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.tsx

@@ -1,4 +1,5 @@
 import React, { forwardRef } from "react"
+import { useIntl } from "@cultureamp/i18n-react-intl"
 import { ButtonGroup, ButtonGroupProps } from "~components/ButtonGroup"
 import { FilterTriggerRef } from "~components/Filter/Filter"
 import { ClearIcon } from "~components/Icon"
@@ -25,12 +26,24 @@ export const FilterButtonRemovable = forwardRef<
   FilterButtonRemovableRefs,
   FilterButtonRemovableProps
 >(({ triggerButtonProps, removeButtonProps, ...restProps }, ref) => {
+  const { formatMessage } = useIntl()
+
+  const removeButtonLabelFallback = formatMessage(
+    {
+      id: "filterButton.removable.removeButtonLabel",
+      defaultMessage: "Remove filter - {filterLabel}",
+      description: "Button label to remove a single filter from the filter bar",
+    },
+    {
+      filterLabel: triggerButtonProps?.label,
+    }
+  )
+
   const customRefObject = isRefObject(ref) ? ref.current : null
   const removeButtonRef = customRefObject?.removeButtonRef
 
   const removeButtonLabel =
-    removeButtonProps?.tooltipText ??
-    `Remove filter - ${triggerButtonProps?.label}`
+    removeButtonProps?.tooltipText ?? removeButtonLabelFallback
 
   return (
     <ButtonGroup {...restProps}>

package/src/Filter/FilterButton/_docs/filter-buttons.mdx

@@ -9,7 +9,7 @@ import * as FilterButtonRemovableExamples from "./FilterButtonRemovable.stories"
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/FilterButton"
-  className="!mb-8"
+
 />
 
 Trigger buttons for use by components using the `<Filter>` abstraction.

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

@@ -1,6 +1,7 @@
 import React, { useState } from "react"
 import { render, screen, waitFor, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { renderWithIntl } from "~tests"
 import { FilterButton } from "~components/Filter/FilterButton"
 import { FilterDatePicker, FilterDatePickerProps } from "."
 
@@ -40,17 +41,20 @@ describe("<FilterDatePicker />", () => {
   })
 
   describe("Filter button", () => {
-    it("should show the selected date in the button", () => {
-      render(<FilterDatePickerWrapper selectedDate={new Date("2022-05-01")} />)
-      const filterButton = screen.getByRole("button", {
-        name: "Drank : 1 May 2022",
+    it("should show the selected date in the button", async () => {
+      renderWithIntl(
+        <FilterDatePickerWrapper selectedDate={new Date("2022-05-01")} />
+      )
+      await waitFor(() => {
+        const filterButton = screen.getByRole("button", {
+          name: "Drank : 1 May 2022",
+        })
+        expect(filterButton).toBeVisible()
       })
-      expect(filterButton).toBeVisible()
     })
 
     it("should show the calendar when the filter button is clicked", async () => {
-      render(<FilterDatePickerWrapper />)
-      expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
+      renderWithIntl(<FilterDatePickerWrapper />)
 
       const filterButton = screen.getByRole("button", {
         name: "Drank",
@@ -63,7 +67,7 @@ describe("<FilterDatePicker />", () => {
   })
 
   it("closes the popover when a valid date has been submitted via the calendar picker", async () => {
-    const { getByRole } = render(<FilterDatePickerWrapper />)
+    const { getByRole } = renderWithIntl(<FilterDatePickerWrapper />)
     const triggerButton = getByRole("button", {
       name: "Drank",
     })
@@ -86,7 +90,7 @@ describe("<FilterDatePicker />", () => {
 
   describe("Text input", () => {
     it("validates the date on blur", async () => {
-      const { getByRole, getByLabelText, getByText } = render(
+      const { getByRole, getByLabelText, getByText } = renderWithIntl(
         <FilterDatePickerWrapper />
       )
       const triggerButton = getByRole("button", {
@@ -112,7 +116,7 @@ describe("<FilterDatePicker />", () => {
 
     describe("Pressing Enter in the text input", () => {
       it("closes the popover when a valid date has been submitted via the text input field", async () => {
-        const { getByRole, getByLabelText } = render(
+        const { getByRole, getByLabelText } = renderWithIntl(
           <FilterDatePickerWrapper />
         )
         const triggerButton = getByRole("button", {
@@ -137,7 +141,7 @@ describe("<FilterDatePicker />", () => {
       })
 
       it("does not close the popover when an invalid date has been submitted via the text input field", async () => {
-        const { getByRole, getByLabelText, getByText } = render(
+        const { getByRole, getByLabelText, getByText } = renderWithIntl(
           <FilterDatePickerWrapper />
         )
         const triggerButton = getByRole("button", {
@@ -164,9 +168,10 @@ describe("<FilterDatePicker />", () => {
   })
 
   it("does not close the popover when the text input field has been cleared", async () => {
-    const { getByRole, getByLabelText, getByText, queryByText } = render(
-      <FilterDatePickerWrapper selectedDate={new Date("32/13/2022")} />
-    )
+    const { getByRole, getByLabelText, getByText, queryByText } =
+      renderWithIntl(
+        <FilterDatePickerWrapper selectedDate={new Date("32/13/2022")} />
+      )
     const triggerButton = getByRole("button", {
       name: "Drank : Invalid Date",
     })
@@ -193,7 +198,7 @@ describe("<FilterDatePicker />", () => {
   })
 
   it("does not close the popover when there is a selected date and the user navigates months", async () => {
-    const { getByRole } = render(
+    const { getByRole } = renderWithIntl(
       <FilterDatePickerWrapper selectedDate={new Date("01/01/2022")} />
     )
     const triggerButton = getByRole("button", {
@@ -219,7 +224,7 @@ describe("<FilterDatePicker />", () => {
   })
 
   it("updates the selected value in the trigger button when typing a date", async () => {
-    const { getByRole, getByLabelText } = render(
+    const { getByRole, getByLabelText } = renderWithIntl(
       <FilterDatePickerWrapper selectedDate={new Date("06-06-2022")} />
     )
     const triggerButton = getByRole("button", {

package/src/Filter/FilterDatePicker/_docs/FilterDatePicker.mdx

@@ -10,7 +10,7 @@ import * as FilterDPStories from "./FilterDatePicker.stories"
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/FilterDatePicker"
   figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=2349%3A110993&t=gzsKluk8LiOX3jCF-1"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093959/Filters"
-  className="!mb-8"
+
 />
 
 Date Picker to use for Filtering by a single date.

package/src/Filter/FilterDatePicker/_docs/FilterDatePicker.stickersheet.stories.tsx

@@ -8,7 +8,7 @@ import {
   StickerSheetStory,
 } from "~storybook/components/StickerSheet"
 import { FilterButton } from "../../FilterButton"
-import { FilterDatePicker } from "../index"
+import { FilterDatePicker, FilterDatePickerProps } from "../index"
 import { FilterDatePickerField } from "../subcomponents/FilterDatePickerField"
 
 const IS_CHROMATIC = isChromatic()
@@ -130,3 +130,52 @@ export const StickerSheetRTL: StickerSheetStory = {
     textDirection: "rtl",
   },
 }
+
+export const StickerSheetLocales: StickerSheetStory = {
+  name: "Sticker Sheet (Locales)",
+  render: () => {
+    const props = {
+      isOpen: false,
+      setIsOpen: () => undefined,
+      renderTrigger: (triggerButtonProps): JSX.Element => (
+        <FilterButton {...triggerButtonProps} />
+      ),
+      label: "Start day",
+      selectedDate: new Date("2022-05-01"),
+      onDateChange: () => undefined,
+      locale: "en-AU",
+    } satisfies FilterDatePickerProps
+
+    return (
+      <>
+        <StickerSheet heading="Localisation">
+          <StickerSheet.Header headings={["en-AU", "en-US"]} />
+          <StickerSheet.Body>
+            <StickerSheet.Row>
+              <FilterDatePicker {...props} locale="en-AU" />
+              <FilterDatePicker {...props} locale="en-US" />
+            </StickerSheet.Row>
+          </StickerSheet.Body>
+        </StickerSheet>
+
+        <StickerSheet>
+          <StickerSheet.Header headings={["fr-CA"]} />
+          <StickerSheet.Body>
+            <StickerSheet.Row>
+              <StaticIntlProvider locale="fr-CA">
+                <FilterDatePicker {...props} locale="fr-CA" isOpen />
+              </StaticIntlProvider>
+            </StickerSheet.Row>
+          </StickerSheet.Body>
+        </StickerSheet>
+      </>
+    )
+  },
+  decorators: [
+    Story => (
+      <div className="mb-[500px]">
+        <Story />
+      </div>
+    ),
+  ],
+}

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

@@ -1,12 +1,12 @@
-import { ChangeEvent, FocusEvent, KeyboardEvent, SetStateAction } from "react"
+import { ChangeEvent, FocusEvent, KeyboardEvent } from "react"
 import { renderHook, act } from "@testing-library/react-hooks"
 import { enAU } from "date-fns/locale"
 import * as isSelectingDayInCalendar from "~components/Calendar/utils/isSelectingDayInCalendar"
 import { useDateInputHandlers } from "./useDateInputHandlers"
 
 const locale = enAU
-const setInputValue = jest.fn<void, [SetStateAction<string>]>()
-const onDateChange = jest.fn<void, [Date | undefined]>()
+const setInputValue = jest.fn()
+const onDateChange = jest.fn()
 
 describe("useDateInputHandlers", () => {
   beforeEach(() => {