@clayui/tooltip 3.49.0 → 3.56.0

package/README.md

@@ -0,0 +1,19 @@
+# `@clayui/tooltip`
+
+Tooltips are brief pieces of information that appear on hover state over an element to clarify its meaning or use for the user.
+
+-   [Documentation](https://clayui.com/docs/components/tooltip.html)
+-   [Changelog](./CHANGELOG.md)
+-   [Breaking change schedule](./BREAKING.md)
+
+## Install
+
+Run `yarn`
+
+```shell
+yarn add @clayui/tooltip
+```
+
+## Contribute
+
+We'd love to get contributions from you! Please, check our [Contributing Guidelines](https://github.com/liferay/clay/blob/master/CONTRIBUTING.md) to see how you can help us improve.

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,6 +32,11 @@ 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>;

package/lib/TooltipProvider.js

@@ -233,6 +233,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,

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.49.0",
+	"version": "3.56.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.49.0",
+		"@clayui/shared": "^3.56.0",
 		"classnames": "^2.2.6",
 		"warning": "^4.0.3"
 	},
@@ -38,5 +38,5 @@
 	"browserslist": [
 		"extends browserslist-config-clay"
 	],
-	"gitHead": "dc322a085c46b0d5746e682e8ad7c68866c975f4"
+	"gitHead": "1c33d9c709d8ce071862f0087c76ac23ce11465b"
 }

package/src/TooltipProvider.tsx

@@ -290,6 +290,8 @@ const TooltipProvider: React.FunctionComponent<
 				'data-title-set-as-html'
 			);
 
+			clearTimeout(timeoutIdRef.current);
+
 			timeoutIdRef.current = setTimeout(
 				() => {
 					dispatch({

package/README.mdx

@@ -1,45 +0,0 @@
----
-title: 'Tooltip'
-description: 'Tooltips are brief pieces of information that appear on hover state over an element to clarify its meaning or use for the user.'
-lexiconDefinition: 'https://liferay.design/lexicon/core-components/popovers-tooltips/'
-packageNpm: '@clayui/tooltip'
----
-
-import {
-	Tooltip,
-	TooltipProvider,
-	TooltipProviderRenderer,
-} from '$packages/clay-tooltip/docs/index';
-
-<div class="nav-toc-absolute">
-<div class="nav-toc">
-
--   [TooltipProvider](#tooltipprovider)
-    -   [contentRenderer](#contentrenderer)
-
-</div>
-</div>
-
-Simplest way of using Tooltip is by leveraging it's `show` prop and specifying `alignPosition` to determine it's position relative to the element it's aligned to.
-
-If you have multiple Tooltips on the page, [TooltipProvider](#tooltipprovider) allows you to only have to instantiate the component once and simply provide html attributes to the elements that need tooltips.
-
-<Tooltip />
-
-## TooltipProvider
-
-By using the `<TooltipProvider>` it allows you to add the desired tooltip content on each element as a data attribute.
-
-Here's a list of html attributes that you can provide to children elements of the TooltipProvider:
-
--   `title` is for the tooltip content.
--   `data-tooltip-align` is for alignment direction.
--   `data-tooltip-delay` is for the delay(ms) before showing the tooltip.
-
-<TooltipProvider />
-
-### contentRenderer
-
-`contentRenderer` prop gives you the ability to format the content passed to the Tooltip via the `title` attribute to meet your requirements.
-
-<TooltipProviderRenderer />