@kaizen/components 1.38.4 → 1.38.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.38.4",
+  "version": "1.38.6",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -44,26 +44,26 @@
   "dependencies": {
     "@floating-ui/react-dom": "^2.0.4",
     "@headlessui/react": "<=1.5.0",
-    "@internationalized/date": "^3.5.0",
+    "@internationalized/date": "^3.5.1",
     "@kaizen/hosted-assets": "^2.0.3",
     "@popperjs/core": "^2.11.8",
     "@reach/tabs": "^0.18.0",
-    "@react-aria/button": "^3.9.0",
-    "@react-aria/datepicker": "^3.9.0",
-    "@react-aria/focus": "^3.15.0",
-    "@react-aria/i18n": "^3.9.0",
-    "@react-aria/listbox": "^3.11.2",
-    "@react-aria/menu": "^3.11.2",
-    "@react-aria/overlays": "^3.19.0",
-    "@react-aria/select": "^3.14.0",
-    "@react-aria/utils": "^3.22.0",
-    "@react-stately/collections": "^3.10.3",
-    "@react-stately/datepicker": "^3.9.0",
-    "@react-stately/list": "^3.10.1",
-    "@react-stately/menu": "^3.5.7",
-    "@react-stately/select": "^3.6.0",
+    "@react-aria/button": "^3.9.1",
+    "@react-aria/datepicker": "^3.9.1",
+    "@react-aria/focus": "^3.16.0",
+    "@react-aria/i18n": "^3.10.0",
+    "@react-aria/listbox": "^3.11.3",
+    "@react-aria/menu": "^3.12.0",
+    "@react-aria/overlays": "^3.20.0",
+    "@react-aria/select": "^3.14.1",
+    "@react-aria/utils": "^3.23.0",
+    "@react-stately/collections": "^3.10.4",
+    "@react-stately/datepicker": "^3.9.1",
+    "@react-stately/list": "^3.10.2",
+    "@react-stately/menu": "^3.6.0",
+    "@react-stately/select": "^3.6.1",
     "@react-types/shared": "^3.22.0",
-    "classnames": "^2.3.2",
+    "classnames": "^2.5.1",
     "date-fns": "^2.30.0",
     "lodash.debounce": "^4.0.8",
     "nanobus": "^4.5.0",
@@ -96,10 +96,10 @@
   },
   "devDependencies": {
     "@babel/plugin-transform-react-pure-annotations": "^7.23.3",
-    "@cultureamp/frontend-apis": "^9.0.2",
-    "@cultureamp/i18n-react-intl": "^2.1.5",
+    "@cultureamp/frontend-apis": "^9.1.3",
+    "@cultureamp/i18n-react-intl": "^2.1.8",
     "@kaizen/design-tokens": "^10.3.17",
-    "@kaizen/tailwind": "^1.2.1",
+    "@kaizen/tailwind": "^1.2.2",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
@@ -108,7 +108,7 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.5",
     "@types/lodash.debounce": "^4.0.9",
-    "@types/react-dom": "^18.2.17",
+    "@types/react-dom": "^18.2.18",
     "@types/react-textfit": "^1.1.4",
     "@types/uuid": "^9.0.7",
     "agadoo": "^3.0.0",
@@ -117,12 +117,12 @@
     "concat-cli": "^4.0.0",
     "query-string": "^8.1.0",
     "react-intl": "^6.5.5",
-    "rollup": "^4.6.0",
+    "rollup": "^4.9.2",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-ignore": "^1.0.10",
     "rollup-plugin-node-externals": "^6.1.2",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.69.5",
+    "sass": "^1.69.6",
     "serialize-query-params": "^2.0.2",
     "svgo": "^3.1.0",
     "ts-jest": "^29.1.1",
@@ -130,7 +130,7 @@
     "typescript-transform-paths": "^3.4.6"
   },
   "peerDependencies": {
-    "@cultureamp/i18n-react-intl": "^2.1.5",
+    "@cultureamp/i18n-react-intl": "^2.1.8",
     "react": "^18.2.0",
     "react-intl": "^6.5.5"
   }

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/TimeField/TimeField.module.scss

@@ -18,7 +18,8 @@ $input-height: 48px;
   color: $color-purple-800;
 }
 
-.heading {
+.label {
+  display: block;
   margin-bottom: $spacing-6;
 }
 

package/src/TimeField/TimeField.tsx

@@ -8,7 +8,7 @@ import {
 } from "@react-stately/datepicker"
 import classnames from "classnames"
 import { FieldMessage } from "~components/FieldMessage"
-import { Heading } from "~components/Heading"
+import { Label } from "~components/Label"
 import { OverrideClassName } from "~types/OverrideClassName"
 import { TimeSegment } from "./subcomponents/TimeSegment"
 import { StatusType, TimeValue, ValueType } from "./types"
@@ -79,7 +79,9 @@ const TimeFieldComponent = ({
     locale,
     validationState: status === "default" ? "valid" : "invalid",
   })
-  const descriptionId = `${id}-field-message`
+
+  const hasError = !!validationMessage && status === "error"
+  const descriptionId = hasError ? `${id}-field-message` : undefined
 
   const inputRef = React.useRef(null)
   const { fieldProps, labelProps } = useTimeField(
@@ -94,17 +96,13 @@ const TimeFieldComponent = ({
   )
   return (
     <div className={classNameOverride}>
-      <Heading
-        tag="div"
-        variant="heading-6"
+      <Label
+        disabled={state.isDisabled}
         {...labelProps}
-        classNameOverride={classnames(
-          styles.heading,
-          state.isDisabled && styles.isDisabled
-        )}
+        classNameOverride={styles.label}
       >
         {label}
-      </Heading>
+      </Label>
       <div className={styles.wrapper}>
         {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}
         <div
@@ -123,7 +121,7 @@ const TimeFieldComponent = ({
           <div className={styles.focusRing} />
         </div>
       </div>
-      {validationMessage && status === "error" && (
+      {hasError && (
         <FieldMessage
           id={descriptionId}
           message={validationMessage}

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
 }
 
 /**