@fluentui/react-tooltip 9.0.0-nightly.f81b28ceb3.1 → 9.0.0-rc.11
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 +817 -23
- package/CHANGELOG.md +310 -110
- package/MIGRATION.md +51 -43
- package/Spec.md +201 -337
- package/dist/index.d.ts +152 -0
- package/{lib → dist}/tsdoc-metadata.json +0 -0
- package/lib/Tooltip.js.map +1 -1
- package/lib/components/Tooltip/Tooltip.js +9 -9
- package/lib/components/Tooltip/Tooltip.js.map +1 -1
- package/lib/components/Tooltip/Tooltip.types.js.map +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.js +14 -0
- package/lib/components/Tooltip/private/constants.js.map +1 -0
- package/lib/components/Tooltip/renderTooltip.js +10 -8
- package/lib/components/Tooltip/renderTooltip.js.map +1 -1
- package/lib/components/Tooltip/useTooltip.js +100 -129
- package/lib/components/Tooltip/useTooltip.js.map +1 -1
- package/lib/components/Tooltip/useTooltipStyles.js +52 -23
- 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 +1 -1
- package/lib-commonjs/Tooltip.js.map +1 -1
- 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.js.map +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.js +21 -0
- package/lib-commonjs/components/Tooltip/private/constants.js.map +1 -0
- package/lib-commonjs/components/Tooltip/renderTooltip.js +15 -14
- package/lib-commonjs/components/Tooltip/renderTooltip.js.map +1 -1
- package/lib-commonjs/components/Tooltip/useTooltip.js +106 -135
- package/lib-commonjs/components/Tooltip/useTooltip.js.map +1 -1
- package/lib-commonjs/components/Tooltip/useTooltipStyles.js +58 -26
- package/lib-commonjs/components/Tooltip/useTooltipStyles.js.map +1 -1
- package/lib-commonjs/index.js +32 -2
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +21 -26
- package/dist/react-tooltip.d.ts +0 -162
- package/lib/Tooltip.d.ts +0 -1
- 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/components/Tooltip/Tooltip.d.ts +0 -6
- package/lib/components/Tooltip/Tooltip.types.d.ts +0 -124
- package/lib/components/Tooltip/index.d.ts +0 -5
- package/lib/components/Tooltip/renderTooltip.d.ts +0 -5
- package/lib/components/Tooltip/useTooltip.d.ts +0 -13
- package/lib/components/Tooltip/useTooltipStyles.d.ts +0 -5
- package/lib/index.d.ts +0 -1
- package/lib-commonjs/Tooltip.d.ts +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
- package/lib-commonjs/components/Tooltip/Tooltip.d.ts +0 -6
- package/lib-commonjs/components/Tooltip/Tooltip.types.d.ts +0 -124
- package/lib-commonjs/components/Tooltip/index.d.ts +0 -5
- package/lib-commonjs/components/Tooltip/renderTooltip.d.ts +0 -5
- package/lib-commonjs/components/Tooltip/useTooltip.d.ts +0 -13
- package/lib-commonjs/components/Tooltip/useTooltipStyles.d.ts +0 -5
- package/lib-commonjs/index.d.ts +0 -1
package/dist/index.d.ts
ADDED
@@ -0,0 +1,152 @@
|
|
1
|
+
import type { ComponentProps } from '@fluentui/react-utilities';
|
2
|
+
import type { ComponentState } from '@fluentui/react-utilities';
|
3
|
+
import type { FluentTriggerComponent } from '@fluentui/react-utilities';
|
4
|
+
import type { PortalProps } from '@fluentui/react-portal';
|
5
|
+
import type { PositioningShorthand } from '@fluentui/react-positioning';
|
6
|
+
import * as React_2 from 'react';
|
7
|
+
import type { Slot } from '@fluentui/react-utilities';
|
8
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
9
|
+
|
10
|
+
/**
|
11
|
+
* Data for the Tooltip's onVisibleChange event.
|
12
|
+
*/
|
13
|
+
export declare type OnVisibleChangeData = {
|
14
|
+
visible: boolean;
|
15
|
+
};
|
16
|
+
|
17
|
+
/**
|
18
|
+
* Render the final JSX of Tooltip
|
19
|
+
*/
|
20
|
+
export declare const renderTooltip_unstable: (state: TooltipState) => JSX.Element;
|
21
|
+
|
22
|
+
/**
|
23
|
+
* A tooltip provides light weight contextual information on top of its target element.
|
24
|
+
*/
|
25
|
+
export declare const Tooltip: React_2.FC<TooltipProps> & FluentTriggerComponent;
|
26
|
+
|
27
|
+
export declare const tooltipClassNames: SlotClassNames<TooltipSlots>;
|
28
|
+
|
29
|
+
/**
|
30
|
+
* Properties for Tooltip
|
31
|
+
*/
|
32
|
+
export declare type TooltipProps = ComponentProps<TooltipSlots> & Pick<PortalProps, 'mountNode'> & {
|
33
|
+
/**
|
34
|
+
* The tooltip's visual appearance.
|
35
|
+
* * `normal` - Uses the theme's background and text colors.
|
36
|
+
* * `inverted` - Higher contrast variant that uses the theme's inverted colors.
|
37
|
+
*
|
38
|
+
* @default normal
|
39
|
+
*/
|
40
|
+
appearance?: 'normal' | 'inverted';
|
41
|
+
/**
|
42
|
+
* The tooltip can have a single JSX child, or a render function that accepts TooltipTriggerProps.
|
43
|
+
*
|
44
|
+
* If no child is provided, the tooltip's target must be set with the `positioning` prop, and its
|
45
|
+
* visibility must be controlled with the `visible` prop.
|
46
|
+
*/
|
47
|
+
children?: (React_2.ReactElement & {
|
48
|
+
ref?: React_2.Ref<unknown>;
|
49
|
+
}) | ((props: TooltipTriggerProps) => React_2.ReactElement | null) | null;
|
50
|
+
/**
|
51
|
+
* Delay before the tooltip is hidden, in milliseconds.
|
52
|
+
*
|
53
|
+
* @default 250
|
54
|
+
*/
|
55
|
+
hideDelay?: number;
|
56
|
+
/**
|
57
|
+
* Notification when the visibility of the tooltip is changing
|
58
|
+
*/
|
59
|
+
onVisibleChange?: (event: React_2.PointerEvent<HTMLElement> | React_2.FocusEvent<HTMLElement> | undefined, data: OnVisibleChangeData) => void;
|
60
|
+
/**
|
61
|
+
* Configure the positioning of the tooltip
|
62
|
+
*
|
63
|
+
* @default above
|
64
|
+
*/
|
65
|
+
positioning?: PositioningShorthand;
|
66
|
+
/**
|
67
|
+
* (Required) Specifies whether this tooltip is acting as the description or label of its trigger element.
|
68
|
+
*
|
69
|
+
* * `label` - The tooltip sets the trigger's aria-label or aria-labelledby attribute. This is useful for buttons
|
70
|
+
* displaying only an icon, for example.
|
71
|
+
* * `description` - The tooltip sets the trigger's aria-description or aria-describedby attribute.
|
72
|
+
* * `inaccessible` - No aria attributes are set on the trigger. This makes the tooltip's content inaccessible to
|
73
|
+
* screen readers, and should only be used if the tooltip's text is available by some other means.
|
74
|
+
*/
|
75
|
+
relationship: 'label' | 'description' | 'inaccessible';
|
76
|
+
/**
|
77
|
+
* Delay before the tooltip is shown, in milliseconds.
|
78
|
+
*
|
79
|
+
* @default 250
|
80
|
+
*/
|
81
|
+
showDelay?: number;
|
82
|
+
/**
|
83
|
+
* Control the tooltip's visibility programatically.
|
84
|
+
*
|
85
|
+
* This can be used in conjunction with onVisibleChange to modify the tooltip's show and hide behavior.
|
86
|
+
*
|
87
|
+
* If not provided, the visibility will be controlled by the tooltip itself, based on hover and focus events on the
|
88
|
+
* trigger (child) element.
|
89
|
+
*
|
90
|
+
* @default false
|
91
|
+
*/
|
92
|
+
visible?: boolean;
|
93
|
+
/**
|
94
|
+
* Render an arrow pointing to the target element
|
95
|
+
*
|
96
|
+
* @default false
|
97
|
+
*/
|
98
|
+
withArrow?: boolean;
|
99
|
+
};
|
100
|
+
|
101
|
+
/**
|
102
|
+
* Slot properties for Tooltip
|
103
|
+
*/
|
104
|
+
export declare type TooltipSlots = {
|
105
|
+
/**
|
106
|
+
* The text or JSX content of the tooltip.
|
107
|
+
*/
|
108
|
+
content: NonNullable<Slot<'div'>>;
|
109
|
+
};
|
110
|
+
|
111
|
+
/**
|
112
|
+
* State used in rendering Tooltip
|
113
|
+
*/
|
114
|
+
export declare type TooltipState = ComponentState<TooltipSlots> & Pick<TooltipProps, 'mountNode' | 'relationship'> & Required<Pick<TooltipProps, 'appearance' | 'hideDelay' | 'positioning' | 'showDelay' | 'visible' | 'withArrow'>> & {
|
115
|
+
children?: React_2.ReactElement | null;
|
116
|
+
/**
|
117
|
+
* Whether the tooltip should be rendered to the DOM.
|
118
|
+
*/
|
119
|
+
shouldRenderTooltip?: boolean;
|
120
|
+
/**
|
121
|
+
* Ref to the arrow element
|
122
|
+
*/
|
123
|
+
arrowRef?: React_2.Ref<HTMLDivElement>;
|
124
|
+
/**
|
125
|
+
* CSS class for the arrow element
|
126
|
+
*/
|
127
|
+
arrowClassName?: string;
|
128
|
+
};
|
129
|
+
|
130
|
+
/**
|
131
|
+
* The properties that are added to the trigger of the Tooltip
|
132
|
+
*/
|
133
|
+
export declare type TooltipTriggerProps = {
|
134
|
+
ref?: React_2.Ref<never>;
|
135
|
+
} & Pick<React_2.HTMLAttributes<HTMLElement>, 'aria-describedby' | 'aria-label' | 'aria-labelledby' | 'onBlur' | 'onFocus' | 'onPointerEnter' | 'onPointerLeave'>;
|
136
|
+
|
137
|
+
/**
|
138
|
+
* Create the state required to render Tooltip.
|
139
|
+
*
|
140
|
+
* The returned state can be modified with hooks such as useTooltipStyles_unstable,
|
141
|
+
* before being passed to renderTooltip_unstable.
|
142
|
+
*
|
143
|
+
* @param props - props from this instance of Tooltip
|
144
|
+
*/
|
145
|
+
export declare const useTooltip_unstable: (props: TooltipProps) => TooltipState;
|
146
|
+
|
147
|
+
/**
|
148
|
+
* Apply styling to the Tooltip slots based on the state
|
149
|
+
*/
|
150
|
+
export declare const useTooltipStyles_unstable: (state: TooltipState) => TooltipState;
|
151
|
+
|
152
|
+
export { }
|
File without changes
|
package/lib/Tooltip.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["
|
1
|
+
{"version":3,"file":"Tooltip.js","sourceRoot":"../src/","sources":["Tooltip.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './components/Tooltip/index';\n"]}
|
@@ -1,15 +1,15 @@
|
|
1
|
-
import
|
2
|
-
import {
|
3
|
-
import {
|
4
|
-
import { useTooltipStyles } from './useTooltipStyles';
|
1
|
+
import { useTooltip_unstable } from './useTooltip';
|
2
|
+
import { renderTooltip_unstable } from './renderTooltip';
|
3
|
+
import { useTooltipStyles_unstable } from './useTooltipStyles';
|
5
4
|
/**
|
6
5
|
* A tooltip provides light weight contextual information on top of its target element.
|
7
6
|
*/
|
8
7
|
|
9
|
-
export
|
10
|
-
|
11
|
-
|
12
|
-
return
|
13
|
-
}
|
8
|
+
export const Tooltip = props => {
|
9
|
+
const state = useTooltip_unstable(props);
|
10
|
+
useTooltipStyles_unstable(state);
|
11
|
+
return renderTooltip_unstable(state);
|
12
|
+
};
|
14
13
|
Tooltip.displayName = 'Tooltip';
|
14
|
+
Tooltip.isFluentTriggerComponent = true;
|
15
15
|
//# sourceMappingURL=Tooltip.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AACA,SAAS,mBAAT,QAAoC,cAApC;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AAIA;;AAEG;;AACH,OAAO,MAAM,OAAO,GAAoD,KAAK,IAAG;AAC9E,QAAM,KAAK,GAAG,mBAAmB,CAAC,KAAD,CAAjC;AAEA,EAAA,yBAAyB,CAAC,KAAD,CAAzB;AACA,SAAO,sBAAsB,CAAC,KAAD,CAA7B;AACD,CALM;AAOP,OAAO,CAAC,WAAR,GAAsB,SAAtB;AACA,OAAO,CAAC,wBAAR,GAAmC,IAAnC","sourcesContent":["import * as React from 'react';\nimport { useTooltip_unstable } from './useTooltip';\nimport { renderTooltip_unstable } from './renderTooltip';\nimport { useTooltipStyles_unstable } from './useTooltipStyles';\nimport type { TooltipProps } from './Tooltip.types';\nimport type { FluentTriggerComponent } from '@fluentui/react-utilities';\n\n/**\n * A tooltip provides light weight contextual information on top of its target element.\n */\nexport const Tooltip: React.FC<TooltipProps> & FluentTriggerComponent = props => {\n const state = useTooltip_unstable(props);\n\n useTooltipStyles_unstable(state);\n return renderTooltip_unstable(state);\n};\n\nTooltip.displayName = 'Tooltip';\nTooltip.isFluentTriggerComponent = true;\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Tooltip.types.js","sourceRoot":"","sources":["
|
1
|
+
{"version":3,"file":"Tooltip.types.js","sourceRoot":"../src/","sources":["components/Tooltip/Tooltip.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PortalProps } from '@fluentui/react-portal';\n\n/**\n * Slot properties for Tooltip\n */\nexport type TooltipSlots = {\n /**\n * The text or JSX content of the tooltip.\n */\n content: NonNullable<Slot<'div'>>;\n};\n\n/**\n * The properties that are added to the trigger of the Tooltip\n */\nexport type TooltipTriggerProps = {\n ref?: React.Ref<never>;\n} & Pick<\n React.HTMLAttributes<HTMLElement>,\n 'aria-describedby' | 'aria-label' | 'aria-labelledby' | 'onBlur' | 'onFocus' | 'onPointerEnter' | 'onPointerLeave'\n>;\n\n/**\n * Data for the Tooltip's onVisibleChange event.\n */\nexport type OnVisibleChangeData = {\n visible: boolean;\n};\n\n/**\n * Properties for Tooltip\n */\nexport type TooltipProps = ComponentProps<TooltipSlots> &\n Pick<PortalProps, 'mountNode'> & {\n /**\n * The tooltip's visual appearance.\n * * `normal` - Uses the theme's background and text colors.\n * * `inverted` - Higher contrast variant that uses the theme's inverted colors.\n *\n * @default normal\n */\n appearance?: 'normal' | 'inverted';\n\n /**\n * The tooltip can have a single JSX child, or a render function that accepts TooltipTriggerProps.\n *\n * If no child is provided, the tooltip's target must be set with the `positioning` prop, and its\n * visibility must be controlled with the `visible` prop.\n */\n children?:\n | (React.ReactElement & { ref?: React.Ref<unknown> })\n | ((props: TooltipTriggerProps) => React.ReactElement | null)\n | null;\n\n /**\n * Delay before the tooltip is hidden, in milliseconds.\n *\n * @default 250\n */\n hideDelay?: number;\n\n /**\n * Notification when the visibility of the tooltip is changing\n */\n onVisibleChange?: (\n event: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement> | undefined,\n data: OnVisibleChangeData,\n ) => void;\n\n /**\n * Configure the positioning of the tooltip\n *\n * @default above\n */\n positioning?: PositioningShorthand;\n\n /**\n * (Required) Specifies whether this tooltip is acting as the description or label of its trigger element.\n *\n * * `label` - The tooltip sets the trigger's aria-label or aria-labelledby attribute. This is useful for buttons\n * displaying only an icon, for example.\n * * `description` - The tooltip sets the trigger's aria-description or aria-describedby attribute.\n * * `inaccessible` - No aria attributes are set on the trigger. This makes the tooltip's content inaccessible to\n * screen readers, and should only be used if the tooltip's text is available by some other means.\n */\n relationship: 'label' | 'description' | 'inaccessible';\n\n /**\n * Delay before the tooltip is shown, in milliseconds.\n *\n * @default 250\n */\n showDelay?: number;\n\n /**\n * Control the tooltip's visibility programatically.\n *\n * This can be used in conjunction with onVisibleChange to modify the tooltip's show and hide behavior.\n *\n * If not provided, the visibility will be controlled by the tooltip itself, based on hover and focus events on the\n * trigger (child) element.\n *\n * @default false\n */\n visible?: boolean;\n\n /**\n * Render an arrow pointing to the target element\n *\n * @default false\n */\n withArrow?: boolean;\n };\n\n/**\n * State used in rendering Tooltip\n */\nexport type TooltipState = ComponentState<TooltipSlots> &\n Pick<TooltipProps, 'mountNode' | 'relationship'> &\n Required<Pick<TooltipProps, 'appearance' | 'hideDelay' | 'positioning' | 'showDelay' | 'visible' | 'withArrow'>> & {\n children?: React.ReactElement | null;\n\n /**\n * Whether the tooltip should be rendered to the DOM.\n */\n shouldRenderTooltip?: boolean;\n\n /**\n * Ref to the arrow element\n */\n arrowRef?: React.Ref<HTMLDivElement>;\n\n /**\n * CSS class for the arrow element\n */\n arrowClassName?: string;\n };\n"]}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["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","sourcesContent":["export * from './Tooltip';\nexport * from './Tooltip.types';\nexport * from './renderTooltip';\nexport * from './useTooltip';\nexport * from './useTooltipStyles';\n"]}
|
@@ -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":["components/Tooltip/private/constants.ts"],"names":[],"mappings":"AAAA;;AAEG;AACH,OAAO,MAAM,WAAW,GAAG,CAApB;AAEP;;;;;;AAMG;;AACH,OAAO,MAAM,mBAAmB,GAAG,CAA5B","sourcesContent":["/**\n * The height of the tooltip's arrow in pixels.\n */\nexport const arrowHeight = 6;\n\n/**\n * The default value of the tooltip's border radius (borderRadiusMedium).\n *\n * Unfortunately, Popper requires it to be specified as a variable instead of using CSS.\n * While we could use getComputedStyle, that adds a performance penalty for something that\n * will likely never change.\n */\nexport const tooltipBorderRadius = 4;\n"],"sourceRoot":"../src/"}
|
@@ -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,17 @@ 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, {
|
14
|
+
mountNode: state.mountNode
|
15
|
+
}, /*#__PURE__*/React.createElement(slots.content, { ...slotProps.content
|
16
|
+
}, state.withArrow && /*#__PURE__*/React.createElement("div", {
|
15
17
|
ref: state.arrowRef,
|
16
18
|
className: state.arrowClassName
|
17
|
-
}), state.content)));
|
19
|
+
}), state.content.children)));
|
18
20
|
};
|
19
21
|
//# sourceMappingURL=renderTooltip.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["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;AAAC,IAAA,SAAS,EAAE,KAAK,CAAC;AAAlB,GAAP,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","sourcesContent":["import * as React from 'react';\nimport { Portal } from '@fluentui/react-portal';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TooltipSlots, TooltipState } from './Tooltip.types';\n\n/**\n * Render the final JSX of Tooltip\n */\nexport const renderTooltip_unstable = (state: TooltipState) => {\n const { slots, slotProps } = getSlots<TooltipSlots>(state);\n\n return (\n <>\n {state.children}\n {state.shouldRenderTooltip && (\n <Portal mountNode={state.mountNode}>\n <slots.content {...slotProps.content}>\n {state.withArrow && <div ref={state.arrowRef} className={state.arrowClassName} />}\n {state.content.children}\n </slots.content>\n </Portal>\n )}\n </>\n );\n};\n"],"sourceRoot":"../src/"}
|
@@ -1,57 +1,45 @@
|
|
1
|
-
import { __assign } from "tslib";
|
2
1
|
import * as React from 'react';
|
3
|
-
import { mergeArrowOffset, resolvePositioningShorthand,
|
2
|
+
import { mergeArrowOffset, resolvePositioningShorthand, usePositioning } 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
|
-
|
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 = 'normal',
|
26
|
+
children,
|
27
|
+
content,
|
28
|
+
withArrow = false,
|
29
|
+
positioning = 'above',
|
30
|
+
onVisibleChange,
|
31
|
+
relationship,
|
32
|
+
showDelay = 250,
|
33
|
+
hideDelay = 250,
|
34
|
+
mountNode
|
35
|
+
} = props;
|
36
|
+
const [visible, setVisibleInternal] = useControllableState({
|
46
37
|
state: props.visible,
|
47
38
|
initialState: false
|
48
|
-
})
|
49
|
-
|
50
|
-
setVisibleInternal = _j[1];
|
51
|
-
|
52
|
-
var setVisible = React.useCallback(function (newVisible, ev) {
|
39
|
+
});
|
40
|
+
const setVisible = React.useCallback((newVisible, ev) => {
|
53
41
|
clearDelayTimeout();
|
54
|
-
setVisibleInternal(
|
42
|
+
setVisibleInternal(oldVisible => {
|
55
43
|
if (newVisible !== oldVisible) {
|
56
44
|
onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(ev, {
|
57
45
|
visible: newVisible
|
@@ -61,76 +49,74 @@ export var useTooltip = function (props, ref) {
|
|
61
49
|
return newVisible;
|
62
50
|
});
|
63
51
|
}, [clearDelayTimeout, setVisibleInternal, onVisibleChange]);
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
triggerAriaAttribute: triggerAriaAttribute,
|
72
|
-
visible: visible,
|
52
|
+
const state = {
|
53
|
+
withArrow,
|
54
|
+
positioning,
|
55
|
+
showDelay,
|
56
|
+
hideDelay,
|
57
|
+
relationship,
|
58
|
+
visible,
|
73
59
|
shouldRenderTooltip: visible,
|
74
|
-
appearance
|
60
|
+
appearance,
|
61
|
+
mountNode,
|
75
62
|
// Slots
|
76
63
|
components: {
|
77
|
-
|
64
|
+
content: 'div'
|
78
65
|
},
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
})
|
66
|
+
content: resolveShorthand(content, {
|
67
|
+
defaultProps: {
|
68
|
+
role: 'tooltip'
|
69
|
+
},
|
70
|
+
required: true
|
71
|
+
})
|
85
72
|
};
|
86
|
-
|
87
|
-
|
73
|
+
state.content.id = useId('tooltip-', state.content.id);
|
74
|
+
const positioningOptions = {
|
88
75
|
enabled: state.visible,
|
89
76
|
arrowPadding: 2 * tooltipBorderRadius,
|
90
77
|
position: 'above',
|
91
78
|
align: 'center',
|
92
|
-
offset:
|
93
|
-
|
79
|
+
offset: 4,
|
80
|
+
...resolvePositioningShorthand(state.positioning)
|
81
|
+
};
|
94
82
|
|
95
83
|
if (state.withArrow) {
|
96
|
-
|
84
|
+
positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeight);
|
97
85
|
}
|
98
86
|
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
state.
|
87
|
+
const {
|
88
|
+
targetRef,
|
89
|
+
containerRef,
|
90
|
+
arrowRef
|
91
|
+
} = usePositioning(positioningOptions);
|
92
|
+
state.content.ref = useMergedRefs(state.content.ref, containerRef);
|
105
93
|
state.arrowRef = arrowRef; // When this tooltip is visible, hide any other tooltips, and register it
|
106
94
|
// as the visibleTooltip with the TooltipContext.
|
107
95
|
// Also add a listener on document to hide the tooltip if Escape is pressed
|
108
96
|
|
109
|
-
useIsomorphicLayoutEffect(
|
97
|
+
useIsomorphicLayoutEffect(() => {
|
110
98
|
var _a;
|
111
99
|
|
112
100
|
if (visible) {
|
113
|
-
|
114
|
-
hide:
|
115
|
-
return setVisible(false);
|
116
|
-
}
|
101
|
+
const thisTooltip = {
|
102
|
+
hide: () => setVisible(false)
|
117
103
|
};
|
118
104
|
(_a = context.visibleTooltip) === null || _a === void 0 ? void 0 : _a.hide();
|
119
|
-
context.visibleTooltip =
|
105
|
+
context.visibleTooltip = thisTooltip;
|
120
106
|
|
121
|
-
|
107
|
+
const onDocumentKeyDown = ev => {
|
122
108
|
if (ev.key === 'Escape' || ev.key === 'Esc') {
|
123
|
-
|
109
|
+
thisTooltip.hide();
|
124
110
|
}
|
125
111
|
};
|
126
112
|
|
127
|
-
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('keydown',
|
128
|
-
return
|
129
|
-
if (context.visibleTooltip ===
|
113
|
+
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('keydown', onDocumentKeyDown);
|
114
|
+
return () => {
|
115
|
+
if (context.visibleTooltip === thisTooltip) {
|
130
116
|
context.visibleTooltip = undefined;
|
131
117
|
}
|
132
118
|
|
133
|
-
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('keydown',
|
119
|
+
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('keydown', onDocumentKeyDown);
|
134
120
|
};
|
135
121
|
}
|
136
122
|
}, [context, targetDocument, visible, setVisible]); // The focused element gets a blur event when the document loses focus
|
@@ -139,24 +125,24 @@ export var useTooltip = function (props, ref) {
|
|
139
125
|
// checking if the blurred element is still the document's activeElement.
|
140
126
|
// See https://github.com/microsoft/fluentui/issues/13541
|
141
127
|
|
142
|
-
|
128
|
+
const ignoreNextFocusEventRef = React.useRef(false); // Listener for onPointerEnter and onFocus on the trigger element
|
143
129
|
|
144
|
-
|
130
|
+
const onEnterTrigger = React.useCallback(ev => {
|
145
131
|
if (ev.type === 'focus' && ignoreNextFocusEventRef.current) {
|
146
132
|
ignoreNextFocusEventRef.current = false;
|
147
133
|
return;
|
148
134
|
} // Show immediately if another tooltip is already visible
|
149
135
|
|
150
136
|
|
151
|
-
|
152
|
-
setDelayTimeout(
|
137
|
+
const delay = context.visibleTooltip ? 0 : state.showDelay;
|
138
|
+
setDelayTimeout(() => {
|
153
139
|
setVisible(true, ev);
|
154
140
|
}, delay);
|
155
141
|
ev.persist(); // Persist the event since the setVisible call will happen asynchronously
|
156
142
|
}, [setDelayTimeout, setVisible, state.showDelay, context]); // Listener for onPointerLeave and onBlur on the trigger element
|
157
143
|
|
158
|
-
|
159
|
-
|
144
|
+
const onLeaveTrigger = React.useCallback(ev => {
|
145
|
+
let delay = state.hideDelay;
|
160
146
|
|
161
147
|
if (ev.type === 'blur') {
|
162
148
|
// Hide immediately when losing focus
|
@@ -164,61 +150,46 @@ export var useTooltip = function (props, ref) {
|
|
164
150
|
ignoreNextFocusEventRef.current = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) === ev.target;
|
165
151
|
}
|
166
152
|
|
167
|
-
setDelayTimeout(
|
153
|
+
setDelayTimeout(() => {
|
168
154
|
setVisible(false, ev);
|
169
155
|
}, delay);
|
170
156
|
ev.persist(); // Persist the event since the setVisible call will happen asynchronously
|
171
157
|
}, [setDelayTimeout, setVisible, state.hideDelay, targetDocument]); // Cancel the hide timer when the pointer enters the tooltip, and restart it when the mouse leaves.
|
172
158
|
// This keeps the tooltip visible when the pointer is moved over it.
|
173
159
|
|
174
|
-
state.
|
175
|
-
state.
|
176
|
-
|
177
|
-
|
178
|
-
var triggerProps = {
|
179
|
-
onPointerEnter: useMergedCallbacks((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onPointerEnter, onEnterTrigger),
|
180
|
-
onPointerLeave: useMergedCallbacks((_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.onPointerLeave, onLeaveTrigger),
|
181
|
-
onFocus: useMergedCallbacks((_c = child === null || child === void 0 ? void 0 : child.props) === null || _c === void 0 ? void 0 : _c.onFocus, onEnterTrigger),
|
182
|
-
onBlur: useMergedCallbacks((_d = child === null || child === void 0 ? void 0 : child.props) === null || _d === void 0 ? void 0 : _d.onBlur, onLeaveTrigger)
|
183
|
-
}; // If the target prop is not provided, attach targetRef to the trigger element's ref prop
|
160
|
+
state.content.onPointerEnter = useMergedEventCallbacks(state.content.onPointerEnter, clearDelayTimeout);
|
161
|
+
state.content.onPointerLeave = useMergedEventCallbacks(state.content.onPointerLeave, onLeaveTrigger);
|
162
|
+
const child = /*#__PURE__*/React.isValidElement(children) ? getTriggerChild(children) : undefined;
|
163
|
+
const triggerAriaProps = {};
|
184
164
|
|
185
|
-
|
186
|
-
|
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 if (!isServerSideRender) {
|
170
|
+
triggerAriaProps['aria-labelledby'] = state.content.id; // Always render the tooltip even if hidden, so that aria-labelledby refers to a valid element
|
187
171
|
|
188
|
-
|
189
|
-
|
190
|
-
}
|
172
|
+
state.shouldRenderTooltip = true;
|
173
|
+
}
|
174
|
+
} else if (relationship === 'description') {
|
175
|
+
if (!isServerSideRender) {
|
176
|
+
triggerAriaProps['aria-describedby'] = state.content.id; // Always render the tooltip even if hidden, so that aria-describedby refers to a valid element
|
191
177
|
|
192
|
-
|
193
|
-
// aria-label only works if the content is a string. Otherwise, need to use labelledby.
|
194
|
-
if (typeof state.content === 'string') {
|
195
|
-
triggerProps['aria-label'] = state.content;
|
196
|
-
} else {
|
197
|
-
state.triggerAriaAttribute = 'labelledby';
|
178
|
+
state.shouldRenderTooltip = true;
|
198
179
|
}
|
199
180
|
}
|
200
181
|
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
182
|
+
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
|
183
|
+
|
184
|
+
state.children = applyTriggerPropsToChildren(children, { ...triggerAriaProps,
|
185
|
+
...(child === null || child === void 0 ? void 0 : child.props),
|
186
|
+
// If the target prop is not provided, attach targetRef to the trigger element's ref prop
|
187
|
+
ref: positioningOptions.target === undefined ? childTargetRef : child === null || child === void 0 ? void 0 : child.ref,
|
188
|
+
onPointerEnter: useMergedEventCallbacks((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onPointerEnter, onEnterTrigger),
|
189
|
+
onPointerLeave: useMergedEventCallbacks((_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.onPointerLeave, onLeaveTrigger),
|
190
|
+
onFocus: useMergedEventCallbacks((_c = child === null || child === void 0 ? void 0 : child.props) === null || _c === void 0 ? void 0 : _c.onFocus, onEnterTrigger),
|
191
|
+
onBlur: useMergedEventCallbacks((_d = child === null || child === void 0 ? void 0 : child.props) === null || _d === void 0 ? void 0 : _d.onBlur, onLeaveTrigger)
|
192
|
+
});
|
212
193
|
return state;
|
213
194
|
};
|
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
195
|
//# sourceMappingURL=useTooltip.js.map
|