@fluentui/react-tooltip 9.0.0-rc.9 → 9.0.2
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 +365 -1
- package/CHANGELOG.md +116 -2
- package/dist/index.d.ts +42 -51
- package/{lib → dist}/tsdoc-metadata.json +0 -0
- package/lib/components/Tooltip/Tooltip.js.map +1 -1
- package/lib/components/Tooltip/Tooltip.types.js.map +1 -1
- package/lib/components/Tooltip/renderTooltip.js.map +1 -1
- package/lib/components/Tooltip/useTooltip.js +19 -16
- package/lib/components/Tooltip/useTooltip.js.map +1 -1
- package/lib/components/Tooltip/useTooltipStyles.js +17 -24
- package/lib/components/Tooltip/useTooltipStyles.js.map +1 -1
- package/lib/index.js +1 -2
- package/lib/index.js.map +1 -1
- package/lib-commonjs/components/Tooltip/Tooltip.js.map +1 -1
- package/lib-commonjs/components/Tooltip/renderTooltip.js.map +1 -1
- package/lib-commonjs/components/Tooltip/useTooltip.js +18 -15
- package/lib-commonjs/components/Tooltip/useTooltip.js.map +1 -1
- package/lib-commonjs/components/Tooltip/useTooltipStyles.js +18 -25
- package/lib-commonjs/components/Tooltip/useTooltipStyles.js.map +1 -1
- package/lib-commonjs/index.js +1 -8
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +10 -12
- package/lib/Tooltip.d.ts +0 -1
- package/lib/components/Tooltip/Tooltip.d.ts +0 -7
- package/lib/components/Tooltip/Tooltip.types.d.ts +0 -118
- package/lib/components/Tooltip/index.d.ts +0 -5
- package/lib/components/Tooltip/private/constants.d.ts +0 -12
- package/lib/components/Tooltip/renderTooltip.d.ts +0 -5
- package/lib/components/Tooltip/useTooltip.d.ts +0 -10
- package/lib/components/Tooltip/useTooltipStyles.d.ts +0 -11
- package/lib/index.d.ts +0 -2
- package/lib-commonjs/Tooltip.d.ts +0 -1
- package/lib-commonjs/components/Tooltip/Tooltip.d.ts +0 -7
- package/lib-commonjs/components/Tooltip/Tooltip.types.d.ts +0 -118
- package/lib-commonjs/components/Tooltip/index.d.ts +0 -5
- package/lib-commonjs/components/Tooltip/private/constants.d.ts +0 -12
- package/lib-commonjs/components/Tooltip/renderTooltip.d.ts +0 -5
- package/lib-commonjs/components/Tooltip/useTooltip.d.ts +0 -10
- package/lib-commonjs/components/Tooltip/useTooltipStyles.d.ts +0 -11
- package/lib-commonjs/index.d.ts +0 -2
@@ -3,7 +3,7 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.useTooltipStyles_unstable = exports.tooltipClassNames =
|
6
|
+
exports.useTooltipStyles_unstable = exports.tooltipClassNames = void 0;
|
7
7
|
|
8
8
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
9
9
|
|
@@ -12,12 +12,7 @@ const react_positioning_1 = /*#__PURE__*/require("@fluentui/react-positioning");
|
|
12
12
|
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
13
13
|
|
14
14
|
const constants_1 = /*#__PURE__*/require("./private/constants");
|
15
|
-
/**
|
16
|
-
* @deprecated Use `tooltipClassNames.root` instead.
|
17
|
-
*/
|
18
|
-
|
19
15
|
|
20
|
-
exports.tooltipClassName = 'fui-Tooltip';
|
21
16
|
exports.tooltipClassNames = {
|
22
17
|
content: 'fui-Tooltip__content'
|
23
18
|
};
|
@@ -72,21 +67,21 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
72
67
|
"Bj3rh1h": "f1bsuimh",
|
73
68
|
"a9b677": "f1ekdpwm",
|
74
69
|
"Bqenvij": "f83vc9z",
|
75
|
-
"
|
76
|
-
"
|
77
|
-
"
|
78
|
-
"
|
79
|
-
"
|
80
|
-
"
|
81
|
-
"
|
82
|
-
"
|
83
|
-
"
|
84
|
-
"
|
85
|
-
"
|
86
|
-
"
|
87
|
-
"
|
88
|
-
"
|
89
|
-
"
|
70
|
+
"Ftih45": "f1wl9k8s",
|
71
|
+
"B1puzpu": "f1wkw4r9",
|
72
|
+
"Brfgrao": "f1j7ml58",
|
73
|
+
"Bcvre1j": "fyl8oag",
|
74
|
+
"Ccq8qp": "frdoeuz",
|
75
|
+
"Baz25je": "fb81m9q",
|
76
|
+
"cmx5o7": "f1ljr5q2",
|
77
|
+
"B4f6apu": "fyfemzf",
|
78
|
+
"m598lv": "focyt6c",
|
79
|
+
"Bk5zm6e": "fnhxbxj",
|
80
|
+
"y0oebl": "fdw6hkg",
|
81
|
+
"qa3bma": "f11yjt3y",
|
82
|
+
"Bqjgrrk": "f1172wan",
|
83
|
+
"Budzafs": ["f9e5op9", "f112wvtl"],
|
84
|
+
"Hv9wc6": "ftj5xct",
|
90
85
|
"hl6cv3": "f1773hnp",
|
91
86
|
"Bh2vraf": "f1n8855c",
|
92
87
|
"yayu3t": "f1v7783n",
|
@@ -97,7 +92,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
97
92
|
"Bwwlvwl": "fm1ycve"
|
98
93
|
}
|
99
94
|
}, {
|
100
|
-
"d": [".fjseox{display:none;}", ".f1ewtqcl{box-sizing:border-box;}", ".f132xexn{max-width:240px;}", ".f158kwzp{cursor:default;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f10ra9hq{padding-top:4px;}", ".fd9xhir{padding-right:11px;}", ".f1jlaasf{padding-left:11px;}", ".f1d7kygh{padding-bottom:6px;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxeb0a7{-webkit-filter:drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 4px 8px var(--colorNeutralShadowKey));filter:drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 4px 8px var(--colorNeutralShadowKey));}", ".ftgm304{display:block;}", ".f5pduvr{background-color:var(--colorNeutralBackgroundInverted);}", ".fqpbvvt{color:var(--colorNeutralForegroundInverted);}", ".f1euv43f{position:absolute;}", ".f1u2r49w{background-color:inherit;}", ".fd7fpy0{visibility:hidden;}", ".f1bsuimh{z-index:-1;}", ".f1ekdpwm{width:8.484px;}", ".f83vc9z{height:8.484px;}", ".
|
95
|
+
"d": [".fjseox{display:none;}", ".f1ewtqcl{box-sizing:border-box;}", ".f132xexn{max-width:240px;}", ".f158kwzp{cursor:default;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f10ra9hq{padding-top:4px;}", ".fd9xhir{padding-right:11px;}", ".f1jlaasf{padding-left:11px;}", ".f1d7kygh{padding-bottom:6px;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxeb0a7{-webkit-filter:drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 4px 8px var(--colorNeutralShadowKey));filter:drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 4px 8px var(--colorNeutralShadowKey));}", ".ftgm304{display:block;}", ".f5pduvr{background-color:var(--colorNeutralBackgroundInverted);}", ".fqpbvvt{color:var(--colorNeutralForegroundInverted);}", ".f1euv43f{position:absolute;}", ".f1u2r49w{background-color:inherit;}", ".fd7fpy0{visibility:hidden;}", ".f1bsuimh{z-index:-1;}", ".f1ekdpwm{width:8.484px;}", ".f83vc9z{height:8.484px;}", ".f1wl9k8s::before{content:\"\";}", ".f1wkw4r9::before{visibility:visible;}", ".f1j7ml58::before{position:absolute;}", ".fyl8oag::before{box-sizing:border-box;}", ".frdoeuz::before{width:inherit;}", ".fb81m9q::before{height:inherit;}", ".f1ljr5q2::before{background-color:inherit;}", ".fyfemzf::before{border-right-width:1px;}", ".focyt6c::before{border-right-style:solid;}", ".fnhxbxj::before{border-right-color:var(--colorTransparentStroke);}", ".fdw6hkg::before{border-bottom-width:1px;}", ".f11yjt3y::before{border-bottom-style:solid;}", ".f1172wan::before{border-bottom-color:var(--colorTransparentStroke);}", ".f9e5op9::before{border-bottom-right-radius:var(--borderRadiusSmall);}", ".f112wvtl::before{border-bottom-left-radius:var(--borderRadiusSmall);}", ".ftj5xct::before{-webkit-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);-moz-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);-ms-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);}", "[data-popper-placement^=\"top\"] .f1773hnp{bottom:-1px;}", "[data-popper-placement^=\"top\"] .f1n8855c{--angle:0;}", "[data-popper-placement^=\"right\"] .f1v7783n{left:-1px;}", "[data-popper-placement^=\"right\"] .fsw6im5{--angle:90deg;}", "[data-popper-placement^=\"bottom\"] .fh2hsk5{top:-1px;}", "[data-popper-placement^=\"bottom\"] .f159pzir{--angle:180deg;}", "[data-popper-placement^=\"left\"] .f11yvu4{right:-1px;}", "[data-popper-placement^=\"left\"] .fm1ycve{--angle:270deg;}"]
|
101
96
|
});
|
102
97
|
/**
|
103
98
|
* Apply styling to the Tooltip slots based on the state
|
@@ -106,9 +101,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
106
101
|
|
107
102
|
const useTooltipStyles_unstable = state => {
|
108
103
|
const styles = useStyles();
|
109
|
-
state.content.className = react_1.mergeClasses(
|
110
|
-
/* eslint-disable-next-line deprecation/deprecation */
|
111
|
-
exports.tooltipClassName, exports.tooltipClassNames.content, styles.root, state.appearance === 'inverted' && styles.inverted, state.visible && styles.visible, state.content.className);
|
104
|
+
state.content.className = react_1.mergeClasses(exports.tooltipClassNames.content, styles.root, state.appearance === 'inverted' && styles.inverted, state.visible && styles.visible, state.content.className);
|
112
105
|
state.arrowClassName = styles.arrow;
|
113
106
|
return state;
|
114
107
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/Tooltip/useTooltipStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA
|
1
|
+
{"version":3,"sources":["components/Tooltip/useTooltipStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AAIa,OAAA,CAAA,iBAAA,GAAkD;EAC7D,OAAO,EAAE;AADoD,CAAlD;AAIb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAkCA;;AAEG;;;AACI,MAAM,yBAAyB,GAAI,KAAD,IAAsC;EAC7E,MAAM,MAAM,GAAG,SAAS,EAAxB;EAEA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,OAAA,CAAA,YAAA,CACxB,OAAA,CAAA,iBAAA,CAAkB,OADM,EAExB,MAAM,CAAC,IAFiB,EAGxB,KAAK,CAAC,UAAN,KAAqB,UAArB,IAAmC,MAAM,CAAC,QAHlB,EAIxB,KAAK,CAAC,OAAN,IAAiB,MAAM,CAAC,OAJA,EAKxB,KAAK,CAAC,OAAN,CAAc,SALU,CAA1B;EAQA,KAAK,CAAC,cAAN,GAAuB,MAAM,CAAC,KAA9B;EAEA,OAAO,KAAP;AACD,CAdM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createArrowStyles } from '@fluentui/react-positioning';\nimport { tokens } from '@fluentui/react-theme';\nimport { arrowHeight } from './private/constants';\nimport type { TooltipSlots, TooltipState } from './Tooltip.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tooltipClassNames: SlotClassNames<TooltipSlots> = {\n content: 'fui-Tooltip__content',\n};\n\n/**\n * Styles for the tooltip\n */\nconst useStyles = makeStyles({\n root: {\n display: 'none',\n boxSizing: 'border-box',\n maxWidth: '240px',\n cursor: 'default',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n ...shorthands.padding('4px', '11px', '6px', '11px'), // '5px 12px 7px 12px' minus the border width '1px'\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n\n // TODO need to add versions of tokens.alias.shadow.shadow8, etc. that work with filter\n filter:\n `drop-shadow(0 0 2px ${tokens.colorNeutralShadowAmbient}) ` +\n `drop-shadow(0 4px 8px ${tokens.colorNeutralShadowKey})`,\n },\n\n visible: {\n display: 'block',\n },\n\n inverted: {\n backgroundColor: tokens.colorNeutralBackgroundInverted,\n color: tokens.colorNeutralForegroundInverted,\n },\n\n arrow: createArrowStyles({ arrowHeight }),\n});\n\n/**\n * Apply styling to the Tooltip slots based on the state\n */\nexport const useTooltipStyles_unstable = (state: TooltipState): TooltipState => {\n const styles = useStyles();\n\n state.content.className = mergeClasses(\n tooltipClassNames.content,\n styles.root,\n state.appearance === 'inverted' && styles.inverted,\n state.visible && styles.visible,\n state.content.className,\n );\n\n state.arrowClassName = styles.arrow;\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
package/lib-commonjs/index.js
CHANGED
@@ -3,7 +3,7 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.useTooltip_unstable = exports.useTooltipStyles_unstable = exports.tooltipClassNames = exports.
|
6
|
+
exports.useTooltip_unstable = exports.useTooltipStyles_unstable = exports.tooltipClassNames = exports.renderTooltip_unstable = exports.Tooltip = void 0;
|
7
7
|
|
8
8
|
var Tooltip_1 = /*#__PURE__*/require("./Tooltip");
|
9
9
|
|
@@ -18,13 +18,6 @@ Object.defineProperty(exports, "renderTooltip_unstable", {
|
|
18
18
|
get: function () {
|
19
19
|
return Tooltip_1.renderTooltip_unstable;
|
20
20
|
}
|
21
|
-
}); // eslint-disable-next-line deprecation/deprecation
|
22
|
-
|
23
|
-
Object.defineProperty(exports, "tooltipClassName", {
|
24
|
-
enumerable: true,
|
25
|
-
get: function () {
|
26
|
-
return Tooltip_1.tooltipClassName;
|
27
|
-
}
|
28
21
|
});
|
29
22
|
Object.defineProperty(exports, "tooltipClassNames", {
|
30
23
|
enumerable: true,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,SAAA,EAAA;
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,SAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,OAAA;EAAO;AAAP,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,sBAAA;EAAsB;AAAtB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,iBAAA;EAAiB;AAAjB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,yBAAA;EAAyB;AAAzB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,qBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,mBAAA;EAAmB;AAAnB,CAAA","sourcesContent":["export {\n Tooltip,\n renderTooltip_unstable,\n tooltipClassNames,\n useTooltipStyles_unstable,\n useTooltip_unstable,\n} from './Tooltip';\nexport type { OnVisibleChangeData, TooltipProps, TooltipSlots, TooltipState, TooltipTriggerProps } from './Tooltip';\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
@@ -1,10 +1,10 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-tooltip",
|
3
|
-
"version": "9.0.
|
3
|
+
"version": "9.0.2",
|
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",
|
@@ -28,16 +28,16 @@
|
|
28
28
|
"devDependencies": {
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
30
30
|
"@fluentui/react-conformance": "*",
|
31
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
31
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.11",
|
32
32
|
"@fluentui/scripts": "^1.0.0"
|
33
33
|
},
|
34
34
|
"dependencies": {
|
35
|
-
"@fluentui/react-portal": "9.0.
|
36
|
-
"@fluentui/react-positioning": "9.
|
37
|
-
"@fluentui/react-shared-contexts": "9.0.0
|
38
|
-
"@fluentui/react-theme": "9.0.0
|
39
|
-
"@fluentui/react-utilities": "9.0.0
|
40
|
-
"@griffel/react": "1.0
|
35
|
+
"@fluentui/react-portal": "^9.0.2",
|
36
|
+
"@fluentui/react-positioning": "^9.1.0",
|
37
|
+
"@fluentui/react-shared-contexts": "^9.0.0",
|
38
|
+
"@fluentui/react-theme": "^9.0.0",
|
39
|
+
"@fluentui/react-utilities": "^9.0.1-0",
|
40
|
+
"@griffel/react": "^1.2.0",
|
41
41
|
"tslib": "^2.1.0"
|
42
42
|
},
|
43
43
|
"peerDependencies": {
|
@@ -48,9 +48,7 @@
|
|
48
48
|
},
|
49
49
|
"beachball": {
|
50
50
|
"disallowedChangeTypes": [
|
51
|
-
"major"
|
52
|
-
"minor",
|
53
|
-
"patch"
|
51
|
+
"major"
|
54
52
|
]
|
55
53
|
},
|
56
54
|
"exports": {
|
package/lib/Tooltip.d.ts
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
export * from './components/Tooltip/index';
|
@@ -1,7 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import type { TooltipProps } from './Tooltip.types';
|
3
|
-
import type { FluentTriggerComponent } from '@fluentui/react-utilities';
|
4
|
-
/**
|
5
|
-
* A tooltip provides light weight contextual information on top of its target element.
|
6
|
-
*/
|
7
|
-
export declare const Tooltip: React.FC<TooltipProps> & FluentTriggerComponent;
|
@@ -1,118 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import type { PositioningShorthand } from '@fluentui/react-positioning';
|
3
|
-
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
4
|
-
import type { PortalProps } from '@fluentui/react-portal';
|
5
|
-
/**
|
6
|
-
* Slot properties for Tooltip
|
7
|
-
*/
|
8
|
-
export declare type TooltipSlots = {
|
9
|
-
/**
|
10
|
-
* The text or JSX content of the tooltip.
|
11
|
-
*/
|
12
|
-
content: NonNullable<Slot<'div'>>;
|
13
|
-
};
|
14
|
-
/**
|
15
|
-
* Properties and state for Tooltip
|
16
|
-
*/
|
17
|
-
declare type TooltipCommons = Pick<PortalProps, 'mountNode'> & {
|
18
|
-
/**
|
19
|
-
* (Required) Specifies whether this tooltip is acting as the description or label of its trigger element.
|
20
|
-
*
|
21
|
-
* * `label` - The tooltip sets the trigger's aria-label or aria-labelledby attribute. This is useful for buttons
|
22
|
-
* displaying only an icon, for example.
|
23
|
-
* * `description` - The tooltip sets the trigger's aria-description or aria-describedby attribute.
|
24
|
-
* * `inaccessible` - No aria attributes are set on the trigger. This makes the tooltip's content inaccessible to
|
25
|
-
* screen readers, and should only be used if the tooltip's text is available by some other means.
|
26
|
-
*/
|
27
|
-
relationship: 'label' | 'description' | 'inaccessible';
|
28
|
-
/**
|
29
|
-
* The tooltip's visual appearance.
|
30
|
-
* * `normal` - Uses the theme's background and text colors.
|
31
|
-
* * `inverted` - Higher contrast variant that uses the theme's inverted colors.
|
32
|
-
*
|
33
|
-
* @defaultvalue normal
|
34
|
-
*/
|
35
|
-
appearance?: 'normal' | 'inverted';
|
36
|
-
/**
|
37
|
-
* Render an arrow pointing to the target element
|
38
|
-
*
|
39
|
-
* @defaultvalue false
|
40
|
-
*/
|
41
|
-
withArrow?: boolean;
|
42
|
-
/**
|
43
|
-
* Configure the positioning of the tooltip
|
44
|
-
*
|
45
|
-
* @defaultvalue above
|
46
|
-
*/
|
47
|
-
positioning?: PositioningShorthand;
|
48
|
-
/**
|
49
|
-
* Control the tooltip's visibility programatically.
|
50
|
-
*
|
51
|
-
* This can be used in conjunction with onVisibleChange to modify the tooltip's show and hide behavior.
|
52
|
-
*
|
53
|
-
* If not provided, the visibility will be controlled by the tooltip itself, based on hover and focus events on the
|
54
|
-
* trigger (child) element.
|
55
|
-
*/
|
56
|
-
visible?: boolean;
|
57
|
-
/**
|
58
|
-
* Notification when the visibility of the tooltip is changing
|
59
|
-
*/
|
60
|
-
onVisibleChange?: (event: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement> | undefined, data: OnVisibleChangeData) => void;
|
61
|
-
/**
|
62
|
-
* Delay before the tooltip is shown, in milliseconds.
|
63
|
-
*
|
64
|
-
* @defaultvalue 250
|
65
|
-
*/
|
66
|
-
showDelay: number;
|
67
|
-
/**
|
68
|
-
* Delay before the tooltip is hidden, in milliseconds.
|
69
|
-
*
|
70
|
-
* @defaultvalue 250
|
71
|
-
*/
|
72
|
-
hideDelay: number;
|
73
|
-
};
|
74
|
-
/**
|
75
|
-
* The properties that are added to the trigger of the Tooltip
|
76
|
-
*/
|
77
|
-
export declare type TooltipTriggerProps = {
|
78
|
-
ref?: React.Ref<never>;
|
79
|
-
} & Pick<React.HTMLAttributes<HTMLElement>, 'onPointerEnter' | 'onPointerLeave' | 'onFocus' | 'onBlur' | 'aria-describedby' | 'aria-labelledby' | 'aria-label'>;
|
80
|
-
/**
|
81
|
-
* Data for the Tooltip's onVisibleChange event.
|
82
|
-
*/
|
83
|
-
export declare type OnVisibleChangeData = {
|
84
|
-
visible: boolean;
|
85
|
-
};
|
86
|
-
/**
|
87
|
-
* Properties for Tooltip
|
88
|
-
*/
|
89
|
-
export declare type TooltipProps = ComponentProps<TooltipSlots> & Partial<Omit<TooltipCommons, 'relationship'>> & Pick<TooltipCommons, 'relationship'> & {
|
90
|
-
/**
|
91
|
-
* The tooltip can have a single JSX child, or a render function that accepts TooltipTriggerProps.
|
92
|
-
*
|
93
|
-
* If no child is provided, the tooltip's target must be set with the `positioning` prop, and its
|
94
|
-
* visibility must be controlled with the `visible` prop.
|
95
|
-
*/
|
96
|
-
children?: (React.ReactElement & {
|
97
|
-
ref?: React.Ref<unknown>;
|
98
|
-
}) | ((props: TooltipTriggerProps) => React.ReactElement | null) | null;
|
99
|
-
};
|
100
|
-
/**
|
101
|
-
* State used in rendering Tooltip
|
102
|
-
*/
|
103
|
-
export declare type TooltipState = ComponentState<TooltipSlots> & TooltipCommons & {
|
104
|
-
children?: React.ReactElement | null;
|
105
|
-
/**
|
106
|
-
* Whether the tooltip should be rendered to the DOM.
|
107
|
-
*/
|
108
|
-
shouldRenderTooltip?: boolean;
|
109
|
-
/**
|
110
|
-
* Ref to the arrow element
|
111
|
-
*/
|
112
|
-
arrowRef?: React.Ref<HTMLDivElement>;
|
113
|
-
/**
|
114
|
-
* CSS class for the arrow element
|
115
|
-
*/
|
116
|
-
arrowClassName?: string;
|
117
|
-
};
|
118
|
-
export {};
|
@@ -1,12 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* The height of the tooltip's arrow in pixels.
|
3
|
-
*/
|
4
|
-
export declare const arrowHeight = 6;
|
5
|
-
/**
|
6
|
-
* The default value of the tooltip's border radius (borderRadiusMedium).
|
7
|
-
*
|
8
|
-
* Unfortunately, Popper requires it to be specified as a variable instead of using CSS.
|
9
|
-
* While we could use getComputedStyle, that adds a performance penalty for something that
|
10
|
-
* will likely never change.
|
11
|
-
*/
|
12
|
-
export declare const tooltipBorderRadius = 4;
|
@@ -1,10 +0,0 @@
|
|
1
|
-
import type { TooltipProps, TooltipState } from './Tooltip.types';
|
2
|
-
/**
|
3
|
-
* Create the state required to render Tooltip.
|
4
|
-
*
|
5
|
-
* The returned state can be modified with hooks such as useTooltipStyles_unstable,
|
6
|
-
* before being passed to renderTooltip_unstable.
|
7
|
-
*
|
8
|
-
* @param props - props from this instance of Tooltip
|
9
|
-
*/
|
10
|
-
export declare const useTooltip_unstable: (props: TooltipProps) => TooltipState;
|
@@ -1,11 +0,0 @@
|
|
1
|
-
import type { TooltipSlots, TooltipState } from './Tooltip.types';
|
2
|
-
import type { SlotClassNames } from '@fluentui/react-utilities';
|
3
|
-
/**
|
4
|
-
* @deprecated Use `tooltipClassNames.root` instead.
|
5
|
-
*/
|
6
|
-
export declare const tooltipClassName = "fui-Tooltip";
|
7
|
-
export declare const tooltipClassNames: SlotClassNames<TooltipSlots>;
|
8
|
-
/**
|
9
|
-
* Apply styling to the Tooltip slots based on the state
|
10
|
-
*/
|
11
|
-
export declare const useTooltipStyles_unstable: (state: TooltipState) => TooltipState;
|
package/lib/index.d.ts
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
export * from './components/Tooltip/index';
|
@@ -1,7 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import type { TooltipProps } from './Tooltip.types';
|
3
|
-
import type { FluentTriggerComponent } from '@fluentui/react-utilities';
|
4
|
-
/**
|
5
|
-
* A tooltip provides light weight contextual information on top of its target element.
|
6
|
-
*/
|
7
|
-
export declare const Tooltip: React.FC<TooltipProps> & FluentTriggerComponent;
|
@@ -1,118 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import type { PositioningShorthand } from '@fluentui/react-positioning';
|
3
|
-
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
4
|
-
import type { PortalProps } from '@fluentui/react-portal';
|
5
|
-
/**
|
6
|
-
* Slot properties for Tooltip
|
7
|
-
*/
|
8
|
-
export declare type TooltipSlots = {
|
9
|
-
/**
|
10
|
-
* The text or JSX content of the tooltip.
|
11
|
-
*/
|
12
|
-
content: NonNullable<Slot<'div'>>;
|
13
|
-
};
|
14
|
-
/**
|
15
|
-
* Properties and state for Tooltip
|
16
|
-
*/
|
17
|
-
declare type TooltipCommons = Pick<PortalProps, 'mountNode'> & {
|
18
|
-
/**
|
19
|
-
* (Required) Specifies whether this tooltip is acting as the description or label of its trigger element.
|
20
|
-
*
|
21
|
-
* * `label` - The tooltip sets the trigger's aria-label or aria-labelledby attribute. This is useful for buttons
|
22
|
-
* displaying only an icon, for example.
|
23
|
-
* * `description` - The tooltip sets the trigger's aria-description or aria-describedby attribute.
|
24
|
-
* * `inaccessible` - No aria attributes are set on the trigger. This makes the tooltip's content inaccessible to
|
25
|
-
* screen readers, and should only be used if the tooltip's text is available by some other means.
|
26
|
-
*/
|
27
|
-
relationship: 'label' | 'description' | 'inaccessible';
|
28
|
-
/**
|
29
|
-
* The tooltip's visual appearance.
|
30
|
-
* * `normal` - Uses the theme's background and text colors.
|
31
|
-
* * `inverted` - Higher contrast variant that uses the theme's inverted colors.
|
32
|
-
*
|
33
|
-
* @defaultvalue normal
|
34
|
-
*/
|
35
|
-
appearance?: 'normal' | 'inverted';
|
36
|
-
/**
|
37
|
-
* Render an arrow pointing to the target element
|
38
|
-
*
|
39
|
-
* @defaultvalue false
|
40
|
-
*/
|
41
|
-
withArrow?: boolean;
|
42
|
-
/**
|
43
|
-
* Configure the positioning of the tooltip
|
44
|
-
*
|
45
|
-
* @defaultvalue above
|
46
|
-
*/
|
47
|
-
positioning?: PositioningShorthand;
|
48
|
-
/**
|
49
|
-
* Control the tooltip's visibility programatically.
|
50
|
-
*
|
51
|
-
* This can be used in conjunction with onVisibleChange to modify the tooltip's show and hide behavior.
|
52
|
-
*
|
53
|
-
* If not provided, the visibility will be controlled by the tooltip itself, based on hover and focus events on the
|
54
|
-
* trigger (child) element.
|
55
|
-
*/
|
56
|
-
visible?: boolean;
|
57
|
-
/**
|
58
|
-
* Notification when the visibility of the tooltip is changing
|
59
|
-
*/
|
60
|
-
onVisibleChange?: (event: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement> | undefined, data: OnVisibleChangeData) => void;
|
61
|
-
/**
|
62
|
-
* Delay before the tooltip is shown, in milliseconds.
|
63
|
-
*
|
64
|
-
* @defaultvalue 250
|
65
|
-
*/
|
66
|
-
showDelay: number;
|
67
|
-
/**
|
68
|
-
* Delay before the tooltip is hidden, in milliseconds.
|
69
|
-
*
|
70
|
-
* @defaultvalue 250
|
71
|
-
*/
|
72
|
-
hideDelay: number;
|
73
|
-
};
|
74
|
-
/**
|
75
|
-
* The properties that are added to the trigger of the Tooltip
|
76
|
-
*/
|
77
|
-
export declare type TooltipTriggerProps = {
|
78
|
-
ref?: React.Ref<never>;
|
79
|
-
} & Pick<React.HTMLAttributes<HTMLElement>, 'onPointerEnter' | 'onPointerLeave' | 'onFocus' | 'onBlur' | 'aria-describedby' | 'aria-labelledby' | 'aria-label'>;
|
80
|
-
/**
|
81
|
-
* Data for the Tooltip's onVisibleChange event.
|
82
|
-
*/
|
83
|
-
export declare type OnVisibleChangeData = {
|
84
|
-
visible: boolean;
|
85
|
-
};
|
86
|
-
/**
|
87
|
-
* Properties for Tooltip
|
88
|
-
*/
|
89
|
-
export declare type TooltipProps = ComponentProps<TooltipSlots> & Partial<Omit<TooltipCommons, 'relationship'>> & Pick<TooltipCommons, 'relationship'> & {
|
90
|
-
/**
|
91
|
-
* The tooltip can have a single JSX child, or a render function that accepts TooltipTriggerProps.
|
92
|
-
*
|
93
|
-
* If no child is provided, the tooltip's target must be set with the `positioning` prop, and its
|
94
|
-
* visibility must be controlled with the `visible` prop.
|
95
|
-
*/
|
96
|
-
children?: (React.ReactElement & {
|
97
|
-
ref?: React.Ref<unknown>;
|
98
|
-
}) | ((props: TooltipTriggerProps) => React.ReactElement | null) | null;
|
99
|
-
};
|
100
|
-
/**
|
101
|
-
* State used in rendering Tooltip
|
102
|
-
*/
|
103
|
-
export declare type TooltipState = ComponentState<TooltipSlots> & TooltipCommons & {
|
104
|
-
children?: React.ReactElement | null;
|
105
|
-
/**
|
106
|
-
* Whether the tooltip should be rendered to the DOM.
|
107
|
-
*/
|
108
|
-
shouldRenderTooltip?: boolean;
|
109
|
-
/**
|
110
|
-
* Ref to the arrow element
|
111
|
-
*/
|
112
|
-
arrowRef?: React.Ref<HTMLDivElement>;
|
113
|
-
/**
|
114
|
-
* CSS class for the arrow element
|
115
|
-
*/
|
116
|
-
arrowClassName?: string;
|
117
|
-
};
|
118
|
-
export {};
|
@@ -1,12 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* The height of the tooltip's arrow in pixels.
|
3
|
-
*/
|
4
|
-
export declare const arrowHeight = 6;
|
5
|
-
/**
|
6
|
-
* The default value of the tooltip's border radius (borderRadiusMedium).
|
7
|
-
*
|
8
|
-
* Unfortunately, Popper requires it to be specified as a variable instead of using CSS.
|
9
|
-
* While we could use getComputedStyle, that adds a performance penalty for something that
|
10
|
-
* will likely never change.
|
11
|
-
*/
|
12
|
-
export declare const tooltipBorderRadius = 4;
|
@@ -1,10 +0,0 @@
|
|
1
|
-
import type { TooltipProps, TooltipState } from './Tooltip.types';
|
2
|
-
/**
|
3
|
-
* Create the state required to render Tooltip.
|
4
|
-
*
|
5
|
-
* The returned state can be modified with hooks such as useTooltipStyles_unstable,
|
6
|
-
* before being passed to renderTooltip_unstable.
|
7
|
-
*
|
8
|
-
* @param props - props from this instance of Tooltip
|
9
|
-
*/
|
10
|
-
export declare const useTooltip_unstable: (props: TooltipProps) => TooltipState;
|
@@ -1,11 +0,0 @@
|
|
1
|
-
import type { TooltipSlots, TooltipState } from './Tooltip.types';
|
2
|
-
import type { SlotClassNames } from '@fluentui/react-utilities';
|
3
|
-
/**
|
4
|
-
* @deprecated Use `tooltipClassNames.root` instead.
|
5
|
-
*/
|
6
|
-
export declare const tooltipClassName = "fui-Tooltip";
|
7
|
-
export declare const tooltipClassNames: SlotClassNames<TooltipSlots>;
|
8
|
-
/**
|
9
|
-
* Apply styling to the Tooltip slots based on the state
|
10
|
-
*/
|
11
|
-
export declare const useTooltipStyles_unstable: (state: TooltipState) => TooltipState;
|
package/lib-commonjs/index.d.ts
DELETED