@clayui/tooltip 3.56.0 → 3.67.0

package/lib/TooltipProvider.d.ts

@@ -39,5 +39,5 @@ interface IPropsWithScope extends IPropsBase {
      */
     scope: string;
 }
-declare const TooltipProvider: React.FunctionComponent<IPropsWithChildren | IPropsWithScope>;
+declare const TooltipProvider: ({ autoAlign, children, containerProps, contentRenderer, delay, scope, }: IPropsWithChildren | IPropsWithScope) => JSX.Element;
 export default TooltipProvider;

package/lib/TooltipProvider.js

@@ -9,6 +9,8 @@ exports.default = void 0;
 
 var _shared = require("@clayui/shared");
 
+var _domAlign = require("dom-align");
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _warning = _interopRequireDefault(require("warning"));
@@ -66,6 +68,20 @@ var ALIGNMENTS_INVERSE_MAP = {
   tlbl: 'bottom-left',
   trbr: 'bottom-right'
 };
+var BOTTOM_OFFSET = [0, 7];
+var LEFT_OFFSET = [-7, 0];
+var RIGHT_OFFSET = [7, 0];
+var TOP_OFFSET = [0, -7];
+var OFFSET_MAP = {
+  bctc: TOP_OFFSET,
+  bltl: TOP_OFFSET,
+  brtr: TOP_OFFSET,
+  clcr: RIGHT_OFFSET,
+  crcl: LEFT_OFFSET,
+  tcbc: BOTTOM_OFFSET,
+  tlbl: BOTTOM_OFFSET,
+  trbr: BOTTOM_OFFSET
+};
 
 var ALIGNMENTS_FORCE_MAP = _objectSpread(_objectSpread({}, ALIGNMENTS_INVERSE_MAP), {}, {
   bctc: 'top-left',
@@ -97,6 +113,7 @@ var reducer = function reducer(state, _ref) {
     case 'hide':
       return _objectSpread(_objectSpread({}, state), {}, {
         align: initialState.align,
+        floating: undefined,
         show: false
       });
 
@@ -150,25 +167,23 @@ var TooltipProvider = function TooltipProvider(_ref2) {
       delay = _ref2$delay === void 0 ? 600 : _ref2$delay,
       scope = _ref2.scope;
 
-  var _React$useReducer = _react.default.useReducer(reducer, initialState),
-      _React$useReducer2 = _slicedToArray(_React$useReducer, 2),
-      _React$useReducer2$ = _React$useReducer2[0],
-      align = _React$useReducer2$.align,
-      _React$useReducer2$$m = _React$useReducer2$.message,
-      message = _React$useReducer2$$m === void 0 ? '' : _React$useReducer2$$m,
-      setAsHTML = _React$useReducer2$.setAsHTML,
-      show = _React$useReducer2$.show,
-      dispatch = _React$useReducer2[1]; // Using `any` type since TS incorrectly infers setTimeout to be from NodeJS
-
-
-  var timeoutIdRef = _react.default.useRef();
-
-  var targetRef = _react.default.useRef(null);
-
-  var titleNodeRef = _react.default.useRef(null);
-
-  var tooltipRef = _react.default.useRef(null);
-
+  var _useReducer = (0, _react.useReducer)(reducer, initialState),
+      _useReducer2 = _slicedToArray(_useReducer, 2),
+      _useReducer2$ = _useReducer2[0],
+      align = _useReducer2$.align,
+      floating = _useReducer2$.floating,
+      _useReducer2$$message = _useReducer2$.message,
+      message = _useReducer2$$message === void 0 ? '' : _useReducer2$$message,
+      setAsHTML = _useReducer2$.setAsHTML,
+      show = _useReducer2$.show,
+      dispatch = _useReducer2[1];
+
+  var mousePosition = (0, _shared.useMousePosition)(20); // Using `any` type since TS incorrectly infers setTimeout to be from NodeJS
+
+  var timeoutIdRef = (0, _react.useRef)();
+  var targetRef = (0, _react.useRef)(null);
+  var titleNodeRef = (0, _react.useRef)(null);
+  var tooltipRef = (0, _react.useRef)(null);
   var saveTitle = (0, _react.useCallback)(function (element) {
     titleNodeRef.current = element;
     var title = element.getAttribute('title');
@@ -206,7 +221,13 @@ var TooltipProvider = function TooltipProvider(_ref2) {
       titleNodeRef.current = null;
     }
   }, []);
-  var handleHide = (0, _react.useCallback)(function () {
+  var handleHide = (0, _react.useCallback)(function (event) {
+    var _tooltipRef$current, _targetRef$current;
+
+    if (event && ((_tooltipRef$current = tooltipRef.current) !== null && _tooltipRef$current !== void 0 && _tooltipRef$current.contains(event.relatedTarget) || (_targetRef$current = targetRef.current) !== null && _targetRef$current !== void 0 && _targetRef$current.contains(event.relatedTarget))) {
+      return;
+    }
+
     dispatch({
       type: 'hide'
     });
@@ -218,13 +239,13 @@ var TooltipProvider = function TooltipProvider(_ref2) {
       targetRef.current = null;
     }
   }, []);
-  var handleShow = (0, _react.useCallback)(function (_ref3) {
-    var target = _ref3.target;
-    targetRef.current = target;
+  var handleShow = (0, _react.useCallback)(function (event) {
+    var target = event.target;
     var hasTitle = target && (target.hasAttribute('title') || target.hasAttribute('data-title'));
     var titleNode = hasTitle ? target : closestAncestor(target, '[title], [data-title]');
 
     if (titleNode) {
+      targetRef.current = target;
       target.addEventListener('click', handleHide);
       var title = titleNode.getAttribute('title') || titleNode.getAttribute('data-title') || '';
       saveTitle(titleNode);
@@ -233,10 +254,12 @@ var TooltipProvider = function TooltipProvider(_ref2) {
 
       var _setAsHTML = !!titleNode.getAttribute('data-title-set-as-html');
 
+      var isFloating = titleNode.getAttribute('data-tooltip-floating');
       clearTimeout(timeoutIdRef.current);
       timeoutIdRef.current = setTimeout(function () {
         dispatch({
           align: newAlign || align,
+          floating: Boolean(isFloating),
           message: title,
           setAsHTML: _setAsHTML,
           type: 'show'
@@ -244,8 +267,7 @@ var TooltipProvider = function TooltipProvider(_ref2) {
       }, customDelay ? Number(customDelay) : delay);
     }
   }, []);
-
-  _react.default.useEffect(function () {
+  (0, _react.useEffect)(function () {
     var handleEsc = function handleEsc(event) {
       if (show && event.key === _shared.Keys.Esc) {
         event.stopImmediatePropagation();
@@ -258,30 +280,45 @@ var TooltipProvider = function TooltipProvider(_ref2) {
       return document.removeEventListener('keyup', handleEsc, true);
     };
   }, [show]);
-
-  _react.default.useEffect(function () {
+  (0, _react.useEffect)(function () {
     if (scope) {
       var disposeShowEvents = TRIGGER_SHOW_EVENTS.map(function (eventName) {
         return (0, _shared.delegate)(document.body, eventName, scope, handleShow);
       });
       var disposeHideEvents = TRIGGER_HIDE_EVENTS.map(function (eventName) {
-        return (0, _shared.delegate)(document.body, eventName, scope, handleHide);
+        return (0, _shared.delegate)(document.body, eventName, "".concat(scope, ", .tooltip"), handleHide);
       });
       return function () {
-        disposeShowEvents.forEach(function (_ref4) {
-          var dispose = _ref4.dispose;
+        disposeShowEvents.forEach(function (_ref3) {
+          var dispose = _ref3.dispose;
           return dispose();
         });
-        disposeHideEvents.forEach(function (_ref5) {
-          var dispose = _ref5.dispose;
+        disposeHideEvents.forEach(function (_ref4) {
+          var dispose = _ref4.dispose;
           return dispose();
         });
       };
     }
-  }, []);
+  }, [handleShow]);
+  (0, _react.useEffect)(function () {
+    if (tooltipRef.current && show && floating) {
+      var points = ALIGNMENTS_MAP[align || 'top'];
+
+      var _mousePosition = _slicedToArray(mousePosition, 2),
+          clientX = _mousePosition[0],
+          clientY = _mousePosition[1];
 
-  _react.default.useEffect(function () {
-    if (titleNodeRef.current && tooltipRef.current) {
+      (0, _domAlign.alignPoint)(tooltipRef.current, {
+        clientX: clientX,
+        clientY: clientY
+      }, {
+        offset: OFFSET_MAP[points.join('')],
+        points: points
+      });
+    }
+  }, [mousePosition, show, floating]);
+  (0, _react.useEffect)(function () {
+    if (titleNodeRef.current && tooltipRef.current && !floating) {
       var points = ALIGNMENTS_MAP[align || 'top'];
       var alignment = (0, _shared.doAlign)({
         overflow: {
@@ -308,7 +345,6 @@ var TooltipProvider = function TooltipProvider(_ref2) {
       }
     }
   }, [align, show]);
-
   "production" !== "production" ? (0, _warning.default)(typeof children === 'undefined' && typeof scope !== 'undefined' || typeof scope === 'undefined' && typeof children !== 'undefined', '<TooltipProvider />: You must use at least one of the following props: `children` or `scope`.') : void 0;
   "production" !== "production" ? (0, _warning.default)(typeof children !== 'undefined' || typeof scope !== 'undefined', '<TooltipProvider />: If you want to use `scope`, use <TooltipProvider /> as a singleton and do not pass `children`.') : void 0;
   "production" !== "production" ? (0, _warning.default)((children === null || children === void 0 ? void 0 : children.type) !== _react.default.Fragment, '<TooltipProvider />: React Fragment is not allowed as a child to TooltipProvider. Child must be a single HTML element that accepts `onMouseOver` and `onMouseOut`.') : void 0;
@@ -316,7 +352,8 @@ var TooltipProvider = function TooltipProvider(_ref2) {
     targetNode: targetRef.current,
     title: message
   });
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, show && /*#__PURE__*/_react.default.createElement(_shared.ClayPortal, containerProps, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+
+  var tooltip = show && /*#__PURE__*/_react.default.createElement(_shared.ClayPortal, containerProps, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     alignPosition: align,
     ref: tooltipRef,
     show: true
@@ -324,7 +361,10 @@ var TooltipProvider = function TooltipProvider(_ref2) {
     dangerouslySetInnerHTML: {
       __html: titleContent
     }
-  }) : titleContent)), scope ? children : children && /*#__PURE__*/_react.default.cloneElement(children, _objectSpread(_objectSpread({}, children.props), {}, {
+  }) : titleContent));
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, scope ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tooltip, children) : children && /*#__PURE__*/_react.default.cloneElement(children, _objectSpread(_objectSpread({}, children.props), {}, {
+    children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children.props.children, tooltip),
     onMouseOut: handleHide,
     onMouseOver: handleShow
   })));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@clayui/tooltip",
-	"version": "3.56.0",
+	"version": "3.67.0",
 	"description": "ClayTooltip component",
 	"license": "BSD-3-Clause",
 	"repository": "https://github.com/liferay/clay",
@@ -26,8 +26,9 @@
 		"react"
 	],
 	"dependencies": {
-		"@clayui/shared": "^3.56.0",
+		"@clayui/shared": "^3.67.0",
 		"classnames": "^2.2.6",
+		"dom-align": "^1.12.2",
 		"warning": "^4.0.3"
 	},
 	"peerDependencies": {
@@ -38,5 +39,5 @@
 	"browserslist": [
 		"extends browserslist-config-clay"
 	],
-	"gitHead": "1c33d9c709d8ce071862f0087c76ac23ce11465b"
+	"gitHead": "71e84490088d72afb0240a7ef69cde23a6d5dd19"
 }

package/src/TooltipProvider.tsx

@@ -9,8 +9,10 @@ import {
 	Keys,
 	delegate,
 	doAlign,
+	useMousePosition,
 } from '@clayui/shared';
-import React, {useCallback} from 'react';
+import {alignPoint} from 'dom-align';
+import React, {useCallback, useEffect, useReducer, useRef} from 'react';
 import warning from 'warning';
 
 import ClayTooltip from './Tooltip';
@@ -48,6 +50,22 @@ const ALIGNMENTS_INVERSE_MAP = {
 	trbr: 'bottom-right',
 } as const;
 
+const BOTTOM_OFFSET = [0, 7] as const;
+const LEFT_OFFSET = [-7, 0] as const;
+const RIGHT_OFFSET = [7, 0] as const;
+const TOP_OFFSET = [0, -7] as const;
+
+const OFFSET_MAP = {
+	bctc: TOP_OFFSET,
+	bltl: TOP_OFFSET,
+	brtr: TOP_OFFSET,
+	clcr: RIGHT_OFFSET,
+	crcl: LEFT_OFFSET,
+	tcbc: BOTTOM_OFFSET,
+	tlbl: BOTTOM_OFFSET,
+	trbr: BOTTOM_OFFSET,
+};
+
 const ALIGNMENTS_FORCE_MAP = {
 	...ALIGNMENTS_INVERSE_MAP,
 	bctc: 'top-left',
@@ -56,6 +74,7 @@ const ALIGNMENTS_FORCE_MAP = {
 
 interface IState {
 	align?: typeof ALIGNMENTS[number];
+	floating?: boolean;
 	message?: string;
 	show?: boolean;
 	setAsHTML?: boolean;
@@ -97,6 +116,7 @@ const reducer = (state: IState, {type, ...payload}: IAction): IState => {
 			return {
 				...state,
 				align: initialState.align,
+				floating: undefined,
 				show: false,
 			};
 		default:
@@ -183,26 +203,24 @@ interface IPropsWithScope extends IPropsBase {
 	scope: string;
 }
 
-const TooltipProvider: React.FunctionComponent<
-	IPropsWithChildren | IPropsWithScope
-> = ({
+const TooltipProvider = ({
 	autoAlign = true,
 	children,
 	containerProps = {},
 	contentRenderer = (props) => props.title,
 	delay = 600,
 	scope,
-}) => {
-	const [{align, message = '', setAsHTML, show}, dispatch] = React.useReducer(
-		reducer,
-		initialState
-	);
+}: IPropsWithChildren | IPropsWithScope) => {
+	const [{align, floating, message = '', setAsHTML, show}, dispatch] =
+		useReducer(reducer, initialState);
+
+	const mousePosition = useMousePosition(20);
 
 	// Using `any` type since TS incorrectly infers setTimeout to be from NodeJS
-	const timeoutIdRef = React.useRef<any>();
-	const targetRef = React.useRef<HTMLElement | null>(null);
-	const titleNodeRef = React.useRef<HTMLElement | null>(null);
-	const tooltipRef = React.useRef<HTMLElement | null>(null);
+	const timeoutIdRef = useRef<any>();
+	const targetRef = useRef<HTMLElement | null>(null);
+	const titleNodeRef = useRef<HTMLElement | null>(null);
+	const tooltipRef = useRef<HTMLElement | null>(null);
 
 	const saveTitle = useCallback((element: HTMLElement) => {
 		titleNodeRef.current = element;
@@ -247,7 +265,15 @@ const TooltipProvider: React.FunctionComponent<
 		}
 	}, []);
 
-	const handleHide = useCallback(() => {
+	const handleHide = useCallback((event?: any) => {
+		if (
+			event &&
+			(tooltipRef.current?.contains(event.relatedTarget) ||
+				targetRef.current?.contains(event.relatedTarget))
+		) {
+			return;
+		}
+
 		dispatch({type: 'hide'});
 
 		clearTimeout(timeoutIdRef.current);
@@ -261,52 +287,64 @@ const TooltipProvider: React.FunctionComponent<
 		}
 	}, []);
 
-	const handleShow = useCallback(({target}: {target: HTMLElement}) => {
-		targetRef.current = target;
-
-		const hasTitle =
-			target &&
-			(target.hasAttribute('title') || target.hasAttribute('data-title'));
-
-		const titleNode = hasTitle
-			? target
-			: closestAncestor(target, '[title], [data-title]');
-
-		if (titleNode) {
-			target.addEventListener('click', handleHide);
-
-			const title =
-				titleNode.getAttribute('title') ||
-				titleNode.getAttribute('data-title') ||
-				'';
-
-			saveTitle(titleNode);
-
-			const customDelay = titleNode.getAttribute('data-tooltip-delay');
-			const newAlign = titleNode.getAttribute(
-				'data-tooltip-align'
-			) as typeof align;
-			const setAsHTML = !!titleNode.getAttribute(
-				'data-title-set-as-html'
-			);
-
-			clearTimeout(timeoutIdRef.current);
-
-			timeoutIdRef.current = setTimeout(
-				() => {
-					dispatch({
-						align: newAlign || align,
-						message: title,
-						setAsHTML,
-						type: 'show',
-					});
-				},
-				customDelay ? Number(customDelay) : delay
-			);
-		}
-	}, []);
+	const handleShow = useCallback(
+		(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+			const target = event!.target as HTMLElement;
+
+			const hasTitle =
+				target &&
+				(target.hasAttribute('title') ||
+					target.hasAttribute('data-title'));
+
+			const titleNode = hasTitle
+				? target
+				: closestAncestor(target, '[title], [data-title]');
+
+			if (titleNode) {
+				targetRef.current = target;
+
+				target.addEventListener('click', handleHide);
+
+				const title =
+					titleNode.getAttribute('title') ||
+					titleNode.getAttribute('data-title') ||
+					'';
+
+				saveTitle(titleNode);
+
+				const customDelay =
+					titleNode.getAttribute('data-tooltip-delay');
+				const newAlign = titleNode.getAttribute(
+					'data-tooltip-align'
+				) as typeof align;
+				const setAsHTML = !!titleNode.getAttribute(
+					'data-title-set-as-html'
+				);
+
+				const isFloating = titleNode.getAttribute(
+					'data-tooltip-floating'
+				);
+
+				clearTimeout(timeoutIdRef.current);
+
+				timeoutIdRef.current = setTimeout(
+					() => {
+						dispatch({
+							align: newAlign || align,
+							floating: Boolean(isFloating),
+							message: title,
+							setAsHTML,
+							type: 'show',
+						});
+					},
+					customDelay ? Number(customDelay) : delay
+				);
+			}
+		},
+		[]
+	);
 
-	React.useEffect(() => {
+	useEffect(() => {
 		const handleEsc = (event: KeyboardEvent) => {
 			if (show && event.key === Keys.Esc) {
 				event.stopImmediatePropagation();
@@ -320,13 +358,18 @@ const TooltipProvider: React.FunctionComponent<
 		return () => document.removeEventListener('keyup', handleEsc, true);
 	}, [show]);
 
-	React.useEffect(() => {
+	useEffect(() => {
 		if (scope) {
 			const disposeShowEvents = TRIGGER_SHOW_EVENTS.map((eventName) => {
 				return delegate(document.body, eventName, scope, handleShow);
 			});
 			const disposeHideEvents = TRIGGER_HIDE_EVENTS.map((eventName) => {
-				return delegate(document.body, eventName, scope, handleHide);
+				return delegate(
+					document.body,
+					eventName,
+					`${scope}, .tooltip`,
+					handleHide
+				);
 			});
 
 			return () => {
@@ -334,12 +377,39 @@ const TooltipProvider: React.FunctionComponent<
 				disposeHideEvents.forEach(({dispose}) => dispose());
 			};
 		}
-	}, []);
+	}, [handleShow]);
+
+	useEffect(() => {
+		if (
+			(tooltipRef as React.RefObject<HTMLDivElement>).current &&
+			show &&
+			floating
+		) {
+			const points = ALIGNMENTS_MAP[align || 'top'] as [string, string];
 
-	React.useEffect(() => {
+			const [clientX, clientY] = mousePosition;
+
+			alignPoint(
+				(tooltipRef as React.RefObject<HTMLDivElement>).current!,
+				{
+					clientX,
+					clientY,
+				},
+				{
+					offset: OFFSET_MAP[
+						points.join('') as keyof typeof OFFSET_MAP
+					] as [number, number],
+					points,
+				}
+			);
+		}
+	}, [mousePosition, show, floating]);
+
+	useEffect(() => {
 		if (
 			titleNodeRef.current &&
-			(tooltipRef as React.RefObject<HTMLDivElement>).current
+			(tooltipRef as React.RefObject<HTMLDivElement>).current &&
+			!floating
 		) {
 			const points = ALIGNMENTS_MAP[align || 'top'] as [string, string];
 
@@ -395,32 +465,43 @@ const TooltipProvider: React.FunctionComponent<
 		title: message,
 	});
 
+	const tooltip = show && (
+		<ClayPortal {...containerProps}>
+			<ClayTooltip alignPosition={align} ref={tooltipRef} show>
+				{setAsHTML && typeof titleContent === 'string' ? (
+					<span
+						dangerouslySetInnerHTML={{
+							__html: titleContent,
+						}}
+					/>
+				) : (
+					titleContent
+				)}
+			</ClayTooltip>
+		</ClayPortal>
+	);
+
 	return (
 		<>
-			{show && (
-				<ClayPortal {...containerProps}>
-					<ClayTooltip alignPosition={align} ref={tooltipRef} show>
-						{setAsHTML && typeof titleContent === 'string' ? (
-							<span
-								dangerouslySetInnerHTML={{
-									__html: titleContent,
-								}}
-							/>
-						) : (
-							titleContent
-						)}
-					</ClayTooltip>
-				</ClayPortal>
+			{scope ? (
+				<>
+					{tooltip}
+					{children}
+				</>
+			) : (
+				children &&
+				React.cloneElement(children, {
+					...children.props,
+					children: (
+						<>
+							{children.props.children}
+							{tooltip}
+						</>
+					),
+					onMouseOut: handleHide,
+					onMouseOver: handleShow,
+				})
 			)}
-
-			{scope
-				? children
-				: children &&
-				  React.cloneElement(children, {
-						...children.props,
-						onMouseOut: handleHide,
-						onMouseOver: handleShow,
-				  })}
 		</>
 	);
 };