@fluentui/react-tooltip 0.0.0-nightlyd514b3e0ee20220121.1 → 0.0.0-nightlyd80c90385320220216.1
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +147 -42
- package/CHANGELOG.md +38 -14
- package/dist/react-tooltip.d.ts +23 -38
- 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 +17 -30
- package/lib/components/Tooltip/renderTooltip.d.ts +1 -1
- package/lib/components/Tooltip/renderTooltip.js +3 -3
- package/lib/components/Tooltip/renderTooltip.js.map +1 -1
- package/lib/components/Tooltip/useTooltip.d.ts +3 -5
- package/lib/components/Tooltip/useTooltip.js +42 -57
- package/lib/components/Tooltip/useTooltip.js.map +1 -1
- package/lib/components/Tooltip/useTooltipStyles.d.ts +1 -1
- package/lib/components/Tooltip/useTooltipStyles.js +3 -3
- package/lib/components/Tooltip/useTooltipStyles.js.map +1 -1
- package/lib-commonjs/components/Tooltip/Tooltip.d.ts +3 -2
- package/lib-commonjs/components/Tooltip/Tooltip.js +8 -7
- package/lib-commonjs/components/Tooltip/Tooltip.js.map +1 -1
- package/lib-commonjs/components/Tooltip/Tooltip.types.d.ts +17 -30
- package/lib-commonjs/components/Tooltip/renderTooltip.d.ts +1 -1
- package/lib-commonjs/components/Tooltip/renderTooltip.js +5 -5
- package/lib-commonjs/components/Tooltip/renderTooltip.js.map +1 -1
- package/lib-commonjs/components/Tooltip/useTooltip.d.ts +3 -5
- package/lib-commonjs/components/Tooltip/useTooltip.js +43 -58
- package/lib-commonjs/components/Tooltip/useTooltip.js.map +1 -1
- package/lib-commonjs/components/Tooltip/useTooltipStyles.d.ts +1 -1
- package/lib-commonjs/components/Tooltip/useTooltipStyles.js +6 -6
- package/lib-commonjs/components/Tooltip/useTooltipStyles.js.map +1 -1
- package/package.json +8 -10
@@ -5,15 +5,15 @@ import { getSlots } from '@fluentui/react-utilities';
|
|
5
5
|
* Render the final JSX of Tooltip
|
6
6
|
*/
|
7
7
|
|
8
|
-
export const
|
8
|
+
export const renderTooltip_unstable = state => {
|
9
9
|
const {
|
10
10
|
slots,
|
11
11
|
slotProps
|
12
12
|
} = getSlots(state);
|
13
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, 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
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":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,MAAT,QAAuB,wBAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,
|
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,12 +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
9
|
*/
|
12
|
-
export declare const
|
10
|
+
export declare const useTooltip_unstable: (props: TooltipProps) => TooltipState;
|
@@ -1,19 +1,18 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import { mergeArrowOffset, resolvePositioningShorthand, usePopper } from '@fluentui/react-positioning';
|
3
3
|
import { TooltipContext, useFluent } from '@fluentui/react-shared-contexts';
|
4
|
-
import { applyTriggerPropsToChildren,
|
4
|
+
import { applyTriggerPropsToChildren, resolveShorthand, useControllableState, useMergedEventCallbacks, useId, useIsomorphicLayoutEffect, useIsSSR, useMergedRefs, useTimeout, getTriggerChild } from '@fluentui/react-utilities';
|
5
5
|
import { arrowHeight, tooltipBorderRadius } from './private/constants';
|
6
6
|
/**
|
7
7
|
* Create the state required to render Tooltip.
|
8
8
|
*
|
9
|
-
* The returned state can be modified with hooks such as
|
10
|
-
* before being passed to
|
9
|
+
* The returned state can be modified with hooks such as useTooltipStyles_unstable,
|
10
|
+
* before being passed to renderTooltip_unstable.
|
11
11
|
*
|
12
12
|
* @param props - props from this instance of Tooltip
|
13
|
-
* @param ref - reference to root HTMLElement of Tooltip
|
14
13
|
*/
|
15
14
|
|
16
|
-
export const
|
15
|
+
export const useTooltip_unstable = props => {
|
17
16
|
var _a, _b, _c, _d;
|
18
17
|
|
19
18
|
const context = React.useContext(TooltipContext);
|
@@ -23,12 +22,13 @@ export const useTooltip = (props, ref) => {
|
|
23
22
|
} = useFluent();
|
24
23
|
const [setDelayTimeout, clearDelayTimeout] = useTimeout();
|
25
24
|
const {
|
26
|
-
content,
|
27
25
|
appearance,
|
26
|
+
children,
|
27
|
+
content,
|
28
28
|
withArrow,
|
29
29
|
positioning,
|
30
30
|
onVisibleChange,
|
31
|
-
|
31
|
+
relationship,
|
32
32
|
showDelay = 250,
|
33
33
|
hideDelay = 250
|
34
34
|
} = props;
|
@@ -49,26 +49,26 @@ export const useTooltip = (props, ref) => {
|
|
49
49
|
});
|
50
50
|
}, [clearDelayTimeout, setVisibleInternal, onVisibleChange]);
|
51
51
|
const state = {
|
52
|
-
content,
|
53
52
|
withArrow,
|
54
53
|
positioning,
|
55
54
|
showDelay,
|
56
55
|
hideDelay,
|
57
|
-
|
56
|
+
relationship,
|
58
57
|
visible,
|
59
58
|
shouldRenderTooltip: visible,
|
60
59
|
appearance,
|
61
60
|
// Slots
|
62
61
|
components: {
|
63
|
-
|
62
|
+
content: 'div'
|
64
63
|
},
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
64
|
+
content: resolveShorthand(content, {
|
65
|
+
defaultProps: {
|
66
|
+
role: 'tooltip'
|
67
|
+
},
|
68
|
+
required: true
|
70
69
|
})
|
71
70
|
};
|
71
|
+
state.content.id = useId('tooltip-', state.content.id);
|
72
72
|
const popperOptions = {
|
73
73
|
enabled: state.visible,
|
74
74
|
arrowPadding: 2 * tooltipBorderRadius,
|
@@ -87,7 +87,7 @@ export const useTooltip = (props, ref) => {
|
|
87
87
|
containerRef,
|
88
88
|
arrowRef
|
89
89
|
} = usePopper(popperOptions);
|
90
|
-
state.
|
90
|
+
state.content.ref = useMergedRefs(state.content.ref, containerRef);
|
91
91
|
state.arrowRef = arrowRef; // When this tooltip is visible, hide any other tooltips, and register it
|
92
92
|
// as the visibleTooltip with the TooltipContext.
|
93
93
|
// Also add a listener on document to hide the tooltip if Escape is pressed
|
@@ -155,54 +155,39 @@ export const useTooltip = (props, ref) => {
|
|
155
155
|
}, [setDelayTimeout, setVisible, state.hideDelay, targetDocument]); // Cancel the hide timer when the pointer enters the tooltip, and restart it when the mouse leaves.
|
156
156
|
// This keeps the tooltip visible when the pointer is moved over it.
|
157
157
|
|
158
|
-
state.
|
159
|
-
state.
|
160
|
-
const child = /*#__PURE__*/React.isValidElement(
|
161
|
-
|
162
|
-
const triggerProps = {
|
163
|
-
onPointerEnter: useMergedCallbacks((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onPointerEnter, onEnterTrigger),
|
164
|
-
onPointerLeave: useMergedCallbacks((_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.onPointerLeave, onLeaveTrigger),
|
165
|
-
onFocus: useMergedCallbacks((_c = child === null || child === void 0 ? void 0 : child.props) === null || _c === void 0 ? void 0 : _c.onFocus, onEnterTrigger),
|
166
|
-
onBlur: useMergedCallbacks((_d = child === null || child === void 0 ? void 0 : child.props) === null || _d === void 0 ? void 0 : _d.onBlur, onLeaveTrigger)
|
167
|
-
}; // If the target prop is not provided, attach targetRef to the trigger element's ref prop
|
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;
|
161
|
+
const triggerAriaProps = {};
|
168
162
|
|
169
|
-
|
170
|
-
|
163
|
+
if (relationship === 'label') {
|
164
|
+
// aria-label only works if the content is a string. Otherwise, need to use aria-labelledby.
|
165
|
+
if (typeof state.content.children === 'string') {
|
166
|
+
triggerAriaProps['aria-label'] = state.content.children;
|
167
|
+
} else if (!isServerSideRender) {
|
168
|
+
triggerAriaProps['aria-labelledby'] = state.content.id; // Always render the tooltip even if hidden, so that aria-labelledby refers to a valid element
|
171
169
|
|
172
|
-
|
173
|
-
|
174
|
-
}
|
170
|
+
state.shouldRenderTooltip = true;
|
171
|
+
}
|
172
|
+
} else if (relationship === 'description') {
|
173
|
+
if (!isServerSideRender) {
|
174
|
+
triggerAriaProps['aria-describedby'] = state.content.id; // Always render the tooltip even if hidden, so that aria-describedby refers to a valid element
|
175
175
|
|
176
|
-
|
177
|
-
// aria-label only works if the content is a string. Otherwise, need to use labelledby.
|
178
|
-
if (typeof state.content === 'string') {
|
179
|
-
triggerProps['aria-label'] = state.content;
|
180
|
-
} else {
|
181
|
-
state.triggerAriaAttribute = 'labelledby';
|
176
|
+
state.shouldRenderTooltip = true;
|
182
177
|
}
|
183
178
|
}
|
184
179
|
|
185
|
-
|
186
|
-
triggerProps['aria-labelledby'] = state.root.id; // Always render the tooltip even if hidden, so that aria-labelledby refers to a valid element
|
187
|
-
|
188
|
-
state.shouldRenderTooltip = true;
|
189
|
-
} else if (state.triggerAriaAttribute === 'describedby' && !isServerSideRender) {
|
190
|
-
triggerProps['aria-describedby'] = state.root.id;
|
191
|
-
state.shouldRenderTooltip = true;
|
192
|
-
} // Apply the trigger props to the child, either by calling the render function, or cloning with the new props
|
180
|
+
const childTargetRef = useMergedRefs(child === null || child === void 0 ? void 0 : child.ref, targetRef); // Apply the trigger props to the child, either by calling the render function, or cloning with the new props
|
193
181
|
|
194
|
-
|
195
|
-
|
182
|
+
state.children = applyTriggerPropsToChildren(children, { ...triggerAriaProps,
|
183
|
+
...(child === null || child === void 0 ? void 0 : child.props),
|
184
|
+
// If the target prop is not provided, attach targetRef to the trigger element's ref prop
|
185
|
+
ref: popperOptions.target === undefined ? childTargetRef : child === null || child === void 0 ? void 0 : child.ref,
|
186
|
+
onPointerEnter: useMergedEventCallbacks((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onPointerEnter, onEnterTrigger),
|
187
|
+
onPointerLeave: useMergedEventCallbacks((_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.onPointerLeave, onLeaveTrigger),
|
188
|
+
onFocus: useMergedEventCallbacks((_c = child === null || child === void 0 ? void 0 : child.props) === null || _c === void 0 ? void 0 : _c.onFocus, onEnterTrigger),
|
189
|
+
onBlur: useMergedEventCallbacks((_d = child === null || child === void 0 ? void 0 : child.props) === null || _d === void 0 ? void 0 : _d.onBlur, onLeaveTrigger)
|
190
|
+
});
|
196
191
|
return state;
|
197
192
|
};
|
198
|
-
/**
|
199
|
-
* Combine up to two event callbacks into a single function that calls them in order
|
200
|
-
*/
|
201
|
-
|
202
|
-
const useMergedCallbacks = (callback1, callback2) => {
|
203
|
-
return React.useCallback(ev => {
|
204
|
-
callback1 === null || callback1 === void 0 ? void 0 : callback1(ev);
|
205
|
-
callback2 === null || callback2 === void 0 ? void 0 : callback2(ev);
|
206
|
-
}, [callback1, callback2]);
|
207
|
-
};
|
208
193
|
//# sourceMappingURL=useTooltip.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Tooltip/useTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,EAA2B,2BAA3B,EAAwD,SAAxD,QAAyE,6BAAzE;AACA,SAAS,cAAT,EAAyB,SAAzB,QAA0C,iCAA1C;AACA,SACE,2BADF,EAEE,
|
1
|
+
{"version":3,"sources":["../../../src/components/Tooltip/useTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,EAA2B,2BAA3B,EAAwD,SAAxD,QAAyE,6BAAzE;AACA,SAAS,cAAT,EAAyB,SAAzB,QAA0C,iCAA1C;AACA,SACE,2BADF,EAEE,gBAFF,EAGE,oBAHF,EAIE,uBAJF,EAKE,KALF,EAME,yBANF,EAOE,QAPF,EAQE,aARF,EASE,UATF,EAUE,eAVF,QAWO,2BAXP;AAaA,SAAS,WAAT,EAAsB,mBAAtB,QAAiD,qBAAjD;AAEA;;;;;;;AAOG;;AACH,OAAO,MAAM,mBAAmB,GAAI,KAAD,IAAsC;;;AACvE,QAAM,OAAO,GAAG,KAAK,CAAC,UAAN,CAAiB,cAAjB,CAAhB;AACA,QAAM,kBAAkB,GAAG,QAAQ,EAAnC;AACA,QAAM;AAAE,IAAA;AAAF,MAAqB,SAAS,EAApC;AACA,QAAM,CAAC,eAAD,EAAkB,iBAAlB,IAAuC,UAAU,EAAvD;AAEA,QAAM;AACJ,IAAA,UADI;AAEJ,IAAA,QAFI;AAGJ,IAAA,OAHI;AAIJ,IAAA,SAJI;AAKJ,IAAA,WALI;AAMJ,IAAA,eANI;AAOJ,IAAA,YAPI;AAQJ,IAAA,SAAS,GAAG,GARR;AASJ,IAAA,SAAS,GAAG;AATR,MAUF,KAVJ;AAYA,QAAM,CAAC,OAAD,EAAU,kBAAV,IAAgC,oBAAoB,CAAC;AAAE,IAAA,KAAK,EAAE,KAAK,CAAC,OAAf;AAAwB,IAAA,YAAY,EAAE;AAAtC,GAAD,CAA1D;AACA,QAAM,UAAU,GAAG,KAAK,CAAC,WAAN,CACjB,CAAC,UAAD,EAAsB,EAAtB,KAA8F;AAC5F,IAAA,iBAAiB;AACjB,IAAA,kBAAkB,CAAC,UAAU,IAAG;AAC9B,UAAI,UAAU,KAAK,UAAnB,EAA+B;AAC7B,QAAA,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAG,EAAH,EAAO;AAAE,UAAA,OAAO,EAAE;AAAX,SAAP,CAAf;AACD;;AACD,aAAO,UAAP;AACD,KALiB,CAAlB;AAMD,GATgB,EAUjB,CAAC,iBAAD,EAAoB,kBAApB,EAAwC,eAAxC,CAViB,CAAnB;AAaA,QAAM,KAAK,GAAiB;AAC1B,IAAA,SAD0B;AAE1B,IAAA,WAF0B;AAG1B,IAAA,SAH0B;AAI1B,IAAA,SAJ0B;AAK1B,IAAA,YAL0B;AAM1B,IAAA,OAN0B;AAO1B,IAAA,mBAAmB,EAAE,OAPK;AAQ1B,IAAA,UAR0B;AAU1B;AACA,IAAA,UAAU,EAAE;AACV,MAAA,OAAO,EAAE;AADC,KAXc;AAc1B,IAAA,OAAO,EAAE,gBAAgB,CAAC,OAAD,EAAU;AACjC,MAAA,YAAY,EAAE;AACZ,QAAA,IAAI,EAAE;AADM,OADmB;AAIjC,MAAA,QAAQ,EAAE;AAJuB,KAAV;AAdC,GAA5B;AAsBA,EAAA,KAAK,CAAC,OAAN,CAAc,EAAd,GAAmB,KAAK,CAAC,UAAD,EAAa,KAAK,CAAC,OAAN,CAAc,EAA3B,CAAxB;AAEA,QAAM,aAAa,GAAG;AACpB,IAAA,OAAO,EAAE,KAAK,CAAC,OADK;AAEpB,IAAA,YAAY,EAAE,IAAI,mBAFE;AAGpB,IAAA,QAAQ,EAAE,OAHU;AAIpB,IAAA,KAAK,EAAE,QAJa;AAKpB,IAAA,MAAM,EAAE,CAAC,CAAD,EAAI,CAAJ,CALY;AAMpB,OAAG,2BAA2B,CAAC,KAAK,CAAC,WAAP;AANV,GAAtB;;AASA,MAAI,KAAK,CAAC,SAAV,EAAqB;AACnB,IAAA,aAAa,CAAC,MAAd,GAAuB,gBAAgB,CAAC,aAAa,CAAC,MAAf,EAAuB,WAAvB,CAAvC;AACD;;AAED,QAAM;AACJ,IAAA,SADI;AAEJ,IAAA,YAFI;AAGJ,IAAA;AAHI,MAQF,SAAS,CAAC,aAAD,CARb;AAUA,EAAA,KAAK,CAAC,OAAN,CAAc,GAAd,GAAoB,aAAa,CAAC,KAAK,CAAC,OAAN,CAAc,GAAf,EAAoB,YAApB,CAAjC;AACA,EAAA,KAAK,CAAC,QAAN,GAAiB,QAAjB,CAhFuE,CAkFvE;AACA;AACA;;AACA,EAAA,yBAAyB,CAAC,MAAK;;;AAC7B,QAAI,OAAJ,EAAa;AACX,YAAM,WAAW,GAAG;AAAE,QAAA,IAAI,EAAE,MAAM,UAAU,CAAC,KAAD;AAAxB,OAApB;AAEA,OAAA,EAAA,GAAA,OAAO,CAAC,cAAR,MAAsB,IAAtB,IAAsB,EAAA,KAAA,KAAA,CAAtB,GAAsB,KAAA,CAAtB,GAAsB,EAAA,CAAE,IAAF,EAAtB;AACA,MAAA,OAAO,CAAC,cAAR,GAAyB,WAAzB;;AAEA,YAAM,iBAAiB,GAAI,EAAD,IAAsB;AAC9C,YAAI,EAAE,CAAC,GAAH,KAAW,QAAX,IAAuB,EAAE,CAAC,GAAH,KAAW,KAAtC,EAA6C;AAC3C,UAAA,WAAW,CAAC,IAAZ;AACD;AACF,OAJD;;AAMA,MAAA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,gBAAhB,CAAiC,SAAjC,EAA4C,iBAA5C,CAAA;AAEA,aAAO,MAAK;AACV,YAAI,OAAO,CAAC,cAAR,KAA2B,WAA/B,EAA4C;AAC1C,UAAA,OAAO,CAAC,cAAR,GAAyB,SAAzB;AACD;;AAED,QAAA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,mBAAhB,CAAoC,SAApC,EAA+C,iBAA/C,CAAA;AACD,OAND;AAOD;AACF,GAvBwB,EAuBtB,CAAC,OAAD,EAAU,cAAV,EAA0B,OAA1B,EAAmC,UAAnC,CAvBsB,CAAzB,CArFuE,CA8GvE;AACA;AACA;AACA;AACA;;AACA,QAAM,uBAAuB,GAAG,KAAK,CAAC,MAAN,CAAa,KAAb,CAAhC,CAnHuE,CAqHvE;;AACA,QAAM,cAAc,GAAG,KAAK,CAAC,WAAN,CACpB,EAAD,IAAwE;AACtE,QAAI,EAAE,CAAC,IAAH,KAAY,OAAZ,IAAuB,uBAAuB,CAAC,OAAnD,EAA4D;AAC1D,MAAA,uBAAuB,CAAC,OAAxB,GAAkC,KAAlC;AACA;AACD,KAJqE,CAMtE;;;AACA,UAAM,KAAK,GAAG,OAAO,CAAC,cAAR,GAAyB,CAAzB,GAA6B,KAAK,CAAC,SAAjD;AAEA,IAAA,eAAe,CAAC,MAAK;AACnB,MAAA,UAAU,CAAC,IAAD,EAAO,EAAP,CAAV;AACD,KAFc,EAEZ,KAFY,CAAf;AAIA,IAAA,EAAE,CAAC,OAAH,GAbsE,CAaxD;AACf,GAfoB,EAgBrB,CAAC,eAAD,EAAkB,UAAlB,EAA8B,KAAK,CAAC,SAApC,EAA+C,OAA/C,CAhBqB,CAAvB,CAtHuE,CAyIvE;;AACA,QAAM,cAAc,GAAG,KAAK,CAAC,WAAN,CACpB,EAAD,IAAwE;AACtE,QAAI,KAAK,GAAG,KAAK,CAAC,SAAlB;;AAEA,QAAI,EAAE,CAAC,IAAH,KAAY,MAAhB,EAAwB;AACtB;AACA,MAAA,KAAK,GAAG,CAAR;AAEA,MAAA,uBAAuB,CAAC,OAAxB,GAAkC,CAAA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,aAAhB,MAAkC,EAAE,CAAC,MAAvE;AACD;;AAED,IAAA,eAAe,CAAC,MAAK;AACnB,MAAA,UAAU,CAAC,KAAD,EAAQ,EAAR,CAAV;AACD,KAFc,EAEZ,KAFY,CAAf;AAIA,IAAA,EAAE,CAAC,OAAH,GAdsE,CAcxD;AACf,GAhBoB,EAiBrB,CAAC,eAAD,EAAkB,UAAlB,EAA8B,KAAK,CAAC,SAApC,EAA+C,cAA/C,CAjBqB,CAAvB,CA1IuE,CA8JvE;AACA;;AACA,EAAA,KAAK,CAAC,OAAN,CAAc,cAAd,GAA+B,uBAAuB,CAAC,KAAK,CAAC,OAAN,CAAc,cAAf,EAA+B,iBAA/B,CAAtD;AACA,EAAA,KAAK,CAAC,OAAN,CAAc,cAAd,GAA+B,uBAAuB,CAAC,KAAK,CAAC,OAAN,CAAc,cAAf,EAA+B,cAA/B,CAAtD;AAEA,QAAM,KAAK,GAAG,aAAA,KAAK,CAAC,cAAN,CAAqB,QAArB,IAAiC,eAAe,CAAC,QAAD,CAAhD,GAA6D,SAA3E;AAEA,QAAM,gBAAgB,GAAqF,EAA3G;;AAEA,MAAI,YAAY,KAAK,OAArB,EAA8B;AAC5B;AACA,QAAI,OAAO,KAAK,CAAC,OAAN,CAAc,QAArB,KAAkC,QAAtC,EAAgD;AAC9C,MAAA,gBAAgB,CAAC,YAAD,CAAhB,GAAiC,KAAK,CAAC,OAAN,CAAc,QAA/C;AACD,KAFD,MAEO,IAAI,CAAC,kBAAL,EAAyB;AAC9B,MAAA,gBAAgB,CAAC,iBAAD,CAAhB,GAAsC,KAAK,CAAC,OAAN,CAAc,EAApD,CAD8B,CAE9B;;AACA,MAAA,KAAK,CAAC,mBAAN,GAA4B,IAA5B;AACD;AACF,GATD,MASO,IAAI,YAAY,KAAK,aAArB,EAAoC;AACzC,QAAI,CAAC,kBAAL,EAAyB;AACvB,MAAA,gBAAgB,CAAC,kBAAD,CAAhB,GAAuC,KAAK,CAAC,OAAN,CAAc,EAArD,CADuB,CAEvB;;AACA,MAAA,KAAK,CAAC,mBAAN,GAA4B,IAA5B;AACD;AACF;;AAED,QAAM,cAAc,GAAG,aAAa,CAAC,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,GAAR,EAAa,SAAb,CAApC,CAxLuE,CA0LvE;;AACA,EAAA,KAAK,CAAC,QAAN,GAAiB,2BAA2B,CAAsB,QAAtB,EAAgC,EAC1E,GAAG,gBADuE;AAE1E,QAAG,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,KAAV,CAF0E;AAG1E;AACA,IAAA,GAAG,EAAE,aAAa,CAAC,MAAd,KAAyB,SAAzB,GAAqC,cAArC,GAAsD,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,GAJQ;AAK1E,IAAA,cAAc,EAAE,uBAAuB,CAAC,CAAA,EAAA,GAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,KAAP,MAAY,IAAZ,IAAY,EAAA,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAY,EAAA,CAAE,cAAf,EAA+B,cAA/B,CALmC;AAM1E,IAAA,cAAc,EAAE,uBAAuB,CAAC,CAAA,EAAA,GAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,KAAP,MAAY,IAAZ,IAAY,EAAA,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAY,EAAA,CAAE,cAAf,EAA+B,cAA/B,CANmC;AAO1E,IAAA,OAAO,EAAE,uBAAuB,CAAC,CAAA,EAAA,GAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,KAAP,MAAY,IAAZ,IAAY,EAAA,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAY,EAAA,CAAE,OAAf,EAAwB,cAAxB,CAP0C;AAQ1E,IAAA,MAAM,EAAE,uBAAuB,CAAC,CAAA,EAAA,GAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,KAAP,MAAY,IAAZ,IAAY,EAAA,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAY,EAAA,CAAE,MAAf,EAAuB,cAAvB;AAR2C,GAAhC,CAA5C;AAWA,SAAO,KAAP;AACD,CAvMM","sourceRoot":""}
|
@@ -3,4 +3,4 @@ export declare const tooltipClassName = "fui-Tooltip";
|
|
3
3
|
/**
|
4
4
|
* Apply styling to the Tooltip slots based on the state
|
5
5
|
*/
|
6
|
-
export declare const
|
6
|
+
export declare const useTooltipStyles_unstable: (state: TooltipState) => TooltipState;
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { shorthands, __styles, mergeClasses } from '@
|
1
|
+
import { shorthands, __styles, mergeClasses } from '@griffel/react';
|
2
2
|
import { createArrowStyles } from '@fluentui/react-positioning';
|
3
3
|
import { tokens } from '@fluentui/react-theme';
|
4
4
|
import { arrowHeight } from './private/constants';
|
@@ -86,9 +86,9 @@ const useStyles = /*#__PURE__*/__styles({
|
|
86
86
|
*/
|
87
87
|
|
88
88
|
|
89
|
-
export const
|
89
|
+
export const useTooltipStyles_unstable = state => {
|
90
90
|
const styles = useStyles();
|
91
|
-
state.
|
91
|
+
state.content.className = mergeClasses(tooltipClassName, styles.root, state.appearance === 'inverted' && styles.inverted, state.visible && styles.visible, state.content.className);
|
92
92
|
state.arrowClassName = styles.arrow;
|
93
93
|
return state;
|
94
94
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Tooltip/useTooltipStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,YAAiC,YAAjC,QAAqD,
|
1
|
+
{"version":3,"sources":["../../../src/components/Tooltip/useTooltipStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,YAAiC,YAAjC,QAAqD,gBAArD;AACA,SAAS,iBAAT,QAAkC,6BAAlC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,WAAT,QAA4B,qBAA5B;AAGA,OAAO,MAAM,gBAAgB,GAAG,aAAzB;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAkCA;;AAEG;;;AACH,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAAsC;AAC7E,QAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,EAAA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CACpC,gBADoC,EAEpC,MAAM,CAAC,IAF6B,EAGpC,KAAK,CAAC,UAAN,KAAqB,UAArB,IAAmC,MAAM,CAAC,QAHN,EAIpC,KAAK,CAAC,OAAN,IAAiB,MAAM,CAAC,OAJY,EAKpC,KAAK,CAAC,OAAN,CAAc,SALsB,CAAtC;AAQA,EAAA,KAAK,CAAC,cAAN,GAAuB,MAAM,CAAC,KAA9B;AAEA,SAAO,KAAP;AACD,CAdM","sourceRoot":""}
|
@@ -1,6 +1,7 @@
|
|
1
|
+
import * as React from 'react';
|
1
2
|
import type { TooltipProps } from './Tooltip.types';
|
2
|
-
import type {
|
3
|
+
import type { FluentTriggerComponent } from '@fluentui/react-utilities';
|
3
4
|
/**
|
4
5
|
* A tooltip provides light weight contextual information on top of its target element.
|
5
6
|
*/
|
6
|
-
export declare const Tooltip:
|
7
|
+
export declare const Tooltip: React.FC<TooltipProps> & FluentTriggerComponent;
|
@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports.Tooltip = void 0;
|
7
7
|
|
8
|
-
const React = /*#__PURE__*/require("react");
|
9
|
-
|
10
8
|
const useTooltip_1 = /*#__PURE__*/require("./useTooltip");
|
11
9
|
|
12
10
|
const renderTooltip_1 = /*#__PURE__*/require("./renderTooltip");
|
@@ -17,10 +15,13 @@ const useTooltipStyles_1 = /*#__PURE__*/require("./useTooltipStyles");
|
|
17
15
|
*/
|
18
16
|
|
19
17
|
|
20
|
-
|
21
|
-
const state = useTooltip_1.
|
22
|
-
useTooltipStyles_1.
|
23
|
-
return renderTooltip_1.
|
24
|
-
}
|
18
|
+
const Tooltip = props => {
|
19
|
+
const state = useTooltip_1.useTooltip_unstable(props);
|
20
|
+
useTooltipStyles_1.useTooltipStyles_unstable(state);
|
21
|
+
return renderTooltip_1.renderTooltip_unstable(state);
|
22
|
+
};
|
23
|
+
|
24
|
+
exports.Tooltip = Tooltip;
|
25
25
|
exports.Tooltip.displayName = 'Tooltip';
|
26
|
+
exports.Tooltip.isFluentTriggerComponent = true;
|
26
27
|
//# sourceMappingURL=Tooltip.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":";;;;;;;
|
1
|
+
{"version":3,"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;AAIA;;AAEG;;;AACI,MAAM,OAAO,GAAoD,KAAK,IAAG;AAC9E,QAAM,KAAK,GAAG,YAAA,CAAA,mBAAA,CAAoB,KAApB,CAAd;AAEA,EAAA,kBAAA,CAAA,yBAAA,CAA0B,KAA1B;AACA,SAAO,eAAA,CAAA,sBAAA,CAAuB,KAAvB,CAAP;AACD,CALM;;AAAM,OAAA,CAAA,OAAA,GAAO,OAAP;AAOb,OAAA,CAAA,OAAA,CAAQ,WAAR,GAAsB,SAAtB;AACA,OAAA,CAAA,OAAA,CAAQ,wBAAR,GAAmC,IAAnC","sourceRoot":""}
|
@@ -1,26 +1,16 @@
|
|
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
|
+
declare type TooltipCommons = {
|
24
14
|
/**
|
25
15
|
* The tooltip's visual appearance.
|
26
16
|
* * `normal` - Uses the theme's background and text colors.
|
@@ -29,10 +19,6 @@ export declare type TooltipCommons = {
|
|
29
19
|
* @defaultvalue normal
|
30
20
|
*/
|
31
21
|
appearance?: 'normal' | 'inverted';
|
32
|
-
/**
|
33
|
-
* The content displayed inside the tooltip.
|
34
|
-
*/
|
35
|
-
content: React.ReactNode;
|
36
22
|
/**
|
37
23
|
* Render an arrow pointing to the target element
|
38
24
|
*
|
@@ -59,15 +45,15 @@ export declare type TooltipCommons = {
|
|
59
45
|
*/
|
60
46
|
onVisibleChange?: (event: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement> | undefined, data: OnVisibleChangeData) => void;
|
61
47
|
/**
|
62
|
-
* Specifies
|
63
|
-
* * `label` - Set aria-label to the tooltip's content. Requires content to be a string; if not, uses `labelledby`.
|
64
|
-
* * `labelledby` - Set aria-labelledby to the tooltip's id. The id is generated if not provided.
|
65
|
-
* * `describedby` - Set aria-describedby to the tooltip's id. The id is generated if not provided.
|
66
|
-
* * 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.
|
67
49
|
*
|
68
|
-
*
|
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.
|
69
55
|
*/
|
70
|
-
|
56
|
+
relationship: 'label' | 'description' | 'inaccessible';
|
71
57
|
/**
|
72
58
|
* Delay before the tooltip is shown, in milliseconds.
|
73
59
|
*
|
@@ -96,18 +82,18 @@ export declare type OnVisibleChangeData = {
|
|
96
82
|
/**
|
97
83
|
* Properties for Tooltip
|
98
84
|
*/
|
99
|
-
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
|
+
};
|
100
90
|
/**
|
101
91
|
* State used in rendering Tooltip
|
102
92
|
*/
|
103
93
|
export declare type TooltipState = ComponentState<TooltipSlots> & TooltipCommons & {
|
94
|
+
children?: React.ReactElement | null;
|
104
95
|
/**
|
105
96
|
* Whether the tooltip should be rendered to the DOM.
|
106
|
-
*
|
107
|
-
* Normally the tooltip will only be rendered when visible. However, if
|
108
|
-
* triggerAriaAttribute is labelledby or describedby, the tooltip will
|
109
|
-
* always be rendered even when hidden so that those aria attributes
|
110
|
-
* to always refer to a valid DOM element.
|
111
97
|
*/
|
112
98
|
shouldRenderTooltip?: boolean;
|
113
99
|
/**
|
@@ -119,3 +105,4 @@ export declare type TooltipState = ComponentState<TooltipSlots> & TooltipCommons
|
|
119
105
|
*/
|
120
106
|
arrowClassName?: string;
|
121
107
|
};
|
108
|
+
export {};
|
@@ -3,7 +3,7 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.
|
6
|
+
exports.renderTooltip_unstable = void 0;
|
7
7
|
|
8
8
|
const React = /*#__PURE__*/require("react");
|
9
9
|
|
@@ -15,17 +15,17 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
15
15
|
*/
|
16
16
|
|
17
17
|
|
18
|
-
const
|
18
|
+
const renderTooltip_unstable = state => {
|
19
19
|
const {
|
20
20
|
slots,
|
21
21
|
slotProps
|
22
22
|
} = react_utilities_1.getSlots(state);
|
23
|
-
return React.createElement(React.Fragment, null, state.
|
23
|
+
return React.createElement(React.Fragment, null, state.children, state.shouldRenderTooltip && React.createElement(react_portal_1.Portal, null, React.createElement(slots.content, { ...slotProps.content
|
24
24
|
}, state.withArrow && React.createElement("div", {
|
25
25
|
ref: state.arrowRef,
|
26
26
|
className: state.arrowClassName
|
27
|
-
}), state.content)));
|
27
|
+
}), state.content.children)));
|
28
28
|
};
|
29
29
|
|
30
|
-
exports.
|
30
|
+
exports.renderTooltip_unstable = renderTooltip_unstable;
|
31
31
|
//# sourceMappingURL=renderTooltip.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Tooltip/renderTooltip.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,
|
1
|
+
{"version":3,"sources":["../../../src/components/Tooltip/renderTooltip.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,sBAAsB,GAAI,KAAD,IAAwB;AAC5D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAuB,KAAvB,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACG,KAAK,CAAC,QADT,EAEG,KAAK,CAAC,mBAAN,IACC,KAAA,CAAA,aAAA,CAAC,cAAA,CAAA,MAAD,EAAO,IAAP,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;AAAf,GAAd,EACG,KAAK,CAAC,SAAN,IAAmB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,GAAG,EAAE,KAAK,CAAC,QAAhB;AAA0B,IAAA,SAAS,EAAE,KAAK,CAAC;AAA3C,GAAA,CADtB,EAEG,KAAK,CAAC,OAAN,CAAc,QAFjB,CADF,CAHJ,CADF;AAaD,CAhBM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourceRoot":""}
|
@@ -1,12 +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
9
|
*/
|
12
|
-
export declare const
|
10
|
+
export declare const useTooltip_unstable: (props: TooltipProps) => TooltipState;
|