@clayui/tooltip 3.55.0 → 3.65.0

package/lib/Tooltip.d.ts

@@ -1,7 +1,17 @@
+/**
+ * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
 import React from 'react';
 export declare const ALIGN_POSITIONS: readonly ["top", "top-left", "top-right", "bottom", "bottom-left", "bottom-right", "left", "right"];
 interface IProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Position in which the tooltip will be aligned to the element.
+     */
     alignPosition?: typeof ALIGN_POSITIONS[number];
+    /**
+     * Flag to indicate if tooltip is displayed.
+     */
     show?: boolean;
 }
 declare const ClayTooltip: React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLElement>>;

package/lib/TooltipProvider.d.ts

@@ -1,3 +1,7 @@
+/**
+ * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
 import { IPortalBaseProps } from '@clayui/shared';
 import React from 'react';
 declare type TContentRenderer = (props: {
@@ -5,9 +9,21 @@ declare type TContentRenderer = (props: {
     title: string;
 }) => React.ReactElement | React.ReactNode;
 interface IPropsBase {
+    /**
+     * Flag to indicate if tooltip should automatically align based on the window
+     */
     autoAlign?: boolean;
+    /**
+     * Props to add to the <ClayPortal/>.
+     */
     containerProps?: IPortalBaseProps;
+    /**
+     * Custom function for rendering the contents of the tooltip
+     */
     contentRenderer?: TContentRenderer;
+    /**
+     * Delay in miliseconds before showing tooltip
+     */
     delay?: number;
 }
 interface IPropsWithChildren extends IPropsBase {
@@ -16,7 +32,12 @@ interface IPropsWithChildren extends IPropsBase {
 }
 interface IPropsWithScope extends IPropsBase {
     children?: never;
+    /**
+     * CSS selector to scope provider to. All titles within this scope will be
+     * rendered in the tooltip. Titles outside of this scope will be styled
+     * as with the default browser.
+     */
     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

@@ -150,25 +150,21 @@ 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,
+      _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
+
+
+  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 +202,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'
     });
@@ -220,11 +222,11 @@ var TooltipProvider = function TooltipProvider(_ref2) {
   }, []);
   var handleShow = (0, _react.useCallback)(function (_ref3) {
     var target = _ref3.target;
-    targetRef.current = 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,6 +235,7 @@ var TooltipProvider = function TooltipProvider(_ref2) {
 
       var _setAsHTML = !!titleNode.getAttribute('data-title-set-as-html');
 
+      clearTimeout(timeoutIdRef.current);
       timeoutIdRef.current = setTimeout(function () {
         dispatch({
           align: newAlign || align,
@@ -243,8 +246,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();
@@ -257,14 +259,13 @@ 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) {
@@ -278,8 +279,7 @@ var TooltipProvider = function TooltipProvider(_ref2) {
       };
     }
   }, []);
-
-  _react.default.useEffect(function () {
+  (0, _react.useEffect)(function () {
     if (titleNodeRef.current && tooltipRef.current) {
       var points = ALIGNMENTS_MAP[align || 'top'];
       var alignment = (0, _shared.doAlign)({
@@ -307,7 +307,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;
@@ -315,7 +314,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
@@ -323,7 +323,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/lib/index.d.ts

@@ -1,3 +1,7 @@
+/**
+ * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
 import ClayTooltip from './Tooltip';
 import ClayTooltipProvider from './TooltipProvider';
 export { ClayTooltipProvider };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@clayui/tooltip",
-	"version": "3.55.0",
+	"version": "3.65.0",
 	"description": "ClayTooltip component",
 	"license": "BSD-3-Clause",
 	"repository": "https://github.com/liferay/clay",
@@ -17,8 +17,8 @@
 	],
 	"scripts": {
 		"build": "cross-env NODE_ENV=production babel src --root-mode upward --out-dir lib --extensions .ts,.tsx",
-		"build:types": "cross-env NODE_ENV=production tsc --project ./tsconfig.declarations.json",
-		"prepublishOnly": "yarn build && yarn build:types",
+		"buildTypes": "cross-env NODE_ENV=production tsc --project ./tsconfig.declarations.json",
+		"prepublishOnly": "yarn build && yarn buildTypes",
 		"test": "jest --config ../../jest.config.js"
 	},
 	"keywords": [
@@ -26,7 +26,7 @@
 		"react"
 	],
 	"dependencies": {
-		"@clayui/shared": "^3.55.0",
+		"@clayui/shared": "^3.65.0",
 		"classnames": "^2.2.6",
 		"warning": "^4.0.3"
 	},
@@ -38,5 +38,5 @@
 	"browserslist": [
 		"extends browserslist-config-clay"
 	],
-	"gitHead": "5310f4650d453a3659b0bc73a5f098732168c9c1"
+	"gitHead": "603f05c8d617d98e29f0456b5d6618f9a95ce740"
 }

package/src/TooltipProvider.tsx

@@ -10,7 +10,7 @@ import {
 	delegate,
 	doAlign,
 } from '@clayui/shared';
-import React, {useCallback} from 'react';
+import React, {useCallback, useEffect, useReducer, useRef} from 'react';
 import warning from 'warning';
 
 import ClayTooltip from './Tooltip';
@@ -183,26 +183,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(
+}: IPropsWithChildren | IPropsWithScope) => {
+	const [{align, message = '', setAsHTML, show}, dispatch] = useReducer(
 		reducer,
 		initialState
 	);
 
 	// 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 +245,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);
@@ -262,8 +268,6 @@ const TooltipProvider: React.FunctionComponent<
 	}, []);
 
 	const handleShow = useCallback(({target}: {target: HTMLElement}) => {
-		targetRef.current = target;
-
 		const hasTitle =
 			target &&
 			(target.hasAttribute('title') || target.hasAttribute('data-title'));
@@ -273,6 +277,8 @@ const TooltipProvider: React.FunctionComponent<
 			: closestAncestor(target, '[title], [data-title]');
 
 		if (titleNode) {
+			targetRef.current = target;
+
 			target.addEventListener('click', handleHide);
 
 			const title =
@@ -290,6 +296,8 @@ const TooltipProvider: React.FunctionComponent<
 				'data-title-set-as-html'
 			);
 
+			clearTimeout(timeoutIdRef.current);
+
 			timeoutIdRef.current = setTimeout(
 				() => {
 					dispatch({
@@ -304,7 +312,7 @@ const TooltipProvider: React.FunctionComponent<
 		}
 	}, []);
 
-	React.useEffect(() => {
+	useEffect(() => {
 		const handleEsc = (event: KeyboardEvent) => {
 			if (show && event.key === Keys.Esc) {
 				event.stopImmediatePropagation();
@@ -318,13 +326,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,7 +347,7 @@ const TooltipProvider: React.FunctionComponent<
 		}
 	}, []);
 
-	React.useEffect(() => {
+	useEffect(() => {
 		if (
 			titleNodeRef.current &&
 			(tooltipRef as React.RefObject<HTMLDivElement>).current
@@ -393,32 +406,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,
-				  })}
 		</>
 	);
 };