@kaizen/components 1.35.1 → 1.36.0

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"
@@ -33,14 +32,35 @@ const SelectWrapper = ({
 
 describe("<Select />", () => {
   describe("Trigger", () => {
-    it("makes sure the menu to be labelled by trigger", () => {
+    it("has the label as the accessible name", () => {
+      const { getByRole } = render(<SelectWrapper />)
+      const menu = getByRole("combobox", {
+        name: "Mock Label",
+      })
+      expect(menu).toBeInTheDocument()
+    })
+
+    it("has the value when an item is selected", () => {
       const { getByRole } = render(<SelectWrapper selectedKey="batch-brew" />)
       const menu = getByRole("combobox", {
-        name: "Batch brew Mock Label",
+        name: "Mock Label",
       })
       expect(menu).toHaveTextContent("Batch brew")
     })
 
+    it("allows more aria-labelledby references to be sent in", () => {
+      const { getByRole } = render(
+        <>
+          <div id="extra-label">extra label stuff</div>
+          <SelectWrapper aria-labelledby="extra-label" />
+        </>
+      )
+      const menu = getByRole("combobox", {
+        name: "Mock Label extra label stuff",
+      })
+      expect(menu).toBeInTheDocument()
+    })
+
     describe("when uncontrolled", () => {
       it("does not show the menu initially", () => {
         const { queryByRole } = render(<SelectWrapper />)
@@ -76,7 +96,7 @@ describe("<Select />", () => {
           />
         )
         const trigger = getByRole("combobox", {
-          name: "Batch brew Mock Label",
+          name: "Mock Label",
         })
         await user.click(trigger)
         await waitFor(() => {
@@ -93,7 +113,7 @@ describe("<Select />", () => {
             <SelectWrapper selectedKey="batch-brew" />
           )
           const trigger = getByRole("combobox", {
-            name: "Batch brew Mock Label",
+            name: "Mock Label",
           })
           await user.click(trigger)
           await waitFor(() => {
@@ -108,7 +128,7 @@ describe("<Select />", () => {
             <SelectWrapper selectedKey="batch-brew" defaultOpen />
           )
           const trigger = getByRole("combobox", {
-            name: "Batch brew Mock Label",
+            name: "Mock Label",
           })
 
           await user.click(trigger)
@@ -147,7 +167,7 @@ describe("<Select />", () => {
             <SelectWrapper selectedKey="batch-brew" />
           )
           const trigger = getByRole("combobox", {
-            name: "Batch brew Mock Label",
+            name: "Mock Label",
           })
           await user.tab()
           await waitFor(() => {
@@ -160,7 +180,7 @@ describe("<Select />", () => {
             <SelectWrapper selectedKey="batch-brew" />
           )
           const trigger = getByRole("combobox", {
-            name: "Batch brew Mock Label",
+            name: "Mock Label",
           })
           await user.tab()
           await waitFor(() => {
@@ -305,9 +325,7 @@ describe("<Select />", () => {
         })
         await user.keyboard("{Enter}")
 
-        await user.click(
-          getByRole("combobox", { name: "Short black Mock Label" })
-        )
+        await user.click(getByRole("combobox", { name: "Mock Label" }))
         await waitFor(() => {
           expect(
             getByRole("option", { name: "Short black", selected: true })
@@ -320,7 +338,7 @@ describe("<Select />", () => {
         const { getByRole } = render(
           <SelectWrapper onSelectionChange={spy} defaultOpen />
         )
-        const trigger = getByRole("combobox", { name: "Select Mock Label" })
+        const trigger = getByRole("combobox", { name: "Mock Label" })
 
         await user.tab()
         await waitFor(() => {
@@ -332,9 +350,86 @@ describe("<Select />", () => {
         await user.keyboard("{Enter}")
         await waitFor(() => {
           expect(spy).toHaveBeenCalledTimes(1)
-          expect(trigger).toHaveAccessibleName("Short black Mock Label")
+          expect(trigger).toHaveAccessibleName("Mock Label")
         })
       })
     })
   })
+
+  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)
 
@@ -116,13 +121,26 @@ export const Select = <Option extends SelectOption = SelectOption>({
 
   const {
     labelProps,
-    triggerProps,
+    triggerProps: reactAriaTriggerProps,
     valueProps,
     menuProps,
     errorMessageProps,
     descriptionProps,
   } = useSelect(ariaSelectProps, state, triggerRef)
 
+  // Hack incoming:
+  // react-aria/useSelect wants to prefix the combobox's accessible name with the value of the select.
+  // We use role=combobox, meaning screen readers will read the value.
+  // So we're modifying the `aria-labelledby` property to remove the value element id.
+  // Issue: https://github.com/adobe/react-spectrum/issues/4091
+  const reactAriaLabelledBy = reactAriaTriggerProps["aria-labelledby"]
+  const triggerProps = {
+    ...reactAriaTriggerProps,
+    "aria-labelledby": reactAriaLabelledBy?.substring(
+      reactAriaLabelledBy.indexOf(" ") + 1
+    ),
+  }
+
   const { buttonProps } = useButton(triggerProps, triggerRef)
   const selectToggleProps = {
     ...buttonProps,
@@ -138,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(
@@ -160,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/dist/cjs/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/cjs/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/cjs/dts/Notification/ToastNotification/subcomponents/ToastNotificationManager/index.d.ts

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

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";