@kaizen/components 1.35.2 → 1.36.0

package/dist/cjs/dts/Notification/ToastNotification/subcomponents/ToastNotificationsList/ToastNotificationsList.d.ts

@@ -1,11 +0,0 @@
-import { HTMLAttributes } from "react";
-import { OverrideClassName } from "../../../../types/OverrideClassName";
-import { RemoveToastNotification, ToastNotification } from "../../types";
-export type ToastNotificationsListProps = {
-    notifications: ToastNotification[];
-    onHide: RemoveToastNotification;
-} & OverrideClassName<HTMLAttributes<HTMLDivElement>>;
-export declare const ToastNotificationsList: {
-    ({ notifications, onHide: defaultOnHide, }: ToastNotificationsListProps): JSX.Element;
-    displayName: string;
-};

package/dist/cjs/dts/Notification/ToastNotification/subcomponents/ToastNotificationsListContainer/ToastNotificationsListContainer.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-import { RemoveToastNotification, ToastNotification } from "../../types";
-export type ToastNotificationsListContainerProps = {
-    removeToastNotification: RemoveToastNotification;
-    registerSetNotificationsCallback: (callback: React.Dispatch<React.SetStateAction<ToastNotification[]>>) => void;
-};
-export declare const ToastNotificationsListContainer: ({ removeToastNotification, registerSetNotificationsCallback, }: ToastNotificationsListContainerProps) => JSX.Element;

package/dist/cjs/dts/Notification/ToastNotification/subcomponents/ToastNotificationsListContainer/index.d.ts

@@ -1 +0,0 @@
-export * from "./ToastNotificationsListContainer";

package/dist/esm/dts/Notification/ToastNotification/ToastNotification.d.ts

@@ -1,14 +0,0 @@
-import React from "react";
-import { ToastNotificationWithOptionals } from "./types";
-export type ToastNotificationProps = Omit<ToastNotificationWithOptionals, "message" | "persistent"> & {
-    /**
-     * Removes the dismiss trigger. functions the same as `persistent` in `addToastNotification`. If this is true you will need to manage the removal of notifications manually.
-     * @default false
-     */
-    hideCloseIcon?: boolean;
-    children: React.ReactNode;
-};
-export declare const ToastNotification: {
-    ({ id: propsId, hideCloseIcon, type, title, onHide, children, ...restProps }: ToastNotificationProps): null;
-    displayName: string;
-};

package/dist/esm/dts/Notification/ToastNotification/subcomponents/ToastNotificationManager/ToastNotificationManager.d.ts

@@ -1,7 +0,0 @@
-import { AddToastNotification, ClearToastNotifications, RemoveToastNotification } from "../../types";
-/**
- * Export the curried API methods
- */
-export declare const addToastNotification: AddToastNotification;
-export declare const clearToastNotifications: ClearToastNotifications;
-export declare const removeToastNotification: RemoveToastNotification;

package/dist/esm/dts/Notification/ToastNotification/subcomponents/ToastNotificationManager/index.d.ts

@@ -1 +0,0 @@
-export * from "./ToastNotificationManager";

package/dist/esm/dts/Notification/ToastNotification/subcomponents/ToastNotificationsList/ToastNotificationsList.d.ts

@@ -1,11 +0,0 @@
-import { HTMLAttributes } from "react";
-import { OverrideClassName } from "../../../../types/OverrideClassName";
-import { RemoveToastNotification, ToastNotification } from "../../types";
-export type ToastNotificationsListProps = {
-    notifications: ToastNotification[];
-    onHide: RemoveToastNotification;
-} & OverrideClassName<HTMLAttributes<HTMLDivElement>>;
-export declare const ToastNotificationsList: {
-    ({ notifications, onHide: defaultOnHide, }: ToastNotificationsListProps): JSX.Element;
-    displayName: string;
-};

