@kaizen/components 1.39.1 → 1.40.0

package/src/FieldGroup/_docs/FieldGroup.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import { LinkTo } from "~storybook/components/LinkTo"
 import * as FieldGroupStories from "./FieldGroup.stories"
 
@@ -12,11 +12,7 @@ import * as FieldGroupStories from "./FieldGroup.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { FieldGroup } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="FieldGroup" />
 
 ## Overview
 
@@ -36,5 +32,3 @@ Changes the FieldGroup to an inline element with no bottom margin. This can be s
 #### Default (block)
 
 <Canvas of={FieldGroupStories.Default} />
-
-

package/src/FieldMessage/_docs/FieldMessage.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as FieldMessageStories from "./FieldMessage.stories"
 
 <Meta of={FieldMessageStories} />
@@ -13,11 +13,7 @@ import * as FieldMessageStories from "./FieldMessage.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { FieldMessage } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="FieldMessage" />
 
 ## Overview
 

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

@@ -25,13 +25,15 @@ const FilterWrapper = (customProps?: Partial<FilterProps>): JSX.Element => {
 describe("<Filter />", () => {
   it("does not show content initially", () => {
     render(<FilterWrapper />)
-    expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
+    expect(
+      screen.queryByRole("dialog", { name: "Label" })
+    ).not.toBeInTheDocument()
   })
 
   it("shows content when isOpen is true", async () => {
     render(<FilterWrapper isOpen />)
     await waitFor(() => {
-      expect(screen.getByRole("dialog")).toBeVisible()
+      expect(screen.getByRole("dialog", { name: "Label" })).toBeVisible()
       expect(screen.getByText("Filter Contents")).toBeVisible()
     })
   })
@@ -41,7 +43,7 @@ describe("<Filter />", () => {
     const filterButton = screen.getByRole("button", { name: "Label" })
     await user.click(filterButton)
     await waitFor(() => {
-      expect(screen.getByRole("dialog")).toBeVisible()
+      expect(screen.getByRole("dialog", { name: "Label" })).toBeVisible()
       expect(screen.getByText("Filter Contents")).toBeVisible()
     })
   })
@@ -54,7 +56,7 @@ describe("<Filter />", () => {
     await user.keyboard("{Enter}")
 
     await waitFor(() => {
-      expect(screen.getByRole("dialog")).toBeVisible()
+      expect(screen.getByRole("dialog", { name: "Label" })).toBeVisible()
       expect(screen.getByText("Filter Contents")).toBeVisible()
     })
   })

package/src/Filter/Filter/Filter.tsx

@@ -1,4 +1,10 @@
-import React, { HTMLAttributes, useEffect, useRef, useState } from "react"
+import React, {
+  HTMLAttributes,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from "react"
 import { FocusOn } from "react-focus-on"
 import { OverrideClassName } from "~types/OverrideClassName"
 import { FilterPopover } from "./subcomponents/FilterPopover"
@@ -9,6 +15,7 @@ export type FilterProps = {
   isOpen: boolean
   setIsOpen: (isOpen: boolean) => void
   renderTrigger: (triggerProps: {
+    id: string
     onClick: () => void
     isOpen: boolean
   }) => JSX.Element & { ref?: React.RefObject<FilterTriggerRef> }
@@ -24,9 +31,11 @@ export const Filter = ({
   onMount,
   ...restProps
 }: FilterProps): JSX.Element => {
+  const triggerId = useId()
   const [isRefLoaded, setIsRefLoaded] = useState<boolean>(false)
 
   const trigger = renderTrigger({
+    id: triggerId,
     onClick: (): void => setIsOpen(!isOpen),
     isOpen,
   })
@@ -59,6 +68,7 @@ export const Filter = ({
             referenceElement={
               filterButtonRef.current?.triggerRef?.current || null
             }
+            aria-labelledby={trigger.props.id}
           >
             {children}
           </FilterPopover>

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

@@ -1,5 +1,5 @@
 import { Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation, NoClipCanvas } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation, NoClipCanvas } from "~storybook/components"
 import { LinkTo } from "~storybook/components/LinkTo"
 import * as FilterStories from "./Filter.stories"
 
@@ -14,11 +14,7 @@ import * as FilterStories from "./Filter.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { Filter, FilterContents } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames={["Filter", "FilterContents"]} />
 
 ## Overview
 

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react"
-import { render, waitFor, within } from "@testing-library/react"
+import { render, screen, waitFor, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { FilterMultiSelect } from "../index"
 import { FilterBar, FilterBarProps } from "./FilterBar"
@@ -149,6 +149,17 @@ describe("<FilterBar />", () => {
     expect(filters[2]).toHaveTextContent("Ice Level")
   })
 
+  it("retains Filter accessibility", async () => {
+    render(<FilterBarWrapper filters={simpleFilters} />)
+
+    const filterButton = screen.getByRole("button", { name: "Flavour" })
+    await user.click(filterButton)
+
+    await waitFor(() => {
+      expect(screen.getByRole("dialog", { name: "Flavour" })).toBeVisible()
+    })
+  })
+
   describe("Removable filters", () => {
     it("shows inactive filters in the Add Filters menu only", async () => {
       const { getByRole, queryByText } = render(

package/src/Filter/FilterBar/_docs/FilterBar.mdx

@@ -1,5 +1,5 @@
 import { Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation, NoClipCanvas } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation, NoClipCanvas } from "~storybook/components"
 import { LinkTo } from "~storybook/components/LinkTo"
 import * as FilterBarStories from "./FilterBar.stories"
 
@@ -12,11 +12,7 @@ import * as FilterBarStories from "./FilterBar.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { FilterBar } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="FilterBar" />
 
 ## Overview
 

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

@@ -29,7 +29,7 @@ const FilterBarButtonWrapper = (
         {Object.values(filters).map(({ id, name }) => (
           <FilterBarButton
             key={id}
-            id={id}
+            filterId={id}
             label={name}
             isRemovable={false}
             {...props}

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

@@ -8,21 +8,21 @@ import {
 } from "~components/Filter/FilterButton"
 
 export type FilterBarButtonProps = FilterButtonProps & {
-  id: string
+  filterId: string
   isRemovable: boolean | undefined
 }
 
 export const FilterBarButton = forwardRef<
   FilterTriggerRef,
   FilterBarButtonProps
->(({ id, isRemovable = false, ...props }, ref): JSX.Element => {
+>(({ filterId, isRemovable = false, ...props }, ref): JSX.Element => {
   const { hideFilter } = useFilterBarContext()
 
   return isRemovable ? (
     <FilterButtonRemovable
       ref={ref}
       triggerButtonProps={props}
-      removeButtonProps={{ onClick: () => hideFilter(id) }}
+      removeButtonProps={{ onClick: () => hideFilter(filterId) }}
     />
   ) : (
     <FilterButton ref={ref} {...props} />

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

@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { render, waitFor } from "@testing-library/react"
+import { render, screen, waitFor, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import {
   FilterAttributes,
@@ -113,53 +113,48 @@ describe("<FilterBarDatePicker />", () => {
   })
 
   it("updates the selected value in the trigger button when selecting a date", async () => {
-    const { getByRole } = render(
+    render(
       <FilterBarDatePickerWrapper
         defaultValues={{ drank: new Date("2023-06-06") }}
       />
     )
-    const triggerButton = getByRole("button", {
+    const triggerButton = screen.getByRole("button", {
       name: "Drank : 6 Jun 2023",
     })
 
     await user.click(triggerButton)
 
     await waitFor(() => {
-      const dialog = getByRole("dialog")
+      const dialog = screen.getByRole("dialog")
       expect(dialog).toBeInTheDocument()
     })
 
-    await user.click(
-      getByRole("button", {
-        name: "7th June (Wednesday)",
-      })
-    )
+    const targetMonth = screen.getByRole("grid", { name: "June 2023" })
+    const targetDay = within(targetMonth).getByRole("gridcell", { name: "7" })
+
+    await user.click(targetDay)
 
     await waitFor(() => {
       expect(
-        getByRole("button", { name: "Drank : 7 Jun 2023" })
+        screen.getByRole("button", { name: "Drank : 7 Jun 2023" })
       ).toBeInTheDocument()
     })
   })
 
   it("allows calling additional functions on selection change", async () => {
-    const onChange = jest.fn<void, [Date | undefined]>()
-    const { getByRole } = render(
-      <FilterBarDatePickerWrapper onDateChange={onChange} />
-    )
-    const triggerButton = getByRole("button", { name: "Drank" })
+    const onChange = jest.fn()
+    render(<FilterBarDatePickerWrapper onDateChange={onChange} />)
 
+    const triggerButton = screen.getByRole("button", { name: "Drank" })
     await user.click(triggerButton)
+
     await waitFor(() => {
-      const dialog = getByRole("dialog")
-      expect(dialog).toBeInTheDocument()
+      expect(screen.getByRole("dialog")).toBeInTheDocument()
     })
 
-    await user.click(
-      getByRole("button", {
-        name: "7th June (Wednesday)",
-      })
-    )
+    const targetMonth = screen.getByRole("grid", { name: "June 2023" })
+    const targetDay = within(targetMonth).getByRole("gridcell", { name: "7" })
+    await user.click(targetDay)
 
     await waitFor(() => {
       expect(onChange.mock.calls).toEqual([[new Date("2023-06-07")]])

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

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

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

@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { render, waitFor } from "@testing-library/react"
+import { render, screen, waitFor, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import {
   FilterAttributes,
@@ -134,9 +134,8 @@ describe("<FilterBarDateRangePicker />", () => {
       expect(getByText("May 2022")).toBeVisible()
     })
 
-    const targetDay = getByRole("button", {
-      name: "23rd June (Thursday)",
-    })
+    const targetMonth = screen.getByRole("grid", { name: "June 2022" })
+    const targetDay = within(targetMonth).getByRole("gridcell", { name: "23" })
     await user.click(targetDay)
     await user.click(document.body) // Exit the focus lock
 
@@ -169,10 +168,10 @@ describe("<FilterBarDateRangePicker />", () => {
       expect(getByText("May 2022")).toBeVisible()
     })
 
-    const targetDay = getByRole("button", {
-      name: "23rd June (Thursday)",
-    })
+    const targetMonth = screen.getByRole("grid", { name: "June 2022" })
+    const targetDay = within(targetMonth).getByRole("gridcell", { name: "23" })
     await user.click(targetDay)
+
     await waitFor(() => {
       expect(onChange).toHaveBeenCalledWith({
         from: new Date("2022-05-01"),

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/FilterButton/_docs/filter-buttons.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { Installation, ResourceLinks } from "~storybook/components"
+import { KAIOInstallation, ResourceLinks } from "~storybook/components"
 import * as FilterButtonExamples from "./FilterButton.stories"
 import * as FilterButtonRemovableExamples from "./FilterButtonRemovable.stories"
 
@@ -12,13 +12,9 @@ import * as FilterButtonRemovableExamples from "./FilterButtonRemovable.stories"
   className="!mb-8"
 />
 
-
 Trigger buttons for use by components using the `<Filter>` abstraction.
 
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { FilterButton, FilterButtonRemovable } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames={["FilterButton", "FilterButtonRemovable"]} />
 
 ## Filter Button
 

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

@@ -1,7 +1,6 @@
 import React, { useState } from "react"
-import { expect } from "@storybook/jest"
 import { StoryObj } from "@storybook/react"
-import { userEvent, within } from "@storybook/testing-library"
+import { expect, userEvent, within } from "@storybook/test"
 import {
   FilterButton,
   FilterButtonProps,
@@ -61,7 +60,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/_docs/FilterDatePicker.mdx

@@ -1,5 +1,5 @@
 import { Controls, Description, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation, NoClipCanvas } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation, NoClipCanvas } from "~storybook/components"
 import * as FilterDPStories from "./FilterDatePicker.stories"
 
 <Meta of={FilterDPStories} />
@@ -13,13 +13,9 @@ import * as FilterDPStories from "./FilterDatePicker.stories"
   className="!mb-8"
 />
 
-
 Date Picker to use for Filtering by a single date.
 
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { FilterDatePicker } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="FilterDatePicker" />
 
 ## Playground
 <NoClipCanvas of={FilterDPStories.Playground} />

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/_docs/FilterDateRangePicker.mdx

@@ -1,5 +1,5 @@
 import { Controls, Description, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation, NoClipCanvas } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation, NoClipCanvas } from "~storybook/components"
 import * as FilterDRPStories from "./FilterDateRangePicker.stories"
 
 <Meta of={FilterDRPStories} />
@@ -13,13 +13,9 @@ import * as FilterDRPStories from "./FilterDateRangePicker.stories"
   className="!mb-8"
 />
 
-
 Date Range Picker to use for Filtering.
 
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { FilterDateRangePicker } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="FilterDateRangePicker" />
 
 ## Playground
 <NoClipCanvas of={FilterDRPStories.Playground} />

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

@@ -2,7 +2,7 @@ import React, { useState } from "react"
 import { StaticIntlProvider } from "@cultureamp/i18n-react-intl"
 import { action } from "@storybook/addon-actions"
 import { Meta } from "@storybook/react"
-import { within, userEvent } from "@storybook/testing-library"
+import { within, userEvent } from "@storybook/test"
 import isChromatic from "chromatic"
 import { DateRange } from "~components/Calendar"
 import {

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,