@clayui/tooltip 3.78.2 → 3.79.0

package/lib/TooltipProvider.js

@@ -54,8 +54,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var initialState = {
   align: 'top',
   floating: false,
-  message: '',
-  setAsHTML: false
+  setAsHTML: false,
+  title: ''
 };
 var TRIGGER_HIDE_EVENTS = ['dragstart', 'mouseout', 'mouseup', 'pointerup', 'touchend'];
 var TRIGGER_SHOW_EVENTS = ['mouseover', 'mouseup', 'pointerdown', 'touchstart'];
@@ -98,9 +98,9 @@ var TooltipProvider = function TooltipProvider(_ref2) {
       _useReducer2$ = _useReducer2[0],
       align = _useReducer2$.align,
       floating = _useReducer2$.floating,
-      _useReducer2$$message = _useReducer2$.message,
-      message = _useReducer2$$message === void 0 ? '' : _useReducer2$$message,
       setAsHTML = _useReducer2$.setAsHTML,
+      _useReducer2$$title = _useReducer2$.title,
+      title = _useReducer2$$title === void 0 ? '' : _useReducer2$$title,
       dispatch = _useReducer2[1];
 
   var tooltipRef = (0, _react.useRef)(null);
@@ -151,7 +151,8 @@ var TooltipProvider = function TooltipProvider(_ref2) {
       });
     }, []),
     sourceElement: tooltipRef,
