@rescui/tooltip 0.8.13 → 0.8.14

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.
Files changed (7) hide show
  1. package/lib/css-vars-utils.js +8 -9
  2. package/lib/index.css +30 -46
  3. package/lib/index.js +1 -1
  4. package/lib/index.p.module.css.js +7 -7
  5. package/lib/tooltip.js +107 -134
  6. package/lib/use-tooltip-state.js +9 -15
  7. package/package.json +7 -8
package/lib/css-vars-utils.js CHANGED
@@ -1,9 +1,8 @@
1
- import "core-js/modules/es.object.to-string.js";
2
- var PRIMARY_COLORS = ['--rs-color-primary-light-theme', '--rs-color-primary-dim-light-theme', '--rs-color-primary-fog-light-theme', '--rs-color-primary-t-dim-light-theme', '--rs-color-primary-t-fog-light-theme', '--rs-color-primary-dark-theme', '--rs-color-primary-dim-dark-theme', '--rs-color-primary-fog-dark-theme', '--rs-color-primary-t-dim-dark-theme', '--rs-color-primary-t-fog-dark-theme'];
1
+ const PRIMARY_COLORS = ['--rs-color-primary-light-theme', '--rs-color-primary-dim-light-theme', '--rs-color-primary-fog-light-theme', '--rs-color-primary-t-dim-light-theme', '--rs-color-primary-t-fog-light-theme', '--rs-color-primary-dark-theme', '--rs-color-primary-dim-dark-theme', '--rs-color-primary-fog-dark-theme', '--rs-color-primary-t-dim-dark-theme', '--rs-color-primary-t-fog-dark-theme'];
3
2
 
