@zendeskgarden/react-tooltips 8.49.0 → 8.49.3
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.
- package/dist/index.cjs.js +11 -6
- package/dist/index.esm.js +11 -6
- package/dist/typings/elements/Tooltip.d.ts +4 -39
- package/dist/typings/index.d.ts +1 -1
- package/dist/typings/styled/StyledTooltip.d.ts +5 -9
- package/dist/typings/styled/index.d.ts +0 -1
- package/dist/typings/types/index.d.ts +46 -0
- package/dist/typings/utils/gardenPlacements.d.ts +4 -8
- package/package.json +3 -3
package/dist/index.cjs.js
CHANGED
|
@@ -176,7 +176,7 @@ function getArrowPosition(popperPlacement) {
|
|
|
176
176
|
var COMPONENT_ID$2 = 'tooltip.paragraph';
|
|
177
177
|
var StyledParagraph = styled__default["default"].p.attrs({
|
|
178
178
|
'data-garden-id': COMPONENT_ID$2,
|
|
179
|
-
'data-garden-version': '8.49.
|
|
179
|
+
'data-garden-version': '8.49.3'
|
|
180
180
|
}).withConfig({
|
|
181
181
|
displayName: "StyledParagraph",
|
|
182
182
|
componentId: "sc-wuqkfc-0"
|
|
@@ -190,7 +190,7 @@ StyledParagraph.defaultProps = {
|
|
|
190
190
|
var COMPONENT_ID$1 = 'tooltip.title';
|
|
191
191
|
var StyledTitle = styled__default["default"].strong.attrs({
|
|
192
192
|
'data-garden-id': COMPONENT_ID$1,
|
|
193
|
-
'data-garden-version': '8.49.
|
|
193
|
+
'data-garden-version': '8.49.3'
|
|
194
194
|
}).withConfig({
|
|
195
195
|
displayName: "StyledTitle",
|
|
196
196
|
componentId: "sc-vnjcvz-0"
|
|
@@ -287,7 +287,7 @@ var colorStyles = function colorStyles(_ref2) {
|
|
|
287
287
|
};
|
|
288
288
|
var StyledTooltip = styled__default["default"].div.attrs({
|
|
289
289
|
'data-garden-id': COMPONENT_ID,
|
|
290
|
-
'data-garden-version': '8.49.
|
|
290
|
+
'data-garden-version': '8.49.3'
|
|
291
291
|
}).withConfig({
|
|
292
292
|
displayName: "StyledTooltip",
|
|
293
293
|
componentId: "sc-gzzjq4-0"
|
|
@@ -316,6 +316,11 @@ StyledTooltipWrapper.defaultProps = {
|
|
|
316
316
|
theme: reactTheming.DEFAULT_THEME
|
|
317
317
|
};
|
|
318
318
|
|
|
319
|
+
var SHARED_PLACEMENT = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'];
|
|
320
|
+
var PLACEMENT = [].concat(SHARED_PLACEMENT, ['end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom']);
|
|
321
|
+
var SIZE = ['small', 'medium', 'large', 'extra-large'];
|
|
322
|
+
var TYPE = ['light', 'dark'];
|
|
323
|
+
|
|
319
324
|
var _excluded = ["id", "delayMS", "isInitialVisible", "content", "refKey", "placement", "eventsEnabled", "popperModifiers", "children", "hasArrow", "size", "type", "appendToNode", "zIndex", "isVisible"],
|
|
320
325
|
_excluded2 = ["onFocus", "onBlur"];
|
|
321
326
|
var Tooltip = function Tooltip(_ref) {
|
|
@@ -417,10 +422,10 @@ Tooltip.propTypes = {
|
|
|
417
422
|
eventsEnabled: PropTypes__default["default"].bool,
|
|
418
423
|
id: PropTypes__default["default"].string,
|
|
419
424
|
content: PropTypes__default["default"].node.isRequired,
|
|
420
|
-
placement: PropTypes__default["default"].oneOf(
|
|
425
|
+
placement: PropTypes__default["default"].oneOf(PLACEMENT),
|
|
421
426
|
popperModifiers: PropTypes__default["default"].any,
|
|
422
|
-
size: PropTypes__default["default"].oneOf(
|
|
423
|
-
type: PropTypes__default["default"].oneOf(
|
|
427
|
+
size: PropTypes__default["default"].oneOf(SIZE),
|
|
428
|
+
type: PropTypes__default["default"].oneOf(TYPE),
|
|
424
429
|
zIndex: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
|
|
425
430
|
isInitialVisible: PropTypes__default["default"].bool,
|
|
426
431
|
refKey: PropTypes__default["default"].string
|
package/dist/index.esm.js
CHANGED
|
@@ -165,7 +165,7 @@ function getArrowPosition(popperPlacement) {
|
|
|
165
165
|
var COMPONENT_ID$2 = 'tooltip.paragraph';
|
|
166
166
|
var StyledParagraph = styled.p.attrs({
|
|
167
167
|
'data-garden-id': COMPONENT_ID$2,
|
|
168
|
-
'data-garden-version': '8.49.
|
|
168
|
+
'data-garden-version': '8.49.3'
|
|
169
169
|
}).withConfig({
|
|
170
170
|
displayName: "StyledParagraph",
|
|
171
171
|
componentId: "sc-wuqkfc-0"
|
|
@@ -179,7 +179,7 @@ StyledParagraph.defaultProps = {
|
|
|
179
179
|
var COMPONENT_ID$1 = 'tooltip.title';
|
|
180
180
|
var StyledTitle = styled.strong.attrs({
|
|
181
181
|
'data-garden-id': COMPONENT_ID$1,
|
|
182
|
-
'data-garden-version': '8.49.
|
|
182
|
+
'data-garden-version': '8.49.3'
|
|
183
183
|
}).withConfig({
|
|
184
184
|
displayName: "StyledTitle",
|
|
185
185
|
componentId: "sc-vnjcvz-0"
|
|
@@ -276,7 +276,7 @@ var colorStyles = function colorStyles(_ref2) {
|
|
|
276
276
|
};
|
|
277
277
|
var StyledTooltip = styled.div.attrs({
|
|
278
278
|
'data-garden-id': COMPONENT_ID,
|
|
279
|
-
'data-garden-version': '8.49.
|
|
279
|
+
'data-garden-version': '8.49.3'
|
|
280
280
|
}).withConfig({
|
|
281
281
|
displayName: "StyledTooltip",
|
|
282
282
|
componentId: "sc-gzzjq4-0"
|
|
@@ -305,6 +305,11 @@ StyledTooltipWrapper.defaultProps = {
|
|
|
305
305
|
theme: DEFAULT_THEME
|
|
306
306
|
};
|
|
307
307
|
|
|
308
|
+
var SHARED_PLACEMENT = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'];
|
|
309
|
+
var PLACEMENT = [].concat(SHARED_PLACEMENT, ['end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom']);
|
|
310
|
+
var SIZE = ['small', 'medium', 'large', 'extra-large'];
|
|
311
|
+
var TYPE = ['light', 'dark'];
|
|
312
|
+
|
|
308
313
|
var _excluded = ["id", "delayMS", "isInitialVisible", "content", "refKey", "placement", "eventsEnabled", "popperModifiers", "children", "hasArrow", "size", "type", "appendToNode", "zIndex", "isVisible"],
|
|
309
314
|
_excluded2 = ["onFocus", "onBlur"];
|
|
310
315
|
var Tooltip = function Tooltip(_ref) {
|
|
@@ -406,10 +411,10 @@ Tooltip.propTypes = {
|
|
|
406
411
|
eventsEnabled: PropTypes.bool,
|
|
407
412
|
id: PropTypes.string,
|
|
408
413
|
content: PropTypes.node.isRequired,
|
|
409
|
-
placement: PropTypes.oneOf(
|
|
414
|
+
placement: PropTypes.oneOf(PLACEMENT),
|
|
410
415
|
popperModifiers: PropTypes.any,
|
|
411
|
-
size: PropTypes.oneOf(
|
|
412
|
-
type: PropTypes.oneOf(
|
|
416
|
+
size: PropTypes.oneOf(SIZE),
|
|
417
|
+
type: PropTypes.oneOf(TYPE),
|
|
413
418
|
zIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
414
419
|
isInitialVisible: PropTypes.bool,
|
|
415
420
|
refKey: PropTypes.string
|
|
@@ -4,43 +4,8 @@
|
|
|
4
4
|
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
|
-
import React, { HTMLAttributes } from 'react';
|
|
8
7
|
import PropTypes from 'prop-types';
|
|
9
|
-
import {
|
|
10
|
-
import { GARDEN_PLACEMENT } from '../utils/gardenPlacements';
|
|
11
|
-
import { TOOLTIP_SIZE, TOOLTIP_TYPE } from '../styled';
|
|
12
|
-
export interface ITooltipProps extends HTMLAttributes<HTMLDivElement> {
|
|
13
|
-
/** Appends the tooltip to the element provided */
|
|
14
|
-
appendToNode?: Element;
|
|
15
|
-
/** Adds an arrow to the tooltip */
|
|
16
|
-
hasArrow?: boolean;
|
|
17
|
-
/** Adds milliseconds of delay to the opening and closing of the tooltip */
|
|
18
|
-
delayMS?: number;
|
|
19
|
-
/** Allows the tooltip to reposition during browser resize events */
|
|
20
|
-
eventsEnabled?: boolean;
|
|
21
|
-
/** Defines the content of the tooltip */
|
|
22
|
-
content: React.ReactNode;
|
|
23
|
-
/**
|
|
24
|
-
* Adjusts the placement of the tooltip
|
|
25
|
-
**/
|
|
26
|
-
placement?: GARDEN_PLACEMENT;
|
|
27
|
-
/** Passes configurations to the [Popper instance](https://popper.js.org/docs/v2/modifiers/) */
|
|
28
|
-
popperModifiers?: Modifiers;
|
|
29
|
-
/** Adjusts the padding and font size */
|
|
30
|
-
size?: TOOLTIP_SIZE;
|
|
31
|
-
/** Specifies the tooltip type */
|
|
32
|
-
type?: TOOLTIP_TYPE;
|
|
33
|
-
/** Sets the `z-index` of the tooltip */
|
|
34
|
-
zIndex?: number | string;
|
|
35
|
-
/** Displays the tooltip on initial render */
|
|
36
|
-
isInitialVisible?: boolean;
|
|
37
|
-
/** Displays the tooltip */
|
|
38
|
-
isVisible?: boolean;
|
|
39
|
-
/** @ignore ReactNode override */
|
|
40
|
-
children: React.ReactElement;
|
|
41
|
-
/** Defines the ref key used to position the tooltip */
|
|
42
|
-
refKey?: string;
|
|
43
|
-
}
|
|
8
|
+
import { ITooltipProps } from '../types';
|
|
44
9
|
/**
|
|
45
10
|
* @extends HTMLAttributes<HTMLDivElement>
|
|
46
11
|
*/
|
|
@@ -54,10 +19,10 @@ export declare const Tooltip: {
|
|
|
54
19
|
eventsEnabled: PropTypes.Requireable<boolean>;
|
|
55
20
|
id: PropTypes.Requireable<string>;
|
|
56
21
|
content: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
|
|
57
|
-
placement: PropTypes.Requireable<
|
|
22
|
+
placement: PropTypes.Requireable<"auto" | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "end" | "end-top" | "end-bottom" | "start" | "start-top" | "start-bottom">;
|
|
58
23
|
popperModifiers: PropTypes.Requireable<any>;
|
|
59
|
-
size: PropTypes.Requireable<
|
|
60
|
-
type: PropTypes.Requireable<
|
|
24
|
+
size: PropTypes.Requireable<"small" | "medium" | "large" | "extra-large">;
|
|
25
|
+
type: PropTypes.Requireable<"light" | "dark">;
|
|
61
26
|
zIndex: PropTypes.Requireable<string | number>;
|
|
62
27
|
isInitialVisible: PropTypes.Requireable<boolean>;
|
|
63
28
|
refKey: PropTypes.Requireable<string>;
|
package/dist/typings/index.d.ts
CHANGED
|
@@ -5,6 +5,6 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
export { Tooltip } from './elements/Tooltip';
|
|
8
|
-
export type { ITooltipProps } from './elements/Tooltip';
|
|
9
8
|
export { Paragraph } from './elements/Paragraph';
|
|
10
9
|
export { Title } from './elements/Title';
|
|
10
|
+
export type { ITooltipProps } from './types';
|
|
@@ -5,18 +5,14 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import { DefaultTheme } from 'styled-components';
|
|
8
|
-
import { POPPER_PLACEMENT } from '../
|
|
9
|
-
|
|
10
|
-
export declare type TOOLTIP_TYPE = 'light' | 'dark';
|
|
11
|
-
export interface IStyledTooltipProps {
|
|
12
|
-
hasArrow?: boolean;
|
|
13
|
-
size?: TOOLTIP_SIZE;
|
|
8
|
+
import { ITooltipProps, POPPER_PLACEMENT } from '../types';
|
|
9
|
+
interface IStyledTooltipProps extends Pick<ITooltipProps, 'hasArrow' | 'size' | 'zIndex'> {
|
|
14
10
|
/** All valid [Popper.JS Placements](https://popper.js.org/popper-documentation.html#Popper.placements) */
|
|
15
|
-
placement: POPPER_PLACEMENT;
|
|
16
|
-
|
|
17
|
-
type: TOOLTIP_TYPE;
|
|
11
|
+
placement: typeof POPPER_PLACEMENT[number];
|
|
12
|
+
type: NonNullable<ITooltipProps['type']>;
|
|
18
13
|
}
|
|
19
14
|
/**
|
|
20
15
|
* Accepts all `<div>` props
|
|
21
16
|
*/
|
|
22
17
|
export declare const StyledTooltip: import("styled-components").StyledComponent<"div", DefaultTheme, IStyledTooltipProps, never>;
|
|
18
|
+
export {};
|
|
@@ -7,5 +7,4 @@
|
|
|
7
7
|
export { StyledParagraph } from './StyledParagraph';
|
|
8
8
|
export { StyledTitle } from './StyledTitle';
|
|
9
9
|
export { StyledTooltip } from './StyledTooltip';
|
|
10
|
-
export type { TOOLTIP_SIZE, TOOLTIP_TYPE } from './StyledTooltip';
|
|
11
10
|
export { StyledTooltipWrapper } from './StyledTooltipWrapper';
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import { HTMLAttributes, ReactElement, ReactNode } from 'react';
|
|
8
|
+
import { Modifiers } from 'popper.js';
|
|
9
|
+
export declare const PLACEMENT: readonly ["auto", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "end", "end-top", "end-bottom", "start", "start-top", "start-bottom"];
|
|
10
|
+
export declare const POPPER_PLACEMENT: readonly ["auto", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"];
|
|
11
|
+
export declare const SIZE: readonly ["small", "medium", "large", "extra-large"];
|
|
12
|
+
export declare const TYPE: readonly ["light", "dark"];
|
|
13
|
+
export declare type GardenPlacement = typeof PLACEMENT[number];
|
|
14
|
+
export declare type PopperPlacement = typeof POPPER_PLACEMENT[number];
|
|
15
|
+
export interface ITooltipProps extends HTMLAttributes<HTMLDivElement> {
|
|
16
|
+
/** Appends the tooltip to the element provided */
|
|
17
|
+
appendToNode?: Element;
|
|
18
|
+
/** Adds an arrow to the tooltip */
|
|
19
|
+
hasArrow?: boolean;
|
|
20
|
+
/** Adds milliseconds of delay to the opening and closing of the tooltip */
|
|
21
|
+
delayMS?: number;
|
|
22
|
+
/** Allows the tooltip to reposition during browser resize events */
|
|
23
|
+
eventsEnabled?: boolean;
|
|
24
|
+
/** Defines the content of the tooltip */
|
|
25
|
+
content: ReactNode;
|
|
26
|
+
/**
|
|
27
|
+
* Adjusts the placement of the tooltip
|
|
28
|
+
**/
|
|
29
|
+
placement?: GardenPlacement;
|
|
30
|
+
/** Passes configurations to the [Popper instance](https://popper.js.org/docs/v2/modifiers/) */
|
|
31
|
+
popperModifiers?: Modifiers;
|
|
32
|
+
/** Adjusts the padding and font size */
|
|
33
|
+
size?: typeof SIZE[number];
|
|
34
|
+
/** Specifies the tooltip type */
|
|
35
|
+
type?: typeof TYPE[number];
|
|
36
|
+
/** Sets the `z-index` of the tooltip */
|
|
37
|
+
zIndex?: number | string;
|
|
38
|
+
/** Displays the tooltip on initial render */
|
|
39
|
+
isInitialVisible?: boolean;
|
|
40
|
+
/** Displays the tooltip */
|
|
41
|
+
isVisible?: boolean;
|
|
42
|
+
/** @ignore ReactNode override */
|
|
43
|
+
children: ReactElement;
|
|
44
|
+
/** Defines the ref key used to position the tooltip */
|
|
45
|
+
refKey?: string;
|
|
46
|
+
}
|
|
@@ -4,23 +4,19 @@
|
|
|
4
4
|
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
|
-
import {
|
|
8
|
-
declare type SHARED_PLACEMENT = 'auto' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
|
|
9
|
-
export declare type GARDEN_PLACEMENT = SHARED_PLACEMENT | 'end' | 'end-top' | 'end-bottom' | 'start' | 'start-top' | 'start-bottom';
|
|
10
|
-
export declare type POPPER_PLACEMENT = SHARED_PLACEMENT | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
|
|
7
|
+
import { GardenPlacement, PopperPlacement } from '../types';
|
|
11
8
|
/**
|
|
12
9
|
* Convert Garden RTL aware placement to Popper.JS valid placement
|
|
13
10
|
* @param {String} gardenPlacement
|
|
14
11
|
*/
|
|
15
|
-
export declare function getPopperPlacement(gardenPlacement:
|
|
12
|
+
export declare function getPopperPlacement(gardenPlacement: GardenPlacement): "auto" | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end";
|
|
16
13
|
/**
|
|
17
14
|
* Convert Garden RTL aware placement to RTL equivalent Popper.JS placement
|
|
18
15
|
* @param {String} gardenPlacement
|
|
19
16
|
*/
|
|
20
|
-
export declare function getRtlPopperPlacement(gardenPlacement:
|
|
17
|
+
export declare function getRtlPopperPlacement(gardenPlacement: GardenPlacement): "auto" | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end";
|
|
21
18
|
/**
|
|
22
19
|
* Convert Popper.JS placement to corresponding arrow position
|
|
23
20
|
* @param {String} popperPlacement
|
|
24
21
|
*/
|
|
25
|
-
export declare function getArrowPosition(popperPlacement:
|
|
26
|
-
export {};
|
|
22
|
+
export declare function getArrowPosition(popperPlacement: PopperPlacement): "top" | "bottom" | "right" | "left" | "top-left" | "top-right" | "right-top" | "right-bottom" | "bottom-left" | "bottom-right" | "left-top" | "left-bottom";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-tooltips",
|
|
3
|
-
"version": "8.49.
|
|
3
|
+
"version": "8.49.3",
|
|
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.49.
|
|
38
|
+
"@zendeskgarden/react-theming": "^8.49.3"
|
|
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": "
|
|
50
|
+
"gitHead": "983322364971c051ca6ce478770edfc3310e4c4b"
|
|
51
51
|
}
|