@fluentui/react-tooltip 0.0.0-nightly-20221227-0422.1 → 0.0.0-nightly-20221229-0425.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 +17 -17
- package/CHANGELOG.md +11 -11
- package/lib/components/Tooltip/Tooltip.js +2 -3
- package/lib/components/Tooltip/Tooltip.js.map +1 -1
- package/lib/components/Tooltip/private/constants.js +0 -1
- package/lib/components/Tooltip/private/constants.js.map +1 -1
- package/lib/components/Tooltip/renderTooltip.js +2 -2
- package/lib/components/Tooltip/renderTooltip.js.map +1 -1
- package/lib/components/Tooltip/useTooltip.js +24 -38
- package/lib/components/Tooltip/useTooltip.js.map +1 -1
- package/lib/components/Tooltip/useTooltipStyles.js +0 -3
- package/lib/components/Tooltip/useTooltipStyles.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Tooltip.js +0 -2
- package/lib-commonjs/Tooltip.js.map +1 -1
- package/lib-commonjs/components/Tooltip/Tooltip.js +2 -8
- package/lib-commonjs/components/Tooltip/Tooltip.js.map +1 -1
- package/lib-commonjs/components/Tooltip/Tooltip.types.js.map +1 -1
- package/lib-commonjs/components/Tooltip/index.js +0 -6
- package/lib-commonjs/components/Tooltip/index.js.map +1 -1
- package/lib-commonjs/components/Tooltip/private/constants.js +0 -2
- package/lib-commonjs/components/Tooltip/private/constants.js.map +1 -1
- package/lib-commonjs/components/Tooltip/renderTooltip.js +2 -7
- package/lib-commonjs/components/Tooltip/renderTooltip.js.map +1 -1
- package/lib-commonjs/components/Tooltip/useTooltip.js +24 -46
- package/lib-commonjs/components/Tooltip/useTooltip.js.map +1 -1
- package/lib-commonjs/components/Tooltip/useTooltipStyles.js +0 -9
- package/lib-commonjs/components/Tooltip/useTooltipStyles.js.map +1 -1
- package/lib-commonjs/index.js +0 -2
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +8 -8
package/CHANGELOG.json
CHANGED
@@ -2,9 +2,9 @@
|
|
2
2
|
"name": "@fluentui/react-tooltip",
|
3
3
|
"entries": [
|
4
4
|
{
|
5
|
-
"date": "
|
6
|
-
"tag": "@fluentui/react-tooltip_v0.0.0-nightly-
|
7
|
-
"version": "0.0.0-nightly-
|
5
|
+
"date": "Thu, 29 Dec 2022 04:34:29 GMT",
|
6
|
+
"tag": "@fluentui/react-tooltip_v0.0.0-nightly-20221229-0425.1",
|
7
|
+
"version": "0.0.0-nightly-20221229-0425.1",
|
8
8
|
"comments": {
|
9
9
|
"prerelease": [
|
10
10
|
{
|
@@ -16,44 +16,44 @@
|
|
16
16
|
{
|
17
17
|
"author": "beachball",
|
18
18
|
"package": "@fluentui/react-tooltip",
|
19
|
-
"comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-
|
20
|
-
"commit": "
|
19
|
+
"comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-20221229-0425.1",
|
20
|
+
"commit": "f91b275fd9b1829634e1dc1de59d8fbf68359edc"
|
21
21
|
},
|
22
22
|
{
|
23
23
|
"author": "beachball",
|
24
24
|
"package": "@fluentui/react-tooltip",
|
25
|
-
"comment": "Bump @fluentui/react-portal to v0.0.0-nightly-
|
26
|
-
"commit": "
|
25
|
+
"comment": "Bump @fluentui/react-portal to v0.0.0-nightly-20221229-0425.1",
|
26
|
+
"commit": "f91b275fd9b1829634e1dc1de59d8fbf68359edc"
|
27
27
|
},
|
28
28
|
{
|
29
29
|
"author": "beachball",
|
30
30
|
"package": "@fluentui/react-tooltip",
|
31
|
-
"comment": "Bump @fluentui/react-positioning to v0.0.0-nightly-
|
32
|
-
"commit": "
|
31
|
+
"comment": "Bump @fluentui/react-positioning to v0.0.0-nightly-20221229-0425.1",
|
32
|
+
"commit": "f91b275fd9b1829634e1dc1de59d8fbf68359edc"
|
33
33
|
},
|
34
34
|
{
|
35
35
|
"author": "beachball",
|
36
36
|
"package": "@fluentui/react-tooltip",
|
37
|
-
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
38
|
-
"commit": "
|
37
|
+
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20221229-0425.1",
|
38
|
+
"commit": "f91b275fd9b1829634e1dc1de59d8fbf68359edc"
|
39
39
|
},
|
40
40
|
{
|
41
41
|
"author": "beachball",
|
42
42
|
"package": "@fluentui/react-tooltip",
|
43
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
44
|
-
"commit": "
|
43
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221229-0425.1",
|
44
|
+
"commit": "f91b275fd9b1829634e1dc1de59d8fbf68359edc"
|
45
45
|
},
|
46
46
|
{
|
47
47
|
"author": "beachball",
|
48
48
|
"package": "@fluentui/react-tooltip",
|
49
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
50
|
-
"commit": "
|
49
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221229-0425.1",
|
50
|
+
"commit": "f91b275fd9b1829634e1dc1de59d8fbf68359edc"
|
51
51
|
},
|
52
52
|
{
|
53
53
|
"author": "beachball",
|
54
54
|
"package": "@fluentui/react-tooltip",
|
55
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
56
|
-
"commit": "
|
55
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221229-0425.1",
|
56
|
+
"commit": "f91b275fd9b1829634e1dc1de59d8fbf68359edc"
|
57
57
|
}
|
58
58
|
]
|
59
59
|
}
|
package/CHANGELOG.md
CHANGED
@@ -1,24 +1,24 @@
|
|
1
1
|
# Change Log - @fluentui/react-tooltip
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Thu, 29 Dec 2022 04:34:29 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
-
## [0.0.0-nightly-
|
7
|
+
## [0.0.0-nightly-20221229-0425.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tooltip_v0.0.0-nightly-20221229-0425.1)
|
8
8
|
|
9
|
-
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tooltip_v9.1.5..@fluentui/react-tooltip_v0.0.0-nightly-
|
9
|
+
Thu, 29 Dec 2022 04:34:29 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tooltip_v9.1.5..@fluentui/react-tooltip_v0.0.0-nightly-20221229-0425.1)
|
11
11
|
|
12
12
|
### Changes
|
13
13
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
15
|
-
- Bump @fluentui/keyboard-keys to v0.0.0-nightly-
|
16
|
-
- Bump @fluentui/react-portal to v0.0.0-nightly-
|
17
|
-
- Bump @fluentui/react-positioning to v0.0.0-nightly-
|
18
|
-
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
19
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
20
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
21
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
15
|
+
- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20221229-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/f91b275fd9b1829634e1dc1de59d8fbf68359edc) by beachball)
|
16
|
+
- Bump @fluentui/react-portal to v0.0.0-nightly-20221229-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/f91b275fd9b1829634e1dc1de59d8fbf68359edc) by beachball)
|
17
|
+
- Bump @fluentui/react-positioning to v0.0.0-nightly-20221229-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/f91b275fd9b1829634e1dc1de59d8fbf68359edc) by beachball)
|
18
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20221229-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/f91b275fd9b1829634e1dc1de59d8fbf68359edc) by beachball)
|
19
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20221229-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/f91b275fd9b1829634e1dc1de59d8fbf68359edc) by beachball)
|
20
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20221229-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/f91b275fd9b1829634e1dc1de59d8fbf68359edc) by beachball)
|
21
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221229-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/f91b275fd9b1829634e1dc1de59d8fbf68359edc) by beachball)
|
22
22
|
|
23
23
|
## [9.1.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-tooltip_v9.1.5)
|
24
24
|
|
@@ -4,13 +4,12 @@ import { useTooltipStyles_unstable } from './useTooltipStyles';
|
|
4
4
|
/**
|
5
5
|
* A tooltip provides light weight contextual information on top of its target element.
|
6
6
|
*/
|
7
|
-
|
8
7
|
export const Tooltip = props => {
|
9
8
|
const state = useTooltip_unstable(props);
|
10
9
|
useTooltipStyles_unstable(state);
|
11
10
|
return renderTooltip_unstable(state);
|
12
11
|
};
|
13
|
-
Tooltip.displayName = 'Tooltip';
|
14
|
-
|
12
|
+
Tooltip.displayName = 'Tooltip';
|
13
|
+
// type casting here is required to ensure internal type FluentTriggerComponent is not leaked
|
15
14
|
Tooltip.isFluentTriggerComponent = true;
|
16
15
|
//# sourceMappingURL=Tooltip.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"AACA,SAASA,mBAAmB,QAAQ,cAAc;AAClD,SAASC,sBAAsB,QAAQ,iBAAiB;AACxD,SAASC,yBAAyB,QAAQ,oBAAoB;AAI9D;;;AAGA,OAAO,MAAMC,OAAO,GAA2BC,KAAK,IAAG;EACrD,MAAMC,KAAK,GAAGL,mBAAmB,CAACI,KAAK,CAAC;EAExCF,yBAAyB,CAACG,KAAK,CAAC;EAChC,OAAOJ,sBAAsB,CAACI,KAAK,CAAC;AACtC,CAAC;AAEDF,OAAO,CAACG,WAAW,GAAG,SAAS;AAC/B;AACCH,OAAkC,CAACI,wBAAwB,GAAG,IAAI","names":["useTooltip_unstable","renderTooltip_unstable","useTooltipStyles_unstable","Tooltip","props","state","displayName","isFluentTriggerComponent"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tooltip/src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTooltip_unstable } from './useTooltip';\nimport { renderTooltip_unstable } from './renderTooltip';\nimport { useTooltipStyles_unstable } from './useTooltipStyles';\nimport type { TooltipProps } from './Tooltip.types';\nimport type { FluentTriggerComponent } from '@fluentui/react-utilities';\n\n/**\n * A tooltip provides light weight contextual information on top of its target element.\n */\nexport const Tooltip: React.FC<TooltipProps> = props => {\n const state = useTooltip_unstable(props);\n\n useTooltipStyles_unstable(state);\n return renderTooltip_unstable(state);\n};\n\nTooltip.displayName = 'Tooltip';\n// type casting here is required to ensure internal type FluentTriggerComponent is not leaked\n(Tooltip as FluentTriggerComponent).isFluentTriggerComponent = true;\n"]}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../../../../../../../../packages/react-components/react-tooltip/src/components/Tooltip/private/constants.ts"],"names":[],"mappings":"AAAA;;
|
1
|
+
{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../../../../packages/react-components/react-tooltip/src/components/Tooltip/private/constants.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,CAAC;AAE7B;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,CAAC","sourcesContent":["/**\n * The height of the tooltip's arrow in pixels.\n */\nexport const arrowHeight = 6;\n\n/**\n * The default value of the tooltip's border radius (borderRadiusMedium).\n *\n * Unfortunately, Popper requires it to be specified as a variable instead of using CSS.\n * While we could use getComputedStyle, that adds a performance penalty for something that\n * will likely never change.\n */\nexport const tooltipBorderRadius = 4;\n"]}
|
@@ -4,7 +4,6 @@ import { getSlots } from '@fluentui/react-utilities';
|
|
4
4
|
/**
|
5
5
|
* Render the final JSX of Tooltip
|
6
6
|
*/
|
7
|
-
|
8
7
|
export const renderTooltip_unstable = state => {
|
9
8
|
const {
|
10
9
|
slots,
|
@@ -12,7 +11,8 @@ export const renderTooltip_unstable = state => {
|
|
12
11
|
} = getSlots(state);
|
13
12
|
return /*#__PURE__*/React.createElement(React.Fragment, null, state.children, state.shouldRenderTooltip && /*#__PURE__*/React.createElement(Portal, {
|
14
13
|
mountNode: state.mountNode
|
15
|
-
}, /*#__PURE__*/React.createElement(slots.content, {
|
14
|
+
}, /*#__PURE__*/React.createElement(slots.content, {
|
15
|
+
...slotProps.content
|
16
16
|
}, state.withArrow && /*#__PURE__*/React.createElement("div", {
|
17
17
|
ref: state.arrowRef,
|
18
18
|
className: state.arrowClassName
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,sBAAsB,GAAIC,KAAmB,IAAI;EAC5D,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAeE,KAAK,CAAC;EAE1D,oBACEJ,0CACGI,KAAK,CAACG,QAAQ,EACdH,KAAK,CAACI,mBAAmB,iBACxBR,oBAACC,MAAM;IAACQ,SAAS,EAAEL,KAAK,CAACK;EAAS,gBAChCT,oBAACK,KAAK,CAACK,OAAO;IAAA,GAAKJ,SAAS,CAACI;EAAO,GACjCN,KAAK,CAACO,SAAS,iBAAIX;IAAKY,GAAG,EAAER,KAAK,CAACS,QAAQ;IAAEC,SAAS,EAAEV,KAAK,CAACW;EAAc,EAAI,EAChFX,KAAK,CAACM,OAAO,CAACH,QAAQ,CACT,CAEnB,CACA;AAEP,CAAC","names":["React","Portal","getSlots","renderTooltip_unstable","state","slots","slotProps","children","shouldRenderTooltip","mountNode","content","withArrow","ref","arrowRef","className","arrowClassName"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tooltip/src/components/Tooltip/renderTooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Portal } from '@fluentui/react-portal';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TooltipSlots, TooltipState } from './Tooltip.types';\n\n/**\n * Render the final JSX of Tooltip\n */\nexport const renderTooltip_unstable = (state: TooltipState) => {\n const { slots, slotProps } = getSlots<TooltipSlots>(state);\n\n return (\n <>\n {state.children}\n {state.shouldRenderTooltip && (\n <Portal mountNode={state.mountNode}>\n <slots.content {...slotProps.content}>\n {state.withArrow && <div ref={state.arrowRef} className={state.arrowClassName} />}\n {state.content.children}\n </slots.content>\n </Portal>\n )}\n </>\n );\n};\n"]}
|
@@ -12,10 +12,8 @@ import { Escape } from '@fluentui/keyboard-keys';
|
|
12
12
|
*
|
13
13
|
* @param props - props from this instance of Tooltip
|
14
14
|
*/
|
15
|
-
|
16
15
|
export const useTooltip_unstable = props => {
|
17
16
|
var _a, _b, _c, _d;
|
18
|
-
|
19
17
|
const context = useTooltipVisibility();
|
20
18
|
const isServerSideRender = useIsSSR();
|
21
19
|
const {
|
@@ -46,7 +44,6 @@ export const useTooltip_unstable = props => {
|
|
46
44
|
visible: newVisible
|
47
45
|
});
|
48
46
|
}
|
49
|
-
|
50
47
|
return newVisible;
|
51
48
|
});
|
52
49
|
}, [clearDelayTimeout, setVisibleInternal, onVisibleChange]);
|
@@ -80,40 +77,35 @@ export const useTooltip_unstable = props => {
|
|
80
77
|
offset: 4,
|
81
78
|
...resolvePositioningShorthand(state.positioning)
|
82
79
|
};
|
83
|
-
|
84
80
|
if (state.withArrow) {
|
85
81
|
positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeight);
|
86
82
|
}
|
87
|
-
|
88
83
|
const {
|
89
84
|
targetRef,
|
90
85
|
containerRef,
|
91
86
|
arrowRef
|
92
87
|
} = usePositioning(positioningOptions);
|
93
88
|
state.content.ref = useMergedRefs(state.content.ref, containerRef);
|
94
|
-
state.arrowRef = arrowRef;
|
89
|
+
state.arrowRef = arrowRef;
|
90
|
+
// When this tooltip is visible, hide any other tooltips, and register it
|
95
91
|
// as the visibleTooltip with the TooltipContext.
|
96
92
|
// Also add a listener on document to hide the tooltip if Escape is pressed
|
97
|
-
|
98
93
|
useIsomorphicLayoutEffect(() => {
|
99
94
|
var _a;
|
100
|
-
|
101
95
|
if (visible) {
|
102
96
|
const thisTooltip = {
|
103
97
|
hide: () => setVisible(false)
|
104
98
|
};
|
105
99
|
(_a = context.visibleTooltip) === null || _a === void 0 ? void 0 : _a.hide();
|
106
100
|
context.visibleTooltip = thisTooltip;
|
107
|
-
|
108
101
|
const onDocumentKeyDown = ev => {
|
109
102
|
if (ev.key === Escape) {
|
110
|
-
thisTooltip.hide();
|
103
|
+
thisTooltip.hide();
|
104
|
+
// stop propagation to avoid conflicting with other elements that listen for `Escape`
|
111
105
|
// e,g: Dialog, Popover, Menu
|
112
|
-
|
113
106
|
ev.stopPropagation();
|
114
107
|
}
|
115
108
|
};
|
116
|
-
|
117
109
|
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('keydown', onDocumentKeyDown, {
|
118
110
|
// As this event is added at targeted document,
|
119
111
|
// we need to capture the event to be sure keydown handling from tooltip happens first
|
@@ -123,80 +115,74 @@ export const useTooltip_unstable = props => {
|
|
123
115
|
if (context.visibleTooltip === thisTooltip) {
|
124
116
|
context.visibleTooltip = undefined;
|
125
117
|
}
|
126
|
-
|
127
118
|
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('keydown', onDocumentKeyDown, {
|
128
119
|
capture: true
|
129
120
|
});
|
130
121
|
};
|
131
122
|
}
|
132
|
-
}, [context, targetDocument, visible, setVisible]);
|
123
|
+
}, [context, targetDocument, visible, setVisible]);
|
124
|
+
// The focused element gets a blur event when the document loses focus
|
133
125
|
// (e.g. switching tabs in the browser), but we don't want to show the
|
134
126
|
// tooltip again when the document gets focus back. Handle this case by
|
135
127
|
// checking if the blurred element is still the document's activeElement.
|
136
128
|
// See https://github.com/microsoft/fluentui/issues/13541
|
137
|
-
|
138
|
-
|
139
|
-
|
129
|
+
const ignoreNextFocusEventRef = React.useRef(false);
|
130
|
+
// Listener for onPointerEnter and onFocus on the trigger element
|
140
131
|
const onEnterTrigger = React.useCallback(ev => {
|
141
132
|
if (ev.type === 'focus' && ignoreNextFocusEventRef.current) {
|
142
133
|
ignoreNextFocusEventRef.current = false;
|
143
134
|
return;
|
144
|
-
}
|
145
|
-
|
146
|
-
|
135
|
+
}
|
136
|
+
// Show immediately if another tooltip is already visible
|
147
137
|
const delay = context.visibleTooltip ? 0 : state.showDelay;
|
148
138
|
setDelayTimeout(() => {
|
149
139
|
setVisible(true, ev);
|
150
140
|
}, delay);
|
151
141
|
ev.persist(); // Persist the event since the setVisible call will happen asynchronously
|
152
|
-
}, [setDelayTimeout, setVisible, state.showDelay, context]);
|
153
|
-
|
142
|
+
}, [setDelayTimeout, setVisible, state.showDelay, context]);
|
143
|
+
// Listener for onPointerLeave and onBlur on the trigger element
|
154
144
|
const onLeaveTrigger = React.useCallback(ev => {
|
155
145
|
let delay = state.hideDelay;
|
156
|
-
|
157
146
|
if (ev.type === 'blur') {
|
158
147
|
// Hide immediately when losing focus
|
159
148
|
delay = 0;
|
160
149
|
ignoreNextFocusEventRef.current = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) === ev.target;
|
161
150
|
}
|
162
|
-
|
163
151
|
setDelayTimeout(() => {
|
164
152
|
setVisible(false, ev);
|
165
153
|
}, delay);
|
166
154
|
ev.persist(); // Persist the event since the setVisible call will happen asynchronously
|
167
|
-
}, [setDelayTimeout, setVisible, state.hideDelay, targetDocument]);
|
155
|
+
}, [setDelayTimeout, setVisible, state.hideDelay, targetDocument]);
|
156
|
+
// Cancel the hide timer when the mouse or focus enters the tooltip, and restart it when the mouse or focus leaves.
|
168
157
|
// This keeps the tooltip visible when the mouse is moved over it, or it has focus within.
|
169
|
-
|
170
158
|
state.content.onPointerEnter = mergeCallbacks(state.content.onPointerEnter, clearDelayTimeout);
|
171
159
|
state.content.onPointerLeave = mergeCallbacks(state.content.onPointerLeave, onLeaveTrigger);
|
172
160
|
state.content.onFocus = mergeCallbacks(state.content.onFocus, clearDelayTimeout);
|
173
161
|
state.content.onBlur = mergeCallbacks(state.content.onBlur, onLeaveTrigger);
|
174
162
|
const child = getTriggerChild(children);
|
175
163
|
const triggerAriaProps = {};
|
176
|
-
|
177
164
|
if (relationship === 'label') {
|
178
165
|
// aria-label only works if the content is a string. Otherwise, need to use aria-labelledby.
|
179
166
|
if (typeof state.content.children === 'string') {
|
180
167
|
triggerAriaProps['aria-label'] = state.content.children;
|
181
168
|
} else {
|
182
|
-
triggerAriaProps['aria-labelledby'] = state.content.id;
|
183
|
-
|
169
|
+
triggerAriaProps['aria-labelledby'] = state.content.id;
|
170
|
+
// Always render the tooltip even if hidden, so that aria-labelledby refers to a valid element
|
184
171
|
state.shouldRenderTooltip = true;
|
185
172
|
}
|
186
173
|
} else if (relationship === 'description') {
|
187
|
-
triggerAriaProps['aria-describedby'] = state.content.id;
|
188
|
-
|
174
|
+
triggerAriaProps['aria-describedby'] = state.content.id;
|
175
|
+
// Always render the tooltip even if hidden, so that aria-describedby refers to a valid element
|
189
176
|
state.shouldRenderTooltip = true;
|
190
|
-
}
|
191
|
-
|
192
|
-
|
177
|
+
}
|
178
|
+
// Don't render the Tooltip in SSR to avoid hydration errors
|
193
179
|
if (isServerSideRender) {
|
194
180
|
state.shouldRenderTooltip = false;
|
195
181
|
}
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
182
|
+
const childTargetRef = useMergedRefs(child === null || child === void 0 ? void 0 : child.ref, targetRef);
|
183
|
+
// Apply the trigger props to the child, either by calling the render function, or cloning with the new props
|
184
|
+
state.children = applyTriggerPropsToChildren(children, {
|
185
|
+
...triggerAriaProps,
|
200
186
|
...(child === null || child === void 0 ? void 0 : child.props),
|
201
187
|
// If the target prop is not provided, attach targetRef to the trigger element's ref prop
|
202
188
|
ref: positioningOptions.target === undefined ? childTargetRef : child === null || child === void 0 ? void 0 : child.ref,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-tooltip/src/components/Tooltip/useTooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { mergeArrowOffset, resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport {\n useTooltipVisibility_unstable as useTooltipVisibility,\n useFluent_unstable as useFluent,\n} from '@fluentui/react-shared-contexts';\nimport {\n applyTriggerPropsToChildren,\n resolveShorthand,\n useControllableState,\n useId,\n useIsomorphicLayoutEffect,\n useIsSSR,\n useMergedRefs,\n useTimeout,\n getTriggerChild,\n mergeCallbacks,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport type { TooltipProps, TooltipState, TooltipChildProps } from './Tooltip.types';\nimport { arrowHeight, tooltipBorderRadius } from './private/constants';\nimport { Escape } from '@fluentui/keyboard-keys';\n\n/**\n * Create the state required to render Tooltip.\n *\n * The returned state can be modified with hooks such as useTooltipStyles_unstable,\n * before being passed to renderTooltip_unstable.\n *\n * @param props - props from this instance of Tooltip\n */\nexport const useTooltip_unstable = (props: TooltipProps): TooltipState => {\n const context = useTooltipVisibility();\n const isServerSideRender = useIsSSR();\n const { targetDocument } = useFluent();\n const [setDelayTimeout, clearDelayTimeout] = useTimeout();\n\n const {\n appearance = 'normal',\n children,\n content,\n withArrow = false,\n positioning = 'above',\n onVisibleChange,\n relationship,\n showDelay = 250,\n hideDelay = 250,\n mountNode,\n } = props;\n\n const [visible, setVisibleInternal] = useControllableState({ state: props.visible, initialState: false });\n const setVisible = React.useCallback(\n (newVisible: boolean, ev?: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement>) => {\n clearDelayTimeout();\n setVisibleInternal(oldVisible => {\n if (newVisible !== oldVisible) {\n onVisibleChange?.(ev, { visible: newVisible });\n }\n return newVisible;\n });\n },\n [clearDelayTimeout, setVisibleInternal, onVisibleChange],\n );\n\n const state: TooltipState = {\n withArrow,\n positioning,\n showDelay,\n hideDelay,\n relationship,\n visible,\n shouldRenderTooltip: visible,\n appearance,\n mountNode,\n // Slots\n components: {\n content: 'div',\n },\n content: resolveShorthand(content, {\n defaultProps: {\n role: 'tooltip',\n },\n required: true,\n }),\n };\n\n state.content.id = useId('tooltip-', state.content.id);\n\n const positioningOptions = {\n enabled: state.visible,\n arrowPadding: 2 * tooltipBorderRadius,\n position: 'above' as const,\n align: 'center' as const,\n offset: 4,\n ...resolvePositioningShorthand(state.positioning),\n };\n\n if (state.withArrow) {\n positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeight);\n }\n\n const {\n targetRef,\n containerRef,\n arrowRef,\n }: {\n targetRef: React.MutableRefObject<unknown>;\n containerRef: React.MutableRefObject<HTMLDivElement>;\n arrowRef: React.MutableRefObject<HTMLDivElement>;\n } = usePositioning(positioningOptions);\n\n state.content.ref = useMergedRefs(state.content.ref, containerRef);\n state.arrowRef = arrowRef;\n\n // When this tooltip is visible, hide any other tooltips, and register it\n // as the visibleTooltip with the TooltipContext.\n // Also add a listener on document to hide the tooltip if Escape is pressed\n useIsomorphicLayoutEffect(() => {\n if (visible) {\n const thisTooltip = { hide: () => setVisible(false) };\n\n context.visibleTooltip?.hide();\n context.visibleTooltip = thisTooltip;\n\n const onDocumentKeyDown = (ev: KeyboardEvent) => {\n if (ev.key === Escape) {\n thisTooltip.hide();\n // stop propagation to avoid conflicting with other elements that listen for `Escape`\n // e,g: Dialog, Popover, Menu\n ev.stopPropagation();\n }\n };\n\n targetDocument?.addEventListener('keydown', onDocumentKeyDown, {\n // As this event is added at targeted document,\n // we need to capture the event to be sure keydown handling from tooltip happens first\n capture: true,\n });\n\n return () => {\n if (context.visibleTooltip === thisTooltip) {\n context.visibleTooltip = undefined;\n }\n\n targetDocument?.removeEventListener('keydown', onDocumentKeyDown, { capture: true });\n };\n }\n }, [context, targetDocument, visible, setVisible]);\n\n // The focused element gets a blur event when the document loses focus\n // (e.g. switching tabs in the browser), but we don't want to show the\n // tooltip again when the document gets focus back. Handle this case by\n // checking if the blurred element is still the document's activeElement.\n // See https://github.com/microsoft/fluentui/issues/13541\n const ignoreNextFocusEventRef = React.useRef(false);\n\n // Listener for onPointerEnter and onFocus on the trigger element\n const onEnterTrigger = React.useCallback(\n (ev: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement>) => {\n if (ev.type === 'focus' && ignoreNextFocusEventRef.current) {\n ignoreNextFocusEventRef.current = false;\n return;\n }\n\n // Show immediately if another tooltip is already visible\n const delay = context.visibleTooltip ? 0 : state.showDelay;\n\n setDelayTimeout(() => {\n setVisible(true, ev);\n }, delay);\n\n ev.persist(); // Persist the event since the setVisible call will happen asynchronously\n },\n [setDelayTimeout, setVisible, state.showDelay, context],\n );\n\n // Listener for onPointerLeave and onBlur on the trigger element\n const onLeaveTrigger = React.useCallback(\n (ev: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement>) => {\n let delay = state.hideDelay;\n\n if (ev.type === 'blur') {\n // Hide immediately when losing focus\n delay = 0;\n\n ignoreNextFocusEventRef.current = targetDocument?.activeElement === ev.target;\n }\n\n setDelayTimeout(() => {\n setVisible(false, ev);\n }, delay);\n\n ev.persist(); // Persist the event since the setVisible call will happen asynchronously\n },\n [setDelayTimeout, setVisible, state.hideDelay, targetDocument],\n );\n\n // Cancel the hide timer when the mouse or focus enters the tooltip, and restart it when the mouse or focus leaves.\n // This keeps the tooltip visible when the mouse is moved over it, or it has focus within.\n state.content.onPointerEnter = mergeCallbacks(state.content.onPointerEnter, clearDelayTimeout);\n state.content.onPointerLeave = mergeCallbacks(state.content.onPointerLeave, onLeaveTrigger);\n state.content.onFocus = mergeCallbacks(state.content.onFocus, clearDelayTimeout);\n state.content.onBlur = mergeCallbacks(state.content.onBlur, onLeaveTrigger);\n\n const child = getTriggerChild(children);\n\n const triggerAriaProps: Pick<TooltipChildProps, 'aria-label' | 'aria-labelledby' | 'aria-describedby'> = {};\n\n if (relationship === 'label') {\n // aria-label only works if the content is a string. Otherwise, need to use aria-labelledby.\n if (typeof state.content.children === 'string') {\n triggerAriaProps['aria-label'] = state.content.children;\n } else {\n triggerAriaProps['aria-labelledby'] = state.content.id;\n // Always render the tooltip even if hidden, so that aria-labelledby refers to a valid element\n state.shouldRenderTooltip = true;\n }\n } else if (relationship === 'description') {\n triggerAriaProps['aria-describedby'] = state.content.id;\n // Always render the tooltip even if hidden, so that aria-describedby refers to a valid element\n state.shouldRenderTooltip = true;\n }\n\n // Don't render the Tooltip in SSR to avoid hydration errors\n if (isServerSideRender) {\n state.shouldRenderTooltip = false;\n }\n\n const childTargetRef = useMergedRefs(child?.ref, targetRef);\n\n // Apply the trigger props to the child, either by calling the render function, or cloning with the new props\n state.children = applyTriggerPropsToChildren(children, {\n ...triggerAriaProps,\n ...child?.props,\n // If the target prop is not provided, attach targetRef to the trigger element's ref prop\n ref: positioningOptions.target === undefined ? childTargetRef : child?.ref,\n onPointerEnter: useEventCallback(mergeCallbacks(child?.props?.onPointerEnter, onEnterTrigger)),\n onPointerLeave: useEventCallback(mergeCallbacks(child?.props?.onPointerLeave, onLeaveTrigger)),\n onFocus: useEventCallback(mergeCallbacks(child?.props?.onFocus, onEnterTrigger)),\n onBlur: useEventCallback(mergeCallbacks(child?.props?.onBlur, onLeaveTrigger)),\n });\n\n return state;\n};\n"],"sourceRoot":""}
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,EAAEC,2BAA2B,EAAEC,cAAc,QAAQ,6BAA6B;AAC3G,SACEC,6BAA6B,IAAIC,oBAAoB,EACrDC,kBAAkB,IAAIC,SAAS,QAC1B,iCAAiC;AACxC,SACEC,2BAA2B,EAC3BC,gBAAgB,EAChBC,oBAAoB,EACpBC,KAAK,EACLC,yBAAyB,EACzBC,QAAQ,EACRC,aAAa,EACbC,UAAU,EACVC,eAAe,EACfC,cAAc,EACdC,gBAAgB,QACX,2BAA2B;AAElC,SAASC,WAAW,EAAEC,mBAAmB,QAAQ,qBAAqB;AACtE,SAASC,MAAM,QAAQ,yBAAyB;AAEhD;;;;;;;;AAQA,OAAO,MAAMC,mBAAmB,GAAIC,KAAmB,IAAkB;;EACvE,MAAMC,OAAO,GAAGnB,oBAAoB,EAAE;EACtC,MAAMoB,kBAAkB,GAAGZ,QAAQ,EAAE;EACrC,MAAM;IAAEa;EAAc,CAAE,GAAGnB,SAAS,EAAE;EACtC,MAAM,CAACoB,eAAe,EAAEC,iBAAiB,CAAC,GAAGb,UAAU,EAAE;EAEzD,MAAM;IACJc,UAAU,GAAG,QAAQ;IACrBC,QAAQ;IACRC,OAAO;IACPC,SAAS,GAAG,KAAK;IACjBC,WAAW,GAAG,OAAO;IACrBC,eAAe;IACfC,YAAY;IACZC,SAAS,GAAG,GAAG;IACfC,SAAS,GAAG,GAAG;IACfC;EAAS,CACV,GAAGf,KAAK;EAET,MAAM,CAACgB,OAAO,EAAEC,kBAAkB,CAAC,GAAG9B,oBAAoB,CAAC;IAAE+B,KAAK,EAAElB,KAAK,CAACgB,OAAO;IAAEG,YAAY,EAAE;EAAK,CAAE,CAAC;EACzG,MAAMC,UAAU,GAAG3C,KAAK,CAAC4C,WAAW,CAClC,CAACC,UAAmB,EAAEC,EAAoE,KAAI;IAC5FlB,iBAAiB,EAAE;IACnBY,kBAAkB,CAACO,UAAU,IAAG;MAC9B,IAAIF,UAAU,KAAKE,UAAU,EAAE;QAC7Bb,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAGY,EAAE,EAAE;UAAEP,OAAO,EAAEM;QAAU,CAAE,CAAC;;MAEhD,OAAOA,UAAU;IACnB,CAAC,CAAC;EACJ,CAAC,EACD,CAACjB,iBAAiB,EAAEY,kBAAkB,EAAEN,eAAe,CAAC,CACzD;EAED,MAAMO,KAAK,GAAiB;IAC1BT,SAAS;IACTC,WAAW;IACXG,SAAS;IACTC,SAAS;IACTF,YAAY;IACZI,OAAO;IACPS,mBAAmB,EAAET,OAAO;IAC5BV,UAAU;IACVS,SAAS;IACT;IACAW,UAAU,EAAE;MACVlB,OAAO,EAAE;KACV;IACDA,OAAO,EAAEtB,gBAAgB,CAACsB,OAAO,EAAE;MACjCmB,YAAY,EAAE;QACZC,IAAI,EAAE;OACP;MACDC,QAAQ,EAAE;KACX;GACF;EAEDX,KAAK,CAACV,OAAO,CAACsB,EAAE,GAAG1C,KAAK,CAAC,UAAU,EAAE8B,KAAK,CAACV,OAAO,CAACsB,EAAE,CAAC;EAEtD,MAAMC,kBAAkB,GAAG;IACzBC,OAAO,EAAEd,KAAK,CAACF,OAAO;IACtBiB,YAAY,EAAE,CAAC,GAAGpC,mBAAmB;IACrCqC,QAAQ,EAAE,OAAgB;IAC1BC,KAAK,EAAE,QAAiB;IACxBC,MAAM,EAAE,CAAC;IACT,GAAGzD,2BAA2B,CAACuC,KAAK,CAACR,WAAW;GACjD;EAED,IAAIQ,KAAK,CAACT,SAAS,EAAE;IACnBsB,kBAAkB,CAACK,MAAM,GAAG1D,gBAAgB,CAACqD,kBAAkB,CAACK,MAAM,EAAExC,WAAW,CAAC;;EAGtF,MAAM;IACJyC,SAAS;IACTC,YAAY;IACZC;EAAQ,CACT,GAIG3D,cAAc,CAACmD,kBAAkB,CAAC;EAEtCb,KAAK,CAACV,OAAO,CAACgC,GAAG,GAAGjD,aAAa,CAAC2B,KAAK,CAACV,OAAO,CAACgC,GAAG,EAAEF,YAAY,CAAC;EAClEpB,KAAK,CAACqB,QAAQ,GAAGA,QAAQ;EAEzB;EACA;EACA;EACAlD,yBAAyB,CAAC,MAAK;;IAC7B,IAAI2B,OAAO,EAAE;MACX,MAAMyB,WAAW,GAAG;QAAEC,IAAI,EAAE,MAAMtB,UAAU,CAAC,KAAK;MAAC,CAAE;MAErD,aAAO,CAACuB,cAAc,0CAAED,IAAI,EAAE;MAC9BzC,OAAO,CAAC0C,cAAc,GAAGF,WAAW;MAEpC,MAAMG,iBAAiB,GAAIrB,EAAiB,IAAI;QAC9C,IAAIA,EAAE,CAACsB,GAAG,KAAK/C,MAAM,EAAE;UACrB2C,WAAW,CAACC,IAAI,EAAE;UAClB;UACA;UACAnB,EAAE,CAACuB,eAAe,EAAE;;MAExB,CAAC;MAED3C,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAE4C,gBAAgB,CAAC,SAAS,EAAEH,iBAAiB,EAAE;QAC7D;QACA;QACAI,OAAO,EAAE;OACV,CAAC;MAEF,OAAO,MAAK;QACV,IAAI/C,OAAO,CAAC0C,cAAc,KAAKF,WAAW,EAAE;UAC1CxC,OAAO,CAAC0C,cAAc,GAAGM,SAAS;;QAGpC9C,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAE+C,mBAAmB,CAAC,SAAS,EAAEN,iBAAiB,EAAE;UAAEI,OAAO,EAAE;QAAI,CAAE,CAAC;MACtF,CAAC;;EAEL,CAAC,EAAE,CAAC/C,OAAO,EAAEE,cAAc,EAAEa,OAAO,EAAEI,UAAU,CAAC,CAAC;EAElD;EACA;EACA;EACA;EACA;EACA,MAAM+B,uBAAuB,GAAG1E,KAAK,CAAC2E,MAAM,CAAC,KAAK,CAAC;EAEnD;EACA,MAAMC,cAAc,GAAG5E,KAAK,CAAC4C,WAAW,CACrCE,EAAmE,IAAI;IACtE,IAAIA,EAAE,CAAC+B,IAAI,KAAK,OAAO,IAAIH,uBAAuB,CAACI,OAAO,EAAE;MAC1DJ,uBAAuB,CAACI,OAAO,GAAG,KAAK;MACvC;;IAGF;IACA,MAAMC,KAAK,GAAGvD,OAAO,CAAC0C,cAAc,GAAG,CAAC,GAAGzB,KAAK,CAACL,SAAS;IAE1DT,eAAe,CAAC,MAAK;MACnBgB,UAAU,CAAC,IAAI,EAAEG,EAAE,CAAC;IACtB,CAAC,EAAEiC,KAAK,CAAC;IAETjC,EAAE,CAACkC,OAAO,EAAE,CAAC,CAAC;EAChB,CAAC,EACD,CAACrD,eAAe,EAAEgB,UAAU,EAAEF,KAAK,CAACL,SAAS,EAAEZ,OAAO,CAAC,CACxD;EAED;EACA,MAAMyD,cAAc,GAAGjF,KAAK,CAAC4C,WAAW,CACrCE,EAAmE,IAAI;IACtE,IAAIiC,KAAK,GAAGtC,KAAK,CAACJ,SAAS;IAE3B,IAAIS,EAAE,CAAC+B,IAAI,KAAK,MAAM,EAAE;MACtB;MACAE,KAAK,GAAG,CAAC;MAETL,uBAAuB,CAACI,OAAO,GAAG,eAAc,aAAdpD,cAAc,uBAAdA,cAAc,CAAEwD,aAAa,MAAKpC,EAAE,CAACqC,MAAM;;IAG/ExD,eAAe,CAAC,MAAK;MACnBgB,UAAU,CAAC,KAAK,EAAEG,EAAE,CAAC;IACvB,CAAC,EAAEiC,KAAK,CAAC;IAETjC,EAAE,CAACkC,OAAO,EAAE,CAAC,CAAC;EAChB,CAAC,EACD,CAACrD,eAAe,EAAEgB,UAAU,EAAEF,KAAK,CAACJ,SAAS,EAAEX,cAAc,CAAC,CAC/D;EAED;EACA;EACAe,KAAK,CAACV,OAAO,CAACqD,cAAc,GAAGnE,cAAc,CAACwB,KAAK,CAACV,OAAO,CAACqD,cAAc,EAAExD,iBAAiB,CAAC;EAC9Fa,KAAK,CAACV,OAAO,CAACsD,cAAc,GAAGpE,cAAc,CAACwB,KAAK,CAACV,OAAO,CAACsD,cAAc,EAAEJ,cAAc,CAAC;EAC3FxC,KAAK,CAACV,OAAO,CAACuD,OAAO,GAAGrE,cAAc,CAACwB,KAAK,CAACV,OAAO,CAACuD,OAAO,EAAE1D,iBAAiB,CAAC;EAChFa,KAAK,CAACV,OAAO,CAACwD,MAAM,GAAGtE,cAAc,CAACwB,KAAK,CAACV,OAAO,CAACwD,MAAM,EAAEN,cAAc,CAAC;EAE3E,MAAMO,KAAK,GAAGxE,eAAe,CAACc,QAAQ,CAAC;EAEvC,MAAM2D,gBAAgB,GAAmF,EAAE;EAE3G,IAAItD,YAAY,KAAK,OAAO,EAAE;IAC5B;IACA,IAAI,OAAOM,KAAK,CAACV,OAAO,CAACD,QAAQ,KAAK,QAAQ,EAAE;MAC9C2D,gBAAgB,CAAC,YAAY,CAAC,GAAGhD,KAAK,CAACV,OAAO,CAACD,QAAQ;KACxD,MAAM;MACL2D,gBAAgB,CAAC,iBAAiB,CAAC,GAAGhD,KAAK,CAACV,OAAO,CAACsB,EAAE;MACtD;MACAZ,KAAK,CAACO,mBAAmB,GAAG,IAAI;;GAEnC,MAAM,IAAIb,YAAY,KAAK,aAAa,EAAE;IACzCsD,gBAAgB,CAAC,kBAAkB,CAAC,GAAGhD,KAAK,CAACV,OAAO,CAACsB,EAAE;IACvD;IACAZ,KAAK,CAACO,mBAAmB,GAAG,IAAI;;EAGlC;EACA,IAAIvB,kBAAkB,EAAE;IACtBgB,KAAK,CAACO,mBAAmB,GAAG,KAAK;;EAGnC,MAAM0C,cAAc,GAAG5E,aAAa,CAAC0E,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEzB,GAAG,EAAEH,SAAS,CAAC;EAE3D;EACAnB,KAAK,CAACX,QAAQ,GAAGtB,2BAA2B,CAACsB,QAAQ,EAAE;IACrD,GAAG2D,gBAAgB;IACnB,IAAGD,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEjE,KAAK;IACf;IACAwC,GAAG,EAAET,kBAAkB,CAAC6B,MAAM,KAAKX,SAAS,GAAGkB,cAAc,GAAGF,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEzB,GAAG;IAC1EqB,cAAc,EAAElE,gBAAgB,CAACD,cAAc,CAAC,WAAK,aAALuE,KAAK,uBAALA,KAAK,CAAEjE,KAAK,0CAAE6D,cAAc,EAAER,cAAc,CAAC,CAAC;IAC9FS,cAAc,EAAEnE,gBAAgB,CAACD,cAAc,CAAC,WAAK,aAALuE,KAAK,uBAALA,KAAK,CAAEjE,KAAK,0CAAE8D,cAAc,EAAEJ,cAAc,CAAC,CAAC;IAC9FK,OAAO,EAAEpE,gBAAgB,CAACD,cAAc,CAAC,WAAK,aAALuE,KAAK,uBAALA,KAAK,CAAEjE,KAAK,0CAAE+D,OAAO,EAAEV,cAAc,CAAC,CAAC;IAChFW,MAAM,EAAErE,gBAAgB,CAACD,cAAc,CAAC,WAAK,aAALuE,KAAK,uBAALA,KAAK,CAAEjE,KAAK,0CAAEgE,MAAM,EAAEN,cAAc,CAAC;GAC9E,CAAC;EAEF,OAAOxC,KAAK;AACd,CAAC","names":["React","mergeArrowOffset","resolvePositioningShorthand","usePositioning","useTooltipVisibility_unstable","useTooltipVisibility","useFluent_unstable","useFluent","applyTriggerPropsToChildren","resolveShorthand","useControllableState","useId","useIsomorphicLayoutEffect","useIsSSR","useMergedRefs","useTimeout","getTriggerChild","mergeCallbacks","useEventCallback","arrowHeight","tooltipBorderRadius","Escape","useTooltip_unstable","props","context","isServerSideRender","targetDocument","setDelayTimeout","clearDelayTimeout","appearance","children","content","withArrow","positioning","onVisibleChange","relationship","showDelay","hideDelay","mountNode","visible","setVisibleInternal","state","initialState","setVisible","useCallback","newVisible","ev","oldVisible","shouldRenderTooltip","components","defaultProps","role","required","id","positioningOptions","enabled","arrowPadding","position","align","offset","targetRef","containerRef","arrowRef","ref","thisTooltip","hide","visibleTooltip","onDocumentKeyDown","key","stopPropagation","addEventListener","capture","undefined","removeEventListener","ignoreNextFocusEventRef","useRef","onEnterTrigger","type","current","delay","persist","onLeaveTrigger","activeElement","target","onPointerEnter","onPointerLeave","onFocus","onBlur","child","triggerAriaProps","childTargetRef"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tooltip/src/components/Tooltip/useTooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeArrowOffset, resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport {\n useTooltipVisibility_unstable as useTooltipVisibility,\n useFluent_unstable as useFluent,\n} from '@fluentui/react-shared-contexts';\nimport {\n applyTriggerPropsToChildren,\n resolveShorthand,\n useControllableState,\n useId,\n useIsomorphicLayoutEffect,\n useIsSSR,\n useMergedRefs,\n useTimeout,\n getTriggerChild,\n mergeCallbacks,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport type { TooltipProps, TooltipState, TooltipChildProps } from './Tooltip.types';\nimport { arrowHeight, tooltipBorderRadius } from './private/constants';\nimport { Escape } from '@fluentui/keyboard-keys';\n\n/**\n * Create the state required to render Tooltip.\n *\n * The returned state can be modified with hooks such as useTooltipStyles_unstable,\n * before being passed to renderTooltip_unstable.\n *\n * @param props - props from this instance of Tooltip\n */\nexport const useTooltip_unstable = (props: TooltipProps): TooltipState => {\n const context = useTooltipVisibility();\n const isServerSideRender = useIsSSR();\n const { targetDocument } = useFluent();\n const [setDelayTimeout, clearDelayTimeout] = useTimeout();\n\n const {\n appearance = 'normal',\n children,\n content,\n withArrow = false,\n positioning = 'above',\n onVisibleChange,\n relationship,\n showDelay = 250,\n hideDelay = 250,\n mountNode,\n } = props;\n\n const [visible, setVisibleInternal] = useControllableState({ state: props.visible, initialState: false });\n const setVisible = React.useCallback(\n (newVisible: boolean, ev?: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement>) => {\n clearDelayTimeout();\n setVisibleInternal(oldVisible => {\n if (newVisible !== oldVisible) {\n onVisibleChange?.(ev, { visible: newVisible });\n }\n return newVisible;\n });\n },\n [clearDelayTimeout, setVisibleInternal, onVisibleChange],\n );\n\n const state: TooltipState = {\n withArrow,\n positioning,\n showDelay,\n hideDelay,\n relationship,\n visible,\n shouldRenderTooltip: visible,\n appearance,\n mountNode,\n // Slots\n components: {\n content: 'div',\n },\n content: resolveShorthand(content, {\n defaultProps: {\n role: 'tooltip',\n },\n required: true,\n }),\n };\n\n state.content.id = useId('tooltip-', state.content.id);\n\n const positioningOptions = {\n enabled: state.visible,\n arrowPadding: 2 * tooltipBorderRadius,\n position: 'above' as const,\n align: 'center' as const,\n offset: 4,\n ...resolvePositioningShorthand(state.positioning),\n };\n\n if (state.withArrow) {\n positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeight);\n }\n\n const {\n targetRef,\n containerRef,\n arrowRef,\n }: {\n targetRef: React.MutableRefObject<unknown>;\n containerRef: React.MutableRefObject<HTMLDivElement>;\n arrowRef: React.MutableRefObject<HTMLDivElement>;\n } = usePositioning(positioningOptions);\n\n state.content.ref = useMergedRefs(state.content.ref, containerRef);\n state.arrowRef = arrowRef;\n\n // When this tooltip is visible, hide any other tooltips, and register it\n // as the visibleTooltip with the TooltipContext.\n // Also add a listener on document to hide the tooltip if Escape is pressed\n useIsomorphicLayoutEffect(() => {\n if (visible) {\n const thisTooltip = { hide: () => setVisible(false) };\n\n context.visibleTooltip?.hide();\n context.visibleTooltip = thisTooltip;\n\n const onDocumentKeyDown = (ev: KeyboardEvent) => {\n if (ev.key === Escape) {\n thisTooltip.hide();\n // stop propagation to avoid conflicting with other elements that listen for `Escape`\n // e,g: Dialog, Popover, Menu\n ev.stopPropagation();\n }\n };\n\n targetDocument?.addEventListener('keydown', onDocumentKeyDown, {\n // As this event is added at targeted document,\n // we need to capture the event to be sure keydown handling from tooltip happens first\n capture: true,\n });\n\n return () => {\n if (context.visibleTooltip === thisTooltip) {\n context.visibleTooltip = undefined;\n }\n\n targetDocument?.removeEventListener('keydown', onDocumentKeyDown, { capture: true });\n };\n }\n }, [context, targetDocument, visible, setVisible]);\n\n // The focused element gets a blur event when the document loses focus\n // (e.g. switching tabs in the browser), but we don't want to show the\n // tooltip again when the document gets focus back. Handle this case by\n // checking if the blurred element is still the document's activeElement.\n // See https://github.com/microsoft/fluentui/issues/13541\n const ignoreNextFocusEventRef = React.useRef(false);\n\n // Listener for onPointerEnter and onFocus on the trigger element\n const onEnterTrigger = React.useCallback(\n (ev: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement>) => {\n if (ev.type === 'focus' && ignoreNextFocusEventRef.current) {\n ignoreNextFocusEventRef.current = false;\n return;\n }\n\n // Show immediately if another tooltip is already visible\n const delay = context.visibleTooltip ? 0 : state.showDelay;\n\n setDelayTimeout(() => {\n setVisible(true, ev);\n }, delay);\n\n ev.persist(); // Persist the event since the setVisible call will happen asynchronously\n },\n [setDelayTimeout, setVisible, state.showDelay, context],\n );\n\n // Listener for onPointerLeave and onBlur on the trigger element\n const onLeaveTrigger = React.useCallback(\n (ev: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement>) => {\n let delay = state.hideDelay;\n\n if (ev.type === 'blur') {\n // Hide immediately when losing focus\n delay = 0;\n\n ignoreNextFocusEventRef.current = targetDocument?.activeElement === ev.target;\n }\n\n setDelayTimeout(() => {\n setVisible(false, ev);\n }, delay);\n\n ev.persist(); // Persist the event since the setVisible call will happen asynchronously\n },\n [setDelayTimeout, setVisible, state.hideDelay, targetDocument],\n );\n\n // Cancel the hide timer when the mouse or focus enters the tooltip, and restart it when the mouse or focus leaves.\n // This keeps the tooltip visible when the mouse is moved over it, or it has focus within.\n state.content.onPointerEnter = mergeCallbacks(state.content.onPointerEnter, clearDelayTimeout);\n state.content.onPointerLeave = mergeCallbacks(state.content.onPointerLeave, onLeaveTrigger);\n state.content.onFocus = mergeCallbacks(state.content.onFocus, clearDelayTimeout);\n state.content.onBlur = mergeCallbacks(state.content.onBlur, onLeaveTrigger);\n\n const child = getTriggerChild(children);\n\n const triggerAriaProps: Pick<TooltipChildProps, 'aria-label' | 'aria-labelledby' | 'aria-describedby'> = {};\n\n if (relationship === 'label') {\n // aria-label only works if the content is a string. Otherwise, need to use aria-labelledby.\n if (typeof state.content.children === 'string') {\n triggerAriaProps['aria-label'] = state.content.children;\n } else {\n triggerAriaProps['aria-labelledby'] = state.content.id;\n // Always render the tooltip even if hidden, so that aria-labelledby refers to a valid element\n state.shouldRenderTooltip = true;\n }\n } else if (relationship === 'description') {\n triggerAriaProps['aria-describedby'] = state.content.id;\n // Always render the tooltip even if hidden, so that aria-describedby refers to a valid element\n state.shouldRenderTooltip = true;\n }\n\n // Don't render the Tooltip in SSR to avoid hydration errors\n if (isServerSideRender) {\n state.shouldRenderTooltip = false;\n }\n\n const childTargetRef = useMergedRefs(child?.ref, targetRef);\n\n // Apply the trigger props to the child, either by calling the render function, or cloning with the new props\n state.children = applyTriggerPropsToChildren(children, {\n ...triggerAriaProps,\n ...child?.props,\n // If the target prop is not provided, attach targetRef to the trigger element's ref prop\n ref: positioningOptions.target === undefined ? childTargetRef : child?.ref,\n onPointerEnter: useEventCallback(mergeCallbacks(child?.props?.onPointerEnter, onEnterTrigger)),\n onPointerLeave: useEventCallback(mergeCallbacks(child?.props?.onPointerLeave, onLeaveTrigger)),\n onFocus: useEventCallback(mergeCallbacks(child?.props?.onFocus, onEnterTrigger)),\n onBlur: useEventCallback(mergeCallbacks(child?.props?.onBlur, onLeaveTrigger)),\n });\n\n return state;\n};\n"]}
|
@@ -8,7 +8,6 @@ export const tooltipClassNames = {
|
|
8
8
|
/**
|
9
9
|
* Styles for the tooltip
|
10
10
|
*/
|
11
|
-
|
12
11
|
const useStyles = /*#__PURE__*/__styles({
|
13
12
|
"root": {
|
14
13
|
"mc9l5x": "fjseox",
|
@@ -86,8 +85,6 @@ const useStyles = /*#__PURE__*/__styles({
|
|
86
85
|
/**
|
87
86
|
* Apply styling to the Tooltip slots based on the state
|
88
87
|
*/
|
89
|
-
|
90
|
-
|
91
88
|
export const useTooltipStyles_unstable = state => {
|
92
89
|
const styles = useStyles();
|
93
90
|
state.content.className = mergeClasses(tooltipClassNames.content, styles.root, state.appearance === 'inverted' && styles.inverted, state.visible && styles.visible, state.content.className);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"AAAA,SAASA,UAAU,YAAcC,YAAY,QAAQ,gBAAgB;AACrE,SAASC,iBAAiB,QAAQ,6BAA6B;AAC/D,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,WAAW,QAAQ,qBAAqB;AAIjD,OAAO,MAAMC,iBAAiB,GAAiC;EAC7DC,OAAO,EAAE;CACV;AAED;;;AAGA,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAgChB;AAEF;;;AAGA,OAAO,MAAMC,yBAAyB,GAAIC,KAAmB,IAAkB;EAC7E,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAE1BE,KAAK,CAACH,OAAO,CAACK,SAAS,GAAGV,YAAY,CACpCI,iBAAiB,CAACC,OAAO,EACzBI,MAAM,CAACE,IAAI,EACXH,KAAK,CAACI,UAAU,KAAK,UAAU,IAAIH,MAAM,CAACI,QAAQ,EAClDL,KAAK,CAACM,OAAO,IAAIL,MAAM,CAACK,OAAO,EAC/BN,KAAK,CAACH,OAAO,CAACK,SAAS,CACxB;EAEDF,KAAK,CAACO,cAAc,GAAGN,MAAM,CAACO,KAAK;EAEnC,OAAOR,KAAK;AACd,CAAC","names":["shorthands","mergeClasses","createArrowStyles","tokens","arrowHeight","tooltipClassNames","content","useStyles","useTooltipStyles_unstable","state","styles","className","root","appearance","inverted","visible","arrowClassName","arrow"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tooltip/src/components/Tooltip/useTooltipStyles.ts"],"sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createArrowStyles } from '@fluentui/react-positioning';\nimport { tokens } from '@fluentui/react-theme';\nimport { arrowHeight } from './private/constants';\nimport type { TooltipSlots, TooltipState } from './Tooltip.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tooltipClassNames: SlotClassNames<TooltipSlots> = {\n content: 'fui-Tooltip__content',\n};\n\n/**\n * Styles for the tooltip\n */\nconst useStyles = makeStyles({\n root: {\n display: 'none',\n boxSizing: 'border-box',\n maxWidth: '240px',\n cursor: 'default',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n ...shorthands.padding('4px', '11px', '6px', '11px'), // '5px 12px 7px 12px' minus the border width '1px'\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n\n // TODO need to add versions of tokens.alias.shadow.shadow8, etc. that work with filter\n filter:\n `drop-shadow(0 0 2px ${tokens.colorNeutralShadowAmbient}) ` +\n `drop-shadow(0 4px 8px ${tokens.colorNeutralShadowKey})`,\n },\n\n visible: {\n display: 'block',\n },\n\n inverted: {\n backgroundColor: tokens.colorNeutralBackgroundStatic,\n color: tokens.colorNeutralForegroundStaticInverted,\n },\n\n arrow: createArrowStyles({ arrowHeight }),\n});\n\n/**\n * Apply styling to the Tooltip slots based on the state\n */\nexport const useTooltipStyles_unstable = (state: TooltipState): TooltipState => {\n const styles = useStyles();\n\n state.content.className = mergeClasses(\n tooltipClassNames.content,\n styles.root,\n state.appearance === 'inverted' && styles.inverted,\n state.visible && styles.visible,\n state.content.className,\n );\n\n state.arrowClassName = styles.arrow;\n\n return state;\n};\n"]}
|
package/lib/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../../../../../packages/react-components/react-tooltip/src/index.ts"],"
|
1
|
+
{"version":3,"mappings":"AAAA,SACEA,OAAO,EACPC,sBAAsB,EACtBC,iBAAiB,EACjBC,yBAAyB,EACzBC,mBAAmB,QACd,WAAW","names":["Tooltip","renderTooltip_unstable","tooltipClassNames","useTooltipStyles_unstable","useTooltip_unstable"],"sourceRoot":"","sources":["../../../../../../../packages/react-components/react-tooltip/src/index.ts"],"sourcesContent":["export {\n Tooltip,\n renderTooltip_unstable,\n tooltipClassNames,\n useTooltipStyles_unstable,\n useTooltip_unstable,\n} from './Tooltip';\nexport type {\n OnVisibleChangeData,\n TooltipProps,\n TooltipSlots,\n TooltipState,\n TooltipChildProps as TooltipTriggerProps,\n} from './Tooltip';\n"]}
|
package/lib-commonjs/Tooltip.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../../../../../packages/react-components/react-tooltip/src/Tooltip.ts"],"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"","sources":["../../../../../../../packages/react-components/react-tooltip/src/Tooltip.ts"],"sourcesContent":["export * from './components/Tooltip/index';\n"]}
|
@@ -4,25 +4,19 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.Tooltip = void 0;
|
7
|
-
|
8
7
|
const useTooltip_1 = /*#__PURE__*/require("./useTooltip");
|
9
|
-
|
10
8
|
const renderTooltip_1 = /*#__PURE__*/require("./renderTooltip");
|
11
|
-
|
12
9
|
const useTooltipStyles_1 = /*#__PURE__*/require("./useTooltipStyles");
|
13
10
|
/**
|
14
11
|
* A tooltip provides light weight contextual information on top of its target element.
|
15
12
|
*/
|
16
|
-
|
17
|
-
|
18
13
|
const Tooltip = props => {
|
19
14
|
const state = useTooltip_1.useTooltip_unstable(props);
|
20
15
|
useTooltipStyles_1.useTooltipStyles_unstable(state);
|
21
16
|
return renderTooltip_1.renderTooltip_unstable(state);
|
22
17
|
};
|
23
|
-
|
24
18
|
exports.Tooltip = Tooltip;
|
25
|
-
exports.Tooltip.displayName = 'Tooltip';
|
26
|
-
|
19
|
+
exports.Tooltip.displayName = 'Tooltip';
|
20
|
+
// type casting here is required to ensure internal type FluentTriggerComponent is not leaked
|
27
21
|
exports.Tooltip.isFluentTriggerComponent = true;
|
28
22
|
//# sourceMappingURL=Tooltip.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":";;;;;;AACA;AACA;AACA;AAIA;;;AAGO,MAAMA,OAAO,GAA2BC,KAAK,IAAG;EACrD,MAAMC,KAAK,GAAGC,gCAAmB,CAACF,KAAK,CAAC;EAExCG,4CAAyB,CAACF,KAAK,CAAC;EAChC,OAAOG,sCAAsB,CAACH,KAAK,CAAC;AACtC,CAAC;AALYI,eAAO;AAOpBA,eAAO,CAACC,WAAW,GAAG,SAAS;AAC/B;AACCD,eAAkC,CAACE,wBAAwB,GAAG,IAAI","names":["Tooltip","props","state","useTooltip_1","useTooltipStyles_1","renderTooltip_1","exports","displayName","isFluentTriggerComponent"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tooltip/src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTooltip_unstable } from './useTooltip';\nimport { renderTooltip_unstable } from './renderTooltip';\nimport { useTooltipStyles_unstable } from './useTooltipStyles';\nimport type { TooltipProps } from './Tooltip.types';\nimport type { FluentTriggerComponent } from '@fluentui/react-utilities';\n\n/**\n * A tooltip provides light weight contextual information on top of its target element.\n */\nexport const Tooltip: React.FC<TooltipProps> = props => {\n const state = useTooltip_unstable(props);\n\n useTooltipStyles_unstable(state);\n return renderTooltip_unstable(state);\n};\n\nTooltip.displayName = 'Tooltip';\n// type casting here is required to ensure internal type FluentTriggerComponent is not leaked\n(Tooltip as FluentTriggerComponent).isFluentTriggerComponent = true;\n"]}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"","names":[],"sourceRoot":"","sources":[],"sourcesContent":[]}
|
@@ -3,16 +3,10 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
|
7
6
|
const tslib_1 = /*#__PURE__*/require("tslib");
|
8
|
-
|
9
7
|
tslib_1.__exportStar(require("./Tooltip"), exports);
|
10
|
-
|
11
8
|
tslib_1.__exportStar(require("./Tooltip.types"), exports);
|
12
|
-
|
13
9
|
tslib_1.__exportStar(require("./renderTooltip"), exports);
|
14
|
-
|
15
10
|
tslib_1.__exportStar(require("./useTooltip"), exports);
|
16
|
-
|
17
11
|
tslib_1.__exportStar(require("./useTooltipStyles"), exports);
|
18
12
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-tooltip/src/components/Tooltip/index.ts"],"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tooltip/src/components/Tooltip/index.ts"],"sourcesContent":["export * from './Tooltip';\nexport * from './Tooltip.types';\nexport * from './renderTooltip';\nexport * from './useTooltip';\nexport * from './useTooltipStyles';\n"]}
|
@@ -7,7 +7,6 @@ exports.tooltipBorderRadius = exports.arrowHeight = void 0;
|
|
7
7
|
/**
|
8
8
|
* The height of the tooltip's arrow in pixels.
|
9
9
|
*/
|
10
|
-
|
11
10
|
exports.arrowHeight = 6;
|
12
11
|
/**
|
13
12
|
* The default value of the tooltip's border radius (borderRadiusMedium).
|
@@ -16,6 +15,5 @@ exports.arrowHeight = 6;
|
|
16
15
|
* While we could use getComputedStyle, that adds a performance penalty for something that
|
17
16
|
* will likely never change.
|
18
17
|
*/
|
19
|
-
|
20
18
|
exports.tooltipBorderRadius = 4;
|
21
19
|
//# sourceMappingURL=constants.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../../../../../../../../packages/react-components/react-tooltip/src/components/Tooltip/private/constants.ts"],"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;;;AAGaA,mBAAW,GAAG,CAAC;AAE5B;;;;;;;AAOaA,2BAAmB,GAAG,CAAC","names":["exports"],"sourceRoot":"","sources":["../../../../../../../../../../packages/react-components/react-tooltip/src/components/Tooltip/private/constants.ts"],"sourcesContent":["/**\n * The height of the tooltip's arrow in pixels.\n */\nexport const arrowHeight = 6;\n\n/**\n * The default value of the tooltip's border radius (borderRadiusMedium).\n *\n * Unfortunately, Popper requires it to be specified as a variable instead of using CSS.\n * While we could use getComputedStyle, that adds a performance penalty for something that\n * will likely never change.\n */\nexport const tooltipBorderRadius = 4;\n"]}
|
@@ -4,17 +4,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.renderTooltip_unstable = void 0;
|
7
|
-
|
8
7
|
const React = /*#__PURE__*/require("react");
|
9
|
-
|
10
8
|
const react_portal_1 = /*#__PURE__*/require("@fluentui/react-portal");
|
11
|
-
|
12
9
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
13
10
|
/**
|
14
11
|
* Render the final JSX of Tooltip
|
15
12
|
*/
|
16
|
-
|
17
|
-
|
18
13
|
const renderTooltip_unstable = state => {
|
19
14
|
const {
|
20
15
|
slots,
|
@@ -22,12 +17,12 @@ const renderTooltip_unstable = state => {
|
|
22
17
|
} = react_utilities_1.getSlots(state);
|
23
18
|
return React.createElement(React.Fragment, null, state.children, state.shouldRenderTooltip && React.createElement(react_portal_1.Portal, {
|
24
19
|
mountNode: state.mountNode
|
25
|
-
}, React.createElement(slots.content, {
|
20
|
+
}, React.createElement(slots.content, {
|
21
|
+
...slotProps.content
|
26
22
|
}, state.withArrow && React.createElement("div", {
|
27
23
|
ref: state.arrowRef,
|
28
24
|
className: state.arrowClassName
|
29
25
|
}), state.content.children)));
|
30
26
|
};
|
31
|
-
|
32
27
|
exports.renderTooltip_unstable = renderTooltip_unstable;
|
33
28
|
//# sourceMappingURL=renderTooltip.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAGA;;;AAGO,MAAMA,sBAAsB,GAAIC,KAAmB,IAAI;EAC5D,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAeH,KAAK,CAAC;EAE1D,OACEI,0CACGJ,KAAK,CAACK,QAAQ,EACdL,KAAK,CAACM,mBAAmB,IACxBF,oBAACG,qBAAM;IAACC,SAAS,EAAER,KAAK,CAACQ;EAAS,GAChCJ,oBAACH,KAAK,CAACQ,OAAO;IAAA,GAAKP,SAAS,CAACO;EAAO,GACjCT,KAAK,CAACU,SAAS,IAAIN;IAAKO,GAAG,EAAEX,KAAK,CAACY,QAAQ;IAAEC,SAAS,EAAEb,KAAK,CAACc;EAAc,EAAI,EAChFd,KAAK,CAACS,OAAO,CAACJ,QAAQ,CACT,CAEnB,CACA;AAEP,CAAC;AAhBYU,8BAAsB","names":["renderTooltip_unstable","state","slots","slotProps","react_utilities_1","React","children","shouldRenderTooltip","react_portal_1","mountNode","content","withArrow","ref","arrowRef","className","arrowClassName","exports"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tooltip/src/components/Tooltip/renderTooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Portal } from '@fluentui/react-portal';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TooltipSlots, TooltipState } from './Tooltip.types';\n\n/**\n * Render the final JSX of Tooltip\n */\nexport const renderTooltip_unstable = (state: TooltipState) => {\n const { slots, slotProps } = getSlots<TooltipSlots>(state);\n\n return (\n <>\n {state.children}\n {state.shouldRenderTooltip && (\n <Portal mountNode={state.mountNode}>\n <slots.content {...slotProps.content}>\n {state.withArrow && <div ref={state.arrowRef} className={state.arrowClassName} />}\n {state.content.children}\n </slots.content>\n </Portal>\n )}\n </>\n );\n};\n"]}
|
@@ -4,17 +4,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.useTooltip_unstable = void 0;
|
7
|
-
|
8
7
|
const React = /*#__PURE__*/require("react");
|
9
|
-
|
10
8
|
const react_positioning_1 = /*#__PURE__*/require("@fluentui/react-positioning");
|
11
|
-
|
12
9
|
const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
|
13
|
-
|
14
10
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
15
|
-
|
16
11
|
const constants_1 = /*#__PURE__*/require("./private/constants");
|
17
|
-
|
18
12
|
const keyboard_keys_1 = /*#__PURE__*/require("@fluentui/keyboard-keys");
|
19
13
|
/**
|
20
14
|
* Create the state required to render Tooltip.
|
@@ -24,11 +18,8 @@ const keyboard_keys_1 = /*#__PURE__*/require("@fluentui/keyboard-keys");
|
|
24
18
|
*
|
25
19
|
* @param props - props from this instance of Tooltip
|
26
20
|
*/
|
27
|
-
|
28
|
-
|
29
21
|
const useTooltip_unstable = props => {
|
30
22
|
var _a, _b, _c, _d;
|
31
|
-
|
32
23
|
const context = react_shared_contexts_1.useTooltipVisibility_unstable();
|
33
24
|
const isServerSideRender = react_utilities_1.useIsSSR();
|
34
25
|
const {
|
@@ -59,7 +50,6 @@ const useTooltip_unstable = props => {
|
|
59
50
|
visible: newVisible
|
60
51
|
});
|
61
52
|
}
|
62
|
-
|
63
53
|
return newVisible;
|
64
54
|
});
|
65
55
|
}, [clearDelayTimeout, setVisibleInternal, onVisibleChange]);
|
@@ -93,40 +83,35 @@ const useTooltip_unstable = props => {
|
|
93
83
|
offset: 4,
|
94
84
|
...react_positioning_1.resolvePositioningShorthand(state.positioning)
|
95
85
|
};
|
96
|
-
|
97
86
|
if (state.withArrow) {
|
98
87
|
positioningOptions.offset = react_positioning_1.mergeArrowOffset(positioningOptions.offset, constants_1.arrowHeight);
|
99
88
|
}
|
100
|
-
|
101
89
|
const {
|
102
90
|
targetRef,
|
103
91
|
containerRef,
|
104
92
|
arrowRef
|
105
93
|
} = react_positioning_1.usePositioning(positioningOptions);
|
106
94
|
state.content.ref = react_utilities_1.useMergedRefs(state.content.ref, containerRef);
|
107
|
-
state.arrowRef = arrowRef;
|
95
|
+
state.arrowRef = arrowRef;
|
96
|
+
// When this tooltip is visible, hide any other tooltips, and register it
|
108
97
|
// as the visibleTooltip with the TooltipContext.
|
109
98
|
// Also add a listener on document to hide the tooltip if Escape is pressed
|
110
|
-
|
111
99
|
react_utilities_1.useIsomorphicLayoutEffect(() => {
|
112
100
|
var _a;
|
113
|
-
|
114
101
|
if (visible) {
|
115
102
|
const thisTooltip = {
|
116
103
|
hide: () => setVisible(false)
|
117
104
|
};
|
118
105
|
(_a = context.visibleTooltip) === null || _a === void 0 ? void 0 : _a.hide();
|
119
106
|
context.visibleTooltip = thisTooltip;
|
120
|
-
|
121
107
|
const onDocumentKeyDown = ev => {
|
122
108
|
if (ev.key === keyboard_keys_1.Escape) {
|
123
|
-
thisTooltip.hide();
|
109
|
+
thisTooltip.hide();
|
110
|
+
// stop propagation to avoid conflicting with other elements that listen for `Escape`
|
124
111
|
// e,g: Dialog, Popover, Menu
|
125
|
-
|
126
112
|
ev.stopPropagation();
|
127
113
|
}
|
128
114
|
};
|
129
|
-
|
130
115
|
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('keydown', onDocumentKeyDown, {
|
131
116
|
// As this event is added at targeted document,
|
132
117
|
// we need to capture the event to be sure keydown handling from tooltip happens first
|
@@ -136,80 +121,74 @@ const useTooltip_unstable = props => {
|
|
136
121
|
if (context.visibleTooltip === thisTooltip) {
|
137
122
|
context.visibleTooltip = undefined;
|
138
123
|
}
|
139
|
-
|
140
124
|
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('keydown', onDocumentKeyDown, {
|
141
125
|
capture: true
|
142
126
|
});
|
143
127
|
};
|
144
128
|
}
|
145
|
-
}, [context, targetDocument, visible, setVisible]);
|
129
|
+
}, [context, targetDocument, visible, setVisible]);
|
130
|
+
// The focused element gets a blur event when the document loses focus
|
146
131
|
// (e.g. switching tabs in the browser), but we don't want to show the
|
147
132
|
// tooltip again when the document gets focus back. Handle this case by
|
148
133
|
// checking if the blurred element is still the document's activeElement.
|
149
134
|
// See https://github.com/microsoft/fluentui/issues/13541
|
150
|
-
|
151
|
-
|
152
|
-
|
135
|
+
const ignoreNextFocusEventRef = React.useRef(false);
|
136
|
+
// Listener for onPointerEnter and onFocus on the trigger element
|
153
137
|
const onEnterTrigger = React.useCallback(ev => {
|
154
138
|
if (ev.type === 'focus' && ignoreNextFocusEventRef.current) {
|
155
139
|
ignoreNextFocusEventRef.current = false;
|
156
140
|
return;
|
157
|
-
}
|
158
|
-
|
159
|
-
|
141
|
+
}
|
142
|
+
// Show immediately if another tooltip is already visible
|
160
143
|
const delay = context.visibleTooltip ? 0 : state.showDelay;
|
161
144
|
setDelayTimeout(() => {
|
162
145
|
setVisible(true, ev);
|
163
146
|
}, delay);
|
164
147
|
ev.persist(); // Persist the event since the setVisible call will happen asynchronously
|
165
|
-
}, [setDelayTimeout, setVisible, state.showDelay, context]);
|
166
|
-
|
148
|
+
}, [setDelayTimeout, setVisible, state.showDelay, context]);
|
149
|
+
// Listener for onPointerLeave and onBlur on the trigger element
|
167
150
|
const onLeaveTrigger = React.useCallback(ev => {
|
168
151
|
let delay = state.hideDelay;
|
169
|
-
|
170
152
|
if (ev.type === 'blur') {
|
171
153
|
// Hide immediately when losing focus
|
172
154
|
delay = 0;
|
173
155
|
ignoreNextFocusEventRef.current = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) === ev.target;
|
174
156
|
}
|
175
|
-
|
176
157
|
setDelayTimeout(() => {
|
177
158
|
setVisible(false, ev);
|
178
159
|
}, delay);
|
179
160
|
ev.persist(); // Persist the event since the setVisible call will happen asynchronously
|
180
|
-
}, [setDelayTimeout, setVisible, state.hideDelay, targetDocument]);
|
161
|
+
}, [setDelayTimeout, setVisible, state.hideDelay, targetDocument]);
|
162
|
+
// Cancel the hide timer when the mouse or focus enters the tooltip, and restart it when the mouse or focus leaves.
|
181
163
|
// This keeps the tooltip visible when the mouse is moved over it, or it has focus within.
|
182
|
-
|
183
164
|
state.content.onPointerEnter = react_utilities_1.mergeCallbacks(state.content.onPointerEnter, clearDelayTimeout);
|
184
165
|
state.content.onPointerLeave = react_utilities_1.mergeCallbacks(state.content.onPointerLeave, onLeaveTrigger);
|
185
166
|
state.content.onFocus = react_utilities_1.mergeCallbacks(state.content.onFocus, clearDelayTimeout);
|
186
167
|
state.content.onBlur = react_utilities_1.mergeCallbacks(state.content.onBlur, onLeaveTrigger);
|
187
168
|
const child = react_utilities_1.getTriggerChild(children);
|
188
169
|
const triggerAriaProps = {};
|
189
|
-
|
190
170
|
if (relationship === 'label') {
|
191
171
|
// aria-label only works if the content is a string. Otherwise, need to use aria-labelledby.
|
192
172
|
if (typeof state.content.children === 'string') {
|
193
173
|
triggerAriaProps['aria-label'] = state.content.children;
|
194
174
|
} else {
|
195
|
-
triggerAriaProps['aria-labelledby'] = state.content.id;
|
196
|
-
|
175
|
+
triggerAriaProps['aria-labelledby'] = state.content.id;
|
176
|
+
// Always render the tooltip even if hidden, so that aria-labelledby refers to a valid element
|
197
177
|
state.shouldRenderTooltip = true;
|
198
178
|
}
|
199
179
|
} else if (relationship === 'description') {
|
200
|
-
triggerAriaProps['aria-describedby'] = state.content.id;
|
201
|
-
|
180
|
+
triggerAriaProps['aria-describedby'] = state.content.id;
|
181
|
+
// Always render the tooltip even if hidden, so that aria-describedby refers to a valid element
|
202
182
|
state.shouldRenderTooltip = true;
|
203
|
-
}
|
204
|
-
|
205
|
-
|
183
|
+
}
|
184
|
+
// Don't render the Tooltip in SSR to avoid hydration errors
|
206
185
|
if (isServerSideRender) {
|
207
186
|
state.shouldRenderTooltip = false;
|
208
187
|
}
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
188
|
+
const childTargetRef = react_utilities_1.useMergedRefs(child === null || child === void 0 ? void 0 : child.ref, targetRef);
|
189
|
+
// Apply the trigger props to the child, either by calling the render function, or cloning with the new props
|
190
|
+
state.children = react_utilities_1.applyTriggerPropsToChildren(children, {
|
191
|
+
...triggerAriaProps,
|
213
192
|
...(child === null || child === void 0 ? void 0 : child.props),
|
214
193
|
// If the target prop is not provided, attach targetRef to the trigger element's ref prop
|
215
194
|
ref: positioningOptions.target === undefined ? childTargetRef : child === null || child === void 0 ? void 0 : child.ref,
|
@@ -220,6 +199,5 @@ const useTooltip_unstable = props => {
|
|
220
199
|
});
|
221
200
|
return state;
|
222
201
|
};
|
223
|
-
|
224
202
|
exports.useTooltip_unstable = useTooltip_unstable;
|
225
203
|
//# sourceMappingURL=useTooltip.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-tooltip/src/components/Tooltip/useTooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { mergeArrowOffset, resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport {\n useTooltipVisibility_unstable as useTooltipVisibility,\n useFluent_unstable as useFluent,\n} from '@fluentui/react-shared-contexts';\nimport {\n applyTriggerPropsToChildren,\n resolveShorthand,\n useControllableState,\n useId,\n useIsomorphicLayoutEffect,\n useIsSSR,\n useMergedRefs,\n useTimeout,\n getTriggerChild,\n mergeCallbacks,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport type { TooltipProps, TooltipState, TooltipChildProps } from './Tooltip.types';\nimport { arrowHeight, tooltipBorderRadius } from './private/constants';\nimport { Escape } from '@fluentui/keyboard-keys';\n\n/**\n * Create the state required to render Tooltip.\n *\n * The returned state can be modified with hooks such as useTooltipStyles_unstable,\n * before being passed to renderTooltip_unstable.\n *\n * @param props - props from this instance of Tooltip\n */\nexport const useTooltip_unstable = (props: TooltipProps): TooltipState => {\n const context = useTooltipVisibility();\n const isServerSideRender = useIsSSR();\n const { targetDocument } = useFluent();\n const [setDelayTimeout, clearDelayTimeout] = useTimeout();\n\n const {\n appearance = 'normal',\n children,\n content,\n withArrow = false,\n positioning = 'above',\n onVisibleChange,\n relationship,\n showDelay = 250,\n hideDelay = 250,\n mountNode,\n } = props;\n\n const [visible, setVisibleInternal] = useControllableState({ state: props.visible, initialState: false });\n const setVisible = React.useCallback(\n (newVisible: boolean, ev?: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement>) => {\n clearDelayTimeout();\n setVisibleInternal(oldVisible => {\n if (newVisible !== oldVisible) {\n onVisibleChange?.(ev, { visible: newVisible });\n }\n return newVisible;\n });\n },\n [clearDelayTimeout, setVisibleInternal, onVisibleChange],\n );\n\n const state: TooltipState = {\n withArrow,\n positioning,\n showDelay,\n hideDelay,\n relationship,\n visible,\n shouldRenderTooltip: visible,\n appearance,\n mountNode,\n // Slots\n components: {\n content: 'div',\n },\n content: resolveShorthand(content, {\n defaultProps: {\n role: 'tooltip',\n },\n required: true,\n }),\n };\n\n state.content.id = useId('tooltip-', state.content.id);\n\n const positioningOptions = {\n enabled: state.visible,\n arrowPadding: 2 * tooltipBorderRadius,\n position: 'above' as const,\n align: 'center' as const,\n offset: 4,\n ...resolvePositioningShorthand(state.positioning),\n };\n\n if (state.withArrow) {\n positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeight);\n }\n\n const {\n targetRef,\n containerRef,\n arrowRef,\n }: {\n targetRef: React.MutableRefObject<unknown>;\n containerRef: React.MutableRefObject<HTMLDivElement>;\n arrowRef: React.MutableRefObject<HTMLDivElement>;\n } = usePositioning(positioningOptions);\n\n state.content.ref = useMergedRefs(state.content.ref, containerRef);\n state.arrowRef = arrowRef;\n\n // When this tooltip is visible, hide any other tooltips, and register it\n // as the visibleTooltip with the TooltipContext.\n // Also add a listener on document to hide the tooltip if Escape is pressed\n useIsomorphicLayoutEffect(() => {\n if (visible) {\n const thisTooltip = { hide: () => setVisible(false) };\n\n context.visibleTooltip?.hide();\n context.visibleTooltip = thisTooltip;\n\n const onDocumentKeyDown = (ev: KeyboardEvent) => {\n if (ev.key === Escape) {\n thisTooltip.hide();\n // stop propagation to avoid conflicting with other elements that listen for `Escape`\n // e,g: Dialog, Popover, Menu\n ev.stopPropagation();\n }\n };\n\n targetDocument?.addEventListener('keydown', onDocumentKeyDown, {\n // As this event is added at targeted document,\n // we need to capture the event to be sure keydown handling from tooltip happens first\n capture: true,\n });\n\n return () => {\n if (context.visibleTooltip === thisTooltip) {\n context.visibleTooltip = undefined;\n }\n\n targetDocument?.removeEventListener('keydown', onDocumentKeyDown, { capture: true });\n };\n }\n }, [context, targetDocument, visible, setVisible]);\n\n // The focused element gets a blur event when the document loses focus\n // (e.g. switching tabs in the browser), but we don't want to show the\n // tooltip again when the document gets focus back. Handle this case by\n // checking if the blurred element is still the document's activeElement.\n // See https://github.com/microsoft/fluentui/issues/13541\n const ignoreNextFocusEventRef = React.useRef(false);\n\n // Listener for onPointerEnter and onFocus on the trigger element\n const onEnterTrigger = React.useCallback(\n (ev: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement>) => {\n if (ev.type === 'focus' && ignoreNextFocusEventRef.current) {\n ignoreNextFocusEventRef.current = false;\n return;\n }\n\n // Show immediately if another tooltip is already visible\n const delay = context.visibleTooltip ? 0 : state.showDelay;\n\n setDelayTimeout(() => {\n setVisible(true, ev);\n }, delay);\n\n ev.persist(); // Persist the event since the setVisible call will happen asynchronously\n },\n [setDelayTimeout, setVisible, state.showDelay, context],\n );\n\n // Listener for onPointerLeave and onBlur on the trigger element\n const onLeaveTrigger = React.useCallback(\n (ev: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement>) => {\n let delay = state.hideDelay;\n\n if (ev.type === 'blur') {\n // Hide immediately when losing focus\n delay = 0;\n\n ignoreNextFocusEventRef.current = targetDocument?.activeElement === ev.target;\n }\n\n setDelayTimeout(() => {\n setVisible(false, ev);\n }, delay);\n\n ev.persist(); // Persist the event since the setVisible call will happen asynchronously\n },\n [setDelayTimeout, setVisible, state.hideDelay, targetDocument],\n );\n\n // Cancel the hide timer when the mouse or focus enters the tooltip, and restart it when the mouse or focus leaves.\n // This keeps the tooltip visible when the mouse is moved over it, or it has focus within.\n state.content.onPointerEnter = mergeCallbacks(state.content.onPointerEnter, clearDelayTimeout);\n state.content.onPointerLeave = mergeCallbacks(state.content.onPointerLeave, onLeaveTrigger);\n state.content.onFocus = mergeCallbacks(state.content.onFocus, clearDelayTimeout);\n state.content.onBlur = mergeCallbacks(state.content.onBlur, onLeaveTrigger);\n\n const child = getTriggerChild(children);\n\n const triggerAriaProps: Pick<TooltipChildProps, 'aria-label' | 'aria-labelledby' | 'aria-describedby'> = {};\n\n if (relationship === 'label') {\n // aria-label only works if the content is a string. Otherwise, need to use aria-labelledby.\n if (typeof state.content.children === 'string') {\n triggerAriaProps['aria-label'] = state.content.children;\n } else {\n triggerAriaProps['aria-labelledby'] = state.content.id;\n // Always render the tooltip even if hidden, so that aria-labelledby refers to a valid element\n state.shouldRenderTooltip = true;\n }\n } else if (relationship === 'description') {\n triggerAriaProps['aria-describedby'] = state.content.id;\n // Always render the tooltip even if hidden, so that aria-describedby refers to a valid element\n state.shouldRenderTooltip = true;\n }\n\n // Don't render the Tooltip in SSR to avoid hydration errors\n if (isServerSideRender) {\n state.shouldRenderTooltip = false;\n }\n\n const childTargetRef = useMergedRefs(child?.ref, targetRef);\n\n // Apply the trigger props to the child, either by calling the render function, or cloning with the new props\n state.children = applyTriggerPropsToChildren(children, {\n ...triggerAriaProps,\n ...child?.props,\n // If the target prop is not provided, attach targetRef to the trigger element's ref prop\n ref: positioningOptions.target === undefined ? childTargetRef : child?.ref,\n onPointerEnter: useEventCallback(mergeCallbacks(child?.props?.onPointerEnter, onEnterTrigger)),\n onPointerLeave: useEventCallback(mergeCallbacks(child?.props?.onPointerLeave, onLeaveTrigger)),\n onFocus: useEventCallback(mergeCallbacks(child?.props?.onFocus, onEnterTrigger)),\n onBlur: useEventCallback(mergeCallbacks(child?.props?.onBlur, onLeaveTrigger)),\n });\n\n return state;\n};\n"],"sourceRoot":""}
|
1
|
+
{"version":3,"mappings":"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","names":["useTooltip_unstable","props","context","react_shared_contexts_1","isServerSideRender","react_utilities_1","targetDocument","setDelayTimeout","clearDelayTimeout","appearance","children","content","withArrow","positioning","onVisibleChange","relationship","showDelay","hideDelay","mountNode","visible","setVisibleInternal","state","initialState","setVisible","React","useCallback","newVisible","ev","oldVisible","shouldRenderTooltip","components","defaultProps","role","required","id","positioningOptions","enabled","arrowPadding","constants_1","position","align","offset","react_positioning_1","targetRef","containerRef","arrowRef","ref","thisTooltip","hide","visibleTooltip","onDocumentKeyDown","key","keyboard_keys_1","stopPropagation","addEventListener","capture","undefined","removeEventListener","ignoreNextFocusEventRef","useRef","onEnterTrigger","type","current","delay","persist","onLeaveTrigger","activeElement","target","onPointerEnter","onPointerLeave","onFocus","onBlur","child","triggerAriaProps","childTargetRef","exports"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tooltip/src/components/Tooltip/useTooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeArrowOffset, resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport {\n useTooltipVisibility_unstable as useTooltipVisibility,\n useFluent_unstable as useFluent,\n} from '@fluentui/react-shared-contexts';\nimport {\n applyTriggerPropsToChildren,\n resolveShorthand,\n useControllableState,\n useId,\n useIsomorphicLayoutEffect,\n useIsSSR,\n useMergedRefs,\n useTimeout,\n getTriggerChild,\n mergeCallbacks,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport type { TooltipProps, TooltipState, TooltipChildProps } from './Tooltip.types';\nimport { arrowHeight, tooltipBorderRadius } from './private/constants';\nimport { Escape } from '@fluentui/keyboard-keys';\n\n/**\n * Create the state required to render Tooltip.\n *\n * The returned state can be modified with hooks such as useTooltipStyles_unstable,\n * before being passed to renderTooltip_unstable.\n *\n * @param props - props from this instance of Tooltip\n */\nexport const useTooltip_unstable = (props: TooltipProps): TooltipState => {\n const context = useTooltipVisibility();\n const isServerSideRender = useIsSSR();\n const { targetDocument } = useFluent();\n const [setDelayTimeout, clearDelayTimeout] = useTimeout();\n\n const {\n appearance = 'normal',\n children,\n content,\n withArrow = false,\n positioning = 'above',\n onVisibleChange,\n relationship,\n showDelay = 250,\n hideDelay = 250,\n mountNode,\n } = props;\n\n const [visible, setVisibleInternal] = useControllableState({ state: props.visible, initialState: false });\n const setVisible = React.useCallback(\n (newVisible: boolean, ev?: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement>) => {\n clearDelayTimeout();\n setVisibleInternal(oldVisible => {\n if (newVisible !== oldVisible) {\n onVisibleChange?.(ev, { visible: newVisible });\n }\n return newVisible;\n });\n },\n [clearDelayTimeout, setVisibleInternal, onVisibleChange],\n );\n\n const state: TooltipState = {\n withArrow,\n positioning,\n showDelay,\n hideDelay,\n relationship,\n visible,\n shouldRenderTooltip: visible,\n appearance,\n mountNode,\n // Slots\n components: {\n content: 'div',\n },\n content: resolveShorthand(content, {\n defaultProps: {\n role: 'tooltip',\n },\n required: true,\n }),\n };\n\n state.content.id = useId('tooltip-', state.content.id);\n\n const positioningOptions = {\n enabled: state.visible,\n arrowPadding: 2 * tooltipBorderRadius,\n position: 'above' as const,\n align: 'center' as const,\n offset: 4,\n ...resolvePositioningShorthand(state.positioning),\n };\n\n if (state.withArrow) {\n positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeight);\n }\n\n const {\n targetRef,\n containerRef,\n arrowRef,\n }: {\n targetRef: React.MutableRefObject<unknown>;\n containerRef: React.MutableRefObject<HTMLDivElement>;\n arrowRef: React.MutableRefObject<HTMLDivElement>;\n } = usePositioning(positioningOptions);\n\n state.content.ref = useMergedRefs(state.content.ref, containerRef);\n state.arrowRef = arrowRef;\n\n // When this tooltip is visible, hide any other tooltips, and register it\n // as the visibleTooltip with the TooltipContext.\n // Also add a listener on document to hide the tooltip if Escape is pressed\n useIsomorphicLayoutEffect(() => {\n if (visible) {\n const thisTooltip = { hide: () => setVisible(false) };\n\n context.visibleTooltip?.hide();\n context.visibleTooltip = thisTooltip;\n\n const onDocumentKeyDown = (ev: KeyboardEvent) => {\n if (ev.key === Escape) {\n thisTooltip.hide();\n // stop propagation to avoid conflicting with other elements that listen for `Escape`\n // e,g: Dialog, Popover, Menu\n ev.stopPropagation();\n }\n };\n\n targetDocument?.addEventListener('keydown', onDocumentKeyDown, {\n // As this event is added at targeted document,\n // we need to capture the event to be sure keydown handling from tooltip happens first\n capture: true,\n });\n\n return () => {\n if (context.visibleTooltip === thisTooltip) {\n context.visibleTooltip = undefined;\n }\n\n targetDocument?.removeEventListener('keydown', onDocumentKeyDown, { capture: true });\n };\n }\n }, [context, targetDocument, visible, setVisible]);\n\n // The focused element gets a blur event when the document loses focus\n // (e.g. switching tabs in the browser), but we don't want to show the\n // tooltip again when the document gets focus back. Handle this case by\n // checking if the blurred element is still the document's activeElement.\n // See https://github.com/microsoft/fluentui/issues/13541\n const ignoreNextFocusEventRef = React.useRef(false);\n\n // Listener for onPointerEnter and onFocus on the trigger element\n const onEnterTrigger = React.useCallback(\n (ev: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement>) => {\n if (ev.type === 'focus' && ignoreNextFocusEventRef.current) {\n ignoreNextFocusEventRef.current = false;\n return;\n }\n\n // Show immediately if another tooltip is already visible\n const delay = context.visibleTooltip ? 0 : state.showDelay;\n\n setDelayTimeout(() => {\n setVisible(true, ev);\n }, delay);\n\n ev.persist(); // Persist the event since the setVisible call will happen asynchronously\n },\n [setDelayTimeout, setVisible, state.showDelay, context],\n );\n\n // Listener for onPointerLeave and onBlur on the trigger element\n const onLeaveTrigger = React.useCallback(\n (ev: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement>) => {\n let delay = state.hideDelay;\n\n if (ev.type === 'blur') {\n // Hide immediately when losing focus\n delay = 0;\n\n ignoreNextFocusEventRef.current = targetDocument?.activeElement === ev.target;\n }\n\n setDelayTimeout(() => {\n setVisible(false, ev);\n }, delay);\n\n ev.persist(); // Persist the event since the setVisible call will happen asynchronously\n },\n [setDelayTimeout, setVisible, state.hideDelay, targetDocument],\n );\n\n // Cancel the hide timer when the mouse or focus enters the tooltip, and restart it when the mouse or focus leaves.\n // This keeps the tooltip visible when the mouse is moved over it, or it has focus within.\n state.content.onPointerEnter = mergeCallbacks(state.content.onPointerEnter, clearDelayTimeout);\n state.content.onPointerLeave = mergeCallbacks(state.content.onPointerLeave, onLeaveTrigger);\n state.content.onFocus = mergeCallbacks(state.content.onFocus, clearDelayTimeout);\n state.content.onBlur = mergeCallbacks(state.content.onBlur, onLeaveTrigger);\n\n const child = getTriggerChild(children);\n\n const triggerAriaProps: Pick<TooltipChildProps, 'aria-label' | 'aria-labelledby' | 'aria-describedby'> = {};\n\n if (relationship === 'label') {\n // aria-label only works if the content is a string. Otherwise, need to use aria-labelledby.\n if (typeof state.content.children === 'string') {\n triggerAriaProps['aria-label'] = state.content.children;\n } else {\n triggerAriaProps['aria-labelledby'] = state.content.id;\n // Always render the tooltip even if hidden, so that aria-labelledby refers to a valid element\n state.shouldRenderTooltip = true;\n }\n } else if (relationship === 'description') {\n triggerAriaProps['aria-describedby'] = state.content.id;\n // Always render the tooltip even if hidden, so that aria-describedby refers to a valid element\n state.shouldRenderTooltip = true;\n }\n\n // Don't render the Tooltip in SSR to avoid hydration errors\n if (isServerSideRender) {\n state.shouldRenderTooltip = false;\n }\n\n const childTargetRef = useMergedRefs(child?.ref, targetRef);\n\n // Apply the trigger props to the child, either by calling the render function, or cloning with the new props\n state.children = applyTriggerPropsToChildren(children, {\n ...triggerAriaProps,\n ...child?.props,\n // If the target prop is not provided, attach targetRef to the trigger element's ref prop\n ref: positioningOptions.target === undefined ? childTargetRef : child?.ref,\n onPointerEnter: useEventCallback(mergeCallbacks(child?.props?.onPointerEnter, onEnterTrigger)),\n onPointerLeave: useEventCallback(mergeCallbacks(child?.props?.onPointerLeave, onLeaveTrigger)),\n onFocus: useEventCallback(mergeCallbacks(child?.props?.onFocus, onEnterTrigger)),\n onBlur: useEventCallback(mergeCallbacks(child?.props?.onBlur, onLeaveTrigger)),\n });\n\n return state;\n};\n"]}
|
@@ -4,22 +4,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.useTooltipStyles_unstable = exports.tooltipClassNames = void 0;
|
7
|
-
|
8
7
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
9
|
-
|
10
8
|
const react_positioning_1 = /*#__PURE__*/require("@fluentui/react-positioning");
|
11
|
-
|
12
9
|
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
13
|
-
|
14
10
|
const constants_1 = /*#__PURE__*/require("./private/constants");
|
15
|
-
|
16
11
|
exports.tooltipClassNames = {
|
17
12
|
content: 'fui-Tooltip__content'
|
18
13
|
};
|
19
14
|
/**
|
20
15
|
* Styles for the tooltip
|
21
16
|
*/
|
22
|
-
|
23
17
|
const useStyles = /*#__PURE__*/react_1.__styles({
|
24
18
|
"root": {
|
25
19
|
"mc9l5x": "fjseox",
|
@@ -97,14 +91,11 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
97
91
|
/**
|
98
92
|
* Apply styling to the Tooltip slots based on the state
|
99
93
|
*/
|
100
|
-
|
101
|
-
|
102
94
|
const useTooltipStyles_unstable = state => {
|
103
95
|
const styles = useStyles();
|
104
96
|
state.content.className = react_1.mergeClasses(exports.tooltipClassNames.content, styles.root, state.appearance === 'inverted' && styles.inverted, state.visible && styles.visible, state.content.className);
|
105
97
|
state.arrowClassName = styles.arrow;
|
106
98
|
return state;
|
107
99
|
};
|
108
|
-
|
109
100
|
exports.useTooltipStyles_unstable = useTooltipStyles_unstable;
|
110
101
|
//# sourceMappingURL=useTooltipStyles.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIaA,yBAAiB,GAAiC;EAC7DC,OAAO,EAAE;CACV;AAED;;;AAGA,MAAMC,SAAS,gBAAGC,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAgC1B;AAEF;;;AAGO,MAAMC,yBAAyB,GAAIC,KAAmB,IAAkB;EAC7E,MAAMC,MAAM,GAAGJ,SAAS,EAAE;EAE1BG,KAAK,CAACJ,OAAO,CAACM,SAAS,GAAGJ,oBAAY,CACpCH,yBAAiB,CAACC,OAAO,EACzBK,MAAM,CAACE,IAAI,EACXH,KAAK,CAACI,UAAU,KAAK,UAAU,IAAIH,MAAM,CAACI,QAAQ,EAClDL,KAAK,CAACM,OAAO,IAAIL,MAAM,CAACK,OAAO,EAC/BN,KAAK,CAACJ,OAAO,CAACM,SAAS,CACxB;EAEDF,KAAK,CAACO,cAAc,GAAGN,MAAM,CAACO,KAAK;EAEnC,OAAOR,KAAK;AACd,CAAC;AAdYL,iCAAyB","names":["exports","content","useStyles","react_1","useTooltipStyles_unstable","state","styles","className","root","appearance","inverted","visible","arrowClassName","arrow"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tooltip/src/components/Tooltip/useTooltipStyles.ts"],"sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createArrowStyles } from '@fluentui/react-positioning';\nimport { tokens } from '@fluentui/react-theme';\nimport { arrowHeight } from './private/constants';\nimport type { TooltipSlots, TooltipState } from './Tooltip.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tooltipClassNames: SlotClassNames<TooltipSlots> = {\n content: 'fui-Tooltip__content',\n};\n\n/**\n * Styles for the tooltip\n */\nconst useStyles = makeStyles({\n root: {\n display: 'none',\n boxSizing: 'border-box',\n maxWidth: '240px',\n cursor: 'default',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n ...shorthands.padding('4px', '11px', '6px', '11px'), // '5px 12px 7px 12px' minus the border width '1px'\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n\n // TODO need to add versions of tokens.alias.shadow.shadow8, etc. that work with filter\n filter:\n `drop-shadow(0 0 2px ${tokens.colorNeutralShadowAmbient}) ` +\n `drop-shadow(0 4px 8px ${tokens.colorNeutralShadowKey})`,\n },\n\n visible: {\n display: 'block',\n },\n\n inverted: {\n backgroundColor: tokens.colorNeutralBackgroundStatic,\n color: tokens.colorNeutralForegroundStaticInverted,\n },\n\n arrow: createArrowStyles({ arrowHeight }),\n});\n\n/**\n * Apply styling to the Tooltip slots based on the state\n */\nexport const useTooltipStyles_unstable = (state: TooltipState): TooltipState => {\n const styles = useStyles();\n\n state.content.className = mergeClasses(\n tooltipClassNames.content,\n styles.root,\n state.appearance === 'inverted' && styles.inverted,\n state.visible && styles.visible,\n state.content.className,\n );\n\n state.arrowClassName = styles.arrow;\n\n return state;\n};\n"]}
|
package/lib-commonjs/index.js
CHANGED
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.useTooltip_unstable = exports.useTooltipStyles_unstable = exports.tooltipClassNames = exports.renderTooltip_unstable = exports.Tooltip = void 0;
|
7
|
-
|
8
7
|
var Tooltip_1 = /*#__PURE__*/require("./Tooltip");
|
9
|
-
|
10
8
|
Object.defineProperty(exports, "Tooltip", {
|
11
9
|
enumerable: true,
|
12
10
|
get: function () {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACEA;EAAAC;EAAAC;IAAA,wBAAO;EAAA;AAAA;AACPF;EAAAC;EAAAC;IAAA,uCAAsB;EAAA;AAAA;AACtBF;EAAAC;EAAAC;IAAA,kCAAiB;EAAA;AAAA;AACjBF;EAAAC;EAAAC;IAAA,0CAAyB;EAAA;AAAA;AACzBF;EAAAC;EAAAC;IAAA,oCAAmB;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"","sources":["../../../../../../../packages/react-components/react-tooltip/src/index.ts"],"sourcesContent":["export {\n Tooltip,\n renderTooltip_unstable,\n tooltipClassNames,\n useTooltipStyles_unstable,\n useTooltip_unstable,\n} from './Tooltip';\nexport type {\n OnVisibleChangeData,\n TooltipProps,\n TooltipSlots,\n TooltipState,\n TooltipChildProps as TooltipTriggerProps,\n} from './Tooltip';\n"]}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-tooltip",
|
3
|
-
"version": "0.0.0-nightly-
|
3
|
+
"version": "0.0.0-nightly-20221229-0425.1",
|
4
4
|
"description": "React components for building web experiences",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
@@ -27,16 +27,16 @@
|
|
27
27
|
"devDependencies": {
|
28
28
|
"@fluentui/eslint-plugin": "*",
|
29
29
|
"@fluentui/react-conformance": "*",
|
30
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
30
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20221229-0425.1",
|
31
31
|
"@fluentui/scripts": "^1.0.0"
|
32
32
|
},
|
33
33
|
"dependencies": {
|
34
|
-
"@fluentui/keyboard-keys": "0.0.0-nightly-
|
35
|
-
"@fluentui/react-portal": "0.0.0-nightly-
|
36
|
-
"@fluentui/react-positioning": "0.0.0-nightly-
|
37
|
-
"@fluentui/react-shared-contexts": "0.0.0-nightly-
|
38
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
39
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
34
|
+
"@fluentui/keyboard-keys": "0.0.0-nightly-20221229-0425.1",
|
35
|
+
"@fluentui/react-portal": "0.0.0-nightly-20221229-0425.1",
|
36
|
+
"@fluentui/react-positioning": "0.0.0-nightly-20221229-0425.1",
|
37
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly-20221229-0425.1",
|
38
|
+
"@fluentui/react-theme": "0.0.0-nightly-20221229-0425.1",
|
39
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20221229-0425.1",
|
40
40
|
"@griffel/react": "^1.4.2",
|
41
41
|
"tslib": "^2.1.0"
|
42
42
|
},
|