@kaizen/components 0.0.0-canary-toast-notification-fix-20240822034045 → 0.0.0-canary-workflow-export-20240910075656

package/src/Modal/ConfirmationModal/ConfirmationModal.spec.tsx

@@ -1,9 +1,9 @@
 import React from "react"
 import { render, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { mockMatchMedia } from "~utils/useMediaQueries.spec"
+import { vi } from "vitest"
+import { mockMatchMedia } from "~components/utils/useMediaQueries.spec"
 import { ConfirmationModal, ConfirmationModalProps } from "./ConfirmationModal"
-
 const user = userEvent.setup()
 
 const ConfirmationModalWrapper = ({
@@ -28,8 +28,8 @@ describe("<ConfirmationModal />", () => {
   })
 
   it("supports a dismiss action when dismiss button is pressed", async () => {
-    const handleConfirm = jest.fn()
-    const handleDismiss = jest.fn()
+    const handleConfirm = vi.fn()
+    const handleDismiss = vi.fn()
     const { getByLabelText } = render(
       <ConfirmationModalWrapper
         onConfirm={handleConfirm}
@@ -46,8 +46,8 @@ describe("<ConfirmationModal />", () => {
   })
 
   it("supports a dismiss action when cancel button is pressed", async () => {
-    const handleConfirm = jest.fn()
-    const handleDismiss = jest.fn()
+    const handleConfirm = vi.fn()
+    const handleDismiss = vi.fn()
     const { getByText } = render(
       <ConfirmationModalWrapper
         onDismiss={handleDismiss}
@@ -64,8 +64,8 @@ describe("<ConfirmationModal />", () => {
   })
 
   it("supports a confirm action when confirm button is pressed", async () => {
-    const handleConfirm = jest.fn()
-    const handleDismiss = jest.fn()
+    const handleConfirm = vi.fn()
+    const handleDismiss = vi.fn()
     const { getByText } = render(
       <ConfirmationModalWrapper
         onDismiss={handleDismiss}

package/src/Modal/ConfirmationModal/ConfirmationModal.tsx

@@ -210,7 +210,11 @@ export const ConfirmationModal = ({
         </ModalBody>
         <ModalFooter
           actions={footerActions}
-          appearance={mood === "negative" ? "destructive" : "primary"}
+          appearance={
+            mood === "negative" || variant == "warning"
+              ? "destructive"
+              : "primary"
+          }
           unpadded={unpadded}
         />
       </div>

package/src/Modal/ContextModal/ContextModal.spec.tsx

@@ -1,9 +1,9 @@
 import React from "react"
 import { render, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { mockMatchMedia } from "~utils/useMediaQueries.spec"
+import { vi } from "vitest"
+import { mockMatchMedia } from "~components/utils/useMediaQueries.spec"
 import { ContextModal, ContextModalProps } from "./ContextModal"
-
 const user = userEvent.setup()
 
 const ContextModalWrapper = ({
@@ -29,8 +29,8 @@ describe("<ContextModal />", () => {
   })
 
   it("supports a dismiss action when dismiss button is pressed", async () => {
-    const handleConfirm = jest.fn()
-    const handleDismiss = jest.fn()
+    const handleConfirm = vi.fn()
+    const handleDismiss = vi.fn()
     const { getByLabelText } = render(
       <ContextModalWrapper onConfirm={handleConfirm} onDismiss={handleDismiss}>
         Example modal body
@@ -44,8 +44,8 @@ describe("<ContextModal />", () => {
   })
 
   it("supports a confirm action when confirm button is pressed", async () => {
-    const handleConfirm = jest.fn()
-    const handleDismiss = jest.fn()
+    const handleConfirm = vi.fn()
+    const handleDismiss = vi.fn()
     const { getByText } = render(
       <ContextModalWrapper onDismiss={handleDismiss} onConfirm={handleConfirm}>
         Example modal body

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

@@ -1,11 +1,11 @@
 import React from "react"
 import { render, screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 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 GenericModalWrapper = ({
@@ -50,7 +50,7 @@ describe("<GenericModal />", () => {
   })
 
   it("closes the modal when escape key is pressed", async () => {
-    const handleDismiss = jest.fn()
+    const handleDismiss = vi.fn()
 
     render(<GenericModalWrapper onEscapeKeyup={handleDismiss} />)
 
@@ -70,7 +70,7 @@ describe("<GenericModal />", () => {
   })
 
   it("closes the modal when a click is outside of the modal content", async () => {
-    const handleDismiss = jest.fn()
+    const handleDismiss = vi.fn()
     render(<GenericModalWrapper onOutsideModalClick={handleDismiss} />)
 
     await user.click(screen.getByTestId("GenericModalTestId-scrollLayer"))
@@ -80,7 +80,7 @@ describe("<GenericModal />", () => {
   })
 
   it("calls onAfterLeave after it closes", async () => {
-    const mockOnAfterLeave = jest.fn()
+    const mockOnAfterLeave = vi.fn()
     render(<GenericModalWrapper onAfterLeave={mockOnAfterLeave} />)
 
     await user.click(screen.getByTestId("GenericModalTestId-scrollLayer"))

package/src/Modal/GenericModal/subcomponents/ModalFooter/ModalFooter.tsx

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
 import { Button, ButtonProps } from "~components/__actions__/v2"
-import { useMediaQueries } from "~utils/useMediaQueries"
+import { useMediaQueries } from "~components/utils/useMediaQueries"
 import { ModalBody } from "../ModalBody/ModalBody"
 import styles from "./ModalFooter.module.scss"
 

package/src/Modal/InputEditModal/InputEditModal.spec.tsx

@@ -1,9 +1,9 @@
 import React from "react"
 import { render, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { mockMatchMedia } from "~utils/useMediaQueries.spec"
+import { vi } from "vitest"
+import { mockMatchMedia } from "~components/utils/useMediaQueries.spec"
 import { InputEditModal, InputEditModalProps } from "./InputEditModal"
-
 const user = userEvent.setup()
 
 const InputEditModalWrapper = ({
@@ -28,8 +28,8 @@ describe("<InputEditModal />", () => {
   })
 
   it("supports a dismiss action when dismiss button is pressed", async () => {
-    const handleSubmit = jest.fn()
-    const handleDismiss = jest.fn()
+    const handleSubmit = vi.fn()
+    const handleDismiss = vi.fn()
     const { getByLabelText } = render(
       <InputEditModalWrapper onSubmit={handleSubmit} onDismiss={handleDismiss}>
         Example modal body
@@ -43,8 +43,8 @@ describe("<InputEditModal />", () => {
   })
 
   it("supports a dismiss action when cancel button is pressed", async () => {
-    const handleSubmit = jest.fn()
-    const handleDismiss = jest.fn()
+    const handleSubmit = vi.fn()
+    const handleDismiss = vi.fn()
     const { getByText } = render(
       <InputEditModalWrapper onDismiss={handleDismiss} onSubmit={handleSubmit}>
         Example modal body
@@ -58,8 +58,8 @@ describe("<InputEditModal />", () => {
   })
 
   it("supports a Submit action when Submit button is pressed", async () => {
-    const handleSubmit = jest.fn()
-    const handleDismiss = jest.fn()
+    const handleSubmit = vi.fn()
+    const handleDismiss = vi.fn()
     const { getByText } = render(
       <InputEditModalWrapper onDismiss={handleDismiss} onSubmit={handleSubmit}>
         Example modal body

package/src/MultiSelect/MultiSelect.tsx

@@ -3,7 +3,7 @@ import classnames from "classnames"
 import { ReactFocusOnProps } from "react-focus-on/dist/es5/types"
 import { FieldMessage, FieldMessageProps } from "~components/FieldMessage"
 import { Heading } from "~components/Heading"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import {
   MultiSelectOptions,
   MultiSelectOptionsProps,
@@ -114,6 +114,9 @@ export const MultiSelect = ({
         <Popover
           refs={refs}
           id={`${id}--popover`}
+          role="dialog"
+          aria-modal="true"
+          tabIndex={-1}
           focusOnProps={{
             enabled: true,
             onClickOutside,

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, InputHTMLAttributes } from "react"
 import classnames from "classnames"
 import { CheckIcon, MinusIcon } from "~components/Icon"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./Checkbox.module.scss"
 
 export type CheckedStatus = "checked" | "unchecked" | "indeterminate"

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

@@ -1,15 +1,15 @@
 import React, { useState } from "react"
 import { render, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import { CheckboxProps } from "../Checkbox"
 import {
   MultiSelectOptionField,
   MultiSelectOptionFieldProps,
 } from "./MultiSelectOptionField"
-
 const user = userEvent.setup()
 
-const onChange = jest.fn()
+const onChange = vi.fn()
 
 const MultiSelectOptionFieldWrapper = (
   customProps?: Partial<MultiSelectOptionFieldProps>
@@ -42,7 +42,7 @@ const MultiSelectOptionFieldWrapper = (
 
 describe("<MultiSelectOptionField />", () => {
   afterEach(() => {
-    jest.clearAllMocks()
+    vi.clearAllMocks()
   })
 
   it("has an accessible name", () => {

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

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import { MultiSelectOption } from "../../types"
 import { Checkbox, CheckboxProps } from "../Checkbox"
 import styles from "./MultiSelectOptionField.module.scss"

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

@@ -1,14 +1,14 @@
 import React, { useState } from "react"
 import { render, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import {
   MultiSelectOptions,
   MultiSelectOptionsProps,
 } from "./MultiSelectOptions"
-
 const user = userEvent.setup()
 
-const onChange = jest.fn()
+const onChange = vi.fn()
 const testOptions = [
   {
     label: "Pancakes",
@@ -46,7 +46,7 @@ const MultiSelectOptionsWrapper = (
 
 describe("<MultiSelectOptions />", () => {
   afterEach(() => {
-    jest.clearAllMocks()
+    vi.clearAllMocks()
   })
 
   it("contains the number of options available in the accessible description", () => {

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

@@ -2,7 +2,7 @@ import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
 import { Text } from "~components/Text"
 import { VisuallyHidden } from "~components/VisuallyHidden"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import { MultiSelectOption } from "../../types"
 import { MultiSelectOptionField } from "../MultiSelectOptionField"
 import styles from "./MultiSelectOptions.module.scss"

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

@@ -1,11 +1,11 @@
 import React from "react"
 import { render, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import { MultiSelectToggle, MultiSelectToggleProps } from "./MultiSelectToggle"
-
 const user = userEvent.setup()
 
-const onClick = jest.fn()
+const onClick = vi.fn()
 
 const MultiSelectToggleWrapper = (
   customProps?: Partial<MultiSelectToggleProps>

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

@@ -4,7 +4,7 @@ import { ClearButton } from "~components/ClearButton"
 import { FieldMessageProps } from "~components/FieldMessage"
 import { ChevronDownIcon, ChevronUpIcon } from "~components/Icon"
 import { RemovableTag } from "~components/__future__"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import { MultiSelectOption } from "../../types"
 import styles from "./MultiSelectToggle.module.scss"
 

package/src/MultiSelect/subcomponents/Popover/Popover.module.scss

@@ -10,6 +10,7 @@
   border-radius: $border-solid-border-radius;
   background: $color-white;
   overflow: auto;
+  z-index: 100000;
 
   &:focus {
     outline: none;

package/src/MultiSelect/subcomponents/Popover/Popover.tsx

@@ -13,7 +13,7 @@ import {
 import classnames from "classnames"
 import { FocusOn } from "react-focus-on"
 import { ReactFocusOnProps } from "react-focus-on/dist/es5/types"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./Popover.module.scss"
 
 export type PopoverProps<RT extends ReferenceType = ReferenceType> = {
@@ -65,9 +65,6 @@ export const Popover = <RT extends ReferenceType>({
         ref={refs.setFloating}
         style={floatingStyles}
         className={classnames(styles.popover, classNameOverride)}
-        role="dialog"
-        aria-modal="true"
-        tabIndex={-1}
         {...restProps}
       >
         {children}

package/src/Notification/GlobalNotification/GlobalNotification.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import {
   GenericNotification,
   GenericNotificationType,

package/src/Notification/InlineNotification/InlineNotification.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import classnames from "classnames"
 import { HeadingProps } from "~components/Heading"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import {
   GenericNotification,
   GenericNotificationType,

package/src/Notification/ToastNotification/ToastNotificationsList/subcomponents/ToastNotificationsMap/ToastNotificationsMap.tsx

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes } from "react"
 import { createPortal } from "react-dom"
 import { GenericNotification } from "~components/Notification/subcomponents/GenericNotification"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import { ToastNotificationObj } from "../../../types"
 
 export type ToastNotificationsMapProps = {

package/src/Notification/ToastNotification/_docs/ToastNotification.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useId } from "react"
 import { Meta, StoryObj } from "@storybook/react"
+import { expect, within } from "@storybook/test"
 import { Button } from "~components/__actions__/v2"
 import { ToastNotification, useToastNotification } from "../index"
 
@@ -175,3 +176,35 @@ export const ClearNotifications: Story = {
     )
   },
 }
+
+export const NoDuplicatesWithSameId: Story = {
+  render: () => {
+    const { addToastNotification } = useToastNotification()
+
+    useEffect(() => {
+      addToastNotification({
+        id: "id--clear-example-1",
+        title: "First",
+        type: "positive",
+        message: "There should only be one notification",
+      })
+      addToastNotification({
+        id: "id--clear-example-1",
+        title: "First",
+        type: "positive",
+        message: "There should only be one notification",
+      })
+    }, [addToastNotification])
+
+    return <div>Irrelevant content</div>
+  },
+  play: async context => {
+    const { canvasElement } = context
+    const { findAllByText } = within(canvasElement.parentElement!)
+
+    const notifications = await findAllByText(
+      "There should only be one notification"
+    )
+    expect(notifications).toHaveLength(1)
+  },
+}

package/src/Notification/ToastNotification/context/ToastNotificationContext.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useState } from "react"
+import React, { useContext, useState } from "react"
 import { v4 as uuidv4 } from "uuid"
 import {
   GenericNotificationType,
@@ -44,23 +44,18 @@ export const ToastNotificationProvider = ({
   const [notifications, setNotifications] = useState<ToastNotificationObj[]>([])
 
   const addToastNotification: ToastNotificationContextValue["addToastNotification"] =
-    useCallback(
-      notification => {
-        const uuid = uuidv4()
-        const notificationWithId = { id: uuid, ...notification }
-
-        setNotifications(existing => {
-          const notificationExists = existing.find(
-            ({ id }) => id === notification.id
-          )
-
-          return notificationExists
-            ? existing
-            : [...existing, notificationWithId]
-        })
-      },
-      [setNotifications]
-    )
+    notification => {
+      const uuid = uuidv4()
+      const notificationWithId = { id: uuid, ...notification }
+
+      setNotifications(existing => {
+        const notificationExists = existing.find(
+          ({ id }) => id === notification.id
+        )
+
+        return notificationExists ? existing : [...existing, notificationWithId]
+      })
+    }
 
   const updateToastNotification = (
     notification: ToastNotificationObj

package/src/Notification/ToastNotification/types.ts

@@ -1,4 +1,4 @@
-import { DataAttributes } from "~types/DataAttributes"
+import { DataAttributes } from "~components/types/DataAttributes"
 import {
   GenericNotificationType,
   GenericNotificationVariant,

package/src/Notification/subcomponents/GenericNotification/GenericNotification.stories.tsx

@@ -0,0 +1,60 @@
+import React, { useState } from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { userEvent, within, expect, waitFor } from "@storybook/test"
+import { GenericNotification } from "./index"
+
+const meta = {
+  title: "Components/Notifications/GenericNotification",
+  component: GenericNotification,
+  args: {
+    variant: "success",
+    style: "inline",
+    title: "Success",
+    children: "This is my positive notification",
+  },
+} satisfies Meta<typeof GenericNotification>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const GenericNotificationTest: Story = {
+  render: () => {
+    const [isHidden, setIsHidden] = useState<boolean>(false)
+
+    return (
+      <div>
+        <span data-testid="hidden-state">{isHidden ? "Hidden" : "Shown"}</span>
+        <GenericNotification
+          variant="success"
+          style="inline"
+          title="Success"
+          data-testid="generic-notification"
+          onHide={() => setIsHidden(true)}
+        >
+          This is my positive notification
+        </GenericNotification>
+      </div>
+    )
+  },
+  name: "Test: Closes when close button is clicked and onHide is called",
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const element = canvas.getByTestId("generic-notification")
+    const hiddenState = canvas.getByTestId("hidden-state")
+
+    await waitFor(() => {
+      expect(element).toBeInTheDocument()
+      expect(hiddenState).toHaveTextContent("Shown")
+    })
+
+    await userEvent.click(canvas.getByTestId("close-button"))
+
+    await waitFor(() => {
+      setTimeout(() => {
+        expect(hiddenState).toHaveTextContent("Hidden")
+        expect(element).not.toBeInTheDocument()
+      }, 1000)
+    })
+  },
+}

package/src/Notification/subcomponents/GenericNotification/GenericNotification.tsx

@@ -5,7 +5,7 @@ import {
   NotificationType,
   NotificationVariant,
 } from "~components/Notification/types"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import { CancelButton } from "../CancelButton"
 import { NotificationHeading } from "../NotificationHeading"
 import {

package/src/Pagination/Pagination.spec.tsx

@@ -11,12 +11,12 @@ const defaultProps = {
   ariaLabelNextPage: "Next page",
   ariaLabelPreviousPage: "Previous page",
   ariaLabelPage: "Page",
-  onPageChange: jest.fn<void, [number]>(),
+  onPageChange: vi.fn(),
 }
 
 describe("<Pagination />", () => {
   it("calls onPageChange when clicking page number", async () => {
-    const onPageChange = jest.fn<void, [number]>()
+    const onPageChange = vi.fn()
 
     render(<Pagination {...defaultProps} onPageChange={onPageChange} />)
 

package/src/Pagination/Pagination.tsx

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import { DirectionalLink } from "./subcomponents/DirectionalLink"
 import { PaginationLink } from "./subcomponents/PaginationLink"
 import { TruncateIndicator } from "./subcomponents/TruncateIndicator"

package/src/Popover/Popover.tsx

@@ -4,7 +4,7 @@ import { usePopper } from "react-popper"
 import { Heading } from "~components/Heading"
 import { CloseIcon } from "~components/Icon"
 import { Text } from "~components/Text"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import { Placement, PopoverSize, PopoverVariant } from "./types"
 import {
   mapArrowVariantToClass,

package/src/ProgressBar/ProgressBar.tsx

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
 import { Heading } from "~components/Heading"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import { Label } from "./subcomponents/Label"
 import { calculatePercentage } from "./utils/calculatePercentage"
 import styles from "./ProgressBar.module.scss"

package/src/Radio/Radio/Radio.tsx

@@ -1,6 +1,6 @@
 import React, { InputHTMLAttributes } from "react"
 import classnames from "classnames"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./Radio.module.scss"
 
 export type RadioProps = OverrideClassName<

package/src/Radio/RadioGroup/RadioGroup.tsx

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes, useId } from "react"
 import classnames from "classnames"
 import { Label } from "~components/Label"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./RadioGroup.module.scss"
 
 export type RadioGroupProps = OverrideClassName<

package/src/RichTextEditor/EditableRichTextContent/EditableRichTextContent.spec.tsx

@@ -1,11 +1,11 @@
 import React from "react"
 import { render } from "@testing-library/react"
+import { vi } from "vitest"
 import { RichTextContentProps } from "../RichTextContent"
 import { EditableRichTextContent } from "./EditableRichTextContent"
+const mockFn = vi.fn()
 
-const mockFn = jest.fn()
-
-jest.mock("../RichTextContent", () => ({
+vi.mock("../RichTextContent", () => ({
   __esModule: true,
   RichTextContent: (props: RichTextContentProps): JSX.Element => {
     mockFn(props)
@@ -26,7 +26,7 @@ describe("Content props are passed", () => {
       <EditableRichTextContent
         content={content}
         labelText=""
-        onClick={jest.fn()}
+        onClick={vi.fn()}
         contentProps={{ id: "sampleId" }}
       />
     )

package/src/RichTextEditor/EditableRichTextContent/EditableRichTextContent.tsx

@@ -2,7 +2,7 @@ import React, { MouseEvent, HTMLAttributes } from "react"
 import classnames from "classnames"
 import { Label } from "~components/Label"
 import { VisuallyHidden } from "~components/VisuallyHidden"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import { RichTextContent, RichTextContentProps } from "../RichTextContent"
 import { EditorContentArray } from "../types"
 import styles from "./EditableRichTextContent.module.scss"