@fluentui/react-tooltip 0.0.0-nightlyb8537fb52c20211129.1 → 0.0.0-nightlyc49127232120220201.1
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/CHANGELOG.json +107 -21
- package/CHANGELOG.md +26 -16
- package/dist/react-tooltip.d.ts +26 -46
- package/lib/components/Tooltip/Tooltip.d.ts +2 -2
- package/lib/components/Tooltip/Tooltip.js +8 -9
- package/lib/components/Tooltip/Tooltip.js.map +1 -1
- package/lib/components/Tooltip/Tooltip.types.d.ts +20 -37
- package/lib/components/Tooltip/private/constants.d.ts +12 -0
- package/lib/components/Tooltip/private/constants.js +14 -0
- package/lib/components/Tooltip/private/constants.js.map +1 -0
- package/lib/components/Tooltip/renderTooltip.d.ts +1 -1
- package/lib/components/Tooltip/renderTooltip.js +5 -4
- package/lib/components/Tooltip/renderTooltip.js.map +1 -1
- package/lib/components/Tooltip/useTooltip.d.ts +3 -6
- package/lib/components/Tooltip/useTooltip.js +35 -42
- package/lib/components/Tooltip/useTooltip.js.map +1 -1
- package/lib/components/Tooltip/useTooltipStyles.d.ts +1 -1
- package/lib/components/Tooltip/useTooltipStyles.js +45 -27
- package/lib/components/Tooltip/useTooltipStyles.js.map +1 -1
- package/lib-commonjs/components/Tooltip/Tooltip.d.ts +2 -2
- package/lib-commonjs/components/Tooltip/Tooltip.js +7 -7
- package/lib-commonjs/components/Tooltip/Tooltip.js.map +1 -1
- package/lib-commonjs/components/Tooltip/Tooltip.types.d.ts +20 -37
- package/lib-commonjs/components/Tooltip/private/constants.d.ts +12 -0
- package/lib-commonjs/components/Tooltip/private/constants.js +21 -0
- package/lib-commonjs/components/Tooltip/private/constants.js.map +1 -0
- package/lib-commonjs/components/Tooltip/renderTooltip.d.ts +1 -1
- package/lib-commonjs/components/Tooltip/renderTooltip.js +7 -6
- package/lib-commonjs/components/Tooltip/renderTooltip.js.map +1 -1
- package/lib-commonjs/components/Tooltip/useTooltip.d.ts +3 -6
- package/lib-commonjs/components/Tooltip/useTooltip.js +40 -46
- package/lib-commonjs/components/Tooltip/useTooltip.js.map +1 -1
- package/lib-commonjs/components/Tooltip/useTooltipStyles.d.ts +1 -1
- package/lib-commonjs/components/Tooltip/useTooltipStyles.js +50 -30
- package/lib-commonjs/components/Tooltip/useTooltipStyles.js.map +1 -1
- package/package.json +12 -13
- package/lib/common/isConformant.d.ts +0 -4
- package/lib/common/isConformant.js +0 -11
- package/lib/common/isConformant.js.map +0 -1
- package/lib-commonjs/common/isConformant.d.ts +0 -4
- package/lib-commonjs/common/isConformant.js +0 -22
- package/lib-commonjs/common/isConformant.js.map +0 -1
package/CHANGELOG.json
CHANGED
@@ -2,58 +2,144 @@
|
|
2
2
|
"name": "@fluentui/react-tooltip",
|
3
3
|
"entries": [
|
4
4
|
{
|
5
|
-
"date": "
|
6
|
-
"tag": "@fluentui/react-tooltip_v0.0.0-
|
7
|
-
"version": "0.0.0-
|
5
|
+
"date": "Tue, 01 Feb 2022 04:14:52 GMT",
|
6
|
+
"tag": "@fluentui/react-tooltip_v0.0.0-nightlyc49127232120220201.1",
|
7
|
+
"version": "0.0.0-nightlyc49127232120220201.1",
|
8
8
|
"comments": {
|
9
9
|
"prerelease": [
|
10
10
|
{
|
11
|
-
"author": "
|
11
|
+
"author": "email not defined",
|
12
12
|
"package": "@fluentui/react-tooltip",
|
13
|
-
"
|
14
|
-
"
|
13
|
+
"commit": "985f437f8ccfa01dbd5fc9c04fca50e9b18d1954",
|
14
|
+
"comment": "Release nightly v9"
|
15
15
|
},
|
16
16
|
{
|
17
|
-
"author": "
|
17
|
+
"author": "behowell@microsoft.com",
|
18
|
+
"package": "@fluentui/react-tooltip",
|
19
|
+
"commit": "caaf3307f864b04369c13fe69d7dc8fe7ab84735",
|
20
|
+
"comment": "Move arrowHeight and tooltipBorderRadius into a shared constants.ts file"
|
21
|
+
},
|
22
|
+
{
|
23
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
24
|
+
"package": "@fluentui/react-tooltip",
|
25
|
+
"commit": "9204703d0a42ee34a20ae4cf28952e13872647ba",
|
26
|
+
"comment": "Replacing use of functions in makeStyles with direct use of tokens."
|
27
|
+
},
|
28
|
+
{
|
29
|
+
"author": "olfedias@microsoft.com",
|
30
|
+
"package": "@fluentui/react-tooltip",
|
31
|
+
"commit": "1bbb753830028fbf133858d523ae2d56ceefeecf",
|
32
|
+
"comment": "update styles to not use CSS shorthands"
|
33
|
+
},
|
34
|
+
{
|
35
|
+
"author": "behowell@microsoft.com",
|
36
|
+
"package": "@fluentui/react-tooltip",
|
37
|
+
"commit": "317209bb5cd57c40f35bc42060acb7e3cce5ec95",
|
38
|
+
"comment": "BREAKING: Rename component hooks add the suffix _unstable, as their API has not been finalized yet"
|
39
|
+
},
|
40
|
+
{
|
41
|
+
"author": "behowell@microsoft.com",
|
42
|
+
"package": "@fluentui/react-tooltip",
|
43
|
+
"commit": "7cc28ed8320b00f42d91c63882f10316db2205c5",
|
44
|
+
"comment": "Remove component's shorthandProps array"
|
45
|
+
},
|
46
|
+
{
|
47
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
48
|
+
"package": "@fluentui/react-tooltip",
|
49
|
+
"commit": "e0b8e1fa6980077e7b311fd1c72c28d3e4305db0",
|
50
|
+
"comment": "Updating based on changes to composition types."
|
51
|
+
},
|
52
|
+
{
|
53
|
+
"author": "behowell@microsoft.com",
|
54
|
+
"package": "@fluentui/react-tooltip",
|
55
|
+
"commit": "09804275c7f346db54c33d4ff347bffc33676014",
|
56
|
+
"comment": "Fix tooltip arrow rendering, and add high contrast border around Tooltip"
|
57
|
+
},
|
58
|
+
{
|
59
|
+
"author": "behowell@microsoft.com",
|
60
|
+
"package": "@fluentui/react-tooltip",
|
61
|
+
"commit": "1513362b9adaae5d7dbda6b364e40e736710a79f",
|
62
|
+
"comment": "Remove Tooltip's inverted prop in favor of the appearance prop"
|
63
|
+
},
|
64
|
+
{
|
65
|
+
"author": "olfedias@microsoft.com",
|
18
66
|
"package": "@fluentui/react-tooltip",
|
19
|
-
"
|
20
|
-
"
|
67
|
+
"commit": "02e6236e4db8e1b591223475896537e905bf3580",
|
68
|
+
"comment": "BREAKING: implement `content` slot"
|
69
|
+
},
|
70
|
+
{
|
71
|
+
"author": "olfedias@microsoft.com",
|
72
|
+
"package": "@fluentui/react-tooltip",
|
73
|
+
"commit": "17c0b18d7983d414095661bf9f57e14c0c22685d",
|
74
|
+
"comment": "Replace make-styles packages with griffel equivalents."
|
75
|
+
},
|
76
|
+
{
|
77
|
+
"author": "behowell@microsoft.com",
|
78
|
+
"package": "@fluentui/react-tooltip",
|
79
|
+
"commit": "58ae40d6817b1fa4e095a94707dfef5050aa4c11",
|
80
|
+
"comment": "Replace `triggerAriaAttribute` prop with `relationship` and make it required with no default"
|
21
81
|
},
|
22
82
|
{
|
23
83
|
"author": "beachball",
|
24
84
|
"package": "@fluentui/react-tooltip",
|
25
|
-
"comment": "Bump @fluentui/react-
|
26
|
-
"commit": "
|
85
|
+
"comment": "Bump @fluentui/react-portal to v0.0.0-nightlyc49127232120220201.1",
|
86
|
+
"commit": "985f437f8ccfa01dbd5fc9c04fca50e9b18d1954"
|
27
87
|
},
|
28
88
|
{
|
29
89
|
"author": "beachball",
|
30
90
|
"package": "@fluentui/react-tooltip",
|
31
|
-
"comment": "Bump @fluentui/react-
|
32
|
-
"commit": "
|
91
|
+
"comment": "Bump @fluentui/react-positioning to v0.0.0-nightlyc49127232120220201.1",
|
92
|
+
"commit": "985f437f8ccfa01dbd5fc9c04fca50e9b18d1954"
|
33
93
|
},
|
34
94
|
{
|
35
95
|
"author": "beachball",
|
36
96
|
"package": "@fluentui/react-tooltip",
|
37
|
-
"comment": "Bump @fluentui/react-
|
38
|
-
"commit": "
|
97
|
+
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightlyc49127232120220201.1",
|
98
|
+
"commit": "985f437f8ccfa01dbd5fc9c04fca50e9b18d1954"
|
39
99
|
},
|
40
100
|
{
|
41
101
|
"author": "beachball",
|
42
102
|
"package": "@fluentui/react-tooltip",
|
43
|
-
"comment": "Bump @fluentui/
|
44
|
-
"commit": "
|
103
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightlyc49127232120220201.1",
|
104
|
+
"commit": "985f437f8ccfa01dbd5fc9c04fca50e9b18d1954"
|
45
105
|
},
|
46
106
|
{
|
47
107
|
"author": "beachball",
|
48
108
|
"package": "@fluentui/react-tooltip",
|
49
|
-
"comment": "Bump @fluentui/
|
50
|
-
"commit": "
|
109
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightlyc49127232120220201.1",
|
110
|
+
"commit": "985f437f8ccfa01dbd5fc9c04fca50e9b18d1954"
|
51
111
|
},
|
52
112
|
{
|
53
113
|
"author": "beachball",
|
54
114
|
"package": "@fluentui/react-tooltip",
|
55
|
-
"comment": "Bump @fluentui/react-conformance-
|
56
|
-
"commit": "
|
115
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightlyc49127232120220201.1",
|
116
|
+
"commit": "985f437f8ccfa01dbd5fc9c04fca50e9b18d1954"
|
117
|
+
}
|
118
|
+
],
|
119
|
+
"none": [
|
120
|
+
{
|
121
|
+
"author": "martinhochel@microsoft.com",
|
122
|
+
"package": "@fluentui/react-tooltip",
|
123
|
+
"commit": "8dfa712156b70414205b87b5b6d099367b0c297d",
|
124
|
+
"comment": "chore: use storybook runner for all vNext packages"
|
125
|
+
},
|
126
|
+
{
|
127
|
+
"author": "andredias@microsoft.com",
|
128
|
+
"package": "@fluentui/react-tooltip",
|
129
|
+
"commit": "b59f44ed5db37b457476fdb3ec86ff273b776646",
|
130
|
+
"comment": "Migrate package to use solution tsconfigs"
|
131
|
+
},
|
132
|
+
{
|
133
|
+
"author": "olfedias@microsoft.com",
|
134
|
+
"package": "@fluentui/react-tooltip",
|
135
|
+
"commit": "c061e98be4b4a718c72a144a1f60bb5515824612",
|
136
|
+
"comment": "remove inline-style-expand-shorthand from tsconfigs"
|
137
|
+
},
|
138
|
+
{
|
139
|
+
"author": "elcraig@microsoft.com",
|
140
|
+
"package": "@fluentui/react-tooltip",
|
141
|
+
"commit": "d892c7f79c543b6008634ecd669b75b5108cad46",
|
142
|
+
"comment": "Remove outdated boilerplate comment in useTooltip"
|
57
143
|
}
|
58
144
|
]
|
59
145
|
}
|
package/CHANGELOG.md
CHANGED
@@ -1,24 +1,34 @@
|
|
1
1
|
# Change Log - @fluentui/react-tooltip
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Tue, 01 Feb 2022 04:14:52 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
-
## [0.0.0-
|
8
|
-
|
9
|
-
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tooltip_v9.0.0-beta.5..@fluentui/react-tooltip_v0.0.0-
|
11
|
-
|
12
|
-
### Changes
|
13
|
-
|
14
|
-
-
|
15
|
-
-
|
16
|
-
-
|
17
|
-
-
|
18
|
-
-
|
19
|
-
-
|
20
|
-
-
|
21
|
-
-
|
7
|
+
## [0.0.0-nightlyc49127232120220201.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tooltip_v0.0.0-nightlyc49127232120220201.1)
|
8
|
+
|
9
|
+
Tue, 01 Feb 2022 04:14:52 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tooltip_v9.0.0-beta.5..@fluentui/react-tooltip_v0.0.0-nightlyc49127232120220201.1)
|
11
|
+
|
12
|
+
### Changes
|
13
|
+
|
14
|
+
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/985f437f8ccfa01dbd5fc9c04fca50e9b18d1954) by email not defined)
|
15
|
+
- Move arrowHeight and tooltipBorderRadius into a shared constants.ts file ([PR #21204](https://github.com/microsoft/fluentui/pull/21204) by behowell@microsoft.com)
|
16
|
+
- Replacing use of functions in makeStyles with direct use of tokens. ([PR #21058](https://github.com/microsoft/fluentui/pull/21058) by Humberto.Morimoto@microsoft.com)
|
17
|
+
- update styles to not use CSS shorthands ([PR #20795](https://github.com/microsoft/fluentui/pull/20795) by olfedias@microsoft.com)
|
18
|
+
- BREAKING: Rename component hooks add the suffix _unstable, as their API has not been finalized yet ([PR #21365](https://github.com/microsoft/fluentui/pull/21365) by behowell@microsoft.com)
|
19
|
+
- Remove component's shorthandProps array ([PR #21134](https://github.com/microsoft/fluentui/pull/21134) by behowell@microsoft.com)
|
20
|
+
- Updating based on changes to composition types. ([PR #20891](https://github.com/microsoft/fluentui/pull/20891) by Humberto.Morimoto@microsoft.com)
|
21
|
+
- Fix tooltip arrow rendering, and add high contrast border around Tooltip ([PR #21086](https://github.com/microsoft/fluentui/pull/21086) by behowell@microsoft.com)
|
22
|
+
- Remove Tooltip's inverted prop in favor of the appearance prop ([PR #21327](https://github.com/microsoft/fluentui/pull/21327) by behowell@microsoft.com)
|
23
|
+
- BREAKING: implement `content` slot ([PR #21470](https://github.com/microsoft/fluentui/pull/21470) by olfedias@microsoft.com)
|
24
|
+
- Replace make-styles packages with griffel equivalents. ([PR #21422](https://github.com/microsoft/fluentui/pull/21422) by olfedias@microsoft.com)
|
25
|
+
- Replace `triggerAriaAttribute` prop with `relationship` and make it required with no default ([PR #21331](https://github.com/microsoft/fluentui/pull/21331) by behowell@microsoft.com)
|
26
|
+
- Bump @fluentui/react-portal to v0.0.0-nightlyc49127232120220201.1 ([commit](https://github.com/microsoft/fluentui/commit/985f437f8ccfa01dbd5fc9c04fca50e9b18d1954) by beachball)
|
27
|
+
- Bump @fluentui/react-positioning to v0.0.0-nightlyc49127232120220201.1 ([commit](https://github.com/microsoft/fluentui/commit/985f437f8ccfa01dbd5fc9c04fca50e9b18d1954) by beachball)
|
28
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightlyc49127232120220201.1 ([commit](https://github.com/microsoft/fluentui/commit/985f437f8ccfa01dbd5fc9c04fca50e9b18d1954) by beachball)
|
29
|
+
- Bump @fluentui/react-theme to v0.0.0-nightlyc49127232120220201.1 ([commit](https://github.com/microsoft/fluentui/commit/985f437f8ccfa01dbd5fc9c04fca50e9b18d1954) by beachball)
|
30
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightlyc49127232120220201.1 ([commit](https://github.com/microsoft/fluentui/commit/985f437f8ccfa01dbd5fc9c04fca50e9b18d1954) by beachball)
|
31
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightlyc49127232120220201.1 ([commit](https://github.com/microsoft/fluentui/commit/985f437f8ccfa01dbd5fc9c04fca50e9b18d1954) by beachball)
|
22
32
|
|
23
33
|
## [9.0.0-beta.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-tooltip_v9.0.0-beta.5)
|
24
34
|
|
package/dist/react-tooltip.d.ts
CHANGED
@@ -1,7 +1,6 @@
|
|
1
1
|
import type { ComponentProps } from '@fluentui/react-utilities';
|
2
2
|
import type { ComponentState } from '@fluentui/react-utilities';
|
3
|
-
import type {
|
4
|
-
import type { IntrinsicShorthandProps } from '@fluentui/react-utilities';
|
3
|
+
import type { IntrinsicSlotProps } from '@fluentui/react-utilities';
|
5
4
|
import type { PositioningShorthand } from '@fluentui/react-positioning';
|
6
5
|
import * as React_2 from 'react';
|
7
6
|
|
@@ -15,12 +14,12 @@ export declare type OnVisibleChangeData = {
|
|
15
14
|
/**
|
16
15
|
* Render the final JSX of Tooltip
|
17
16
|
*/
|
18
|
-
export declare const
|
17
|
+
export declare const renderTooltip_unstable: (state: TooltipState) => JSX.Element;
|
19
18
|
|
20
19
|
/**
|
21
20
|
* A tooltip provides light weight contextual information on top of its target element.
|
22
21
|
*/
|
23
|
-
export declare const Tooltip:
|
22
|
+
export declare const Tooltip: React_2.FC<TooltipProps>;
|
24
23
|
|
25
24
|
export declare const tooltipClassName = "fui-Tooltip";
|
26
25
|
|
@@ -29,20 +28,13 @@ export declare const tooltipClassName = "fui-Tooltip";
|
|
29
28
|
*/
|
30
29
|
export declare type TooltipCommons = {
|
31
30
|
/**
|
32
|
-
*
|
33
|
-
*
|
34
|
-
|
35
|
-
appearance?: 'inverted';
|
36
|
-
/**
|
37
|
-
* The content displayed inside the tooltip.
|
38
|
-
*/
|
39
|
-
content: React_2.ReactNode;
|
40
|
-
/**
|
41
|
-
* Color variant with inverted colors
|
31
|
+
* The tooltip's visual appearance.
|
32
|
+
* * `normal` - Uses the theme's background and text colors.
|
33
|
+
* * `inverted` - Higher contrast variant that uses the theme's inverted colors.
|
42
34
|
*
|
43
|
-
* @defaultvalue
|
35
|
+
* @defaultvalue normal
|
44
36
|
*/
|
45
|
-
|
37
|
+
appearance?: 'normal' | 'inverted';
|
46
38
|
/**
|
47
39
|
* Render an arrow pointing to the target element
|
48
40
|
*
|
@@ -69,15 +61,15 @@ export declare type TooltipCommons = {
|
|
69
61
|
*/
|
70
62
|
onVisibleChange?: (event: React_2.PointerEvent<HTMLElement> | React_2.FocusEvent<HTMLElement> | undefined, data: OnVisibleChangeData) => void;
|
71
63
|
/**
|
72
|
-
* Specifies
|
73
|
-
* * `label` - Set aria-label to the tooltip's content. Requires content to be a string; if not, uses `labelledby`.
|
74
|
-
* * `labelledby` - Set aria-labelledby to the tooltip's id. The id is generated if not provided.
|
75
|
-
* * `describedby` - Set aria-describedby to the tooltip's id. The id is generated if not provided.
|
76
|
-
* * null - Do not set any aria attributes on the trigger element.
|
64
|
+
* (Required) Specifies whether this tooltip is acting as the description or label of its trigger element.
|
77
65
|
*
|
78
|
-
*
|
66
|
+
* * `label` - The tooltip sets the trigger's aria-label or aria-labelledby attribute. This is useful for buttons
|
67
|
+
* displaying only an icon, for example.
|
68
|
+
* * `description` - The tooltip sets the trigger's aria-description or aria-describedby attribute.
|
69
|
+
* * `inaccessible` - No aria attributes are set on the trigger. This makes the tooltip's content inaccessible to
|
70
|
+
* screen readers, and should only be used if the tooltip's text is available by some other means.
|
79
71
|
*/
|
80
|
-
|
72
|
+
relationship: 'label' | 'description' | 'inaccessible';
|
81
73
|
/**
|
82
74
|
* Delay before the tooltip is shown, in milliseconds.
|
83
75
|
*
|
@@ -95,36 +87,26 @@ export declare type TooltipCommons = {
|
|
95
87
|
/**
|
96
88
|
* Properties for Tooltip
|
97
89
|
*/
|
98
|
-
export declare type TooltipProps = ComponentProps<TooltipSlots> & Partial<Omit<TooltipCommons, '
|
90
|
+
export declare type TooltipProps = Omit<ComponentProps<TooltipSlots>, 'content'> & Required<Pick<ComponentProps<TooltipSlots>, 'content'>> & Partial<Omit<TooltipCommons, 'relationship'>> & Pick<TooltipCommons, 'relationship'> & {
|
91
|
+
children?: (React_2.ReactElement & {
|
92
|
+
ref?: React_2.Ref<unknown>;
|
93
|
+
}) | ((props: TooltipTriggerProps) => React_2.ReactNode) | null;
|
94
|
+
};
|
99
95
|
|
100
96
|
/**
|
101
97
|
* Slot properties for Tooltip
|
102
98
|
*/
|
103
99
|
export declare type TooltipSlots = {
|
104
|
-
|
105
|
-
/**
|
106
|
-
* The child is the element that triggers the Tooltip. It will have additional properties added,
|
107
|
-
* including events and aria properties.
|
108
|
-
* Alternatively, children can be a render function that takes the props and adds
|
109
|
-
* them to the appropriate elements.
|
110
|
-
*/
|
111
|
-
children?: (React_2.ReactElement<React_2.HTMLAttributes<HTMLElement>> & {
|
112
|
-
ref?: React_2.Ref<unknown>;
|
113
|
-
}) | ((props: TooltipTriggerProps) => React_2.ReactNode) | null;
|
114
|
-
};
|
100
|
+
content: IntrinsicSlotProps<'div'>;
|
115
101
|
};
|
116
102
|
|
117
103
|
/**
|
118
104
|
* State used in rendering Tooltip
|
119
105
|
*/
|
120
106
|
export declare type TooltipState = ComponentState<TooltipSlots> & TooltipCommons & {
|
107
|
+
children?: React_2.ReactNode;
|
121
108
|
/**
|
122
109
|
* Whether the tooltip should be rendered to the DOM.
|
123
|
-
*
|
124
|
-
* Normally the tooltip will only be rendered when visible. However, if
|
125
|
-
* triggerAriaAttribute is labelledby or describedby, the tooltip will
|
126
|
-
* always be rendered even when hidden so that those aria attributes
|
127
|
-
* to always refer to a valid DOM element.
|
128
110
|
*/
|
129
111
|
shouldRenderTooltip?: boolean;
|
130
112
|
/**
|
@@ -147,18 +129,16 @@ export declare type TooltipTriggerProps = {
|
|
147
129
|
/**
|
148
130
|
* Create the state required to render Tooltip.
|
149
131
|
*
|
150
|
-
* The returned state can be modified with hooks such as
|
151
|
-
* before being passed to
|
132
|
+
* The returned state can be modified with hooks such as useTooltipStyles_unstable,
|
133
|
+
* before being passed to renderTooltip_unstable.
|
152
134
|
*
|
153
135
|
* @param props - props from this instance of Tooltip
|
154
|
-
* @param ref - reference to root HTMLElement of Tooltip
|
155
|
-
* @param defaultProps - (optional) default prop values provided by the implementing type
|
156
136
|
*/
|
157
|
-
export declare const
|
137
|
+
export declare const useTooltip_unstable: (props: TooltipProps) => TooltipState;
|
158
138
|
|
159
139
|
/**
|
160
140
|
* Apply styling to the Tooltip slots based on the state
|
161
141
|
*/
|
162
|
-
export declare const
|
142
|
+
export declare const useTooltipStyles_unstable: (state: TooltipState) => TooltipState;
|
163
143
|
|
164
144
|
export { }
|
@@ -1,6 +1,6 @@
|
|
1
|
+
import * as React from 'react';
|
1
2
|
import type { TooltipProps } from './Tooltip.types';
|
2
|
-
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
3
3
|
/**
|
4
4
|
* A tooltip provides light weight contextual information on top of its target element.
|
5
5
|
*/
|
6
|
-
export declare const Tooltip:
|
6
|
+
export declare const Tooltip: React.FC<TooltipProps>;
|
@@ -1,15 +1,14 @@
|
|
1
|
-
import
|
2
|
-
import {
|
3
|
-
import {
|
4
|
-
import { useTooltipStyles } from './useTooltipStyles';
|
1
|
+
import { useTooltip_unstable } from './useTooltip';
|
2
|
+
import { renderTooltip_unstable } from './renderTooltip';
|
3
|
+
import { useTooltipStyles_unstable } from './useTooltipStyles';
|
5
4
|
/**
|
6
5
|
* A tooltip provides light weight contextual information on top of its target element.
|
7
6
|
*/
|
8
7
|
|
9
|
-
export const Tooltip =
|
10
|
-
const state =
|
11
|
-
|
12
|
-
return
|
13
|
-
}
|
8
|
+
export const Tooltip = props => {
|
9
|
+
const state = useTooltip_unstable(props);
|
10
|
+
useTooltipStyles_unstable(state);
|
11
|
+
return renderTooltip_unstable(state);
|
12
|
+
};
|
14
13
|
Tooltip.displayName = 'Tooltip';
|
15
14
|
//# sourceMappingURL=Tooltip.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"
|
1
|
+
{"version":3,"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AACA,SAAS,mBAAT,QAAoC,cAApC;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AAGA;;AAEG;;AACH,OAAO,MAAM,OAAO,GAA2B,KAAK,IAAG;AACrD,QAAM,KAAK,GAAG,mBAAmB,CAAC,KAAD,CAAjC;AAEA,EAAA,yBAAyB,CAAC,KAAD,CAAzB;AACA,SAAO,sBAAsB,CAAC,KAAD,CAA7B;AACD,CALM;AAOP,OAAO,CAAC,WAAR,GAAsB,SAAtB","sourceRoot":""}
|
@@ -1,41 +1,24 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import type { PositioningShorthand } from '@fluentui/react-positioning';
|
3
|
-
import type { ComponentProps, ComponentState,
|
3
|
+
import type { ComponentProps, ComponentState, IntrinsicSlotProps } from '@fluentui/react-utilities';
|
4
4
|
/**
|
5
5
|
* Slot properties for Tooltip
|
6
6
|
*/
|
7
7
|
export declare type TooltipSlots = {
|
8
|
-
|
9
|
-
/**
|
10
|
-
* The child is the element that triggers the Tooltip. It will have additional properties added,
|
11
|
-
* including events and aria properties.
|
12
|
-
* Alternatively, children can be a render function that takes the props and adds
|
13
|
-
* them to the appropriate elements.
|
14
|
-
*/
|
15
|
-
children?: (React.ReactElement<React.HTMLAttributes<HTMLElement>> & {
|
16
|
-
ref?: React.Ref<unknown>;
|
17
|
-
}) | ((props: TooltipTriggerProps) => React.ReactNode) | null;
|
18
|
-
};
|
8
|
+
content: IntrinsicSlotProps<'div'>;
|
19
9
|
};
|
20
10
|
/**
|
21
11
|
* Properties and state for Tooltip
|
22
12
|
*/
|
23
13
|
export declare type TooltipCommons = {
|
24
14
|
/**
|
25
|
-
*
|
26
|
-
*
|
27
|
-
|
28
|
-
appearance?: 'inverted';
|
29
|
-
/**
|
30
|
-
* The content displayed inside the tooltip.
|
31
|
-
*/
|
32
|
-
content: React.ReactNode;
|
33
|
-
/**
|
34
|
-
* Color variant with inverted colors
|
15
|
+
* The tooltip's visual appearance.
|
16
|
+
* * `normal` - Uses the theme's background and text colors.
|
17
|
+
* * `inverted` - Higher contrast variant that uses the theme's inverted colors.
|
35
18
|
*
|
36
|
-
* @defaultvalue
|
19
|
+
* @defaultvalue normal
|
37
20
|
*/
|
38
|
-
|
21
|
+
appearance?: 'normal' | 'inverted';
|
39
22
|
/**
|
40
23
|
* Render an arrow pointing to the target element
|
41
24
|
*
|
@@ -62,15 +45,15 @@ export declare type TooltipCommons = {
|
|
62
45
|
*/
|
63
46
|
onVisibleChange?: (event: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement> | undefined, data: OnVisibleChangeData) => void;
|
64
47
|
/**
|
65
|
-
* Specifies
|
66
|
-
* * `label` - Set aria-label to the tooltip's content. Requires content to be a string; if not, uses `labelledby`.
|
67
|
-
* * `labelledby` - Set aria-labelledby to the tooltip's id. The id is generated if not provided.
|
68
|
-
* * `describedby` - Set aria-describedby to the tooltip's id. The id is generated if not provided.
|
69
|
-
* * null - Do not set any aria attributes on the trigger element.
|
48
|
+
* (Required) Specifies whether this tooltip is acting as the description or label of its trigger element.
|
70
49
|
*
|
71
|
-
*
|
50
|
+
* * `label` - The tooltip sets the trigger's aria-label or aria-labelledby attribute. This is useful for buttons
|
51
|
+
* displaying only an icon, for example.
|
52
|
+
* * `description` - The tooltip sets the trigger's aria-description or aria-describedby attribute.
|
53
|
+
* * `inaccessible` - No aria attributes are set on the trigger. This makes the tooltip's content inaccessible to
|
54
|
+
* screen readers, and should only be used if the tooltip's text is available by some other means.
|
72
55
|
*/
|
73
|
-
|
56
|
+
relationship: 'label' | 'description' | 'inaccessible';
|
74
57
|
/**
|
75
58
|
* Delay before the tooltip is shown, in milliseconds.
|
76
59
|
*
|
@@ -99,18 +82,18 @@ export declare type OnVisibleChangeData = {
|
|
99
82
|
/**
|
100
83
|
* Properties for Tooltip
|
101
84
|
*/
|
102
|
-
export declare type TooltipProps = ComponentProps<TooltipSlots> & Partial<Omit<TooltipCommons, '
|
85
|
+
export declare type TooltipProps = Omit<ComponentProps<TooltipSlots>, 'content'> & Required<Pick<ComponentProps<TooltipSlots>, 'content'>> & Partial<Omit<TooltipCommons, 'relationship'>> & Pick<TooltipCommons, 'relationship'> & {
|
86
|
+
children?: (React.ReactElement & {
|
87
|
+
ref?: React.Ref<unknown>;
|
88
|
+
}) | ((props: TooltipTriggerProps) => React.ReactNode) | null;
|
89
|
+
};
|
103
90
|
/**
|
104
91
|
* State used in rendering Tooltip
|
105
92
|
*/
|
106
93
|
export declare type TooltipState = ComponentState<TooltipSlots> & TooltipCommons & {
|
94
|
+
children?: React.ReactNode;
|
107
95
|
/**
|
108
96
|
* Whether the tooltip should be rendered to the DOM.
|
109
|
-
*
|
110
|
-
* Normally the tooltip will only be rendered when visible. However, if
|
111
|
-
* triggerAriaAttribute is labelledby or describedby, the tooltip will
|
112
|
-
* always be rendered even when hidden so that those aria attributes
|
113
|
-
* to always refer to a valid DOM element.
|
114
97
|
*/
|
115
98
|
shouldRenderTooltip?: boolean;
|
116
99
|
/**
|
@@ -0,0 +1,12 @@
|
|
1
|
+
/**
|
2
|
+
* The height of the tooltip's arrow in pixels.
|
3
|
+
*/
|
4
|
+
export declare const arrowHeight = 6;
|
5
|
+
/**
|
6
|
+
* The default value of the tooltip's border radius (borderRadiusMedium).
|
7
|
+
*
|
8
|
+
* Unfortunately, Popper requires it to be specified as a variable instead of using CSS.
|
9
|
+
* While we could use getComputedStyle, that adds a performance penalty for something that
|
10
|
+
* will likely never change.
|
11
|
+
*/
|
12
|
+
export declare const tooltipBorderRadius = 4;
|
@@ -0,0 +1,14 @@
|
|
1
|
+
/**
|
2
|
+
* The height of the tooltip's arrow in pixels.
|
3
|
+
*/
|
4
|
+
export const arrowHeight = 6;
|
5
|
+
/**
|
6
|
+
* The default value of the tooltip's border radius (borderRadiusMedium).
|
7
|
+
*
|
8
|
+
* Unfortunately, Popper requires it to be specified as a variable instead of using CSS.
|
9
|
+
* While we could use getComputedStyle, that adds a performance penalty for something that
|
10
|
+
* will likely never change.
|
11
|
+
*/
|
12
|
+
|
13
|
+
export const tooltipBorderRadius = 4;
|
14
|
+
//# sourceMappingURL=constants.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Tooltip/private/constants.ts"],"names":[],"mappings":"AAAA;;AAEG;AACH,OAAO,MAAM,WAAW,GAAG,CAApB;AAEP;;;;;;AAMG;;AACH,OAAO,MAAM,mBAAmB,GAAG,CAA5B","sourceRoot":""}
|
@@ -5,14 +5,15 @@ import { getSlots } from '@fluentui/react-utilities';
|
|
5
5
|
* Render the final JSX of Tooltip
|
6
6
|
*/
|
7
7
|
|
8
|
-
export const
|
8
|
+
export const renderTooltip_unstable = state => {
|
9
9
|
const {
|
10
10
|
slots,
|
11
11
|
slotProps
|
12
|
-
} = getSlots(state
|
13
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, state.
|
12
|
+
} = getSlots(state);
|
13
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, state.children, state.shouldRenderTooltip && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(slots.content, { ...slotProps.content
|
14
|
+
}, state.withArrow && /*#__PURE__*/React.createElement("div", {
|
14
15
|
ref: state.arrowRef,
|
15
16
|
className: state.arrowClassName
|
16
|
-
}), state.content)));
|
17
|
+
}), state.content.children)));
|
17
18
|
};
|
18
19
|
//# sourceMappingURL=renderTooltip.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Tooltip/renderTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,MAAT,QAAuB,wBAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,
|
1
|
+
{"version":3,"sources":["../../../src/components/Tooltip/renderTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,MAAT,QAAuB,wBAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAwB;AAC5D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAe,KAAf,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACG,KAAK,CAAC,QADT,EAEG,KAAK,CAAC,mBAAN,iBACC,KAAA,CAAA,aAAA,CAAC,MAAD,EAAO,IAAP,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;AAAf,GAAd,EACG,KAAK,CAAC,SAAN,iBAAmB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,GAAG,EAAE,KAAK,CAAC,QAAhB;AAA0B,IAAA,SAAS,EAAE,KAAK,CAAC;AAA3C,GAAA,CADtB,EAEG,KAAK,CAAC,OAAN,CAAc,QAFjB,CADF,CAHJ,CADF;AAaD,CAhBM","sourceRoot":""}
|
@@ -1,13 +1,10 @@
|
|
1
|
-
import * as React from 'react';
|
2
1
|
import type { TooltipProps, TooltipState } from './Tooltip.types';
|
3
2
|
/**
|
4
3
|
* Create the state required to render Tooltip.
|
5
4
|
*
|
6
|
-
* The returned state can be modified with hooks such as
|
7
|
-
* before being passed to
|
5
|
+
* The returned state can be modified with hooks such as useTooltipStyles_unstable,
|
6
|
+
* before being passed to renderTooltip_unstable.
|
8
7
|
*
|
9
8
|
* @param props - props from this instance of Tooltip
|
10
|
-
* @param ref - reference to root HTMLElement of Tooltip
|
11
|
-
* @param defaultProps - (optional) default prop values provided by the implementing type
|
12
9
|
*/
|
13
|
-
export declare const
|
10
|
+
export declare const useTooltip_unstable: (props: TooltipProps) => TooltipState;
|