@kaizen/components 0.0.0-canary-add-ids-to-TitleBlockZen-20240110044439 → 0.0.0-canary-auto-hide-mobile-menu-20240110220109

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-add-ids-to-TitleBlockZen-20240110044439",
+  "version": "0.0.0-canary-auto-hide-mobile-menu-20240110220109",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

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

@@ -268,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 =
@@ -434,6 +435,7 @@ export const TitleBlockZen = ({
               ? primaryAction.iconPosition
               : undefined
           }
+          autoHide={autoHideMobileActionsMenu}
         />
       </div>
     </>

package/src/TitleBlockZen/constants.ts

@@ -1,2 +1,3 @@
-export const TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID = "title-block-secondary-menu"
+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/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,4 +1,4 @@
-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"
@@ -455,6 +455,7 @@ export type MobileActionsProps = {
   secondaryActions?: SecondaryActionsProps
   secondaryOverflowMenuItems?: TitleBlockMenuItemProps[]
   drawerHandleLabelIconPosition?: ButtonProps["iconPosition"]
+  autoHide?: boolean
 }
 
 export const MobileActions = ({
@@ -463,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(
@@ -491,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/types.ts

@@ -42,6 +42,7 @@ export type TitleBlockProps = {
   subtitleAutomationId?: string
   sectionTitleAutomationId?: string
   sectionTitleDescriptionAutomationId?: string
+  autoHideMobileActionsMenu?: boolean
 }
 
 /**