@kaizen/components 1.38.2 → 1.38.3

package/package.json

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

package/src/TitleBlockZen/_docs/TitleBlockZen.stories.tsx

@@ -51,12 +51,10 @@ const meta = {
     secondaryActions: SECONDARY_ACTIONS,
     secondaryOverflowMenuItems: [
       {
-        action: (): void => alert("test"),
         label: "Overflow action 1",
         icon: <StarOnIcon role="presentation" />,
       },
       {
-        action: "#",
         label: "Overflow link 1",
         icon: <StarOnIcon role="presentation" />,
       },

package/src/TitleBlockZen/subcomponents/MainActions.tsx

@@ -2,12 +2,13 @@ import React from "react"
 import { Button, IconButton } from "~components/Button"
 import { ChevronDownIcon, MeatballsIcon } from "~components/Icon"
 import { Menu, MenuList } from "~components/Menu"
-import { DefaultActionProps, PrimaryActionProps } from "../types"
-import { isMenuGroupNotButton } from "../utils"
 import {
-  TitleBlockMenuItem,
+  DefaultActionProps,
+  PrimaryActionProps,
   TitleBlockMenuItemProps,
-} from "./TitleBlockMenuItem"
+} from "../types"
+import { isMenuGroupNotButton } from "../utils"
+import { TitleBlockMenuItem } from "./TitleBlockMenuItem"
 import { Toolbar } from "./Toolbar"
 import styles from "./MainActions.module.scss"
 
@@ -32,7 +33,7 @@ export const MainActions = ({
       <TitleBlockMenuItem
         {...item}
         key={`main-action-primary-menu-item-${idx}`}
-        automationId={`main-action-primary-menu-item-${idx}`}
+        data-automation-id={`main-action-primary-menu-item-${idx}`}
         data-testid={`main-action-primary-menu-item-${idx}`}
       />
     ))

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

@@ -8,11 +8,11 @@ const user = userEvent.setup()
 const MENU_LINKS = [
   {
     label: "Primary menu link 1",
-    action: "#",
+    href: "#",
   },
   {
     label: "Primary menu action 2",
-    action: (): void => alert("test"),
+    onClick: (): void => alert("test"),
   },
 ]
 

package/src/TitleBlockZen/subcomponents/MobileActions.tsx

@@ -10,15 +10,13 @@ import {
   SecondaryActionsProps,
   TitleBlockButtonProps,
   TitleBlockMenuGroup,
+  TitleBlockMenuItemProps,
 } from "../types"
 import {
   convertSecondaryActionsToMenuItems,
   isMenuGroupNotButton,
 } from "../utils"
-import {
-  TitleBlockMenuItem,
-  TitleBlockMenuItemProps,
-} from "./TitleBlockMenuItem"
+import { TitleBlockMenuItem } from "./TitleBlockMenuItem"
 
 import styles from "./MobileActions.module.scss"
 
@@ -57,7 +55,7 @@ const renderPrimaryActionDrawerContent = (
         <TitleBlockMenuItem
           {...item}
           key={`title-block-mobile-actions-primary-${itemType}-${idx}`}
-          automationId={`title-block-mobile-actions-primary-${itemType}-${idx}`}
+          data-automation-id={`title-block-mobile-actions-primary-${itemType}-${idx}`}
           data-testid={`title-block-mobile-actions-primary-${itemType}-${idx}`}
         />
       )
@@ -76,7 +74,7 @@ const renderDefaultLink = (
       <TitleBlockMenuItem
         {...defaultAction}
         key="title-block-mobile-actions-default-link"
-        automationId="title-block-mobile-actions-default-link"
+        data-automation-id="title-block-mobile-actions-default-link"
         data-testid="title-block-mobile-actions-default-link"
       />
     )
@@ -88,7 +86,7 @@ const renderDefaultLink = (
       icon={defaultAction.icon}
       disabled={defaultAction.disabled}
       key="title-block-mobile-actions-default-link"
-      automationId="title-block-mobile-actions-default-link"
+      data-automation-id="title-block-mobile-actions-default-link"
       data-testid="title-block-mobile-actions-default-link"
     />
   )
@@ -102,7 +100,7 @@ const renderDefaultAction = (
       <TitleBlockMenuItem
         {...defaultAction}
         key="title-block-mobile-actions-default-action"
-        automationId="title-block-mobile-actions-default-action"
+        data-automation-id="title-block-mobile-actions-default-action"
         data-testid="title-block-mobile-actions-default-action"
       />
     )

package/src/TitleBlockZen/subcomponents/TitleBlockMenuItem.tsx

@@ -1,15 +1,9 @@
 import React from "react"
 import classnames from "classnames"
-import { CustomButtonProps } from "~components/Button"
-import { MenuItem, MenuItemProps } from "~components/Menu"
+import { MenuItem } from "~components/Menu"
+import { TitleBlockMenuItemProps } from "../types"
 import styles from "./TitleBlockMenuItem.module.scss"
 
-export type TitleBlockMenuItemProps =
-  | ({
-      component: (props: CustomButtonProps) => JSX.Element
-    } & MenuItemProps)
-  | MenuItemProps
-
 export const TitleBlockMenuItem = (
   props: TitleBlockMenuItemProps
 ): JSX.Element => {

package/src/TitleBlockZen/types.ts

@@ -125,9 +125,7 @@ export type TitleBlockCustomButtonProps = TitleBlockDistributiveOmit<
 }
 
 export type TitleBlockMenuItemProps =
-  | (Omit<MenuItemProps, "action"> & {
-      action: ((e: any) => void) | string
-    })
+  | MenuItemProps
   | TitleBlockCustomButtonProps
 
 export type ButtonWithHrefNotOnClick = TitleBlockDistributiveOmit<

package/src/TitleBlockZen/utils.ts

@@ -1,4 +1,3 @@
-import { MenuItemProps } from "~components/Menu"
 import {
   TitleBlockButtonProps,
   TitleBlockCustomButtonProps,
@@ -8,10 +7,6 @@ import {
   TitleBlockMenuItemProps,
 } from "./types"
 
-export const isMenuItemNotButton = (
-  value: TitleBlockButtonProps | MenuItemProps
-): value is MenuItemProps => "action" in value
-
 export const isMenuGroupNotButton = (
   value:
     | (TitleBlockButtonProps | TitleBlockCustomButtonProps)