package/dist/esm/dts/Notification/ToastNotification/subcomponents/ToastNotificationsListContainer/ToastNotificationsListContainer.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-import { RemoveToastNotification, ToastNotification } from "../../types";
-export type ToastNotificationsListContainerProps = {
-    removeToastNotification: RemoveToastNotification;
-    registerSetNotificationsCallback: (callback: React.Dispatch<React.SetStateAction<ToastNotification[]>>) => void;
-};
-export declare const ToastNotificationsListContainer: ({ removeToastNotification, registerSetNotificationsCallback, }: ToastNotificationsListContainerProps) => JSX.Element;

package/dist/esm/dts/Notification/ToastNotification/subcomponents/ToastNotificationsListContainer/index.d.ts

@@ -1 +0,0 @@
-export * from "./ToastNotificationsListContainer";

package/src/Notification/ToastNotification/ToastNotification.spec.tsx

@@ -1,31 +0,0 @@
-import React from "react"
-import { render, screen } from "@testing-library/react"
-import { ToastNotification } from "./ToastNotification"
-import { clearToastNotifications } from "./subcomponents/ToastNotificationManager"
-
-describe("<ToastNotification />", () => {
-  beforeEach(() => {
-    clearToastNotifications()
-  })
-  it('creates a single "status" container for notifications', async () => {
-    render(
-      <ToastNotification type="positive" title="Success">
-        It worked!
-      </ToastNotification>
-    )
-
-    const toastPortalManager = await screen.getAllByRole("status")
-
-    expect(toastPortalManager).toHaveLength(1)
-  })
-  it("renders a basic notification correctly", async () => {
-    render(
-      <ToastNotification type="positive" title="Success">
-        It worked!
-      </ToastNotification>
-    )
-
-    const notification = await screen.findByText("Success")
-    expect(notification).toBeInTheDocument()
-  })
-})

package/src/Notification/ToastNotification/ToastNotification.tsx

@@ -1,43 +0,0 @@
-import React, { useId } from "react"
-import { addToastNotification } from "./subcomponents/ToastNotificationManager"
-import { ToastNotificationWithOptionals } from "./types"
-
-export type ToastNotificationProps = Omit<
-  ToastNotificationWithOptionals,
-  "message" | "persistent"
-> & {
-  /**
-   * Removes the dismiss trigger. functions the same as `persistent` in `addToastNotification`. If this is true you will need to manage the removal of notifications manually.
-   * @default false
-   */
-  hideCloseIcon?: boolean
-  children: React.ReactNode
-}
-
-export const ToastNotification = ({
-  id: propsId,
-  hideCloseIcon = false,
-  type,
-  title,
-  onHide,
-  children,
-  ...restProps
-}: ToastNotificationProps): null => {
-  const reactId = useId()
-  const id = propsId || reactId
-  const persistent = hideCloseIcon
-
-  addToastNotification({
-    id,
-    type,
-    title,
-    message: children,
-    persistent,
-    onHide,
-    ...restProps,
-  })
-
-  return null
-}
-
-ToastNotification.displayName = "ToastNotification"

package/src/Notification/ToastNotification/subcomponents/ToastNotificationManager/ToastNotificationManager.spec.tsx

