@fluentui/react-tooltip 0.0.0-nightly9942542e5320220104.1 → 0.0.0-nightlya21bfaceec20220202.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 +85 -25
- package/CHANGELOG.md +21 -14
- 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 +4 -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 +38 -25
- 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 +6 -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 +43 -28
- package/lib-commonjs/components/Tooltip/useTooltipStyles.js.map +1 -1
- package/package.json +9 -11
@@ -1,24 +1,18 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import { mergeArrowOffset, resolvePositioningShorthand, usePopper } from '@fluentui/react-positioning';
|
3
3
|
import { TooltipContext, useFluent } from '@fluentui/react-shared-contexts';
|
4
|
-
import { applyTriggerPropsToChildren,
|
5
|
-
|
6
|
-
const tooltipBorderRadius = 4; // Update the root's borderRadius in useTooltipStyles.ts if this changes
|
7
|
-
|
8
|
-
const arrowHeight = 6; // Update the arrow's width/height in useTooltipStyles.ts if this changes
|
9
|
-
|
4
|
+
import { applyTriggerPropsToChildren, resolveShorthand, useControllableState, useId, useIsomorphicLayoutEffect, useIsSSR, useMergedRefs, useTimeout } from '@fluentui/react-utilities';
|
5
|
+
import { arrowHeight, tooltipBorderRadius } from './private/constants';
|
10
6
|
/**
|
11
7
|
* Create the state required to render Tooltip.
|
12
8
|
*
|
13
|
-
* The returned state can be modified with hooks such as
|
14
|
-
* before being passed to
|
9
|
+
* The returned state can be modified with hooks such as useTooltipStyles_unstable,
|
10
|
+
* before being passed to renderTooltip_unstable.
|
15
11
|
*
|
16
12
|
* @param props - props from this instance of Tooltip
|
17
|
-
* @param ref - reference to root HTMLElement of Tooltip
|
18
|
-
* @param defaultProps - (optional) default prop values provided by the implementing type
|
19
13
|
*/
|
20
14
|
|
21
|
-
export const
|
15
|
+
export const useTooltip_unstable = props => {
|
22
16
|
var _a, _b, _c, _d;
|
23
17
|
|
24
18
|
const context = React.useContext(TooltipContext);
|
@@ -28,12 +22,13 @@ export const useTooltip = (props, ref) => {
|
|
28
22
|
} = useFluent();
|
29
23
|
const [setDelayTimeout, clearDelayTimeout] = useTimeout();
|
30
24
|
const {
|
25
|
+
appearance,
|
26
|
+
children,
|
31
27
|
content,
|
32
|
-
inverted,
|
33
28
|
withArrow,
|
34
29
|
positioning,
|
35
30
|
onVisibleChange,
|
36
|
-
|
31
|
+
relationship,
|
37
32
|
showDelay = 250,
|
38
33
|
hideDelay = 250
|
39
34
|
} = props;
|
@@ -54,27 +49,26 @@ export const useTooltip = (props, ref) => {
|
|
54
49
|
});
|
55
50
|
}, [clearDelayTimeout, setVisibleInternal, onVisibleChange]);
|
56
51
|
const state = {
|
57
|
-
content,
|
58
|
-
inverted,
|
59
52
|
withArrow,
|
60
53
|
positioning,
|
61
54
|
showDelay,
|
62
55
|
hideDelay,
|
63
|
-
|
56
|
+
relationship,
|
64
57
|
visible,
|
65
58
|
shouldRenderTooltip: visible,
|
66
|
-
appearance
|
59
|
+
appearance,
|
67
60
|
// Slots
|
68
61
|
components: {
|
69
|
-
|
62
|
+
content: 'div'
|
70
63
|
},
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
64
|
+
content: resolveShorthand(content, {
|
65
|
+
defaultProps: {
|
66
|
+
role: 'tooltip'
|
67
|
+
},
|
68
|
+
required: true
|
76
69
|
})
|
77
70
|
};
|
71
|
+
state.content.id = useId('tooltip-', state.content.id);
|
78
72
|
const popperOptions = {
|
79
73
|
enabled: state.visible,
|
80
74
|
arrowPadding: 2 * tooltipBorderRadius,
|
@@ -93,7 +87,7 @@ export const useTooltip = (props, ref) => {
|
|
93
87
|
containerRef,
|
94
88
|
arrowRef
|
95
89
|
} = usePopper(popperOptions);
|
96
|
-
state.
|
90
|
+
state.content.ref = useMergedRefs(state.content.ref, containerRef);
|
97
91
|
state.arrowRef = arrowRef; // When this tooltip is visible, hide any other tooltips, and register it
|
98
92
|
// as the visibleTooltip with the TooltipContext.
|
99
93
|
// Also add a listener on document to hide the tooltip if Escape is pressed
|
@@ -161,9 +155,9 @@ export const useTooltip = (props, ref) => {
|
|
161
155
|
}, [setDelayTimeout, setVisible, state.hideDelay, targetDocument]); // Cancel the hide timer when the pointer enters the tooltip, and restart it when the mouse leaves.
|
162
156
|
// This keeps the tooltip visible when the pointer is moved over it.
|
163
157
|
|
164
|
-
state.
|
165
|
-
state.
|
166
|
-
const child = /*#__PURE__*/React.isValidElement(
|
158
|
+
state.content.onPointerEnter = useMergedCallbacks(state.content.onPointerEnter, clearDelayTimeout);
|
159
|
+
state.content.onPointerLeave = useMergedCallbacks(state.content.onPointerLeave, onLeaveTrigger);
|
160
|
+
const child = /*#__PURE__*/React.isValidElement(children) ? children : undefined; // The props to add to the trigger element (child)
|
167
161
|
|
168
162
|
const triggerProps = {
|
169
163
|
onPointerEnter: useMergedCallbacks((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onPointerEnter, onEnterTrigger),
|
@@ -179,26 +173,25 @@ export const useTooltip = (props, ref) => {
|
|
179
173
|
triggerProps.ref = childTargetRef;
|
180
174
|
}
|
181
175
|
|
182
|
-
if (
|
183
|
-
// aria-label only works if the content is a string. Otherwise, need to use labelledby.
|
184
|
-
if (typeof state.content === 'string') {
|
185
|
-
triggerProps['aria-label'] = state.content;
|
186
|
-
} else {
|
187
|
-
state.
|
188
|
-
}
|
189
|
-
}
|
176
|
+
if (relationship === 'label') {
|
177
|
+
// aria-label only works if the content is a string. Otherwise, need to use aria-labelledby.
|
178
|
+
if (typeof state.content.children === 'string') {
|
179
|
+
triggerProps['aria-label'] = state.content.children;
|
180
|
+
} else if (!isServerSideRender) {
|
181
|
+
triggerProps['aria-labelledby'] = state.content.id; // Always render the tooltip even if hidden, so that aria-labelledby refers to a valid element
|
190
182
|
|
191
|
-
|
192
|
-
|
183
|
+
state.shouldRenderTooltip = true;
|
184
|
+
}
|
185
|
+
} else if (relationship === 'description') {
|
186
|
+
if (!isServerSideRender) {
|
187
|
+
triggerProps['aria-describedby'] = state.content.id; // Always render the tooltip even if hidden, so that aria-describedby refers to a valid element
|
193
188
|
|
194
|
-
|
195
|
-
|
196
|
-
triggerProps['aria-describedby'] = state.root.id;
|
197
|
-
state.shouldRenderTooltip = true;
|
189
|
+
state.shouldRenderTooltip = true;
|
190
|
+
}
|
198
191
|
} // Apply the trigger props to the child, either by calling the render function, or cloning with the new props
|
199
192
|
|
200
193
|
|
201
|
-
state.
|
194
|
+
state.children = applyTriggerPropsToChildren(children, triggerProps);
|
202
195
|
return state;
|
203
196
|
};
|
204
197
|
/**
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Tooltip/useTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,EAA2B,2BAA3B,EAAwD,SAAxD,QAAyE,6BAAzE;AACA,SAAS,cAAT,EAAyB,SAAzB,QAA0C,iCAA1C;AACA,SACE,2BADF,EAEE,
|
1
|
+
{"version":3,"sources":["../../../src/components/Tooltip/useTooltip.tsx"],"names":[],"mappings":"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","sourceRoot":""}
|
@@ -3,4 +3,4 @@ export declare const tooltipClassName = "fui-Tooltip";
|
|
3
3
|
/**
|
4
4
|
* Apply styling to the Tooltip slots based on the state
|
5
5
|
*/
|
6
|
-
export declare const
|
6
|
+
export declare const useTooltipStyles_unstable: (state: TooltipState) => TooltipState;
|
@@ -1,5 +1,7 @@
|
|
1
|
-
import { shorthands, __styles, mergeClasses } from '@
|
1
|
+
import { shorthands, __styles, mergeClasses } from '@griffel/react';
|
2
2
|
import { createArrowStyles } from '@fluentui/react-positioning';
|
3
|
+
import { tokens } from '@fluentui/react-theme';
|
4
|
+
import { arrowHeight } from './private/constants';
|
3
5
|
export const tooltipClassName = 'fui-Tooltip';
|
4
6
|
/**
|
5
7
|
* Styles for the tooltip
|
@@ -8,10 +10,7 @@ export const tooltipClassName = 'fui-Tooltip';
|
|
8
10
|
const useStyles = /*#__PURE__*/__styles({
|
9
11
|
"root": {
|
10
12
|
"mc9l5x": "fjseox",
|
11
|
-
"
|
12
|
-
"z189sj": ["f11qrl6u", "fjlbh76"],
|
13
|
-
"Byoj8tv": "fy7v416",
|
14
|
-
"uwmqm3": ["fjlbh76", "f11qrl6u"],
|
13
|
+
"B7ck84d": "f1ewtqcl",
|
15
14
|
"B2u0y6b": "f132xexn",
|
16
15
|
"Bceei9c": "f158kwzp",
|
17
16
|
"Bahqtrf": "fk6fouc",
|
@@ -21,6 +20,22 @@ const useStyles = /*#__PURE__*/__styles({
|
|
21
20
|
"Beyfa6y": ["f16jpd5f", "f1aa9q02"],
|
22
21
|
"B7oj6ja": ["f1jar5jt", "fyu767a"],
|
23
22
|
"Btl43ni": ["fyu767a", "f1jar5jt"],
|
23
|
+
"B4j52fo": "f5ogflp",
|
24
|
+
"Bekrc4i": ["f1hqa2wf", "finvdd3"],
|
25
|
+
"Bn0qgzm": "f1f09k3d",
|
26
|
+
"ibv6hh": ["finvdd3", "f1hqa2wf"],
|
27
|
+
"icvyot": "fzkkow9",
|
28
|
+
"vrafjx": ["fcdblym", "fjik90z"],
|
29
|
+
"oivjwe": "fg706s2",
|
30
|
+
"wvpqe5": ["fjik90z", "fcdblym"],
|
31
|
+
"g2u3we": "fghlq4f",
|
32
|
+
"h3c5rm": ["f1gn591s", "fjscplz"],
|
33
|
+
"B9xav0g": "fb073pr",
|
34
|
+
"zhjwy3": ["fjscplz", "f1gn591s"],
|
35
|
+
"z8tnut": "f10ra9hq",
|
36
|
+
"z189sj": ["fd9xhir", "f1jlaasf"],
|
37
|
+
"Byoj8tv": "f1d7kygh",
|
38
|
+
"uwmqm3": ["f1jlaasf", "fd9xhir"],
|
24
39
|
"De3pzq": "fxugw4r",
|
25
40
|
"sj55zd": "f19n0e5",
|
26
41
|
"Bhu2qc9": "fxeb0a7"
|
@@ -37,45 +52,43 @@ const useStyles = /*#__PURE__*/__styles({
|
|
37
52
|
"De3pzq": "f1u2r49w",
|
38
53
|
"Bcdw1i0": "fd7fpy0",
|
39
54
|
"Bj3rh1h": "f1bsuimh",
|
40
|
-
"
|
41
|
-
"
|
55
|
+
"a9b677": "f1ekdpwm",
|
56
|
+
"Bqenvij": "f83vc9z",
|
42
57
|
"rurcny": "fuzzvh5",
|
43
|
-
"
|
44
|
-
"B5c9fhp": ["fijcjxk", "f11y671q"],
|
45
|
-
"Bhe99jt": ["f1vtdej5", "f7y375m"],
|
46
|
-
"B2r1szc": ["f7y375m", "f1vtdej5"],
|
58
|
+
"Bex5imi": "fkk33zh",
|
47
59
|
"xx9plb": "fxf9f1y",
|
60
|
+
"Bmqnesq": "f170vdtw",
|
48
61
|
"Bdn98qo": "f103af6e",
|
49
62
|
"Bbc2r3f": "f15umuo5",
|
50
63
|
"B1dvbpk": "f3wpjpt",
|
51
|
-
"
|
64
|
+
"D4ky5z": "f1k3tce7",
|
65
|
+
"cqycoz": "f1dkdgqi",
|
66
|
+
"I89eb": "f5ghsz",
|
67
|
+
"k1i1uq": "fyqop9u",
|
68
|
+
"Epwjcz": "f1m5ya7j",
|
69
|
+
"Bp1vogq": "f3sp63x",
|
70
|
+
"px8gyy": ["f5bg3dr", "f1rfdd74"],
|
52
71
|
"h6z6rw": "fzd2j21",
|
53
|
-
"
|
54
|
-
"F42hee": ["f1jq8eg5", "f12n7c5j"],
|
55
|
-
"Blxsnla": ["f1wv7y6t", "fi4qyh6"],
|
56
|
-
"t2scew": "fcvru7r",
|
57
|
-
"Emsed9": "f7ybgnc",
|
58
|
-
"E11wbp": "f16xtfle",
|
59
|
-
"hl6cv3": "fotnskf",
|
72
|
+
"hl6cv3": "f1773hnp",
|
60
73
|
"Bh2vraf": "f1n8855c",
|
61
|
-
"yayu3t": "
|
74
|
+
"yayu3t": "f1v7783n",
|
62
75
|
"wedwtw": "fsw6im5",
|
63
|
-
"rhl9o9": "
|
76
|
+
"rhl9o9": "fh2hsk5",
|
64
77
|
"Bu8t5uz": "f159pzir",
|
65
|
-
"B6q6orb": "
|
78
|
+
"B6q6orb": "f11yvu4",
|
66
79
|
"Bwwlvwl": "fm1ycve"
|
67
80
|
}
|
68
81
|
}, {
|
69
|
-
"d": [".fjseox{display:none;}", ".
|
82
|
+
"d": [".fjseox{display:none;}", ".f1ewtqcl{box-sizing:border-box;}", ".f132xexn{max-width:240px;}", ".f158kwzp{cursor:default;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f10ra9hq{padding-top:4px;}", ".fd9xhir{padding-right:11px;}", ".f1jlaasf{padding-left:11px;}", ".f1d7kygh{padding-bottom:6px;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxeb0a7{-webkit-filter:drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 4px 8px var(--colorNeutralShadowKey));filter:drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 4px 8px var(--colorNeutralShadowKey));}", ".ftgm304{display:block;}", ".f5pduvr{background-color:var(--colorNeutralBackgroundInverted);}", ".fqpbvvt{color:var(--colorNeutralForegroundInverted);}", ".f1euv43f{position:absolute;}", ".f1u2r49w{background-color:inherit;}", ".fd7fpy0{visibility:hidden;}", ".f1bsuimh{z-index:-1;}", ".f1ekdpwm{width:8.484px;}", ".f83vc9z{height:8.484px;}", ".fuzzvh5:before{content:\"\";}", ".fkk33zh:before{visibility:visible;}", ".fxf9f1y:before{position:absolute;}", ".f170vdtw:before{box-sizing:border-box;}", ".f103af6e:before{width:inherit;}", ".f15umuo5:before{height:inherit;}", ".f3wpjpt:before{background-color:inherit;}", ".f1k3tce7:before{border-right-width:1px;}", ".f1dkdgqi:before{border-right-style:solid;}", ".f5ghsz:before{border-right-color:var(--colorTransparentStroke);}", ".fyqop9u:before{border-bottom-width:1px;}", ".f1m5ya7j:before{border-bottom-style:solid;}", ".f3sp63x:before{border-bottom-color:var(--colorTransparentStroke);}", ".f5bg3dr:before{border-bottom-right-radius:var(--borderRadiusSmall);}", ".f1rfdd74:before{border-bottom-left-radius:var(--borderRadiusSmall);}", ".fzd2j21:before{-webkit-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);-moz-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);-ms-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);}", "[data-popper-placement^=\"top\"] .f1773hnp{bottom:-1px;}", "[data-popper-placement^=\"top\"] .f1n8855c{--angle:0;}", "[data-popper-placement^=\"right\"] .f1v7783n{left:-1px;}", "[data-popper-placement^=\"right\"] .fsw6im5{--angle:90deg;}", "[data-popper-placement^=\"bottom\"] .fh2hsk5{top:-1px;}", "[data-popper-placement^=\"bottom\"] .f159pzir{--angle:180deg;}", "[data-popper-placement^=\"left\"] .f11yvu4{right:-1px;}", "[data-popper-placement^=\"left\"] .fm1ycve{--angle:270deg;}"]
|
70
83
|
});
|
71
84
|
/**
|
72
85
|
* Apply styling to the Tooltip slots based on the state
|
73
86
|
*/
|
74
87
|
|
75
88
|
|
76
|
-
export const
|
89
|
+
export const useTooltipStyles_unstable = state => {
|
77
90
|
const styles = useStyles();
|
78
|
-
state.
|
91
|
+
state.content.className = mergeClasses(tooltipClassName, styles.root, state.appearance === 'inverted' && styles.inverted, state.visible && styles.visible, state.content.className);
|
79
92
|
state.arrowClassName = styles.arrow;
|
80
93
|
return state;
|
81
94
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Tooltip/useTooltipStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,YAAiC,YAAjC,QAAqD,
|
1
|
+
{"version":3,"sources":["../../../src/components/Tooltip/useTooltipStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,YAAiC,YAAjC,QAAqD,gBAArD;AACA,SAAS,iBAAT,QAAkC,6BAAlC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,WAAT,QAA4B,qBAA5B;AAGA,OAAO,MAAM,gBAAgB,GAAG,aAAzB;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAkCA;;AAEG;;;AACH,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAAsC;AAC7E,QAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,EAAA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CACpC,gBADoC,EAEpC,MAAM,CAAC,IAF6B,EAGpC,KAAK,CAAC,UAAN,KAAqB,UAArB,IAAmC,MAAM,CAAC,QAHN,EAIpC,KAAK,CAAC,OAAN,IAAiB,MAAM,CAAC,OAJY,EAKpC,KAAK,CAAC,OAAN,CAAc,SALsB,CAAtC;AAQA,EAAA,KAAK,CAAC,cAAN,GAAuB,MAAM,CAAC,KAA9B;AAEA,SAAO,KAAP;AACD,CAdM","sourceRoot":""}
|
@@ -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>;
|
@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports.Tooltip = void 0;
|
7
7
|
|
8
|
-
const React = /*#__PURE__*/require("react");
|
9
|
-
|
10
8
|
const useTooltip_1 = /*#__PURE__*/require("./useTooltip");
|
11
9
|
|
12
10
|
const renderTooltip_1 = /*#__PURE__*/require("./renderTooltip");
|
@@ -17,10 +15,12 @@ const useTooltipStyles_1 = /*#__PURE__*/require("./useTooltipStyles");
|
|
17
15
|
*/
|
18
16
|
|
19
17
|
|
20
|
-
|
21
|
-
const state = useTooltip_1.
|
22
|
-
useTooltipStyles_1.
|
23
|
-
return renderTooltip_1.
|
24
|
-
}
|
18
|
+
const Tooltip = props => {
|
19
|
+
const state = useTooltip_1.useTooltip_unstable(props);
|
20
|
+
useTooltipStyles_1.useTooltipStyles_unstable(state);
|
21
|
+
return renderTooltip_1.renderTooltip_unstable(state);
|
22
|
+
};
|
23
|
+
|
24
|
+
exports.Tooltip = Tooltip;
|
25
25
|
exports.Tooltip.displayName = 'Tooltip';
|
26
26
|
//# 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,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,OAAO,GAA2B,KAAK,IAAG;AACrD,QAAM,KAAK,GAAG,YAAA,CAAA,mBAAA,CAAoB,KAApB,CAAd;AAEA,EAAA,kBAAA,CAAA,yBAAA,CAA0B,KAA1B;AACA,SAAO,eAAA,CAAA,sBAAA,CAAuB,KAAvB,CAAP;AACD,CALM;;AAAM,OAAA,CAAA,OAAA,GAAO,OAAP;AAOb,OAAA,CAAA,OAAA,CAAQ,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,21 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.tooltipBorderRadius = exports.arrowHeight = void 0;
|
7
|
+
/**
|
8
|
+
* The height of the tooltip's arrow in pixels.
|
9
|
+
*/
|
10
|
+
|
11
|
+
exports.arrowHeight = 6;
|
12
|
+
/**
|
13
|
+
* The default value of the tooltip's border radius (borderRadiusMedium).
|
14
|
+
*
|
15
|
+
* Unfortunately, Popper requires it to be specified as a variable instead of using CSS.
|
16
|
+
* While we could use getComputedStyle, that adds a performance penalty for something that
|
17
|
+
* will likely never change.
|
18
|
+
*/
|
19
|
+
|
20
|
+
exports.tooltipBorderRadius = 4;
|
21
|
+
//# sourceMappingURL=constants.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Tooltip/private/constants.ts"],"names":[],"mappings":";;;;;;AAAA;;AAEG;;AACU,OAAA,CAAA,WAAA,GAAc,CAAd;AAEb;;;;;;AAMG;;AACU,OAAA,CAAA,mBAAA,GAAsB,CAAtB","sourceRoot":""}
|
@@ -3,7 +3,7 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.
|
6
|
+
exports.renderTooltip_unstable = void 0;
|
7
7
|
|
8
8
|
const React = /*#__PURE__*/require("react");
|
9
9
|
|
@@ -15,17 +15,17 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
15
15
|
*/
|
16
16
|
|
17
17
|
|
18
|
-
const
|
18
|
+
const renderTooltip_unstable = state => {
|
19
19
|
const {
|
20
20
|
slots,
|
21
21
|
slotProps
|
22
|
-
} = react_utilities_1.getSlots(state
|
23
|
-
return React.createElement(React.Fragment, null, state.
|
22
|
+
} = react_utilities_1.getSlots(state);
|
23
|
+
return React.createElement(React.Fragment, null, state.children, state.shouldRenderTooltip && React.createElement(react_portal_1.Portal, null, React.createElement(slots.content, { ...slotProps.content
|
24
24
|
}, state.withArrow && React.createElement("div", {
|
25
25
|
ref: state.arrowRef,
|
26
26
|
className: state.arrowClassName
|
27
|
-
}), state.content)));
|
27
|
+
}), state.content.children)));
|
28
28
|
};
|
29
29
|
|
30
|
-
exports.
|
30
|
+
exports.renderTooltip_unstable = renderTooltip_unstable;
|
31
31
|
//# sourceMappingURL=renderTooltip.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Tooltip/renderTooltip.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,
|
1
|
+
{"version":3,"sources":["../../../src/components/Tooltip/renderTooltip.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,sBAAsB,GAAI,KAAD,IAAwB;AAC5D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAuB,KAAvB,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACG,KAAK,CAAC,QADT,EAEG,KAAK,CAAC,mBAAN,IACC,KAAA,CAAA,aAAA,CAAC,cAAA,CAAA,MAAD,EAAO,IAAP,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;AAAf,GAAd,EACG,KAAK,CAAC,SAAN,IAAmB,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;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","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;
|