@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/package.json
CHANGED
@@ -1,10 +1,10 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-tooltip",
|
3
|
-
"version": "9.0.0-
|
3
|
+
"version": "9.0.0-rc.11",
|
4
4
|
"description": "React components for building web experiences",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
7
|
-
"typings": "
|
7
|
+
"typings": "dist/index.d.ts",
|
8
8
|
"sideEffects": false,
|
9
9
|
"repository": {
|
10
10
|
"type": "git",
|
@@ -19,36 +19,25 @@
|
|
19
19
|
"just": "just-scripts",
|
20
20
|
"lint": "just-scripts lint",
|
21
21
|
"start": "yarn storybook",
|
22
|
-
"test": "jest",
|
22
|
+
"test": "jest --passWithNoTests",
|
23
23
|
"docs": "api-extractor run --config=config/api-extractor.local.json --local",
|
24
|
-
"build:local": "tsc -p . --module esnext --emitDeclarationOnly && node
|
25
|
-
"storybook": "
|
24
|
+
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-tooltip/src && yarn docs",
|
25
|
+
"storybook": "node ../../../scripts/storybook/runner",
|
26
|
+
"type-check": "tsc -b tsconfig.json"
|
26
27
|
},
|
27
28
|
"devDependencies": {
|
28
|
-
"@fluentui/babel-make-styles": "9.0.0-nightly.f81b28ceb3.1",
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
30
|
-
"@fluentui/jest-serializer-make-styles": "9.0.0-nightly.f81b28ceb3.1",
|
31
30
|
"@fluentui/react-conformance": "*",
|
32
|
-
"@fluentui/react-conformance-
|
33
|
-
"@fluentui/scripts": "^1.0.0"
|
34
|
-
"@types/enzyme": "3.10.3",
|
35
|
-
"@types/enzyme-adapter-react-16": "1.0.3",
|
36
|
-
"@types/react": "16.9.42",
|
37
|
-
"@types/react-dom": "16.9.10",
|
38
|
-
"@types/react-test-renderer": "^16.0.0",
|
39
|
-
"enzyme": "~3.10.0",
|
40
|
-
"enzyme-adapter-react-16": "^1.15.0",
|
41
|
-
"react": "16.8.6",
|
42
|
-
"react-dom": "16.8.6",
|
43
|
-
"react-test-renderer": "^16.3.0"
|
31
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.7",
|
32
|
+
"@fluentui/scripts": "^1.0.0"
|
44
33
|
},
|
45
34
|
"dependencies": {
|
46
|
-
"@fluentui/react-
|
47
|
-
"@fluentui/react-
|
48
|
-
"@fluentui/react-
|
49
|
-
"@fluentui/react-
|
50
|
-
"@fluentui/react-
|
51
|
-
"@
|
35
|
+
"@fluentui/react-portal": "9.0.0-rc.11",
|
36
|
+
"@fluentui/react-positioning": "9.0.0-rc.10",
|
37
|
+
"@fluentui/react-shared-contexts": "9.0.0-rc.9",
|
38
|
+
"@fluentui/react-theme": "9.0.0-rc.9",
|
39
|
+
"@fluentui/react-utilities": "9.0.0-rc.9",
|
40
|
+
"@griffel/react": "1.0.5",
|
52
41
|
"tslib": "^2.1.0"
|
53
42
|
},
|
54
43
|
"peerDependencies": {
|
@@ -58,11 +47,17 @@
|
|
58
47
|
"react-dom": ">=16.8.0 <18.0.0"
|
59
48
|
},
|
60
49
|
"beachball": {
|
61
|
-
"tag": "beta",
|
62
50
|
"disallowedChangeTypes": [
|
63
51
|
"major",
|
64
52
|
"minor",
|
65
53
|
"patch"
|
66
54
|
]
|
55
|
+
},
|
56
|
+
"exports": {
|
57
|
+
".": {
|
58
|
+
"types": "./lib/index.d.ts",
|
59
|
+
"import": "./lib/index.js",
|
60
|
+
"require": "./lib-commonjs/index.js"
|
61
|
+
}
|
67
62
|
}
|
68
63
|
}
|
package/dist/react-tooltip.d.ts
DELETED
@@ -1,162 +0,0 @@
|
|
1
|
-
import type { ComponentProps } from '@fluentui/react-utilities';
|
2
|
-
import type { ComponentState } from '@fluentui/react-utilities';
|
3
|
-
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
4
|
-
import type { IntrinsicShorthandProps } from '@fluentui/react-utilities';
|
5
|
-
import type { PositioningShorthand } from '@fluentui/react-positioning';
|
6
|
-
import * as React_2 from 'react';
|
7
|
-
|
8
|
-
/**
|
9
|
-
* Data for the Tooltip's onVisibleChange event.
|
10
|
-
*/
|
11
|
-
export declare type OnVisibleChangeData = {
|
12
|
-
visible: boolean;
|
13
|
-
};
|
14
|
-
|
15
|
-
/**
|
16
|
-
* Render the final JSX of Tooltip
|
17
|
-
*/
|
18
|
-
export declare const renderTooltip: (state: TooltipState) => JSX.Element;
|
19
|
-
|
20
|
-
/**
|
21
|
-
* A tooltip provides light weight contextual information on top of its target element.
|
22
|
-
*/
|
23
|
-
export declare const Tooltip: ForwardRefComponent<TooltipProps>;
|
24
|
-
|
25
|
-
/**
|
26
|
-
* Properties and state for Tooltip
|
27
|
-
*/
|
28
|
-
export declare type TooltipCommons = {
|
29
|
-
/**
|
30
|
-
* A tooltip can appear with the default appearance or inverted.
|
31
|
-
* When not specified, the default appearance is used.
|
32
|
-
*/
|
33
|
-
appearance?: 'inverted';
|
34
|
-
/**
|
35
|
-
* The content displayed inside the tooltip.
|
36
|
-
*/
|
37
|
-
content: React_2.ReactNode;
|
38
|
-
/**
|
39
|
-
* Color variant with inverted colors
|
40
|
-
*
|
41
|
-
* @defaultvalue false
|
42
|
-
*/
|
43
|
-
inverted?: boolean;
|
44
|
-
/**
|
45
|
-
* Render an arrow pointing to the target element
|
46
|
-
*
|
47
|
-
* @defaultvalue false
|
48
|
-
*/
|
49
|
-
withArrow?: boolean;
|
50
|
-
/**
|
51
|
-
* Configure the positioning of the tooltip
|
52
|
-
*
|
53
|
-
* @defaultvalue above
|
54
|
-
*/
|
55
|
-
positioning?: PositioningShorthand;
|
56
|
-
/**
|
57
|
-
* Control the tooltip's visibility programatically.
|
58
|
-
*
|
59
|
-
* This can be used in conjunction with onVisibleChange to modify the tooltip's show and hide behavior.
|
60
|
-
*
|
61
|
-
* If not provided, the visibility will be controlled by the tooltip itself, based on hover and focus events on the
|
62
|
-
* trigger (child) element.
|
63
|
-
*/
|
64
|
-
visible?: boolean;
|
65
|
-
/**
|
66
|
-
* Notification when the visibility of the tooltip is changing
|
67
|
-
*/
|
68
|
-
onVisibleChange?: (event: React_2.PointerEvent<HTMLElement> | React_2.FocusEvent<HTMLElement> | undefined, data: OnVisibleChangeData) => void;
|
69
|
-
/**
|
70
|
-
* Specifies which aria attribute to set on the trigger element.
|
71
|
-
* * `label` - Set aria-label to the tooltip's content. Requires content to be a string; if not, uses `labelledby`.
|
72
|
-
* * `labelledby` - Set aria-labelledby to the tooltip's id. The id is generated if not provided.
|
73
|
-
* * `describedby` - Set aria-describedby to the tooltip's id. The id is generated if not provided.
|
74
|
-
* * null - Do not set any aria attributes on the trigger element.
|
75
|
-
*
|
76
|
-
* @defaultvalue label
|
77
|
-
*/
|
78
|
-
triggerAriaAttribute: 'label' | 'labelledby' | 'describedby' | null;
|
79
|
-
/**
|
80
|
-
* Delay before the tooltip is shown, in milliseconds.
|
81
|
-
*
|
82
|
-
* @defaultvalue 250
|
83
|
-
*/
|
84
|
-
showDelay: number;
|
85
|
-
/**
|
86
|
-
* Delay before the tooltip is hidden, in milliseconds.
|
87
|
-
*
|
88
|
-
* @defaultvalue 250
|
89
|
-
*/
|
90
|
-
hideDelay: number;
|
91
|
-
};
|
92
|
-
|
93
|
-
/**
|
94
|
-
* Properties for Tooltip
|
95
|
-
*/
|
96
|
-
export declare type TooltipProps = ComponentProps<TooltipSlots> & Partial<Omit<TooltipCommons, 'content'>> & Pick<TooltipCommons, 'content'>;
|
97
|
-
|
98
|
-
/**
|
99
|
-
* Slot properties for Tooltip
|
100
|
-
*/
|
101
|
-
export declare type TooltipSlots = {
|
102
|
-
root: Omit<IntrinsicShorthandProps<'div'>, 'children'> & {
|
103
|
-
/**
|
104
|
-
* The child is the element that triggers the Tooltip. It will have additional properties added,
|
105
|
-
* including events and aria properties.
|
106
|
-
* Alternatively, children can be a render function that takes the props and adds
|
107
|
-
* them to the appropriate elements.
|
108
|
-
*/
|
109
|
-
children?: (React_2.ReactElement<React_2.HTMLAttributes<HTMLElement>> & {
|
110
|
-
ref?: React_2.Ref<unknown>;
|
111
|
-
}) | ((props: TooltipTriggerProps) => React_2.ReactNode) | null;
|
112
|
-
};
|
113
|
-
};
|
114
|
-
|
115
|
-
/**
|
116
|
-
* State used in rendering Tooltip
|
117
|
-
*/
|
118
|
-
export declare type TooltipState = ComponentState<TooltipSlots> & TooltipCommons & {
|
119
|
-
/**
|
120
|
-
* Whether the tooltip should be rendered to the DOM.
|
121
|
-
*
|
122
|
-
* Normally the tooltip will only be rendered when visible. However, if
|
123
|
-
* triggerAriaAttribute is labelledby or describedby, the tooltip will
|
124
|
-
* always be rendered even when hidden so that those aria attributes
|
125
|
-
* to always refer to a valid DOM element.
|
126
|
-
*/
|
127
|
-
shouldRenderTooltip?: boolean;
|
128
|
-
/**
|
129
|
-
* Ref to the arrow element
|
130
|
-
*/
|
131
|
-
arrowRef?: React_2.Ref<HTMLDivElement>;
|
132
|
-
/**
|
133
|
-
* CSS class for the arrow element
|
134
|
-
*/
|
135
|
-
arrowClassName?: string;
|
136
|
-
};
|
137
|
-
|
138
|
-
/**
|
139
|
-
* The properties that are added to the trigger of the Tooltip
|
140
|
-
*/
|
141
|
-
export declare type TooltipTriggerProps = {
|
142
|
-
ref?: React_2.Ref<never>;
|
143
|
-
} & Pick<React_2.HTMLAttributes<HTMLElement>, 'onPointerEnter' | 'onPointerLeave' | 'onFocus' | 'onBlur' | 'aria-describedby' | 'aria-labelledby' | 'aria-label'>;
|
144
|
-
|
145
|
-
/**
|
146
|
-
* Create the state required to render Tooltip.
|
147
|
-
*
|
148
|
-
* The returned state can be modified with hooks such as useTooltipStyles,
|
149
|
-
* before being passed to renderTooltip.
|
150
|
-
*
|
151
|
-
* @param props - props from this instance of Tooltip
|
152
|
-
* @param ref - reference to root HTMLElement of Tooltip
|
153
|
-
* @param defaultProps - (optional) default prop values provided by the implementing type
|
154
|
-
*/
|
155
|
-
export declare const useTooltip: (props: TooltipProps, ref: React_2.Ref<HTMLDivElement>) => TooltipState;
|
156
|
-
|
157
|
-
/**
|
158
|
-
* Apply styling to the Tooltip slots based on the state
|
159
|
-
*/
|
160
|
-
export declare const useTooltipStyles: (state: TooltipState) => TooltipState;
|
161
|
-
|
162
|
-
export { }
|
package/lib/Tooltip.d.ts
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
export * from './components/Tooltip/index';
|
@@ -1,11 +0,0 @@
|
|
1
|
-
import { isConformant as baseIsConformant } from '@fluentui/react-conformance';
|
2
|
-
import makeStylesTests from '@fluentui/react-conformance-make-styles';
|
3
|
-
export function isConformant(testInfo) {
|
4
|
-
var defaultOptions = {
|
5
|
-
asPropHandlesRef: true,
|
6
|
-
componentPath: module.parent.filename.replace('.test', ''),
|
7
|
-
extraTests: makeStylesTests
|
8
|
-
};
|
9
|
-
baseIsConformant(defaultOptions, testInfo);
|
10
|
-
}
|
11
|
-
//# sourceMappingURL=isConformant.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../../src/common/isConformant.ts"],"names":[],"mappings":"AAAA,SAAS,YAAY,IAAI,gBAAzB,QAAiD,6BAAjD;AAEA,OAAO,eAAP,MAA4B,yCAA5B;AAEA,OAAM,SAAU,YAAV,CACJ,QADI,EACqF;AAEzF,MAAM,cAAc,GAAyC;AAC3D,IAAA,gBAAgB,EAAE,IADyC;AAE3D,IAAA,aAAa,EAAE,MAAO,CAAC,MAAR,CAAgB,QAAhB,CAAyB,OAAzB,CAAiC,OAAjC,EAA0C,EAA1C,CAF4C;AAG3D,IAAA,UAAU,EAAE;AAH+C,GAA7D;AAMA,EAAA,gBAAgB,CAAC,cAAD,EAAiB,QAAjB,CAAhB;AACD","sourceRoot":""}
|
@@ -1,6 +0,0 @@
|
|
1
|
-
import type { TooltipProps } from './Tooltip.types';
|
2
|
-
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
3
|
-
/**
|
4
|
-
* A tooltip provides light weight contextual information on top of its target element.
|
5
|
-
*/
|
6
|
-
export declare const Tooltip: ForwardRefComponent<TooltipProps>;
|
@@ -1,124 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import type { PositioningShorthand } from '@fluentui/react-positioning';
|
3
|
-
import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
|
4
|
-
/**
|
5
|
-
* Slot properties for Tooltip
|
6
|
-
*/
|
7
|
-
export declare type TooltipSlots = {
|
8
|
-
root: Omit<IntrinsicShorthandProps<'div'>, 'children'> & {
|
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
|
-
};
|
19
|
-
};
|
20
|
-
/**
|
21
|
-
* Properties and state for Tooltip
|
22
|
-
*/
|
23
|
-
export declare type TooltipCommons = {
|
24
|
-
/**
|
25
|
-
* A tooltip can appear with the default appearance or inverted.
|
26
|
-
* When not specified, the default appearance is used.
|
27
|
-
*/
|
28
|
-
appearance?: 'inverted';
|
29
|
-
/**
|
30
|
-
* The content displayed inside the tooltip.
|
31
|
-
*/
|
32
|
-
content: React.ReactNode;
|
33
|
-
/**
|
34
|
-
* Color variant with inverted colors
|
35
|
-
*
|
36
|
-
* @defaultvalue false
|
37
|
-
*/
|
38
|
-
inverted?: boolean;
|
39
|
-
/**
|
40
|
-
* Render an arrow pointing to the target element
|
41
|
-
*
|
42
|
-
* @defaultvalue false
|
43
|
-
*/
|
44
|
-
withArrow?: boolean;
|
45
|
-
/**
|
46
|
-
* Configure the positioning of the tooltip
|
47
|
-
*
|
48
|
-
* @defaultvalue above
|
49
|
-
*/
|
50
|
-
positioning?: PositioningShorthand;
|
51
|
-
/**
|
52
|
-
* Control the tooltip's visibility programatically.
|
53
|
-
*
|
54
|
-
* This can be used in conjunction with onVisibleChange to modify the tooltip's show and hide behavior.
|
55
|
-
*
|
56
|
-
* If not provided, the visibility will be controlled by the tooltip itself, based on hover and focus events on the
|
57
|
-
* trigger (child) element.
|
58
|
-
*/
|
59
|
-
visible?: boolean;
|
60
|
-
/**
|
61
|
-
* Notification when the visibility of the tooltip is changing
|
62
|
-
*/
|
63
|
-
onVisibleChange?: (event: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement> | undefined, data: OnVisibleChangeData) => void;
|
64
|
-
/**
|
65
|
-
* Specifies which aria attribute to set on the trigger element.
|
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.
|
70
|
-
*
|
71
|
-
* @defaultvalue label
|
72
|
-
*/
|
73
|
-
triggerAriaAttribute: 'label' | 'labelledby' | 'describedby' | null;
|
74
|
-
/**
|
75
|
-
* Delay before the tooltip is shown, in milliseconds.
|
76
|
-
*
|
77
|
-
* @defaultvalue 250
|
78
|
-
*/
|
79
|
-
showDelay: number;
|
80
|
-
/**
|
81
|
-
* Delay before the tooltip is hidden, in milliseconds.
|
82
|
-
*
|
83
|
-
* @defaultvalue 250
|
84
|
-
*/
|
85
|
-
hideDelay: number;
|
86
|
-
};
|
87
|
-
/**
|
88
|
-
* The properties that are added to the trigger of the Tooltip
|
89
|
-
*/
|
90
|
-
export declare type TooltipTriggerProps = {
|
91
|
-
ref?: React.Ref<never>;
|
92
|
-
} & Pick<React.HTMLAttributes<HTMLElement>, 'onPointerEnter' | 'onPointerLeave' | 'onFocus' | 'onBlur' | 'aria-describedby' | 'aria-labelledby' | 'aria-label'>;
|
93
|
-
/**
|
94
|
-
* Data for the Tooltip's onVisibleChange event.
|
95
|
-
*/
|
96
|
-
export declare type OnVisibleChangeData = {
|
97
|
-
visible: boolean;
|
98
|
-
};
|
99
|
-
/**
|
100
|
-
* Properties for Tooltip
|
101
|
-
*/
|
102
|
-
export declare type TooltipProps = ComponentProps<TooltipSlots> & Partial<Omit<TooltipCommons, 'content'>> & Pick<TooltipCommons, 'content'>;
|
103
|
-
/**
|
104
|
-
* State used in rendering Tooltip
|
105
|
-
*/
|
106
|
-
export declare type TooltipState = ComponentState<TooltipSlots> & TooltipCommons & {
|
107
|
-
/**
|
108
|
-
* 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
|
-
*/
|
115
|
-
shouldRenderTooltip?: boolean;
|
116
|
-
/**
|
117
|
-
* Ref to the arrow element
|
118
|
-
*/
|
119
|
-
arrowRef?: React.Ref<HTMLDivElement>;
|
120
|
-
/**
|
121
|
-
* CSS class for the arrow element
|
122
|
-
*/
|
123
|
-
arrowClassName?: string;
|
124
|
-
};
|
@@ -1,13 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import type { TooltipProps, TooltipState } from './Tooltip.types';
|
3
|
-
/**
|
4
|
-
* Create the state required to render Tooltip.
|
5
|
-
*
|
6
|
-
* The returned state can be modified with hooks such as useTooltipStyles,
|
7
|
-
* before being passed to renderTooltip.
|
8
|
-
*
|
9
|
-
* @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
|
-
*/
|
13
|
-
export declare const useTooltip: (props: TooltipProps, ref: React.Ref<HTMLDivElement>) => TooltipState;
|
package/lib/index.d.ts
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
export * from './Tooltip';
|
@@ -1 +0,0 @@
|
|
1
|
-
export * from './components/Tooltip/index';
|
@@ -1,22 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.isConformant = void 0;
|
7
|
-
|
8
|
-
var react_conformance_1 = /*#__PURE__*/require("@fluentui/react-conformance");
|
9
|
-
|
10
|
-
var react_conformance_make_styles_1 = /*#__PURE__*/require("@fluentui/react-conformance-make-styles");
|
11
|
-
|
12
|
-
function isConformant(testInfo) {
|
13
|
-
var defaultOptions = {
|
14
|
-
asPropHandlesRef: true,
|
15
|
-
componentPath: module.parent.filename.replace('.test', ''),
|
16
|
-
extraTests: react_conformance_make_styles_1.default
|
17
|
-
};
|
18
|
-
react_conformance_1.isConformant(defaultOptions, testInfo);
|
19
|
-
}
|
20
|
-
|
21
|
-
exports.isConformant = isConformant;
|
22
|
-
//# sourceMappingURL=isConformant.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../../src/common/isConformant.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAEA,IAAA,+BAAA,gBAAA,OAAA,CAAA,yCAAA,CAAA;;AAEA,SAAgB,YAAhB,CACE,QADF,EAC2F;AAEzF,MAAM,cAAc,GAAyC;AAC3D,IAAA,gBAAgB,EAAE,IADyC;AAE3D,IAAA,aAAa,EAAE,MAAO,CAAC,MAAR,CAAgB,QAAhB,CAAyB,OAAzB,CAAiC,OAAjC,EAA0C,EAA1C,CAF4C;AAG3D,IAAA,UAAU,EAAE,+BAAA,CAAA;AAH+C,GAA7D;AAMA,EAAA,mBAAA,CAAA,YAAA,CAAiB,cAAjB,EAAiC,QAAjC;AACD;;AAVD,OAAA,CAAA,YAAA,GAAA,YAAA","sourceRoot":""}
|
@@ -1,6 +0,0 @@
|
|
1
|
-
import type { TooltipProps } from './Tooltip.types';
|
2
|
-
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
3
|
-
/**
|
4
|
-
* A tooltip provides light weight contextual information on top of its target element.
|
5
|
-
*/
|
6
|
-
export declare const Tooltip: ForwardRefComponent<TooltipProps>;
|
@@ -1,124 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import type { PositioningShorthand } from '@fluentui/react-positioning';
|
3
|
-
import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
|
4
|
-
/**
|
5
|
-
* Slot properties for Tooltip
|
6
|
-
*/
|
7
|
-
export declare type TooltipSlots = {
|
8
|
-
root: Omit<IntrinsicShorthandProps<'div'>, 'children'> & {
|
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
|
-
};
|
19
|
-
};
|
20
|
-
/**
|
21
|
-
* Properties and state for Tooltip
|
22
|
-
*/
|
23
|
-
export declare type TooltipCommons = {
|
24
|
-
/**
|
25
|
-
* A tooltip can appear with the default appearance or inverted.
|
26
|
-
* When not specified, the default appearance is used.
|
27
|
-
*/
|
28
|
-
appearance?: 'inverted';
|
29
|
-
/**
|
30
|
-
* The content displayed inside the tooltip.
|
31
|
-
*/
|
32
|
-
content: React.ReactNode;
|
33
|
-
/**
|
34
|
-
* Color variant with inverted colors
|
35
|
-
*
|
36
|
-
* @defaultvalue false
|
37
|
-
*/
|
38
|
-
inverted?: boolean;
|
39
|
-
/**
|
40
|
-
* Render an arrow pointing to the target element
|
41
|
-
*
|
42
|
-
* @defaultvalue false
|
43
|
-
*/
|
44
|
-
withArrow?: boolean;
|
45
|
-
/**
|
46
|
-
* Configure the positioning of the tooltip
|
47
|
-
*
|
48
|
-
* @defaultvalue above
|
49
|
-
*/
|
50
|
-
positioning?: PositioningShorthand;
|
51
|
-
/**
|
52
|
-
* Control the tooltip's visibility programatically.
|
53
|
-
*
|
54
|
-
* This can be used in conjunction with onVisibleChange to modify the tooltip's show and hide behavior.
|
55
|
-
*
|
56
|
-
* If not provided, the visibility will be controlled by the tooltip itself, based on hover and focus events on the
|
57
|
-
* trigger (child) element.
|
58
|
-
*/
|
59
|
-
visible?: boolean;
|
60
|
-
/**
|
61
|
-
* Notification when the visibility of the tooltip is changing
|
62
|
-
*/
|
63
|
-
onVisibleChange?: (event: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement> | undefined, data: OnVisibleChangeData) => void;
|
64
|
-
/**
|
65
|
-
* Specifies which aria attribute to set on the trigger element.
|
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.
|
70
|
-
*
|
71
|
-
* @defaultvalue label
|
72
|
-
*/
|
73
|
-
triggerAriaAttribute: 'label' | 'labelledby' | 'describedby' | null;
|
74
|
-
/**
|
75
|
-
* Delay before the tooltip is shown, in milliseconds.
|
76
|
-
*
|
77
|
-
* @defaultvalue 250
|
78
|
-
*/
|
79
|
-
showDelay: number;
|
80
|
-
/**
|
81
|
-
* Delay before the tooltip is hidden, in milliseconds.
|
82
|
-
*
|
83
|
-
* @defaultvalue 250
|
84
|
-
*/
|
85
|
-
hideDelay: number;
|
86
|
-
};
|
87
|
-
/**
|
88
|
-
* The properties that are added to the trigger of the Tooltip
|
89
|
-
*/
|
90
|
-
export declare type TooltipTriggerProps = {
|
91
|
-
ref?: React.Ref<never>;
|
92
|
-
} & Pick<React.HTMLAttributes<HTMLElement>, 'onPointerEnter' | 'onPointerLeave' | 'onFocus' | 'onBlur' | 'aria-describedby' | 'aria-labelledby' | 'aria-label'>;
|
93
|
-
/**
|
94
|
-
* Data for the Tooltip's onVisibleChange event.
|
95
|
-
*/
|
96
|
-
export declare type OnVisibleChangeData = {
|
97
|
-
visible: boolean;
|
98
|
-
};
|
99
|
-
/**
|
100
|
-
* Properties for Tooltip
|
101
|
-
*/
|
102
|
-
export declare type TooltipProps = ComponentProps<TooltipSlots> & Partial<Omit<TooltipCommons, 'content'>> & Pick<TooltipCommons, 'content'>;
|
103
|
-
/**
|
104
|
-
* State used in rendering Tooltip
|
105
|
-
*/
|
106
|
-
export declare type TooltipState = ComponentState<TooltipSlots> & TooltipCommons & {
|
107
|
-
/**
|
108
|
-
* 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
|
-
*/
|
115
|
-
shouldRenderTooltip?: boolean;
|
116
|
-
/**
|
117
|
-
* Ref to the arrow element
|
118
|
-
*/
|
119
|
-
arrowRef?: React.Ref<HTMLDivElement>;
|
120
|
-
/**
|
121
|
-
* CSS class for the arrow element
|
122
|
-
*/
|
123
|
-
arrowClassName?: string;
|
124
|
-
};
|
@@ -1,13 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import type { TooltipProps, TooltipState } from './Tooltip.types';
|
3
|
-
/**
|
4
|
-
* Create the state required to render Tooltip.
|
5
|
-
*
|
6
|
-
* The returned state can be modified with hooks such as useTooltipStyles,
|
7
|
-
* before being passed to renderTooltip.
|
8
|
-
*
|
9
|
-
* @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
|
-
*/
|
13
|
-
export declare const useTooltip: (props: TooltipProps, ref: React.Ref<HTMLDivElement>) => TooltipState;
|
package/lib-commonjs/index.d.ts
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
export * from './Tooltip';
|