@@ -1,144 +0,0 @@
-import React from "react"
-import { act, screen } from "@testing-library/react"
-import {
-  addToastNotification,
-  removeToastNotification,
-  clearToastNotifications,
-} from "."
-
-describe("ToastNotificationsManager", () => {
-  beforeEach(() => {
-    act(() => {
-      clearToastNotifications()
-    })
-  })
-
-  describe("addToastNotification", () => {
-    it('creates a single "status" container for notifications', async () => {
-      await act(async () => {
-        addToastNotification({
-          type: "informative",
-          title: "Test portal",
-          message: <p>Message goes here</p>,
-          persistent: false,
-        })
-      })
-
-      const toastPortalManager = await screen.getAllByRole("status")
-
-      expect(toastPortalManager).toHaveLength(1)
-
-      // This is currently hard coded
-      expect(
-        await screen.getByTestId("toast-notification-manager-portal")
-      ).toBeInTheDocument()
-    })
-
-    it("creates a notification", async () => {
-      await act(async () => {
-        addToastNotification({
-          id: "abc-123",
-          type: "informative",
-          title: "Test portal",
-          message: <p>Message goes here</p>,
-          persistent: false,
-        })
-      })
-
-      const toastItem = await screen.findByText("Message goes here")
-
-      expect(toastItem).toBeInTheDocument()
-    })
-
-    it("updates the existing notification if addToastNotification is called with the same id", async () => {
-      await act(async () => {
-        addToastNotification({
-          id: "abc-123",
-          type: "informative",
-          title: "Test portal",
-          message: <p>Message goes here</p>,
-          persistent: false,
-          "data-testid": "bbc-324",
-        })
-      })
-
-      const toastItem = await screen.getByTestId("bbc-324")
-
-      expect(toastItem).toHaveTextContent("Message goes here")
-
-      await act(async () => {
-        addToastNotification({
-          id: "abc-123",
-          type: "informative",
-          title: "Test portal",
-          message: <p>Updated Message</p>,
-          persistent: false,
-          "data-testid": "bbc-324",
-        })
-      })
-
-      expect(toastItem).toHaveTextContent("Updated Message")
-    })
-  })
-
-  describe("removeToastNotification", () => {
-    it("removes a single notifciation", async () => {
-      await act(async () => {
-        addToastNotification({
-          id: "abc-123",
-          type: "informative",
-          title: "Test portal",
-          message: <p>Message goes here</p>,
-          persistent: false,
-        })
-      })
-
-      const toastItem = await screen.findByText("Message goes here")
-      expect(toastItem).toBeInTheDocument()
-
-      await act(async () => {
-        removeToastNotification("abc-123")
-      })
-      expect(toastItem).not.toBeInTheDocument()
-    })
-  })
-
-  describe("clearToastNotifications", () => {
-    it("clears all notifications", async () => {
-      await act(async () => {
-        addToastNotification({
-          id: "abc-123",
-          type: "informative",
-          title: "Test portal",
-          message: <p>Message goes here</p>,
-          persistent: false,
-          "data-testid": "id--toast-1",
-        })
-      })
-
-      await act(async () => {
-        addToastNotification({
-          id: "abc-456",
-          type: "informative",
-          title: "Test portal 2",
-          message: <p>Second message goes here</p>,
-          persistent: false,
-          "data-testid": "id--toast-2",
-        })
-      })
-
-      const toastItem1 = await screen.getByTestId("id--toast-1")
-      const toastItem2 = await screen.getByTestId("id--toast-2")
-
-      expect(toastItem1).toBeInTheDocument()
-      expect(toastItem2).toBeInTheDocument()
-
-      await act(async () => {
-        clearToastNotifications()
-      })
-
-      await expect(toastItem1).not.toBeInTheDocument()
-      await expect(toastItem2).not.toBeInTheDocument()
-    })
-  })
-})

package/src/Notification/ToastNotification/subcomponents/ToastNotificationManager/ToastNotificationManager.tsx

