@rescui/tooltip 0.8.14 → 0.8.15-RUI-226-Update-card-cn-6e43cc89.60

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 (5) hide show
  1. package/lib/index.css +24 -24
  2. package/lib/index.p.module.css.js +7 -7
  3. package/lib/tooltip.d.ts +6 -0
  4. package/lib/tooltip.js +12 -5
  5. package/package.json +7 -6
package/lib/index.css CHANGED
@@ -1,10 +1,10 @@
1
- ._tooltip_1fo5jum_5{
1
+ ._tooltip_1kpucek_5{
2
2
  position:relative;
3
3
  }
4
- ._closing_1fo5jum_9{
4
+ ._closing_1kpucek_9{
5
5
  pointer-events:none;
6
6
  }
7
- ._content_1fo5jum_13{
7
+ ._content_1kpucek_13{
8
8
  --rs-theme-dark:1;
9
9
  --_rs-tooltip-border-width:1px;
10
10
 
@@ -29,7 +29,7 @@
29
29
  line-height:var(--_rs-typography-line-height);
30
30
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
31
31
  font-feature-settings:'kern', 'liga', 'calt';
32
- --_rs-typography-letter-spacing:0.0045em;
32
+ --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
33
33
  --_rs-typography-text-transform:initial;
34
34
  --_rs-typography-font-variant-numeric:initial;
35
35
  --_rs-typography-font-family:var(
@@ -75,33 +75,33 @@
75
75
  transition:opacity 300ms, transform 300ms;
76
76
  transform:translate(0, 0);
77
77
  }
78
- [data-real-placement='top-end'] ._content_1fo5jum_13,
79
- [data-real-placement='bottom-end'] ._content_1fo5jum_13{
78
+ [data-real-placement='top-end'] ._content_1kpucek_13,
79
+ [data-real-placement='bottom-end'] ._content_1kpucek_13{
80
80
  margin-right:0;
81
81
  }
82
- [data-real-placement='top-start'] ._content_1fo5jum_13,
83
- [data-real-placement='bottom-start'] ._content_1fo5jum_13{
82
+ [data-real-placement='top-start'] ._content_1kpucek_13,
83
+ [data-real-placement='bottom-start'] ._content_1kpucek_13{
84
84
  margin-left:0;
85
85
  }
86
- [data-real-placement='left-end'] ._content_1fo5jum_13,
87
- [data-real-placement='right-end'] ._content_1fo5jum_13{
86
+ [data-real-placement='left-end'] ._content_1kpucek_13,
87
+ [data-real-placement='right-end'] ._content_1kpucek_13{
88
88
  margin-bottom:0;
89
89
  }
90
- [data-real-placement='left-start'] ._content_1fo5jum_13,
91
- [data-real-placement='right-start'] ._content_1fo5jum_13{
90
+ [data-real-placement='left-start'] ._content_1kpucek_13,
91
+ [data-real-placement='right-start'] ._content_1kpucek_13{
92
92
  margin-top:0;
93
93
  }
94
- ._initial_1fo5jum_54 ._content_1fo5jum_13{
94
+ ._initial_1kpucek_54 ._content_1kpucek_13{
95
95
  transition:none;
96
96
  }
97
- ._closing_1fo5jum_9 ._content_1fo5jum_13{
97
+ ._closing_1kpucek_9 ._content_1kpucek_13{
98
98
  transition-duration:200ms, 200ms;
99
99
  }
100
- ._initial_1fo5jum_54 ._content_1fo5jum_13,
101
- ._closing_1fo5jum_9 ._content_1fo5jum_13{
100
+ ._initial_1kpucek_54 ._content_1kpucek_13,
101
+ ._closing_1kpucek_9 ._content_1kpucek_13{
102
102
  opacity:0;
103
103
  }
104
- ._outerThemeLight_1fo5jum_68 ._content_1fo5jum_13{
104
+ ._outerThemeLight_1kpucek_68 ._content_1kpucek_13{
105
105
  --rs-color-primary-dark-theme:var(--rs-color-primary-light-theme);
106
106
  --rs-color-primary-dim-dark-theme:var(--rs-color-primary-dim-light-theme);
107
107
  --rs-color-primary-fog-dark-theme:var(--rs-color-primary-fog-light-theme);
@@ -112,7 +112,7 @@
112
112
  --rs-color-primary-t-fog-light-theme
113
113
  );
114
114
  }
115
- ._outerThemeDark_1fo5jum_81 ._content_1fo5jum_13{
115
+ ._outerThemeDark_1kpucek_81 ._content_1kpucek_13{
116
116
  --rs-color-primary-light-theme:var(--rs-color-primary-dark-theme);
117
117
  --rs-color-primary-dim-light-theme:var(--rs-color-primary-dim-dark-theme);
118
118
  --rs-color-primary-fog-light-theme:var(--rs-color-primary-fog-dark-theme);
@@ -123,20 +123,20 @@
123
123
  --rs-color-primary-t-fog-dark-theme
124
124
  );
125
125
  }
126
- ._initial_1fo5jum_54[data-real-placement^='top'] ._content_1fo5jum_13, ._closing_1fo5jum_9[data-real-placement^='top'] ._content_1fo5jum_13{
126
+ ._initial_1kpucek_54[data-real-placement^='top'] ._content_1kpucek_13, ._closing_1kpucek_9[data-real-placement^='top'] ._content_1kpucek_13{
127
127
  transform:translate(0, 10px);
128
128
  }
129
- ._initial_1fo5jum_54[data-real-placement^='right'] ._content_1fo5jum_13, ._closing_1fo5jum_9[data-real-placement^='right'] ._content_1fo5jum_13{
129
+ ._initial_1kpucek_54[data-real-placement^='right'] ._content_1kpucek_13, ._closing_1kpucek_9[data-real-placement^='right'] ._content_1kpucek_13{
130
130
  transform:translate(-10px, 0);
131
131
  }
132
- ._initial_1fo5jum_54[data-real-placement^='bottom'] ._content_1fo5jum_13, ._closing_1fo5jum_9[data-real-placement^='bottom'] ._content_1fo5jum_13{
132
+ ._initial_1kpucek_54[data-real-placement^='bottom'] ._content_1kpucek_13, ._closing_1kpucek_9[data-real-placement^='bottom'] ._content_1kpucek_13{
133
133
  transform:translate(0, -10px);
134
134
  }
135
- ._initial_1fo5jum_54[data-real-placement^='left'] ._content_1fo5jum_13, ._closing_1fo5jum_9[data-real-placement^='left'] ._content_1fo5jum_13{
135
+ ._initial_1kpucek_54[data-real-placement^='left'] ._content_1kpucek_13, ._closing_1kpucek_9[data-real-placement^='left'] ._content_1kpucek_13{
136
136
  transform:translate(10px, 0);
137
137
  }
138
- ._trigger_1fo5jum_113:focus-visible,
139
- ._trigger_1fo5jum_113:focus[data-focus-method='key']{
138
+ ._trigger_1kpucek_113:focus-visible,
139
+ ._trigger_1kpucek_113:focus[data-focus-method='key']{
140
140
  outline:none;
141
141
 
142
142
  box-shadow:var(--rs-color-primary-t-dim-light-theme) 0 0 0 4px;
package/lib/index.p.module.css.js CHANGED
@@ -1,10 +1,10 @@
1
1
  var styles = {
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"
2
+ "tooltip": "_tooltip_1kpucek_5",
3
+ "closing": "_closing_1kpucek_9",
4
+ "content": "_content_1kpucek_13",
5
+ "initial": "_initial_1kpucek_54",
6
+ "outerThemeLight": "_outerThemeLight_1kpucek_68",
7
+ "outerThemeDark": "_outerThemeDark_1kpucek_81",
8
+ "trigger": "_trigger_1kpucek_113"
9
9
  };
10
10
  export { styles as default };
package/lib/tooltip.d.ts CHANGED
@@ -57,6 +57,12 @@ export interface TooltipProps {
57
57
  disableHideDelay?: boolean;
58
58
  /** increase offset from the target */
59
59
  sparse?: boolean;
60
+ /**
61
+ * If set to true, the tooltip will be rendered adjacent to its triggering element.
62
+ * If false or undefined, the tooltip will render at the end of the `document.body` element.
63
+ * Should be used when the tooltip content contains interactive elements (e.g. links).
64
+ */
65
+ renderBesideTrigger?: boolean;
60
66
  }
61
67
  export declare const Tooltip: React.FC<TooltipProps>;
62
68
  export default Tooltip;
package/lib/tooltip.js CHANGED
@@ -105,7 +105,7 @@ const TriggerRenderer = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
105
105
  ...tooltipTargetProps
106
106
  }, children);
107
107
  });
108
- TriggerRenderer.displayName = 'TriggerRenderer';
108
+ TriggerRenderer.displayName = 'TriggerRenderer'; // eslint-disable-next-line complexity
109
109
 
110
110
  const Tooltip = _ref3 => {
111
111
  let {
@@ -118,16 +118,19 @@ const Tooltip = _ref3 => {
118
118
  placement = 'auto',
119
119
  sparse = true,
120
120
  fallbackPlacements = ['top', 'bottom'],
121
- disableHideDelay
121
+ disableHideDelay,
122
+ renderBesideTrigger = false
122
123
  } = _ref3;
123
124
  const [triggerRef, setTriggerRef] = useState(null);
124
125
  const isControlled = typeof isVisibleFromProps !== 'undefined';
125
126
  const [isVisibleState, setIsVisibleState] = useState(false);
126
127
  const [isTooltipHovered, setIsTooltipHovered] = useState(false);
127
128
  const schedulePopperUpdateRef = useRef(null);
129
+ const contentRef = useRef(null);
128
130
  const hideTimeoutRef = useRef(null);
129
131
  const isVisible = isControlled ? isVisibleFromProps : isVisibleState;
130
132
  const isOpen = isVisible || isTooltipHovered;
133
+ const PortalResolved = renderBesideTrigger ? React.Fragment : Portal;
131
134
  useEffect(() => {
132
135
  if (schedulePopperUpdateRef.current) {
133
136
  schedulePopperUpdateRef.current();
@@ -210,7 +213,7 @@ const Tooltip = _ref3 => {
210
213
  handleMouseEnterTarget: handleMouseEnterTarget,
211
214
  handleMouseLeaveTarget: handleMouseLeaveTarget
212
215
  }, children);
213
- }), tooltipShouldBeRendered && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Popper, {
216
+ }), tooltipShouldBeRendered && /*#__PURE__*/React.createElement(PortalResolved, null, /*#__PURE__*/React.createElement(Popper, {
214
217
  placement: placement,
215
218
  modifiers: [// the modifier to trigger starting animation
216
219
  {
@@ -267,7 +270,10 @@ const Tooltip = _ref3 => {
267
270
  theme: "dark",
268
271
  ignoreThemeValueForCSSApi: noProvider
269
272
  }, /*#__PURE__*/React.createElement("div", {
270
- className: cn(styles.content)
273
+ className: cn(styles.content),
274
+ onBlur: handleMouseLeaveTarget,
275
+ onFocus: handleMouseEnterTarget,
276
+ ref: contentRef
271
277
  }, content)));
272
278
  })));
273
279
  });
@@ -283,6 +289,7 @@ Tooltip.propTypes = {
283
289
  placement: PropTypes.oneOf(['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']),
284
290
  fallbackPlacements: PropTypes.arrayOf(PropTypes.oneOf(['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'])),
285
291
  sparse: PropTypes.bool,
286
- disableHideDelay: PropTypes.bool
292
+ disableHideDelay: PropTypes.bool,
293
+ renderBesideTrigger: PropTypes.bool
287
294
  };
288
295
  export { Tooltip, Tooltip as default };
package/package.json CHANGED
@@ -1,10 +1,11 @@
1
1
  {
2
2
  "name": "@rescui/tooltip",
3
- "version": "0.8.14",
3
+ "version": "0.8.15-RUI-226-Update-card-cn-6e43cc89.60+6e43cc89",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
7
7
  "main": "lib/index.js",
8
+ "module": "lib/index.js",
8
9
  "src:main": "src/index.ts",
9
10
  "files": [
10
11
  "lib",
@@ -27,15 +28,15 @@
27
28
  "react-dom": ">=16.8.0 <19"
28
29
  },
29
30
  "devDependencies": {
30
- "@rescui/colors": "^0.2.6",
31
- "@rescui/icons": "^0.16.12",
32
- "@rescui/scripts": "^0.3.5",
33
- "@rescui/typography": "^0.19.1",
31
+ "@rescui/colors": "0.2.7-RUI-226-Update-card-cn-6e43cc89.60+6e43cc89",
32
+ "@rescui/icons": "0.16.13-RUI-226-Update-card-cn-6e43cc89.60+6e43cc89",
33
+ "@rescui/scripts": "0.4.0",
34
+ "@rescui/typography": "0.19.2-RUI-226-Update-card-cn-6e43cc89.60+6e43cc89",
34
35
  "@types/react-is": "^17.0.3"
35
36
  },
36
37
  "scripts": {
37
38
  "build": "rescui-scripts build"
38
39
  },
39
40
  "nx": {},
40
- "gitHead": "67627f69be3de4b4c6a21244fd7de36e841f01f0"
41
+ "gitHead": "6e43cc893fafb22b990273901bc0a070fb15761f"
41
42
  }