@kaizen/components 1.37.0 → 1.38.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.37.0",
+  "version": "1.38.0",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -69,7 +69,7 @@
     "nanobus": "^4.5.0",
     "prosemirror-commands": "^1.5.2",
     "prosemirror-history": "^1.3.2",
-    "prosemirror-inputrules": "^1.2.1",
+    "prosemirror-inputrules": "^1.3.0",
     "prosemirror-keymap": "^1.2.2",
     "prosemirror-model": "^1.19.3",
     "prosemirror-schema-basic": "^1.2.2",
@@ -77,18 +77,18 @@
     "prosemirror-state": "^1.4.3",
     "prosemirror-transform": "^1.8.0",
     "prosemirror-utils": "^1.2.1-0",
-    "prosemirror-view": "^1.32.3",
+    "prosemirror-view": "^1.32.4",
     "react-animate-height": "^3.2.3",
     "react-day-picker": "8.4.1",
     "react-focus-lock": "^2.9.6",
     "react-focus-on": "^3.9.1",
     "react-media": "^1.10.0",
     "react-popper": "^2.3.0",
-    "react-select": "^5.7.7",
+    "react-select": "^5.8.0",
     "react-textfit": "^1.1.1",
     "resize-observer-polyfill": "^1.5.1",
     "tslib": "^2.6.2",
-    "use-debounce": "^9.0.4",
+    "use-debounce": "^10.0.0",
     "uuid": "^9.0.1"
   },
   "dependenciesComments": {
@@ -96,11 +96,11 @@
   },
   "devDependencies": {
     "@babel/plugin-transform-react-pure-annotations": "^7.23.3",
-    "@cultureamp/frontend-apis": "^8.2.0",
-    "@cultureamp/i18n-react-intl": "^2.1.1",
+    "@cultureamp/frontend-apis": "^9.0.2",
+    "@cultureamp/i18n-react-intl": "^2.1.3",
     "@kaizen/design-tokens": "^10.3.16",
     "@kaizen/tailwind": "^1.2.0",
-    "@rollup/plugin-alias": "^5.0.1",
+    "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-image": "^3.0.3",
@@ -108,7 +108,7 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.5",
     "@types/lodash.debounce": "^4.0.9",
-    "@types/react-dom": "^18.2.15",
+    "@types/react-dom": "^18.2.17",
     "@types/react-textfit": "^1.1.3",
     "@types/uuid": "^9.0.7",
     "agadoo": "^3.0.0",
@@ -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.4",
-    "rollup": "^4.3.1",
+    "react-intl": "^6.5.5",
+    "rollup": "^4.6.0",
     "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.5",
     "serialize-query-params": "^2.0.2",
-    "svgo": "^3.0.3",
+    "svgo": "^3.0.4",
     "ts-jest": "^29.1.1",
-    "ttypescript": "^1.5.15",
+    "ts-patch": "^3.0.2",
     "typescript-transform-paths": "^3.4.6"
   },
   "peerDependencies": {
-    "@cultureamp/i18n-react-intl": "^2.1.1",
+    "@cultureamp/i18n-react-intl": "^2.1.3",
     "react": "^18.2.0",
-    "react-intl": "^6.5.4"
+    "react-intl": "^6.5.5"
   }
 }

package/src/Filter/FilterMultiSelect/_docs/FilterMultiSelect.stories.tsx

@@ -6,6 +6,7 @@ import {
   QueryClient,
   useInfiniteQuery,
   useQueryClient,
+  keepPreviousData,
 } from "@tanstack/react-query"
 import isChromatic from "chromatic"
 import { InlineNotification } from "~components/Notification"