-    targetElement: titleNode
+    targetElement: titleNode,
+    title: title
   });
   var onShow = (0, _react.useCallback)(function (event) {
     if (isHovered.current || isFocused.current) {
@@ -163,8 +164,8 @@ var TooltipProvider = function TooltipProvider(_ref2) {
         dispatch({
           align: (_ref3 = _props.align) !== null && _ref3 !== void 0 ? _ref3 : align,
           floating: _props.floating,
-          message: _props.title,
           setAsHTML: _props.setAsHTML,
+          title: _props.title,
           type: 'update'
         });
         open(isFocused.current, _props.delay ? Number(_props.delay) : undefined);
@@ -243,7 +244,7 @@ var TooltipProvider = function TooltipProvider(_ref2) {
   "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;
   var titleContent = contentRenderer({
     targetNode: target.current,
-    title: message
+    title: title
   });
 
   var tooltip = isOpen && /*#__PURE__*/_react.default.createElement(_shared.ClayPortal, containerProps, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {

package/lib/useAlign.d.ts

@@ -13,6 +13,7 @@ declare type Props = {
     onAlign: (align: Align) => void;
     sourceElement: React.MutableRefObject<HTMLElement | null>;
     targetElement: React.MutableRefObject<HTMLElement | null>;
+    title: string;
 };
-export declare function useAlign({ align, autoAlign, floating, isOpen, onAlign, sourceElement, targetElement, }: Props): void;
+export declare function useAlign({ align, autoAlign, floating, isOpen, onAlign, sourceElement, targetElement, title, }: Props): void;
 export {};

package/lib/useAlign.js

@@ -77,7 +77,8 @@ function useAlign(_ref) {
       isOpen = _ref.isOpen,
       onAlign = _ref.onAlign,
       sourceElement = _ref.sourceElement,
-      targetElement = _ref.targetElement;
+      targetElement = _ref.targetElement,
+      title = _ref.title;
   var mousePosition = (0, _shared.useMousePosition)(20);
   (0, _react.useEffect)(function () {
     if (sourceElement.current && isOpen && floating) {
@@ -97,7 +98,7 @@ function useAlign(_ref) {
     }
   }, [isOpen, floating]);
   (0, _react.useEffect)(function () {
-    if (targetElement.current && sourceElement.current && !floating) {
+    if (targetElement.current && sourceElement.current && isOpen && !floating) {
       var points = ALIGNMENTS_MAP[align || 'top'];
       var alignment = (0, _shared.doAlign)({
         overflow: {
@@ -117,5 +118,5 @@ function useAlign(_ref) {
         onAlign(ALIGNMENTS_INVERSE_MAP[alignmentString]);
       }
     }
-  }, [align, isOpen]);
+  }, [align, title, isOpen]);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@clayui/tooltip",
-	"version": "3.78.2",
+	"version": "3.79.0",
 	"description": "ClayTooltip component",
 	"license": "BSD-3-Clause",
 	"repository": "https://github.com/liferay/clay",
@@ -26,7 +26,7 @@
 		"react"
 	],
 	"dependencies": {
-		"@clayui/shared": "^3.78.2",
+		"@clayui/shared": "^3.79.0",
 		"classnames": "^2.2.6",
 		"dom-align": "^1.12.2",
 		"warning": "^4.0.3"
@@ -39,5 +39,5 @@
 	"browserslist": [
 		"extends browserslist-config-clay"
 	],
-	"gitHead": "7322366140891124565709ce33e4b0085012c410"
+	"gitHead": "4bf7ee4967efc6c2c46aee28b69569f764a1926c"
 }

package/src/TooltipProvider.tsx

@@ -21,15 +21,15 @@ import {useTooltipState} from './useTooltipState';
 interface IState {
 	align: Align;
 	floating: boolean;
-	message?: string;
 	setAsHTML?: boolean;
+	title?: string;
 }
 
 const initialState: IState = {
 	align: 'top',
 	floating: false,
-	message: '',
 	setAsHTML: false,
+	title: '',
 };
 
 const TRIGGER_HIDE_EVENTS = [
@@ -117,7 +117,7 @@ const TooltipProvider = ({
 	delay = 600,
 	scope,
 }: IPropsWithChildren | IPropsWithScope) => {
-	const [{align, floating, message = '', setAsHTML}, dispatch] = useReducer(
+	const [{align, floating, setAsHTML, title = ''}, dispatch] = useReducer(
 		reducer,
 		initialState
 	);
@@ -153,6 +153,7 @@ const TooltipProvider = ({
 		onAlign: useCallback((align) => dispatch({align, type: 'update'}), []),
 		sourceElement: tooltipRef,
 		targetElement: titleNode,
+		title,
 	});
 
 	const onShow = useCallback(
@@ -164,8 +165,8 @@ const TooltipProvider = ({
 					dispatch({
 						align: (props.align as any) ?? align,
 						floating: props.floating,
-						message: props.title,
 						setAsHTML: props.setAsHTML,
+						title: props.title,
 						type: 'update',
 					});
 					open(
@@ -281,7 +282,7 @@ const TooltipProvider = ({
 
 	const titleContent = contentRenderer({
 		targetNode: target.current,
-		title: message,
+		title,
 	});
 
 	const tooltip = isOpen && (

package/src/useAlign.ts

@@ -72,6 +72,7 @@ type Props = {
 	onAlign: (align: Align) => void;
 	sourceElement: React.MutableRefObject<HTMLElement | null>;
 	targetElement: React.MutableRefObject<HTMLElement | null>;
+	title: string;
 };
 
 export function useAlign({
@@ -82,6 +83,7 @@ export function useAlign({
 	onAlign,
 	sourceElement,
 	targetElement,
+	title,
 }: Props) {
 	const mousePosition = useMousePosition(20);
 
@@ -108,7 +110,12 @@ export function useAlign({
 	}, [isOpen, floating]);
 
 	useEffect(() => {
-		if (targetElement.current && sourceElement.current && !floating) {
+		if (
+			targetElement.current &&
+			sourceElement.current &&
+			isOpen &&
+			!floating
+		) {
 			const points = ALIGNMENTS_MAP[align || 'top'] as [string, string];
 
 			const alignment = doAlign({
@@ -133,5 +140,5 @@ export function useAlign({
 				onAlign(ALIGNMENTS_INVERSE_MAP[alignmentString]);
 			}
 		}
-	}, [align, isOpen]);
+	}, [align, title, isOpen]);
 }