@kaizen/components 1.38.5 → 1.38.6

package/package.json

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

package/src/Menu/subcomponents/MenuItem/MenuItem.tsx

@@ -22,6 +22,7 @@ export type MenuItemProps = {
    */
   isActive?: boolean
   "data-testid"?: string
+  id?: string
 }
 
 export const MenuItem = ({
@@ -34,6 +35,7 @@ export const MenuItem = ({
   target,
   isActive,
   "data-testid": dataTestId,
+  id,
 }: MenuItemProps): JSX.Element => {
   const wrappedLabel = <span className={styles.menuItem__Label}>{label}</span>
   const iconNode = icon && <span className={styles.menuItem__Icon}>{icon}</span>
@@ -49,6 +51,7 @@ export const MenuItem = ({
     return (
       <li className={styles.menuListItem}>
         <button
+          id={id}
           type="button"
           disabled={true}
           className={className}
@@ -65,6 +68,7 @@ export const MenuItem = ({
     return (
       <li className={styles.menuListItem}>
         <a
+          id={id}
           href={href}
           className={className}
           target={target}
@@ -83,6 +87,7 @@ export const MenuItem = ({
   return (
     <li className={styles.menuListItem}>
       <button
+        id={id}
         type="button"
         onClick={onClick}
         className={className}

package/src/TitleBlockZen/TitleBlockZen.spec.tsx

@@ -615,6 +615,47 @@ describe("<TitleBlockZen />", () => {
     })
   })
 
+  describe("when autoHideMobileActionsMenu is true", () => {
+    const secondaryActionWithLink = {
+      label: "secondaryActionLabel",
+      href: "#secondaryActionHref",
+    }
+
+    it("hides the other actions menu when user clicks a menu item", async () => {
+      const { getAllByTestId } = render(
+        <TitleBlockZen
+          title="Test Title"
+          secondaryActions={[secondaryActionWithLink]}
+          autoHideMobileActionsMenu
+        >
+          Example
+        </TitleBlockZen>
+      )
+
+      const mobileActionsButton = screen.getByRole("button", {
+        name: "Other actions",
+      })
+
+      expect(mobileActionsButton.getAttribute("aria-expanded")).toEqual("false")
+      await user.click(mobileActionsButton)
+      await waitFor(() => {
+        expect(mobileActionsButton.getAttribute("aria-expanded")).toEqual(
+          "true"
+        )
+      })
+
+      const btn = getAllByTestId("title-block-mobile-actions-secondary-action")
+      expect(btn.length).toEqual(1)
+      await user.click(btn[0])
+
+      await waitFor(() => {
+        expect(mobileActionsButton.getAttribute("aria-expanded")).toEqual(
+          "false"
+        )
+      })
+    })
+  })
+
   describe("when a disabled secondary action is passed with only an href", () => {
     const secondaryActionWithLink = {
       label: "secondaryActionLabel",

package/src/TitleBlockZen/TitleBlockZen.tsx

@@ -260,6 +260,7 @@ export const TitleBlockZen = ({
   collapseNavigationAreaWhenPossible = false,
   textDirection,
   surveyStatus,
+  id,
   titleAutomationId = "TitleBlock__Title",
   avatarAutomationId = "TitleBlock__Avatar",
   subtitleAutomationId = "TitleBlock__Subtitle",
@@ -267,6 +268,7 @@ export const TitleBlockZen = ({
   sectionTitleDescriptionAutomationId = "TitleBlock__SectionTitleDescription",
   breadcrumbAutomationId = "TitleBlock__Breadcrumb",
   breadcrumbTextAutomationId = "TitleBlock__BreadcrumbText",
+  autoHideMobileActionsMenu = false,
 }: TitleBlockProps): JSX.Element => {
   const hasNavigationTabs = navigationTabs && navigationTabs.length > 0
   const collapseNavigationArea =
@@ -281,6 +283,7 @@ export const TitleBlockZen = ({
   return (
     <>
       <div
+        id={id}
         className={classnames(
           styles.titleBlock,
           styles[`${variant}Variant`],
@@ -432,6 +435,7 @@ export const TitleBlockZen = ({
               ? primaryAction.iconPosition
               : undefined
           }
+          autoHide={autoHideMobileActionsMenu}
         />
       </div>
     </>

package/src/TitleBlockZen/constants.ts

@@ -0,0 +1,3 @@
+export const TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID =
+  "title-block-secondary-menu"
+export const TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID = "title-block-other-actions"

package/src/TitleBlockZen/index.ts

@@ -1,3 +1,4 @@
 export * from "./TitleBlockZen"
 export * from "./subcomponents/NavigationTabs"
 export * from "./types"
+export * from "./constants"

package/src/TitleBlockZen/subcomponents/MainActions.tsx

@@ -2,6 +2,7 @@ import React from "react"
 import { Button, IconButton } from "~components/Button"
 import { ChevronDownIcon, MeatballsIcon } from "~components/Icon"
 import { Menu, MenuList } from "~components/Menu"
+import { TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID } from "../constants"
 import {
   DefaultActionProps,
   PrimaryActionProps,
@@ -159,6 +160,7 @@ export const MainActions = ({
             align="right"
             button={
               <IconButton
+                id={TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID}
                 label="Open secondary menu"
                 reversed={reversed}
                 icon={<MeatballsIcon role="presentation" />}

package/src/TitleBlockZen/subcomponents/MobileActions.spec.tsx

@@ -36,6 +36,13 @@ const SECONDARY_ACTIONS = [
   },
 ]
 
+const SECONDARY_OVERFLOW_ACTIONS = [
+  {
+    onClick: (): void => alert("test"),
+    label: "Secondary overflow action",
+  },
+]
+
 describe("<MobileActions />", () => {
   describe("Case 1: Primary Action is a menu", () => {
     it("makes aria-expanded toggles between true and false when user toggles the menu", async () => {
@@ -137,3 +144,83 @@ describe("<MobileActions />", () => {
     })
   })
 })
+
+describe("when autoHide is true", () => {
+  beforeEach(() => {
+    window.alert = jest.fn()
+    render(
+      <MobileActions
+        primaryAction={{
+          label: "Primary menu",
+        }}
+        defaultAction={{
+          label: "Default link",
+          href: "#",
+        }}
+        secondaryActions={SECONDARY_ACTIONS}
+        secondaryOverflowMenuItems={SECONDARY_OVERFLOW_ACTIONS}
+        autoHide
+      />
+    )
+  })
+  it("hides the menu when user clicks a default action item", async () => {
+    const mobileActionsButton = screen.getByRole("button", {
+      name: "Other actions",
+    })
+    expect(mobileActionsButton.getAttribute("aria-expanded")).toEqual("false")
+
+    await user.click(mobileActionsButton)
+    await waitFor(() => {
+      expect(mobileActionsButton.getAttribute("aria-expanded")).toEqual("true")
+    })
+    const btn = screen.getAllByTestId(/title-block-mobile-actions-default-/)
+    expect(btn.length).toEqual(1)
+    await user.click(btn[0])
+
+    await waitFor(() => {
+      expect(mobileActionsButton.getAttribute("aria-expanded")).toEqual("false")
+    })
+  })
+
+  it("hides the menu when user clicks a secondary action item", async () => {
+    const mobileActionsButton = screen.getByRole("button", {
+      name: "Other actions",
+    })
+    expect(mobileActionsButton.getAttribute("aria-expanded")).toEqual("false")
+
+    await user.click(mobileActionsButton)
+    await waitFor(() => {
+      expect(mobileActionsButton.getAttribute("aria-expanded")).toEqual("true")
+    })
+    const btn = screen.getAllByTestId(
+      "title-block-mobile-actions-secondary-action"
+    )
+    expect(btn.length).toEqual(3)
+    await user.click(btn[0])
+
+    await waitFor(() => {
+      expect(mobileActionsButton.getAttribute("aria-expanded")).toEqual("false")
+    })
+  })
+
+  it("hides the menu when user clicks a secondary overflow item", async () => {
+    const mobileActionsButton = screen.getByRole("button", {
+      name: "Other actions",
+    })
+    expect(mobileActionsButton.getAttribute("aria-expanded")).toEqual("false")
+
+    await user.click(mobileActionsButton)
+    await waitFor(() => {
+      expect(mobileActionsButton.getAttribute("aria-expanded")).toEqual("true")
+    })
+    const btn = screen.getAllByTestId(
+      "title-block-mobile-actions-overflow-menu-item"
+    )
+    expect(btn.length).toEqual(1)
+    await user.click(btn[0])
+
+    await waitFor(() => {
+      expect(mobileActionsButton.getAttribute("aria-expanded")).toEqual("false")
+    })
+  })
+})

package/src/TitleBlockZen/subcomponents/MobileActions.tsx

@@ -1,9 +1,10 @@
-import React, { useState } from "react"
+import React, { useCallback, useEffect, useState } from "react"
 import classnames from "classnames"
 import { FocusOn } from "react-focus-on"
 import { ButtonProps } from "~components/Button"
 import { ChevronDownIcon, ChevronUpIcon } from "~components/Icon"
 import { MenuItem, MenuList, MenuHeading } from "~components/Menu"
+import { TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID } from "../constants"
 import {
   DefaultActionProps,
   PrimaryActionProps,
@@ -88,6 +89,7 @@ const renderDefaultLink = (
       key="title-block-mobile-actions-default-link"
       data-automation-id="title-block-mobile-actions-default-link"
       data-testid="title-block-mobile-actions-default-link"
+      id={defaultAction.id}
     />
   )
 }
@@ -398,6 +400,7 @@ const DrawerHandle = ({
             className={styles.mobileActionsExpandButton}
             onClick={toggleDisplay}
             aria-expanded={isOpen}
+            id={TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID}
             aria-label="Other actions"
           >
             {isOpen ? (
@@ -429,6 +432,7 @@ const DrawerHandle = ({
           )}
           onClick={toggleDisplay}
           aria-expanded={isOpen}
+          id={TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID}
         >
           {renderDrawerHandleLabel("Other actions")}
           <span className={styles.mobileActionsChevronSquare}>
@@ -451,6 +455,7 @@ export type MobileActionsProps = {
   secondaryActions?: SecondaryActionsProps
   secondaryOverflowMenuItems?: TitleBlockMenuItemProps[]
   drawerHandleLabelIconPosition?: ButtonProps["iconPosition"]
+  autoHide?: boolean
 }
 
 export const MobileActions = ({
@@ -459,13 +464,44 @@ export const MobileActions = ({
   secondaryActions,
   secondaryOverflowMenuItems,
   drawerHandleLabelIconPosition,
+  autoHide = false,
 }: MobileActionsProps): JSX.Element => {
   const [isOpen, setIsOpen] = useState<boolean>(false)
-
+  const menuContent = React.createRef<HTMLDivElement>()
   const toggleDisplay = (): void => {
     setIsOpen(!isOpen)
   }
 
+  // This callback handler will not run when autoHide === "off"
+  const handleDocumentClickForAutoHide = useCallback(
+    (e: MouseEvent) => {
+      if (
+        isOpen &&
+        e.target instanceof Node &&
+        menuContent.current?.contains(e.target)
+      ) {
+        setIsOpen(false)
+      }
+    },
+    [menuContent]
+  )
+
+  useEffect(() => {
+    if (autoHide) {
+      document.addEventListener("click", handleDocumentClickForAutoHide, true)
+    }
+
+    return () => {
+      if (autoHide) {
+        document.removeEventListener(
+          "click",
+          handleDocumentClickForAutoHide,
+          true
+        )
+      }
+    }
+  }, [autoHide, handleDocumentClickForAutoHide])
+
   return (
     <div
       className={classnames(
@@ -487,7 +523,7 @@ export const MobileActions = ({
           secondaryActions ||
           secondaryOverflowMenuItems ||
           (primaryAction && isMenuGroupNotButton(primaryAction))) && (
-          <div className={styles.mobileActionsMenuContainer}>
+          <div ref={menuContent} className={styles.mobileActionsMenuContainer}>
             <DrawerMenuContent
               primaryAction={primaryAction}
               defaultAction={defaultAction}

package/src/TitleBlockZen/subcomponents/SecondaryActions.tsx

@@ -3,6 +3,7 @@ import { Button, IconButton } from "~components/Button"
 import { ChevronDownIcon, MeatballsIcon } from "~components/Icon"
 import { Menu, MenuList } from "~components/Menu"
 import styles from "../TitleBlockZen.module.scss"
+import { TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID } from "../constants"
 import { SecondaryActionsProps, TitleBlockMenuItemProps } from "../types"
 import { TitleBlockMenuItem } from "./TitleBlockMenuItem"
 import { Toolbar } from "./Toolbar"
@@ -26,6 +27,7 @@ const renderSecondaryOverflowMenu = (
           label="Open secondary menu"
           reversed={reversed}
           icon={<MeatballsIcon role="presentation" />}
+          id={TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID}
         />
       }
     >

package/src/TitleBlockZen/types.ts

@@ -34,6 +34,7 @@ export type TitleBlockProps = {
   collapseNavigationAreaWhenPossible?: boolean
   textDirection?: TextDirection
   surveyStatus?: SurveyStatus
+  id?: string
   titleAutomationId?: string
   breadcrumbAutomationId?: string
   breadcrumbTextAutomationId?: string
@@ -41,6 +42,7 @@ export type TitleBlockProps = {
   subtitleAutomationId?: string
   sectionTitleAutomationId?: string
   sectionTitleDescriptionAutomationId?: string
+  autoHideMobileActionsMenu?: boolean
 }
 
 /**