@rescui/tooltip 0.8.10 → 0.8.12
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/lib/index.css +23 -23
- package/lib/index.p.module.css.js +7 -7
- package/lib/tooltip.js +52 -44
- package/package.json +4 -4
package/lib/index.css
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
.
|
|
1
|
+
._tooltip_1e7ak2w_5{
|
|
2
2
|
position:relative;
|
|
3
3
|
}
|
|
4
|
-
.
|
|
4
|
+
._closing_1e7ak2w_9{
|
|
5
5
|
pointer-events:none;
|
|
6
6
|
}
|
|
7
|
-
.
|
|
7
|
+
._content_1e7ak2w_13{
|
|
8
8
|
--rs-theme-dark:1;
|
|
9
9
|
--_rs-tooltip-border-width:1px;
|
|
10
10
|
|
|
@@ -83,35 +83,35 @@
|
|
|
83
83
|
-webkit-transform:translate(0, 0);
|
|
84
84
|
transform:translate(0, 0);
|
|
85
85
|
}
|
|
86
|
-
[data-real-placement='top-end'] .
|
|
87
|
-
[data-real-placement='bottom-end'] .
|
|
86
|
+
[data-real-placement='top-end'] ._content_1e7ak2w_13,
|
|
87
|
+
[data-real-placement='bottom-end'] ._content_1e7ak2w_13{
|
|
88
88
|
margin-right:0;
|
|
89
89
|
}
|
|
90
|
-
[data-real-placement='top-start'] .
|
|
91
|
-
[data-real-placement='bottom-start'] .
|
|
90
|
+
[data-real-placement='top-start'] ._content_1e7ak2w_13,
|
|
91
|
+
[data-real-placement='bottom-start'] ._content_1e7ak2w_13{
|
|
92
92
|
margin-left:0;
|
|
93
93
|
}
|
|
94
|
-
[data-real-placement='left-end'] .
|
|
95
|
-
[data-real-placement='right-end'] .
|
|
94
|
+
[data-real-placement='left-end'] ._content_1e7ak2w_13,
|
|
95
|
+
[data-real-placement='right-end'] ._content_1e7ak2w_13{
|
|
96
96
|
margin-bottom:0;
|
|
97
97
|
}
|
|
98
|
-
[data-real-placement='left-start'] .
|
|
99
|
-
[data-real-placement='right-start'] .
|
|
98
|
+
[data-real-placement='left-start'] ._content_1e7ak2w_13,
|
|
99
|
+
[data-real-placement='right-start'] ._content_1e7ak2w_13{
|
|
100
100
|
margin-top:0;
|
|
101
101
|
}
|
|
102
|
-
.
|
|
102
|
+
._initial_1e7ak2w_54 ._content_1e7ak2w_13{
|
|
103
103
|
-webkit-transition:none;
|
|
104
104
|
transition:none;
|
|
105
105
|
}
|
|
106
|
-
.
|
|
106
|
+
._closing_1e7ak2w_9 ._content_1e7ak2w_13{
|
|
107
107
|
-webkit-transition-duration:200ms, 200ms;
|
|
108
108
|
transition-duration:200ms, 200ms;
|
|
109
109
|
}
|
|
110
|
-
.
|
|
111
|
-
.
|
|
110
|
+
._initial_1e7ak2w_54 ._content_1e7ak2w_13,
|
|
111
|
+
._closing_1e7ak2w_9 ._content_1e7ak2w_13{
|
|
112
112
|
opacity:0;
|
|
113
113
|
}
|
|
114
|
-
.
|
|
114
|
+
._outerThemeLight_1e7ak2w_68 ._content_1e7ak2w_13{
|
|
115
115
|
--rs-color-primary-dark-theme:var(--rs-color-primary-light-theme);
|
|
116
116
|
--rs-color-primary-dim-dark-theme:var(--rs-color-primary-dim-light-theme);
|
|
117
117
|
--rs-color-primary-fog-dark-theme:var(--rs-color-primary-fog-light-theme);
|
|
@@ -122,7 +122,7 @@
|
|
|
122
122
|
--rs-color-primary-t-fog-light-theme
|
|
123
123
|
);
|
|
124
124
|
}
|
|
125
|
-
.
|
|
125
|
+
._outerThemeDark_1e7ak2w_81 ._content_1e7ak2w_13{
|
|
126
126
|
--rs-color-primary-light-theme:var(--rs-color-primary-dark-theme);
|
|
127
127
|
--rs-color-primary-dim-light-theme:var(--rs-color-primary-dim-dark-theme);
|
|
128
128
|
--rs-color-primary-fog-light-theme:var(--rs-color-primary-fog-dark-theme);
|
|
@@ -133,24 +133,24 @@
|
|
|
133
133
|
--rs-color-primary-t-fog-dark-theme
|
|
134
134
|
);
|
|
135
135
|
}
|
|
136
|
-
.
|
|
136
|
+
._initial_1e7ak2w_54[data-real-placement^='top'] ._content_1e7ak2w_13, ._closing_1e7ak2w_9[data-real-placement^='top'] ._content_1e7ak2w_13{
|
|
137
137
|
-webkit-transform:translate(0, 10px);
|
|
138
138
|
transform:translate(0, 10px);
|
|
139
139
|
}
|
|
140
|
-
.
|
|
140
|
+
._initial_1e7ak2w_54[data-real-placement^='right'] ._content_1e7ak2w_13, ._closing_1e7ak2w_9[data-real-placement^='right'] ._content_1e7ak2w_13{
|
|
141
141
|
-webkit-transform:translate(-10px, 0);
|
|
142
142
|
transform:translate(-10px, 0);
|
|
143
143
|
}
|
|
144
|
-
.
|
|
144
|
+
._initial_1e7ak2w_54[data-real-placement^='bottom'] ._content_1e7ak2w_13, ._closing_1e7ak2w_9[data-real-placement^='bottom'] ._content_1e7ak2w_13{
|
|
145
145
|
-webkit-transform:translate(0, -10px);
|
|
146
146
|
transform:translate(0, -10px);
|
|
147
147
|
}
|
|
148
|
-
.
|
|
148
|
+
._initial_1e7ak2w_54[data-real-placement^='left'] ._content_1e7ak2w_13, ._closing_1e7ak2w_9[data-real-placement^='left'] ._content_1e7ak2w_13{
|
|
149
149
|
-webkit-transform:translate(10px, 0);
|
|
150
150
|
transform:translate(10px, 0);
|
|
151
151
|
}
|
|
152
|
-
.
|
|
153
|
-
.
|
|
152
|
+
._trigger_1e7ak2w_113:focus-visible,
|
|
153
|
+
._trigger_1e7ak2w_113:focus[data-focus-method='key']{
|
|
154
154
|
outline:none;
|
|
155
155
|
|
|
156
156
|
-webkit-box-shadow:var(--rs-color-primary-t-dim-light-theme) 0 0 0 4px;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
var styles = {
|
|
2
|
-
"tooltip": "
|
|
3
|
-
"closing": "
|
|
4
|
-
"content": "
|
|
5
|
-
"initial": "
|
|
6
|
-
"outerThemeLight": "
|
|
7
|
-
"outerThemeDark": "
|
|
8
|
-
"trigger": "
|
|
2
|
+
"tooltip": "_tooltip_1e7ak2w_5",
|
|
3
|
+
"closing": "_closing_1e7ak2w_9",
|
|
4
|
+
"content": "_content_1e7ak2w_13",
|
|
5
|
+
"initial": "_initial_1e7ak2w_54",
|
|
6
|
+
"outerThemeLight": "_outerThemeLight_1e7ak2w_68",
|
|
7
|
+
"outerThemeDark": "_outerThemeDark_1e7ak2w_81",
|
|
8
|
+
"trigger": "_trigger_1e7ak2w_113"
|
|
9
9
|
};
|
|
10
10
|
export { styles as default };
|
package/lib/tooltip.js
CHANGED
|
@@ -17,7 +17,7 @@ import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/ins
|
|
|
17
17
|
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
|
|
18
18
|
import "core-js/modules/es.object.to-string.js";
|
|
19
19
|
import "core-js/modules/web.dom-collections.for-each.js";
|
|
20
|
-
import React, {
|
|
20
|
+
import React, { cloneElement, createElement, useState, useRef, useEffect, useCallback, useContext, isValidElement } from 'react';
|
|
21
21
|
import { Element, ForwardRef, typeOf } from 'react-is';
|
|
22
22
|
import cn from 'classnames';
|
|
23
23
|
import PropTypes from 'prop-types';
|
|
@@ -64,11 +64,10 @@ var OUTER_THEME_STYLES = {
|
|
|
64
64
|
light: styles.outerThemeLight,
|
|
65
65
|
dark: styles.outerThemeDark
|
|
66
66
|
};
|
|
67
|
-
var TriggerRenderer = /*#__PURE__*/React.forwardRef(function (_ref2,
|
|
68
|
-
var _context;
|
|
67
|
+
var TriggerRenderer = /*#__PURE__*/React.forwardRef(function (_ref2, _ref3) {
|
|
68
|
+
var _children$ref, _children$props, _context;
|
|
69
69
|
|
|
70
|
-
var
|
|
71
|
-
setTriggerRef = _ref2.setTriggerRef,
|
|
70
|
+
var setTriggerRef = _ref2.setTriggerRef,
|
|
72
71
|
targetComponent = _ref2.targetComponent,
|
|
73
72
|
isControlled = _ref2.isControlled,
|
|
74
73
|
handleMouseEnterTarget = _ref2.handleMouseEnterTarget,
|
|
@@ -81,18 +80,28 @@ var TriggerRenderer = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
|
|
|
81
80
|
onBlur: handleMouseLeaveTarget,
|
|
82
81
|
tabIndex: 0
|
|
83
82
|
} : {};
|
|
84
|
-
|
|
85
|
-
if (!ref) return;
|
|
86
|
-
|
|
87
|
-
if (typeof ref === 'function') {
|
|
88
|
-
ref(triggerRef);
|
|
89
|
-
} else {
|
|
90
|
-
ref.current = triggerRef;
|
|
91
|
-
}
|
|
92
|
-
}, [ref, triggerRef]);
|
|
83
|
+
var childrenRef = (_children$ref = children === null || children === void 0 ? void 0 : children.ref) !== null && _children$ref !== void 0 ? _children$ref : children === null || children === void 0 ? void 0 : (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.ref;
|
|
93
84
|
|
|
94
85
|
var tooltipTargetProps = _Object$assign({}, {
|
|
95
|
-
ref:
|
|
86
|
+
ref: function ref(el) {
|
|
87
|
+
setTriggerRef(el);
|
|
88
|
+
|
|
89
|
+
if (childrenRef) {
|
|
90
|
+
if (typeof childrenRef === 'function') {
|
|
91
|
+
childrenRef(el);
|
|
92
|
+
} else {
|
|
93
|
+
childrenRef.current = el;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
if (_ref3) {
|
|
98
|
+
if (typeof _ref3 === 'function') {
|
|
99
|
+
_ref3(el);
|
|
100
|
+
} else {
|
|
101
|
+
_ref3.current = el;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
}
|
|
96
105
|
}, eventListeners);
|
|
97
106
|
|
|
98
107
|
if (typeof children === 'function') {
|
|
@@ -112,21 +121,21 @@ var TriggerRenderer = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
|
|
|
112
121
|
});
|
|
113
122
|
TriggerRenderer.displayName = 'TriggerRenderer';
|
|
114
123
|
|
|
115
|
-
var Tooltip = function Tooltip(
|
|
116
|
-
var children =
|
|
117
|
-
|
|
118
|
-
targetComponent =
|
|
119
|
-
content =
|
|
120
|
-
className =
|
|
121
|
-
isVisibleFromProps =
|
|
122
|
-
modifiers =
|
|
123
|
-
|
|
124
|
-
placement =
|
|
125
|
-
|
|
126
|
-
sparse =
|
|
127
|
-
|
|
128
|
-
fallbackPlacements =
|
|
129
|
-
disableHideDelay =
|
|
124
|
+
var Tooltip = function Tooltip(_ref4) {
|
|
125
|
+
var children = _ref4.children,
|
|
126
|
+
_ref4$targetComponent = _ref4.targetComponent,
|
|
127
|
+
targetComponent = _ref4$targetComponent === void 0 ? 'span' : _ref4$targetComponent,
|
|
128
|
+
content = _ref4.content,
|
|
129
|
+
className = _ref4.className,
|
|
130
|
+
isVisibleFromProps = _ref4.isVisible,
|
|
131
|
+
modifiers = _ref4.modifiers,
|
|
132
|
+
_ref4$placement = _ref4.placement,
|
|
133
|
+
placement = _ref4$placement === void 0 ? 'auto' : _ref4$placement,
|
|
134
|
+
_ref4$sparse = _ref4.sparse,
|
|
135
|
+
sparse = _ref4$sparse === void 0 ? true : _ref4$sparse,
|
|
136
|
+
_ref4$fallbackPlaceme = _ref4.fallbackPlacements,
|
|
137
|
+
fallbackPlacements = _ref4$fallbackPlaceme === void 0 ? ['top', 'bottom'] : _ref4$fallbackPlaceme,
|
|
138
|
+
disableHideDelay = _ref4.disableHideDelay;
|
|
130
139
|
|
|
131
140
|
var _useState = useState(null),
|
|
132
141
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -189,8 +198,8 @@ var Tooltip = function Tooltip(_ref3) {
|
|
|
189
198
|
setIsInitial(true);
|
|
190
199
|
}
|
|
191
200
|
}, [isExists]);
|
|
192
|
-
var disableInitialFlag = useCallback(function (
|
|
193
|
-
var state =
|
|
201
|
+
var disableInitialFlag = useCallback(function (_ref5) {
|
|
202
|
+
var state = _ref5.state;
|
|
194
203
|
var el = state.elements.popper; // force layout phase
|
|
195
204
|
// to make sure that the dom has registered the initial
|
|
196
205
|
// styles with resolved placement (for `auto` placement)
|
|
@@ -217,15 +226,14 @@ var Tooltip = function Tooltip(_ref3) {
|
|
|
217
226
|
noProvider = _useContext.noProvider;
|
|
218
227
|
|
|
219
228
|
var theme = noProvider ? themeFromCss : themeFromContext;
|
|
220
|
-
return /*#__PURE__*/React.createElement(LayeringConsumer, null, function (
|
|
229
|
+
return /*#__PURE__*/React.createElement(LayeringConsumer, null, function (_ref6) {
|
|
221
230
|
var _context2;
|
|
222
231
|
|
|
223
|
-
var tooltipZIndex =
|
|
224
|
-
return /*#__PURE__*/React.createElement(Manager, null, /*#__PURE__*/React.createElement(Reference, null, function (
|
|
225
|
-
var ref =
|
|
232
|
+
var tooltipZIndex = _ref6.tooltipZIndex;
|
|
233
|
+
return /*#__PURE__*/React.createElement(Manager, null, /*#__PURE__*/React.createElement(Reference, null, function (_ref7) {
|
|
234
|
+
var ref = _ref7.ref;
|
|
226
235
|
return /*#__PURE__*/React.createElement(TriggerRenderer, {
|
|
227
236
|
ref: ref,
|
|
228
|
-
triggerRef: triggerRef,
|
|
229
237
|
setTriggerRef: setTriggerRef,
|
|
230
238
|
targetComponent: targetComponent,
|
|
231
239
|
isControlled: isControlled,
|
|
@@ -249,8 +257,8 @@ var Tooltip = function Tooltip(_ref3) {
|
|
|
249
257
|
}, {
|
|
250
258
|
name: 'offset',
|
|
251
259
|
options: {
|
|
252
|
-
offset: function offset(
|
|
253
|
-
var offsetPlacement =
|
|
260
|
+
offset: function offset(_ref8) {
|
|
261
|
+
var offsetPlacement = _ref8.placement;
|
|
254
262
|
|
|
255
263
|
if (_includesInstanceProperty(offsetPlacement).call(offsetPlacement, 'left') || _includesInstanceProperty(offsetPlacement).call(offsetPlacement, 'right')) {
|
|
256
264
|
return [0, sparse ? 16 : 8];
|
|
@@ -260,11 +268,11 @@ var Tooltip = function Tooltip(_ref3) {
|
|
|
260
268
|
}
|
|
261
269
|
}
|
|
262
270
|
}]).call(_context2, _toConsumableArray(modifiers || []))
|
|
263
|
-
}, function (
|
|
264
|
-
var ref =
|
|
265
|
-
style =
|
|
266
|
-
update =
|
|
267
|
-
realPlacement =
|
|
271
|
+
}, function (_ref9) {
|
|
272
|
+
var ref = _ref9.ref,
|
|
273
|
+
style = _ref9.style,
|
|
274
|
+
update = _ref9.update,
|
|
275
|
+
realPlacement = _ref9.placement;
|
|
268
276
|
schedulePopperUpdateRef.current = update;
|
|
269
277
|
return /*#__PURE__*/React.createElement("span", {
|
|
270
278
|
className: cn(styles.tooltip, isInitial && styles.initial, isClosing && styles.closing, OUTER_THEME_STYLES[theme], className),
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rescui/tooltip",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.12",
|
|
4
4
|
"description": "",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "JetBrains",
|
|
@@ -29,14 +29,14 @@
|
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"@rescui/colors": "^0.2.5",
|
|
32
|
-
"@rescui/icons": "^0.16.
|
|
32
|
+
"@rescui/icons": "^0.16.10",
|
|
33
33
|
"@rescui/scripts": "^0.3.4",
|
|
34
|
-
"@rescui/typography": "^0.
|
|
34
|
+
"@rescui/typography": "^0.19.0",
|
|
35
35
|
"@types/react-is": "^17.0.3"
|
|
36
36
|
},
|
|
37
37
|
"scripts": {
|
|
38
38
|
"build": "rescui-scripts build"
|
|
39
39
|
},
|
|
40
40
|
"nx": {},
|
|
41
|
-
"gitHead": "
|
|
41
|
+
"gitHead": "69a84812628809943698f0b27643c83dc449f119"
|
|
42
42
|
}
|