@kaizen/components 1.35.2 → 1.37.0

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

@@ -1,12 +1,7 @@
-import React from "react"
+import React, { useEffect, useId } from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import { Button } from "~components/Button"
-import {
-  addToastNotification,
-  removeToastNotification,
-  clearToastNotifications,
-  ToastNotification,
-} from "../index"
+import { ToastNotification, useToastNotification } from "../index"
 
 const meta = {
   title: "Components/Notifications/ToastNotification",
@@ -28,7 +23,26 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
+const ToastNotificationTemplate: Story = {
+  render: args => {
+    const reactId = useId()
+    const { updateToastNotification } = useToastNotification()
+
+    useEffect(() => {
+      updateToastNotification({
+        ...args,
+        id: args.id ?? reactId,
+        message: args.children,
+        persistent: args.hideCloseIcon,
+      })
+    }, [args])
+
+    return <ToastNotification {...args} />
+  },
+}
+
 export const Playground: Story = {
+  ...ToastNotificationTemplate,
   parameters: {
     docs: {
       canvas: {
@@ -39,104 +53,120 @@ export const Playground: Story = {
 }
 
 export const CreateNotification: Story = {
-  render: () => (
-    <Button
-      label="Create notification"
-      onClick={() =>
-        addToastNotification({
-          title: "Informative",
-          type: "informative",
-          message: "New notification!",
-        })
-      }
-    />
-  ),
-}
+  render: () => {
+    const { addToastNotification } = useToastNotification()
 
-export const UpdateNotification: Story = {
-  render: () => (
-    <>
+    return (
       <Button
         label="Create notification"
-        classNameOverride="!mr-12"
-        onClick={() =>
-          addToastNotification({
-            id: "id--update-example",
-            title: "Cautionary",
-            type: "cautionary",
-            message: "This content will be updated",
-          })
-        }
-      />
-      <Button
-        label="Update notification"
         onClick={() =>
           addToastNotification({
-            id: "id--update-example",
-            title: "Success",
-            type: "positive",
-            message: "The content was successfully updated",
+            title: "Informative",
+            type: "informative",
+            message: "New notification!",
           })
         }
       />
-    </>
-  ),
+    )
+  },
+}
+
+export const UpdateNotification: Story = {
+  render: () => {
+    const { addToastNotification, updateToastNotification } =
+      useToastNotification()
+    return (
+      <>
+        <Button
+          label="Create notification"
+          classNameOverride="!mr-12"
+          onClick={() =>
+            addToastNotification({
+              id: "id--update-example",
+              title: "Cautionary",
+              type: "cautionary",
+              message: "This content will be updated",
+            })
+          }
+        />
+        <Button
+          label="Update notification"
+          onClick={() =>
+            updateToastNotification({
+              id: "id--update-example",
+              title: "Success",
+              type: "positive",
+              message: "The content was successfully updated",
+            })
+          }
+        />
+      </>
+    )
+  },
 }
 
 export const RemoveNotification: Story = {
-  render: () => (
-    <>
-      <Button
-        label="Create notification"
-        classNameOverride="!mr-12"
-        onClick={() =>
-          addToastNotification({
-            id: "id--remove-example",
-            title: "Remove",
-            type: "negative",
-            message: "This notification will be removed",
-          })
-        }
-      />
-      <Button
-        label="Remove notification"
-        onClick={() => removeToastNotification("id--remove-example")}
-      />
-    </>
-  ),
+  render: () => {
+    const { addToastNotification, removeToastNotification } =
+      useToastNotification()
+    return (
+      <>
+        <Button
+          label="Create notification"
+          classNameOverride="!mr-12"
+          onClick={() =>
+            addToastNotification({
+              id: "id--remove-example",
+              title: "Remove",
+              type: "negative",
+              message: "This notification will be removed",
+            })
+          }
+        />
+        <Button
+          label="Remove notification"
+          onClick={() => removeToastNotification("id--remove-example")}
+        />
+      </>
+    )
+  },
 }
 
 export const ClearNotifications: Story = {
-  render: () => (
-    <>
-      <Button
-        label="Create notifications"
-        classNameOverride="!mr-12"
-        onClick={() => {
-          addToastNotification({
-            id: "id--clear-example-1",
-            title: "First",
-            type: "positive",
-            message: "This notification will be removed",
-          })
-          addToastNotification({
-            id: "id--clear-example-2",
-            title: "Second",
-            type: "cautionary",
-            message: "This notification will also be removed",
-          })
-          addToastNotification({
-            id: "id--clear-example-3",
-            title: "Third",
-            type: "negative",
-            message: "This notification will also also be removed",
-          })
-        }}
-      />
-      <Button
-        label="Clear notifications"
-        onClick={() => clearToastNotifications()}
-      />
-    </>
-  ),
+  render: () => {
+    const { addToastNotification, clearToastNotifications } =
+      useToastNotification()
+    return (
+      <>
+        <Button
+          label="Create notifications"
+          classNameOverride="!mr-12"
+          onClick={() => {
+            addToastNotification({
+              id: "id--clear-example-1",
+              title: "First",
+              type: "positive",
+              message: "This notification will be removed",
+            })
+            addToastNotification({
+              id: "id--clear-example-2",
+              title: "Second",
+              type: "cautionary",
+              message: "This notification will also be removed",
+            })
+            addToastNotification({
+              id: "id--clear-example-3",
+              title: "Third",
+              type: "negative",
+              message: "This notification will also also be removed",
+            })
+          }}
+        />
+        <Button
+          label="Clear notifications"
+          onClick={() => clearToastNotifications()}
+        />
+      </>
+    )
+  },
 }

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

@@ -0,0 +1,96 @@
+import React, { useContext, useState } from "react"
+import { v4 as uuidv4 } from "uuid"
+import { ToastNotificationObj } from "../types"
+
+type ToastNotificationObjOptionalId = Omit<ToastNotificationObj, "id"> & {
+  id?: string
+}
+
+export type ToastNotificationContextValue = {
+  notifications: ToastNotificationObj[]
+  addToastNotification: (notification: ToastNotificationObjOptionalId) => void
+  updateToastNotification: (notification: ToastNotificationObj) => void
+  removeToastNotification: (notificationId: string) => void
+  clearToastNotifications: () => void
+}
+
+const ToastNotificationContext =
+  React.createContext<ToastNotificationContextValue | null>(null)
+
+export const useToastNotificationContext =
+  (): ToastNotificationContextValue => {
+    const context = useContext(ToastNotificationContext)
+
+    if (!context) {
+      throw new Error(
+        "useToastNotificationContext must be used within the ToastNotificationContext.Provider"
+      )
+    }
+
+    return context
+  }
+
+type ToastNotificationProviderProps = {
+  children: React.ReactNode
+}
+
+export const ToastNotificationProvider = ({
+  children,
+}: ToastNotificationProviderProps): JSX.Element | null => {
+  const [notifications, setNotifications] = useState<ToastNotificationObj[]>([])
+
+  const addToastNotification: ToastNotificationContextValue["addToastNotification"] =
+    notification => {
+      const uuid = uuidv4()
+      const notificationWithId = { id: uuid, ...notification }
+
+      const notificationExists = notifications.find(
+        ({ id }) => id === notification.id
+      )
+
+      if (!notificationExists) {
+        setNotifications(existing => [...existing, notificationWithId])
+      }
+    }
+
+  const updateToastNotification = (
+    notification: ToastNotificationObj
+  ): void => {
+    const notificationIndex = notifications.findIndex(
+      ({ id }) => id === notification.id
+    )
+
+    const copy = notifications.slice()
+    copy.splice(notificationIndex, 1, notification) // Mutation to insert notification over itself
+    setNotifications(copy)
+  }
+
+  const removeToastNotification = (notificationID: string): void => {
+    const notificationIndex = notifications.findIndex(
+      ({ id }) => id === notificationID
+    )
+    const copy = notifications.slice()
+    copy.splice(notificationIndex, 1) // Mutation
+    setNotifications(copy)
+  }
+
+  const clearToastNotifications = (): void => {
+    setNotifications([])
+  }
+
+  const value = {
+    notifications,
+    addToastNotification,
+    updateToastNotification,
+    removeToastNotification,
+    clearToastNotifications,
+  } satisfies ToastNotificationContextValue
+
+  return (
+    <ToastNotificationContext.Provider value={value}>
+      {children}
+    </ToastNotificationContext.Provider>
+  )
+}
+
+ToastNotificationProvider.displayName = "ToastNotificationProvider"

package/src/Notification/ToastNotification/hooks/useToastNotification.ts

@@ -0,0 +1,9 @@
+import {
+  ToastNotificationContextValue,
+  useToastNotificationContext,
+} from "../context/ToastNotificationContext"
+
+export const useToastNotification = (): ToastNotificationContextValue => {
+  const context = useToastNotificationContext()
+  return context
+}

package/src/Notification/ToastNotification/index.ts

@@ -1,3 +1,4 @@
 export * from "./ToastNotification"
-export * from "./subcomponents/ToastNotificationManager"
-export * from "./subcomponents/ToastNotificationsList"
+export * from "./ToastNotificationsList"
+export * from "./hooks/useToastNotification"
+export * from "./types"

package/src/Notification/ToastNotification/types.ts

@@ -1,9 +1,7 @@
 import { DataAttributes } from "~types/DataAttributes"
 import { NotificationType } from "../types"
 
-type Modify<T, R> = Omit<T, keyof R> & R
-
-export type ToastNotification = {
+export type ToastNotificationObj = {
   id: string
   type: NotificationType
   title: string
@@ -15,18 +13,3 @@ export type ToastNotification = {
    */
   persistent?: boolean
 } & DataAttributes
-
-export type ToastNotificationWithOptionals = Modify<
-  ToastNotification,
-  {
-    id?: string
-  }
->
-
-export type AddToastNotification = (
-  notification: ToastNotificationWithOptionals
-) => void
-
-export type RemoveToastNotification = (notificationId: string) => void
-
-export type ClearToastNotifications = () => void

package/src/Notification/index.ts

@@ -1,2 +1,3 @@
 export * from "./InlineNotification"
 export * from "./GlobalNotification"
+export * from "./ToastNotification"

package/src/RichTextEditor/RichTextEditor/RichTextEditor.tsx

@@ -74,6 +74,7 @@ export const RichTextEditor = ({
   defaultValue,
   labelText,
   "aria-labelledby": labelledBy,
+  "aria-describedby": describedBy,
   classNameOverride,
   controls,
   rows = 3,
@@ -144,7 +145,11 @@ export const RichTextEditor = ({
     : ""
   const descriptionAria = description ? `${editorId}-rte-description` : ""
 
-  const ariaDescribedBy = `${validationMessageAria} ${descriptionAria}`
+  const ariaDescribedBy = classnames(
+    validationMessageAria,
+    descriptionAria,
+    describedBy
+  )
 
   return (
     <>

package/src/RichTextEditor/utils/commands/addMark.spec.ts

@@ -1,4 +1,3 @@
-import { describe, expect, it, jest } from "@jest/globals"
 import { findByText, waitFor } from "@testing-library/dom"
 import { createRichTextEditor } from "../core"
 import { addMark } from "./addMark"

package/src/Tooltip/Tooltip.spec.tsx

@@ -48,6 +48,8 @@ describe("<Tooltip />", () => {
     // Non-semantic elements without roles should not have aria-description on them.
     // They won't read to all screen readers as expected and may be reported in Storybook's accessibility tab (which uses Axe under the hood)
     it("doesn't add an accessible description when wrapping a non-semantic element", async () => {
+      const warn = jest.spyOn(console, "warn").mockImplementation()
+
       render(
         <Tooltip
           text="Tooltip popup description for div"
@@ -62,6 +64,9 @@ describe("<Tooltip />", () => {
         expect(screen.getByText("Non semantic element")).not.toHaveAttribute(
           "aria-describedby"
         )
+        expect(warn).toHaveBeenCalledWith(
+          "<Tooltip /> is not directly wrapping a semantic element, screen reader users will not be able to access the tooltip info. To ensure accessibility, Tooltip should be wrapping a semantic and focusable element directly."
+        )
       })
     })
   })
@@ -74,7 +79,7 @@ describe("<Tooltip />", () => {
         isInitiallyVisible
         position="below"
       >
-        <div role="textbox" contentEditable="true" aria-multiline="true"></div>
+        <div role="textbox" contentEditable="true" aria-multiline="true" />
       </Tooltip>
     )
     await waitFor(() => {

package/src/__future__/Select/Select.spec.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { render, waitFor } from "@testing-library/react"
+import { render, waitFor, screen, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { Select, SelectProps } from "./Select"
 import { singleMockItems } from "./_docs/mockData"
@@ -17,7 +17,6 @@ const SelectWrapper = ({
   )
   return (
     <Select
-      id="id--select"
       label="Mock Label"
       items={items}
       description="This is a description"
@@ -356,4 +355,81 @@ describe("<Select />", () => {
       })
     })
   })
+
+  describe("Popover portal", () => {
+    it("has accessible trigger controls", async () => {
+      render(<SelectWrapper isOpen />)
+
+      const trigger = screen.getByRole("combobox", {
+        name: "Mock Label",
+      })
+
+      await waitFor(() => {
+        expect(trigger).toHaveAttribute("aria-controls")
+      })
+    })
+
+    it("will portal to the document body by default", async () => {
+      render(<SelectWrapper selectedKey="batch-brew" isOpen />)
+
+      const popover = screen.getByRole("dialog")
+      // expected div that FocusOn adds to the popover
+      const popoverFocusWrapper = popover.parentNode
+
+      await waitFor(() => {
+        const expectedBodyTag = popoverFocusWrapper?.parentNode
+        expect(expectedBodyTag?.nodeName).toEqual("BODY")
+      })
+    })
+
+    it("will render as a descendant of the element matching the id", async () => {
+      const SelectWithPortal = (): JSX.Element => {
+        const portalContainerId = "id--portal-container"
+        return (
+          <>
+            <div
+              id={portalContainerId}
+              data-testid="id--portal-container-test"
+            ></div>
+            <SelectWrapper
+              selectedKey="batch-brew"
+              isOpen
+              portalContainerId={portalContainerId}
+            />
+          </>
+        )
+      }
+      render(<SelectWithPortal />)
+
+      await waitFor(() => {
+        const newPortalRegion = screen.getByTestId("id--portal-container-test")
+        const popover = within(newPortalRegion).getByRole("dialog")
+
+        expect(popover).toBeInTheDocument()
+      })
+    })
+
+    it("will portal to the document body if the id does not match", async () => {
+      const SelectWithPortal = (): JSX.Element => {
+        const expectedContainerId = "id--portal-container"
+        return (
+          <>
+            <div id="id--wrong-id"></div>
+            <SelectWrapper
+              selectedKey="batch-brew"
+              isOpen
+              portalContainerId={expectedContainerId}
+            />
+          </>
+        )
+      }
+      render(<SelectWithPortal />)
+
+      await waitFor(() => {
+        const popover = within(document.body).getByRole("dialog")
+
+        expect(popover).toBeInTheDocument()
+      })
+    })
+  })
 })

package/src/__future__/Select/Select.tsx

@@ -1,4 +1,4 @@
-import React, { useId } from "react"
+import React, { useEffect, useId, useState } from "react"
 import { UseFloatingReturn } from "@floating-ui/react-dom"
 import { useButton } from "@react-aria/button"
 import { HiddenSelect, useSelect } from "@react-aria/select"
@@ -67,6 +67,10 @@ export type SelectProps<Option extends SelectOption = SelectOption> = {
    * @deprecated: Either define `disabled` in your `Option` (in `items`), or use `disabledKeys`
    */
   disabledValues?: Key[]
+  /**
+   * Creates a portal for the Popover to the matching element id
+   */
+  portalContainerId?: string
 } & OverrideClassName<Omit<AriaSelectProps<Option>, OmittedAriaSelectProps>>
 
 /**
@@ -89,13 +93,14 @@ export const Select = <Option extends SelectOption = SelectOption>({
   description,
   placeholder,
   isDisabled,
+  portalContainerId,
   ...restProps
 }: SelectProps<Option>): JSX.Element => {
   const { refs } = useFloating<HTMLButtonElement>()
   const triggerRef = refs.reference
-
   const id = propsId ?? useId()
   const descriptionId = `${id}--description`
+  const popoverId = `${id}--popover`
 
   const disabledKeys = getDisabledKeysFromItems(items)
 
@@ -151,6 +156,15 @@ export const Select = <Option extends SelectOption = SelectOption>({
     ref: refs.setReference,
   }
 
+  const [portalContainer, setPortalContainer] = useState<HTMLElement>()
+
+  useEffect(() => {
+    if (portalContainerId) {
+      const portalElement = document.getElementById(portalContainerId)
+      portalElement && setPortalContainer(portalElement)
+    }
+  }, [])
+
   return (
     <div
       className={classnames(
@@ -173,6 +187,8 @@ export const Select = <Option extends SelectOption = SelectOption>({
         )}
         {state.isOpen && (
           <Popover
+            id={popoverId}
+            portalContainer={portalContainer}
             refs={refs}
             focusOnProps={{
               onEscapeKey: state.close,

package/src/__future__/Select/_docs/Select.mdx

@@ -98,3 +98,11 @@ Add validation messages using `status` and `validationMessage`.
 
 Set `isFullWidth` to `true` to have the Select span the full width of its container.
 <Canvas of={SelectStories.FullWidth} />
+
+### Portals
+
+By default, the Select's popover will attach itself to the `body` of the document using React's `createPortal`.
+
+You can change the default behaviour by providing a `portalContainerId` to attach this to different element in the DOM. This can help to resolve issues that may arise with `z-index` or having a Select in a modal.
+
+<Canvas of={SelectStories.PortalContainer} />

package/src/__future__/Select/_docs/Select.stories.tsx

@@ -161,3 +161,32 @@ export const Validation: Story = {
 export const FullWidth: Story = {
   args: { isFullWidth: true },
 }
+
+export const PortalContainer: Story = {
+  render: args => {
+    const portalContainerId = "id--portal-container"
+    return (
+      <>
+        <div
+          id={portalContainerId}
+          className="flex gap-24 bg-gray-200 p-12 overflow-hidden h-[200px] relative"
+        >
+          <Select
+            {...args}
+            label="Default"
+            selectedKey="batch-brew"
+            id="id--select-default"
+          />
+          <Select
+            {...args}
+            label="Inner portal"
+            selectedKey="batch-brew"
+            id="id--select-inner"
+            portalContainerId={portalContainerId}
+          />
+        </div>
+      </>
+    )
+  },
+  parameters: { docs: { source: { type: "code" } } },
+}

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"