@fluentui/react-tooltip 0.0.0-nightly0e0cf06c3420211029.1 → 0.0.0-nightly3082edf34720220208.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +278 -22
- package/CHANGELOG.md +64 -14
- package/dist/react-tooltip.d.ts +29 -46
- package/lib/components/Tooltip/Tooltip.d.ts +3 -2
- package/lib/components/Tooltip/Tooltip.js +9 -9
- package/lib/components/Tooltip/Tooltip.js.map +1 -1
- package/lib/components/Tooltip/Tooltip.types.d.ts +20 -37
- package/lib/components/Tooltip/index.d.ts +1 -1
- package/lib/components/Tooltip/index.js +1 -1
- package/lib/components/Tooltip/index.js.map +1 -1
- package/lib/components/Tooltip/private/constants.d.ts +12 -0
- package/lib/components/Tooltip/private/constants.js +14 -0
- package/lib/components/Tooltip/private/constants.js.map +1 -0
- package/lib/components/Tooltip/renderTooltip.d.ts +1 -1
- package/lib/components/Tooltip/renderTooltip.js +8 -8
- package/lib/components/Tooltip/renderTooltip.js.map +1 -1
- package/lib/components/Tooltip/useTooltip.d.ts +3 -6
- package/lib/components/Tooltip/useTooltip.js +97 -119
- package/lib/components/Tooltip/useTooltip.js.map +1 -1
- package/lib/components/Tooltip/useTooltipStyles.d.ts +2 -1
- package/lib/components/Tooltip/useTooltipStyles.js +50 -23
- package/lib/components/Tooltip/useTooltipStyles.js.map +1 -1
- package/lib-commonjs/Tooltip.js +1 -1
- package/lib-commonjs/components/Tooltip/Tooltip.d.ts +3 -2
- package/lib-commonjs/components/Tooltip/Tooltip.js +11 -10
- package/lib-commonjs/components/Tooltip/Tooltip.js.map +1 -1
- package/lib-commonjs/components/Tooltip/Tooltip.types.d.ts +20 -37
- package/lib-commonjs/components/Tooltip/index.d.ts +1 -1
- package/lib-commonjs/components/Tooltip/index.js +2 -10
- package/lib-commonjs/components/Tooltip/index.js.map +1 -1
- package/lib-commonjs/components/Tooltip/private/constants.d.ts +12 -0
- package/lib-commonjs/components/Tooltip/private/constants.js +21 -0
- package/lib-commonjs/components/Tooltip/private/constants.js.map +1 -0
- package/lib-commonjs/components/Tooltip/renderTooltip.d.ts +1 -1
- package/lib-commonjs/components/Tooltip/renderTooltip.js +13 -14
- package/lib-commonjs/components/Tooltip/renderTooltip.js.map +1 -1
- package/lib-commonjs/components/Tooltip/useTooltip.d.ts +3 -6
- package/lib-commonjs/components/Tooltip/useTooltip.js +105 -127
- package/lib-commonjs/components/Tooltip/useTooltip.js.map +1 -1
- package/lib-commonjs/components/Tooltip/useTooltipStyles.d.ts +2 -1
- package/lib-commonjs/components/Tooltip/useTooltipStyles.js +56 -26
- package/lib-commonjs/components/Tooltip/useTooltipStyles.js.map +1 -1
- package/lib-commonjs/index.js +1 -1
- package/package.json +12 -14
- package/lib/common/isConformant.d.ts +0 -4
- package/lib/common/isConformant.js +0 -11
- package/lib/common/isConformant.js.map +0 -1
- package/lib-commonjs/common/isConformant.d.ts +0 -4
- package/lib-commonjs/common/isConformant.js +0 -22
- package/lib-commonjs/common/isConformant.js.map +0 -1
@@ -1,41 +1,24 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import type { PositioningShorthand } from '@fluentui/react-positioning';
|
3
|
-
import type { ComponentProps, ComponentState,
|
3
|
+
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
4
4
|
/**
|
5
5
|
* Slot properties for Tooltip
|
6
6
|
*/
|
7
7
|
export declare type TooltipSlots = {
|
8
|
-
|
9
|
-
/**
|
10
|
-
* The child is the element that triggers the Tooltip. It will have additional properties added,
|
11
|
-
* including events and aria properties.
|
12
|
-
* Alternatively, children can be a render function that takes the props and adds
|
13
|
-
* them to the appropriate elements.
|
14
|
-
*/
|
15
|
-
children?: (React.ReactElement<React.HTMLAttributes<HTMLElement>> & {
|
16
|
-
ref?: React.Ref<unknown>;
|
17
|
-
}) | ((props: TooltipTriggerProps) => React.ReactNode) | null;
|
18
|
-
};
|
8
|
+
content: NonNullable<Slot<'div'>>;
|
19
9
|
};
|
20
10
|
/**
|
21
11
|
* Properties and state for Tooltip
|
22
12
|
*/
|
23
13
|
export declare type TooltipCommons = {
|
24
14
|
/**
|
25
|
-
*
|
26
|
-
*
|
27
|
-
|
28
|
-
appearance?: 'inverted';
|
29
|
-
/**
|
30
|
-
* The content displayed inside the tooltip.
|
31
|
-
*/
|
32
|
-
content: React.ReactNode;
|
33
|
-
/**
|
34
|
-
* Color variant with inverted colors
|
15
|
+
* The tooltip's visual appearance.
|
16
|
+
* * `normal` - Uses the theme's background and text colors.
|
17
|
+
* * `inverted` - Higher contrast variant that uses the theme's inverted colors.
|
35
18
|
*
|
36
|
-
* @defaultvalue
|
19
|
+
* @defaultvalue normal
|
37
20
|
*/
|
38
|
-
|
21
|
+
appearance?: 'normal' | 'inverted';
|
39
22
|
/**
|
40
23
|
* Render an arrow pointing to the target element
|
41
24
|
*
|
@@ -62,15 +45,15 @@ export declare type TooltipCommons = {
|
|
62
45
|
*/
|
63
46
|
onVisibleChange?: (event: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement> | undefined, data: OnVisibleChangeData) => void;
|
64
47
|
/**
|
65
|
-
* Specifies
|
66
|
-
* * `label` - Set aria-label to the tooltip's content. Requires content to be a string; if not, uses `labelledby`.
|
67
|
-
* * `labelledby` - Set aria-labelledby to the tooltip's id. The id is generated if not provided.
|
68
|
-
* * `describedby` - Set aria-describedby to the tooltip's id. The id is generated if not provided.
|
69
|
-
* * null - Do not set any aria attributes on the trigger element.
|
48
|
+
* (Required) Specifies whether this tooltip is acting as the description or label of its trigger element.
|
70
49
|
*
|
71
|
-
*
|
50
|
+
* * `label` - The tooltip sets the trigger's aria-label or aria-labelledby attribute. This is useful for buttons
|
51
|
+
* displaying only an icon, for example.
|
52
|
+
* * `description` - The tooltip sets the trigger's aria-description or aria-describedby attribute.
|
53
|
+
* * `inaccessible` - No aria attributes are set on the trigger. This makes the tooltip's content inaccessible to
|
54
|
+
* screen readers, and should only be used if the tooltip's text is available by some other means.
|
72
55
|
*/
|
73
|
-
|
56
|
+
relationship: 'label' | 'description' | 'inaccessible';
|
74
57
|
/**
|
75
58
|
* Delay before the tooltip is shown, in milliseconds.
|
76
59
|
*
|
@@ -99,18 +82,18 @@ export declare type OnVisibleChangeData = {
|
|
99
82
|
/**
|
100
83
|
* Properties for Tooltip
|
101
84
|
*/
|
102
|
-
export declare type TooltipProps = ComponentProps<TooltipSlots> & Partial<Omit<TooltipCommons, '
|
85
|
+
export declare type TooltipProps = ComponentProps<TooltipSlots> & Partial<Omit<TooltipCommons, 'relationship'>> & Pick<TooltipCommons, 'relationship'> & {
|
86
|
+
children?: (React.ReactElement & {
|
87
|
+
ref?: React.Ref<unknown>;
|
88
|
+
}) | ((props: TooltipTriggerProps) => React.ReactElement | null) | null;
|
89
|
+
};
|
103
90
|
/**
|
104
91
|
* State used in rendering Tooltip
|
105
92
|
*/
|
106
93
|
export declare type TooltipState = ComponentState<TooltipSlots> & TooltipCommons & {
|
94
|
+
children?: React.ReactElement | null;
|
107
95
|
/**
|
108
96
|
* Whether the tooltip should be rendered to the DOM.
|
109
|
-
*
|
110
|
-
* Normally the tooltip will only be rendered when visible. However, if
|
111
|
-
* triggerAriaAttribute is labelledby or describedby, the tooltip will
|
112
|
-
* always be rendered even when hidden so that those aria attributes
|
113
|
-
* to always refer to a valid DOM element.
|
114
97
|
*/
|
115
98
|
shouldRenderTooltip?: boolean;
|
116
99
|
/**
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tooltip/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tooltip/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC"}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
/**
|
2
|
+
* The height of the tooltip's arrow in pixels.
|
3
|
+
*/
|
4
|
+
export declare const arrowHeight = 6;
|
5
|
+
/**
|
6
|
+
* The default value of the tooltip's border radius (borderRadiusMedium).
|
7
|
+
*
|
8
|
+
* Unfortunately, Popper requires it to be specified as a variable instead of using CSS.
|
9
|
+
* While we could use getComputedStyle, that adds a performance penalty for something that
|
10
|
+
* will likely never change.
|
11
|
+
*/
|
12
|
+
export declare const tooltipBorderRadius = 4;
|
@@ -0,0 +1,14 @@
|
|
1
|
+
/**
|
2
|
+
* The height of the tooltip's arrow in pixels.
|
3
|
+
*/
|
4
|
+
export const arrowHeight = 6;
|
5
|
+
/**
|
6
|
+
* The default value of the tooltip's border radius (borderRadiusMedium).
|
7
|
+
*
|
8
|
+
* Unfortunately, Popper requires it to be specified as a variable instead of using CSS.
|
9
|
+
* While we could use getComputedStyle, that adds a performance penalty for something that
|
10
|
+
* will likely never change.
|
11
|
+
*/
|
12
|
+
|
13
|
+
export const tooltipBorderRadius = 4;
|
14
|
+
//# sourceMappingURL=constants.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Tooltip/private/constants.ts"],"names":[],"mappings":"AAAA;;AAEG;AACH,OAAO,MAAM,WAAW,GAAG,CAApB;AAEP;;;;;;AAMG;;AACH,OAAO,MAAM,mBAAmB,GAAG,CAA5B","sourceRoot":""}
|
@@ -1,4 +1,3 @@
|
|
1
|
-
import { __assign } from "tslib";
|
2
1
|
import * as React from 'react';
|
3
2
|
import { Portal } from '@fluentui/react-portal';
|
4
3
|
import { getSlots } from '@fluentui/react-utilities';
|
@@ -6,14 +5,15 @@ import { getSlots } from '@fluentui/react-utilities';
|
|
6
5
|
* Render the final JSX of Tooltip
|
7
6
|
*/
|
8
7
|
|
9
|
-
export
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, state.
|
8
|
+
export const renderTooltip_unstable = state => {
|
9
|
+
const {
|
10
|
+
slots,
|
11
|
+
slotProps
|
12
|
+
} = getSlots(state);
|
13
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, state.children, state.shouldRenderTooltip && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(slots.content, { ...slotProps.content
|
14
|
+
}, state.withArrow && /*#__PURE__*/React.createElement("div", {
|
15
15
|
ref: state.arrowRef,
|
16
16
|
className: state.arrowClassName
|
17
|
-
}), state.content)));
|
17
|
+
}), state.content.children)));
|
18
18
|
};
|
19
19
|
//# sourceMappingURL=renderTooltip.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Tooltip/renderTooltip.tsx"],"names":[],"mappings":"
|
1
|
+
{"version":3,"sources":["../../../src/components/Tooltip/renderTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,MAAT,QAAuB,wBAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAwB;AAC5D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAe,KAAf,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACG,KAAK,CAAC,QADT,EAEG,KAAK,CAAC,mBAAN,iBACC,KAAA,CAAA,aAAA,CAAC,MAAD,EAAO,IAAP,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;AAAf,GAAd,EACG,KAAK,CAAC,SAAN,iBAAmB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,GAAG,EAAE,KAAK,CAAC,QAAhB;AAA0B,IAAA,SAAS,EAAE,KAAK,CAAC;AAA3C,GAAA,CADtB,EAEG,KAAK,CAAC,OAAN,CAAc,QAFjB,CADF,CAHJ,CADF;AAaD,CAhBM","sourceRoot":""}
|
@@ -1,13 +1,10 @@
|
|
1
|
-
import * as React from 'react';
|
2
1
|
import type { TooltipProps, TooltipState } from './Tooltip.types';
|
3
2
|
/**
|
4
3
|
* Create the state required to render Tooltip.
|
5
4
|
*
|
6
|
-
* The returned state can be modified with hooks such as
|
7
|
-
* before being passed to
|
5
|
+
* The returned state can be modified with hooks such as useTooltipStyles_unstable,
|
6
|
+
* before being passed to renderTooltip_unstable.
|
8
7
|
*
|
9
8
|
* @param props - props from this instance of Tooltip
|
10
|
-
* @param ref - reference to root HTMLElement of Tooltip
|
11
|
-
* @param defaultProps - (optional) default prop values provided by the implementing type
|
12
9
|
*/
|
13
|
-
export declare const
|
10
|
+
export declare const useTooltip_unstable: (props: TooltipProps) => TooltipState;
|
@@ -1,57 +1,44 @@
|
|
1
|
-
import { __assign } from "tslib";
|
2
1
|
import * as React from 'react';
|
3
2
|
import { mergeArrowOffset, resolvePositioningShorthand, usePopper } from '@fluentui/react-positioning';
|
4
3
|
import { TooltipContext, useFluent } from '@fluentui/react-shared-contexts';
|
5
|
-
import { applyTriggerPropsToChildren,
|
6
|
-
|
7
|
-
var tooltipBorderRadius = 4; // Update the root's borderRadius in useTooltipStyles.ts if this changes
|
8
|
-
|
9
|
-
var arrowHeight = 6; // Update the arrow's width/height in useTooltipStyles.ts if this changes
|
10
|
-
|
4
|
+
import { applyTriggerPropsToChildren, resolveShorthand, useControllableState, useMergedEventCallbacks, useId, useIsomorphicLayoutEffect, useIsSSR, useMergedRefs, useTimeout, getTriggerChild } from '@fluentui/react-utilities';
|
5
|
+
import { arrowHeight, tooltipBorderRadius } from './private/constants';
|
11
6
|
/**
|
12
7
|
* Create the state required to render Tooltip.
|
13
8
|
*
|
14
|
-
* The returned state can be modified with hooks such as
|
15
|
-
* before being passed to
|
9
|
+
* The returned state can be modified with hooks such as useTooltipStyles_unstable,
|
10
|
+
* before being passed to renderTooltip_unstable.
|
16
11
|
*
|
17
12
|
* @param props - props from this instance of Tooltip
|
18
|
-
* @param ref - reference to root HTMLElement of Tooltip
|
19
|
-
* @param defaultProps - (optional) default prop values provided by the implementing type
|
20
13
|
*/
|
21
14
|
|
22
|
-
export
|
15
|
+
export const useTooltip_unstable = props => {
|
23
16
|
var _a, _b, _c, _d;
|
24
17
|
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
hideDelay = _h === void 0 ? 250 : _h;
|
44
|
-
|
45
|
-
var _j = useControllableState({
|
18
|
+
const context = React.useContext(TooltipContext);
|
19
|
+
const isServerSideRender = useIsSSR();
|
20
|
+
const {
|
21
|
+
targetDocument
|
22
|
+
} = useFluent();
|
23
|
+
const [setDelayTimeout, clearDelayTimeout] = useTimeout();
|
24
|
+
const {
|
25
|
+
appearance,
|
26
|
+
children,
|
27
|
+
content,
|
28
|
+
withArrow,
|
29
|
+
positioning,
|
30
|
+
onVisibleChange,
|
31
|
+
relationship,
|
32
|
+
showDelay = 250,
|
33
|
+
hideDelay = 250
|
34
|
+
} = props;
|
35
|
+
const [visible, setVisibleInternal] = useControllableState({
|
46
36
|
state: props.visible,
|
47
37
|
initialState: false
|
48
|
-
})
|
49
|
-
|
50
|
-
setVisibleInternal = _j[1];
|
51
|
-
|
52
|
-
var setVisible = React.useCallback(function (newVisible, ev) {
|
38
|
+
});
|
39
|
+
const setVisible = React.useCallback((newVisible, ev) => {
|
53
40
|
clearDelayTimeout();
|
54
|
-
setVisibleInternal(
|
41
|
+
setVisibleInternal(oldVisible => {
|
55
42
|
if (newVisible !== oldVisible) {
|
56
43
|
onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(ev, {
|
57
44
|
visible: newVisible
|
@@ -61,76 +48,73 @@ export var useTooltip = function (props, ref) {
|
|
61
48
|
return newVisible;
|
62
49
|
});
|
63
50
|
}, [clearDelayTimeout, setVisibleInternal, onVisibleChange]);
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
triggerAriaAttribute: triggerAriaAttribute,
|
72
|
-
visible: visible,
|
51
|
+
const state = {
|
52
|
+
withArrow,
|
53
|
+
positioning,
|
54
|
+
showDelay,
|
55
|
+
hideDelay,
|
56
|
+
relationship,
|
57
|
+
visible,
|
73
58
|
shouldRenderTooltip: visible,
|
74
|
-
appearance
|
59
|
+
appearance,
|
75
60
|
// Slots
|
76
61
|
components: {
|
77
|
-
|
62
|
+
content: 'div'
|
78
63
|
},
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
})
|
64
|
+
content: resolveShorthand(content, {
|
65
|
+
defaultProps: {
|
66
|
+
role: 'tooltip'
|
67
|
+
},
|
68
|
+
required: true
|
69
|
+
})
|
85
70
|
};
|
86
|
-
|
87
|
-
|
71
|
+
state.content.id = useId('tooltip-', state.content.id);
|
72
|
+
const popperOptions = {
|
88
73
|
enabled: state.visible,
|
89
74
|
arrowPadding: 2 * tooltipBorderRadius,
|
90
75
|
position: 'above',
|
91
76
|
align: 'center',
|
92
|
-
offset: [0, 4]
|
93
|
-
|
77
|
+
offset: [0, 4],
|
78
|
+
...resolvePositioningShorthand(state.positioning)
|
79
|
+
};
|
94
80
|
|
95
81
|
if (state.withArrow) {
|
96
82
|
popperOptions.offset = mergeArrowOffset(popperOptions.offset, arrowHeight);
|
97
83
|
}
|
98
84
|
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
state.
|
85
|
+
const {
|
86
|
+
targetRef,
|
87
|
+
containerRef,
|
88
|
+
arrowRef
|
89
|
+
} = usePopper(popperOptions);
|
90
|
+
state.content.ref = useMergedRefs(state.content.ref, containerRef);
|
105
91
|
state.arrowRef = arrowRef; // When this tooltip is visible, hide any other tooltips, and register it
|
106
92
|
// as the visibleTooltip with the TooltipContext.
|
107
93
|
// Also add a listener on document to hide the tooltip if Escape is pressed
|
108
94
|
|
109
|
-
useIsomorphicLayoutEffect(
|
95
|
+
useIsomorphicLayoutEffect(() => {
|
110
96
|
var _a;
|
111
97
|
|
112
98
|
if (visible) {
|
113
|
-
|
114
|
-
hide:
|
115
|
-
return setVisible(false);
|
116
|
-
}
|
99
|
+
const thisTooltip = {
|
100
|
+
hide: () => setVisible(false)
|
117
101
|
};
|
118
102
|
(_a = context.visibleTooltip) === null || _a === void 0 ? void 0 : _a.hide();
|
119
|
-
context.visibleTooltip =
|
103
|
+
context.visibleTooltip = thisTooltip;
|
120
104
|
|
121
|
-
|
105
|
+
const onDocumentKeyDown = ev => {
|
122
106
|
if (ev.key === 'Escape' || ev.key === 'Esc') {
|
123
|
-
|
107
|
+
thisTooltip.hide();
|
124
108
|
}
|
125
109
|
};
|
126
110
|
|
127
|
-
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('keydown',
|
128
|
-
return
|
129
|
-
if (context.visibleTooltip ===
|
111
|
+
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('keydown', onDocumentKeyDown);
|
112
|
+
return () => {
|
113
|
+
if (context.visibleTooltip === thisTooltip) {
|
130
114
|
context.visibleTooltip = undefined;
|
131
115
|
}
|
132
116
|
|
133
|
-
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('keydown',
|
117
|
+
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('keydown', onDocumentKeyDown);
|
134
118
|
};
|
135
119
|
}
|
136
120
|
}, [context, targetDocument, visible, setVisible]); // The focused element gets a blur event when the document loses focus
|
@@ -139,24 +123,24 @@ export var useTooltip = function (props, ref) {
|
|
139
123
|
// checking if the blurred element is still the document's activeElement.
|
140
124
|
// See https://github.com/microsoft/fluentui/issues/13541
|
141
125
|
|
142
|
-
|
126
|
+
const ignoreNextFocusEventRef = React.useRef(false); // Listener for onPointerEnter and onFocus on the trigger element
|
143
127
|
|
144
|
-
|
128
|
+
const onEnterTrigger = React.useCallback(ev => {
|
145
129
|
if (ev.type === 'focus' && ignoreNextFocusEventRef.current) {
|
146
130
|
ignoreNextFocusEventRef.current = false;
|
147
131
|
return;
|
148
132
|
} // Show immediately if another tooltip is already visible
|
149
133
|
|
150
134
|
|
151
|
-
|
152
|
-
setDelayTimeout(
|
135
|
+
const delay = context.visibleTooltip ? 0 : state.showDelay;
|
136
|
+
setDelayTimeout(() => {
|
153
137
|
setVisible(true, ev);
|
154
138
|
}, delay);
|
155
139
|
ev.persist(); // Persist the event since the setVisible call will happen asynchronously
|
156
140
|
}, [setDelayTimeout, setVisible, state.showDelay, context]); // Listener for onPointerLeave and onBlur on the trigger element
|
157
141
|
|
158
|
-
|
159
|
-
|
142
|
+
const onLeaveTrigger = React.useCallback(ev => {
|
143
|
+
let delay = state.hideDelay;
|
160
144
|
|
161
145
|
if (ev.type === 'blur') {
|
162
146
|
// Hide immediately when losing focus
|
@@ -164,61 +148,55 @@ export var useTooltip = function (props, ref) {
|
|
164
148
|
ignoreNextFocusEventRef.current = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) === ev.target;
|
165
149
|
}
|
166
150
|
|
167
|
-
setDelayTimeout(
|
151
|
+
setDelayTimeout(() => {
|
168
152
|
setVisible(false, ev);
|
169
153
|
}, delay);
|
170
154
|
ev.persist(); // Persist the event since the setVisible call will happen asynchronously
|
171
155
|
}, [setDelayTimeout, setVisible, state.hideDelay, targetDocument]); // Cancel the hide timer when the pointer enters the tooltip, and restart it when the mouse leaves.
|
172
156
|
// This keeps the tooltip visible when the pointer is moved over it.
|
173
157
|
|
174
|
-
state.
|
175
|
-
state.
|
176
|
-
|
158
|
+
state.content.onPointerEnter = useMergedEventCallbacks(state.content.onPointerEnter, clearDelayTimeout);
|
159
|
+
state.content.onPointerLeave = useMergedEventCallbacks(state.content.onPointerLeave, onLeaveTrigger);
|
160
|
+
const child = /*#__PURE__*/React.isValidElement(children) ? getTriggerChild(children) : undefined; // The props to add to the trigger element (child)
|
177
161
|
|
178
|
-
|
179
|
-
onPointerEnter:
|
180
|
-
onPointerLeave:
|
181
|
-
onFocus:
|
182
|
-
onBlur:
|
162
|
+
const triggerProps = {
|
163
|
+
onPointerEnter: useMergedEventCallbacks((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onPointerEnter, onEnterTrigger),
|
164
|
+
onPointerLeave: useMergedEventCallbacks((_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.onPointerLeave, onLeaveTrigger),
|
165
|
+
onFocus: useMergedEventCallbacks((_c = child === null || child === void 0 ? void 0 : child.props) === null || _c === void 0 ? void 0 : _c.onFocus, onEnterTrigger),
|
166
|
+
onBlur: useMergedEventCallbacks((_d = child === null || child === void 0 ? void 0 : child.props) === null || _d === void 0 ? void 0 : _d.onBlur, onLeaveTrigger)
|
183
167
|
}; // If the target prop is not provided, attach targetRef to the trigger element's ref prop
|
184
168
|
|
185
|
-
|
186
|
-
var childTargetRef = useMergedRefs(childWithRef === null || childWithRef === void 0 ? void 0 : childWithRef.ref, targetRef);
|
169
|
+
const childTargetRef = useMergedRefs(child === null || child === void 0 ? void 0 : child.ref, targetRef);
|
187
170
|
|
188
171
|
if (popperOptions.target === undefined) {
|
189
172
|
triggerProps.ref = childTargetRef;
|
190
173
|
}
|
191
174
|
|
192
|
-
if (
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
state.
|
175
|
+
if (relationship === 'label') {
|
176
|
+
const hasLabel = (child === null || child === void 0 ? void 0 : child.props) && ('aria-label' in child.props || 'aria-labelledby' in child.props);
|
177
|
+
|
178
|
+
if (!hasLabel) {
|
179
|
+
// aria-label only works if the content is a string. Otherwise, need to use aria-labelledby.
|
180
|
+
if (typeof state.content.children === 'string') {
|
181
|
+
triggerProps['aria-label'] = state.content.children;
|
182
|
+
} else if (!isServerSideRender) {
|
183
|
+
triggerProps['aria-labelledby'] = state.content.id; // Always render the tooltip even if hidden, so that aria-labelledby refers to a valid element
|
184
|
+
|
185
|
+
state.shouldRenderTooltip = true;
|
186
|
+
}
|
198
187
|
}
|
199
|
-
}
|
188
|
+
} else if (relationship === 'description') {
|
189
|
+
const hasDescription = (child === null || child === void 0 ? void 0 : child.props) && ('aria-description' in child.props || 'aria-describedby' in child.props);
|
200
190
|
|
201
|
-
|
202
|
-
|
191
|
+
if (!hasDescription && !isServerSideRender) {
|
192
|
+
triggerProps['aria-describedby'] = state.content.id; // Always render the tooltip even if hidden, so that aria-describedby refers to a valid element
|
203
193
|
|
204
|
-
|
205
|
-
|
206
|
-
triggerProps['aria-describedby'] = state.root.id;
|
207
|
-
state.shouldRenderTooltip = true;
|
194
|
+
state.shouldRenderTooltip = true;
|
195
|
+
}
|
208
196
|
} // Apply the trigger props to the child, either by calling the render function, or cloning with the new props
|
209
197
|
|
210
198
|
|
211
|
-
state.
|
199
|
+
state.children = applyTriggerPropsToChildren(children, triggerProps);
|
212
200
|
return state;
|
213
201
|
};
|
214
|
-
/**
|
215
|
-
* Combine up to two event callbacks into a single function that calls them in order
|
216
|
-
*/
|
217
|
-
|
218
|
-
var useMergedCallbacks = function (callback1, callback2) {
|
219
|
-
return React.useCallback(function (ev) {
|
220
|
-
callback1 === null || callback1 === void 0 ? void 0 : callback1(ev);
|
221
|
-
callback2 === null || callback2 === void 0 ? void 0 : callback2(ev);
|
222
|
-
}, [callback1, callback2]);
|
223
|
-
};
|
224
202
|
//# sourceMappingURL=useTooltip.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Tooltip/useTooltip.tsx"],"names":[],"mappings":"
|
1
|
+
{"version":3,"sources":["../../../src/components/Tooltip/useTooltip.tsx"],"names":[],"mappings":"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","sourceRoot":""}
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import type { TooltipState } from './Tooltip.types';
|
2
|
+
export declare const tooltipClassName = "fui-Tooltip";
|
2
3
|
/**
|
3
4
|
* Apply styling to the Tooltip slots based on the state
|
4
5
|
*/
|
5
|
-
export declare const
|
6
|
+
export declare const useTooltipStyles_unstable: (state: TooltipState) => TooltipState;
|