@fluentui/react-tooltip 0.0.0-nightlycc44f3625c20211220.1 → 0.0.0-nightlye0b8e1fa6920220128.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (36) hide show
  1. package/CHANGELOG.json +85 -25
  2. package/CHANGELOG.md +21 -14
  3. package/dist/react-tooltip.d.ts +26 -46
  4. package/lib/components/Tooltip/Tooltip.d.ts +2 -2
  5. package/lib/components/Tooltip/Tooltip.js +8 -9
  6. package/lib/components/Tooltip/Tooltip.js.map +1 -1
  7. package/lib/components/Tooltip/Tooltip.types.d.ts +20 -37
  8. package/lib/components/Tooltip/private/constants.d.ts +12 -0
  9. package/lib/components/Tooltip/private/constants.js +14 -0
  10. package/lib/components/Tooltip/private/constants.js.map +1 -0
  11. package/lib/components/Tooltip/renderTooltip.d.ts +1 -1
  12. package/lib/components/Tooltip/renderTooltip.js +4 -4
  13. package/lib/components/Tooltip/renderTooltip.js.map +1 -1
  14. package/lib/components/Tooltip/useTooltip.d.ts +3 -6
  15. package/lib/components/Tooltip/useTooltip.js +35 -42
  16. package/lib/components/Tooltip/useTooltip.js.map +1 -1
  17. package/lib/components/Tooltip/useTooltipStyles.d.ts +1 -1
  18. package/lib/components/Tooltip/useTooltipStyles.js +38 -25
  19. package/lib/components/Tooltip/useTooltipStyles.js.map +1 -1
  20. package/lib-commonjs/components/Tooltip/Tooltip.d.ts +2 -2
  21. package/lib-commonjs/components/Tooltip/Tooltip.js +7 -7
  22. package/lib-commonjs/components/Tooltip/Tooltip.js.map +1 -1
  23. package/lib-commonjs/components/Tooltip/Tooltip.types.d.ts +20 -37
  24. package/lib-commonjs/components/Tooltip/private/constants.d.ts +12 -0
  25. package/lib-commonjs/components/Tooltip/private/constants.js +21 -0
  26. package/lib-commonjs/components/Tooltip/private/constants.js.map +1 -0
  27. package/lib-commonjs/components/Tooltip/renderTooltip.d.ts +1 -1
  28. package/lib-commonjs/components/Tooltip/renderTooltip.js +6 -6
  29. package/lib-commonjs/components/Tooltip/renderTooltip.js.map +1 -1
  30. package/lib-commonjs/components/Tooltip/useTooltip.d.ts +3 -6
  31. package/lib-commonjs/components/Tooltip/useTooltip.js +40 -46
  32. package/lib-commonjs/components/Tooltip/useTooltip.js.map +1 -1
  33. package/lib-commonjs/components/Tooltip/useTooltipStyles.d.ts +1 -1
  34. package/lib-commonjs/components/Tooltip/useTooltipStyles.js +43 -28
  35. package/lib-commonjs/components/Tooltip/useTooltipStyles.js.map +1 -1
  36. package/package.json +9 -11
package/CHANGELOG.json CHANGED
@@ -2,17 +2,29 @@
2
2
  "name": "@fluentui/react-tooltip",