4
- var extractPrimaryColors = function extractPrimaryColors(styles) {
5
- var colors = {};
6
- PRIMARY_COLORS.forEach(function (varName) {
3
+ const extractPrimaryColors = styles => {
4
+ const colors = {};
5
+ PRIMARY_COLORS.forEach(varName => {
7
6
  colors[varName] = styles.getPropertyValue(varName) || 'initial';
8
7
  });
9
8
  return colors;
@@ -11,10 +10,10 @@ var extractPrimaryColors = function extractPrimaryColors(styles) {
11
10
  /** Check out `@rescui/colors/src/public-api.p.css` file */
12
11
 
13
12
 
14
- var extractThemeFromCss = function extractThemeFromCss(styles) {
15
- var themeDark = parseInt(styles.getPropertyValue('--rs-theme-dark'), 10) || 0;
16
- var themeFlip = parseInt(styles.getPropertyValue('--rs-theme-flip'), 10) || 0;
17
- var themeDarkCoefficient = themeDark * (1 - themeFlip) + themeFlip * (1 - themeDark);
13
+ const extractThemeFromCss = styles => {
14
+ const themeDark = parseInt(styles.getPropertyValue('--rs-theme-dark'), 10) || 0;
15
+ const themeFlip = parseInt(styles.getPropertyValue('--rs-theme-flip'), 10) || 0;
16
+ const themeDarkCoefficient = themeDark * (1 - themeFlip) + themeFlip * (1 - themeDark);
18
17
  return themeDarkCoefficient === 1 ? 'dark' : 'light';
19
18
  };
20
19
 
package/lib/index.css CHANGED
@@ -1,10 +1,10 @@
1
- ._tooltip_fjc7n1_5{
1
+ ._tooltip_1fo5jum_5{
2
2
  position:relative;
3
3
  }
4
- ._closing_fjc7n1_9{
4
+ ._closing_1fo5jum_9{
5
5
  pointer-events:none;
6
6
  }
7
- ._content_fjc7n1_13{
7
+ ._content_1fo5jum_13{
8
8
  --rs-theme-dark:1;
9
9
  --_rs-tooltip-border-width:1px;
10
10
 
@@ -28,7 +28,6 @@
28
28
  font-weight:var(--_rs-typography-font-weight);
29
29
  line-height:var(--_rs-typography-line-height);
30
30
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
31
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
32
31
  font-feature-settings:'kern', 'liga', 'calt';
33
32
  --_rs-typography-letter-spacing:0.0045em;
34
33
  --_rs-typography-text-transform:initial;
@@ -73,45 +72,36 @@
73
72
  color:#FFFFFF;
74
73
  background-color:#303033;
75
74
 
76
- -webkit-transition:opacity 300ms, -webkit-transform 300ms;
77
-
78
- transition:opacity 300ms, -webkit-transform 300ms;
79
-
80
75
  transition:opacity 300ms, transform 300ms;
81
-
82
- transition:opacity 300ms, transform 300ms, -webkit-transform 300ms;
83
- -webkit-transform:translate(0, 0);
84
- transform:translate(0, 0);
76
+ transform:translate(0, 0);
85
77
  }
86
- [data-real-placement='top-end'] ._content_fjc7n1_13,
87
- [data-real-placement='bottom-end'] ._content_fjc7n1_13{
78
+ [data-real-placement='top-end'] ._content_1fo5jum_13,
79
+ [data-real-placement='bottom-end'] ._content_1fo5jum_13{
88
80
  margin-right:0;
89
81
  }
90
- [data-real-placement='top-start'] ._content_fjc7n1_13,
91
- [data-real-placement='bottom-start'] ._content_fjc7n1_13{
82
+ [data-real-placement='top-start'] ._content_1fo5jum_13,
83
+ [data-real-placement='bottom-start'] ._content_1fo5jum_13{
92
84
  margin-left:0;
93
85
  }
94
- [data-real-placement='left-end'] ._content_fjc7n1_13,
95
- [data-real-placement='right-end'] ._content_fjc7n1_13{
86
+ [data-real-placement='left-end'] ._content_1fo5jum_13,
87
+ [data-real-placement='right-end'] ._content_1fo5jum_13{
96
88
  margin-bottom:0;
97
89
  }
98
- [data-real-placement='left-start'] ._content_fjc7n1_13,
99
- [data-real-placement='right-start'] ._content_fjc7n1_13{
90
+ [data-real-placement='left-start'] ._content_1fo5jum_13,
91
+ [data-real-placement='right-start'] ._content_1fo5jum_13{
100
92
  margin-top:0;
101
93
  }
102
- ._initial_fjc7n1_54 ._content_fjc7n1_13{
103
- -webkit-transition:none;
94
+ ._initial_1fo5jum_54 ._content_1fo5jum_13{
104
95
  transition:none;
105
96
  }
106
- ._closing_fjc7n1_9 ._content_fjc7n1_13{
107
- -webkit-transition-duration:200ms, 200ms;
108
- transition-duration:200ms, 200ms;
97
+ ._closing_1fo5jum_9 ._content_1fo5jum_13{
98
+ transition-duration:200ms, 200ms;
109
99
  }
110
- ._initial_fjc7n1_54 ._content_fjc7n1_13,
111
- ._closing_fjc7n1_9 ._content_fjc7n1_13{
100
+ ._initial_1fo5jum_54 ._content_1fo5jum_13,
101
+ ._closing_1fo5jum_9 ._content_1fo5jum_13{
112
102
  opacity:0;
113
103
  }
114
- ._outerThemeLight_fjc7n1_68 ._content_fjc7n1_13{
104
+ ._outerThemeLight_1fo5jum_68 ._content_1fo5jum_13{
115
105
  --rs-color-primary-dark-theme:var(--rs-color-primary-light-theme);
116
106
  --rs-color-primary-dim-dark-theme:var(--rs-color-primary-dim-light-theme);
117
107
  --rs-color-primary-fog-dark-theme:var(--rs-color-primary-fog-light-theme);
@@ -122,7 +112,7 @@
122
112
  --rs-color-primary-t-fog-light-theme
123
113
  );
124
114
  }
125
- ._outerThemeDark_fjc7n1_81 ._content_fjc7n1_13{
115
+ ._outerThemeDark_1fo5jum_81 ._content_1fo5jum_13{
126
116
  --rs-color-primary-light-theme:var(--rs-color-primary-dark-theme);
127
117
  --rs-color-primary-dim-light-theme:var(--rs-color-primary-dim-dark-theme);
128
118
  --rs-color-primary-fog-light-theme:var(--rs-color-primary-fog-dark-theme);
@@ -133,27 +123,21 @@
133
123
  --rs-color-primary-t-fog-dark-theme
134
124
  );
135
125
  }
136
- ._initial_fjc7n1_54[data-real-placement^='top'] ._content_fjc7n1_13, ._closing_fjc7n1_9[data-real-placement^='top'] ._content_fjc7n1_13{
137
- -webkit-transform:translate(0, 10px);
138
- transform:translate(0, 10px);
126
+ ._initial_1fo5jum_54[data-real-placement^='top'] ._content_1fo5jum_13, ._closing_1fo5jum_9[data-real-placement^='top'] ._content_1fo5jum_13{
127
+ transform:translate(0, 10px);
139
128
  }
140
- ._initial_fjc7n1_54[data-real-placement^='right'] ._content_fjc7n1_13, ._closing_fjc7n1_9[data-real-placement^='right'] ._content_fjc7n1_13{
141
- -webkit-transform:translate(-10px, 0);
142
- transform:translate(-10px, 0);
129
+ ._initial_1fo5jum_54[data-real-placement^='right'] ._content_1fo5jum_13, ._closing_1fo5jum_9[data-real-placement^='right'] ._content_1fo5jum_13{
130
+ transform:translate(-10px, 0);
143
131
  }
144
- ._initial_fjc7n1_54[data-real-placement^='bottom'] ._content_fjc7n1_13, ._closing_fjc7n1_9[data-real-placement^='bottom'] ._content_fjc7n1_13{
145
- -webkit-transform:translate(0, -10px);
146
- transform:translate(0, -10px);
132
+ ._initial_1fo5jum_54[data-real-placement^='bottom'] ._content_1fo5jum_13, ._closing_1fo5jum_9[data-real-placement^='bottom'] ._content_1fo5jum_13{
133
+ transform:translate(0, -10px);
147
134
  }
148
- ._initial_fjc7n1_54[data-real-placement^='left'] ._content_fjc7n1_13, ._closing_fjc7n1_9[data-real-placement^='left'] ._content_fjc7n1_13{
149
- -webkit-transform:translate(10px, 0);
150
- transform:translate(10px, 0);
135
+ ._initial_1fo5jum_54[data-real-placement^='left'] ._content_1fo5jum_13, ._closing_1fo5jum_9[data-real-placement^='left'] ._content_1fo5jum_13{
136
+ transform:translate(10px, 0);
151
137
  }
152
- ._trigger_fjc7n1_113:focus-visible,
153
- ._trigger_fjc7n1_113:focus[data-focus-method='key']{
138
+ ._trigger_1fo5jum_113:focus-visible,
139
+ ._trigger_1fo5jum_113:focus[data-focus-method='key']{
154
140
  outline:none;
155
141
 
156
- -webkit-box-shadow:var(--rs-color-primary-t-dim-light-theme) 0 0 0 4px;
157
-
158
- box-shadow:var(--rs-color-primary-t-dim-light-theme) 0 0 0 4px;
142
+ box-shadow:var(--rs-color-primary-t-dim-light-theme) 0 0 0 4px;
159
143
  }
package/lib/index.js CHANGED
@@ -5,5 +5,5 @@ export { Tooltip } from './tooltip.js';
5
5
  * @deprecated use named import instead
6
6
  */
7
7
 
8
- var DefaultTooltip = Tooltip;
8
+ const DefaultTooltip = Tooltip;
9
9
  export { DefaultTooltip as default };
package/lib/index.p.module.css.js CHANGED
@@ -1,10 +1,10 @@
1
1
  var styles = {
2
- "tooltip": "_tooltip_fjc7n1_5",
3
- "closing": "_closing_fjc7n1_9",
4
- "content": "_content_fjc7n1_13",
5
- "initial": "_initial_fjc7n1_54",
6
- "outerThemeLight": "_outerThemeLight_fjc7n1_68",
7
- "outerThemeDark": "_outerThemeDark_fjc7n1_81",
8
- "trigger": "_trigger_fjc7n1_113"
2
+ "tooltip": "_tooltip_1fo5jum_5",
3
+ "closing": "_closing_1fo5jum_9",
4
+ "content": "_content_1fo5jum_13",
5
+ "initial": "_initial_1fo5jum_54",
6
+ "outerThemeLight": "_outerThemeLight_1fo5jum_68",
7
+ "outerThemeDark": "_outerThemeDark_1fo5jum_81",
8
+ "trigger": "_trigger_1fo5jum_113"
9
9
  };
10
10
  export { styles as default };
package/lib/tooltip.js CHANGED
@@ -1,22 +1,4 @@
1
- import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
2
- import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
3
- import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
4
- import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
5
- import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
6
- import _toConsumableArray from "@babel/runtime-corejs3/helpers/esm/toConsumableArray";
7
- import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
8
- import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
9
- import _typeof from "@babel/runtime-corejs3/helpers/esm/typeof";
10
-
11
- function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
12
-
13
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
14
-
15
- import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
16
1
  import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
17
- import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
18
- import "core-js/modules/es.object.to-string.js";
19
- import "core-js/modules/web.dom-collections.for-each.js";
20
2
  import React, { cloneElement, createElement, useState, useRef, useEffect, useCallback, useContext, isValidElement } from 'react';
21
3
  import { Element, ForwardRef, typeOf } from 'react-is';
22
4
  import cn from 'classnames';
@@ -27,19 +9,20 @@ import { ThemeContext, LayeringConsumer, ThemeProvider } from '@rescui/ui-contex
27
9
  import styles from './index.p.module.css.js';
28
10
  import { useTooltipState, TOOLTIP_STATES } from './use-tooltip-state.js';
29
11
  import { extractThemeFromCss, extractPrimaryColors } from './css-vars-utils.js';
30
- var HIDE_TIMEOUT = 500; // it should in sync with the transition-duration css-property
12
+ const HIDE_TIMEOUT = 500; // it should in sync with the transition-duration css-property
31
13
 
32
- var CLOSING_TIMEOUT = 300;
14
+ const CLOSING_TIMEOUT = 300;
33
15
 
34
- var Portal = function Portal(_ref) {
35
- var children = _ref.children,
36
- _ref$target = _ref.target,
37
- target = _ref$target === void 0 ? document.body : _ref$target;
16
+ const Portal = _ref => {
17
+ let {
18
+ children,
19
+ target = document.body
20
+ } = _ref;
38
21
  return /*#__PURE__*/ReactDOM.createPortal(children, target);
39
22
  };
40
23
 
41
- var isNode = function isNode(maybeNode) {
42
- switch (_typeof(maybeNode)) {
24
+ const isNode = maybeNode => {
25
+ switch (typeof maybeNode) {
43
26
  case 'string':
44
27
  case 'number':
45
28
  return true;
@@ -60,30 +43,31 @@ var isNode = function isNode(maybeNode) {
60
43
  }
61
44
  };
62
45
 
63
- var OUTER_THEME_STYLES = {
46
+ const OUTER_THEME_STYLES = {
64
47
  light: styles.outerThemeLight,
65
48
  dark: styles.outerThemeDark
66
49
  };
67
- var TriggerRenderer = /*#__PURE__*/React.forwardRef(function (_ref2, _ref3) {
68
- var _children$ref, _children$props, _context;
69
-
70
- var setTriggerRef = _ref2.setTriggerRef,
71
- targetComponent = _ref2.targetComponent,
72
- isControlled = _ref2.isControlled,
73
- handleMouseEnterTarget = _ref2.handleMouseEnterTarget,
74
- handleMouseLeaveTarget = _ref2.handleMouseLeaveTarget,
75
- children = _ref2.children;
76
- var eventListeners = !isControlled ? {
50
+ const TriggerRenderer = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
51
+ var _children$props, _context;
52
+
53
+ let {
54
+ setTriggerRef,
55
+ targetComponent,
56
+ isControlled,
57
+ handleMouseEnterTarget,
58
+ handleMouseLeaveTarget,
59
+ children
60
+ } = _ref2;
61
+ const eventListeners = !isControlled ? {
77
62
  onMouseEnter: handleMouseEnterTarget,
78
63
  onMouseLeave: handleMouseLeaveTarget,
79
64
  onFocus: handleMouseEnterTarget,
80
65
  onBlur: handleMouseLeaveTarget,
81
66
  tabIndex: 0
82
67
  } : {};
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;
84
-
85
- var tooltipTargetProps = _Object$assign({}, {
86
- ref: function ref(el) {
68
+ const childrenRef = (children === null || children === void 0 ? void 0 : children.ref) ?? (children === null || children === void 0 || (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.ref);
69
+ const tooltipTargetProps = Object.assign({}, {
70
+ ref: el => {
87
71
  setTriggerRef(el);
88
72
 
89
73
  if (childrenRef) {
@@ -94,11 +78,11 @@ var TriggerRenderer = /*#__PURE__*/React.forwardRef(function (_ref2, _ref3) {
94
78
  }
95
79
  }
96
80
 
97
- if (_ref3) {
98
- if (typeof _ref3 === 'function') {
99
- _ref3(el);
81
+ if (ref) {
82
+ if (typeof ref === 'function') {
83
+ ref(el);
100
84
  } else {
101
- _ref3.current = el;
85
+ ref.current = el;
102
86
  }
103
87
  }
104
88
  }
@@ -109,62 +93,48 @@ var TriggerRenderer = /*#__PURE__*/React.forwardRef(function (_ref2, _ref3) {
109
93
  targetProps: tooltipTargetProps
110
94
  });
111
95
  } else if (_includesInstanceProperty(_context = [Element, ForwardRef]).call(_context, typeOf(children))) {
112
- return /*#__PURE__*/cloneElement(children, _objectSpread({
113
- className: cn(styles.trigger, children.props.className)
114
- }, tooltipTargetProps));
96
+ return /*#__PURE__*/cloneElement(children, {
97
+ className: cn(styles.trigger, children.props.className),
98
+ ...tooltipTargetProps
99
+ });
115
100
  } // create trigger-wrapper to bind tooltip
116
101
 
117
102
 
118
- return /*#__PURE__*/createElement(targetComponent, _objectSpread({
119
- className: styles.trigger
120
- }, tooltipTargetProps), children);
103
+ return /*#__PURE__*/createElement(targetComponent, {
104
+ className: styles.trigger,
105
+ ...tooltipTargetProps
106
+ }, children);
121
107
  });
122
108
  TriggerRenderer.displayName = 'TriggerRenderer';
123
109
 
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;
139
-
140
- var _useState = useState(null),
141
- _useState2 = _slicedToArray(_useState, 2),
142
- triggerRef = _useState2[0],
143
- setTriggerRef = _useState2[1];
144
-
145
- var isControlled = typeof isVisibleFromProps !== 'undefined';
146
-
147
- var _useState3 = useState(false),
148
- _useState4 = _slicedToArray(_useState3, 2),
149
- isVisibleState = _useState4[0],
150
- setIsVisibleState = _useState4[1];
151
-
152
- var _useState5 = useState(false),
153
- _useState6 = _slicedToArray(_useState5, 2),
154
- isTooltipHovered = _useState6[0],
155
- setIsTooltipHovered = _useState6[1];
156
-
157
- var schedulePopperUpdateRef = useRef(null);
158
- var hideTimeoutRef = useRef(null);
159
- var isVisible = isControlled ? isVisibleFromProps : isVisibleState;
160
- var isOpen = isVisible || isTooltipHovered;
161
- useEffect(function () {
110
+ const Tooltip = _ref3 => {
111
+ let {
112
+ children,
113
+ targetComponent = 'span',
114
+ content,
115
+ className,
116
+ isVisible: isVisibleFromProps,
117
+ modifiers,
118
+ placement = 'auto',
119
+ sparse = true,
120
+ fallbackPlacements = ['top', 'bottom'],
121
+ disableHideDelay
122
+ } = _ref3;
123
+ const [triggerRef, setTriggerRef] = useState(null);
124
+ const isControlled = typeof isVisibleFromProps !== 'undefined';
125
+ const [isVisibleState, setIsVisibleState] = useState(false);
126
+ const [isTooltipHovered, setIsTooltipHovered] = useState(false);
127
+ const schedulePopperUpdateRef = useRef(null);
128
+ const hideTimeoutRef = useRef(null);
129
+ const isVisible = isControlled ? isVisibleFromProps : isVisibleState;
130
+ const isOpen = isVisible || isTooltipHovered;
131
+ useEffect(() => {
162
132
  if (schedulePopperUpdateRef.current) {
163
133
  schedulePopperUpdateRef.current();
164
134
  }
165
135
  }, [content]);
166
136
 
167
- var handleMouseEnterTarget = function handleMouseEnterTarget() {
137
+ const handleMouseEnterTarget = () => {
168
138
  if (hideTimeoutRef.current) {
169
139
  clearTimeout(hideTimeoutRef.current);
170
140
  hideTimeoutRef.current = null;
@@ -173,65 +143,65 @@ var Tooltip = function Tooltip(_ref4) {
173
143
  setIsVisibleState(true);
174
144
  };
175
145
 
176
- var handleMouseLeaveTarget = function handleMouseLeaveTarget() {
146
+ const handleMouseLeaveTarget = () => {
177
147
  if (disableHideDelay) {
178
148
  setIsVisibleState(false);
179
149
  } else {
180
- hideTimeoutRef.current = setTimeout(function () {
150
+ hideTimeoutRef.current = setTimeout(() => {
181
151
  setIsVisibleState(false);
182
152
  }, HIDE_TIMEOUT);
183
153
  }
184
154
  };
185
155
 
186
- var tooltipState = useTooltipState(isOpen, CLOSING_TIMEOUT);
187
- var isClosing = tooltipState === TOOLTIP_STATES.CLOSING;
188
- var isExists = tooltipState !== TOOLTIP_STATES.CLOSED; // a state to toggle the starting transition
156
+ const tooltipState = useTooltipState(isOpen, CLOSING_TIMEOUT);
157
+ const isClosing = tooltipState === TOOLTIP_STATES.CLOSING;
158
+ const isExists = tooltipState !== TOOLTIP_STATES.CLOSED; // a state to toggle the starting transition
189
159
 
190
- var _useState7 = useState(true),
191
- _useState8 = _slicedToArray(_useState7, 2),
192
- isInitial = _useState8[0],
193
- setIsInitial = _useState8[1]; // reset the initial flag when the closing transition ends and the state switches to CLOSED
160
+ const [isInitial, setIsInitial] = useState(true); // reset the initial flag when the closing transition ends and the state switches to CLOSED
194
161
 
195
-
196
- useEffect(function () {
162
+ useEffect(() => {
197
163
  if (!isExists) {
198
164
  setIsInitial(true);
199
165
  }
200
166
  }, [isExists]);
201
- var disableInitialFlag = useCallback(function (_ref5) {
202
- var state = _ref5.state;
203
- var el = state.elements.popper; // force layout phase
167
+ const disableInitialFlag = useCallback(_ref4 => {
168
+ let {
169
+ state
170
+ } = _ref4;
171
+ const el = state.elements.popper; // force layout phase
204
172
  // to make sure that the dom has registered the initial
205
173
  // styles with resolved placement (for `auto` placement)
206
174
 
207
175
  el.getBoundingClientRect();
208
176
  setIsInitial(false);
209
177
  }, []);
210
- var tooltipShouldBeRendered = isExists && isNode(content);
211
- var primaryColors = {};
212
- var themeFromCss = 'light';
178
+ const tooltipShouldBeRendered = isExists && isNode(content);
179
+ let primaryColors = {};
180
+ let themeFromCss = 'light';
213
181
 
214
182
  if (triggerRef && tooltipShouldBeRendered) {
215
183
  // In theory this part of the code might cause issues with SSR.
216
184
  // But in this specific context, because of the nature of the state-ref "triggerRef",
217
185
  // we are sure that the tooltip wouldn't be rendered on the first client render.
218
186
  // Therefore, the first render on the client will be the same as on the server.
219
- var triggerStyles = getComputedStyle(triggerRef);
187
+ const triggerStyles = getComputedStyle(triggerRef);
220
188
  themeFromCss = extractThemeFromCss(triggerStyles);
221
189
  primaryColors = extractPrimaryColors(triggerStyles);
222
190
  }
223
191
 
224
- var _useContext = useContext(ThemeContext),
225
- themeFromContext = _useContext.theme,
226
- noProvider = _useContext.noProvider;
227
-
228
- var theme = noProvider ? themeFromCss : themeFromContext;
229
- return /*#__PURE__*/React.createElement(LayeringConsumer, null, function (_ref6) {
230
- var _context2;
231
-
232
- var tooltipZIndex = _ref6.tooltipZIndex;
233
- return /*#__PURE__*/React.createElement(Manager, null, /*#__PURE__*/React.createElement(Reference, null, function (_ref7) {
234
- var ref = _ref7.ref;
192
+ const {
193
+ theme: themeFromContext,
194
+ noProvider
195
+ } = useContext(ThemeContext);
196
+ const theme = noProvider ? themeFromCss : themeFromContext;
197
+ return /*#__PURE__*/React.createElement(LayeringConsumer, null, _ref5 => {
198
+ let {
199
+ tooltipZIndex
200
+ } = _ref5;
201
+ return /*#__PURE__*/React.createElement(Manager, null, /*#__PURE__*/React.createElement(Reference, null, _ref6 => {
202
+ let {
203
+ ref
204
+ } = _ref6;
235
205
  return /*#__PURE__*/React.createElement(TriggerRenderer, {
236
206
  ref: ref,
237
207
  setTriggerRef: setTriggerRef,
@@ -242,7 +212,7 @@ var Tooltip = function Tooltip(_ref4) {
242
212
  }, children);
243
213
  }), tooltipShouldBeRendered && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Popper, {
244
214
  placement: placement,
245
- modifiers: _concatInstanceProperty(_context2 = [// the modifier to trigger starting animation
215
+ modifiers: [// the modifier to trigger starting animation
246
216
  {
247
217
  name: 'disableInitialFlag',
248
218
  enabled: true,
@@ -252,13 +222,15 @@ var Tooltip = function Tooltip(_ref4) {
252
222
  }, {
253
223
  name: 'flip',
254
224
  options: {
255
- fallbackPlacements: fallbackPlacements
225
+ fallbackPlacements
256
226
  }
257
227
  }, {
258
228
  name: 'offset',
259
229
  options: {
260
- offset: function offset(_ref8) {
261
- var offsetPlacement = _ref8.placement;
230
+ offset: _ref7 => {
231
+ let {
232
+ placement: offsetPlacement
233
+ } = _ref7;
262
234
 
263
235
  if (_includesInstanceProperty(offsetPlacement).call(offsetPlacement, 'left') || _includesInstanceProperty(offsetPlacement).call(offsetPlacement, 'right')) {
264
236
  return [0, sparse ? 16 : 8];
@@ -267,23 +239,24 @@ var Tooltip = function Tooltip(_ref4) {
267
239
  }
268
240
  }
269
241
  }
270
- }]).call(_context2, _toConsumableArray(modifiers || []))
271
- }, function (_ref9) {
272
- var ref = _ref9.ref,
273
- style = _ref9.style,
274
- update = _ref9.update,
275
- realPlacement = _ref9.placement;
242
+ }, ...(modifiers || [])]
243
+ }, _ref8 => {
244
+ let {
245
+ ref,
246
+ style,
247
+ update,
248
+ placement: realPlacement
249
+ } = _ref8;
276
250
  schedulePopperUpdateRef.current = update;
277
251
  return /*#__PURE__*/React.createElement("span", {
278
252
  className: cn(styles.tooltip, isInitial && styles.initial, isClosing && styles.closing, OUTER_THEME_STYLES[theme], className),
279
253
  ref: ref,
280
- style: _objectSpread(_objectSpread(_objectSpread({}, style), primaryColors), {}, {
254
+ style: { ...style,
255
+ ...primaryColors,
281
256
  zIndex: tooltipZIndex
282
- }),
283
- onMouseEnter: function onMouseEnter() {
284
- return setIsTooltipHovered(true);
285
257
  },
286
- onMouseLeave: function onMouseLeave() {
258
+ onMouseEnter: () => setIsTooltipHovered(true),
259
+ onMouseLeave: () => {
287
260
  setIsVisibleState(false);
288
261
  setIsTooltipHovered(false);
289
262
  },
package/lib/use-tooltip-state.js CHANGED
@@ -1,4 +1,3 @@
1
- import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
2
1
  import { useState, useEffect } from 'react';
3
2
  var TOOLTIP_STATES;
4
3
 
@@ -9,17 +8,12 @@ var TOOLTIP_STATES;
9
8
  })(TOOLTIP_STATES || (TOOLTIP_STATES = {}));
10
9
 
11
10
  function useTooltipState(isOpen) {
12
- var transitionDuration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
13
-
14
- var _useState = useState(TOOLTIP_STATES.CLOSED),
15
- _useState2 = _slicedToArray(_useState, 2),
16
- state = _useState2[0],
17
- setState = _useState2[1];
18
-
19
- useEffect(function () {
11
+ let transitionDuration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
12
+ const [state, setState] = useState(TOOLTIP_STATES.CLOSED);
13
+ useEffect(() => {
20
14
  if (isOpen) {
21
15
  // set tooltip state to OPEN when it should be open, but the current state is closing or already closed
22
- setState(function (curState) {
16
+ setState(curState => {
23
17
  if (curState === TOOLTIP_STATES.CLOSING || curState === TOOLTIP_STATES.CLOSED) {
24
18
  return TOOLTIP_STATES.OPEN;
25
19
  } else {
@@ -30,7 +24,7 @@ function useTooltipState(isOpen) {
30
24
 
31
25
  if (!isOpen) {
32
26
  // if tooltip should not be open, but actually open, start the closing process
33
- setState(function (curState) {
27
+ setState(curState => {
34
28
  if (curState === TOOLTIP_STATES.OPEN) {
35
29
  return TOOLTIP_STATES.CLOSING;
36
30
  }
@@ -39,8 +33,8 @@ function useTooltipState(isOpen) {
39
33
  }); // by the time the transition is finished, set state from closing to closed
40
34
  // if by any means at that moment state is not closing (but open or already closed), do nothing
41
35
 
42
- var timeoutId = setTimeout(function () {
43
- setState(function (curState) {
36
+ const timeoutId = setTimeout(() => {
37
+ setState(curState => {
44
38
  if (curState === TOOLTIP_STATES.CLOSING) {
45
39
  return TOOLTIP_STATES.CLOSED;
46
40
  }
@@ -48,13 +42,13 @@ function useTooltipState(isOpen) {
48
42
  return curState;
49
43
  });
50
44
  }, transitionDuration);
51
- return function () {
45
+ return () => {
52
46
  clearTimeout(timeoutId);
53
47
  };
54
48
  } // eslint-disable-next-line @typescript-eslint/no-empty-function
55
49
 
56
50
 
57
- return function () {};
51
+ return () => {};
58
52
  }, [transitionDuration, isOpen]);
59
53
  return state;
60
54
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/tooltip",
3
- "version": "0.8.13",
3
+ "version": "0.8.14",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -14,10 +14,9 @@
14
14
  "access": "public"
15
15
  },
16
16
  "dependencies": {
17
- "@babel/runtime-corejs3": "^7.14.0",
17
+ "@babel/runtime-corejs3": "^7.26.0",
18
18
  "@popperjs/core": "^2.9.2",
19
19
  "classnames": "^2.2.6",
20
- "core-js": "^3.9.1",
21
20
  "react-is": "^17.0.2",
22
21
  "react-popper": "^2.2.5"
23
22
  },
@@ -28,15 +27,15 @@
28
27
  "react-dom": ">=16.8.0 <19"
29
28
  },
30
29
  "devDependencies": {
31
- "@rescui/colors": "^0.2.5",
32
- "@rescui/icons": "^0.16.11",
33
- "@rescui/scripts": "^0.3.4",
34
- "@rescui/typography": "^0.19.0",
30
+ "@rescui/colors": "^0.2.6",
31
+ "@rescui/icons": "^0.16.12",
32
+ "@rescui/scripts": "^0.3.5",
33
+ "@rescui/typography": "^0.19.1",
35
34
  "@types/react-is": "^17.0.3"
36
35
  },
37
36
  "scripts": {
38
37
  "build": "rescui-scripts build"
39
38
  },
40
39
  "nx": {},
41
- "gitHead": "3ef429c66a082b71861a814ba508693c68a94842"
40
+ "gitHead": "67627f69be3de4b4c6a21244fd7de36e841f01f0"
42
41
  }