@fluentui/react-tooltip 0.0.0-nightly-20230316-0427.1 → 0.0.0-nightly-20230317-1454.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/.swcrc +39 -0
- package/CHANGELOG.json +44 -17
- package/CHANGELOG.md +22 -11
- package/lib/Tooltip.js +1 -1
- package/lib/Tooltip.js.map +1 -1
- package/lib/components/Tooltip/Tooltip.js +6 -5
- package/lib/components/Tooltip/Tooltip.js.map +1 -1
- package/lib/components/Tooltip/Tooltip.types.js +1 -1
- package/lib/components/Tooltip/Tooltip.types.js.map +1 -1
- package/lib/components/Tooltip/index.js +5 -5
- package/lib/components/Tooltip/index.js.map +1 -1
- package/lib/components/Tooltip/private/constants.js +1 -2
- package/lib/components/Tooltip/private/constants.js.map +1 -1
- package/lib/components/Tooltip/renderTooltip.js +4 -6
- package/lib/components/Tooltip/renderTooltip.js.map +1 -1
- package/lib/components/Tooltip/useTooltip.js +33 -35
- package/lib/components/Tooltip/useTooltip.js.map +1 -1
- package/lib/components/Tooltip/useTooltipStyles.js +6 -6
- package/lib/components/Tooltip/useTooltipStyles.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Tooltip.js +5 -4
- package/lib-commonjs/Tooltip.js.map +1 -1
- package/lib-commonjs/components/Tooltip/Tooltip.js +20 -21
- package/lib-commonjs/components/Tooltip/Tooltip.js.map +1 -1
- package/lib-commonjs/components/Tooltip/Tooltip.types.js +5 -2
- package/lib-commonjs/components/Tooltip/Tooltip.types.js.map +1 -1
- package/lib-commonjs/components/Tooltip/index.js +9 -8
- package/lib-commonjs/components/Tooltip/index.js.map +1 -1
- package/lib-commonjs/components/Tooltip/private/constants.js +17 -16
- package/lib-commonjs/components/Tooltip/private/constants.js.map +1 -1
- package/lib-commonjs/components/Tooltip/renderTooltip.js +19 -24
- package/lib-commonjs/components/Tooltip/renderTooltip.js.map +1 -1
- package/lib-commonjs/components/Tooltip/useTooltip.js +189 -194
- package/lib-commonjs/components/Tooltip/useTooltip.js.map +1 -1
- package/lib-commonjs/components/Tooltip/useTooltipStyles.js +200 -92
- package/lib-commonjs/components/Tooltip/useTooltipStyles.js.map +1 -1
- package/lib-commonjs/index.js +16 -33
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +10 -10
@@ -1,203 +1,198 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
5
4
|
});
|
6
|
-
exports
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
const
|
11
|
-
const
|
12
|
-
const
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
const
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
targetDocument
|
27
|
-
} = react_shared_contexts_1.useFluent_unstable();
|
28
|
-
const [setDelayTimeout, clearDelayTimeout] = react_utilities_1.useTimeout();
|
29
|
-
const {
|
30
|
-
appearance = 'normal',
|
31
|
-
children,
|
32
|
-
content,
|
33
|
-
withArrow = false,
|
34
|
-
positioning = 'above',
|
35
|
-
onVisibleChange,
|
36
|
-
relationship,
|
37
|
-
showDelay = 250,
|
38
|
-
hideDelay = 250,
|
39
|
-
mountNode
|
40
|
-
} = props;
|
41
|
-
const [visible, setVisibleInternal] = react_utilities_1.useControllableState({
|
42
|
-
state: props.visible,
|
43
|
-
initialState: false
|
44
|
-
});
|
45
|
-
const setVisible = React.useCallback((newVisible, ev) => {
|
46
|
-
clearDelayTimeout();
|
47
|
-
setVisibleInternal(oldVisible => {
|
48
|
-
if (newVisible !== oldVisible) {
|
49
|
-
onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(ev, {
|
50
|
-
visible: newVisible
|
51
|
-
});
|
52
|
-
}
|
53
|
-
return newVisible;
|
5
|
+
Object.defineProperty(exports, "useTooltip_unstable", {
|
6
|
+
enumerable: true,
|
7
|
+
get: ()=>useTooltip_unstable
|
8
|
+
});
|
9
|
+
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
10
|
+
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
11
|
+
const _reactPositioning = require("@fluentui/react-positioning");
|
12
|
+
const _reactSharedContexts = require("@fluentui/react-shared-contexts");
|
13
|
+
const _reactUtilities = require("@fluentui/react-utilities");
|
14
|
+
const _constants = require("./private/constants");
|
15
|
+
const _keyboardKeys = require("@fluentui/keyboard-keys");
|
16
|
+
const useTooltip_unstable = (props)=>{
|
17
|
+
const context = (0, _reactSharedContexts.useTooltipVisibility_unstable)();
|
18
|
+
const isServerSideRender = (0, _reactUtilities.useIsSSR)();
|
19
|
+
const { targetDocument } = (0, _reactSharedContexts.useFluent_unstable)();
|
20
|
+
const [setDelayTimeout, clearDelayTimeout] = (0, _reactUtilities.useTimeout)();
|
21
|
+
const { appearance ="normal" , children , content , withArrow =false , positioning ="above" , onVisibleChange , relationship , showDelay =250 , hideDelay =250 , mountNode } = props;
|
22
|
+
const [visible, setVisibleInternal] = (0, _reactUtilities.useControllableState)({
|
23
|
+
state: props.visible,
|
24
|
+
initialState: false
|
54
25
|
});
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
appearance,
|
65
|
-
mountNode,
|
66
|
-
// Slots
|
67
|
-
components: {
|
68
|
-
content: 'div'
|
69
|
-
},
|
70
|
-
content: react_utilities_1.resolveShorthand(content, {
|
71
|
-
defaultProps: {
|
72
|
-
role: 'tooltip'
|
73
|
-
},
|
74
|
-
required: true
|
75
|
-
})
|
76
|
-
};
|
77
|
-
state.content.id = react_utilities_1.useId('tooltip-', state.content.id);
|
78
|
-
const positioningOptions = {
|
79
|
-
enabled: state.visible,
|
80
|
-
arrowPadding: 2 * constants_1.tooltipBorderRadius,
|
81
|
-
position: 'above',
|
82
|
-
align: 'center',
|
83
|
-
offset: 4,
|
84
|
-
...react_positioning_1.resolvePositioningShorthand(state.positioning)
|
85
|
-
};
|
86
|
-
if (state.withArrow) {
|
87
|
-
positioningOptions.offset = react_positioning_1.mergeArrowOffset(positioningOptions.offset, constants_1.arrowHeight);
|
88
|
-
}
|
89
|
-
const {
|
90
|
-
targetRef,
|
91
|
-
containerRef,
|
92
|
-
arrowRef
|
93
|
-
} = react_positioning_1.usePositioning(positioningOptions);
|
94
|
-
state.content.ref = react_utilities_1.useMergedRefs(state.content.ref, containerRef);
|
95
|
-
state.arrowRef = arrowRef;
|
96
|
-
// When this tooltip is visible, hide any other tooltips, and register it
|
97
|
-
// as the visibleTooltip with the TooltipContext.
|
98
|
-
// Also add a listener on document to hide the tooltip if Escape is pressed
|
99
|
-
react_utilities_1.useIsomorphicLayoutEffect(() => {
|
100
|
-
var _a;
|
101
|
-
if (visible) {
|
102
|
-
const thisTooltip = {
|
103
|
-
hide: () => setVisible(false)
|
104
|
-
};
|
105
|
-
(_a = context.visibleTooltip) === null || _a === void 0 ? void 0 : _a.hide();
|
106
|
-
context.visibleTooltip = thisTooltip;
|
107
|
-
const onDocumentKeyDown = ev => {
|
108
|
-
if (ev.key === keyboard_keys_1.Escape) {
|
109
|
-
thisTooltip.hide();
|
110
|
-
// stop propagation to avoid conflicting with other elements that listen for `Escape`
|
111
|
-
// e,g: Dialog, Popover, Menu
|
112
|
-
ev.stopPropagation();
|
113
|
-
}
|
114
|
-
};
|
115
|
-
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('keydown', onDocumentKeyDown, {
|
116
|
-
// As this event is added at targeted document,
|
117
|
-
// we need to capture the event to be sure keydown handling from tooltip happens first
|
118
|
-
capture: true
|
119
|
-
});
|
120
|
-
return () => {
|
121
|
-
if (context.visibleTooltip === thisTooltip) {
|
122
|
-
context.visibleTooltip = undefined;
|
123
|
-
}
|
124
|
-
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('keydown', onDocumentKeyDown, {
|
125
|
-
capture: true
|
26
|
+
const setVisible = _react.useCallback((newVisible, ev)=>{
|
27
|
+
clearDelayTimeout();
|
28
|
+
setVisibleInternal((oldVisible)=>{
|
29
|
+
if (newVisible !== oldVisible) {
|
30
|
+
onVisibleChange?.(ev, {
|
31
|
+
visible: newVisible
|
32
|
+
});
|
33
|
+
}
|
34
|
+
return newVisible;
|
126
35
|
});
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
36
|
+
}, [
|
37
|
+
clearDelayTimeout,
|
38
|
+
setVisibleInternal,
|
39
|
+
onVisibleChange
|
40
|
+
]);
|
41
|
+
const state = {
|
42
|
+
withArrow,
|
43
|
+
positioning,
|
44
|
+
showDelay,
|
45
|
+
hideDelay,
|
46
|
+
relationship,
|
47
|
+
visible,
|
48
|
+
shouldRenderTooltip: visible,
|
49
|
+
appearance,
|
50
|
+
mountNode,
|
51
|
+
// Slots
|
52
|
+
components: {
|
53
|
+
content: "div"
|
54
|
+
},
|
55
|
+
content: (0, _reactUtilities.resolveShorthand)(content, {
|
56
|
+
defaultProps: {
|
57
|
+
role: "tooltip"
|
58
|
+
},
|
59
|
+
required: true
|
60
|
+
})
|
61
|
+
};
|
62
|
+
state.content.id = (0, _reactUtilities.useId)("tooltip-", state.content.id);
|
63
|
+
const positioningOptions = {
|
64
|
+
enabled: state.visible,
|
65
|
+
arrowPadding: 2 * _constants.tooltipBorderRadius,
|
66
|
+
position: "above",
|
67
|
+
align: "center",
|
68
|
+
offset: 4,
|
69
|
+
...(0, _reactPositioning.resolvePositioningShorthand)(state.positioning)
|
70
|
+
};
|
71
|
+
if (state.withArrow) {
|
72
|
+
positioningOptions.offset = (0, _reactPositioning.mergeArrowOffset)(positioningOptions.offset, _constants.arrowHeight);
|
141
73
|
}
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
74
|
+
const { targetRef , containerRef , arrowRef } = (0, _reactPositioning.usePositioning)(positioningOptions);
|
75
|
+
state.content.ref = (0, _reactUtilities.useMergedRefs)(state.content.ref, containerRef);
|
76
|
+
state.arrowRef = arrowRef;
|
77
|
+
// When this tooltip is visible, hide any other tooltips, and register it
|
78
|
+
// as the visibleTooltip with the TooltipContext.
|
79
|
+
// Also add a listener on document to hide the tooltip if Escape is pressed
|
80
|
+
(0, _reactUtilities.useIsomorphicLayoutEffect)(()=>{
|
81
|
+
if (visible) {
|
82
|
+
const thisTooltip = {
|
83
|
+
hide: ()=>setVisible(false)
|
84
|
+
};
|
85
|
+
context.visibleTooltip?.hide();
|
86
|
+
context.visibleTooltip = thisTooltip;
|
87
|
+
const onDocumentKeyDown = (ev)=>{
|
88
|
+
if (ev.key === _keyboardKeys.Escape) {
|
89
|
+
thisTooltip.hide();
|
90
|
+
// stop propagation to avoid conflicting with other elements that listen for `Escape`
|
91
|
+
// e,g: Dialog, Popover, Menu
|
92
|
+
ev.stopPropagation();
|
93
|
+
}
|
94
|
+
};
|
95
|
+
targetDocument?.addEventListener("keydown", onDocumentKeyDown, {
|
96
|
+
// As this event is added at targeted document,
|
97
|
+
// we need to capture the event to be sure keydown handling from tooltip happens first
|
98
|
+
capture: true
|
99
|
+
});
|
100
|
+
return ()=>{
|
101
|
+
if (context.visibleTooltip === thisTooltip) {
|
102
|
+
context.visibleTooltip = undefined;
|
103
|
+
}
|
104
|
+
targetDocument?.removeEventListener("keydown", onDocumentKeyDown, {
|
105
|
+
capture: true
|
106
|
+
});
|
107
|
+
};
|
108
|
+
}
|
109
|
+
}, [
|
110
|
+
context,
|
111
|
+
targetDocument,
|
112
|
+
visible,
|
113
|
+
setVisible
|
114
|
+
]);
|
115
|
+
// The focused element gets a blur event when the document loses focus
|
116
|
+
// (e.g. switching tabs in the browser), but we don't want to show the
|
117
|
+
// tooltip again when the document gets focus back. Handle this case by
|
118
|
+
// checking if the blurred element is still the document's activeElement.
|
119
|
+
// See https://github.com/microsoft/fluentui/issues/13541
|
120
|
+
const ignoreNextFocusEventRef = _react.useRef(false);
|
121
|
+
// Listener for onPointerEnter and onFocus on the trigger element
|
122
|
+
const onEnterTrigger = _react.useCallback((ev)=>{
|
123
|
+
if (ev.type === "focus" && ignoreNextFocusEventRef.current) {
|
124
|
+
ignoreNextFocusEventRef.current = false;
|
125
|
+
return;
|
126
|
+
}
|
127
|
+
// Show immediately if another tooltip is already visible
|
128
|
+
const delay = context.visibleTooltip ? 0 : state.showDelay;
|
129
|
+
setDelayTimeout(()=>{
|
130
|
+
setVisible(true, ev);
|
131
|
+
}, delay);
|
132
|
+
ev.persist(); // Persist the event since the setVisible call will happen asynchronously
|
133
|
+
}, [
|
134
|
+
setDelayTimeout,
|
135
|
+
setVisible,
|
136
|
+
state.showDelay,
|
137
|
+
context
|
138
|
+
]);
|
139
|
+
// Listener for onPointerLeave and onBlur on the trigger element
|
140
|
+
const onLeaveTrigger = _react.useCallback((ev)=>{
|
141
|
+
let delay = state.hideDelay;
|
142
|
+
if (ev.type === "blur") {
|
143
|
+
// Hide immediately when losing focus
|
144
|
+
delay = 0;
|
145
|
+
ignoreNextFocusEventRef.current = targetDocument?.activeElement === ev.target;
|
146
|
+
}
|
147
|
+
setDelayTimeout(()=>{
|
148
|
+
setVisible(false, ev);
|
149
|
+
}, delay);
|
150
|
+
ev.persist(); // Persist the event since the setVisible call will happen asynchronously
|
151
|
+
}, [
|
152
|
+
setDelayTimeout,
|
153
|
+
setVisible,
|
154
|
+
state.hideDelay,
|
155
|
+
targetDocument
|
156
|
+
]);
|
157
|
+
// Cancel the hide timer when the mouse or focus enters the tooltip, and restart it when the mouse or focus leaves.
|
158
|
+
// This keeps the tooltip visible when the mouse is moved over it, or it has focus within.
|
159
|
+
state.content.onPointerEnter = (0, _reactUtilities.mergeCallbacks)(state.content.onPointerEnter, clearDelayTimeout);
|
160
|
+
state.content.onPointerLeave = (0, _reactUtilities.mergeCallbacks)(state.content.onPointerLeave, onLeaveTrigger);
|
161
|
+
state.content.onFocus = (0, _reactUtilities.mergeCallbacks)(state.content.onFocus, clearDelayTimeout);
|
162
|
+
state.content.onBlur = (0, _reactUtilities.mergeCallbacks)(state.content.onBlur, onLeaveTrigger);
|
163
|
+
const child = (0, _reactUtilities.getTriggerChild)(children);
|
164
|
+
const triggerAriaProps = {};
|
165
|
+
if (relationship === "label") {
|
166
|
+
// aria-label only works if the content is a string. Otherwise, need to use aria-labelledby.
|
167
|
+
if (typeof state.content.children === "string") {
|
168
|
+
triggerAriaProps["aria-label"] = state.content.children;
|
169
|
+
} else {
|
170
|
+
triggerAriaProps["aria-labelledby"] = state.content.id;
|
171
|
+
// Always render the tooltip even if hidden, so that aria-labelledby refers to a valid element
|
172
|
+
state.shouldRenderTooltip = true;
|
173
|
+
}
|
174
|
+
} else if (relationship === "description") {
|
175
|
+
triggerAriaProps["aria-describedby"] = state.content.id;
|
176
|
+
// Always render the tooltip even if hidden, so that aria-describedby refers to a valid element
|
177
|
+
state.shouldRenderTooltip = true;
|
156
178
|
}
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
ev.persist(); // Persist the event since the setVisible call will happen asynchronously
|
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.
|
163
|
-
// This keeps the tooltip visible when the mouse is moved over it, or it has focus within.
|
164
|
-
state.content.onPointerEnter = react_utilities_1.mergeCallbacks(state.content.onPointerEnter, clearDelayTimeout);
|
165
|
-
state.content.onPointerLeave = react_utilities_1.mergeCallbacks(state.content.onPointerLeave, onLeaveTrigger);
|
166
|
-
state.content.onFocus = react_utilities_1.mergeCallbacks(state.content.onFocus, clearDelayTimeout);
|
167
|
-
state.content.onBlur = react_utilities_1.mergeCallbacks(state.content.onBlur, onLeaveTrigger);
|
168
|
-
const child = react_utilities_1.getTriggerChild(children);
|
169
|
-
const triggerAriaProps = {};
|
170
|
-
if (relationship === 'label') {
|
171
|
-
// aria-label only works if the content is a string. Otherwise, need to use aria-labelledby.
|
172
|
-
if (typeof state.content.children === 'string') {
|
173
|
-
triggerAriaProps['aria-label'] = state.content.children;
|
174
|
-
} else {
|
175
|
-
triggerAriaProps['aria-labelledby'] = state.content.id;
|
176
|
-
// Always render the tooltip even if hidden, so that aria-labelledby refers to a valid element
|
177
|
-
state.shouldRenderTooltip = true;
|
179
|
+
// Don't render the Tooltip in SSR to avoid hydration errors
|
180
|
+
if (isServerSideRender) {
|
181
|
+
state.shouldRenderTooltip = false;
|
178
182
|
}
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
ref: positioningOptions.target === undefined ? childTargetRef : child === null || child === void 0 ? void 0 : child.ref,
|
195
|
-
onPointerEnter: react_utilities_1.useEventCallback(react_utilities_1.mergeCallbacks((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onPointerEnter, onEnterTrigger)),
|
196
|
-
onPointerLeave: react_utilities_1.useEventCallback(react_utilities_1.mergeCallbacks((_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.onPointerLeave, onLeaveTrigger)),
|
197
|
-
onFocus: react_utilities_1.useEventCallback(react_utilities_1.mergeCallbacks((_c = child === null || child === void 0 ? void 0 : child.props) === null || _c === void 0 ? void 0 : _c.onFocus, onEnterTrigger)),
|
198
|
-
onBlur: react_utilities_1.useEventCallback(react_utilities_1.mergeCallbacks((_d = child === null || child === void 0 ? void 0 : child.props) === null || _d === void 0 ? void 0 : _d.onBlur, onLeaveTrigger))
|
199
|
-
});
|
200
|
-
return state;
|
201
|
-
};
|
202
|
-
exports.useTooltip_unstable = useTooltip_unstable;
|
183
|
+
const childTargetRef = (0, _reactUtilities.useMergedRefs)(child?.ref, targetRef);
|
184
|
+
// Apply the trigger props to the child, either by calling the render function, or cloning with the new props
|
185
|
+
state.children = (0, _reactUtilities.applyTriggerPropsToChildren)(children, {
|
186
|
+
...triggerAriaProps,
|
187
|
+
...child?.props,
|
188
|
+
// If the target prop is not provided, attach targetRef to the trigger element's ref prop
|
189
|
+
ref: positioningOptions.target === undefined ? childTargetRef : child?.ref,
|
190
|
+
onPointerEnter: (0, _reactUtilities.useEventCallback)((0, _reactUtilities.mergeCallbacks)(child?.props?.onPointerEnter, onEnterTrigger)),
|
191
|
+
onPointerLeave: (0, _reactUtilities.useEventCallback)((0, _reactUtilities.mergeCallbacks)(child?.props?.onPointerLeave, onLeaveTrigger)),
|
192
|
+
onFocus: (0, _reactUtilities.useEventCallback)((0, _reactUtilities.mergeCallbacks)(child?.props?.onFocus, onEnterTrigger)),
|
193
|
+
onBlur: (0, _reactUtilities.useEventCallback)((0, _reactUtilities.mergeCallbacks)(child?.props?.onBlur, onLeaveTrigger))
|
194
|
+
});
|
195
|
+
return state;
|
196
|
+
}; //# sourceMappingURL=useTooltip.js.map
|
197
|
+
|
203
198
|
//# sourceMappingURL=useTooltip.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["React","require","react_positioning_1","react_shared_contexts_1","react_utilities_1","constants_1","keyboard_keys_1","useTooltip_unstable","props","context","useTooltipVisibility_unstable","isServerSideRender","useIsSSR","targetDocument","useFluent_unstable","setDelayTimeout","clearDelayTimeout","useTimeout","appearance","children","content","withArrow","positioning","onVisibleChange","relationship","showDelay","hideDelay","mountNode","visible","setVisibleInternal","useControllableState","state","initialState","setVisible","useCallback","newVisible","ev","oldVisible","shouldRenderTooltip","components","resolveShorthand","defaultProps","role","required","id","useId","positioningOptions","enabled","arrowPadding","tooltipBorderRadius","position","align","offset","resolvePositioningShorthand","mergeArrowOffset","arrowHeight","targetRef","containerRef","arrowRef","usePositioning","ref","useMergedRefs","useIsomorphicLayoutEffect","thisTooltip","hide","_a","visibleTooltip","onDocumentKeyDown","key","Escape","stopPropagation","addEventListener","capture","undefined","removeEventListener","ignoreNextFocusEventRef","useRef","onEnterTrigger","type","current","delay","persist","onLeaveTrigger","activeElement","target","onPointerEnter","mergeCallbacks","onPointerLeave","onFocus","onBlur","child","getTriggerChild","triggerAriaProps","childTargetRef","applyTriggerPropsToChildren","useEventCallback","_b","_c","_d","exports"],"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"],"mappings":"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"}
|
1
|
+
{"version":3,"sources":["../../../lib/components/Tooltip/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, resolveShorthand, useControllableState, useId, useIsomorphicLayoutEffect, useIsSSR, useMergedRefs, useTimeout, getTriggerChild, mergeCallbacks, useEventCallback } 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 */\nexport const useTooltip_unstable = props => {\n const context = useTooltipVisibility();\n const isServerSideRender = useIsSSR();\n const {\n targetDocument\n } = useFluent();\n const [setDelayTimeout, clearDelayTimeout] = useTimeout();\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 const [visible, setVisibleInternal] = useControllableState({\n state: props.visible,\n initialState: false\n });\n const setVisible = React.useCallback((newVisible, ev) => {\n clearDelayTimeout();\n setVisibleInternal(oldVisible => {\n if (newVisible !== oldVisible) {\n onVisibleChange?.(ev, {\n visible: newVisible\n });\n }\n return newVisible;\n });\n }, [clearDelayTimeout, setVisibleInternal, onVisibleChange]);\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: resolveShorthand(content, {\n defaultProps: {\n role: \"tooltip\"\n },\n required: true\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 {\n targetRef,\n containerRef,\n arrowRef\n } = 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 const thisTooltip = {\n hide: () => setVisible(false)\n };\n context.visibleTooltip?.hide();\n context.visibleTooltip = thisTooltip;\n const onDocumentKeyDown = ev => {\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 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?.removeEventListener(\"keydown\", onDocumentKeyDown, {\n capture: true\n });\n };\n }\n }, [context, targetDocument, visible, setVisible]);\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(true, ev);\n }, delay);\n ev.persist(); // Persist the event since the setVisible call will happen asynchronously\n }, [setDelayTimeout, setVisible, state.showDelay, context]);\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?.activeElement === ev.target;\n }\n setDelayTimeout(() => {\n setVisible(false, ev);\n }, delay);\n ev.persist(); // Persist the event since the setVisible call will happen asynchronously\n }, [setDelayTimeout, setVisible, state.hideDelay, targetDocument]);\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?.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?.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 return state;\n};\n//# sourceMappingURL=useTooltip.js.map"],"names":["useTooltip_unstable","props","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","newVisible","ev","oldVisible","shouldRenderTooltip","components","resolveShorthand","defaultProps","role","required","id","useId","positioningOptions","enabled","arrowPadding","tooltipBorderRadius","position","align","offset","resolvePositioningShorthand","mergeArrowOffset","arrowHeight","targetRef","containerRef","arrowRef","usePositioning","ref","useMergedRefs","useIsomorphicLayoutEffect","thisTooltip","hide","visibleTooltip","onDocumentKeyDown","key","Escape","stopPropagation","addEventListener","capture","undefined","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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"}
|