@clayui/tooltip 3.65.0 → 3.67.0

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
       });
 
@@ -154,12 +171,14 @@ var TooltipProvider = function TooltipProvider(_ref2) {
       _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]; // Using `any` type since TS incorrectly infers setTimeout to be from NodeJS
+      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);
@@ -220,8 +239,8 @@ var TooltipProvider = function TooltipProvider(_ref2) {
       targetRef.current = null;
     }
   }, []);
-  var handleShow = (0, _react.useCallback)(function (_ref3) {
-    var target = _ref3.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]');
 
@@ -235,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'
@@ -268,19 +289,36 @@ var TooltipProvider = function TooltipProvider(_ref2) {
         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];
+
+      (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) {
+    if (titleNodeRef.current && tooltipRef.current && !floating) {
       var points = ALIGNMENTS_MAP[align || 'top'];
       var alignment = (0, _shared.doAlign)({
         overflow: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@clayui/tooltip",
-	"version": "3.65.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.65.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": "603f05c8d617d98e29f0456b5d6618f9a95ce740"
+	"gitHead": "71e84490088d72afb0240a7ef69cde23a6d5dd19"
 }

package/src/TooltipProvider.tsx

@@ -9,7 +9,9 @@ import {
 	Keys,
 	delegate,
 	doAlign,
+	useMousePosition,
 } from '@clayui/shared';
+import {alignPoint} from 'dom-align';
 import React, {useCallback, useEffect, useReducer, useRef} from 'react';
 import warning from 'warning';
 
@@ -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:
@@ -191,10 +211,10 @@ const TooltipProvider = ({
 	delay = 600,
 	scope,
 }: IPropsWithChildren | IPropsWithScope) => {
-	const [{align, message = '', setAsHTML, show}, dispatch] = useReducer(
-		reducer,
-		initialState
-	);
+	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 = useRef<any>();
@@ -267,50 +287,62 @@ const TooltipProvider = ({
 		}
 	}, []);
 
-	const handleShow = useCallback(({target}: {target: HTMLElement}) => {
-		const hasTitle =
-			target &&
-			(target.hasAttribute('title') || target.hasAttribute('data-title'));
+	const handleShow = useCallback(
+		(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+			const target = event!.target as HTMLElement;
 
-		const titleNode = hasTitle
-			? target
-			: closestAncestor(target, '[title], [data-title]');
+			const hasTitle =
+				target &&
+				(target.hasAttribute('title') ||
+					target.hasAttribute('data-title'));
 
-		if (titleNode) {
-			targetRef.current = target;
+			const titleNode = hasTitle
+				? target
+				: closestAncestor(target, '[title], [data-title]');
 
-			target.addEventListener('click', handleHide);
+			if (titleNode) {
+				targetRef.current = target;
 
-			const title =
-				titleNode.getAttribute('title') ||
-				titleNode.getAttribute('data-title') ||
-				'';
+				target.addEventListener('click', handleHide);
 
-			saveTitle(titleNode);
+				const title =
+					titleNode.getAttribute('title') ||
+					titleNode.getAttribute('data-title') ||
+					'';
 
-			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'
-			);
+				saveTitle(titleNode);
 
-			clearTimeout(timeoutIdRef.current);
+				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'
+				);
 
-			timeoutIdRef.current = setTimeout(
-				() => {
-					dispatch({
-						align: newAlign || align,
-						message: title,
-						setAsHTML,
-						type: 'show',
-					});
-				},
-				customDelay ? Number(customDelay) : delay
-			);
-		}
-	}, []);
+				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
+				);
+			}
+		},
+		[]
+	);
 
 	useEffect(() => {
 		const handleEsc = (event: KeyboardEvent) => {
@@ -345,12 +377,39 @@ const TooltipProvider = ({
 				disposeHideEvents.forEach(({dispose}) => dispose());
 			};
 		}
-	}, []);
+	}, [handleShow]);
+
+	useEffect(() => {
+		if (
+			(tooltipRef as React.RefObject<HTMLDivElement>).current &&
+			show &&
+			floating
+		) {
+			const points = ALIGNMENTS_MAP[align || 'top'] as [string, string];
+
+			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];