@kaizen/components 1.36.0 → 1.37.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.36.0",
+  "version": "1.37.1",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

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

@@ -17,7 +17,7 @@ import * as ToastNotificationStories from "./ToastNotification.stories"
 
 <Installation
   installCommand="yarn add @kaizen/components"
-  importStatement='import { addToastNotification } from "@kaizen/components"'
+  importStatement='import { useToastNotification } from "@kaizen/components"'
 />
 
 ## Overview

package/src/index.ts

@@ -48,13 +48,14 @@ export * from "./Table"
 export * from "./Tabs"
 export * from "./Tag"
 export * from "./Text"
-export * from "./TextField"
 export * from "./TextArea"
 export * from "./TextAreaField"
+export * from "./TextField"
 export * from "./Tile"
 export * from "./TimeField"
+export * from "./TitleBlockZen"
 export * from "./ToggleSwitch"
 export * from "./Tooltip"
-export * from "./TitleBlockZen"
-export * from "./Workflow"
+export * from "./VisuallyHidden"
 export * from "./Well"
+export * from "./Workflow"