@bytebrand/fe-ui-core 4.2.11 → 4.2.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.2.11",
+  "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

@@ -1,8 +1,24 @@
 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 TooltipWrapper = styled('div')(props => ({
+  // zIndex: props.zindex ? props.zindex : 9996,
+  display: 'inline-block'
+}))
+
+export const Theme = createTheme({
+  components: {
+    MuiTooltip: {
+      styleOverrides: {
+        
+      }
+    }
+  }
+})

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 } from './MaterialTooltip.styled';
-import { ClickAwayListener } from '@mui/base';
+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,27 +36,49 @@ 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: any) => {
     event.persist();
-    setIsOpen(!isOpen);
+    event.preventDefault();
+    setIsOpen(true);
   };
 
+  const onHandleMenuClose = () => {
+    setIsOpen(false);
+  }
+
+  const onHandleMenuToggle = debounce((event: any) => {
+    setIsOpen(() => !isOpen);
+  }, 50)
+
   return (
-    <ClickAwayListener onClickAway={() => setIsOpen(false)}>
-      <LightTooltip
-        open={isOpen}
-        onMouseOver={() => setIsOpen(true)}
-        onMouseLeave={() => setIsOpen(false)}
-        placement={placement}
-        title={text}
-        className={className}
-        zindex={zindex}
-      >
-        <IconButton onTouchEnd={e => onHandleClick(e)}>
-          <IconSvgWrapper name={'infoIcon'} customDimensions disabled={disabled} />
-        </IconButton>
-      </LightTooltip>
-    </ClickAwayListener>
+    <ThemeProvider theme={Theme}>
+      <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>
   );
 };