@kaizen/components 1.39.0 → 1.39.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.39.0",
+  "version": "1.39.2",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -42,7 +42,7 @@
     "update-icons": "./src/Icon/bin/update-icons.sh"
   },
   "dependencies": {
-    "@floating-ui/react-dom": "^2.0.4",
+    "@floating-ui/react-dom": "^2.0.5",
     "@headlessui/react": "<=1.5.0",
     "@internationalized/date": "^3.5.1",
     "@kaizen/hosted-assets": "^2.0.3",
@@ -64,22 +64,22 @@
     "@react-stately/select": "^3.6.1",
     "@react-types/shared": "^3.22.0",
     "classnames": "^2.5.1",
-    "date-fns": "^2.30.0",
+    "date-fns": "^3.0.6",
     "lodash.debounce": "^4.0.8",
     "nanobus": "^4.5.0",
     "prosemirror-commands": "^1.5.2",
     "prosemirror-history": "^1.3.2",
     "prosemirror-inputrules": "^1.3.0",
     "prosemirror-keymap": "^1.2.2",
-    "prosemirror-model": "^1.19.3",
+    "prosemirror-model": "^1.19.4",
     "prosemirror-schema-basic": "^1.2.2",
     "prosemirror-schema-list": "^1.3.0",
     "prosemirror-state": "^1.4.3",
     "prosemirror-transform": "^1.8.0",
     "prosemirror-utils": "^1.2.1-0",
-    "prosemirror-view": "^1.32.4",
+    "prosemirror-view": "^1.32.7",
     "react-animate-height": "^3.2.3",
-    "react-day-picker": "8.4.1",
+    "react-day-picker": "^8.10.0",
     "react-focus-lock": "^2.9.6",
     "react-focus-on": "^3.9.1",
     "react-media": "^1.10.0",
@@ -96,17 +96,17 @@
   },
   "devDependencies": {
     "@babel/plugin-transform-react-pure-annotations": "^7.23.3",
-    "@cultureamp/frontend-apis": "^9.1.3",
-    "@cultureamp/i18n-react-intl": "^2.1.8",
+    "@cultureamp/frontend-apis": "^9.2.0",
+    "@cultureamp/i18n-react-intl": "^2.1.10",
     "@kaizen/design-tokens": "^10.3.17",
-    "@kaizen/tailwind": "^1.2.2",
+    "@kaizen/tailwind": "^1.2.3",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-image": "^3.0.3",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.5",
+    "@rollup/plugin-typescript": "^11.1.6",
     "@types/lodash.debounce": "^4.0.9",
     "@types/react-dom": "^18.2.18",
     "@types/react-textfit": "^1.1.4",
@@ -116,22 +116,22 @@
     "babel-plugin-pure-static-props": "^0.2.0",
     "concat-cli": "^4.0.0",
     "query-string": "^8.1.0",
-    "react-intl": "^6.5.5",
-    "rollup": "^4.9.2",
+    "react-intl": "^6.6.0",
+    "rollup": "^4.9.5",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-ignore": "^1.0.10",
     "rollup-plugin-node-externals": "^6.1.2",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.69.6",
+    "sass": "^1.69.7",
     "serialize-query-params": "^2.0.2",
-    "svgo": "^3.1.0",
+    "svgo": "^3.2.0",
     "ts-jest": "^29.1.1",
-    "ts-patch": "^3.1.1",
+    "ts-patch": "^3.1.2",
     "typescript-transform-paths": "^3.4.6"
   },
   "peerDependencies": {
-    "@cultureamp/i18n-react-intl": "^2.1.8",
+    "@cultureamp/i18n-react-intl": "^2.1.10",
     "react": "^18.2.0",
-    "react-intl": "^6.5.5"
+    "react-intl": "^6.6.0"
   }
 }

package/src/Calendar/CalendarRange/_docs/CalendarRange.stickersheet.stories.tsx

