@rescui/tooltip 0.3.2 → 0.4.0

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/index.css +30 -21
  2. package/lib/index.d.ts +1 -0
  3. package/lib/index.module.pcss.js +7 -6
  4. package/lib/tooltip.d.ts +16 -2
  5. package/lib/tooltip.js +31 -20
  6. package/lib/use-tooltip-state.js +1 -1
  7. package/package.json +5 -3
package/lib/index.css CHANGED
@@ -1,10 +1,10 @@
1
- ._tooltip_hv8vuo_4{
1
+ ._tooltip_dizvuj_4{
2
2
  position:relative;
3
3
  }
4
- ._closing_hv8vuo_8{
4
+ ._closing_dizvuj_8{
5
5
  pointer-events:none;
6
6
  }
7
- ._content_hv8vuo_12{
7
+ ._content_dizvuj_12{
8
8
  letter-spacing:0.0045em;
9
9
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
10
10
  font-family:var(--rs-font-family-ui, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
@@ -13,10 +13,10 @@
13
13
  line-height:20px;
14
14
  line-height:var(--rs-text-3-line-height, 20px);
15
15
  }
16
- ._rs-reset-letter-spacing_hv8vuo_1 ._content_hv8vuo_12{
16
+ ._rs-reset-letter-spacing_dizvuj_1 ._content_dizvuj_12{
17
17
  letter-spacing:normal;
18
18
  }
19
- ._content_hv8vuo_12 {
19
+ ._content_dizvuj_12 {
20
20
 
21
21
  max-width:283px;
22
22
 
@@ -37,47 +37,56 @@
37
37
  -webkit-transform:translate(0, 0);
38
38
  transform:translate(0, 0);
39
39
  }
40
- [data-real-placement='top-end'] ._content_hv8vuo_12,
41
- [data-real-placement='bottom-end'] ._content_hv8vuo_12{
40
+ [data-real-placement='top-end'] ._content_dizvuj_12,
41
+ [data-real-placement='bottom-end'] ._content_dizvuj_12{
42
42
  margin-right:0;
43
43
  }
44
- [data-real-placement='top-start'] ._content_hv8vuo_12,
45
- [data-real-placement='bottom-start'] ._content_hv8vuo_12{
44
+ [data-real-placement='top-start'] ._content_dizvuj_12,
45
+ [data-real-placement='bottom-start'] ._content_dizvuj_12{
46
46
  margin-left:0;
47
47
  }
48
- [data-real-placement='left-end'] ._content_hv8vuo_12,
49
- [data-real-placement='right-end'] ._content_hv8vuo_12{
48
+ [data-real-placement='left-end'] ._content_dizvuj_12,
49
+ [data-real-placement='right-end'] ._content_dizvuj_12{
50
50
  margin-bottom:0;
51
51
  }
52
- [data-real-placement='left-start'] ._content_hv8vuo_12,
53
- [data-real-placement='right-start'] ._content_hv8vuo_12{
52
+ [data-real-placement='left-start'] ._content_dizvuj_12,
53
+ [data-real-placement='right-start'] ._content_dizvuj_12{
54
54
  margin-top:0;
55
55
  }
56
- ._initial_hv8vuo_47 ._content_hv8vuo_12{
56
+ ._initial_dizvuj_47 ._content_dizvuj_12{
57
57
  -webkit-transition:none;
58
58
  transition:none;
59
59
  }
60
- ._closing_hv8vuo_8 ._content_hv8vuo_12{
60
+ ._closing_dizvuj_8 ._content_dizvuj_12{
61
61
  -webkit-transition-duration:200ms, 200ms;
62
62
  transition-duration:200ms, 200ms;
63
63
  }
64
- ._initial_hv8vuo_47 ._content_hv8vuo_12,
65
- ._closing_hv8vuo_8 ._content_hv8vuo_12{
64
+ ._initial_dizvuj_47 ._content_dizvuj_12,
65
+ ._closing_dizvuj_8 ._content_dizvuj_12{
66
66
  opacity:0;
67
67
  }
68
- ._initial_hv8vuo_47[data-real-placement^='top'] ._content_hv8vuo_12, ._closing_hv8vuo_8[data-real-placement^='top'] ._content_hv8vuo_12{
68
+ ._initial_dizvuj_47[data-real-placement^='top'] ._content_dizvuj_12, ._closing_dizvuj_8[data-real-placement^='top'] ._content_dizvuj_12{
69
69
  -webkit-transform:translate(0, 10px);
70
70
  transform:translate(0, 10px);
71
71
  }
72
- ._initial_hv8vuo_47[data-real-placement^='right'] ._content_hv8vuo_12, ._closing_hv8vuo_8[data-real-placement^='right'] ._content_hv8vuo_12{
72
+ ._initial_dizvuj_47[data-real-placement^='right'] ._content_dizvuj_12, ._closing_dizvuj_8[data-real-placement^='right'] ._content_dizvuj_12{
73
73
  -webkit-transform:translate(-10px, 0);
74
74
  transform:translate(-10px, 0);
75
75
  }
76
- ._initial_hv8vuo_47[data-real-placement^='bottom'] ._content_hv8vuo_12, ._closing_hv8vuo_8[data-real-placement^='bottom'] ._content_hv8vuo_12{
76
+ ._initial_dizvuj_47[data-real-placement^='bottom'] ._content_dizvuj_12, ._closing_dizvuj_8[data-real-placement^='bottom'] ._content_dizvuj_12{
77
77
  -webkit-transform:translate(0, -10px);
78
78
  transform:translate(0, -10px);
79
79
  }
80
- ._initial_hv8vuo_47[data-real-placement^='left'] ._content_hv8vuo_12, ._closing_hv8vuo_8[data-real-placement^='left'] ._content_hv8vuo_12{
80
+ ._initial_dizvuj_47[data-real-placement^='left'] ._content_dizvuj_12, ._closing_dizvuj_8[data-real-placement^='left'] ._content_dizvuj_12{
81
81
  -webkit-transform:translate(10px, 0);
82
82
  transform:translate(10px, 0);
83
83
  }
84
+ ._trigger_dizvuj_81:focus-visible,
85
+ ._trigger_dizvuj_81:focus[data-focus-method='key']{
86
+ outline:none;
87
+ -webkit-box-shadow:rgba(107, 87, 255, 0.8) 0 0 0 4px;
88
+ -webkit-box-shadow:var(--rs-color-primary-t-dim-light-theme, rgba(107, 87, 255, 0.8)) 0 0 0 4px;
89
+ box-shadow:rgba(107, 87, 255, 0.8) 0 0 0 4px;
90
+ box-shadow:var(--rs-color-primary-t-dim-light-theme, rgba(107, 87, 255, 0.8)) 0 0 0 4px;
91
+ }
92
+
package/lib/index.d.ts CHANGED
@@ -1 +1,2 @@
1
1
  export { default } from './tooltip';
2
+ export type { TooltipPlacement } from './tooltip';
package/lib/index.module.pcss.js CHANGED
@@ -1,8 +1,9 @@
1
1
  var styles = {
2
- "tooltip": "_tooltip_hv8vuo_4",
3
- "closing": "_closing_hv8vuo_8",
4
- "content": "_content_hv8vuo_12",
5
- "rs-reset-letter-spacing": "_rs-reset-letter-spacing_hv8vuo_1",
6
- "initial": "_initial_hv8vuo_47"
2
+ "tooltip": "_tooltip_dizvuj_4",
3
+ "closing": "_closing_dizvuj_8",
4
+ "content": "_content_dizvuj_12",
5
+ "rs-reset-letter-spacing": "_rs-reset-letter-spacing_dizvuj_1",
6
+ "initial": "_initial_dizvuj_47",
7
+ "trigger": "_trigger_dizvuj_81"
7
8
  };
8
- export default styles;
9
+ export { styles as default };
package/lib/tooltip.d.ts CHANGED
@@ -1,11 +1,25 @@
1
1
  import React from 'react';
2
2
  import { StrictModifiers } from '@popperjs/core/lib/types';
3
- declare type ChildrenFunc = (...args: any[]) => React.ReactNode;
3
+ interface TriggerTargetRequiredProps {
4
+ ref: React.Ref<HTMLElement>;
5
+ }
6
+ interface TriggerTargetAdditionalProps {
7
+ onBlur: (...args: unknown[]) => void;
8
+ tabIndex: number;
9
+ onMouseEnter: (...args: unknown[]) => void;
10
+ onMouseLeave: (...args: unknown[]) => void;
11
+ onFocus: (...args: unknown[]) => void;
12
+ }
13
+ declare type TriggerTargetProps = TriggerTargetRequiredProps | (TriggerTargetRequiredProps & TriggerTargetAdditionalProps);
14
+ declare type ChildrenFunc = (arg: {
15
+ targetProps: TriggerTargetProps;
16
+ }) => React.ReactNode;
4
17
  export declare type TooltipChildren = ChildrenFunc | React.ReactNode;
5
18
  export declare type TooltipPlacement = 'auto-start' | 'auto' | 'auto-end' | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start';
6
19
  export interface TooltipProps {
7
20
  /**
8
21
  * target node or `({targetProps}) => node` function
22
+ * @type (arg: { targetProps: TriggerTargetProps; }) => ReactNode | ReactNode
9
23
  */
10
24
  children: TooltipChildren;
11
25
  /**
@@ -34,7 +48,7 @@ export interface TooltipProps {
34
48
  * use with cation, it can make impossible to click on links inside tooltip
35
49
  */
36
50
  disableHideDelay?: boolean;
37
- /** offset from the target */
51
+ /** increase offset from the target */
38
52
  sparse?: boolean;
39
53
  }
40
54
  export declare const Tooltip: React.FC<TooltipProps>;
package/lib/tooltip.js CHANGED
@@ -1,22 +1,24 @@
1
- import "core-js/modules/web.dom-collections.for-each.js";
2
- import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
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";
3
6
  import _toConsumableArray from "@babel/runtime-corejs3/helpers/esm/toConsumableArray";
7
+ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
4
8
  import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
5
9
  import _typeof from "@babel/runtime-corejs3/helpers/esm/typeof";
6
10
 
7
- function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
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; }
8
12
 
9
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
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; }
10
14
 
11
15
  import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
12
- import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
13
16
  import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
14
- import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
15
- import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
16
- import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
17
- import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
18
- import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
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";
19
20
  import React, { useState, useRef, useEffect, useCallback, cloneElement, createElement, isValidElement } from 'react';
21
+ import { Element, ForwardRef, typeOf } from 'react-is';
20
22
  import cn from 'classnames';
21
23
  import PropTypes from 'prop-types';
22
24
  import ReactDOM from 'react-dom';
@@ -136,14 +138,19 @@ var Tooltip = function Tooltip(_ref2) {
136
138
  setIsInitial(false);
137
139
  }, []);
138
140
  return /*#__PURE__*/React.createElement(LayeringConsumer, null, function (_ref4) {
139
- var _context;
141
+ var _context2;
140
142
 
141
143
  var tooltipZIndex = _ref4.tooltipZIndex;
142
144
  return /*#__PURE__*/React.createElement(Manager, null, /*#__PURE__*/React.createElement(Reference, null, function (_ref5) {
145
+ var _context;
146
+
143
147
  var ref = _ref5.ref;
144
148
  var eventListeners = !isControlled ? {
145
149
  onMouseEnter: handleMouseEnterTarget,
146
- onMouseLeave: handleMouseLeaveTarget
150
+ onMouseLeave: handleMouseLeaveTarget,
151
+ onFocus: handleMouseEnterTarget,
152
+ onBlur: handleMouseLeaveTarget,
153
+ tabIndex: 0
147
154
  } : {};
148
155
 
149
156
  var tooltipTargetProps = _Object$assign({}, {
@@ -154,14 +161,19 @@ var Tooltip = function Tooltip(_ref2) {
154
161
  return children({
155
162
  targetProps: tooltipTargetProps
156
163
  });
157
- } else if (children) {
158
- return /*#__PURE__*/cloneElement(children, tooltipTargetProps);
159
- }
164
+ } else if (_includesInstanceProperty(_context = [Element, ForwardRef]).call(_context, typeOf(children))) {
165
+ return /*#__PURE__*/cloneElement(children, _objectSpread({
166
+ className: cn(styles.trigger, children.props.className)
167
+ }, tooltipTargetProps));
168
+ } // create trigger-wrapper to bind tooltip
169
+
160
170
 
161
- return /*#__PURE__*/createElement(targetComponent, tooltipTargetProps, children);
171
+ return /*#__PURE__*/createElement(targetComponent, _objectSpread({
172
+ className: styles.trigger
173
+ }, tooltipTargetProps), children);
162
174
  }), isExists && isNode(content) && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Popper, {
163
175
  placement: placement,
164
- modifiers: _concatInstanceProperty(_context = [// the modifier to trigger starting animation
176
+ modifiers: _concatInstanceProperty(_context2 = [// the modifier to trigger starting animation
165
177
  {
166
178
  name: 'disableInitialFlag',
167
179
  enabled: true,
@@ -181,7 +193,7 @@ var Tooltip = function Tooltip(_ref2) {
181
193
  }
182
194
  }
183
195
  }
184
- }]).call(_context, _toConsumableArray(modifiers || []))
196
+ }]).call(_context2, _toConsumableArray(modifiers || []))
185
197
  }, function (_ref7) {
186
198
  var ref = _ref7.ref,
187
199
  style = _ref7.style,
@@ -222,5 +234,4 @@ Tooltip.propTypes = {
222
234
  sparse: PropTypes.bool,
223
235
  disableHideDelay: PropTypes.bool
224
236
  };
225
- export default Tooltip;
226
- export { Tooltip };
237
+ export { Tooltip, Tooltip as default };
package/lib/use-tooltip-state.js CHANGED
@@ -11,7 +11,7 @@ var TOOLTIP_STATES;
11
11
  function useTooltipState(isOpen) {
12
12
  var transitionDuration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
13
13
 
14
- var _useState = useState(isOpen ? TOOLTIP_STATES.OPEN : TOOLTIP_STATES.CLOSED),
14
+ var _useState = useState(TOOLTIP_STATES.CLOSED),
15
15
  _useState2 = _slicedToArray(_useState, 2),
16
16
  state = _useState2[0],
17
17
  setState = _useState2[1];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/tooltip",
3
- "version": "0.3.2",
3
+ "version": "0.4.0",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -18,6 +18,7 @@
18
18
  "@popperjs/core": "^2.9.2",
19
19
  "classnames": "^2.2.6",
20
20
  "core-js": "^3.9.1",
21
+ "react-is": "^17.0.2",
21
22
  "react-popper": "^2.2.5"
22
23
  },
23
24
  "peerDependencies": {
@@ -29,10 +30,11 @@
29
30
  "devDependencies": {
30
31
  "@rescui/colors": "^0.1.1",
31
32
  "@rescui/scripts": "^0.1.5",
32
- "@rescui/typography": "^0.7.1"
33
+ "@rescui/typography": "^0.7.2",
34
+ "@types/react-is": "^17.0.3"
33
35
  },
34
36
  "scripts": {
35
37
  "build": "rescui-scripts build"
36
38
  },
37
- "gitHead": "10cf86a6c4c4b678c0b94c03c56c6d33214f03e8"
39
+ "gitHead": "67f695b72d13fd8445542c48f096b65656fdd7d9"
38
40
  }