refactor(MenuItemSubMenuIcon): allow to use props relative to isSplit…

… is true or false

packages/core/src/components/Menu/MenuItem/components/MenuItemSubMenuIcon/MenuItemSubMenuIcon.tsx

@@ -8,36 +8,34 @@ import { DropdownChevronRight } from "../../../../Icon/Icons";
 import styles from "./MenuItemSubMenuIcon.module.scss";
 import { MenuItemSubMenuIconProps } from "./MenuItemSubMenuIcon.types";
 
-const MenuItemSubMenuIcon = forwardRef(
-  ({ isSplit, label, active, disabled }: MenuItemSubMenuIconProps, ref: React.ForwardedRef<HTMLDivElement>) => (
-    <Flex justify={Flex.justify.CENTER} className={styles.subMenuIconWrapper}>
-      {isSplit ? (
-        <>
-          <Divider direction={Divider.directions.VERTICAL} className={styles.divider} />
-          <IconButton
-            icon={DropdownChevronRight}
-            className={styles.splitMenuItemIconButton}
-            kind={IconButton.kinds.TERTIARY}
-            size={null} // Customizing size via className
-            iconClassName={cx(styles.splitSubMenuIcon, { [styles.disabled]: disabled })}
-            tabIndex={-1}
-            ref={ref}
-            active={active}
-            disabled={disabled}
-          />
-        </>
-      ) : (
-        <Icon
-          clickable={false}
+const MenuItemSubMenuIcon = forwardRef((props: MenuItemSubMenuIconProps, ref: React.ForwardedRef<HTMLDivElement>) => (
+  <Flex justify={Flex.justify.CENTER} className={styles.subMenuIconWrapper}>
+    {props.isSplit === true ? (
+      <>
+        <Divider direction={Divider.directions.VERTICAL} className={styles.divider} />
+        <IconButton
           icon={DropdownChevronRight}
-          iconLabel={label}
-          className={styles.subMenuIcon}
-          ignoreFocusStyle
-          iconSize={18}
+          className={styles.splitMenuItemIconButton}
+          kind={IconButton.kinds.TERTIARY}
+          size={null} // Customizing size via className
+          iconClassName={cx(styles.splitSubMenuIcon, { [styles.disabled]: props.disabled })}
+          tabIndex={-1}
+          ref={ref}
+          active={props.active}
+          disabled={props.disabled}
         />
-      )}
-    </Flex>
-  )
-);
+      </>
+    ) : (
+      <Icon
+        clickable={false}
+        icon={DropdownChevronRight}
+        iconLabel={props.label}
+        className={styles.subMenuIcon}
+        ignoreFocusStyle
+        iconSize={18}
+      />
+    )}
+  </Flex>
+));
 
 export default MenuItemSubMenuIcon;

packages/core/src/components/Menu/MenuItem/components/MenuItemSubMenuIcon/MenuItemSubMenuIcon.types.ts

@@ -1,6 +1,25 @@
-export interface MenuItemSubMenuIconProps {
-  isSplit?: boolean;
-  label?: string;
+export interface SplitMenuItemSubMenuIconProps {
+  /**
+   * Determines whether the submenu icon is split from the main menu item.
+   * When true, clicking the main menu item and the submenu icon trigger different actions.
+   */
+  isSplit?: true;
+  /**
+   * Indicates if the split submenu is currently active.
+   */
   active?: boolean;
+  /**
+   * Whether the split submenu icon is disabled.
+   */
   disabled?: boolean;
 }
+
+export interface SimpleMenuItemSubMenuIconProps {
+  isSplit?: false;
+  /**
+   * Label for the submenu icon, used for accessibility.
+   */
+  label?: string;
+}
+
+export type MenuItemSubMenuIconProps = SimpleMenuItemSubMenuIconProps | SplitMenuItemSubMenuIconProps;