@@ -96,29 +96,40 @@ const StickerSheetTemplate: StickerSheetStory = {
 const applyStickerSheetStyles = (canvasElement: HTMLElement): void => {
   const canvas = within(canvasElement)
 
-  const getElementWithinCalendar = (id: string, name: string): HTMLElement => {
+  const getElementWithinCalendar = (
+    id: string,
+    monthName: string,
+    dayName: string
+  ): HTMLElement => {
     const calendar = canvas.getByTestId(id)
-    return within(calendar).getByRole("button", { name })
+    const month = within(calendar).getByRole("grid", { name: monthName })
+    return within(month).getByRole("gridcell", { name: dayName })
   }
 
   const calendarsPseudoStates = [
     {
       id: "id__calendar-range__start",
-      buttonDescription: "19th February (Saturday)",
+      monthName: "February 2022",
+      dayName: "19",
     },
     {
       id: "id__calendar-range__middle",
-      buttonDescription: "26th February (Saturday)",
+      monthName: "February 2022",
+      dayName: "26",
+    },
+    {
+      id: "id__calendar-range__end",
+      monthName: "March 2022",
+      dayName: "4",
     },
-    { id: "id__calendar-range__end", buttonDescription: "4th March (Friday)" },
   ]
 
-  calendarsPseudoStates.forEach(({ id, buttonDescription }) => {
-    getElementWithinCalendar(`${id}--hover`, buttonDescription).setAttribute(
+  calendarsPseudoStates.forEach(({ id, monthName, dayName }) => {
+    getElementWithinCalendar(`${id}--hover`, monthName, dayName).setAttribute(
       "data-sb-pseudo-styles",
       "hover"
     )
-    getElementWithinCalendar(`${id}--focus`, buttonDescription).setAttribute(
+    getElementWithinCalendar(`${id}--focus`, monthName, dayName).setAttribute(
       "data-sb-pseudo-styles",
       "focus"
     )

package/src/Calendar/CalendarSingle/_docs/CalendarSingle.stickersheet.stories.tsx

@@ -109,9 +109,13 @@ const StickerSheetTemplate: StickerSheetStory = {
 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 = [
@@ -121,44 +125,33 @@ const applyStickerSheetStyles = (canvasElement: HTMLElement): void => {
   ]
 
   todayCalendarIds.forEach(id => {
-    getElementWithinCalendar(id, "1st May (Sunday)").classList.add(
-      styles.dayToday
-    )
+    getElementWithinCalendar(id, "gridcell", "1").classList.add(styles.dayToday)
   })
 
-  const calendarsHover = [
-    { id: "id--calendar--hover", buttonDescription: "5th September (Sunday)" },
+  const calendarsPseudoStates = [
+    {
+      id: "id--calendar",
+      role: "gridcell",
+      name: "5",
+    },
     {
-      id: "id--calendar-selected--hover",
-      buttonDescription: "5th September (Sunday)",
+      id: "id--calendar-selected",
+      role: "gridcell",
+      name: "5",
     },
     {
-      id: "id--calendar-navigation--hover",
-      buttonDescription: "Go to previous month",
+      id: "id--calendar-navigation",
+      role: "button",
+      name: "Go to previous month",
     },
   ]
 
-  calendarsHover.forEach(({ id, buttonDescription }) => {
-    getElementWithinCalendar(id, buttonDescription).setAttribute(
+  calendarsPseudoStates.forEach(({ id, role, name }) => {
+    getElementWithinCalendar(`${id}--hover`, role, name).setAttribute(
       "data-sb-pseudo-styles",
       "hover"
     )
-  })
-
-  const calendarsFocus = [
-    { id: "id--calendar--focus", buttonDescription: "5th September (Sunday)" },
-    {
-      id: "id--calendar-selected--focus",
-      buttonDescription: "5th September (Sunday)",
-    },
-    {
-      id: "id--calendar-navigation--focus",
-      buttonDescription: "Go to previous month",
-    },
-  ]
-
-  calendarsFocus.forEach(({ id, buttonDescription }) => {
-    getElementWithinCalendar(id, buttonDescription).setAttribute(
+    getElementWithinCalendar(`${id}--focus`, role, name).setAttribute(
       "data-sb-pseudo-styles",
       "focus"
     )

package/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.tsx

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

package/src/Calendar/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"
 

package/src/Calendar/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"

package/src/Calendar/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 "../CalendarSingle"
 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", () => {

package/src/Calendar/utils/parseDateAsTextOrNumeral.ts

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

package/src/Calendar/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 = (

package/src/Calendar/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 = (

package/src/Calendar/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 "../CalendarSingle"
@@ -8,9 +8,9 @@ import { setFocusInCalendar } from "./setFocusInCalendar"
 const CalendarWrapper = (props: Partial<CalendarSingleProps>): JSX.Element => (
   <CalendarSingle
     id="calendar-dialog"
-    onDayClick={jest.fn<void, [Date]>()}
+    onDayClick={jest.fn()}
     locale={enUS}
-    onMount={(calendarElement): void =>
+    onMount={calendarElement =>
       setFocusInCalendar(calendarElement, props.selected)
     }
     {...props}
@@ -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()
   })
 })

package/src/DateInput/DateInputDescription/DateInputDescription.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import { useIntl } from "@cultureamp/i18n-react-intl"
+import type { Locale } from "date-fns"
 import { LabelledMessage } from "~components/LabelledMessage"
 import { formatDescriptionInputFormat } from "./utils/formatDescriptionInputFormat"
 import styles from "./DateInputDescription.module.scss"

package/src/DateInput/DateInputDescription/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()

package/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 { DatePicker } from "./DatePicker"
 import { ValidationResponse } from "./types"
@@ -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)

package/src/DatePicker/subcomponents/DateInputField/DateInputField.tsx

@@ -1,5 +1,6 @@
 import React, { useId } from "react"
 import classnames from "classnames"
+import type { Locale } from "date-fns"
 import { enAU } from "date-fns/locale"
 import {
   DateInputDescription,

package/src/DatePicker/utils/getLocale.ts

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

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/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/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} />