@clayui/tooltip 3.151.0 → 3.157.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -4
- package/lib/Tooltip.d.ts +3 -3
- package/lib/TooltipProvider.d.ts +4 -4
- package/lib/cjs/Tooltip.js +67 -30
- package/lib/cjs/TooltipProvider.js +173 -151
- package/lib/cjs/index.js +25 -22
- package/lib/cjs/useAlign.js +84 -58
- package/lib/cjs/useClosestTitle.js +79 -61
- package/lib/cjs/useTooltipState.js +34 -22
- package/lib/esm/Tooltip.js +39 -27
- package/lib/esm/TooltipProvider.js +142 -135
- package/lib/esm/index.js +8 -8
- package/lib/esm/useAlign.js +62 -50
- package/lib/esm/useClosestTitle.js +59 -55
- package/lib/esm/useTooltipState.js +12 -14
- package/lib/index.d.ts +2 -2
- package/lib/useAlign.d.ts +3 -3
- package/lib/useClosestTitle.d.ts +3 -3
- package/lib/useTooltipState.d.ts +2 -2
- package/package.json +33 -34
package/README.md
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Tooltips are brief pieces of information that appear on hover state over an element to clarify its meaning or use for the user.
|
|
4
4
|
|
|
5
|
-
-
|
|
6
|
-
-
|
|
7
|
-
-
|
|
5
|
+
- [Documentation](https://clayui.com/docs/components/tooltip.html)
|
|
6
|
+
- [Changelog](./CHANGELOG.md)
|
|
7
|
+
- [Breaking change schedule](./BREAKING.md)
|
|
8
8
|
|
|
9
9
|
## Install
|
|
10
10
|
|
|
@@ -16,4 +16,4 @@ yarn add @clayui/tooltip
|
|
|
16
16
|
|
|
17
17
|
## Contribute
|
|
18
18
|
|
|
19
|
-
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.
|
|
19
|
+
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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* SPDX-FileCopyrightText:
|
|
3
|
-
* SPDX-License-Identifier:
|
|
2
|
+
* SPDX-FileCopyrightText: (c) 2026 Liferay, Inc. https://liferay.com
|
|
3
|
+
* SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
|
|
4
4
|
*/
|
|
5
5
|
import React from 'react';
|
|
6
6
|
export declare const ALIGN_POSITIONS: readonly ["top", "top-left", "top-right", "bottom", "bottom-left", "bottom-right", "left", "right"];
|
|
@@ -8,7 +8,7 @@ interface IProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
8
8
|
/**
|
|
9
9
|
* Position in which the tooltip will be aligned to the element.
|
|
10
10
|
*/
|
|
11
|
-
alignPosition?: typeof ALIGN_POSITIONS[number];
|
|
11
|
+
alignPosition?: (typeof ALIGN_POSITIONS)[number];
|
|
12
12
|
/**
|
|
13
13
|
* Flag to indicate if tooltip is displayed.
|
|
14
14
|
*/
|
package/lib/TooltipProvider.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* SPDX-FileCopyrightText:
|
|
3
|
-
* SPDX-License-Identifier:
|
|
2
|
+
* SPDX-FileCopyrightText: (c) 2026 Liferay, Inc. https://liferay.com
|
|
3
|
+
* SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
|
|
4
4
|
*/
|
|
5
5
|
import { IPortalBaseProps } from '@clayui/shared';
|
|
6
6
|
import React from 'react';
|
|
@@ -13,6 +13,7 @@ declare type Props = {
|
|
|
13
13
|
* Flag to indicate if tooltip should automatically align based on the window
|
|
14
14
|
*/
|
|
15
15
|
autoAlign?: boolean;
|
|
16
|
+
children?: React.ReactElement;
|
|
16
17
|
/**
|
|
17
18
|
* Props to add to the `<ClayPortal/>`.
|
|
18
19
|
*/
|
|
@@ -25,7 +26,6 @@ declare type Props = {
|
|
|
25
26
|
* Delay in miliseconds before showing tooltip
|
|
26
27
|
*/
|
|
27
28
|
delay?: number;
|
|
28
|
-
children?: React.ReactElement;
|
|
29
29
|
/**
|
|
30
30
|
* CSS selector to scope provider to. All titles within this scope will be
|
|
31
31
|
* rendered in the tooltip. Titles outside of this scope will be styled
|
|
@@ -33,5 +33,5 @@ declare type Props = {
|
|
|
33
33
|
*/
|
|
34
34
|
scope?: string;
|
|
35
35
|
};
|
|
36
|
-
export declare
|
|
36
|
+
export declare function ClayTooltipProvider({ autoAlign, children, containerProps, contentRenderer, delay, scope, }: Props): React.JSX.Element;
|
|
37
37
|
export {};
|
package/lib/cjs/Tooltip.js
CHANGED
|
@@ -1,36 +1,73 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty
|
|
4
|
-
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var Tooltip_exports = {};
|
|
30
|
+
__export(Tooltip_exports, {
|
|
31
|
+
ALIGN_POSITIONS: () => ALIGN_POSITIONS,
|
|
32
|
+
Tooltip: () => Tooltip
|
|
5
33
|
});
|
|
6
|
-
|
|
7
|
-
var
|
|
8
|
-
var
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
34
|
+
module.exports = __toCommonJS(Tooltip_exports);
|
|
35
|
+
var import_classnames = __toESM(require("classnames"));
|
|
36
|
+
var import_react = __toESM(require("react"));
|
|
37
|
+
const ALIGN_POSITIONS = [
|
|
38
|
+
"top",
|
|
39
|
+
"top-left",
|
|
40
|
+
"top-right",
|
|
41
|
+
"bottom",
|
|
42
|
+
"bottom-left",
|
|
43
|
+
"bottom-right",
|
|
44
|
+
"left",
|
|
45
|
+
"right"
|
|
46
|
+
];
|
|
47
|
+
const Tooltip = import_react.default.forwardRef(
|
|
48
|
+
({
|
|
49
|
+
alignPosition = "bottom",
|
|
18
50
|
children,
|
|
19
51
|
className,
|
|
20
52
|
show,
|
|
21
53
|
...otherProps
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
}
|
|
36
|
-
|
|
54
|
+
}, ref) => {
|
|
55
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
56
|
+
"div",
|
|
57
|
+
{
|
|
58
|
+
className: (0, import_classnames.default)(
|
|
59
|
+
className,
|
|
60
|
+
"tooltip",
|
|
61
|
+
`clay-tooltip-${alignPosition}`,
|
|
62
|
+
{ show }
|
|
63
|
+
),
|
|
64
|
+
role: "tooltip",
|
|
65
|
+
...otherProps,
|
|
66
|
+
ref
|
|
67
|
+
},
|
|
68
|
+
/* @__PURE__ */ import_react.default.createElement("div", { className: "arrow" }),
|
|
69
|
+
/* @__PURE__ */ import_react.default.createElement("div", { className: "tooltip-inner" }, children)
|
|
70
|
+
);
|
|
71
|
+
}
|
|
72
|
+
);
|
|
73
|
+
Tooltip.displayName = "ClayTooltip";
|
|
@@ -1,44 +1,67 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty
|
|
4
|
-
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var TooltipProvider_exports = {};
|
|
30
|
+
__export(TooltipProvider_exports, {
|
|
31
|
+
ClayTooltipProvider: () => ClayTooltipProvider
|
|
5
32
|
});
|
|
6
|
-
exports
|
|
7
|
-
var
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
var
|
|
11
|
-
var
|
|
12
|
-
var
|
|
13
|
-
var
|
|
14
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
15
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
16
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
17
|
-
/**
|
|
18
|
-
* SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
|
|
19
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
20
|
-
*/
|
|
21
|
-
|
|
33
|
+
module.exports = __toCommonJS(TooltipProvider_exports);
|
|
34
|
+
var import_shared = require("@clayui/shared");
|
|
35
|
+
var import_react = __toESM(require("react"));
|
|
36
|
+
var import_warning = __toESM(require("warning"));
|
|
37
|
+
var import_Tooltip = require("./Tooltip");
|
|
38
|
+
var import_useAlign = require("./useAlign");
|
|
39
|
+
var import_useClosestTitle = require("./useClosestTitle");
|
|
40
|
+
var import_useTooltipState = require("./useTooltipState");
|
|
22
41
|
const initialState = {
|
|
23
|
-
align:
|
|
42
|
+
align: "top",
|
|
24
43
|
floating: false,
|
|
25
44
|
setAsHTML: false,
|
|
26
|
-
title:
|
|
45
|
+
title: ""
|
|
27
46
|
};
|
|
28
|
-
const TRIGGER_HIDE_EVENTS = [
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
47
|
+
const TRIGGER_HIDE_EVENTS = [
|
|
48
|
+
"dragstart",
|
|
49
|
+
"mouseout",
|
|
50
|
+
"mouseup",
|
|
51
|
+
"pointerup",
|
|
52
|
+
"touchend"
|
|
53
|
+
];
|
|
54
|
+
const TRIGGER_SHOW_EVENTS = [
|
|
55
|
+
"mouseover",
|
|
56
|
+
"mouseup",
|
|
57
|
+
"pointerdown",
|
|
58
|
+
"touchstart"
|
|
59
|
+
];
|
|
60
|
+
function reducer(state, { type, ...payload }) {
|
|
35
61
|
switch (type) {
|
|
36
|
-
case
|
|
37
|
-
return {
|
|
38
|
-
|
|
39
|
-
...payload
|
|
40
|
-
};
|
|
41
|
-
case 'reset':
|
|
62
|
+
case "update":
|
|
63
|
+
return { ...state, ...payload };
|
|
64
|
+
case "reset":
|
|
42
65
|
return {
|
|
43
66
|
...state,
|
|
44
67
|
align: initialState.align,
|
|
@@ -47,172 +70,171 @@ const reducer = (state, _ref) => {
|
|
|
47
70
|
default:
|
|
48
71
|
throw new TypeError();
|
|
49
72
|
}
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
} =
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
const
|
|
67
|
-
const {
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
const isHovered = (0, _react.useRef)(false);
|
|
72
|
-
const isFocused = (0, _react.useRef)(false);
|
|
73
|
-
const {
|
|
74
|
-
close,
|
|
75
|
-
isOpen,
|
|
76
|
-
open
|
|
77
|
-
} = (0, _useTooltipState.useTooltipState)({
|
|
78
|
-
delay
|
|
79
|
-
});
|
|
80
|
-
const {
|
|
81
|
-
forceHide,
|
|
82
|
-
getProps,
|
|
83
|
-
onHide,
|
|
84
|
-
target,
|
|
85
|
-
titleNode
|
|
86
|
-
} = (0, _useClosestTitle.useClosestTitle)({
|
|
87
|
-
forceHide: (0, _react.useCallback)(() => {
|
|
88
|
-
dispatch({
|
|
89
|
-
type: 'reset'
|
|
90
|
-
});
|
|
73
|
+
}
|
|
74
|
+
function ClayTooltipProvider({
|
|
75
|
+
autoAlign = true,
|
|
76
|
+
children,
|
|
77
|
+
containerProps = {},
|
|
78
|
+
contentRenderer = (props) => props.title,
|
|
79
|
+
delay = 600,
|
|
80
|
+
scope
|
|
81
|
+
}) {
|
|
82
|
+
const [{ align, floating, setAsHTML, title = "" }, dispatch] = (0, import_react.useReducer)(
|
|
83
|
+
reducer,
|
|
84
|
+
initialState
|
|
85
|
+
);
|
|
86
|
+
const tooltipRef = (0, import_react.useRef)(null);
|
|
87
|
+
const { getInteraction, isFocusVisible } = (0, import_shared.useInteractionFocus)();
|
|
88
|
+
const isHoveredRef = (0, import_react.useRef)(false);
|
|
89
|
+
const isFocusedRef = (0, import_react.useRef)(false);
|
|
90
|
+
const { close, isOpen, open } = (0, import_useTooltipState.useTooltipState)({ delay });
|
|
91
|
+
const { forceHide, getProps, onHide, target, titleNode } = (0, import_useClosestTitle.useClosestTitle)({
|
|
92
|
+
forceHide: (0, import_react.useCallback)(() => {
|
|
93
|
+
dispatch({ type: "reset" });
|
|
91
94
|
close();
|
|
92
95
|
}, []),
|
|
93
|
-
onClick: (0,
|
|
94
|
-
|
|
95
|
-
|
|
96
|
+
onClick: (0, import_react.useCallback)(() => {
|
|
97
|
+
isFocusedRef.current = false;
|
|
98
|
+
isHoveredRef.current = false;
|
|
96
99
|
}, []),
|
|
97
|
-
onHide: (0,
|
|
98
|
-
if (!
|
|
99
|
-
dispatch({
|
|
100
|
-
type: 'reset'
|
|
101
|
-
});
|
|
100
|
+
onHide: (0, import_react.useCallback)(() => {
|
|
101
|
+
if (!isHoveredRef.current && !isFocusedRef.current) {
|
|
102
|
+
dispatch({ type: "reset" });
|
|
102
103
|
close();
|
|
103
104
|
}
|
|
104
105
|
}, []),
|
|
105
106
|
tooltipRef
|
|
106
107
|
});
|
|
107
|
-
(0,
|
|
108
|
+
(0, import_useAlign.useAlign)({
|
|
108
109
|
align,
|
|
109
110
|
autoAlign,
|
|
110
111
|
floating,
|
|
111
112
|
isOpen,
|
|
112
|
-
onAlign: (0,
|
|
113
|
-
align,
|
|
114
|
-
type: 'update'
|
|
115
|
-
}), []),
|
|
113
|
+
onAlign: (0, import_react.useCallback)((align2) => dispatch({ align: align2, type: "update" }), []),
|
|
116
114
|
sourceElement: tooltipRef,
|
|
117
115
|
targetElement: titleNode,
|
|
118
116
|
title
|
|
119
117
|
});
|
|
120
|
-
const onShow = (0,
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
118
|
+
const onShow = (0, import_react.useCallback)(
|
|
119
|
+
(event) => {
|
|
120
|
+
if (isHoveredRef.current || isFocusedRef.current) {
|
|
121
|
+
const props = getProps(event, isHoveredRef.current);
|
|
122
|
+
if (props) {
|
|
123
|
+
dispatch({
|
|
124
|
+
align: props.align ?? align,
|
|
125
|
+
floating: props.floating,
|
|
126
|
+
setAsHTML: props.setAsHTML,
|
|
127
|
+
title: props.title,
|
|
128
|
+
type: "update"
|
|
129
|
+
});
|
|
130
|
+
open(
|
|
131
|
+
isFocusedRef.current,
|
|
132
|
+
props.delay ? Number(props.delay) : void 0
|
|
133
|
+
);
|
|
134
|
+
}
|
|
132
135
|
}
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
136
|
+
},
|
|
137
|
+
[align]
|
|
138
|
+
);
|
|
139
|
+
(0, import_react.useEffect)(() => {
|
|
140
|
+
const handleEsc = (event) => {
|
|
141
|
+
if (isOpen && event.key === import_shared.Keys.Esc) {
|
|
138
142
|
event.stopImmediatePropagation();
|
|
139
143
|
forceHide();
|
|
140
144
|
}
|
|
141
145
|
};
|
|
142
|
-
document.addEventListener(
|
|
143
|
-
return () => document.removeEventListener(
|
|
146
|
+
document.addEventListener("keyup", handleEsc, true);
|
|
147
|
+
return () => document.removeEventListener("keyup", handleEsc, true);
|
|
144
148
|
}, [isOpen]);
|
|
145
|
-
const onHoverStart = event => {
|
|
146
|
-
if (getInteraction() ===
|
|
147
|
-
|
|
149
|
+
const onHoverStart = (event) => {
|
|
150
|
+
if (getInteraction() === "pointer") {
|
|
151
|
+
isHoveredRef.current = true;
|
|
148
152
|
} else {
|
|
149
|
-
|
|
153
|
+
isHoveredRef.current = false;
|
|
150
154
|
}
|
|
151
155
|
onShow(event);
|
|
152
156
|
};
|
|
153
|
-
const onHoverEnd = event => {
|
|
154
|
-
|
|
155
|
-
|
|
157
|
+
const onHoverEnd = (event) => {
|
|
158
|
+
isFocusedRef.current = false;
|
|
159
|
+
isHoveredRef.current = false;
|
|
156
160
|
onHide(event);
|
|
157
161
|
};
|
|
158
|
-
const onFocus = event => {
|
|
162
|
+
const onFocus = (event) => {
|
|
159
163
|
if (isFocusVisible()) {
|
|
160
|
-
|
|
164
|
+
isFocusedRef.current = true;
|
|
161
165
|
onShow(event);
|
|
162
166
|
}
|
|
163
167
|
};
|
|
164
|
-
const onBlur = event => {
|
|
165
|
-
|
|
166
|
-
|
|
168
|
+
const onBlur = (event) => {
|
|
169
|
+
isFocusedRef.current = false;
|
|
170
|
+
isHoveredRef.current = false;
|
|
167
171
|
onHide(event);
|
|
168
172
|
};
|
|
169
|
-
(0,
|
|
173
|
+
(0, import_react.useEffect)(() => {
|
|
170
174
|
if (scope) {
|
|
171
|
-
const disposeShowEvents = TRIGGER_SHOW_EVENTS.map(
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
const
|
|
175
|
+
const disposeShowEvents = TRIGGER_SHOW_EVENTS.map(
|
|
176
|
+
(eventName) => (0, import_shared.delegate)(document.body, eventName, scope, onHoverStart)
|
|
177
|
+
);
|
|
178
|
+
const disposeHideEvents = TRIGGER_HIDE_EVENTS.map(
|
|
179
|
+
(eventName) => (0, import_shared.delegate)(
|
|
180
|
+
document.body,
|
|
181
|
+
eventName,
|
|
182
|
+
`${scope}, .tooltip`,
|
|
183
|
+
onHoverEnd
|
|
184
|
+
)
|
|
185
|
+
);
|
|
186
|
+
const disposeShowFocus = (0, import_shared.delegate)(
|
|
187
|
+
document.body,
|
|
188
|
+
"focus",
|
|
189
|
+
`${scope}, .tooltip`,
|
|
190
|
+
onFocus,
|
|
191
|
+
true
|
|
192
|
+
);
|
|
193
|
+
const disposeCloseBlur = (0, import_shared.delegate)(
|
|
194
|
+
document.body,
|
|
195
|
+
"blur",
|
|
196
|
+
`${scope}, .tooltip`,
|
|
197
|
+
onBlur,
|
|
198
|
+
true
|
|
199
|
+
);
|
|
175
200
|
return () => {
|
|
176
|
-
disposeShowEvents.forEach(
|
|
177
|
-
|
|
178
|
-
dispose
|
|
179
|
-
} = _ref3;
|
|
180
|
-
return dispose();
|
|
181
|
-
});
|
|
182
|
-
disposeHideEvents.forEach(_ref4 => {
|
|
183
|
-
let {
|
|
184
|
-
dispose
|
|
185
|
-
} = _ref4;
|
|
186
|
-
return dispose();
|
|
187
|
-
});
|
|
201
|
+
disposeShowEvents.forEach(({ dispose }) => dispose());
|
|
202
|
+
disposeHideEvents.forEach(({ dispose }) => dispose());
|
|
188
203
|
disposeShowFocus.dispose();
|
|
189
204
|
disposeCloseBlur.dispose();
|
|
190
205
|
};
|
|
191
206
|
}
|
|
192
207
|
}, [onShow]);
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
208
|
+
(0, import_warning.default)(
|
|
209
|
+
typeof children === "undefined" && typeof scope !== "undefined" || typeof scope === "undefined" && typeof children !== "undefined",
|
|
210
|
+
"<TooltipProvider />: You must use at least one of the following props: `children` or `scope`."
|
|
211
|
+
);
|
|
212
|
+
(0, import_warning.default)(
|
|
213
|
+
typeof children !== "undefined" || typeof scope !== "undefined",
|
|
214
|
+
"<TooltipProvider />: If you want to use `scope`, use <TooltipProvider /> as a singleton and do not pass `children`."
|
|
215
|
+
);
|
|
216
|
+
(0, import_warning.default)(
|
|
217
|
+
children?.type !== import_react.default.Fragment,
|
|
218
|
+
"<TooltipProvider />: React Fragment is not allowed as a child to TooltipProvider. Child must be a single HTML element that accepts `onMouseOver` and `onMouseOut`."
|
|
219
|
+
);
|
|
196
220
|
const titleContent = contentRenderer({
|
|
197
221
|
targetNode: target.current,
|
|
198
222
|
title
|
|
199
223
|
});
|
|
200
|
-
const tooltip = isOpen &&
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
__html: titleContent
|
|
224
|
+
const tooltip = isOpen && /* @__PURE__ */ import_react.default.createElement(import_shared.ClayPortal, { ...containerProps }, /* @__PURE__ */ import_react.default.createElement(import_Tooltip.Tooltip, { alignPosition: align, ref: tooltipRef, show: true }, setAsHTML && typeof titleContent === "string" ? /* @__PURE__ */ import_react.default.createElement(
|
|
225
|
+
"span",
|
|
226
|
+
{
|
|
227
|
+
dangerouslySetInnerHTML: {
|
|
228
|
+
__html: titleContent
|
|
229
|
+
}
|
|
207
230
|
}
|
|
208
|
-
|
|
209
|
-
return
|
|
231
|
+
) : titleContent));
|
|
232
|
+
return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, scope ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, tooltip, children) : children && import_react.default.cloneElement(children, {
|
|
210
233
|
...children.props,
|
|
211
|
-
children:
|
|
234
|
+
children: /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, children.props.children, tooltip),
|
|
212
235
|
onBlur,
|
|
213
236
|
onFocus,
|
|
214
237
|
onMouseOut: onHoverEnd,
|
|
215
238
|
onMouseOver: onHoverStart
|
|
216
239
|
}));
|
|
217
|
-
}
|
|
218
|
-
exports.ClayTooltipProvider = ClayTooltipProvider;
|
|
240
|
+
}
|
package/lib/cjs/index.js
CHANGED
|
@@ -1,25 +1,28 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
return _Tooltip.Tooltip;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
15
|
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var src_exports = {};
|
|
20
|
+
__export(src_exports, {
|
|
21
|
+
ClayTooltipProvider: () => import_TooltipProvider.ClayTooltipProvider,
|
|
22
|
+
Tooltip: () => import_Tooltip.Tooltip,
|
|
23
|
+
default: () => src_default
|
|
17
24
|
});
|
|
18
|
-
exports
|
|
19
|
-
var
|
|
20
|
-
var
|
|
21
|
-
|
|
22
|
-
* SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
|
|
23
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
24
|
-
*/
|
|
25
|
-
var _default = exports.default = _Tooltip.Tooltip;
|
|
25
|
+
module.exports = __toCommonJS(src_exports);
|
|
26
|
+
var import_Tooltip = require("./Tooltip");
|
|
27
|
+
var import_TooltipProvider = require("./TooltipProvider");
|
|
28
|
+
var src_default = import_Tooltip.Tooltip;
|