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

@@ -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

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}

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;
 }

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>;