@@ -1,135 +0,0 @@
-import React from "react"
-import { createRoot } from "react-dom/client"
-import { v4 } from "uuid"
-import {
-  AddToastNotification,
-  ClearToastNotifications,
-  RemoveToastNotification,
-  ToastNotification,
-  ToastNotificationWithOptionals,
-} from "../../types"
-
-import { ToastNotificationsListContainer } from "../ToastNotificationsListContainer"
-
-type ToastNotificationApi = {
-  addToastNotification: AddToastNotification
-  removeToastNotification: RemoveToastNotification
-  clearToastNotifications: ClearToastNotifications
-}
-
-/**
- * Persistent reference to a "portal" for rendering the separate DOM tree
- */
-let portal: HTMLDivElement | undefined
-
-/**
- * Set default values for optional params
- */
-const setDefaults = (
-  notificationMaybe: ToastNotificationWithOptionals
-): ToastNotification => {
-  const copy = { ...notificationMaybe }
-  if (typeof copy.id === "undefined") {
-    copy.id = v4()
-  }
-  return copy as ToastNotification
-}
-
-/**
- * Create an instance of the toast notification manager
- * Renders ToastNotifications in an independent React tree
- * @returns { addToastNotification, removeToastNotification, clearToastNotifications }
- */
-const createToastNotificationManager = (): ToastNotificationApi => {
-  let setNotifications:
-    | React.Dispatch<React.SetStateAction<ToastNotification[]>>
-    | undefined
-  if (portal === undefined && typeof window !== "undefined") {
-    // automation and testid appear to be consumed in other repos, we'll need to refactor before we remove so they can be added in
-    portal = document.createElement("div")
-    portal.setAttribute("data-testid", "toast-notification-manager-portal")
-    portal.setAttribute("role", "status")
-
-    document.body.appendChild(portal)
-  }
-
-  const state: {
-    notifications: ToastNotification[]
-  } = {
-    notifications: [],
-  }
-
-  const addToastNotification: AddToastNotification = notification => {
-    const notificationWithId = setDefaults(notification)
-
-    const notificationIndex = state.notifications.findIndex(
-      n => n.id === notification.id
-    )
-
-    if (notificationIndex > -1) {
-      const copy = state.notifications.slice()
-      copy.splice(notificationIndex, 1, notificationWithId) // Mutation to insert notification over itself
-      state.notifications = copy
-    } else {
-      state.notifications = [...state.notifications, notificationWithId]
-    }
-    render()
-  }
-
-  const removeToastNotification = (notificationID: string): void => {
-    const notificationIndex = state.notifications.findIndex(
-      notification => notification.id === notificationID
-    )
-    const copy = state.notifications.slice()
-    copy.splice(notificationIndex, 1) // Mutation
-    state.notifications = copy
-    render()
-  }
-
-  const clearToastNotifications = (): void => {
-    state.notifications = []
-    render()
-  }
-
-  const registerSetNotificationsCallback = (
-    cb: React.Dispatch<React.SetStateAction<ToastNotification[]>>
-  ): void => {
-    setNotifications = cb
-    render()
-  }
-
-  const render = (): void => {
-    if (setNotifications) {
-      setNotifications(state.notifications)
-    }
-  }
-
-  if (portal) {
-    const root = createRoot(portal)
-
-    root.render(
-      <ToastNotificationsListContainer
-        removeToastNotification={removeToastNotification}
-        registerSetNotificationsCallback={registerSetNotificationsCallback}
-      />
-    )
-  }
-
-  return {
-    addToastNotification,
-    clearToastNotifications,
-    removeToastNotification,
-  }
-}
-
-/**
- * Singleton instance of the toast notification manager
- */
-const instance = createToastNotificationManager()
-
-/**
- * Export the curried API methods
- */
-export const addToastNotification = instance.addToastNotification
-export const clearToastNotifications = instance.clearToastNotifications
-export const removeToastNotification = instance.removeToastNotification

package/src/Notification/ToastNotification/subcomponents/ToastNotificationManager/index.ts

@@ -1 +0,0 @@
-export * from "./ToastNotificationManager"

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

@@ -1,40 +0,0 @@
-import React, { HTMLAttributes } from "react"
-import { GenericNotification } from "~components/Notification/subcomponents/GenericNotification"
-import { OverrideClassName } from "~types/OverrideClassName"
-import { RemoveToastNotification, ToastNotification } from "../../types"
-import styles from "./ToastNotificationsList.module.scss"
-
-export type ToastNotificationsListProps = {
-  notifications: ToastNotification[]
-  onHide: RemoveToastNotification
-} & OverrideClassName<HTMLAttributes<HTMLDivElement>>
-
-export const ToastNotificationsList = ({
-  notifications,
-  onHide: defaultOnHide,
-}: ToastNotificationsListProps): JSX.Element => (
-  <div className={styles.list}>
-    {notifications.map(
-      ({ id, type, title, persistent, onHide, message, ...restProps }) => (
-        <GenericNotification
-          key={id}
-          style="toast"
-          type={type}
-          title={title}
-          persistent={persistent}
-          onHide={(): void => {
-            if (typeof onHide !== "undefined") {
-              onHide()
-            }
-            defaultOnHide(id)
-          }}
-          {...restProps}
-        >
-          {message}
-        </GenericNotification>
-      )
-    )}
-  </div>
-)
-
-ToastNotificationsList.displayName = "ToastNotificationsList"

