@bytebrand/fe-ui-core 4.2.9 → 4.2.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.2.9",
+  "version": "4.2.11",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",

package/source/components/_common/UserMenu/MaterialMenu.styled.tsx

@@ -52,6 +52,9 @@ export const Theme = createTheme({
             '&:hover': {
               background: 'transparent !important'
             }
+          }),
+          ...(ownerState.isactive === 'true' && {
+            backgroundColor: 'rgba(0, 0, 0, 0.04)'
           })
         })
       }

package/source/components/_common/UserMenu/MaterialMenu.tsx

@@ -75,7 +75,7 @@ const MaterialMenu = ({ menuItems, headerComponent, onChange, isLang, containerC
           {menuItems.map((listItemProps: any, index: number) => {
             if (!!listItemProps && listItemProps.nestedItems && listItemProps.nestedItems.length > 0) {
               return (
-                <NestedMenu {...listItemProps} />
+                <NestedMenu key={index} {...listItemProps} />
               );
             }
             return !!listItemProps &&

package/source/components/_common/UserMenu/MaterialMenuItem.tsx

@@ -10,15 +10,16 @@ interface IListItem {
   label: any;
   amount?: number;
   divider?: boolean;
-  onClick?: () => void;
+  onClick?: (e: React.MouseEvent<HTMLSpanElement>) => void;
   href?: string;
   isComponent?: boolean;
   isSelect?: boolean;
   Link?: any;
   handleClose?: () => void;
+  isActive?: boolean;
 }
 
-const ListItem = ({ icon, label, amount, divider, onClick, href, isComponent, Link, handleClose }: IListItem) => {
+const ListItem = ({ icon, label, amount, divider, onClick, href, isComponent, Link, handleClose, isActive }: IListItem) => {
   return !!href ? (
     <Link color='#4C4E64DE' variant='caption' to={href} underline='none' onClick={onClick}>
       <MenuItem
@@ -33,12 +34,13 @@ const ListItem = ({ icon, label, amount, divider, onClick, href, isComponent, Li
     </Link>
   ) : (
     <MenuItem
-      onClick={() => {
-        onClick();
+      onClick={(e: React.MouseEvent<HTMLSpanElement>) => {
+        onClick(e);
         handleClose();
       }}
       divider={divider}
       disableRipple={isComponent ? true : false}
+      isactive={!!isActive ? isActive.toString() : 'false'}
     >
       {icon && <ListItemIcon><IconSVG customDimensions name={icon} /></ListItemIcon>}
       <ListItemText>

package/source/components/_common/UserMenu/NestedMenu.tsx

@@ -42,10 +42,11 @@ const NestedMenu = ({ nestedItems, label, icon, amount }: INestedMenuProps) => {
           transformOrigin={{ horizontal: 'right', vertical: 'center' }}
           anchorOrigin={{ horizontal: 'left', vertical: 'center' }}
         >
-          {nestedItems.map((nestedListItemProps: any, nestedIndex: number) => {
+          {nestedItems.map((nestedListItemProps: any, index: number) => {
             return (
               <ListItem
-                key={nestedIndex}
+                key={index}
+                handleClose={() => {}}
                 { ...nestedListItemProps }
               />
             );