@@ -171,6 +172,22 @@ export const Async: Story = {
     const [selectedPeople, setSelectedPeople] = useState<string[]>([])
     const [searchState, setSearchState] = useState("")
     const queryClient = useQueryClient()
+
+    const fetchSWAPI = async ({
+      pageParam,
+    }: {
+      pageParam: string
+    }): Promise<{
+      results: Array<{ name: string; url: string }>
+      next: string
+    }> => {
+      const res = await fetch(
+        `https://swapi.dev/api/people/?page=${pageParam}&search=${searchState}`
+      )
+
+      return res.json()
+    }
+
     const {
       data,
       isLoading,
@@ -178,26 +195,23 @@ export const Async: Story = {
       isFetchingNextPage,
       hasNextPage,
       isRefetching,
-    } = useInfiniteQuery(
-      ["startrek-sg1", searchState],
-      ({ pageParam = 1 }) =>
-        fetch(
-          `https://swapi.dev/api/people/?page=${pageParam}&search=${searchState}`
-        ).then(res => res.json()) as Promise<{
-          results: Array<{ name: string; url: string }>
-          next: string
-        }>,
-      {
-        enabled: open,
-        keepPreviousData: true,
-        getNextPageParam: lastPage => {
-          if (!lastPage.next) return undefined
-          const url = new URL(lastPage.next)
-          const params = new URLSearchParams(url.searchParams)
-          return params.get("page")
-        },
-      }
-    )
+    } = useInfiniteQuery({
+      enabled: true,
+      initialPageParam: "1",
+      queryKey: ["startrek-sg1", searchState],
+      queryFn: fetchSWAPI,
+      placeholderData: keepPreviousData,
+      getNextPageParam: lastPage => {
+        if (!lastPage.next) return undefined
+        const url = new URL(lastPage.next)
+        const params = new URLSearchParams(url.searchParams)
+        return params.get("page")
+      },
+    })
+
+    type QueriesData = {
+      pages: { results: Array<{ name: string; url: string }> }
+    }
 
     /**
      * We need access to the previously fetched people. If a user has selected a
@@ -205,9 +219,7 @@ export const Async: Story = {
      * only the selected keys to work with, no renderable values.
      */
     const cachedPeople = queryClient
-      .getQueriesData<{
-        pages: { results: Array<{ name: string; url: string }> }
-      }>(["startrek-sg1"])
+      .getQueriesData<QueriesData>({ queryKey: ["startrek-sg1"] })
       .flatMap(([, cachedData]) => cachedData?.pages ?? [])
       .flatMap(page => page.results)
       .map(item => ({ label: item.name, value: item.url }))

package/src/KaizenProvider/KaizenProvider.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useEffect, useState } from "react"
 import { ToastNotificationsList } from "~components/Notification"
 import { ToastNotificationProvider } from "~components/Notification/ToastNotification/context/ToastNotificationContext"
 import { FontDefinitions } from "./subcomponents/FontDefinitions"
@@ -12,16 +12,30 @@ export type KaizenProviderProps = {
 export const KaizenProvider = ({
   children,
   locale = "en",
-}: KaizenProviderProps): JSX.Element => (
-  <OptionalIntlProvider locale={locale}>
-    <>
-      <ToastNotificationProvider>
-        <ToastNotificationsList />
-        {children}
-      </ToastNotificationProvider>
-      <FontDefinitions />
-    </>
-  </OptionalIntlProvider>
-)
+}: KaizenProviderProps): JSX.Element => {
+  const [documentIsAvailable, setDocumentIsAvailable] = useState<boolean>(false)
+  const [notificationsList, setNotificationsList] = useState<JSX.Element>()
+
+  useEffect(() => {
+    // SSR does not have a document, which is required for ToastNotificationsList.
+    // Await document render before rendering the component.
+    if (document !== undefined) {
+      setNotificationsList(<ToastNotificationsList />)
+      setDocumentIsAvailable(true)
+    }
+  }, [documentIsAvailable])
+
+  return (
+    <OptionalIntlProvider locale={locale}>
+      <>
+        <ToastNotificationProvider>
+          {notificationsList}
+          {children}
+        </ToastNotificationProvider>
+        <FontDefinitions />
+      </>
+    </OptionalIntlProvider>
+  )
+}
 
 KaizenProvider.displayName = "KaizenProvider"

package/src/Modal/GenericModal/GenericModal.spec.tsx

@@ -1,59 +1,60 @@
 import React from "react"