3
3
  "entries": [
4
4
  {
5
- "date": "Mon, 20 Dec 2021 04:17:53 GMT",
6
- "tag": "@fluentui/react-tooltip_v0.0.0-nightlycc44f3625c20211220.1",
7
- "version": "0.0.0-nightlycc44f3625c20211220.1",
5
+ "date": "Fri, 28 Jan 2022 04:13:23 GMT",
6
+ "tag": "@fluentui/react-tooltip_v0.0.0-nightlye0b8e1fa6920220128.1",
7
+ "version": "0.0.0-nightlye0b8e1fa6920220128.1",
8
8
  "comments": {
9
9
  "prerelease": [
10
10
  {
11
11
  "author": "email not defined",
12
12
  "package": "@fluentui/react-tooltip",
13
- "commit": "0839b0d96424e04706bd895d731d371acd3baaf5",
13
+ "commit": "90d10ec8c2d159575962c4d3d913317633b44a7a",
14
14
  "comment": "Release nightly v9"
15
15
  },
16
+ {
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
+ },
16
28
  {
17
29
  "author": "olfedias@microsoft.com",
18
30
  "package": "@fluentui/react-tooltip",
@@ -20,66 +32,114 @@
20
32
  "comment": "update styles to not use CSS shorthands"
21
33
  },
22
34
  {
23
- "author": "beachball",
35
+ "author": "behowell@microsoft.com",
24
36
  "package": "@fluentui/react-tooltip",
25
- "comment": "Bump @fluentui/react-make-styles to v0.0.0-nightlycc44f3625c20211220.1",
26
- "commit": "0839b0d96424e04706bd895d731d371acd3baaf5"
37
+ "commit": "317209bb5cd57c40f35bc42060acb7e3cce5ec95",
38
+ "comment": "BREAKING: Rename component hooks add the suffix _unstable, as their API has not been finalized yet"
27
39
  },
28
40
  {
29
- "author": "beachball",
41
+ "author": "behowell@microsoft.com",
30
42
  "package": "@fluentui/react-tooltip",
31
- "comment": "Bump @fluentui/react-portal to v0.0.0-nightlycc44f3625c20211220.1",
32
- "commit": "0839b0d96424e04706bd895d731d371acd3baaf5"
43
+ "commit": "7cc28ed8320b00f42d91c63882f10316db2205c5",
44
+ "comment": "Remove component's shorthandProps array"
33
45
  },
34
46
  {
35
- "author": "beachball",
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",
66
+ "package": "@fluentui/react-tooltip",
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",
36
78
  "package": "@fluentui/react-tooltip",
37
- "comment": "Bump @fluentui/react-positioning to v0.0.0-nightlycc44f3625c20211220.1",
38
- "commit": "0839b0d96424e04706bd895d731d371acd3baaf5"
79
+ "commit": "58ae40d6817b1fa4e095a94707dfef5050aa4c11",
80
+ "comment": "Replace `triggerAriaAttribute` prop with `relationship` and make it required with no default"
39
81
  },
40
82
  {
41
83
  "author": "beachball",
42
84
  "package": "@fluentui/react-tooltip",
43
- "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightlycc44f3625c20211220.1",
44
- "commit": "0839b0d96424e04706bd895d731d371acd3baaf5"
85
+ "comment": "Bump @fluentui/react-portal to v0.0.0-nightlye0b8e1fa6920220128.1",
86
+ "commit": "90d10ec8c2d159575962c4d3d913317633b44a7a"
45
87
  },
46
88
  {
47
89
  "author": "beachball",
48
90
  "package": "@fluentui/react-tooltip",
49
- "comment": "Bump @fluentui/react-theme to v0.0.0-nightlycc44f3625c20211220.1",
50
- "commit": "0839b0d96424e04706bd895d731d371acd3baaf5"
91
+ "comment": "Bump @fluentui/react-positioning to v0.0.0-nightlye0b8e1fa6920220128.1",
92
+ "commit": "90d10ec8c2d159575962c4d3d913317633b44a7a"
51
93
  },
52
94
  {
53
95
  "author": "beachball",
54
96
  "package": "@fluentui/react-tooltip",
55
- "comment": "Bump @fluentui/react-utilities to v0.0.0-nightlycc44f3625c20211220.1",
56
- "commit": "0839b0d96424e04706bd895d731d371acd3baaf5"
97
+ "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightlye0b8e1fa6920220128.1",
98
+ "commit": "90d10ec8c2d159575962c4d3d913317633b44a7a"
57
99
  },
58
100
  {
59
101
  "author": "beachball",
60
102
  "package": "@fluentui/react-tooltip",
61
- "comment": "Bump @fluentui/babel-make-styles to v0.0.0-nightlycc44f3625c20211220.1",
62
- "commit": "0839b0d96424e04706bd895d731d371acd3baaf5"
103
+ "comment": "Bump @fluentui/react-theme to v0.0.0-nightlye0b8e1fa6920220128.1",
104
+ "commit": "90d10ec8c2d159575962c4d3d913317633b44a7a"
63
105
  },
64
106
  {
65
107
  "author": "beachball",
66
108
  "package": "@fluentui/react-tooltip",
67
- "comment": "Bump @fluentui/jest-serializer-make-styles to v0.0.0-nightlycc44f3625c20211220.1",
68
- "commit": "0839b0d96424e04706bd895d731d371acd3baaf5"
109
+ "comment": "Bump @fluentui/react-utilities to v0.0.0-nightlye0b8e1fa6920220128.1",
110
+ "commit": "90d10ec8c2d159575962c4d3d913317633b44a7a"
69
111
  },
70
112
  {
71
113
  "author": "beachball",
72
114
  "package": "@fluentui/react-tooltip",
73
- "comment": "Bump @fluentui/react-conformance-make-styles to v0.0.0-nightlycc44f3625c20211220.1",
74
- "commit": "0839b0d96424e04706bd895d731d371acd3baaf5"
115
+ "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightlye0b8e1fa6920220128.1",
116
+ "commit": "90d10ec8c2d159575962c4d3d913317633b44a7a"
75
117
  }
76
118
  ],
77
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
+ },
78
126
  {
79
127
  "author": "andredias@microsoft.com",
80
128
  "package": "@fluentui/react-tooltip",
81
129
  "commit": "b59f44ed5db37b457476fdb3ec86ff273b776646",
82
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"
83
143
  }
84
144
  ]
85
145
  }
