@zendeskgarden/react-tooltips 9.12.3 → 9.12.4
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.
|
@@ -15,34 +15,33 @@ import '../styled/StyledParagraph.js';
|
|
|
15
15
|
import '../styled/StyledTitle.js';
|
|
16
16
|
import { StyledTooltip } from '../styled/StyledTooltip.js';
|
|
17
17
|
import { StyledTooltipWrapper } from '../styled/StyledTooltipWrapper.js';
|
|
18
|
-
import {
|
|
19
|
-
import { useFloating,
|
|
18
|
+
import { TYPE, SIZE, PLACEMENT } from '../types/index.js';
|
|
19
|
+
import { useFloating, autoPlacement, flip, platform, autoUpdate } from '@floating-ui/react-dom';
|
|
20
20
|
import { DEFAULT_THEME, getFloatingPlacements } from '@zendeskgarden/react-theming';
|
|
21
21
|
import { toSize } from './utils.js';
|
|
22
22
|
import { Paragraph } from './Paragraph.js';
|
|
23
23
|
import { Title } from './Title.js';
|
|
24
24
|
|
|
25
25
|
const PLACEMENT_DEFAULT = 'top';
|
|
26
|
-
const TooltipComponent =
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
} = _ref;
|
|
26
|
+
const TooltipComponent = ({
|
|
27
|
+
id,
|
|
28
|
+
delayMS = 500,
|
|
29
|
+
isInitialVisible,
|
|
30
|
+
content,
|
|
31
|
+
refKey = 'ref',
|
|
32
|
+
placement: _placement = PLACEMENT_DEFAULT,
|
|
33
|
+
fallbackPlacements: _fallbackPlacements,
|
|
34
|
+
children,
|
|
35
|
+
hasArrow = true,
|
|
36
|
+
size,
|
|
37
|
+
type = 'dark',
|
|
38
|
+
appendToNode,
|
|
39
|
+
zIndex,
|
|
40
|
+
isVisible: externalIsVisible,
|
|
41
|
+
onFocus,
|
|
42
|
+
onBlur,
|
|
43
|
+
...props
|
|
44
|
+
}) => {
|
|
46
45
|
const theme = useContext(ThemeContext) || DEFAULT_THEME;
|
|
47
46
|
const triggerRef = useRef(null);
|
|
48
47
|
const floatingRef = useRef(null);
|
|
@@ -7,10 +7,10 @@
|
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
|
-
const COMPONENT_ID = 'tooltip.paragraph';
|
|
10
|
+
const COMPONENT_ID$2 = 'tooltip.paragraph';
|
|
11
11
|
const StyledParagraph = styled.p.attrs({
|
|
12
|
-
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.12.
|
|
12
|
+
'data-garden-id': COMPONENT_ID$2,
|
|
13
|
+
'data-garden-version': '9.12.4'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledParagraph",
|
|
16
16
|
componentId: "sc-wuqkfc-0"
|
|
@@ -7,10 +7,10 @@
|
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
|
-
const COMPONENT_ID = 'tooltip.title';
|
|
10
|
+
const COMPONENT_ID$1 = 'tooltip.title';
|
|
11
11
|
const StyledTitle = styled.strong.attrs({
|
|
12
|
-
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.12.
|
|
12
|
+
'data-garden-id': COMPONENT_ID$1,
|
|
13
|
+
'data-garden-version': '9.12.4'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledTitle",
|
|
16
16
|
componentId: "sc-vnjcvz-0"
|
|
@@ -10,13 +10,12 @@ import { StyledParagraph } from './StyledParagraph.js';
|
|
|
10
10
|
import { StyledTitle } from './StyledTitle.js';
|
|
11
11
|
|
|
12
12
|
const COMPONENT_ID = 'tooltip.tooltip';
|
|
13
|
-
const sizeStyles =
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
} = _ref;
|
|
13
|
+
const sizeStyles = ({
|
|
14
|
+
theme,
|
|
15
|
+
$hasArrow,
|
|
16
|
+
$placement,
|
|
17
|
+
$size
|
|
18
|
+
}) => {
|
|
20
19
|
let margin = `${theme.space.base * 1.5}px`;
|
|
21
20
|
let borderRadius = theme.borderRadii.sm;
|
|
22
21
|
let padding = '0 1em';
|
|
@@ -78,11 +77,10 @@ const sizeStyles = _ref => {
|
|
|
78
77
|
shift: arrowShift
|
|
79
78
|
}), StyledParagraph, paragraphMarginTop, StyledTitle, titleDisplay);
|
|
80
79
|
};
|
|
81
|
-
const colorStyles =
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
} = _ref2;
|
|
80
|
+
const colorStyles = ({
|
|
81
|
+
theme,
|
|
82
|
+
$type
|
|
83
|
+
}) => {
|
|
86
84
|
let borderColor;
|
|
87
85
|
let boxShadow;
|
|
88
86
|
let backgroundColor;
|
|
@@ -134,7 +132,7 @@ const colorStyles = _ref2 => {
|
|
|
134
132
|
};
|
|
135
133
|
const StyledTooltip = styled.div.attrs({
|
|
136
134
|
'data-garden-id': COMPONENT_ID,
|
|
137
|
-
'data-garden-version': '9.12.
|
|
135
|
+
'data-garden-version': '9.12.4'
|
|
138
136
|
}).withConfig({
|
|
139
137
|
displayName: "StyledTooltip",
|
|
140
138
|
componentId: "sc-gzzjq4-0"
|
package/dist/index.cjs.js
CHANGED
|
@@ -25,7 +25,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
|
|
|
25
25
|
const COMPONENT_ID$2 = 'tooltip.paragraph';
|
|
26
26
|
const StyledParagraph = styled__default.default.p.attrs({
|
|
27
27
|
'data-garden-id': COMPONENT_ID$2,
|
|
28
|
-
'data-garden-version': '9.12.
|
|
28
|
+
'data-garden-version': '9.12.4'
|
|
29
29
|
}).withConfig({
|
|
30
30
|
displayName: "StyledParagraph",
|
|
31
31
|
componentId: "sc-wuqkfc-0"
|
|
@@ -34,20 +34,19 @@ const StyledParagraph = styled__default.default.p.attrs({
|
|
|
34
34
|
const COMPONENT_ID$1 = 'tooltip.title';
|
|
35
35
|
const StyledTitle = styled__default.default.strong.attrs({
|
|
36
36
|
'data-garden-id': COMPONENT_ID$1,
|
|
37
|
-
'data-garden-version': '9.12.
|
|
37
|
+
'data-garden-version': '9.12.4'
|
|
38
38
|
}).withConfig({
|
|
39
39
|
displayName: "StyledTitle",
|
|
40
40
|
componentId: "sc-vnjcvz-0"
|
|
41
41
|
})(["display:none;margin:0;font-weight:", ";", ";"], props => props.theme.fontWeights.semibold, reactTheming.componentStyles);
|
|
42
42
|
|
|
43
43
|
const COMPONENT_ID = 'tooltip.tooltip';
|
|
44
|
-
const sizeStyles =
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
} = _ref;
|
|
44
|
+
const sizeStyles = ({
|
|
45
|
+
theme,
|
|
46
|
+
$hasArrow,
|
|
47
|
+
$placement,
|
|
48
|
+
$size
|
|
49
|
+
}) => {
|
|
51
50
|
let margin = `${theme.space.base * 1.5}px`;
|
|
52
51
|
let borderRadius = theme.borderRadii.sm;
|
|
53
52
|
let padding = '0 1em';
|
|
@@ -109,11 +108,10 @@ const sizeStyles = _ref => {
|
|
|
109
108
|
shift: arrowShift
|
|
110
109
|
}), StyledParagraph, paragraphMarginTop, StyledTitle, titleDisplay);
|
|
111
110
|
};
|
|
112
|
-
const colorStyles =
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
} = _ref2;
|
|
111
|
+
const colorStyles = ({
|
|
112
|
+
theme,
|
|
113
|
+
$type
|
|
114
|
+
}) => {
|
|
117
115
|
let borderColor;
|
|
118
116
|
let boxShadow;
|
|
119
117
|
let backgroundColor;
|
|
@@ -165,7 +163,7 @@ const colorStyles = _ref2 => {
|
|
|
165
163
|
};
|
|
166
164
|
const StyledTooltip = styled__default.default.div.attrs({
|
|
167
165
|
'data-garden-id': COMPONENT_ID,
|
|
168
|
-
'data-garden-version': '9.12.
|
|
166
|
+
'data-garden-version': '9.12.4'
|
|
169
167
|
}).withConfig({
|
|
170
168
|
displayName: "StyledTooltip",
|
|
171
169
|
componentId: "sc-gzzjq4-0"
|
|
@@ -199,26 +197,25 @@ const toSize = (size, type) => {
|
|
|
199
197
|
};
|
|
200
198
|
|
|
201
199
|
const PLACEMENT_DEFAULT = 'top';
|
|
202
|
-
const TooltipComponent =
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
} = _ref;
|
|
200
|
+
const TooltipComponent = ({
|
|
201
|
+
id,
|
|
202
|
+
delayMS = 500,
|
|
203
|
+
isInitialVisible,
|
|
204
|
+
content,
|
|
205
|
+
refKey = 'ref',
|
|
206
|
+
placement: _placement = PLACEMENT_DEFAULT,
|
|
207
|
+
fallbackPlacements: _fallbackPlacements,
|
|
208
|
+
children,
|
|
209
|
+
hasArrow = true,
|
|
210
|
+
size,
|
|
211
|
+
type = 'dark',
|
|
212
|
+
appendToNode,
|
|
213
|
+
zIndex,
|
|
214
|
+
isVisible: externalIsVisible,
|
|
215
|
+
onFocus,
|
|
216
|
+
onBlur,
|
|
217
|
+
...props
|
|
218
|
+
}) => {
|
|
222
219
|
const theme = React.useContext(styled.ThemeContext) || reactTheming.DEFAULT_THEME;
|
|
223
220
|
const triggerRef = React.useRef(null);
|
|
224
221
|
const floatingRef = React.useRef(null);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-tooltips",
|
|
3
|
-
"version": "9.12.
|
|
3
|
+
"version": "9.12.4",
|
|
4
4
|
"description": "Collection of components and render prop containers relating to Tooltips in the Garden Design System",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Zendesk Garden <garden@zendesk.com>",
|
|
@@ -35,10 +35,10 @@
|
|
|
35
35
|
"styled-components": "^5.3.1 || ^6.0.0"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@zendeskgarden/react-buttons": "^9.12.
|
|
39
|
-
"@zendeskgarden/react-dropdowns": "^9.12.
|
|
40
|
-
"@zendeskgarden/react-grid": "^9.12.
|
|
41
|
-
"@zendeskgarden/react-theming": "^9.12.
|
|
38
|
+
"@zendeskgarden/react-buttons": "^9.12.4",
|
|
39
|
+
"@zendeskgarden/react-dropdowns": "^9.12.4",
|
|
40
|
+
"@zendeskgarden/react-grid": "^9.12.4",
|
|
41
|
+
"@zendeskgarden/react-theming": "^9.12.4"
|
|
42
42
|
},
|
|
43
43
|
"keywords": [
|
|
44
44
|
"components",
|
|
@@ -50,5 +50,5 @@
|
|
|
50
50
|
"access": "public"
|
|
51
51
|
},
|
|
52
52
|
"zendeskgarden:src": "src/index.ts",
|
|
53
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "e79e9687e6bcbd097c059add2938cdae59a5173b"
|
|
54
54
|
}
|