-import { render, waitFor } from "@testing-library/react"
+import { render, screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { GenericModal } from "./GenericModal"
+import { GenericModal, GenericModalProps } from "./GenericModal"
+import { ModalAccessibleLabel } from "./subcomponents/ModalAccessibleLabel"
+import { ModalBody } from "./subcomponents/ModalBody"
+import { ModalHeader } from "./subcomponents/ModalHeader"
 
 const user = userEvent.setup()
 
-const ExampleModalWithState = (props: {
-  onAfterLeave?: () => void
-  onEscapeKeyup?: () => void
-  children: React.ReactNode
-}): JSX.Element => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(true)
-  const handleDismiss = (): void => {
-    setIsOpen(false)
-    props.onEscapeKeyup?.()
-  }
+const GenericModalWrapper = ({
+  isOpen: propsIsOpen,
+  onOutsideModalClick,
+  onEscapeKeyup,
+  ...props
+}: Partial<GenericModalProps>): JSX.Element => {
+  const [isOpen, setIsOpen] = React.useState<boolean>(propsIsOpen ?? true)
 
   return (
     <GenericModal
       isOpen={isOpen}
-      onOutsideModalClick={handleDismiss}
-      onEscapeKeyup={handleDismiss}
+      onOutsideModalClick={e => {
+        setIsOpen(false)
+        onOutsideModalClick?.(e)
+      }}
+      onEscapeKeyup={e => {
+        setIsOpen(false)
+        onEscapeKeyup?.(e)
+      }}
       onAfterLeave={props.onAfterLeave}
       id="GenericModalTestId"
     >
-      {props.children}
+      <ModalHeader>
+        <ModalAccessibleLabel>Example</ModalAccessibleLabel>
+      </ModalHeader>
+      <ModalBody>Body contents here</ModalBody>
     </GenericModal>
   )
 }
 
 describe("<GenericModal />", () => {
   it("renders an open modal with the provided content", () => {
-    const { getByText } = render(
-      <GenericModal isOpen={true}>Example</GenericModal>
-    )
-    expect(getByText("Example")).toBeTruthy()
+    render(<GenericModalWrapper />)
+    expect(screen.getByText("Example")).toBeVisible()
   })
 
   it("does not render a closed modal with the provided content", () => {
-    const { getByText } = render(
-      <GenericModal isOpen={false}>Example</GenericModal>
-    )
-    expect(() => getByText("Example")).toThrow()
+    render(<GenericModalWrapper isOpen={false} />)
+    expect(screen.queryByText("Example")).not.toBeInTheDocument()
   })
 
   it("closes the modal when escape key is pressed", async () => {
     const handleDismiss = jest.fn()
 
-    const { getByTestId } = render(
-      <ExampleModalWithState onEscapeKeyup={handleDismiss}>
-        Example
-      </ExampleModalWithState>
-    )
+    render(<GenericModalWrapper onEscapeKeyup={handleDismiss} />)
 
-    const modal = getByTestId("GenericModalTestId")
+    const modal = screen.getByTestId("GenericModalTestId")
 
     await waitFor(() => {
       expect(modal).toBeVisible()
@@ -70,17 +71,9 @@ describe("<GenericModal />", () => {
 
   it("closes the modal when a click is outside of the modal content", async () => {
     const handleDismiss = jest.fn()
-    const { getByTestId } = render(
-      <GenericModal
-        isOpen={true}
-        onOutsideModalClick={handleDismiss}
-        id="GenericModalTestId"
-      >
-        Example
-      </GenericModal>
-    )
+    render(<GenericModalWrapper onOutsideModalClick={handleDismiss} />)
 
-    await user.click(getByTestId("GenericModalTestId-scrollLayer"))
+    await user.click(screen.getByTestId("GenericModalTestId-scrollLayer"))
     await waitFor(() => {
       expect(handleDismiss).toHaveBeenCalledTimes(1)
     })
@@ -88,13 +81,9 @@ describe("<GenericModal />", () => {
 
   it("calls onAfterLeave after it closes", async () => {
     const mockOnAfterLeave = jest.fn()
+    render(<GenericModalWrapper onAfterLeave={mockOnAfterLeave} />)
 
-    const { getByTestId } = render(
-      <ExampleModalWithState onAfterLeave={mockOnAfterLeave}>
-        Catch me if you can
-      </ExampleModalWithState>
-    )
-    await user.click(getByTestId("GenericModalTestId-scrollLayer"))
+    await user.click(screen.getByTestId("GenericModalTestId-scrollLayer"))
     await waitFor(() => expect(mockOnAfterLeave).toHaveBeenCalledTimes(1))
   })
 })

package/src/MultiSelect/MultiSelect.spec.tsx

@@ -212,7 +212,9 @@ describe("<MultiSelect />", () => {
         expect(popover).toBeVisible()
       })
 
-      await user.click(getByRole("button", { name: "Clear all waffles" }))
+      await user.click(
+        getByRole("button", { name: "Remove all options from Jalapeno" })
+      )
 
       await waitFor(() => {
         expect(popover).toBeVisible()
@@ -230,7 +232,8 @@ describe("<MultiSelect />", () => {
           />
         )
         const toggleButton = getByRole("button", { name: "Jalapeno" })
-        expect(toggleButton).toHaveFocus()
+        const dialog = getByRole("dialog")
+        expect(dialog).toHaveFocus()
 
         await user.tab()
         await waitFor(() => {
@@ -263,7 +266,7 @@ describe("<MultiSelect />", () => {
           await user.tab()
           await waitFor(() => {
             expect(
-              getByRole("button", { name: "Clear all waffles" })
+              getByRole("button", { name: "Remove all options from Jalapeno" })
             ).toHaveFocus()
           })
         })
@@ -323,7 +326,9 @@ describe("Removing all options", () => {
     const pancakesOption = getByText("Pancakes")
     const waffleOption = getByText("Waffle")
 
-    const clearAllButton = getByRole("button", { name: "Clear all waffles" })
+    const clearAllButton = getByRole("button", {
+      name: "Remove all options from Jalapeno",
+    })
     await user.click(clearAllButton)
     await waitFor(() => {
       expect(pancakesOption).not.toBeInTheDocument()

package/src/MultiSelect/MultiSelect.tsx

@@ -115,10 +115,12 @@ export const MultiSelect = ({
           refs={refs}
           id={`${id}--popover`}
           focusOnProps={{
+            enabled: true,
             onClickOutside,
             onEscapeKey: handleClose,
             shards: [toggleButtonRef],
             noIsolation: true,
+            onActivation: (): void => refs.floating?.current?.focus(),
           }}
           classNameOverride={styles.popover}
         >

package/src/MultiSelect/_docs/MultiSelect.stickersheet.stories.tsx

@@ -11,7 +11,7 @@ import { MultiSelect, MultiSelectProps } from "../index"
 const IS_CHROMATIC = isChromatic()
 
 export default {
-  title: "Staging/Multi Select",
+  title: "Components/MultiSelect",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/MultiSelect/_docs/MultiSelect.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react"
 import { MultiSelect, MultiSelectProps } from "../index"
 
 const meta = {
-  title: "Staging/Multi Select",
+  title: "Components/MultiSelect",
   component: MultiSelect,
   argTypes: {
     selectedValues: {

package/src/MultiSelect/subcomponents/Checkbox/_docs/Checkbox.stickersheet.stories.tsx

@@ -7,7 +7,7 @@ import {
 import { Checkbox, CheckedStatus } from "../index"
 
 export default {
-  title: "Staging/Multi Select/Checkbox",
+  title: "Components/MultiSelect/Checkbox",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/MultiSelect/subcomponents/Checkbox/_docs/Checkbox.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react"
 import { Checkbox, CheckedStatus } from "../index"
 
 const meta = {
-  title: "Staging/Multi Select/Checkbox",
+  title: "Components/MultiSelect/Checkbox",
   component: Checkbox,
   args: {
     checkedStatus: "unchecked",

package/src/MultiSelect/subcomponents/MultiSelectOptionField/_docs/MultiSelectOptionField.stickersheet.stories.tsx

@@ -5,7 +5,7 @@ import { StickerSheet } from "~storybook/components/StickerSheet"
 import { MultiSelectOptionField, MultiSelectOptionFieldProps } from "../index"
 
 const meta = {
-  title: "Staging/Multi Select/MultiSelectOptionField",
+  title: "Components/MultiSelect/MultiSelectOptionField",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/MultiSelect/subcomponents/MultiSelectOptionField/_docs/MultiSelectOptionField.stories.tsx

@@ -5,7 +5,7 @@ import { CheckboxProps } from "../../Checkbox"
 import { MultiSelectOptionField } from "../index"
 
 const meta = {
-  title: "Staging/Multi Select/MultiSelectOptionField",
+  title: "Components/MultiSelect/MultiSelectOptionField",
   component: MultiSelectOptionField,
   args: {
     id: "id--multi-select-option-field",

package/src/MultiSelect/subcomponents/MultiSelectOptions/_docs/MultiSelectOptions.stickersheet.stories.tsx

@@ -7,7 +7,7 @@ import {
 import { MultiSelectOptions, MultiSelectOptionsProps } from "../index"
 
 export default {
-  title: "Staging/Multi Select/MultiSelectOptions",
+  title: "Components/MultiSelect/MultiSelectOptions",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/MultiSelect/subcomponents/MultiSelectOptions/_docs/MultiSelectOptions.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react"
 import { MultiSelectOptions, MultiSelectOptionsProps } from "../index"
 
 const meta = {
-  title: "Staging/Multi Select/MultiSelectOptions",
+  title: "Components/MultiSelect/MultiSelectOptions",
   component: MultiSelectOptions,
   args: {
     id: "id--multi-select-options",

package/src/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.spec.tsx

@@ -70,42 +70,39 @@ describe("<MultiSelectToggle />", () => {
   })
 
   describe("Has no selected options", () => {
-    // @todo: re-enable test when Clear All functionality implemented
-    // eslint-disable-next-line jest/no-commented-out-tests
-    //   it("does not show the clear all button", () => {
-    //     const { queryByRole } = render(<MultiSelectToggleWrapper />)
-    //     expect(
-    //       queryByRole("button", { name: "Clear all waffles" })
-    //     ).not.toBeInTheDocument()
-    //   })
+    it("does not show the clear all button", () => {
+      const { queryByRole } = render(<MultiSelectToggleWrapper />)
+      expect(
+        queryByRole("button", { name: "Remove all options from Waffle" })
+      ).not.toBeInTheDocument()
+    })
   })
 
   describe("Has selected options", () => {
-    // @todo: re-enable test when Clear option functionality implemented
-    // eslint-disable-next-line jest/no-commented-out-tests
-    // it("does not call onClick when clearing a single selected item", async () => {
-    //   const { getByRole } = render(
-    //     <MultiSelectToggleWrapper
-    //       selectedOptions={[{ value: "waffle", label: "Waffle" }]}
-    //     />
-    //   )
-    //   await user.click(getByRole("button", { name: "Clear waffle" }))
-    //   await waitFor(() => {
-    //     expect(onClick).not.toHaveBeenCalled()
-    //   })
-    // })
-    // @todo: re-enable test when Clear All functionality implemented
-    // eslint-disable-next-line jest/no-commented-out-tests
-    // it("does not call onClick when clearing all selected items", async () => {
-    //   const { getByRole } = render(
-    //     <MultiSelectToggleWrapper
-    //       selectedOptions={[{ value: "waffle", label: "Waffle" }]}
-    //     />
-    //   )
-    //   await user.click(getByRole("button", { name: "Clear all waffles" }))
-    //   await waitFor(() => {
-    //     expect(onClick).not.toHaveBeenCalled()
-    //   })
-    // })
+    it("does not call onClick when clearing a single selected item", async () => {
+      const { getByRole } = render(
+        <MultiSelectToggleWrapper
+          selectedOptions={[{ value: "waffle", label: "Waffle" }]}
+        />
+      )
+      await user.click(getByRole("button", { name: "Remove option: Waffle" }))
+      await waitFor(() => {
+        expect(onClick).not.toHaveBeenCalled()
+      })
+    })
+
+    it("does not call onClick when clearing all selected items", async () => {
+      const { getByRole } = render(
+        <MultiSelectToggleWrapper
+          selectedOptions={[{ value: "waffle", label: "Waffle" }]}
+        />
+      )
+      await user.click(
+        getByRole("button", { name: "Remove all options from Waffle" })
+      )
+      await waitFor(() => {
+        expect(onClick).not.toHaveBeenCalled()
+      })
+    })
   })
 })