@bytebrand/fe-ui-core 4.2.12 → 4.2.13

package/package.json

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

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

@@ -8,6 +8,11 @@ export const IconSvgWrapper = styled(IconSVG)(props => ({
   height: '10px'
 }));
 
+export const TooltipWrapper = styled('div')(props => ({
+  // zIndex: props.zindex ? props.zindex : 9996,
+  display: 'inline-block'
+}))
+
 export const Theme = createTheme({
   components: {
     MuiTooltip: {

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

@@ -2,8 +2,10 @@ 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, Theme } from './MaterialTooltip.styled';
+import { IconSvgWrapper, Theme, TooltipWrapper } from './MaterialTooltip.styled';
 import { ThemeProvider } from '@mui/material/styles';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import { debounce } from 'lodash'
 
 interface IMaterialTooltip {
   text: string;
@@ -34,10 +36,9 @@ const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
 const MaterialTooltip = ({ text, placement, className, disabled, zindex }: IMaterialTooltip) => {
   const [isOpen, setIsOpen] = useState(false);
 
-  const onHandleMenuOpen = (event: React.SyntheticEvent) => {
-    event.preventDefault();
-    event.stopPropagation();
+  const onHandleMenuOpen = (event: any) => {
     event.persist();
+    event.preventDefault();
     setIsOpen(true);
   };
 
@@ -45,27 +46,38 @@ const MaterialTooltip = ({ text, placement, className, disabled, zindex }: IMate
     setIsOpen(false);
   }
 
-  const onHandleMenuToggle = () => {
-    setIsOpen(!isOpen);
-  }
+  const onHandleMenuToggle = debounce((event: any) => {
+    setIsOpen(() => !isOpen);
+  }, 50)
 
   return (
     <ThemeProvider theme={Theme}>
-      <LightTooltip
-        open={isOpen}
-        onMouseOver={onHandleMenuOpen}
-        onMouseLeave={onHandleMenuClose}
-        onClose={onHandleMenuClose}
-        placement={placement}
-        title={text}
-        leaveTouchDelay={2500}
-        className={className}
-        zindex={zindex}
-      >
-        <IconButton onTouchEnd={onHandleMenuToggle}>
-          <IconSvgWrapper name={'infoIcon'} customDimensions disabled={disabled} />
-        </IconButton>
-      </LightTooltip>
+      <ClickAwayListener touchEvent={'onTouchStart'} onClickAway={onHandleMenuClose}>
+        <TooltipWrapper>
+          <LightTooltip
+            open={isOpen}
+            onMouseOver={onHandleMenuOpen}
+            onMouseLeave={onHandleMenuClose}
+            onClose={onHandleMenuClose}
+            onTouchEnd={onHandleMenuToggle}
+            placement={placement}
+            title={text}
+            enterTouchDelay={0}
+            leaveTouchDelay={10000}
+            disableFocusListener
+            disableTouchListener
+            className={className}
+            zindex={zindex}
+            PopperProps={{
+              disablePortal: true,
+            }}
+          >
+            <IconButton>
+              <IconSvgWrapper name={'infoIcon'} customDimensions disabled={disabled} />
+            </IconButton>
+          </LightTooltip>
+        </TooltipWrapper>
+      </ClickAwayListener>
     </ThemeProvider>
   );
 };