package/src/Notification/ToastNotification/subcomponents/ToastNotificationsListContainer/ToastNotificationsListContainer.spec.tsx

@@ -1,73 +0,0 @@
-import React from "react"
-import { fireEvent } from "@testing-library/dom"
-import { render, act, waitFor, screen } from "@testing-library/react"
-import { ToastNotification } from "../../types"
-import { ToastNotificationsListContainer } from "./ToastNotificationsListContainer"
-
-describe("<ToastNotificationsListContainer />", () => {
-  it("passes the setNotifications callback", () => {
-    const registerCallback = jest.fn()
-    render(
-      <ToastNotificationsListContainer
-        registerSetNotificationsCallback={registerCallback}
-        removeToastNotification={jest.fn()}
-      />
-    )
-
-    expect(registerCallback).toHaveBeenCalledTimes(1)
-  })
-
-  it("renders notifications added through the setNotifications callback", async () => {
-    let callback: (notifications: ToastNotification[]) => void | undefined
-    const registerCallback = jest.fn(cb => (callback = cb))
-    const removeToastNotification = jest.fn()
-    render(
-      <ToastNotificationsListContainer
-        registerSetNotificationsCallback={registerCallback}
-        removeToastNotification={removeToastNotification}
-      />
-    )
-    act(() => {
-      callback([
-        {
-          id: "abc123",
-          type: "informative",
-          title: "Title goes here",
-          message: <>Child content</>,
-          onHide: removeToastNotification,
-        },
-      ])
-    })
-
-    expect(await screen.findByText("Title goes here")).toBeInTheDocument()
-  })
-
-  it("calls removeToastNotification when a notification is hidden", async () => {
-    let callback: (notifications: ToastNotification[]) => void | undefined
-    const registerCallback = jest.fn(cb => (callback = cb))
-    const removeToastNotification = jest.fn()
-    const { getByRole } = render(
-      <ToastNotificationsListContainer
-        registerSetNotificationsCallback={registerCallback}
-        removeToastNotification={removeToastNotification}
-      />
-    )
-    act(() => {
-      callback([
-        {
-          id: "abc123",
-          type: "informative",
-          title: "Title goes here",
-          message: <>Child content</>,
-          onHide: removeToastNotification,
-        },
-      ])
-    })
-    const button = getByRole("button")
-    fireEvent.click(button)
-
-    waitFor(() => {
-      expect(removeToastNotification).toHaveBeenCalled()
-    })
-  })
-})

package/src/Notification/ToastNotification/subcomponents/ToastNotificationsListContainer/ToastNotificationsListContainer.tsx

@@ -1,31 +0,0 @@
-import React, { useEffect, useState } from "react"
-import { RemoveToastNotification, ToastNotification } from "../../types"
-import { ToastNotificationsList } from "../ToastNotificationsList"
-
-export type ToastNotificationsListContainerProps = {
-  removeToastNotification: RemoveToastNotification
-  registerSetNotificationsCallback: (
-    callback: React.Dispatch<React.SetStateAction<ToastNotification[]>>
-  ) => void
-}
-export const ToastNotificationsListContainer = ({
-  removeToastNotification,
-  registerSetNotificationsCallback,
-}: ToastNotificationsListContainerProps): JSX.Element => {
-  const [notifications, setNotifications] = useState<ToastNotification[]>([])
-
-  // Pass the local setNotifications function back up to the caller
-  // via the registerSetNotificationsCallback
-  useEffect(() => {
-    registerSetNotificationsCallback(setNotifications)
-  }, [setNotifications])
-
-  return (
-    <ToastNotificationsList
-      notifications={notifications}
-      onHide={removeToastNotification}
-    />
-  )
-}
-
-ToastNotificationsList.displayName = "ToastNotificationsListContainer"

package/src/Notification/ToastNotification/subcomponents/ToastNotificationsListContainer/index.ts

@@ -1 +0,0 @@
-export * from "./ToastNotificationsListContainer"