@bytebrand/fe-ui-core 4.2.10 → 4.2.12

package/package.json

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

package/source/components/_common/MaterialTooltip/MaterialTooltip.styled.tsx

@@ -1,8 +1,19 @@
 import { styled } from '@mui/system';
 import IconSVG from '../IconSVG/IconSVG';
+import { createTheme } from '@mui/material/styles';
 
 export const IconSvgWrapper = styled(IconSVG)(props => ({
   fill: props.disabled ? '#4C4E6442' : '#4C4E648A',
   width: '10px',
   height: '10px'
 }));
+
+export const Theme = createTheme({
+  components: {
+    MuiTooltip: {
+      styleOverrides: {
+        
+      }
+    }
+  }
+})

package/source/components/_common/MaterialTooltip/MaterialTooltip.tsx

@@ -2,8 +2,8 @@ import React, { useState } from 'react';
 import IconButton from '@mui/material/IconButton';
 import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
 import { styled } from '@mui/material/styles';
-import { IconSvgWrapper } from './MaterialTooltip.styled';
-import { ClickAwayListener } from '@mui/base';
+import { IconSvgWrapper, Theme } from './MaterialTooltip.styled';
+import { ThemeProvider } from '@mui/material/styles';
 
 interface IMaterialTooltip {
   text: string;
@@ -34,27 +34,39 @@ const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
 const MaterialTooltip = ({ text, placement, className, disabled, zindex }: IMaterialTooltip) => {
   const [isOpen, setIsOpen] = useState(false);
 
-  const onHandleClick = (event: React.SyntheticEvent) => {
+  const onHandleMenuOpen = (event: React.SyntheticEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
     event.persist();
-    setIsOpen(!isOpen);
+    setIsOpen(true);
   };
 
+  const onHandleMenuClose = () => {
+    setIsOpen(false);
+  }
+
+  const onHandleMenuToggle = () => {
+    setIsOpen(!isOpen);
+  }
+
   return (
-    <ClickAwayListener onClickAway={() => setIsOpen(false)}>
+    <ThemeProvider theme={Theme}>
       <LightTooltip
         open={isOpen}
-        onMouseOver={() => setIsOpen(true)}
-        onMouseLeave={() => setIsOpen(false)}
+        onMouseOver={onHandleMenuOpen}
+        onMouseLeave={onHandleMenuClose}
+        onClose={onHandleMenuClose}
         placement={placement}
         title={text}
+        leaveTouchDelay={2500}
         className={className}
         zindex={zindex}
       >
-        <IconButton onTouchEnd={e => onHandleClick(e)}>
+        <IconButton onTouchEnd={onHandleMenuToggle}>
           <IconSvgWrapper name={'infoIcon'} customDimensions disabled={disabled} />
         </IconButton>
       </LightTooltip>
-    </ClickAwayListener>
+    </ThemeProvider>
   );
 };
 

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

@@ -46,7 +46,6 @@ const NestedMenu = ({ nestedItems, label, icon, amount }: INestedMenuProps) => {
             return (
               <ListItem
                 key={index}
-                onClick={() => {}}
                 handleClose={() => {}}
                 { ...nestedListItemProps }
               />