From 409daa7c7ff75ee737c2eaebc91bf07f42b6d772 Mon Sep 17 00:00:00 2001
From: Vivek Jain <147403156+vivek-p44@users.noreply.github.com>
Date: Wed, 29 Nov 2023 08:32:40 +0530
Subject: [PATCH] fix: made changes to add isSelected prop to menuGroup (#514)

* fix(MI-19): made changes to add highlight on menu group when it is not expanded

* fix(MI-19): fixed linting

* fix(MI-19): added changesety
---
 .changeset/gold-spies-retire.md                             | 6 ++++++
 packages/react/src/components/MenuGroup/MenuGroup.tsx       | 2 ++
 packages/react/src/components/MenuGroup/MenuGroup.types.ts  | 4 ++++
 .../SideNavigationMenuGroup/SideNavigationMenuGroup.tsx     | 3 ++-
 4 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/gold-spies-retire.md

diff --git a/.changeset/gold-spies-retire.md b/.changeset/gold-spies-retire.md
new file mode 100644
index 00000000..c259fbcf
--- /dev/null
+++ b/.changeset/gold-spies-retire.md
@@ -0,0 +1,6 @@
+---
+'@project44-manifest/react': patch
+---
+
+added isSelected prop to menu group to highlight it when it is not expanded and one of it's child is
+selected
diff --git a/packages/react/src/components/MenuGroup/MenuGroup.tsx b/packages/react/src/components/MenuGroup/MenuGroup.tsx
index 60350a33..d4ef2d46 100644
--- a/packages/react/src/components/MenuGroup/MenuGroup.tsx
+++ b/packages/react/src/components/MenuGroup/MenuGroup.tsx
@@ -23,6 +23,7 @@ export const MenuGroup = React.forwardRef((props, forwardedRef) => {
     labelProps,
     onExpandedChange = noop,
     startIcon,
+    isSelected = false,
     ...other
   } = props;
 
@@ -43,6 +44,7 @@ export const MenuGroup = React.forwardRef((props, forwardedRef) => {
       <MenuItem
         {...itemProps}
         endIcon={<StyledIcon {...iconProps} isExpanded={isExpanded} />}
+        isSelected={isSelected && !isExpanded} // Need to highlight menu group only if it not expanded
         label={label}
         labelProps={labelProps}
         startIcon={startIcon}
diff --git a/packages/react/src/components/MenuGroup/MenuGroup.types.ts b/packages/react/src/components/MenuGroup/MenuGroup.types.ts
index 6a5a4e02..654db58e 100644
--- a/packages/react/src/components/MenuGroup/MenuGroup.types.ts
+++ b/packages/react/src/components/MenuGroup/MenuGroup.types.ts
@@ -42,4 +42,8 @@ export interface MenuGroupProps {
    * Icon added before the button text.
    */
   startIcon?: React.ReactElement;
+  /**
+   * Adds a highlight style when a submenu is selected and menu group is not in expanded mode.
+   */
+  isSelected?: boolean;
 }
diff --git a/packages/react/src/components/SideNavigationMenuGroup/SideNavigationMenuGroup.tsx b/packages/react/src/components/SideNavigationMenuGroup/SideNavigationMenuGroup.tsx
index 6ef036e1..59c0db3e 100644
--- a/packages/react/src/components/SideNavigationMenuGroup/SideNavigationMenuGroup.tsx
+++ b/packages/react/src/components/SideNavigationMenuGroup/SideNavigationMenuGroup.tsx
@@ -9,7 +9,7 @@ import type {
 } from './SideNavigationMenuGroup.types';
 
 export const SideNavigationMenuGroup = React.forwardRef((props, forwardedRef) => {
-  const { className: classNameProp, isExpanded: isExpandedProp, ...other } = props;
+  const { className: classNameProp, isExpanded: isExpandedProp, isSelected, ...other } = props;
 
   const { isOpen } = useNavigation();
 
@@ -22,6 +22,7 @@ export const SideNavigationMenuGroup = React.forwardRef((props, forwardedRef) =>
       className={className}
       isExpanded={!isOpen ? false : undefined}
       isOpen={isOpen}
+      isSelected={isSelected}
     />
   );
 }) as ForwardRefComponent<SideNavigationMenuGroupElement, SideNavigationMenuGroupProps>;