@fluentui/react-tooltip 9.3.8 → 9.3.10
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +115 -1
- package/CHANGELOG.md +34 -2
- package/lib/components/Tooltip/useTooltip.js +13 -16
- package/lib/components/Tooltip/useTooltip.js.map +1 -1
- package/lib-commonjs/components/Tooltip/useTooltip.js +13 -16
- package/lib-commonjs/components/Tooltip/useTooltip.js.map +1 -1
- package/package.json +8 -8
package/CHANGELOG.json
CHANGED
@@ -2,7 +2,121 @@
|
|
2
2
|
"name": "@fluentui/react-tooltip",
|
3
3
|
"entries": [
|
4
4
|
{
|
5
|
-
"date": "
|
5
|
+
"date": "Tue, 26 Sep 2023 17:44:19 GMT",
|
6
|
+
"tag": "@fluentui/react-tooltip_v9.3.10",
|
7
|
+
"version": "9.3.10",
|
8
|
+
"comments": {
|
9
|
+
"patch": [
|
10
|
+
{
|
11
|
+
"author": "yuanboxue@microsoft.com",
|
12
|
+
"package": "@fluentui/react-tooltip",
|
13
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d",
|
14
|
+
"comment": "chore: trigger manual version bump after broken release"
|
15
|
+
},
|
16
|
+
{
|
17
|
+
"author": "beachball",
|
18
|
+
"package": "@fluentui/react-tooltip",
|
19
|
+
"comment": "Bump @fluentui/keyboard-keys to v9.0.6",
|
20
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
|
21
|
+
},
|
22
|
+
{
|
23
|
+
"author": "beachball",
|
24
|
+
"package": "@fluentui/react-tooltip",
|
25
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.12",
|
26
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
|
27
|
+
},
|
28
|
+
{
|
29
|
+
"author": "beachball",
|
30
|
+
"package": "@fluentui/react-tooltip",
|
31
|
+
"comment": "Bump @fluentui/react-portal to v9.3.18",
|
32
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
|
33
|
+
},
|
34
|
+
{
|
35
|
+
"author": "beachball",
|
36
|
+
"package": "@fluentui/react-tooltip",
|
37
|
+
"comment": "Bump @fluentui/react-positioning to v9.9.15",
|
38
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
|
39
|
+
},
|
40
|
+
{
|
41
|
+
"author": "beachball",
|
42
|
+
"package": "@fluentui/react-tooltip",
|
43
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.9.1",
|
44
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
|
45
|
+
},
|
46
|
+
{
|
47
|
+
"author": "beachball",
|
48
|
+
"package": "@fluentui/react-tooltip",
|
49
|
+
"comment": "Bump @fluentui/react-theme to v9.1.14",
|
50
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
|
51
|
+
},
|
52
|
+
{
|
53
|
+
"author": "beachball",
|
54
|
+
"package": "@fluentui/react-tooltip",
|
55
|
+
"comment": "Bump @fluentui/react-utilities to v9.13.5",
|
56
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
|
57
|
+
}
|
58
|
+
]
|
59
|
+
}
|
60
|
+
},
|
61
|
+
{
|
62
|
+
"date": "Tue, 26 Sep 2023 15:31:42 GMT",
|
63
|
+
"tag": "@fluentui/react-tooltip_v9.3.9",
|
64
|
+
"version": "9.3.9",
|
65
|
+
"comments": {
|
66
|
+
"patch": [
|
67
|
+
{
|
68
|
+
"author": "martinhochel@microsoft.com",
|
69
|
+
"package": "@fluentui/react-tooltip",
|
70
|
+
"commit": "e61473fa10195f6ebf2308205c1e72e91b711831",
|
71
|
+
"comment": "fix: bump swc core to mitigate transpilation memory leaks"
|
72
|
+
},
|
73
|
+
{
|
74
|
+
"author": "beachball",
|
75
|
+
"package": "@fluentui/react-tooltip",
|
76
|
+
"comment": "Bump @fluentui/keyboard-keys to v9.0.5",
|
77
|
+
"commit": "e16520437e10cd824ac254dd797e32762b5de72d"
|
78
|
+
},
|
79
|
+
{
|
80
|
+
"author": "beachball",
|
81
|
+
"package": "@fluentui/react-tooltip",
|
82
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.11",
|
83
|
+
"commit": "e16520437e10cd824ac254dd797e32762b5de72d"
|
84
|
+
},
|
85
|
+
{
|
86
|
+
"author": "beachball",
|
87
|
+
"package": "@fluentui/react-tooltip",
|
88
|
+
"comment": "Bump @fluentui/react-portal to v9.3.17",
|
89
|
+
"commit": "e16520437e10cd824ac254dd797e32762b5de72d"
|
90
|
+
},
|
91
|
+
{
|
92
|
+
"author": "beachball",
|
93
|
+
"package": "@fluentui/react-tooltip",
|
94
|
+
"comment": "Bump @fluentui/react-positioning to v9.9.14",
|
95
|
+
"commit": "e16520437e10cd824ac254dd797e32762b5de72d"
|
96
|
+
},
|
97
|
+
{
|
98
|
+
"author": "beachball",
|
99
|
+
"package": "@fluentui/react-tooltip",
|
100
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.9.0",
|
101
|
+
"commit": "e16520437e10cd824ac254dd797e32762b5de72d"
|
102
|
+
},
|
103
|
+
{
|
104
|
+
"author": "beachball",
|
105
|
+
"package": "@fluentui/react-tooltip",
|
106
|
+
"comment": "Bump @fluentui/react-theme to v9.1.13",
|
107
|
+
"commit": "e16520437e10cd824ac254dd797e32762b5de72d"
|
108
|
+
},
|
109
|
+
{
|
110
|
+
"author": "beachball",
|
111
|
+
"package": "@fluentui/react-tooltip",
|
112
|
+
"comment": "Bump @fluentui/react-utilities to v9.13.4",
|
113
|
+
"commit": "e16520437e10cd824ac254dd797e32762b5de72d"
|
114
|
+
}
|
115
|
+
]
|
116
|
+
}
|
117
|
+
},
|
118
|
+
{
|
119
|
+
"date": "Wed, 20 Sep 2023 17:47:45 GMT",
|
6
120
|
"tag": "@fluentui/react-tooltip_v9.3.8",
|
7
121
|
"version": "9.3.8",
|
8
122
|
"comments": {
|
package/CHANGELOG.md
CHANGED
@@ -1,12 +1,44 @@
|
|
1
1
|
# Change Log - @fluentui/react-tooltip
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Tue, 26 Sep 2023 17:44:19 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
+
## [9.3.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-tooltip_v9.3.10)
|
8
|
+
|
9
|
+
Tue, 26 Sep 2023 17:44:19 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tooltip_v9.3.9..@fluentui/react-tooltip_v9.3.10)
|
11
|
+
|
12
|
+
### Patches
|
13
|
+
|
14
|
+
- chore: trigger manual version bump after broken release ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by yuanboxue@microsoft.com)
|
15
|
+
- Bump @fluentui/keyboard-keys to v9.0.6 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.12 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
|
17
|
+
- Bump @fluentui/react-portal to v9.3.18 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
|
18
|
+
- Bump @fluentui/react-positioning to v9.9.15 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
|
19
|
+
- Bump @fluentui/react-shared-contexts to v9.9.1 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
|
20
|
+
- Bump @fluentui/react-theme to v9.1.14 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
|
21
|
+
- Bump @fluentui/react-utilities to v9.13.5 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
|
22
|
+
|
23
|
+
## [9.3.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-tooltip_v9.3.9)
|
24
|
+
|
25
|
+
Tue, 26 Sep 2023 15:31:42 GMT
|
26
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tooltip_v9.3.8..@fluentui/react-tooltip_v9.3.9)
|
27
|
+
|
28
|
+
### Patches
|
29
|
+
|
30
|
+
- fix: bump swc core to mitigate transpilation memory leaks ([PR #29253](https://github.com/microsoft/fluentui/pull/29253) by martinhochel@microsoft.com)
|
31
|
+
- Bump @fluentui/keyboard-keys to v9.0.5 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
|
32
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.11 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
|
33
|
+
- Bump @fluentui/react-portal to v9.3.17 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
|
34
|
+
- Bump @fluentui/react-positioning to v9.9.14 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
|
35
|
+
- Bump @fluentui/react-shared-contexts to v9.9.0 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
|
36
|
+
- Bump @fluentui/react-theme to v9.1.13 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
|
37
|
+
- Bump @fluentui/react-utilities to v9.13.4 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
|
38
|
+
|
7
39
|
## [9.3.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-tooltip_v9.3.8)
|
8
40
|
|
9
|
-
Wed, 20 Sep 2023 17:
|
41
|
+
Wed, 20 Sep 2023 17:47:45 GMT
|
10
42
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tooltip_v9.3.7..@fluentui/react-tooltip_v9.3.8)
|
11
43
|
|
12
44
|
### Patches
|
@@ -12,7 +12,7 @@ import { Escape } from '@fluentui/keyboard-keys';
|
|
12
12
|
*
|
13
13
|
* @param props - props from this instance of Tooltip
|
14
14
|
*/ export const useTooltip_unstable = (props)=>{
|
15
|
-
var
|
15
|
+
var _child_props, _child_props1, _child_props2, _child_props3;
|
16
16
|
const context = useTooltipVisibility();
|
17
17
|
const isServerSideRender = useIsSSR();
|
18
18
|
const { targetDocument } = useFluent();
|
@@ -26,8 +26,7 @@ import { Escape } from '@fluentui/keyboard-keys';
|
|
26
26
|
clearDelayTimeout();
|
27
27
|
setVisibleInternal((oldVisible)=>{
|
28
28
|
if (data.visible !== oldVisible) {
|
29
|
-
|
30
|
-
(_onVisibleChange = onVisibleChange) === null || _onVisibleChange === void 0 ? void 0 : _onVisibleChange(ev, data);
|
29
|
+
onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(ev, data);
|
31
30
|
}
|
32
31
|
return data.visible;
|
33
32
|
});
|
@@ -77,7 +76,7 @@ import { Escape } from '@fluentui/keyboard-keys';
|
|
77
76
|
// Also add a listener on document to hide the tooltip if Escape is pressed
|
78
77
|
useIsomorphicLayoutEffect(()=>{
|
79
78
|
if (visible) {
|
80
|
-
var _context_visibleTooltip
|
79
|
+
var _context_visibleTooltip;
|
81
80
|
const thisTooltip = {
|
82
81
|
hide: (ev)=>setVisible(undefined, {
|
83
82
|
visible: false,
|
@@ -94,17 +93,16 @@ import { Escape } from '@fluentui/keyboard-keys';
|
|
94
93
|
ev.stopPropagation();
|
95
94
|
}
|
96
95
|
};
|
97
|
-
|
96
|
+
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('keydown', onDocumentKeyDown, {
|
98
97
|
// As this event is added at targeted document,
|
99
98
|
// we need to capture the event to be sure keydown handling from tooltip happens first
|
100
99
|
capture: true
|
101
100
|
});
|
102
101
|
return ()=>{
|
103
|
-
var _targetDocument;
|
104
102
|
if (context.visibleTooltip === thisTooltip) {
|
105
103
|
context.visibleTooltip = undefined;
|
106
104
|
}
|
107
|
-
|
105
|
+
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('keydown', onDocumentKeyDown, {
|
108
106
|
capture: true
|
109
107
|
});
|
110
108
|
};
|
@@ -145,10 +143,9 @@ import { Escape } from '@fluentui/keyboard-keys';
|
|
145
143
|
const onLeaveTrigger = React.useCallback((ev)=>{
|
146
144
|
let delay = state.hideDelay;
|
147
145
|
if (ev.type === 'blur') {
|
148
|
-
var _targetDocument;
|
149
146
|
// Hide immediately when losing focus
|
150
147
|
delay = 0;
|
151
|
-
ignoreNextFocusEventRef.current = (
|
148
|
+
ignoreNextFocusEventRef.current = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) === ev.target;
|
152
149
|
}
|
153
150
|
setDelayTimeout(()=>{
|
154
151
|
setVisible(ev, {
|
@@ -188,17 +185,17 @@ import { Escape } from '@fluentui/keyboard-keys';
|
|
188
185
|
if (isServerSideRender) {
|
189
186
|
state.shouldRenderTooltip = false;
|
190
187
|
}
|
191
|
-
const childTargetRef = useMergedRefs(
|
188
|
+
const childTargetRef = useMergedRefs(child === null || child === void 0 ? void 0 : child.ref, targetRef);
|
192
189
|
// Apply the trigger props to the child, either by calling the render function, or cloning with the new props
|
193
190
|
state.children = applyTriggerPropsToChildren(children, {
|
194
191
|
...triggerAriaProps,
|
195
|
-
...
|
192
|
+
...child === null || child === void 0 ? void 0 : child.props,
|
196
193
|
// If the target prop is not provided, attach targetRef to the trigger element's ref prop
|
197
|
-
ref: positioningOptions.target === undefined ? childTargetRef :
|
198
|
-
onPointerEnter: useEventCallback(mergeCallbacks(
|
199
|
-
onPointerLeave: useEventCallback(mergeCallbacks(
|
200
|
-
onFocus: useEventCallback(mergeCallbacks(
|
201
|
-
onBlur: useEventCallback(mergeCallbacks(
|
194
|
+
ref: positioningOptions.target === undefined ? childTargetRef : child === null || child === void 0 ? void 0 : child.ref,
|
195
|
+
onPointerEnter: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : (_child_props = child.props) === null || _child_props === void 0 ? void 0 : _child_props.onPointerEnter, onEnterTrigger)),
|
196
|
+
onPointerLeave: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : (_child_props1 = child.props) === null || _child_props1 === void 0 ? void 0 : _child_props1.onPointerLeave, onLeaveTrigger)),
|
197
|
+
onFocus: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : (_child_props2 = child.props) === null || _child_props2 === void 0 ? void 0 : _child_props2.onFocus, onEnterTrigger)),
|
198
|
+
onBlur: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : (_child_props3 = child.props) === null || _child_props3 === void 0 ? void 0 : _child_props3.onBlur, onLeaveTrigger))
|
202
199
|
});
|
203
200
|
return state;
|
204
201
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["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 useControllableState,\n useId,\n useIsomorphicLayoutEffect,\n useIsSSR,\n useMergedRefs,\n useTimeout,\n getTriggerChild,\n mergeCallbacks,\n useEventCallback,\n slot,\n} from '@fluentui/react-utilities';\nimport type { TooltipProps, TooltipState, TooltipChildProps, OnVisibleChangeData } 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 (ev: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement> | undefined, data: OnVisibleChangeData) => {\n clearDelayTimeout();\n setVisibleInternal(oldVisible => {\n if (data.visible !== oldVisible) {\n onVisibleChange?.(ev, data);\n }\n return data.visible;\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: slot.always(content, {\n defaultProps: {\n role: 'tooltip',\n },\n elementType: 'div',\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 = {\n hide: (ev?: KeyboardEvent) => setVisible(undefined, { visible: false, documentKeyboardEvent: ev }),\n };\n\n context.visibleTooltip?.hide();\n context.visibleTooltip = thisTooltip;\n\n const onDocumentKeyDown = (ev: KeyboardEvent) => {\n if (ev.key === Escape) {\n thisTooltip.hide(ev);\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(ev, { visible: true });\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(ev, { visible: false });\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"],"names":["React","mergeArrowOffset","resolvePositioningShorthand","usePositioning","useTooltipVisibility_unstable","useTooltipVisibility","useFluent_unstable","useFluent","applyTriggerPropsToChildren","useControllableState","useId","useIsomorphicLayoutEffect","useIsSSR","useMergedRefs","useTimeout","getTriggerChild","mergeCallbacks","useEventCallback","slot","arrowHeight","tooltipBorderRadius","Escape","useTooltip_unstable","props","child","context","isServerSideRender","targetDocument","setDelayTimeout","clearDelayTimeout","appearance","children","content","withArrow","positioning","onVisibleChange","relationship","showDelay","hideDelay","mountNode","visible","setVisibleInternal","state","initialState","setVisible","useCallback","ev","data","oldVisible","shouldRenderTooltip","components","always","defaultProps","role","elementType","id","positioningOptions","enabled","arrowPadding","position","align","offset","targetRef","containerRef","arrowRef","ref","thisTooltip","hide","undefined","documentKeyboardEvent","visibleTooltip","onDocumentKeyDown","key","stopPropagation","addEventListener","capture","removeEventListener","ignoreNextFocusEventRef","useRef","onEnterTrigger","type","current","delay","persist","onLeaveTrigger","activeElement","target","onPointerEnter","onPointerLeave","onFocus","onBlur","triggerAriaProps","childTargetRef"],"mappings":"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"}
|
1
|
+
{"version":3,"sources":["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 useControllableState,\n useId,\n useIsomorphicLayoutEffect,\n useIsSSR,\n useMergedRefs,\n useTimeout,\n getTriggerChild,\n mergeCallbacks,\n useEventCallback,\n slot,\n} from '@fluentui/react-utilities';\nimport type { TooltipProps, TooltipState, TooltipChildProps, OnVisibleChangeData } 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 (ev: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement> | undefined, data: OnVisibleChangeData) => {\n clearDelayTimeout();\n setVisibleInternal(oldVisible => {\n if (data.visible !== oldVisible) {\n onVisibleChange?.(ev, data);\n }\n return data.visible;\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: slot.always(content, {\n defaultProps: {\n role: 'tooltip',\n },\n elementType: 'div',\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 = {\n hide: (ev?: KeyboardEvent) => setVisible(undefined, { visible: false, documentKeyboardEvent: ev }),\n };\n\n context.visibleTooltip?.hide();\n context.visibleTooltip = thisTooltip;\n\n const onDocumentKeyDown = (ev: KeyboardEvent) => {\n if (ev.key === Escape) {\n thisTooltip.hide(ev);\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(ev, { visible: true });\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(ev, { visible: false });\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"],"names":["React","mergeArrowOffset","resolvePositioningShorthand","usePositioning","useTooltipVisibility_unstable","useTooltipVisibility","useFluent_unstable","useFluent","applyTriggerPropsToChildren","useControllableState","useId","useIsomorphicLayoutEffect","useIsSSR","useMergedRefs","useTimeout","getTriggerChild","mergeCallbacks","useEventCallback","slot","arrowHeight","tooltipBorderRadius","Escape","useTooltip_unstable","props","child","context","isServerSideRender","targetDocument","setDelayTimeout","clearDelayTimeout","appearance","children","content","withArrow","positioning","onVisibleChange","relationship","showDelay","hideDelay","mountNode","visible","setVisibleInternal","state","initialState","setVisible","useCallback","ev","data","oldVisible","shouldRenderTooltip","components","always","defaultProps","role","elementType","id","positioningOptions","enabled","arrowPadding","position","align","offset","targetRef","containerRef","arrowRef","ref","thisTooltip","hide","undefined","documentKeyboardEvent","visibleTooltip","onDocumentKeyDown","key","stopPropagation","addEventListener","capture","removeEventListener","ignoreNextFocusEventRef","useRef","onEnterTrigger","type","current","delay","persist","onLeaveTrigger","activeElement","target","onPointerEnter","onPointerLeave","onFocus","onBlur","triggerAriaProps","childTargetRef"],"mappings":"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"}
|
@@ -16,7 +16,7 @@ const _reactutilities = require("@fluentui/react-utilities");
|
|
16
16
|
const _constants = require("./private/constants");
|
17
17
|
const _keyboardkeys = require("@fluentui/keyboard-keys");
|
18
18
|
const useTooltip_unstable = (props)=>{
|
19
|
-
var
|
19
|
+
var _child_props, _child_props1, _child_props2, _child_props3;
|
20
20
|
const context = (0, _reactsharedcontexts.useTooltipVisibility_unstable)();
|
21
21
|
const isServerSideRender = (0, _reactutilities.useIsSSR)();
|
22
22
|
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
|
@@ -30,8 +30,7 @@ const useTooltip_unstable = (props)=>{
|
|
30
30
|
clearDelayTimeout();
|
31
31
|
setVisibleInternal((oldVisible)=>{
|
32
32
|
if (data.visible !== oldVisible) {
|
33
|
-
|
34
|
-
(_onVisibleChange = onVisibleChange) === null || _onVisibleChange === void 0 ? void 0 : _onVisibleChange(ev, data);
|
33
|
+
onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(ev, data);
|
35
34
|
}
|
36
35
|
return data.visible;
|
37
36
|
});
|
@@ -81,7 +80,7 @@ const useTooltip_unstable = (props)=>{
|
|
81
80
|
// Also add a listener on document to hide the tooltip if Escape is pressed
|
82
81
|
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
|
83
82
|
if (visible) {
|
84
|
-
var _context_visibleTooltip
|
83
|
+
var _context_visibleTooltip;
|
85
84
|
const thisTooltip = {
|
86
85
|
hide: (ev)=>setVisible(undefined, {
|
87
86
|
visible: false,
|
@@ -98,17 +97,16 @@ const useTooltip_unstable = (props)=>{
|
|
98
97
|
ev.stopPropagation();
|
99
98
|
}
|
100
99
|
};
|
101
|
-
|
100
|
+
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('keydown', onDocumentKeyDown, {
|
102
101
|
// As this event is added at targeted document,
|
103
102
|
// we need to capture the event to be sure keydown handling from tooltip happens first
|
104
103
|
capture: true
|
105
104
|
});
|
106
105
|
return ()=>{
|
107
|
-
var _targetDocument;
|
108
106
|
if (context.visibleTooltip === thisTooltip) {
|
109
107
|
context.visibleTooltip = undefined;
|
110
108
|
}
|
111
|
-
|
109
|
+
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('keydown', onDocumentKeyDown, {
|
112
110
|
capture: true
|
113
111
|
});
|
114
112
|
};
|
@@ -149,10 +147,9 @@ const useTooltip_unstable = (props)=>{
|
|
149
147
|
const onLeaveTrigger = _react.useCallback((ev)=>{
|
150
148
|
let delay = state.hideDelay;
|
151
149
|
if (ev.type === 'blur') {
|
152
|
-
var _targetDocument;
|
153
150
|
// Hide immediately when losing focus
|
154
151
|
delay = 0;
|
155
|
-
ignoreNextFocusEventRef.current = (
|
152
|
+
ignoreNextFocusEventRef.current = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) === ev.target;
|
156
153
|
}
|
157
154
|
setDelayTimeout(()=>{
|
158
155
|
setVisible(ev, {
|
@@ -192,17 +189,17 @@ const useTooltip_unstable = (props)=>{
|
|
192
189
|
if (isServerSideRender) {
|
193
190
|
state.shouldRenderTooltip = false;
|
194
191
|
}
|
195
|
-
const childTargetRef = (0, _reactutilities.useMergedRefs)(
|
192
|
+
const childTargetRef = (0, _reactutilities.useMergedRefs)(child === null || child === void 0 ? void 0 : child.ref, targetRef);
|
196
193
|
// Apply the trigger props to the child, either by calling the render function, or cloning with the new props
|
197
194
|
state.children = (0, _reactutilities.applyTriggerPropsToChildren)(children, {
|
198
195
|
...triggerAriaProps,
|
199
|
-
...
|
196
|
+
...child === null || child === void 0 ? void 0 : child.props,
|
200
197
|
// If the target prop is not provided, attach targetRef to the trigger element's ref prop
|
201
|
-
ref: positioningOptions.target === undefined ? childTargetRef :
|
202
|
-
onPointerEnter: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(
|
203
|
-
onPointerLeave: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(
|
204
|
-
onFocus: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(
|
205
|
-
onBlur: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(
|
198
|
+
ref: positioningOptions.target === undefined ? childTargetRef : child === null || child === void 0 ? void 0 : child.ref,
|
199
|
+
onPointerEnter: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(child === null || child === void 0 ? void 0 : (_child_props = child.props) === null || _child_props === void 0 ? void 0 : _child_props.onPointerEnter, onEnterTrigger)),
|
200
|
+
onPointerLeave: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(child === null || child === void 0 ? void 0 : (_child_props1 = child.props) === null || _child_props1 === void 0 ? void 0 : _child_props1.onPointerLeave, onLeaveTrigger)),
|
201
|
+
onFocus: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(child === null || child === void 0 ? void 0 : (_child_props2 = child.props) === null || _child_props2 === void 0 ? void 0 : _child_props2.onFocus, onEnterTrigger)),
|
202
|
+
onBlur: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(child === null || child === void 0 ? void 0 : (_child_props3 = child.props) === null || _child_props3 === void 0 ? void 0 : _child_props3.onBlur, onLeaveTrigger))
|
206
203
|
});
|
207
204
|
return state;
|
208
205
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useTooltip.js"],"sourcesContent":["import * as React from 'react';\nimport { mergeArrowOffset, resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport { useTooltipVisibility_unstable as useTooltipVisibility, useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { applyTriggerPropsToChildren, useControllableState, useId, useIsomorphicLayoutEffect, useIsSSR, useMergedRefs, useTimeout, getTriggerChild, mergeCallbacks, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { arrowHeight, tooltipBorderRadius } from './private/constants';\nimport { Escape } from '@fluentui/keyboard-keys';\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 */ export const useTooltip_unstable = (props)=>{\n var _child, _child1, _child2, _child_props, _child3, _child_props1, _child4, _child_props2, _child5, _child_props3, _child6;\n const context = useTooltipVisibility();\n const isServerSideRender = useIsSSR();\n const { targetDocument } = useFluent();\n const [setDelayTimeout, clearDelayTimeout] = useTimeout();\n const { appearance = 'normal', children, content, withArrow = false, positioning = 'above', onVisibleChange, relationship, showDelay = 250, hideDelay = 250, mountNode } = props;\n const [visible, setVisibleInternal] = useControllableState({\n state: props.visible,\n initialState: false\n });\n const setVisible = React.useCallback((ev, data)=>{\n clearDelayTimeout();\n setVisibleInternal((oldVisible)=>{\n if (data.visible !== oldVisible) {\n var _onVisibleChange;\n (_onVisibleChange = onVisibleChange) === null || _onVisibleChange === void 0 ? void 0 : _onVisibleChange(ev, data);\n }\n return data.visible;\n });\n }, [\n clearDelayTimeout,\n setVisibleInternal,\n onVisibleChange\n ]);\n const state = {\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: slot.always(content, {\n defaultProps: {\n role: 'tooltip'\n },\n elementType: 'div'\n })\n };\n state.content.id = useId('tooltip-', state.content.id);\n const positioningOptions = {\n enabled: state.visible,\n arrowPadding: 2 * tooltipBorderRadius,\n position: 'above',\n align: 'center',\n offset: 4,\n ...resolvePositioningShorthand(state.positioning)\n };\n if (state.withArrow) {\n positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeight);\n }\n const { targetRef, containerRef, arrowRef } = usePositioning(positioningOptions);\n state.content.ref = useMergedRefs(state.content.ref, containerRef);\n state.arrowRef = arrowRef;\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 var _context_visibleTooltip, _targetDocument;\n const thisTooltip = {\n hide: (ev)=>setVisible(undefined, {\n visible: false,\n documentKeyboardEvent: ev\n })\n };\n (_context_visibleTooltip = context.visibleTooltip) === null || _context_visibleTooltip === void 0 ? void 0 : _context_visibleTooltip.hide();\n context.visibleTooltip = thisTooltip;\n const onDocumentKeyDown = (ev)=>{\n if (ev.key === Escape) {\n thisTooltip.hide(ev);\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 (_targetDocument = targetDocument) === null || _targetDocument === void 0 ? void 0 : _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 return ()=>{\n var _targetDocument;\n if (context.visibleTooltip === thisTooltip) {\n context.visibleTooltip = undefined;\n }\n (_targetDocument = targetDocument) === null || _targetDocument === void 0 ? void 0 : _targetDocument.removeEventListener('keydown', onDocumentKeyDown, {\n capture: true\n });\n };\n }\n }, [\n context,\n targetDocument,\n visible,\n 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 // Listener for onPointerEnter and onFocus on the trigger element\n const onEnterTrigger = React.useCallback((ev)=>{\n if (ev.type === 'focus' && ignoreNextFocusEventRef.current) {\n ignoreNextFocusEventRef.current = false;\n return;\n }\n // Show immediately if another tooltip is already visible\n const delay = context.visibleTooltip ? 0 : state.showDelay;\n setDelayTimeout(()=>{\n setVisible(ev, {\n visible: true\n });\n }, delay);\n ev.persist(); // Persist the event since the setVisible call will happen asynchronously\n }, [\n setDelayTimeout,\n setVisible,\n state.showDelay,\n context\n ]);\n // Listener for onPointerLeave and onBlur on the trigger element\n const onLeaveTrigger = React.useCallback((ev)=>{\n let delay = state.hideDelay;\n if (ev.type === 'blur') {\n var _targetDocument;\n // Hide immediately when losing focus\n delay = 0;\n ignoreNextFocusEventRef.current = ((_targetDocument = targetDocument) === null || _targetDocument === void 0 ? void 0 : _targetDocument.activeElement) === ev.target;\n }\n setDelayTimeout(()=>{\n setVisible(ev, {\n visible: false\n });\n }, delay);\n ev.persist(); // Persist the event since the setVisible call will happen asynchronously\n }, [\n setDelayTimeout,\n setVisible,\n state.hideDelay,\n targetDocument\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 const child = getTriggerChild(children);\n const triggerAriaProps = {};\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 // Don't render the Tooltip in SSR to avoid hydration errors\n if (isServerSideRender) {\n state.shouldRenderTooltip = false;\n }\n const childTargetRef = useMergedRefs((_child = child) === null || _child === void 0 ? void 0 : _child.ref, targetRef);\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 ...(_child1 = child) === null || _child1 === void 0 ? void 0 : _child1.props,\n // If the target prop is not provided, attach targetRef to the trigger element's ref prop\n ref: positioningOptions.target === undefined ? childTargetRef : (_child2 = child) === null || _child2 === void 0 ? void 0 : _child2.ref,\n onPointerEnter: useEventCallback(mergeCallbacks((_child3 = child) === null || _child3 === void 0 ? void 0 : (_child_props = _child3.props) === null || _child_props === void 0 ? void 0 : _child_props.onPointerEnter, onEnterTrigger)),\n onPointerLeave: useEventCallback(mergeCallbacks((_child4 = child) === null || _child4 === void 0 ? void 0 : (_child_props1 = _child4.props) === null || _child_props1 === void 0 ? void 0 : _child_props1.onPointerLeave, onLeaveTrigger)),\n onFocus: useEventCallback(mergeCallbacks((_child5 = child) === null || _child5 === void 0 ? void 0 : (_child_props2 = _child5.props) === null || _child_props2 === void 0 ? void 0 : _child_props2.onFocus, onEnterTrigger)),\n onBlur: useEventCallback(mergeCallbacks((_child6 = child) === null || _child6 === void 0 ? void 0 : (_child_props3 = _child6.props) === null || _child_props3 === void 0 ? void 0 : _child_props3.onBlur, onLeaveTrigger))\n });\n return state;\n};\n"],"names":["useTooltip_unstable","props","_child","_child1","_child2","_child_props","_child3","_child_props1","_child4","_child_props2","_child5","_child_props3","_child6","context","useTooltipVisibility","isServerSideRender","useIsSSR","targetDocument","useFluent","setDelayTimeout","clearDelayTimeout","useTimeout","appearance","children","content","withArrow","positioning","onVisibleChange","relationship","showDelay","hideDelay","mountNode","visible","setVisibleInternal","useControllableState","state","initialState","setVisible","React","useCallback","ev","data","oldVisible","_onVisibleChange","shouldRenderTooltip","components","slot","always","defaultProps","role","elementType","id","useId","positioningOptions","enabled","arrowPadding","tooltipBorderRadius","position","align","offset","resolvePositioningShorthand","mergeArrowOffset","arrowHeight","targetRef","containerRef","arrowRef","usePositioning","ref","useMergedRefs","useIsomorphicLayoutEffect","_context_visibleTooltip","_targetDocument","thisTooltip","hide","undefined","documentKeyboardEvent","visibleTooltip","onDocumentKeyDown","key","Escape","stopPropagation","addEventListener","capture","removeEventListener","ignoreNextFocusEventRef","useRef","onEnterTrigger","type","current","delay","persist","onLeaveTrigger","activeElement","target","onPointerEnter","mergeCallbacks","onPointerLeave","onFocus","onBlur","child","getTriggerChild","triggerAriaProps","childTargetRef","applyTriggerPropsToChildren","useEventCallback"],"mappings":"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"}
|
1
|
+
{"version":3,"sources":["useTooltip.js"],"sourcesContent":["import * as React from 'react';\nimport { mergeArrowOffset, resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport { useTooltipVisibility_unstable as useTooltipVisibility, useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { applyTriggerPropsToChildren, useControllableState, useId, useIsomorphicLayoutEffect, useIsSSR, useMergedRefs, useTimeout, getTriggerChild, mergeCallbacks, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { arrowHeight, tooltipBorderRadius } from './private/constants';\nimport { Escape } from '@fluentui/keyboard-keys';\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 */ export const useTooltip_unstable = (props)=>{\n var _child_props, _child_props1, _child_props2, _child_props3;\n const context = useTooltipVisibility();\n const isServerSideRender = useIsSSR();\n const { targetDocument } = useFluent();\n const [setDelayTimeout, clearDelayTimeout] = useTimeout();\n const { appearance = 'normal', children, content, withArrow = false, positioning = 'above', onVisibleChange, relationship, showDelay = 250, hideDelay = 250, mountNode } = props;\n const [visible, setVisibleInternal] = useControllableState({\n state: props.visible,\n initialState: false\n });\n const setVisible = React.useCallback((ev, data)=>{\n clearDelayTimeout();\n setVisibleInternal((oldVisible)=>{\n if (data.visible !== oldVisible) {\n onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(ev, data);\n }\n return data.visible;\n });\n }, [\n clearDelayTimeout,\n setVisibleInternal,\n onVisibleChange\n ]);\n const state = {\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: slot.always(content, {\n defaultProps: {\n role: 'tooltip'\n },\n elementType: 'div'\n })\n };\n state.content.id = useId('tooltip-', state.content.id);\n const positioningOptions = {\n enabled: state.visible,\n arrowPadding: 2 * tooltipBorderRadius,\n position: 'above',\n align: 'center',\n offset: 4,\n ...resolvePositioningShorthand(state.positioning)\n };\n if (state.withArrow) {\n positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeight);\n }\n const { targetRef, containerRef, arrowRef } = usePositioning(positioningOptions);\n state.content.ref = useMergedRefs(state.content.ref, containerRef);\n state.arrowRef = arrowRef;\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 var _context_visibleTooltip;\n const thisTooltip = {\n hide: (ev)=>setVisible(undefined, {\n visible: false,\n documentKeyboardEvent: ev\n })\n };\n (_context_visibleTooltip = context.visibleTooltip) === null || _context_visibleTooltip === void 0 ? void 0 : _context_visibleTooltip.hide();\n context.visibleTooltip = thisTooltip;\n const onDocumentKeyDown = (ev)=>{\n if (ev.key === Escape) {\n thisTooltip.hide(ev);\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 targetDocument === null || targetDocument === void 0 ? void 0 : 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 return ()=>{\n if (context.visibleTooltip === thisTooltip) {\n context.visibleTooltip = undefined;\n }\n targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('keydown', onDocumentKeyDown, {\n capture: true\n });\n };\n }\n }, [\n context,\n targetDocument,\n visible,\n 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 // Listener for onPointerEnter and onFocus on the trigger element\n const onEnterTrigger = React.useCallback((ev)=>{\n if (ev.type === 'focus' && ignoreNextFocusEventRef.current) {\n ignoreNextFocusEventRef.current = false;\n return;\n }\n // Show immediately if another tooltip is already visible\n const delay = context.visibleTooltip ? 0 : state.showDelay;\n setDelayTimeout(()=>{\n setVisible(ev, {\n visible: true\n });\n }, delay);\n ev.persist(); // Persist the event since the setVisible call will happen asynchronously\n }, [\n setDelayTimeout,\n setVisible,\n state.showDelay,\n context\n ]);\n // Listener for onPointerLeave and onBlur on the trigger element\n const onLeaveTrigger = React.useCallback((ev)=>{\n let delay = state.hideDelay;\n if (ev.type === 'blur') {\n // Hide immediately when losing focus\n delay = 0;\n ignoreNextFocusEventRef.current = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) === ev.target;\n }\n setDelayTimeout(()=>{\n setVisible(ev, {\n visible: false\n });\n }, delay);\n ev.persist(); // Persist the event since the setVisible call will happen asynchronously\n }, [\n setDelayTimeout,\n setVisible,\n state.hideDelay,\n targetDocument\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 const child = getTriggerChild(children);\n const triggerAriaProps = {};\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 // Don't render the Tooltip in SSR to avoid hydration errors\n if (isServerSideRender) {\n state.shouldRenderTooltip = false;\n }\n const childTargetRef = useMergedRefs(child === null || child === void 0 ? void 0 : child.ref, targetRef);\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 === null || child === void 0 ? void 0 : 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 === null || child === void 0 ? void 0 : child.ref,\n onPointerEnter: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : (_child_props = child.props) === null || _child_props === void 0 ? void 0 : _child_props.onPointerEnter, onEnterTrigger)),\n onPointerLeave: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : (_child_props1 = child.props) === null || _child_props1 === void 0 ? void 0 : _child_props1.onPointerLeave, onLeaveTrigger)),\n onFocus: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : (_child_props2 = child.props) === null || _child_props2 === void 0 ? void 0 : _child_props2.onFocus, onEnterTrigger)),\n onBlur: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : (_child_props3 = child.props) === null || _child_props3 === void 0 ? void 0 : _child_props3.onBlur, onLeaveTrigger))\n });\n return state;\n};\n"],"names":["useTooltip_unstable","props","_child_props","_child_props1","_child_props2","_child_props3","context","useTooltipVisibility","isServerSideRender","useIsSSR","targetDocument","useFluent","setDelayTimeout","clearDelayTimeout","useTimeout","appearance","children","content","withArrow","positioning","onVisibleChange","relationship","showDelay","hideDelay","mountNode","visible","setVisibleInternal","useControllableState","state","initialState","setVisible","React","useCallback","ev","data","oldVisible","shouldRenderTooltip","components","slot","always","defaultProps","role","elementType","id","useId","positioningOptions","enabled","arrowPadding","tooltipBorderRadius","position","align","offset","resolvePositioningShorthand","mergeArrowOffset","arrowHeight","targetRef","containerRef","arrowRef","usePositioning","ref","useMergedRefs","useIsomorphicLayoutEffect","_context_visibleTooltip","thisTooltip","hide","undefined","documentKeyboardEvent","visibleTooltip","onDocumentKeyDown","key","Escape","stopPropagation","addEventListener","capture","removeEventListener","ignoreNextFocusEventRef","useRef","onEnterTrigger","type","current","delay","persist","onLeaveTrigger","activeElement","target","onPointerEnter","mergeCallbacks","onPointerLeave","onFocus","onBlur","child","getTriggerChild","triggerAriaProps","childTargetRef","applyTriggerPropsToChildren","useEventCallback"],"mappings":"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"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-tooltip",
|
3
|
-
"version": "9.3.
|
3
|
+
"version": "9.3.10",
|
4
4
|
"description": "React components for building web experiences",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
@@ -33,13 +33,13 @@
|
|
33
33
|
"@fluentui/scripts-tasks": "*"
|
34
34
|
},
|
35
35
|
"dependencies": {
|
36
|
-
"@fluentui/keyboard-keys": "^9.0.
|
37
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
38
|
-
"@fluentui/react-portal": "^9.3.
|
39
|
-
"@fluentui/react-positioning": "^9.9.
|
40
|
-
"@fluentui/react-shared-contexts": "^9.
|
41
|
-
"@fluentui/react-theme": "^9.1.
|
42
|
-
"@fluentui/react-utilities": "^9.13.
|
36
|
+
"@fluentui/keyboard-keys": "^9.0.6",
|
37
|
+
"@fluentui/react-jsx-runtime": "^9.0.12",
|
38
|
+
"@fluentui/react-portal": "^9.3.18",
|
39
|
+
"@fluentui/react-positioning": "^9.9.15",
|
40
|
+
"@fluentui/react-shared-contexts": "^9.9.1",
|
41
|
+
"@fluentui/react-theme": "^9.1.14",
|
42
|
+
"@fluentui/react-utilities": "^9.13.5",
|
43
43
|
"@griffel/react": "^1.5.14",
|
44
44
|
"@swc/helpers": "^0.5.1"
|
45
45
|
},
|