@zendeskgarden/react-tooltips 8.57.0 → 8.58.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 (4) hide show
  1. package/dist/index.cjs.js +154 -239
  2. package/dist/index.esm.js +153 -238
  3. package/dist/typings/elements/Tooltip.d.ts +1 -1
  4. package/package.json +3 -3
package/dist/index.cjs.js CHANGED
@@ -26,102 +26,8 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
26
26
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
27
27
  var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
28
28
 
29
- function ownKeys(object, enumerableOnly) {
30
- var keys = Object.keys(object);
31
-
32
- if (Object.getOwnPropertySymbols) {
33
- var symbols = Object.getOwnPropertySymbols(object);
34
- enumerableOnly && (symbols = symbols.filter(function (sym) {
35
- return Object.getOwnPropertyDescriptor(object, sym).enumerable;
36
- })), keys.push.apply(keys, symbols);
37
- }
38
-
39
- return keys;
40
- }
41
-
42
- function _objectSpread2(target) {
43
- for (var i = 1; i < arguments.length; i++) {
44
- var source = null != arguments[i] ? arguments[i] : {};
45
- i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
46
- _defineProperty(target, key, source[key]);
47
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
48
- Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
49
- });
50
- }
51
-
52
- return target;
53
- }
54
-
55
- function _defineProperty(obj, key, value) {
56
- if (key in obj) {
57
- Object.defineProperty(obj, key, {
58
- value: value,
59
- enumerable: true,
60
- configurable: true,
61
- writable: true
62
- });
63
- } else {
64
- obj[key] = value;
65
- }
66
-
67
- return obj;
68
- }
69
-
70
- function _extends() {
71
- _extends = Object.assign ? Object.assign.bind() : function (target) {
72
- for (var i = 1; i < arguments.length; i++) {
73
- var source = arguments[i];
74
-
75
- for (var key in source) {
76
- if (Object.prototype.hasOwnProperty.call(source, key)) {
77
- target[key] = source[key];
78
- }
79
- }
80
- }
81
-
82
- return target;
83
- };
84
- return _extends.apply(this, arguments);
85
- }
86
-
87
- function _objectWithoutPropertiesLoose(source, excluded) {
88
- if (source == null) return {};
89
- var target = {};
90
- var sourceKeys = Object.keys(source);
91
- var key, i;
92
-
93
- for (i = 0; i < sourceKeys.length; i++) {
94
- key = sourceKeys[i];
95
- if (excluded.indexOf(key) >= 0) continue;
96
- target[key] = source[key];
97
- }
98
-
99
- return target;
100
- }
101
-
102
- function _objectWithoutProperties(source, excluded) {
103
- if (source == null) return {};
104
-
105
- var target = _objectWithoutPropertiesLoose(source, excluded);
106
-
107
- var key, i;
108
-
109
- if (Object.getOwnPropertySymbols) {
110
- var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
111
-
112
- for (i = 0; i < sourceSymbolKeys.length; i++) {
113
- key = sourceSymbolKeys[i];
114
- if (excluded.indexOf(key) >= 0) continue;
115
- if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
116
- target[key] = source[key];
117
- }
118
- }
119
-
120
- return target;
121
- }
122
-
123
29
  function getPopperPlacement(gardenPlacement) {
124
- var gardenToPopperMapping = {
30
+ const gardenToPopperMapping = {
125
31
  auto: 'auto',
126
32
  top: 'top',
127
33
  'top-start': 'top-start',
@@ -139,7 +45,7 @@ function getPopperPlacement(gardenPlacement) {
139
45
  return gardenToPopperMapping[gardenPlacement];
140
46
  }
141
47
  function getRtlPopperPlacement(gardenPlacement) {
142
- var rtlPlacementMappings = {
48
+ const rtlPlacementMappings = {
143
49
  left: 'right',
144
50
  'left-start': 'right-start',
145
51
  'left-end': 'right-end',
@@ -151,11 +57,11 @@ function getRtlPopperPlacement(gardenPlacement) {
151
57
  'bottom-start': 'bottom-end',
152
58
  'bottom-end': 'bottom-start'
153
59
  };
154
- var popperPlacement = getPopperPlacement(gardenPlacement);
60
+ const popperPlacement = getPopperPlacement(gardenPlacement);
155
61
  return rtlPlacementMappings[popperPlacement] || popperPlacement;
156
62
  }
157
63
  function getArrowPosition(popperPlacement) {
158
- var arrowPositionMappings = {
64
+ const arrowPositionMappings = {
159
65
  top: 'bottom',
160
66
  'top-start': 'bottom-left',
161
67
  'top-end': 'bottom-right',
@@ -172,54 +78,50 @@ function getArrowPosition(popperPlacement) {
172
78
  return arrowPositionMappings[popperPlacement] || 'top';
173
79
  }
174
80
 
175
- var COMPONENT_ID$2 = 'tooltip.paragraph';
176
- var StyledParagraph = styled__default["default"].p.attrs({
81
+ const COMPONENT_ID$2 = 'tooltip.paragraph';
82
+ const StyledParagraph = styled__default["default"].p.attrs({
177
83
  'data-garden-id': COMPONENT_ID$2,
178
- 'data-garden-version': '8.57.0'
84
+ 'data-garden-version': '8.58.0'
179
85
  }).withConfig({
180
86
  displayName: "StyledParagraph",
181
87
  componentId: "sc-wuqkfc-0"
182
- })(["margin:0;", ";"], function (props) {
183
- return reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props);
184
- });
88
+ })(["margin:0;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
185
89
  StyledParagraph.defaultProps = {
186
90
  theme: reactTheming.DEFAULT_THEME
187
91
  };
188
92
 
189
- var COMPONENT_ID$1 = 'tooltip.title';
190
- var StyledTitle = styled__default["default"].strong.attrs({
93
+ const COMPONENT_ID$1 = 'tooltip.title';
94
+ const StyledTitle = styled__default["default"].strong.attrs({
191
95
  'data-garden-id': COMPONENT_ID$1,
192
- 'data-garden-version': '8.57.0'
96
+ 'data-garden-version': '8.58.0'
193
97
  }).withConfig({
194
98
  displayName: "StyledTitle",
195
99
  componentId: "sc-vnjcvz-0"
196
- })(["display:none;margin:0;font-weight:", ";", ";"], function (props) {
197
- return props.theme.fontWeights.semibold;
198
- }, function (props) {
199
- return reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props);
200
- });
100
+ })(["display:none;margin:0;font-weight:", ";", ";"], props => props.theme.fontWeights.semibold, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
201
101
  StyledTitle.defaultProps = {
202
102
  theme: reactTheming.DEFAULT_THEME
203
103
  };
204
104
 
205
- var COMPONENT_ID = 'tooltip.tooltip';
206
- var sizeStyles = function sizeStyles(_ref) {
207
- var theme = _ref.theme,
208
- size = _ref.size,
209
- type = _ref.type,
210
- placement = _ref.placement,
211
- hasArrow = _ref.hasArrow;
212
- var margin = "".concat(theme.space.base * 1.5, "px");
213
- var borderRadius = theme.borderRadii.sm;
214
- var padding = '0 1em';
215
- var maxWidth;
216
- var overflowWrap;
217
- var whiteSpace = 'nowrap';
218
- var lineHeight = reactTheming.getLineHeight(theme.space.base * 5, theme.fontSizes.sm);
219
- var fontSize = theme.fontSizes.sm;
220
- var titleDisplay;
221
- var paragraphMarginTop;
222
- var wordWrap;
105
+ const COMPONENT_ID = 'tooltip.tooltip';
106
+ const sizeStyles = _ref => {
107
+ let {
108
+ theme,
109
+ size,
110
+ type,
111
+ placement,
112
+ hasArrow
113
+ } = _ref;
114
+ let margin = `${theme.space.base * 1.5}px`;
115
+ let borderRadius = theme.borderRadii.sm;
116
+ let padding = '0 1em';
117
+ let maxWidth;
118
+ let overflowWrap;
119
+ let whiteSpace = 'nowrap';
120
+ let lineHeight = reactTheming.getLineHeight(theme.space.base * 5, theme.fontSizes.sm);
121
+ let fontSize = theme.fontSizes.sm;
122
+ let titleDisplay;
123
+ let paragraphMarginTop;
124
+ let wordWrap;
223
125
  if (size !== 'small') {
224
126
  borderRadius = theme.borderRadii.md;
225
127
  overflowWrap = 'break-word';
@@ -227,26 +129,26 @@ var sizeStyles = function sizeStyles(_ref) {
227
129
  wordWrap = 'break-word';
228
130
  }
229
131
  if (size === 'extra-large') {
230
- padding = "".concat(theme.space.base * 10, "px");
231
- maxWidth = "460px";
132
+ padding = `${theme.space.base * 10}px`;
133
+ maxWidth = `460px`;
232
134
  lineHeight = reactTheming.getLineHeight(theme.space.base * 5, theme.fontSizes.md);
233
- paragraphMarginTop = "".concat(theme.space.base * 2.5, "px");
135
+ paragraphMarginTop = `${theme.space.base * 2.5}px`;
234
136
  } else if (size === 'large') {
235
- padding = "".concat(theme.space.base * 5, "px");
236
- maxWidth = "270px";
137
+ padding = `${theme.space.base * 5}px`;
138
+ maxWidth = `270px`;
237
139
  lineHeight = reactTheming.getLineHeight(theme.space.base * 5, theme.fontSizes.md);
238
- paragraphMarginTop = "".concat(theme.space.base * 2, "px");
140
+ paragraphMarginTop = `${theme.space.base * 2}px`;
239
141
  } else if (size === 'medium') {
240
142
  padding = '1em';
241
- maxWidth = "140px";
143
+ maxWidth = `140px`;
242
144
  lineHeight = reactTheming.getLineHeight(theme.space.base * 4, theme.fontSizes.sm);
243
145
  }
244
146
  if (size === 'extra-large' || size === 'large') {
245
147
  fontSize = theme.fontSizes.md;
246
148
  titleDisplay = 'block';
247
149
  }
248
- var arrowSize;
249
- var arrowInset;
150
+ let arrowSize;
151
+ let arrowInset;
250
152
  if (hasArrow) {
251
153
  if (size === 'small' || size === 'medium') {
252
154
  arrowSize = margin;
@@ -254,11 +156,11 @@ var sizeStyles = function sizeStyles(_ref) {
254
156
  } else {
255
157
  arrowInset = type === 'dark' ? '2px' : '1px';
256
158
  if (size === 'large') {
257
- margin = "".concat(theme.space.base * 2, "px");
159
+ margin = `${theme.space.base * 2}px`;
258
160
  arrowSize = margin;
259
161
  } else if (size === 'extra-large') {
260
- margin = "".concat(theme.space.base * 3, "px");
261
- arrowSize = "".concat(theme.space.base * 2.5, "px");
162
+ margin = `${theme.space.base * 3}px`;
163
+ arrowSize = `${theme.space.base * 2.5}px`;
262
164
  }
263
165
  }
264
166
  }
@@ -267,120 +169,121 @@ var sizeStyles = function sizeStyles(_ref) {
267
169
  inset: arrowInset
268
170
  }), StyledParagraph, paragraphMarginTop, StyledTitle, titleDisplay);
269
171
  };
270
- var colorStyles = function colorStyles(_ref2) {
271
- var theme = _ref2.theme,
272
- type = _ref2.type;
273
- var border;
274
- var boxShadow = theme.shadows.lg("".concat(theme.space.base, "px"), "".concat(theme.space.base * 2, "px"), reactTheming.getColor('chromeHue', 600, theme, 0.15));
275
- var backgroundColor = reactTheming.getColor('chromeHue', 700, theme);
276
- var color = theme.colors.background;
277
- var titleColor;
172
+ const colorStyles = _ref2 => {
173
+ let {
174
+ theme,
175
+ type
176
+ } = _ref2;
177
+ let border;
178
+ let boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, reactTheming.getColor('chromeHue', 600, theme, 0.15));
179
+ let backgroundColor = reactTheming.getColor('chromeHue', 700, theme);
180
+ let color = theme.colors.background;
181
+ let titleColor;
278
182
  if (type === 'light') {
279
- boxShadow = theme.shadows.lg("".concat(theme.space.base * 3, "px"), "".concat(theme.space.base * 5, "px"), reactTheming.getColor('chromeHue', 600, theme, 0.15));
280
- border = "".concat(theme.borders.sm, " ").concat(reactTheming.getColor('neutralHue', 300, theme));
183
+ boxShadow = theme.shadows.lg(`${theme.space.base * 3}px`, `${theme.space.base * 5}px`, reactTheming.getColor('chromeHue', 600, theme, 0.15));
184
+ border = `${theme.borders.sm} ${reactTheming.getColor('neutralHue', 300, theme)}`;
281
185
  backgroundColor = theme.colors.background;
282
186
  color = reactTheming.getColor('neutralHue', 700, theme);
283
187
  titleColor = theme.colors.foreground;
284
188
  }
285
189
  return styled.css(["border:", ";box-shadow:", ";background-color:", ";color:", ";", "{color:", ";}"], border, boxShadow, backgroundColor, color, StyledTitle, titleColor);
286
190
  };
287
- var StyledTooltip = styled__default["default"].div.attrs({
191
+ const StyledTooltip = styled__default["default"].div.attrs({
288
192
  'data-garden-id': COMPONENT_ID,
289
- 'data-garden-version': '8.57.0'
193
+ 'data-garden-version': '8.58.0'
290
194
  }).withConfig({
291
195
  displayName: "StyledTooltip",
292
196
  componentId: "sc-gzzjq4-0"
293
- })(["display:inline-block;box-sizing:border-box;direction:", ";text-align:", ";font-weight:", ";", ";&[aria-hidden='true']{display:none;}", ";", ";"], function (props) {
294
- return props.theme.rtl && 'rtl';
295
- }, function (props) {
296
- return props.theme.rtl ? 'right' : 'left';
297
- }, function (props) {
298
- return props.theme.fontWeights.regular;
299
- }, function (props) {
300
- return sizeStyles(props);
301
- }, colorStyles, function (props) {
302
- return reactTheming.retrieveComponentStyles(COMPONENT_ID, props);
303
- });
197
+ })(["display:inline-block;box-sizing:border-box;direction:", ";text-align:", ";font-weight:", ";", ";&[aria-hidden='true']{display:none;}", ";", ";"], props => props.theme.rtl && 'rtl', props => props.theme.rtl ? 'right' : 'left', props => props.theme.fontWeights.regular, props => sizeStyles(props), colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
304
198
  StyledTooltip.defaultProps = {
305
199
  theme: reactTheming.DEFAULT_THEME
306
200
  };
307
201
 
308
- var StyledTooltipWrapper = styled__default["default"].div.withConfig({
202
+ const StyledTooltipWrapper = styled__default["default"].div.withConfig({
309
203
  displayName: "StyledTooltipWrapper",
310
204
  componentId: "sc-1b7q9q6-0"
311
- })(["transition:opacity 10ms;opacity:1;z-index:", ";&[aria-hidden='true']{visibility:hidden;opacity:0;}"], function (props) {
312
- return props.zIndex;
313
- });
205
+ })(["transition:opacity 10ms;opacity:1;z-index:", ";&[aria-hidden='true']{visibility:hidden;opacity:0;}"], props => props.zIndex);
314
206
  StyledTooltipWrapper.defaultProps = {
315
207
  theme: reactTheming.DEFAULT_THEME
316
208
  };
317
209
 
318
- var SHARED_PLACEMENT = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'];
319
- var PLACEMENT = [].concat(SHARED_PLACEMENT, ['end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom']);
320
- var SIZE = ['small', 'medium', 'large', 'extra-large'];
321
- var TYPE = ['light', 'dark'];
322
-
323
- var _excluded = ["id", "delayMS", "isInitialVisible", "content", "refKey", "placement", "eventsEnabled", "popperModifiers", "children", "hasArrow", "size", "type", "appendToNode", "zIndex", "isVisible"],
324
- _excluded2 = ["onFocus", "onBlur"];
325
- var Tooltip = function Tooltip(_ref) {
326
- var id = _ref.id,
327
- delayMS = _ref.delayMS,
328
- isInitialVisible = _ref.isInitialVisible,
329
- content = _ref.content,
330
- refKey = _ref.refKey,
331
- placement = _ref.placement,
332
- eventsEnabled = _ref.eventsEnabled,
333
- popperModifiers = _ref.popperModifiers,
334
- children = _ref.children,
335
- hasArrow = _ref.hasArrow,
336
- size = _ref.size,
337
- type = _ref.type,
338
- appendToNode = _ref.appendToNode,
339
- zIndex = _ref.zIndex,
340
- externalIsVisible = _ref.isVisible,
341
- otherProps = _objectWithoutProperties(_ref, _excluded);
342
- var theme = React.useContext(styled.ThemeContext);
343
- var scheduleUpdateRef = React.useRef();
344
- var _useTooltip = containerTooltip.useTooltip({
345
- id: id,
210
+ const SHARED_PLACEMENT = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'];
211
+ const PLACEMENT = [...SHARED_PLACEMENT, 'end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom'];
212
+ const SIZE = ['small', 'medium', 'large', 'extra-large'];
213
+ const TYPE = ['light', 'dark'];
214
+
215
+ const Tooltip = _ref => {
216
+ let {
217
+ id,
218
+ delayMS,
219
+ isInitialVisible,
220
+ content,
221
+ refKey,
222
+ placement,
223
+ eventsEnabled,
224
+ popperModifiers,
225
+ children,
226
+ hasArrow,
227
+ size,
228
+ type,
229
+ appendToNode,
230
+ zIndex,
231
+ isVisible: externalIsVisible,
232
+ ...otherProps
233
+ } = _ref;
234
+ const theme = React.useContext(styled.ThemeContext);
235
+ const scheduleUpdateRef = React.useRef();
236
+ const {
237
+ isVisible,
238
+ getTooltipProps,
239
+ getTriggerProps,
240
+ openTooltip,
241
+ closeTooltip
242
+ } = containerTooltip.useTooltip({
243
+ id,
346
244
  delayMilliseconds: delayMS,
347
245
  isVisible: isInitialVisible
348
- }),
349
- isVisible = _useTooltip.isVisible,
350
- getTooltipProps = _useTooltip.getTooltipProps,
351
- getTriggerProps = _useTooltip.getTriggerProps,
352
- openTooltip = _useTooltip.openTooltip,
353
- closeTooltip = _useTooltip.closeTooltip;
354
- var controlledIsVisible = containerUtilities.getControlledValue(externalIsVisible, isVisible);
355
- React.useEffect(function () {
246
+ });
247
+ const controlledIsVisible = containerUtilities.getControlledValue(externalIsVisible, isVisible);
248
+ React.useEffect(() => {
356
249
  if (controlledIsVisible && scheduleUpdateRef.current) {
357
250
  scheduleUpdateRef.current();
358
251
  }
359
252
  }, [controlledIsVisible, content]);
360
- var popperPlacement = theme.rtl ? getRtlPopperPlacement(placement) : getPopperPlacement(placement);
361
- var singleChild = React__default["default"].Children.only(children);
362
- var modifiers = _objectSpread2({
253
+ const popperPlacement = theme.rtl ? getRtlPopperPlacement(placement) : getPopperPlacement(placement);
254
+ const singleChild = React__default["default"].Children.only(children);
255
+ const modifiers = {
363
256
  preventOverflow: {
364
257
  boundariesElement: 'window'
365
- }
366
- }, popperModifiers);
367
- return React__default["default"].createElement(reactPopper.Manager, null, React__default["default"].createElement(reactPopper.Reference, null, function (_ref2) {
368
- var ref = _ref2.ref;
369
- return React.cloneElement(singleChild, getTriggerProps(_objectSpread2(_objectSpread2({}, singleChild.props), {}, _defineProperty({}, refKey, mergeRefs__default["default"]([ref, singleChild.ref ? singleChild.ref : null])))));
258
+ },
259
+ ...popperModifiers
260
+ };
261
+ return React__default["default"].createElement(reactPopper.Manager, null, React__default["default"].createElement(reactPopper.Reference, null, _ref2 => {
262
+ let {
263
+ ref
264
+ } = _ref2;
265
+ return React.cloneElement(singleChild, getTriggerProps({
266
+ ...singleChild.props,
267
+ [refKey]: mergeRefs__default["default"]([ref, singleChild.ref ? singleChild.ref : null])
268
+ }));
370
269
  }), React__default["default"].createElement(reactPopper.Popper, {
371
270
  placement: popperPlacement,
372
271
  eventsEnabled: controlledIsVisible && eventsEnabled,
373
272
  modifiers: modifiers
374
- }, function (_ref3) {
375
- var ref = _ref3.ref,
376
- style = _ref3.style,
377
- scheduleUpdate = _ref3.scheduleUpdate,
378
- currentPlacement = _ref3.placement;
273
+ }, _ref3 => {
274
+ let {
275
+ ref,
276
+ style,
277
+ scheduleUpdate,
278
+ placement: currentPlacement
279
+ } = _ref3;
379
280
  scheduleUpdateRef.current = scheduleUpdate;
380
- var onFocus = otherProps.onFocus,
381
- onBlur = otherProps.onBlur,
382
- otherTooltipProps = _objectWithoutProperties(otherProps, _excluded2);
383
- var computedSize = size;
281
+ const {
282
+ onFocus,
283
+ onBlur,
284
+ ...otherTooltipProps
285
+ } = otherProps;
286
+ let computedSize = size;
384
287
  if (computedSize === undefined) {
385
288
  if (type === 'dark') {
386
289
  computedSize = 'small';
@@ -388,20 +291,21 @@ var Tooltip = function Tooltip(_ref) {
388
291
  computedSize = 'large';
389
292
  }
390
293
  }
391
- var tooltipProps = _objectSpread2({
392
- hasArrow: hasArrow,
294
+ const tooltipProps = {
295
+ hasArrow,
393
296
  placement: currentPlacement,
394
297
  size: computedSize,
395
- onFocus: containerUtilities.composeEventHandlers(onFocus, function () {
298
+ onFocus: containerUtilities.composeEventHandlers(onFocus, () => {
396
299
  openTooltip();
397
300
  }),
398
- onBlur: containerUtilities.composeEventHandlers(onBlur, function () {
301
+ onBlur: containerUtilities.composeEventHandlers(onBlur, () => {
399
302
  closeTooltip(0);
400
303
  }),
401
304
  'aria-hidden': !controlledIsVisible,
402
- type: type
403
- }, otherTooltipProps);
404
- var tooltip = React__default["default"].createElement(StyledTooltipWrapper, {
305
+ type,
306
+ ...otherTooltipProps
307
+ };
308
+ const tooltip = React__default["default"].createElement(StyledTooltipWrapper, {
405
309
  ref: controlledIsVisible ? ref : null,
406
310
  style: style,
407
311
  zIndex: zIndex,
@@ -438,18 +342,29 @@ Tooltip.defaultProps = {
438
342
  refKey: 'ref'
439
343
  };
440
344
 
441
- var Paragraph = React.forwardRef(function (props, ref) {
442
- return React__default["default"].createElement(StyledParagraph, _extends({
443
- ref: ref
444
- }, props));
445
- });
345
+ function _extends() {
346
+ _extends = Object.assign ? Object.assign.bind() : function (target) {
347
+ for (var i = 1; i < arguments.length; i++) {
348
+ var source = arguments[i];
349
+ for (var key in source) {
350
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
351
+ target[key] = source[key];
352
+ }
353
+ }
354
+ }
355
+ return target;
356
+ };
357
+ return _extends.apply(this, arguments);
358
+ }
359
+
360
+ const Paragraph = React.forwardRef((props, ref) => React__default["default"].createElement(StyledParagraph, _extends({
361
+ ref: ref
362
+ }, props)));
446
363
  Paragraph.displayName = 'Paragraph';
447
364
 
448
- var Title = React.forwardRef(function (props, ref) {
449
- return React__default["default"].createElement(StyledTitle, _extends({
450
- ref: ref
451
- }, props));
452
- });
365
+ const Title = React.forwardRef((props, ref) => React__default["default"].createElement(StyledTitle, _extends({
366
+ ref: ref
367
+ }, props)));
453
368
  Title.displayName = 'Title';
454
369
 
455
370
  exports.Paragraph = Paragraph;
package/dist/index.esm.js CHANGED
@@ -15,102 +15,8 @@ import { getControlledValue, composeEventHandlers } from '@zendeskgarden/contain
15
15
  import { Manager, Reference, Popper } from 'react-popper';
16
16
  import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight, arrowStyles, getColor } from '@zendeskgarden/react-theming';
17
17
 
18
- function ownKeys(object, enumerableOnly) {
19
- var keys = Object.keys(object);
20
-
21
- if (Object.getOwnPropertySymbols) {
22
- var symbols = Object.getOwnPropertySymbols(object);
23
- enumerableOnly && (symbols = symbols.filter(function (sym) {
24
- return Object.getOwnPropertyDescriptor(object, sym).enumerable;
25
- })), keys.push.apply(keys, symbols);
26
- }
27
-
28
- return keys;
29
- }
30
-
31
- function _objectSpread2(target) {
32
- for (var i = 1; i < arguments.length; i++) {
33
- var source = null != arguments[i] ? arguments[i] : {};
34
- i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
35
- _defineProperty(target, key, source[key]);
36
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
37
- Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
38
- });
39
- }
40
-
41
- return target;
42
- }
43
-
44
- function _defineProperty(obj, key, value) {
45
- if (key in obj) {
46
- Object.defineProperty(obj, key, {
47
- value: value,
48
- enumerable: true,
49
- configurable: true,
50
- writable: true
51
- });
52
- } else {
53
- obj[key] = value;
54
- }
55
-
56
- return obj;
57
- }
58
-
59
- function _extends() {
60
- _extends = Object.assign ? Object.assign.bind() : function (target) {
61
- for (var i = 1; i < arguments.length; i++) {
62
- var source = arguments[i];
63
-
64
- for (var key in source) {
65
- if (Object.prototype.hasOwnProperty.call(source, key)) {
66
- target[key] = source[key];
67
- }
68
- }
69
- }
70
-
71
- return target;
72
- };
73
- return _extends.apply(this, arguments);
74
- }
75
-
76
- function _objectWithoutPropertiesLoose(source, excluded) {
77
- if (source == null) return {};
78
- var target = {};
79
- var sourceKeys = Object.keys(source);
80
- var key, i;
81
-
82
- for (i = 0; i < sourceKeys.length; i++) {
83
- key = sourceKeys[i];
84
- if (excluded.indexOf(key) >= 0) continue;
85
- target[key] = source[key];
86
- }
87
-
88
- return target;
89
- }
90
-
91
- function _objectWithoutProperties(source, excluded) {
92
- if (source == null) return {};
93
-
94
- var target = _objectWithoutPropertiesLoose(source, excluded);
95
-
96
- var key, i;
97
-
98
- if (Object.getOwnPropertySymbols) {
99
- var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
100
-
101
- for (i = 0; i < sourceSymbolKeys.length; i++) {
102
- key = sourceSymbolKeys[i];
103
- if (excluded.indexOf(key) >= 0) continue;
104
- if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
105
- target[key] = source[key];
106
- }
107
- }
108
-
109
- return target;
110
- }
111
-
112
18
  function getPopperPlacement(gardenPlacement) {
113
- var gardenToPopperMapping = {
19
+ const gardenToPopperMapping = {
114
20
  auto: 'auto',
115
21
  top: 'top',
116
22
  'top-start': 'top-start',
@@ -128,7 +34,7 @@ function getPopperPlacement(gardenPlacement) {
128
34
  return gardenToPopperMapping[gardenPlacement];
129
35
  }
130
36
  function getRtlPopperPlacement(gardenPlacement) {
131
- var rtlPlacementMappings = {
37
+ const rtlPlacementMappings = {
132
38
  left: 'right',
133
39
  'left-start': 'right-start',
134
40
  'left-end': 'right-end',
@@ -140,11 +46,11 @@ function getRtlPopperPlacement(gardenPlacement) {
140
46
  'bottom-start': 'bottom-end',
141
47
  'bottom-end': 'bottom-start'
142
48
  };
143
- var popperPlacement = getPopperPlacement(gardenPlacement);
49
+ const popperPlacement = getPopperPlacement(gardenPlacement);
144
50
  return rtlPlacementMappings[popperPlacement] || popperPlacement;
145
51
  }
146
52
  function getArrowPosition(popperPlacement) {
147
- var arrowPositionMappings = {
53
+ const arrowPositionMappings = {
148
54
  top: 'bottom',
149
55
  'top-start': 'bottom-left',
150
56
  'top-end': 'bottom-right',
@@ -161,54 +67,50 @@ function getArrowPosition(popperPlacement) {
161
67
  return arrowPositionMappings[popperPlacement] || 'top';
162
68
  }
163
69
 
164
- var COMPONENT_ID$2 = 'tooltip.paragraph';
165
- var StyledParagraph = styled.p.attrs({
70
+ const COMPONENT_ID$2 = 'tooltip.paragraph';
71
+ const StyledParagraph = styled.p.attrs({
166
72
  'data-garden-id': COMPONENT_ID$2,
167
- 'data-garden-version': '8.57.0'
73
+ 'data-garden-version': '8.58.0'
168
74
  }).withConfig({
169
75
  displayName: "StyledParagraph",
170
76
  componentId: "sc-wuqkfc-0"
171
- })(["margin:0;", ";"], function (props) {
172
- return retrieveComponentStyles(COMPONENT_ID$2, props);
173
- });
77
+ })(["margin:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID$2, props));
174
78
  StyledParagraph.defaultProps = {
175
79
  theme: DEFAULT_THEME
176
80
  };
177
81
 
178
- var COMPONENT_ID$1 = 'tooltip.title';
179
- var StyledTitle = styled.strong.attrs({
82
+ const COMPONENT_ID$1 = 'tooltip.title';
83
+ const StyledTitle = styled.strong.attrs({
180
84
  'data-garden-id': COMPONENT_ID$1,
181
- 'data-garden-version': '8.57.0'
85
+ 'data-garden-version': '8.58.0'
182
86
  }).withConfig({
183
87
  displayName: "StyledTitle",
184
88
  componentId: "sc-vnjcvz-0"
185
- })(["display:none;margin:0;font-weight:", ";", ";"], function (props) {
186
- return props.theme.fontWeights.semibold;
187
- }, function (props) {
188
- return retrieveComponentStyles(COMPONENT_ID$1, props);
189
- });
89
+ })(["display:none;margin:0;font-weight:", ";", ";"], props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID$1, props));
190
90
  StyledTitle.defaultProps = {
191
91
  theme: DEFAULT_THEME
192
92
  };
193
93
 
194
- var COMPONENT_ID = 'tooltip.tooltip';
195
- var sizeStyles = function sizeStyles(_ref) {
196
- var theme = _ref.theme,
197
- size = _ref.size,
198
- type = _ref.type,
199
- placement = _ref.placement,
200
- hasArrow = _ref.hasArrow;
201
- var margin = "".concat(theme.space.base * 1.5, "px");
202
- var borderRadius = theme.borderRadii.sm;
203
- var padding = '0 1em';
204
- var maxWidth;
205
- var overflowWrap;
206
- var whiteSpace = 'nowrap';
207
- var lineHeight = getLineHeight(theme.space.base * 5, theme.fontSizes.sm);
208
- var fontSize = theme.fontSizes.sm;
209
- var titleDisplay;
210
- var paragraphMarginTop;
211
- var wordWrap;
94
+ const COMPONENT_ID = 'tooltip.tooltip';
95
+ const sizeStyles = _ref => {
96
+ let {
97
+ theme,
98
+ size,
99
+ type,
100
+ placement,
101
+ hasArrow
102
+ } = _ref;
103
+ let margin = `${theme.space.base * 1.5}px`;
104
+ let borderRadius = theme.borderRadii.sm;
105
+ let padding = '0 1em';
106
+ let maxWidth;
107
+ let overflowWrap;
108
+ let whiteSpace = 'nowrap';
109
+ let lineHeight = getLineHeight(theme.space.base * 5, theme.fontSizes.sm);
110
+ let fontSize = theme.fontSizes.sm;
111
+ let titleDisplay;
112
+ let paragraphMarginTop;
113
+ let wordWrap;
212
114
  if (size !== 'small') {
213
115
  borderRadius = theme.borderRadii.md;
214
116
  overflowWrap = 'break-word';
@@ -216,26 +118,26 @@ var sizeStyles = function sizeStyles(_ref) {
216
118
  wordWrap = 'break-word';
217
119
  }
218
120
  if (size === 'extra-large') {
219
- padding = "".concat(theme.space.base * 10, "px");
220
- maxWidth = "460px";
121
+ padding = `${theme.space.base * 10}px`;
122
+ maxWidth = `460px`;
221
123
  lineHeight = getLineHeight(theme.space.base * 5, theme.fontSizes.md);
222
- paragraphMarginTop = "".concat(theme.space.base * 2.5, "px");
124
+ paragraphMarginTop = `${theme.space.base * 2.5}px`;
223
125
  } else if (size === 'large') {
224
- padding = "".concat(theme.space.base * 5, "px");
225
- maxWidth = "270px";
126
+ padding = `${theme.space.base * 5}px`;
127
+ maxWidth = `270px`;
226
128
  lineHeight = getLineHeight(theme.space.base * 5, theme.fontSizes.md);
227
- paragraphMarginTop = "".concat(theme.space.base * 2, "px");
129
+ paragraphMarginTop = `${theme.space.base * 2}px`;
228
130
  } else if (size === 'medium') {
229
131
  padding = '1em';
230
- maxWidth = "140px";
132
+ maxWidth = `140px`;
231
133
  lineHeight = getLineHeight(theme.space.base * 4, theme.fontSizes.sm);
232
134
  }
233
135
  if (size === 'extra-large' || size === 'large') {
234
136
  fontSize = theme.fontSizes.md;
235
137
  titleDisplay = 'block';
236
138
  }
237
- var arrowSize;
238
- var arrowInset;
139
+ let arrowSize;
140
+ let arrowInset;
239
141
  if (hasArrow) {
240
142
  if (size === 'small' || size === 'medium') {
241
143
  arrowSize = margin;
@@ -243,11 +145,11 @@ var sizeStyles = function sizeStyles(_ref) {
243
145
  } else {
244
146
  arrowInset = type === 'dark' ? '2px' : '1px';
245
147
  if (size === 'large') {
246
- margin = "".concat(theme.space.base * 2, "px");
148
+ margin = `${theme.space.base * 2}px`;
247
149
  arrowSize = margin;
248
150
  } else if (size === 'extra-large') {
249
- margin = "".concat(theme.space.base * 3, "px");
250
- arrowSize = "".concat(theme.space.base * 2.5, "px");
151
+ margin = `${theme.space.base * 3}px`;
152
+ arrowSize = `${theme.space.base * 2.5}px`;
251
153
  }
252
154
  }
253
155
  }
@@ -256,120 +158,121 @@ var sizeStyles = function sizeStyles(_ref) {
256
158
  inset: arrowInset
257
159
  }), StyledParagraph, paragraphMarginTop, StyledTitle, titleDisplay);
258
160
  };
259
- var colorStyles = function colorStyles(_ref2) {
260
- var theme = _ref2.theme,
261
- type = _ref2.type;
262
- var border;
263
- var boxShadow = theme.shadows.lg("".concat(theme.space.base, "px"), "".concat(theme.space.base * 2, "px"), getColor('chromeHue', 600, theme, 0.15));
264
- var backgroundColor = getColor('chromeHue', 700, theme);
265
- var color = theme.colors.background;
266
- var titleColor;
161
+ const colorStyles = _ref2 => {
162
+ let {
163
+ theme,
164
+ type
165
+ } = _ref2;
166
+ let border;
167
+ let boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, getColor('chromeHue', 600, theme, 0.15));
168
+ let backgroundColor = getColor('chromeHue', 700, theme);
169
+ let color = theme.colors.background;
170
+ let titleColor;
267
171
  if (type === 'light') {
268
- boxShadow = theme.shadows.lg("".concat(theme.space.base * 3, "px"), "".concat(theme.space.base * 5, "px"), getColor('chromeHue', 600, theme, 0.15));
269
- border = "".concat(theme.borders.sm, " ").concat(getColor('neutralHue', 300, theme));
172
+ boxShadow = theme.shadows.lg(`${theme.space.base * 3}px`, `${theme.space.base * 5}px`, getColor('chromeHue', 600, theme, 0.15));
173
+ border = `${theme.borders.sm} ${getColor('neutralHue', 300, theme)}`;
270
174
  backgroundColor = theme.colors.background;
271
175
  color = getColor('neutralHue', 700, theme);
272
176
  titleColor = theme.colors.foreground;
273
177
  }
274
178
  return css(["border:", ";box-shadow:", ";background-color:", ";color:", ";", "{color:", ";}"], border, boxShadow, backgroundColor, color, StyledTitle, titleColor);
275
179
  };
276
- var StyledTooltip = styled.div.attrs({
180
+ const StyledTooltip = styled.div.attrs({
277
181
  'data-garden-id': COMPONENT_ID,
278
- 'data-garden-version': '8.57.0'
182
+ 'data-garden-version': '8.58.0'
279
183
  }).withConfig({
280
184
  displayName: "StyledTooltip",
281
185
  componentId: "sc-gzzjq4-0"
282
- })(["display:inline-block;box-sizing:border-box;direction:", ";text-align:", ";font-weight:", ";", ";&[aria-hidden='true']{display:none;}", ";", ";"], function (props) {
283
- return props.theme.rtl && 'rtl';
284
- }, function (props) {
285
- return props.theme.rtl ? 'right' : 'left';
286
- }, function (props) {
287
- return props.theme.fontWeights.regular;
288
- }, function (props) {
289
- return sizeStyles(props);
290
- }, colorStyles, function (props) {
291
- return retrieveComponentStyles(COMPONENT_ID, props);
292
- });
186
+ })(["display:inline-block;box-sizing:border-box;direction:", ";text-align:", ";font-weight:", ";", ";&[aria-hidden='true']{display:none;}", ";", ";"], props => props.theme.rtl && 'rtl', props => props.theme.rtl ? 'right' : 'left', props => props.theme.fontWeights.regular, props => sizeStyles(props), colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
293
187
  StyledTooltip.defaultProps = {
294
188
  theme: DEFAULT_THEME
295
189
  };
296
190
 
297
- var StyledTooltipWrapper = styled.div.withConfig({
191
+ const StyledTooltipWrapper = styled.div.withConfig({
298
192
  displayName: "StyledTooltipWrapper",
299
193
  componentId: "sc-1b7q9q6-0"
300
- })(["transition:opacity 10ms;opacity:1;z-index:", ";&[aria-hidden='true']{visibility:hidden;opacity:0;}"], function (props) {
301
- return props.zIndex;
302
- });
194
+ })(["transition:opacity 10ms;opacity:1;z-index:", ";&[aria-hidden='true']{visibility:hidden;opacity:0;}"], props => props.zIndex);
303
195
  StyledTooltipWrapper.defaultProps = {
304
196
  theme: DEFAULT_THEME
305
197
  };
306
198
 
307
- var SHARED_PLACEMENT = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'];
308
- var PLACEMENT = [].concat(SHARED_PLACEMENT, ['end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom']);
309
- var SIZE = ['small', 'medium', 'large', 'extra-large'];
310
- var TYPE = ['light', 'dark'];
199
+ const SHARED_PLACEMENT = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'];
200
+ const PLACEMENT = [...SHARED_PLACEMENT, 'end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom'];
201
+ const SIZE = ['small', 'medium', 'large', 'extra-large'];
202
+ const TYPE = ['light', 'dark'];
311
203
 
312
- var _excluded = ["id", "delayMS", "isInitialVisible", "content", "refKey", "placement", "eventsEnabled", "popperModifiers", "children", "hasArrow", "size", "type", "appendToNode", "zIndex", "isVisible"],
313
- _excluded2 = ["onFocus", "onBlur"];
314
- var Tooltip = function Tooltip(_ref) {
315
- var id = _ref.id,
316
- delayMS = _ref.delayMS,
317
- isInitialVisible = _ref.isInitialVisible,
318
- content = _ref.content,
319
- refKey = _ref.refKey,
320
- placement = _ref.placement,
321
- eventsEnabled = _ref.eventsEnabled,
322
- popperModifiers = _ref.popperModifiers,
323
- children = _ref.children,
324
- hasArrow = _ref.hasArrow,
325
- size = _ref.size,
326
- type = _ref.type,
327
- appendToNode = _ref.appendToNode,
328
- zIndex = _ref.zIndex,
329
- externalIsVisible = _ref.isVisible,
330
- otherProps = _objectWithoutProperties(_ref, _excluded);
331
- var theme = useContext(ThemeContext);
332
- var scheduleUpdateRef = useRef();
333
- var _useTooltip = useTooltip({
334
- id: id,
204
+ const Tooltip = _ref => {
205
+ let {
206
+ id,
207
+ delayMS,
208
+ isInitialVisible,
209
+ content,
210
+ refKey,
211
+ placement,
212
+ eventsEnabled,
213
+ popperModifiers,
214
+ children,
215
+ hasArrow,
216
+ size,
217
+ type,
218
+ appendToNode,
219
+ zIndex,
220
+ isVisible: externalIsVisible,
221
+ ...otherProps
222
+ } = _ref;
223
+ const theme = useContext(ThemeContext);
224
+ const scheduleUpdateRef = useRef();
225
+ const {
226
+ isVisible,
227
+ getTooltipProps,
228
+ getTriggerProps,
229
+ openTooltip,
230
+ closeTooltip
231
+ } = useTooltip({
232
+ id,
335
233
  delayMilliseconds: delayMS,
336
234
  isVisible: isInitialVisible
337
- }),
338
- isVisible = _useTooltip.isVisible,
339
- getTooltipProps = _useTooltip.getTooltipProps,
340
- getTriggerProps = _useTooltip.getTriggerProps,
341
- openTooltip = _useTooltip.openTooltip,
342
- closeTooltip = _useTooltip.closeTooltip;
343
- var controlledIsVisible = getControlledValue(externalIsVisible, isVisible);
344
- useEffect(function () {
235
+ });
236
+ const controlledIsVisible = getControlledValue(externalIsVisible, isVisible);
237
+ useEffect(() => {
345
238
  if (controlledIsVisible && scheduleUpdateRef.current) {
346
239
  scheduleUpdateRef.current();
347
240
  }
348
241
  }, [controlledIsVisible, content]);
349
- var popperPlacement = theme.rtl ? getRtlPopperPlacement(placement) : getPopperPlacement(placement);
350
- var singleChild = React.Children.only(children);
351
- var modifiers = _objectSpread2({
242
+ const popperPlacement = theme.rtl ? getRtlPopperPlacement(placement) : getPopperPlacement(placement);
243
+ const singleChild = React.Children.only(children);
244
+ const modifiers = {
352
245
  preventOverflow: {
353
246
  boundariesElement: 'window'
354
- }
355
- }, popperModifiers);
356
- return React.createElement(Manager, null, React.createElement(Reference, null, function (_ref2) {
357
- var ref = _ref2.ref;
358
- return cloneElement(singleChild, getTriggerProps(_objectSpread2(_objectSpread2({}, singleChild.props), {}, _defineProperty({}, refKey, mergeRefs([ref, singleChild.ref ? singleChild.ref : null])))));
247
+ },
248
+ ...popperModifiers
249
+ };
250
+ return React.createElement(Manager, null, React.createElement(Reference, null, _ref2 => {
251
+ let {
252
+ ref
253
+ } = _ref2;
254
+ return cloneElement(singleChild, getTriggerProps({
255
+ ...singleChild.props,
256
+ [refKey]: mergeRefs([ref, singleChild.ref ? singleChild.ref : null])
257
+ }));
359
258
  }), React.createElement(Popper, {
360
259
  placement: popperPlacement,
361
260
  eventsEnabled: controlledIsVisible && eventsEnabled,
362
261
  modifiers: modifiers
363
- }, function (_ref3) {
364
- var ref = _ref3.ref,
365
- style = _ref3.style,
366
- scheduleUpdate = _ref3.scheduleUpdate,
367
- currentPlacement = _ref3.placement;
262
+ }, _ref3 => {
263
+ let {
264
+ ref,
265
+ style,
266
+ scheduleUpdate,
267
+ placement: currentPlacement
268
+ } = _ref3;
368
269
  scheduleUpdateRef.current = scheduleUpdate;
369
- var onFocus = otherProps.onFocus,
370
- onBlur = otherProps.onBlur,
371
- otherTooltipProps = _objectWithoutProperties(otherProps, _excluded2);
372
- var computedSize = size;
270
+ const {
271
+ onFocus,
272
+ onBlur,
273
+ ...otherTooltipProps
274
+ } = otherProps;
275
+ let computedSize = size;
373
276
  if (computedSize === undefined) {
374
277
  if (type === 'dark') {
375
278
  computedSize = 'small';
@@ -377,20 +280,21 @@ var Tooltip = function Tooltip(_ref) {
377
280
  computedSize = 'large';
378
281
  }
379
282
  }
380
- var tooltipProps = _objectSpread2({
381
- hasArrow: hasArrow,
283
+ const tooltipProps = {
284
+ hasArrow,
382
285
  placement: currentPlacement,
383
286
  size: computedSize,
384
- onFocus: composeEventHandlers(onFocus, function () {
287
+ onFocus: composeEventHandlers(onFocus, () => {
385
288
  openTooltip();
386
289
  }),
387
- onBlur: composeEventHandlers(onBlur, function () {
290
+ onBlur: composeEventHandlers(onBlur, () => {
388
291
  closeTooltip(0);
389
292
  }),
390
293
  'aria-hidden': !controlledIsVisible,
391
- type: type
392
- }, otherTooltipProps);
393
- var tooltip = React.createElement(StyledTooltipWrapper, {
294
+ type,
295
+ ...otherTooltipProps
296
+ };
297
+ const tooltip = React.createElement(StyledTooltipWrapper, {
394
298
  ref: controlledIsVisible ? ref : null,
395
299
  style: style,
396
300
  zIndex: zIndex,
@@ -427,18 +331,29 @@ Tooltip.defaultProps = {
427
331
  refKey: 'ref'
428
332
  };
429
333
 
430
- var Paragraph = forwardRef(function (props, ref) {
431
- return React.createElement(StyledParagraph, _extends({
432
- ref: ref
433
- }, props));
434
- });
334
+ function _extends() {
335
+ _extends = Object.assign ? Object.assign.bind() : function (target) {
336
+ for (var i = 1; i < arguments.length; i++) {
337
+ var source = arguments[i];
338
+ for (var key in source) {
339
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
340
+ target[key] = source[key];
341
+ }
342
+ }
343
+ }
344
+ return target;
345
+ };
346
+ return _extends.apply(this, arguments);
347
+ }
348
+
349
+ const Paragraph = forwardRef((props, ref) => React.createElement(StyledParagraph, _extends({
350
+ ref: ref
351
+ }, props)));
435
352
  Paragraph.displayName = 'Paragraph';
436
353
 
437
- var Title = forwardRef(function (props, ref) {
438
- return React.createElement(StyledTitle, _extends({
439
- ref: ref
440
- }, props));
441
- });
354
+ const Title = forwardRef((props, ref) => React.createElement(StyledTitle, _extends({
355
+ ref: ref
356
+ }, props)));
442
357
  Title.displayName = 'Title';
443
358
 
444
359
  export { Paragraph, Title, Tooltip };
package/dist/typings/elements/Tooltip.d.ts CHANGED
@@ -10,7 +10,7 @@ import { ITooltipProps } from '../types';
10
10
  * @extends HTMLAttributes<HTMLDivElement>
11
11
  */
12
12
  export declare const Tooltip: {
13
- ({ id, delayMS, isInitialVisible, content, refKey, placement, eventsEnabled, popperModifiers, children, hasArrow, size, type, appendToNode, zIndex, isVisible, ...otherProps }: ITooltipProps): JSX.Element;
13
+ ({ id, delayMS, isInitialVisible, content, refKey, placement, eventsEnabled, popperModifiers, children, hasArrow, size, type, appendToNode, zIndex, isVisible: externalIsVisible, ...otherProps }: ITooltipProps): JSX.Element;
14
14
  displayName: string;
15
15
  propTypes: {
16
16
  appendToNode: PropTypes.Requireable<any>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-tooltips",
3
- "version": "8.57.0",
3
+ "version": "8.58.0",
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": "^4.2.0 || ^5.0.0"
36
36
  },
37
37
  "devDependencies": {
38
- "@zendeskgarden/react-theming": "^8.57.0"
38
+ "@zendeskgarden/react-theming": "^8.58.0"
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": "165b6a453118f93e9e760642b632ce3d31e3a231"
50
+ "gitHead": "07760a92573b619860e1252f6931467b9123f1b6"
51
51
  }