package/CHANGELOG.md CHANGED
@@ -1,27 +1,34 @@
1
1
  # Change Log - @fluentui/react-tooltip
2
2
 
3
- This log was last generated on Mon, 20 Dec 2021 04:17:53 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 28 Jan 2022 04:13:23 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightlycc44f3625c20211220.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tooltip_v0.0.0-nightlycc44f3625c20211220.1)
7
+ ## [0.0.0-nightlye0b8e1fa6920220128.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tooltip_v0.0.0-nightlye0b8e1fa6920220128.1)
8
8
 
9
- Mon, 20 Dec 2021 04:17:53 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tooltip_v9.0.0-beta.5..@fluentui/react-tooltip_v0.0.0-nightlycc44f3625c20211220.1)
9
+ Fri, 28 Jan 2022 04:13:23 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tooltip_v9.0.0-beta.5..@fluentui/react-tooltip_v0.0.0-nightlye0b8e1fa6920220128.1)
11
11
 
12
12
  ### Changes
13
13
 
14
- - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/0839b0d96424e04706bd895d731d371acd3baaf5) by email not defined)
14
+ - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/90d10ec8c2d159575962c4d3d913317633b44a7a) 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)
15
17
  - update styles to not use CSS shorthands ([PR #20795](https://github.com/microsoft/fluentui/pull/20795) by olfedias@microsoft.com)
16
- - Bump @fluentui/react-make-styles to v0.0.0-nightlycc44f3625c20211220.1 ([commit](https://github.com/microsoft/fluentui/commit/0839b0d96424e04706bd895d731d371acd3baaf5) by beachball)
17
- - Bump @fluentui/react-portal to v0.0.0-nightlycc44f3625c20211220.1 ([commit](https://github.com/microsoft/fluentui/commit/0839b0d96424e04706bd895d731d371acd3baaf5) by beachball)
18
- - Bump @fluentui/react-positioning to v0.0.0-nightlycc44f3625c20211220.1 ([commit](https://github.com/microsoft/fluentui/commit/0839b0d96424e04706bd895d731d371acd3baaf5) by beachball)
19
- - Bump @fluentui/react-shared-contexts to v0.0.0-nightlycc44f3625c20211220.1 ([commit](https://github.com/microsoft/fluentui/commit/0839b0d96424e04706bd895d731d371acd3baaf5) by beachball)
20
- - Bump @fluentui/react-theme to v0.0.0-nightlycc44f3625c20211220.1 ([commit](https://github.com/microsoft/fluentui/commit/0839b0d96424e04706bd895d731d371acd3baaf5) by beachball)
21
- - Bump @fluentui/react-utilities to v0.0.0-nightlycc44f3625c20211220.1 ([commit](https://github.com/microsoft/fluentui/commit/0839b0d96424e04706bd895d731d371acd3baaf5) by beachball)
22
- - Bump @fluentui/babel-make-styles to v0.0.0-nightlycc44f3625c20211220.1 ([commit](https://github.com/microsoft/fluentui/commit/0839b0d96424e04706bd895d731d371acd3baaf5) by beachball)
23
- - Bump @fluentui/jest-serializer-make-styles to v0.0.0-nightlycc44f3625c20211220.1 ([commit](https://github.com/microsoft/fluentui/commit/0839b0d96424e04706bd895d731d371acd3baaf5) by beachball)
24
- - Bump @fluentui/react-conformance-make-styles to v0.0.0-nightlycc44f3625c20211220.1 ([commit](https://github.com/microsoft/fluentui/commit/0839b0d96424e04706bd895d731d371acd3baaf5) by beachball)
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-nightlye0b8e1fa6920220128.1 ([commit](https://github.com/microsoft/fluentui/commit/90d10ec8c2d159575962c4d3d913317633b44a7a) by beachball)
27
+ - Bump @fluentui/react-positioning to v0.0.0-nightlye0b8e1fa6920220128.1 ([commit](https://github.com/microsoft/fluentui/commit/90d10ec8c2d159575962c4d3d913317633b44a7a) by beachball)
28
+ - Bump @fluentui/react-shared-contexts to v0.0.0-nightlye0b8e1fa6920220128.1 ([commit](https://github.com/microsoft/fluentui/commit/90d10ec8c2d159575962c4d3d913317633b44a7a) by beachball)
29
+ - Bump @fluentui/react-theme to v0.0.0-nightlye0b8e1fa6920220128.1 ([commit](https://github.com/microsoft/fluentui/commit/90d10ec8c2d159575962c4d3d913317633b44a7a) by beachball)
30
+ - Bump @fluentui/react-utilities to v0.0.0-nightlye0b8e1fa6920220128.1 ([commit](https://github.com/microsoft/fluentui/commit/90d10ec8c2d159575962c4d3d913317633b44a7a) by beachball)
31
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightlye0b8e1fa6920220128.1 ([commit](https://github.com/microsoft/fluentui/commit/90d10ec8c2d159575962c4d3d913317633b44a7a) by beachball)
25
32
 
26
33
  ## [9.0.0-beta.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-tooltip_v9.0.0-beta.5)
27
34
 
@@ -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 { ForwardRefComponent } from '@fluentui/react-utilities';
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 renderTooltip: (state: TooltipState) => JSX.Element;
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: ForwardRefComponent<TooltipProps>;
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
- * A tooltip can appear with the default appearance or inverted.
33
- * When not specified, the default appearance is used.
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 false
35
+ * @defaultvalue normal
44
36
  */
45
- inverted?: boolean;
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 which aria attribute to set on the trigger element.
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
- * @defaultvalue label
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
- triggerAriaAttribute: 'label' | 'labelledby' | 'describedby' | null;
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, 'content'>> & Pick<TooltipCommons, 'content'>;
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
- root: Omit<IntrinsicShorthandProps<'div'>, 'children'> & {
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 useTooltipStyles,
151
- * before being passed to renderTooltip.
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 useTooltip: (props: TooltipProps, ref: React_2.Ref<HTMLDivElement>) => TooltipState;
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 useTooltipStyles: (state: TooltipState) => TooltipState;
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: ForwardRefComponent<TooltipProps>;
6
+ export declare const Tooltip: React.FC<TooltipProps>;
@@ -1,15 +1,14 @@
1
- import * as React from 'react';
2
- import { useTooltip } from './useTooltip';
3
- import { renderTooltip } from './renderTooltip';
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 = /*#__PURE__*/React.forwardRef((props, ref) => {
10
- const state = useTooltip(props, ref);
11
- useTooltipStyles(state);
12
- return renderTooltip(state);
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":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,UAAT,QAA2B,cAA3B;AACA,SAAS,aAAT,QAA8B,iBAA9B;AACA,SAAS,gBAAT,QAAiC,oBAAjC;AAIA;;AAEG;;AACH,OAAO,MAAM,OAAO,gBAAsC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACxF,QAAM,KAAK,GAAG,UAAU,CAAC,KAAD,EAAQ,GAAR,CAAxB;AAEA,EAAA,gBAAgB,CAAC,KAAD,CAAhB;AACA,SAAO,aAAa,CAAC,KAAD,CAApB;AACD,CALyD,CAAnD;AAOP,OAAO,CAAC,WAAR,GAAsB,SAAtB","sourceRoot":""}
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, IntrinsicShorthandProps } from '@fluentui/react-utilities';
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
- root: Omit<IntrinsicShorthandProps<'div'>, 'children'> & {
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
- * A tooltip can appear with the default appearance or inverted.
26
- * When not specified, the default appearance is used.
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 false
19
+ * @defaultvalue normal
37
20
  */
38
- inverted?: boolean;
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 which aria attribute to set on the trigger element.
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
- * @defaultvalue label
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
- triggerAriaAttribute: 'label' | 'labelledby' | 'describedby' | null;
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, 'content'>> & Pick<TooltipCommons, 'content'>;
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":""}
@@ -2,4 +2,4 @@ import type { TooltipState } from './Tooltip.types';
2
2
  /**
3
3
  * Render the final JSX of Tooltip
4
4
  */
5
- export declare const renderTooltip: (state: TooltipState) => JSX.Element;
5
+ export declare const renderTooltip_unstable: (state: TooltipState) => JSX.Element;
@@ -5,15 +5,15 @@ import { getSlots } from '@fluentui/react-utilities';
5
5
  * Render the final JSX of Tooltip
6
6
  */
7
7
 
8
- export const renderTooltip = state => {
8
+ export const renderTooltip_unstable = state => {
9
9
  const {
10
10
  slots,
11
11
  slotProps
12
- } = getSlots(state, ['root']);
13
- return /*#__PURE__*/React.createElement(React.Fragment, null, state.root.children, state.shouldRenderTooltip && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
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
14
  }, state.withArrow && /*#__PURE__*/React.createElement("div", {
15
15
  ref: state.arrowRef,
16
16
  className: state.arrowClassName
17
- }), state.content)));
17
+ }), state.content.children)));
18
18
  };
19
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,aAAa,GAAI,KAAD,IAAwB;AACnD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAe,KAAf,EAAsB,CAAC,MAAD,CAAtB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACG,KAAK,CAAC,IAAN,CAAW,QADd,EAEG,KAAK,CAAC,mBAAN,iBACC,KAAA,CAAA,aAAA,CAAC,MAAD,EAAO,IAAP,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,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,OAFT,CADF,CAHJ,CADF;AAaD,CAhBM","sourceRoot":""}
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 useTooltipStyles,
7
- * before being passed to renderTooltip.
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 useTooltip: (props: TooltipProps, ref: React.Ref<HTMLDivElement>) => TooltipState;
10
+ export declare const useTooltip_unstable: (props: TooltipProps) => TooltipState;