@zendeskgarden/react-tooltips 9.1.1 → 9.1.2

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 (9) hide show
  1. package/dist/esm/elements/Tooltip.js +7 -7
  2. package/dist/esm/styled/StyledParagraph.js +1 -1
  3. package/dist/esm/styled/StyledTitle.js +1 -1
  4. package/dist/esm/styled/StyledTooltip.js +18 -18
  5. package/dist/esm/styled/StyledTooltipWrapper.js +1 -1
  6. package/dist/index.cjs.js +28 -28
  7. package/dist/typings/styled/StyledTooltip.d.ts +5 -3
  8. package/dist/typings/styled/StyledTooltipWrapper.d.ts +1 -1
  9. package/package.json +3 -3
package/dist/esm/elements/Tooltip.js CHANGED
@@ -92,16 +92,16 @@ const TooltipComponent = _ref => {
92
92
  style: {
93
93
  transform
94
94
  },
95
- zIndex: zIndex,
95
+ $zIndex: zIndex,
96
96
  "aria-hidden": !controlledIsVisible
97
97
  }, React.createElement(StyledTooltip, getTooltipProps({
98
- hasArrow,
99
- placement,
100
- size: toSize(size, type),
101
- onFocus: composeEventHandlers(onFocus, openTooltip),
102
- onBlur: composeEventHandlers(onBlur, () => closeTooltip(0)),
103
98
  'aria-hidden': !controlledIsVisible,
104
- type,
99
+ $hasArrow: hasArrow,
100
+ $placement: placement,
101
+ $size: toSize(size, type),
102
+ $type: type,
103
+ onBlur: composeEventHandlers(onBlur, () => closeTooltip(0)),
104
+ onFocus: composeEventHandlers(onFocus, openTooltip),
105
105
  ...props
106
106
  }), content));
