772 lines
27 KiB
JavaScript
772 lines
27 KiB
JavaScript
|
'use client';
|
||
|
|
|
||
|
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||
|
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
||
|
|
const _excluded = ["arrow", "children", "classes", "components", "componentsProps", "describeChild", "disableFocusListener", "disableHoverListener", "disableInteractive", "disableTouchListener", "enterDelay", "enterNextDelay", "enterTouchDelay", "followCursor", "id", "leaveDelay", "leaveTouchDelay", "onClose", "onOpen", "open", "placement", "PopperComponent", "PopperProps", "slotProps", "slots", "title", "TransitionComponent", "TransitionProps"];
|
||
|
|
import * as React from 'react';
|
||
|
|
import PropTypes from 'prop-types';
|
||
|
|
import clsx from 'clsx';
|
||
|
|
import useTimeout, { Timeout } from '@mui/utils/useTimeout';
|
||
|
|
import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
|
||
|
|
import { appendOwnerState } from '@mui/base/utils';
|
||
|
|
import composeClasses from '@mui/utils/composeClasses';
|
||
|
|
import { alpha } from '@mui/system/colorManipulator';
|
||
|
|
import { useRtl } from '@mui/system/RtlProvider';
|
||
|
|
import styled from '../styles/styled';
|
||
|
|
import useTheme from '../styles/useTheme';
|
||
|
|
import useThemeProps from '../styles/useThemeProps';
|
||
|
|
import capitalize from '../utils/capitalize';
|
||
|
|
import Grow from '../Grow';
|
||
|
|
import Popper from '../Popper';
|
||
|
|
import useEventCallback from '../utils/useEventCallback';
|
||
|
|
import useForkRef from '../utils/useForkRef';
|
||
|
|
import useId from '../utils/useId';
|
||
|
|
import useIsFocusVisible from '../utils/useIsFocusVisible';
|
||
|
|
import useControlled from '../utils/useControlled';
|
||
|
|
import tooltipClasses, { getTooltipUtilityClass } from './tooltipClasses';
|
||
|
|
import { jsx as _jsx } from "react/jsx-runtime";
|
||
|
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
||
|
|
function round(value) {
|
||
|
|
return Math.round(value * 1e5) / 1e5;
|
||
|
|
}
|
||
|
|
const useUtilityClasses = ownerState => {
|
||
|
|
const {
|
||
|
|
classes,
|
||
|
|
disableInteractive,
|
||
|
|
arrow,
|
||
|
|
touch,
|
||
|
|
placement
|
||
|
|
} = ownerState;
|
||
|
|
const slots = {
|
||
|
|
popper: ['popper', !disableInteractive && 'popperInteractive', arrow && 'popperArrow'],
|
||
|
|
tooltip: ['tooltip', arrow && 'tooltipArrow', touch && 'touch', `tooltipPlacement${capitalize(placement.split('-')[0])}`],
|
||
|
|
arrow: ['arrow']
|
||
|
|
};
|
||
|
|
return composeClasses(slots, getTooltipUtilityClass, classes);
|
||
|
|
};
|
||
|
|
const TooltipPopper = styled(Popper, {
|
||
|
|
name: 'MuiTooltip',
|
||
|
|
slot: 'Popper',
|
||
|
|
overridesResolver: (props, styles) => {
|
||
|
|
const {
|
||
|
|
ownerState
|
||
|
|
} = props;
|
||
|
|
return [styles.popper, !ownerState.disableInteractive && styles.popperInteractive, ownerState.arrow && styles.popperArrow, !ownerState.open && styles.popperClose];
|
||
|
|
}
|
||
|
|
})(({
|
||
|
|
theme,
|
||
|
|
ownerState,
|
||
|
|
open
|
||
|
|
}) => _extends({
|
||
|
|
zIndex: (theme.vars || theme).zIndex.tooltip,
|
||
|
|
pointerEvents: 'none'
|
||
|
|
}, !ownerState.disableInteractive && {
|
||
|
|
pointerEvents: 'auto'
|
||
|
|
}, !open && {
|
||
|
|
pointerEvents: 'none'
|
||
|
|
}, ownerState.arrow && {
|
||
|
|
[`&[data-popper-placement*="bottom"] .${tooltipClasses.arrow}`]: {
|
||
|
|
top: 0,
|
||
|
|
marginTop: '-0.71em',
|
||
|
|
'&::before': {
|
||
|
|
transformOrigin: '0 100%'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
[`&[data-popper-placement*="top"] .${tooltipClasses.arrow}`]: {
|
||
|
|
bottom: 0,
|
||
|
|
marginBottom: '-0.71em',
|
||
|
|
'&::before': {
|
||
|
|
transformOrigin: '100% 0'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
[`&[data-popper-placement*="right"] .${tooltipClasses.arrow}`]: _extends({}, !ownerState.isRtl ? {
|
||
|
|
left: 0,
|
||
|
|
marginLeft: '-0.71em'
|
||
|
|
} : {
|
||
|
|
right: 0,
|
||
|
|
marginRight: '-0.71em'
|
||
|
|
}, {
|
||
|
|
height: '1em',
|
||
|
|
width: '0.71em',
|
||
|
|
'&::before': {
|
||
|
|
transformOrigin: '100% 100%'
|
||
|
|
}
|
||
|
|
}),
|
||
|
|
[`&[data-popper-placement*="left"] .${tooltipClasses.arrow}`]: _extends({}, !ownerState.isRtl ? {
|
||
|
|
right: 0,
|
||
|
|
marginRight: '-0.71em'
|
||
|
|
} : {
|
||
|
|
left: 0,
|
||
|
|
marginLeft: '-0.71em'
|
||
|
|
}, {
|
||
|
|
height: '1em',
|
||
|
|
width: '0.71em',
|
||
|
|
'&::before': {
|
||
|
|
transformOrigin: '0 0'
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}));
|
||
|
|
const TooltipTooltip = styled('div', {
|
||
|
|
name: 'MuiTooltip',
|
||
|
|
slot: 'Tooltip',
|
||
|
|
overridesResolver: (props, styles) => {
|
||
|
|
const {
|
||
|
|
ownerState
|
||
|
|
} = props;
|
||
|
|
return [styles.tooltip, ownerState.touch && styles.touch, ownerState.arrow && styles.tooltipArrow, styles[`tooltipPlacement${capitalize(ownerState.placement.split('-')[0])}`]];
|
||
|
|
}
|
||
|
|
})(({
|
||
|
|
theme,
|
||
|
|
ownerState
|
||
|
|
}) => _extends({
|
||
|
|
backgroundColor: theme.vars ? theme.vars.palette.Tooltip.bg : alpha(theme.palette.grey[700], 0.92),
|
||
|
|
borderRadius: (theme.vars || theme).shape.borderRadius,
|
||
|
|
color: (theme.vars || theme).palette.common.white,
|
||
|
|
fontFamily: theme.typography.fontFamily,
|
||
|
|
padding: '4px 8px',
|
||
|
|
fontSize: theme.typography.pxToRem(11),
|
||
|
|
maxWidth: 300,
|
||
|
|
margin: 2,
|
||
|
|
wordWrap: 'break-word',
|
||
|
|
fontWeight: theme.typography.fontWeightMedium
|
||
|
|
}, ownerState.arrow && {
|
||
|
|
position: 'relative',
|
||
|
|
margin: 0
|
||
|
|
}, ownerState.touch && {
|
||
|
|
padding: '8px 16px',
|
||
|
|
fontSize: theme.typography.pxToRem(14),
|
||
|
|
lineHeight: `${round(16 / 14)}em`,
|
||
|
|
fontWeight: theme.typography.fontWeightRegular
|
||
|
|
}, {
|
||
|
|
[`.${tooltipClasses.popper}[data-popper-placement*="left"] &`]: _extends({
|
||
|
|
transformOrigin: 'right center'
|
||
|
|
}, !ownerState.isRtl ? _extends({
|
||
|
|
marginRight: '14px'
|
||
|
|
}, ownerState.touch && {
|
||
|
|
marginRight: '24px'
|
||
|
|
}) : _extends({
|
||
|
|
marginLeft: '14px'
|
||
|
|
}, ownerState.touch && {
|
||
|
|
marginLeft: '24px'
|
||
|
|
})),
|
||
|
|
[`.${tooltipClasses.popper}[data-popper-placement*="right"] &`]: _extends({
|
||
|
|
transformOrigin: 'left center'
|
||
|
|
}, !ownerState.isRtl ? _extends({
|
||
|
|
marginLeft: '14px'
|
||
|
|
}, ownerState.touch && {
|
||
|
|
marginLeft: '24px'
|
||
|
|
}) : _extends({
|
||
|
|
marginRight: '14px'
|
||
|
|
}, ownerState.touch && {
|
||
|
|
marginRight: '24px'
|
||
|
|
})),
|
||
|
|
[`.${tooltipClasses.popper}[data-popper-placement*="top"] &`]: _extends({
|
||
|
|
transformOrigin: 'center bottom',
|
||
|
|
marginBottom: '14px'
|
||
|
|
}, ownerState.touch && {
|
||
|
|
marginBottom: '24px'
|
||
|
|
}),
|
||
|
|
[`.${tooltipClasses.popper}[data-popper-placement*="bottom"] &`]: _extends({
|
||
|
|
transformOrigin: 'center top',
|
||
|
|
marginTop: '14px'
|
||
|
|
}, ownerState.touch && {
|
||
|
|
marginTop: '24px'
|
||
|
|
})
|
||
|
|
}));
|
||
|
|
const TooltipArrow = styled('span', {
|
||
|
|
name: 'MuiTooltip',
|
||
|
|
slot: 'Arrow',
|
||
|
|
overridesResolver: (props, styles) => styles.arrow
|
||
|
|
})(({
|
||
|
|
theme
|
||
|
|
}) => ({
|
||
|
|
overflow: 'hidden',
|
||
|
|
position: 'absolute',
|
||
|
|
width: '1em',
|
||
|
|
height: '0.71em' /* = width / sqrt(2) = (length of the hypotenuse) */,
|
||
|
|
boxSizing: 'border-box',
|
||
|
|
color: theme.vars ? theme.vars.palette.Tooltip.bg : alpha(theme.palette.grey[700], 0.9),
|
||
|
|
'&::before': {
|
||
|
|
content: '""',
|
||
|
|
margin: 'auto',
|
||
|
|
display: 'block',
|
||
|
|
width: '100%',
|
||
|
|
height: '100%',
|
||
|
|
backgroundColor: 'currentColor',
|
||
|
|
transform: 'rotate(45deg)'
|
||
|
|
}
|
||
|
|
}));
|
||
|
|
let hystersisOpen = false;
|
||
|
|
const hystersisTimer = new Timeout();
|
||
|
|
let cursorPosition = {
|
||
|
|
x: 0,
|
||
|
|
y: 0
|
||
|
|
};
|
||
|
|
export function testReset() {
|
||
|
|
hystersisOpen = false;
|
||
|
|
hystersisTimer.clear();
|
||
|
|
}
|
||
|
|
function composeEventHandler(handler, eventHandler) {
|
||
|
|
return (event, ...params) => {
|
||
|
|
if (eventHandler) {
|
||
|
|
eventHandler(event, ...params);
|
||
|
|
}
|
||
|
|
handler(event, ...params);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
// TODO v6: Remove PopperComponent, PopperProps, TransitionComponent and TransitionProps.
|
||
|
|
const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
|
||
|
|
var _ref, _slots$popper, _ref2, _ref3, _slots$transition, _ref4, _slots$tooltip, _ref5, _slots$arrow, _slotProps$popper, _ref6, _slotProps$popper2, _slotProps$transition, _slotProps$tooltip, _ref7, _slotProps$tooltip2, _slotProps$arrow, _ref8, _slotProps$arrow2;
|
||
|
|
const props = useThemeProps({
|
||
|
|
props: inProps,
|
||
|
|
name: 'MuiTooltip'
|
||
|
|
});
|
||
|
|
const {
|
||
|
|
arrow = false,
|
||
|
|
children: childrenProp,
|
||
|
|
components = {},
|
||
|
|
componentsProps = {},
|
||
|
|
describeChild = false,
|
||
|
|
disableFocusListener = false,
|
||
|
|
disableHoverListener = false,
|
||
|
|
disableInteractive: disableInteractiveProp = false,
|
||
|
|
disableTouchListener = false,
|
||
|
|
enterDelay = 100,
|
||
|
|
enterNextDelay = 0,
|
||
|
|
enterTouchDelay = 700,
|
||
|
|
followCursor = false,
|
||
|
|
id: idProp,
|
||
|
|
leaveDelay = 0,
|
||
|
|
leaveTouchDelay = 1500,
|
||
|
|
onClose,
|
||
|
|
onOpen,
|
||
|
|
open: openProp,
|
||
|
|
placement = 'bottom',
|
||
|
|
PopperComponent: PopperComponentProp,
|
||
|
|
PopperProps = {},
|
||
|
|
slotProps = {},
|
||
|
|
slots = {},
|
||
|
|
title,
|
||
|
|
TransitionComponent: TransitionComponentProp = Grow,
|
||
|
|
TransitionProps
|
||
|
|
} = props,
|
||
|
|
other = _objectWithoutPropertiesLoose(props, _excluded);
|
||
|
|
|
||
|
|
// to prevent runtime errors, developers will need to provide a child as a React element anyway.
|
||
|
|
const children = /*#__PURE__*/React.isValidElement(childrenProp) ? childrenProp : /*#__PURE__*/_jsx("span", {
|
||
|
|
children: childrenProp
|
||
|
|
});
|
||
|
|
const theme = useTheme();
|
||
|
|
const isRtl = useRtl();
|
||
|
|
const [childNode, setChildNode] = React.useState();
|
||
|
|
const [arrowRef, setArrowRef] = React.useState(null);
|
||
|
|
const ignoreNonTouchEvents = React.useRef(false);
|
||
|
|
const disableInteractive = disableInteractiveProp || followCursor;
|
||
|
|
const closeTimer = useTimeout();
|
||
|
|
const enterTimer = useTimeout();
|
||
|
|
const leaveTimer = useTimeout();
|
||
|
|
const touchTimer = useTimeout();
|
||
|
|
const [openState, setOpenState] = useControlled({
|
||
|
|
controlled: openProp,
|
||
|
|
default: false,
|
||
|
|
name: 'Tooltip',
|
||
|
|
state: 'open'
|
||
|
|
});
|
||
|
|
let open = openState;
|
||
|
|
if (process.env.NODE_ENV !== 'production') {
|
||
|
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||
|
|
const {
|
||
|
|
current: isControlled
|
||
|
|
} = React.useRef(openProp !== undefined);
|
||
|
|
|
||
|
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||
|
|
React.useEffect(() => {
|
||
|
|
if (childNode && childNode.disabled && !isControlled && title !== '' && childNode.tagName.toLowerCase() === 'button') {
|
||
|
|
console.error(['MUI: You are providing a disabled `button` child to the Tooltip component.', 'A disabled element does not fire events.', "Tooltip needs to listen to the child element's events to display the title.", '', 'Add a simple wrapper element, such as a `span`.'].join('\n'));
|
||
|
|
}
|
||
|
|
}, [title, childNode, isControlled]);
|
||
|
|
}
|
||
|
|
const id = useId(idProp);
|
||
|
|
const prevUserSelect = React.useRef();
|
||
|
|
const stopTouchInteraction = useEventCallback(() => {
|
||
|
|
if (prevUserSelect.current !== undefined) {
|
||
|
|
document.body.style.WebkitUserSelect = prevUserSelect.current;
|
||
|
|
prevUserSelect.current = undefined;
|
||
|
|
}
|
||
|
|
touchTimer.clear();
|
||
|
|
});
|
||
|
|
React.useEffect(() => stopTouchInteraction, [stopTouchInteraction]);
|
||
|
|
const handleOpen = event => {
|
||
|
|
hystersisTimer.clear();
|
||
|
|
hystersisOpen = true;
|
||
|
|
|
||
|
|
// The mouseover event will trigger for every nested element in the tooltip.
|
||
|
|
// We can skip rerendering when the tooltip is already open.
|
||
|
|
// We are using the mouseover event instead of the mouseenter event to fix a hide/show issue.
|
||
|
|
setOpenState(true);
|
||
|
|
if (onOpen && !open) {
|
||
|
|
onOpen(event);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const handleClose = useEventCallback(
|
||
|
|
/**
|
||
|
|
* @param {React.SyntheticEvent | Event} event
|
||
|
|
*/
|
||
|
|
event => {
|
||
|
|
hystersisTimer.start(800 + leaveDelay, () => {
|
||
|
|
hystersisOpen = false;
|
||
|
|
});
|
||
|
|
setOpenState(false);
|
||
|
|
if (onClose && open) {
|
||
|
|
onClose(event);
|
||
|
|
}
|
||
|
|
closeTimer.start(theme.transitions.duration.shortest, () => {
|
||
|
|
ignoreNonTouchEvents.current = false;
|
||
|
|
});
|
||
|
|
});
|
||
|
|
const handleMouseOver = event => {
|
||
|
|
if (ignoreNonTouchEvents.current && event.type !== 'touchstart') {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Remove the title ahead of time.
|
||
|
|
// We don't want to wait for the next render commit.
|
||
|
|
// We would risk displaying two tooltips at the same time (native + this one).
|
||
|
|
if (childNode) {
|
||
|
|
childNode.removeAttribute('title');
|
||
|
|
}
|
||
|
|
enterTimer.clear();
|
||
|
|
leaveTimer.clear();
|
||
|
|
if (enterDelay || hystersisOpen && enterNextDelay) {
|
||
|
|
enterTimer.start(hystersisOpen ? enterNextDelay : enterDelay, () => {
|
||
|
|
handleOpen(event);
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
handleOpen(event);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const handleMouseLeave = event => {
|
||
|
|
enterTimer.clear();
|
||
|
|
leaveTimer.start(leaveDelay, () => {
|
||
|
|
handleClose(event);
|
||
|
|
});
|
||
|
|
};
|
||
|
|
const {
|
||
|
|
isFocusVisibleRef,
|
||
|
|
onBlur: handleBlurVisible,
|
||
|
|
onFocus: handleFocusVisible,
|
||
|
|
ref: focusVisibleRef
|
||
|
|
} = useIsFocusVisible();
|
||
|
|
// We don't necessarily care about the focusVisible state (which is safe to access via ref anyway).
|
||
|
|
// We just need to re-render the Tooltip if the focus-visible state changes.
|
||
|
|
const [, setChildIsFocusVisible] = React.useState(false);
|
||
|
|
const handleBlur = event => {
|
||
|
|
handleBlurVisible(event);
|
||
|
|
if (isFocusVisibleRef.current === false) {
|
||
|
|
setChildIsFocusVisible(false);
|
||
|
|
handleMouseLeave(event);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const handleFocus = event => {
|
||
|
|
// Workaround for https://github.com/facebook/react/issues/7769
|
||
|
|
// The autoFocus of React might trigger the event before the componentDidMount.
|
||
|
|
// We need to account for this eventuality.
|
||
|
|
if (!childNode) {
|
||
|
|
setChildNode(event.currentTarget);
|
||
|
|
}
|
||
|
|
handleFocusVisible(event);
|
||
|
|
if (isFocusVisibleRef.current === true) {
|
||
|
|
setChildIsFocusVisible(true);
|
||
|
|
handleMouseOver(event);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const detectTouchStart = event => {
|
||
|
|
ignoreNonTouchEvents.current = true;
|
||
|
|
const childrenProps = children.props;
|
||
|
|
if (childrenProps.onTouchStart) {
|
||
|
|
childrenProps.onTouchStart(event);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const handleTouchStart = event => {
|
||
|
|
detectTouchStart(event);
|
||
|
|
leaveTimer.clear();
|
||
|
|
closeTimer.clear();
|
||
|
|
stopTouchInteraction();
|
||
|
|
prevUserSelect.current = document.body.style.WebkitUserSelect;
|
||
|
|
// Prevent iOS text selection on long-tap.
|
||
|
|
document.body.style.WebkitUserSelect = 'none';
|
||
|
|
touchTimer.start(enterTouchDelay, () => {
|
||
|
|
document.body.style.WebkitUserSelect = prevUserSelect.current;
|
||
|
|
handleMouseOver(event);
|
||
|
|
});
|
||
|
|
};
|
||
|
|
const handleTouchEnd = event => {
|
||
|
|
if (children.props.onTouchEnd) {
|
||
|
|
children.props.onTouchEnd(event);
|
||
|
|
}
|
||
|
|
stopTouchInteraction();
|
||
|
|
leaveTimer.start(leaveTouchDelay, () => {
|
||
|
|
handleClose(event);
|
||
|
|
});
|
||
|
|
};
|
||
|
|
React.useEffect(() => {
|
||
|
|
if (!open) {
|
||
|
|
return undefined;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @param {KeyboardEvent} nativeEvent
|
||
|
|
*/
|
||
|
|
function handleKeyDown(nativeEvent) {
|
||
|
|
// IE11, Edge (prior to using Bink?) use 'Esc'
|
||
|
|
if (nativeEvent.key === 'Escape' || nativeEvent.key === 'Esc') {
|
||
|
|
handleClose(nativeEvent);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
document.addEventListener('keydown', handleKeyDown);
|
||
|
|
return () => {
|
||
|
|
document.removeEventListener('keydown', handleKeyDown);
|
||
|
|
};
|
||
|
|
}, [handleClose, open]);
|
||
|
|
const handleRef = useForkRef(children.ref, focusVisibleRef, setChildNode, ref);
|
||
|
|
|
||
|
|
// There is no point in displaying an empty tooltip.
|
||
|
|
// So we exclude all falsy values, except 0, which is valid.
|
||
|
|
if (!title && title !== 0) {
|
||
|
|
open = false;
|
||
|
|
}
|
||
|
|
const popperRef = React.useRef();
|
||
|
|
const handleMouseMove = event => {
|
||
|
|
const childrenProps = children.props;
|
||
|
|
if (childrenProps.onMouseMove) {
|
||
|
|
childrenProps.onMouseMove(event);
|
||
|
|
}
|
||
|
|
cursorPosition = {
|
||
|
|
x: event.clientX,
|
||
|
|
y: event.clientY
|
||
|
|
};
|
||
|
|
if (popperRef.current) {
|
||
|
|
popperRef.current.update();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const nameOrDescProps = {};
|
||
|
|
const titleIsString = typeof title === 'string';
|
||
|
|
if (describeChild) {
|
||
|
|
nameOrDescProps.title = !open && titleIsString && !disableHoverListener ? title : null;
|
||
|
|
nameOrDescProps['aria-describedby'] = open ? id : null;
|
||
|
|
} else {
|
||
|
|
nameOrDescProps['aria-label'] = titleIsString ? title : null;
|
||
|
|
nameOrDescProps['aria-labelledby'] = open && !titleIsString ? id : null;
|
||
|
|
}
|
||
|
|
const childrenProps = _extends({}, nameOrDescProps, other, children.props, {
|
||
|
|
className: clsx(other.className, children.props.className),
|
||
|
|
onTouchStart: detectTouchStart,
|
||
|
|
ref: handleRef
|
||
|
|
}, followCursor ? {
|
||
|
|
onMouseMove: handleMouseMove
|
||
|
|
} : {});
|
||
|
|
if (process.env.NODE_ENV !== 'production') {
|
||
|
|
childrenProps['data-mui-internal-clone-element'] = true;
|
||
|
|
|
||
|
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||
|
|
React.useEffect(() => {
|
||
|
|
if (childNode && !childNode.getAttribute('data-mui-internal-clone-element')) {
|
||
|
|
console.error(['MUI: The `children` component of the Tooltip is not forwarding its props correctly.', 'Please make sure that props are spread on the same element that the ref is applied to.'].join('\n'));
|
||
|
|
}
|
||
|
|
}, [childNode]);
|
||
|
|
}
|
||
|
|
const interactiveWrapperListeners = {};
|
||
|
|
if (!disableTouchListener) {
|
||
|
|
childrenProps.onTouchStart = handleTouchStart;
|
||
|
|
childrenProps.onTouchEnd = handleTouchEnd;
|
||
|
|
}
|
||
|
|
if (!disableHoverListener) {
|
||
|
|
childrenProps.onMouseOver = composeEventHandler(handleMouseOver, childrenProps.onMouseOver);
|
||
|
|
childrenProps.onMouseLeave = composeEventHandler(handleMouseLeave, childrenProps.onMouseLeave);
|
||
|
|
if (!disableInteractive) {
|
||
|
|
interactiveWrapperListeners.onMouseOver = handleMouseOver;
|
||
|
|
interactiveWrapperListeners.onMouseLeave = handleMouseLeave;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (!disableFocusListener) {
|
||
|
|
childrenProps.onFocus = composeEventHandler(handleFocus, childrenProps.onFocus);
|
||
|
|
childrenProps.onBlur = composeEventHandler(handleBlur, childrenProps.onBlur);
|
||
|
|
if (!disableInteractive) {
|
||
|
|
interactiveWrapperListeners.onFocus = handleFocus;
|
||
|
|
interactiveWrapperListeners.onBlur = handleBlur;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (process.env.NODE_ENV !== 'production') {
|
||
|
|
if (children.props.title) {
|
||
|
|
console.error(['MUI: You have provided a `title` prop to the child of <Tooltip />.', `Remove this title prop \`${children.props.title}\` or the Tooltip component.`].join('\n'));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const popperOptions = React.useMemo(() => {
|
||
|
|
var _PopperProps$popperOp;
|
||
|
|
let tooltipModifiers = [{
|
||
|
|
name: 'arrow',
|
||
|
|
enabled: Boolean(arrowRef),
|
||
|
|
options: {
|
||
|
|
element: arrowRef,
|
||
|
|
padding: 4
|
||
|
|
}
|
||
|
|
}];
|
||
|
|
if ((_PopperProps$popperOp = PopperProps.popperOptions) != null && _PopperProps$popperOp.modifiers) {
|
||
|
|
tooltipModifiers = tooltipModifiers.concat(PopperProps.popperOptions.modifiers);
|
||
|
|
}
|
||
|
|
return _extends({}, PopperProps.popperOptions, {
|
||
|
|
modifiers: tooltipModifiers
|
||
|
|
});
|
||
|
|
}, [arrowRef, PopperProps]);
|
||
|
|
const ownerState = _extends({}, props, {
|
||
|
|
isRtl,
|
||
|
|
arrow,
|
||
|
|
disableInteractive,
|
||
|
|
placement,
|
||
|
|
PopperComponentProp,
|
||
|
|
touch: ignoreNonTouchEvents.current
|
||
|
|
});
|
||
|
|
const classes = useUtilityClasses(ownerState);
|
||
|
|
const PopperComponent = (_ref = (_slots$popper = slots.popper) != null ? _slots$popper : components.Popper) != null ? _ref : TooltipPopper;
|
||
|
|
const TransitionComponent = (_ref2 = (_ref3 = (_slots$transition = slots.transition) != null ? _slots$transition : components.Transition) != null ? _ref3 : TransitionComponentProp) != null ? _ref2 : Grow;
|
||
|
|
const TooltipComponent = (_ref4 = (_slots$tooltip = slots.tooltip) != null ? _slots$tooltip : components.Tooltip) != null ? _ref4 : TooltipTooltip;
|
||
|
|
const ArrowComponent = (_ref5 = (_slots$arrow = slots.arrow) != null ? _slots$arrow : components.Arrow) != null ? _ref5 : TooltipArrow;
|
||
|
|
const popperProps = appendOwnerState(PopperComponent, _extends({}, PopperProps, (_slotProps$popper = slotProps.popper) != null ? _slotProps$popper : componentsProps.popper, {
|
||
|
|
className: clsx(classes.popper, PopperProps == null ? void 0 : PopperProps.className, (_ref6 = (_slotProps$popper2 = slotProps.popper) != null ? _slotProps$popper2 : componentsProps.popper) == null ? void 0 : _ref6.className)
|
||
|
|
}), ownerState);
|
||
|
|
const transitionProps = appendOwnerState(TransitionComponent, _extends({}, TransitionProps, (_slotProps$transition = slotProps.transition) != null ? _slotProps$transition : componentsProps.transition), ownerState);
|
||
|
|
const tooltipProps = appendOwnerState(TooltipComponent, _extends({}, (_slotProps$tooltip = slotProps.tooltip) != null ? _slotProps$tooltip : componentsProps.tooltip, {
|
||
|
|
className: clsx(classes.tooltip, (_ref7 = (_slotProps$tooltip2 = slotProps.tooltip) != null ? _slotProps$tooltip2 : componentsProps.tooltip) == null ? void 0 : _ref7.className)
|
||
|
|
}), ownerState);
|
||
|
|
const tooltipArrowProps = appendOwnerState(ArrowComponent, _extends({}, (_slotProps$arrow = slotProps.arrow) != null ? _slotProps$arrow : componentsProps.arrow, {
|
||
|
|
className: clsx(classes.arrow, (_ref8 = (_slotProps$arrow2 = slotProps.arrow) != null ? _slotProps$arrow2 : componentsProps.arrow) == null ? void 0 : _ref8.className)
|
||
|
|
}), ownerState);
|
||
|
|
return /*#__PURE__*/_jsxs(React.Fragment, {
|
||
|
|
children: [/*#__PURE__*/React.cloneElement(children, childrenProps), /*#__PURE__*/_jsx(PopperComponent, _extends({
|
||
|
|
as: PopperComponentProp != null ? PopperComponentProp : Popper,
|
||
|
|
placement: placement,
|
||
|
|
anchorEl: followCursor ? {
|
||
|
|
getBoundingClientRect: () => ({
|
||
|
|
top: cursorPosition.y,
|
||
|
|
left: cursorPosition.x,
|
||
|
|
right: cursorPosition.x,
|
||
|
|
bottom: cursorPosition.y,
|
||
|
|
width: 0,
|
||
|
|
height: 0
|
||
|
|
})
|
||
|
|
} : childNode,
|
||
|
|
popperRef: popperRef,
|
||
|
|
open: childNode ? open : false,
|
||
|
|
id: id,
|
||
|
|
transition: true
|
||
|
|
}, interactiveWrapperListeners, popperProps, {
|
||
|
|
popperOptions: popperOptions,
|
||
|
|
children: ({
|
||
|
|
TransitionProps: TransitionPropsInner
|
||
|
|
}) => /*#__PURE__*/_jsx(TransitionComponent, _extends({
|
||
|
|
timeout: theme.transitions.duration.shorter
|
||
|
|
}, TransitionPropsInner, transitionProps, {
|
||
|
|
children: /*#__PURE__*/_jsxs(TooltipComponent, _extends({}, tooltipProps, {
|
||
|
|
children: [title, arrow ? /*#__PURE__*/_jsx(ArrowComponent, _extends({}, tooltipArrowProps, {
|
||
|
|
ref: setArrowRef
|
||
|
|
})) : null]
|
||
|
|
}))
|
||
|
|
}))
|
||
|
|
}))]
|
||
|
|
});
|
||
|
|
});
|
||
|
|
process.env.NODE_ENV !== "production" ? Tooltip.propTypes /* remove-proptypes */ = {
|
||
|
|
// ┌────────────────────────────── Warning ──────────────────────────────┐
|
||
|
|
// │ These PropTypes are generated from the TypeScript type definitions. │
|
||
|
|
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
|
||
|
|
// └─────────────────────────────────────────────────────────────────────┘
|
||
|
|
/**
|
||
|
|
* If `true`, adds an arrow to the tooltip.
|
||
|
|
* @default false
|
||
|
|
*/
|
||
|
|
arrow: PropTypes.bool,
|
||
|
|
/**
|
||
|
|
* Tooltip reference element.
|
||
|
|
*/
|
||
|
|
children: elementAcceptingRef.isRequired,
|
||
|
|
/**
|
||
|
|
* Override or extend the styles applied to the component.
|
||
|
|
*/
|
||
|
|
classes: PropTypes.object,
|
||
|
|
/**
|
||
|
|
* @ignore
|
||
|
|
*/
|
||
|
|
className: PropTypes.string,
|
||
|
|
/**
|
||
|
|
* The components used for each slot inside.
|
||
|
|
*
|
||
|
|
* This prop is an alias for the `slots` prop.
|
||
|
|
* It's recommended to use the `slots` prop instead.
|
||
|
|
*
|
||
|
|
* @default {}
|
||
|
|
*/
|
||
|
|
components: PropTypes.shape({
|
||
|
|
Arrow: PropTypes.elementType,
|
||
|
|
Popper: PropTypes.elementType,
|
||
|
|
Tooltip: PropTypes.elementType,
|
||
|
|
Transition: PropTypes.elementType
|
||
|
|
}),
|
||
|
|
/**
|
||
|
|
* The extra props for the slot components.
|
||
|
|
* You can override the existing props or add new ones.
|
||
|
|
*
|
||
|
|
* This prop is an alias for the `slotProps` prop.
|
||
|
|
* It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
|
||
|
|
*
|
||
|
|
* @default {}
|
||
|
|
*/
|
||
|
|
componentsProps: PropTypes.shape({
|
||
|
|
arrow: PropTypes.object,
|
||
|
|
popper: PropTypes.object,
|
||
|
|
tooltip: PropTypes.object,
|
||
|
|
transition: PropTypes.object
|
||
|
|
}),
|
||
|
|
/**
|
||
|
|
* Set to `true` if the `title` acts as an accessible description.
|
||
|
|
* By default the `title` acts as an accessible label for the child.
|
||
|
|
* @default false
|
||
|
|
*/
|
||
|
|
describeChild: PropTypes.bool,
|
||
|
|
/**
|
||
|
|
* Do not respond to focus-visible events.
|
||
|
|
* @default false
|
||
|
|
*/
|
||
|
|
disableFocusListener: PropTypes.bool,
|
||
|
|
/**
|
||
|
|
* Do not respond to hover events.
|
||
|
|
* @default false
|
||
|
|
*/
|
||
|
|
disableHoverListener: PropTypes.bool,
|
||
|
|
/**
|
||
|
|
* Makes a tooltip not interactive, i.e. it will close when the user
|
||
|
|
* hovers over the tooltip before the `leaveDelay` is expired.
|
||
|
|
* @default false
|
||
|
|
*/
|
||
|
|
disableInteractive: PropTypes.bool,
|
||
|
|
/**
|
||
|
|
* Do not respond to long press touch events.
|
||
|
|
* @default false
|
||
|
|
*/
|
||
|
|
disableTouchListener: PropTypes.bool,
|
||
|
|
/**
|
||
|
|
* The number of milliseconds to wait before showing the tooltip.
|
||
|
|
* This prop won't impact the enter touch delay (`enterTouchDelay`).
|
||
|
|
* @default 100
|
||
|
|
*/
|
||
|
|
enterDelay: PropTypes.number,
|
||
|
|
/**
|
||
|
|
* The number of milliseconds to wait before showing the tooltip when one was already recently opened.
|
||
|
|
* @default 0
|
||
|
|
*/
|
||
|
|
enterNextDelay: PropTypes.number,
|
||
|
|
/**
|
||
|
|
* The number of milliseconds a user must touch the element before showing the tooltip.
|
||
|
|
* @default 700
|
||
|
|
*/
|
||
|
|
enterTouchDelay: PropTypes.number,
|
||
|
|
/**
|
||
|
|
* If `true`, the tooltip follow the cursor over the wrapped element.
|
||
|
|
* @default false
|
||
|
|
*/
|
||
|
|
followCursor: PropTypes.bool,
|
||
|
|
/**
|
||
|
|
* This prop is used to help implement the accessibility logic.
|
||
|
|
* If you don't provide this prop. It falls back to a randomly generated id.
|
||
|
|
*/
|
||
|
|
id: PropTypes.string,
|
||
|
|
/**
|
||
|
|
* The number of milliseconds to wait before hiding the tooltip.
|
||
|
|
* This prop won't impact the leave touch delay (`leaveTouchDelay`).
|
||
|
|
* @default 0
|
||
|
|
*/
|
||
|
|
leaveDelay: PropTypes.number,
|
||
|
|
/**
|
||
|
|
* The number of milliseconds after the user stops touching an element before hiding the tooltip.
|
||
|
|
* @default 1500
|
||
|
|
*/
|
||
|
|
leaveTouchDelay: PropTypes.number,
|
||
|
|
/**
|
||
|
|
* Callback fired when the component requests to be closed.
|
||
|
|
*
|
||
|
|
* @param {React.SyntheticEvent} event The event source of the callback.
|
||
|
|
*/
|
||
|
|
onClose: PropTypes.func,
|
||
|
|
/**
|
||
|
|
* Callback fired when the component requests to be open.
|
||
|
|
*
|
||
|
|
* @param {React.SyntheticEvent} event The event source of the callback.
|
||
|
|
*/
|
||
|
|
onOpen: PropTypes.func,
|
||
|
|
/**
|
||
|
|
* If `true`, the component is shown.
|
||
|
|
*/
|
||
|
|
open: PropTypes.bool,
|
||
|
|
/**
|
||
|
|
* Tooltip placement.
|
||
|
|
* @default 'bottom'
|
||
|
|
*/
|
||
|
|
placement: PropTypes.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
|
||
|
|
/**
|
||
|
|
* The component used for the popper.
|
||
|
|
* @default Popper
|
||
|
|
*/
|
||
|
|
PopperComponent: PropTypes.elementType,
|
||
|
|
/**
|
||
|
|
* Props applied to the [`Popper`](/material-ui/api/popper/) element.
|
||
|
|
* @default {}
|
||
|
|
*/
|
||
|
|
PopperProps: PropTypes.object,
|
||
|
|
/**
|
||
|
|
* The extra props for the slot components.
|
||
|
|
* You can override the existing props or add new ones.
|
||
|
|
*
|
||
|
|
* This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
|
||
|
|
*
|
||
|
|
* @default {}
|
||
|
|
*/
|
||
|
|
slotProps: PropTypes.shape({
|
||
|
|
arrow: PropTypes.object,
|
||
|
|
popper: PropTypes.object,
|
||
|
|
tooltip: PropTypes.object,
|
||
|
|
transition: PropTypes.object
|
||
|
|
}),
|
||
|
|
/**
|
||
|
|
* The components used for each slot inside.
|
||
|
|
*
|
||
|
|
* This prop is an alias for the `components` prop, which will be deprecated in the future.
|
||
|
|
*
|
||
|
|
* @default {}
|
||
|
|
*/
|
||
|
|
slots: PropTypes.shape({
|
||
|
|
arrow: PropTypes.elementType,
|
||
|
|
popper: PropTypes.elementType,
|
||
|
|
tooltip: PropTypes.elementType,
|
||
|
|
transition: PropTypes.elementType
|
||
|
|
}),
|
||
|
|
/**
|
||
|
|
* The system prop that allows defining system overrides as well as additional CSS styles.
|
||
|
|
*/
|
||
|
|
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
||
|
|
/**
|
||
|
|
* Tooltip title. Zero-length titles string, undefined, null and false are never displayed.
|
||
|
|
*/
|
||
|
|
title: PropTypes.node,
|
||
|
|
/**
|
||
|
|
* The component used for the transition.
|
||
|
|
* [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
|
||
|
|
* @default Grow
|
||
|
|
*/
|
||
|
|
TransitionComponent: PropTypes.elementType,
|
||
|
|
/**
|
||
|
|
* Props applied to the transition element.
|
||
|
|
* By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
|
||
|
|
*/
|
||
|
|
TransitionProps: PropTypes.object
|
||
|
|
} : void 0;
|
||
|
|
export default Tooltip;
|