107
107
  return React.createElement(React.Fragment, null, cloneElement(Child, getTriggerProps({
package/dist/esm/styled/StyledParagraph.js CHANGED
@@ -10,7 +10,7 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
10
10
  const COMPONENT_ID = 'tooltip.paragraph';
11
11
  const StyledParagraph = styled.p.attrs({
12
12
  'data-garden-id': COMPONENT_ID,
13
- 'data-garden-version': '9.1.1'
13
+ 'data-garden-version': '9.1.2'
14
14
  }).withConfig({
15
15
  displayName: "StyledParagraph",
16
16
  componentId: "sc-wuqkfc-0"
package/dist/esm/styled/StyledTitle.js CHANGED
@@ -10,7 +10,7 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
10
10
  const COMPONENT_ID = 'tooltip.title';
11
11
  const StyledTitle = styled.strong.attrs({
12
12
  'data-garden-id': COMPONENT_ID,
13
- 'data-garden-version': '9.1.1'
13
+ 'data-garden-version': '9.1.2'
14
14
  }).withConfig({
15
15
  displayName: "StyledTitle",
16
16
  componentId: "sc-vnjcvz-0"
package/dist/esm/styled/StyledTooltip.js CHANGED
@@ -13,9 +13,9 @@ const COMPONENT_ID = 'tooltip.tooltip';
13
13
  const sizeStyles = _ref => {
14
14
  let {
15
15
  theme,
16
- size,
17
- placement,
18
- hasArrow
16
+ $hasArrow,
17
+ $placement,
18
+ $size
19
19
  } = _ref;
20
20
  let margin = `${theme.space.base * 1.5}px`;
21
21
  let borderRadius = theme.borderRadii.sm;
@@ -28,52 +28,52 @@ const sizeStyles = _ref => {
28
28
  let titleDisplay;
29
29
  let paragraphMarginTop;
30
30
  let wordWrap;
31
- if (size !== 'small') {
31
+ if ($size !== 'small') {
32
32
  borderRadius = theme.borderRadii.md;
33
33
  overflowWrap = 'break-word';
34
34
  whiteSpace = 'normal';
35
35
  wordWrap = 'break-word';
36
36
  }
37
- if (size === 'extra-large') {
37
+ if ($size === 'extra-large') {
38
38
  padding = `${theme.space.base * 10}px`;
39
39
  maxWidth = `460px`;
40
40
  lineHeight = getLineHeight(theme.space.base * 5, theme.fontSizes.md);
41
41
  paragraphMarginTop = `${theme.space.base * 2.5}px`;
42
- } else if (size === 'large') {
42
+ } else if ($size === 'large') {
43
43
  padding = `${theme.space.base * 5}px`;
44
44
  maxWidth = `270px`;
45
45
  lineHeight = getLineHeight(theme.space.base * 5, theme.fontSizes.md);
46
46
  paragraphMarginTop = `${theme.space.base * 2}px`;
47
- } else if (size === 'medium') {
47
+ } else if ($size === 'medium') {
48
48
  padding = '1em';
49
49
  maxWidth = `140px`;
50
50
  lineHeight = getLineHeight(theme.space.base * 4, theme.fontSizes.sm);
51
51
  }
52
- if (size === 'extra-large' || size === 'large') {
52
+ if ($size === 'extra-large' || $size === 'large') {
53
53
  fontSize = theme.fontSizes.md;
54
54
  titleDisplay = 'block';
55
55
  }
56
56
  let arrowSize;
57
57
  let arrowShift;
58
- if (hasArrow) {
59
- if (size === 'small') {
58
+ if ($hasArrow) {
59
+ if ($size === 'small') {
60
60
  arrowSize = margin;
61
- if (['left-start', 'left-end', 'right-start', 'right-end'].includes(placement)) {
61
+ if (['left-start', 'left-end', 'right-start', 'right-end'].includes($placement)) {
62
62
  arrowShift = `-${theme.borderRadii.md}px`;
63
63
  } else {
64
64
  arrowShift = '0';
65
65
  }
66
- } else if (size === 'medium') {
66
+ } else if ($size === 'medium') {
67
67
  arrowSize = margin;
68
- } else if (size === 'large') {
68
+ } else if ($size === 'large') {
69
69
  margin = `${theme.space.base * 2}px`;
70
70
  arrowSize = margin;
71
- } else if (size === 'extra-large') {
71
+ } else if ($size === 'extra-large') {
72
72
  margin = `${theme.space.base * 3}px`;
73
73
  arrowSize = `${theme.space.base * 2.5}px`;
74
74
  }
75
75
  }
76
- return css(["margin:", ";border-radius:", ";padding:", ";max-width:", ";line-height:", ";word-wrap:", ";white-space:", ";font-size:", ";overflow-wrap:", ";", ";", "{margin-top:", ";}", "{display:", ";}"], margin, borderRadius, padding, maxWidth, lineHeight, wordWrap, whiteSpace, fontSize, overflowWrap, hasArrow && arrowStyles(getArrowPosition(theme, placement), {
76
+ return css(["margin:", ";border-radius:", ";padding:", ";max-width:", ";line-height:", ";word-wrap:", ";white-space:", ";font-size:", ";overflow-wrap:", ";", ";", "{margin-top:", ";}", "{display:", ";}"], margin, borderRadius, padding, maxWidth, lineHeight, wordWrap, whiteSpace, fontSize, overflowWrap, $hasArrow && arrowStyles(getArrowPosition(theme, $placement), {
77
77
  size: arrowSize,
78
78
  shift: arrowShift
79
79
  }), StyledParagraph, paragraphMarginTop, StyledTitle, titleDisplay);
@@ -81,14 +81,14 @@ const sizeStyles = _ref => {
81
81
  const colorStyles = _ref2 => {
82
82
  let {
83
83
  theme,
84
- type
84
+ $type
85
85
  } = _ref2;
86
86
  let borderColor;
87
87
  let boxShadow;
88
88
  let backgroundColor;
89
89
  let color;
90
90
  let titleColor;
91
- if (type === 'light') {
91
+ if ($type === 'light') {
92
92
  backgroundColor = getColor({
93
93
  theme,
94
94
  variable: 'background.raised'
@@ -134,7 +134,7 @@ const colorStyles = _ref2 => {
134
134
  };
135
135
  const StyledTooltip = styled.div.attrs({
136
136
  'data-garden-id': COMPONENT_ID,
137
- 'data-garden-version': '9.1.1'
137
+ 'data-garden-version': '9.1.2'
138
138
  }).withConfig({
139
139
  displayName: "StyledTooltip",
140
140
  componentId: "sc-gzzjq4-0"
package/dist/esm/styled/StyledTooltipWrapper.js CHANGED
@@ -9,6 +9,6 @@ import styled from 'styled-components';
9
9
  const StyledTooltipWrapper = styled.div.withConfig({
10
10
  displayName: "StyledTooltipWrapper",
11
11
  componentId: "sc-1b7q9q6-0"
12
- })(["position:absolute;top:0;left:0;transition:opacity 10ms;opacity:1;z-index:", ";&[aria-hidden='true']{visibility:hidden;opacity:0;}"], props => props.zIndex);
12
+ })(["position:absolute;top:0;left:0;transition:opacity 10ms;opacity:1;z-index:", ";&[aria-hidden='true']{visibility:hidden;opacity:0;}"], props => props.$zIndex);
13
13
 
14
14
  export { StyledTooltipWrapper };
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.1.1'
28
+ 'data-garden-version': '9.1.2'
29
29
  }).withConfig({
30
30
  displayName: "StyledParagraph",
31
31
  componentId: "sc-wuqkfc-0"
@@ -34,7 +34,7 @@ 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.1.1'
37
+ 'data-garden-version': '9.1.2'
38
38
  }).withConfig({
39
39
  displayName: "StyledTitle",
40
40
  componentId: "sc-vnjcvz-0"
@@ -44,9 +44,9 @@ const COMPONENT_ID = 'tooltip.tooltip';
44
44
  const sizeStyles = _ref => {
45
45
  let {
46
46
  theme,
47
- size,
48
- placement,
49
- hasArrow
47
+ $hasArrow,
48
+ $placement,
49
+ $size
50
50
  } = _ref;
51
51
  let margin = `${theme.space.base * 1.5}px`;
52
52
  let borderRadius = theme.borderRadii.sm;
@@ -59,52 +59,52 @@ const sizeStyles = _ref => {
59
59
  let titleDisplay;
60
60
  let paragraphMarginTop;
61
61
  let wordWrap;
62
- if (size !== 'small') {
62
+ if ($size !== 'small') {
63
63
  borderRadius = theme.borderRadii.md;
64
64
  overflowWrap = 'break-word';
65
65
  whiteSpace = 'normal';
66
66
  wordWrap = 'break-word';
67
67
  }
68
- if (size === 'extra-large') {
68
+ if ($size === 'extra-large') {
69
69
  padding = `${theme.space.base * 10}px`;
70
70
  maxWidth = `460px`;
71
71
  lineHeight = reactTheming.getLineHeight(theme.space.base * 5, theme.fontSizes.md);
72
72
  paragraphMarginTop = `${theme.space.base * 2.5}px`;
73
- } else if (size === 'large') {
73
+ } else if ($size === 'large') {
74
74
  padding = `${theme.space.base * 5}px`;
75
75
  maxWidth = `270px`;
76
76
  lineHeight = reactTheming.getLineHeight(theme.space.base * 5, theme.fontSizes.md);
77
77
  paragraphMarginTop = `${theme.space.base * 2}px`;
78
- } else if (size === 'medium') {
78
+ } else if ($size === 'medium') {
79
79
  padding = '1em';
80
80
  maxWidth = `140px`;
81
81
  lineHeight = reactTheming.getLineHeight(theme.space.base * 4, theme.fontSizes.sm);
82
82
  }
83
- if (size === 'extra-large' || size === 'large') {
83
+ if ($size === 'extra-large' || $size === 'large') {
84
84
  fontSize = theme.fontSizes.md;
85
85
  titleDisplay = 'block';
86
86
  }
87
87
  let arrowSize;
88
88
  let arrowShift;
89
- if (hasArrow) {
90
- if (size === 'small') {
89
+ if ($hasArrow) {
90
+ if ($size === 'small') {
91
91
  arrowSize = margin;
92
- if (['left-start', 'left-end', 'right-start', 'right-end'].includes(placement)) {
92
+ if (['left-start', 'left-end', 'right-start', 'right-end'].includes($placement)) {
93
93
  arrowShift = `-${theme.borderRadii.md}px`;
94
94
  } else {
95
95
  arrowShift = '0';
96
96
  }
97
- } else if (size === 'medium') {
97
+ } else if ($size === 'medium') {
98
98
  arrowSize = margin;
99
- } else if (size === 'large') {
99
+ } else if ($size === 'large') {
100
100
  margin = `${theme.space.base * 2}px`;
101
101
  arrowSize = margin;
102
- } else if (size === 'extra-large') {
102
+ } else if ($size === 'extra-large') {
103
103
  margin = `${theme.space.base * 3}px`;
104
104
  arrowSize = `${theme.space.base * 2.5}px`;
105
105
  }
106
106
  }
107
- return styled.css(["margin:", ";border-radius:", ";padding:", ";max-width:", ";line-height:", ";word-wrap:", ";white-space:", ";font-size:", ";overflow-wrap:", ";", ";", "{margin-top:", ";}", "{display:", ";}"], margin, borderRadius, padding, maxWidth, lineHeight, wordWrap, whiteSpace, fontSize, overflowWrap, hasArrow && reactTheming.arrowStyles(reactTheming.getArrowPosition(theme, placement), {
107
+ return styled.css(["margin:", ";border-radius:", ";padding:", ";max-width:", ";line-height:", ";word-wrap:", ";white-space:", ";font-size:", ";overflow-wrap:", ";", ";", "{margin-top:", ";}", "{display:", ";}"], margin, borderRadius, padding, maxWidth, lineHeight, wordWrap, whiteSpace, fontSize, overflowWrap, $hasArrow && reactTheming.arrowStyles(reactTheming.getArrowPosition(theme, $placement), {
108
108
  size: arrowSize,
109
109
  shift: arrowShift
110
110
  }), StyledParagraph, paragraphMarginTop, StyledTitle, titleDisplay);
@@ -112,14 +112,14 @@ const sizeStyles = _ref => {
112
112
  const colorStyles = _ref2 => {
113
113
  let {
114
114
  theme,
115
- type
115
+ $type
116
116
  } = _ref2;
117
117
  let borderColor;
118
118
  let boxShadow;
119
119
  let backgroundColor;
120
120
  let color;
121
121
  let titleColor;
122
- if (type === 'light') {
122
+ if ($type === 'light') {
123
123
  backgroundColor = reactTheming.getColor({
124
124
  theme,
125
125
  variable: 'background.raised'
@@ -165,7 +165,7 @@ const colorStyles = _ref2 => {
165
165
  };
166
166
  const StyledTooltip = styled__default.default.div.attrs({
167
167
  'data-garden-id': COMPONENT_ID,
168
- 'data-garden-version': '9.1.1'
168
+ 'data-garden-version': '9.1.2'
169
169
  }).withConfig({
170
170
  displayName: "StyledTooltip",
171
171
  componentId: "sc-gzzjq4-0"
@@ -174,7 +174,7 @@ const StyledTooltip = styled__default.default.div.attrs({
174
174
  const StyledTooltipWrapper = styled__default.default.div.withConfig({
175
175
  displayName: "StyledTooltipWrapper",
176
176
  componentId: "sc-1b7q9q6-0"
177
- })(["position:absolute;top:0;left:0;transition:opacity 10ms;opacity:1;z-index:", ";&[aria-hidden='true']{visibility:hidden;opacity:0;}"], props => props.zIndex);
177
+ })(["position:absolute;top:0;left:0;transition:opacity 10ms;opacity:1;z-index:", ";&[aria-hidden='true']{visibility:hidden;opacity:0;}"], props => props.$zIndex);
178
178
 
179
179
  const Paragraph = React.forwardRef((props, ref) => React__default.default.createElement(StyledParagraph, Object.assign({
180
180
  ref: ref
@@ -268,16 +268,16 @@ const TooltipComponent = _ref => {
268
268
  style: {
269
269
  transform
270
270
  },
271
- zIndex: zIndex,
271
+ $zIndex: zIndex,
272
272
  "aria-hidden": !controlledIsVisible
273
273
  }, React__default.default.createElement(StyledTooltip, getTooltipProps({
274
- hasArrow,
275
- placement,
276
- size: toSize(size, type),
277
- onFocus: containerUtilities.composeEventHandlers(onFocus, openTooltip),
278
- onBlur: containerUtilities.composeEventHandlers(onBlur, () => closeTooltip(0)),
279
274
  'aria-hidden': !controlledIsVisible,
280
- type,
275
+ $hasArrow: hasArrow,
276
+ $placement: placement,
277
+ $size: toSize(size, type),
278
+ $type: type,
279
+ onBlur: containerUtilities.composeEventHandlers(onBlur, () => closeTooltip(0)),
280
+ onFocus: containerUtilities.composeEventHandlers(onFocus, openTooltip),
281
281
  ...props
282
282
  }), content));
283
283
  return React__default.default.createElement(React__default.default.Fragment, null, React.cloneElement(Child, getTriggerProps({
package/dist/typings/styled/StyledTooltip.d.ts CHANGED
@@ -7,9 +7,11 @@
7
7
  import { DefaultTheme } from 'styled-components';
8
8
  import { Placement } from '@floating-ui/react-dom';
9
9
  import { ITooltipProps } from '../types';
10
- interface IStyledTooltipProps extends Pick<ITooltipProps, 'hasArrow' | 'size' | 'zIndex'> {
11
- placement: Placement;
12
- type: NonNullable<ITooltipProps['type']>;
10
+ interface IStyledTooltipProps {
11
+ $hasArrow: ITooltipProps['hasArrow'];
12
+ $placement: Placement;
13
+ $size: NonNullable<ITooltipProps['size']>;
14
+ $type: NonNullable<ITooltipProps['type']>;
13
15
  }
14
16
  /**
15
17
  * Accepts all `<div>` props
package/dist/typings/styled/StyledTooltipWrapper.d.ts CHANGED
@@ -5,5 +5,5 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  export declare const StyledTooltipWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
8
- zIndex?: number | string;
8
+ $zIndex?: number | string;
9
9
  }, never>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-tooltips",
3
- "version": "9.1.1",
3
+ "version": "9.1.2",
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,7 +35,7 @@
35
35
  "styled-components": "^5.3.1"
36
36
  },
37
37
  "devDependencies": {
38
- "@zendeskgarden/react-theming": "^9.1.1"
38
+ "@zendeskgarden/react-theming": "^9.1.2"
39
39
  },
40
40
  "keywords": [
41
41
  "components",
@@ -47,5 +47,5 @@
47
47
  "access": "public"
48
48
  },
49
49
  "zendeskgarden:src": "src/index.ts",
50
- "gitHead": "21eaf7b57f27f1a846ed332f1b8e655d6bc0a13b"
50
+ "gitHead": "dd7b2e7fb6747ef39a028b4e7b9924c2098deea0"
51
51
  }