@fluentui/react-tooltip 0.0.0-nightly3bc051736320220112.1 → 0.0.0-nightly43b133e62020220224.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +216 -30
- package/CHANGELOG.md +56 -14
- package/MIGRATION.md +51 -43
- package/Spec.md +201 -337
- package/dist/react-tooltip.d.ts +38 -47
- package/lib/Tooltip.js.map +1 -1
- package/lib/components/Tooltip/Tooltip.d.ts +3 -2
- package/lib/components/Tooltip/Tooltip.js +9 -9
- package/lib/components/Tooltip/Tooltip.js.map +1 -1
- package/lib/components/Tooltip/Tooltip.types.d.ts +32 -39
- package/lib/components/Tooltip/Tooltip.types.js.map +1 -1
- package/lib/components/Tooltip/index.js.map +1 -1
- package/lib/components/Tooltip/private/constants.js.map +1 -1
- package/lib/components/Tooltip/renderTooltip.d.ts +1 -1
- package/lib/components/Tooltip/renderTooltip.js +4 -4
- package/lib/components/Tooltip/renderTooltip.js.map +1 -1
- package/lib/components/Tooltip/useTooltip.d.ts +3 -5
- package/lib/components/Tooltip/useTooltip.js +43 -59
- package/lib/components/Tooltip/useTooltip.js.map +1 -1
- package/lib/components/Tooltip/useTooltipStyles.d.ts +1 -1
- package/lib/components/Tooltip/useTooltipStyles.js +7 -7
- package/lib/components/Tooltip/useTooltipStyles.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Tooltip.js.map +1 -1
- package/lib-commonjs/components/Tooltip/Tooltip.d.ts +3 -2
- package/lib-commonjs/components/Tooltip/Tooltip.js +8 -7
- package/lib-commonjs/components/Tooltip/Tooltip.js.map +1 -1
- package/lib-commonjs/components/Tooltip/Tooltip.types.d.ts +32 -39
- package/lib-commonjs/components/Tooltip/Tooltip.types.js.map +1 -1
- package/lib-commonjs/components/Tooltip/index.js.map +1 -1
- package/lib-commonjs/components/Tooltip/private/constants.js.map +1 -1
- package/lib-commonjs/components/Tooltip/renderTooltip.d.ts +1 -1
- package/lib-commonjs/components/Tooltip/renderTooltip.js +6 -6
- package/lib-commonjs/components/Tooltip/renderTooltip.js.map +1 -1
- package/lib-commonjs/components/Tooltip/useTooltip.d.ts +3 -5
- package/lib-commonjs/components/Tooltip/useTooltip.js +44 -60
- package/lib-commonjs/components/Tooltip/useTooltip.js.map +1 -1
- package/lib-commonjs/components/Tooltip/useTooltipStyles.d.ts +1 -1
- package/lib-commonjs/components/Tooltip/useTooltipStyles.js +10 -10
- package/lib-commonjs/components/Tooltip/useTooltipStyles.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +9 -11
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.useTooltipStyles_unstable = exports.tooltipClassName = void 0;
|
|
7
7
|
|
|
8
|
-
const
|
|
8
|
+
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
9
|
|
|
10
10
|
const react_positioning_1 = /*#__PURE__*/require("@fluentui/react-positioning");
|
|
11
11
|
|
|
@@ -18,7 +18,7 @@ exports.tooltipClassName = 'fui-Tooltip';
|
|
|
18
18
|
* Styles for the tooltip
|
|
19
19
|
*/
|
|
20
20
|
|
|
21
|
-
const useStyles = /*#__PURE__*/
|
|
21
|
+
const useStyles = /*#__PURE__*/react_1.__styles({
|
|
22
22
|
"root": {
|
|
23
23
|
"mc9l5x": "fjseox",
|
|
24
24
|
"B7ck84d": "f1ewtqcl",
|
|
@@ -72,9 +72,9 @@ const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
|
|
72
72
|
"Bdn98qo": "f103af6e",
|
|
73
73
|
"Bbc2r3f": "f15umuo5",
|
|
74
74
|
"B1dvbpk": "f3wpjpt",
|
|
75
|
-
"D4ky5z":
|
|
76
|
-
"cqycoz":
|
|
77
|
-
"I89eb":
|
|
75
|
+
"D4ky5z": "f1k3tce7",
|
|
76
|
+
"cqycoz": "f1dkdgqi",
|
|
77
|
+
"I89eb": "f5ghsz",
|
|
78
78
|
"k1i1uq": "fyqop9u",
|
|
79
79
|
"Epwjcz": "f1m5ya7j",
|
|
80
80
|
"Bp1vogq": "f3sp63x",
|
|
@@ -90,19 +90,19 @@ const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
|
|
90
90
|
"Bwwlvwl": "fm1ycve"
|
|
91
91
|
}
|
|
92
92
|
}, {
|
|
93
|
-
"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;}", ".fuzzvh5:before{content:\"\";}", ".fkk33zh:before{visibility:visible;}", ".fxf9f1y:before{position:absolute;}", ".f170vdtw:before{box-sizing:border-box;}", ".f103af6e:before{width:inherit;}", ".f15umuo5:before{height:inherit;}", ".f3wpjpt:before{background-color:inherit;}", ".
|
|
93
|
+
"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;}", ".fuzzvh5:before{content:\"\";}", ".fkk33zh:before{visibility:visible;}", ".fxf9f1y:before{position:absolute;}", ".f170vdtw:before{box-sizing:border-box;}", ".f103af6e:before{width:inherit;}", ".f15umuo5:before{height:inherit;}", ".f3wpjpt:before{background-color:inherit;}", ".f1k3tce7:before{border-right-width:1px;}", ".f1dkdgqi:before{border-right-style:solid;}", ".f5ghsz:before{border-right-color:var(--colorTransparentStroke);}", ".fyqop9u:before{border-bottom-width:1px;}", ".f1m5ya7j:before{border-bottom-style:solid;}", ".f3sp63x:before{border-bottom-color:var(--colorTransparentStroke);}", ".f5bg3dr:before{border-bottom-right-radius:var(--borderRadiusSmall);}", ".f1rfdd74:before{border-bottom-left-radius:var(--borderRadiusSmall);}", ".fzd2j21: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;}"]
|
|
94
94
|
});
|
|
95
95
|
/**
|
|
96
96
|
* Apply styling to the Tooltip slots based on the state
|
|
97
97
|
*/
|
|
98
98
|
|
|
99
99
|
|
|
100
|
-
const
|
|
100
|
+
const useTooltipStyles_unstable = state => {
|
|
101
101
|
const styles = useStyles();
|
|
102
|
-
state.
|
|
102
|
+
state.content.className = react_1.mergeClasses(exports.tooltipClassName, styles.root, state.appearance === 'inverted' && styles.inverted, state.visible && styles.visible, state.content.className);
|
|
103
103
|
state.arrowClassName = styles.arrow;
|
|
104
104
|
return state;
|
|
105
105
|
};
|
|
106
106
|
|
|
107
|
-
exports.
|
|
107
|
+
exports.useTooltipStyles_unstable = useTooltipStyles_unstable;
|
|
108
108
|
//# sourceMappingURL=useTooltipStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
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;;AAGa,OAAA,CAAA,gBAAA,GAAmB,aAAnB;AAEb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAkCA;;AAEG;;;AACI,MAAM,yBAAyB,GAAI,KAAD,IAAsC;AAC7E,QAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,EAAA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,OAAA,CAAA,YAAA,CACxB,OAAA,CAAA,gBADwB,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;AAQA,EAAA,KAAK,CAAC,cAAN,GAAuB,MAAM,CAAC,KAA9B;AAEA,SAAO,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 { TooltipState } from './Tooltip.types';\n\nexport const tooltipClassName = 'fui-Tooltip';\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 tooltipClassName,\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/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Tooltip';\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-tooltip",
|
|
3
|
-
"version": "0.0.0-
|
|
3
|
+
"version": "0.0.0-nightly43b133e62020220224.1",
|
|
4
4
|
"description": "React components for building web experiences",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -22,15 +22,13 @@
|
|
|
22
22
|
"test": "jest --passWithNoTests",
|
|
23
23
|
"docs": "api-extractor run --config=config/api-extractor.local.json --local",
|
|
24
24
|
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-tooltip/src && yarn docs",
|
|
25
|
-
"storybook": "
|
|
25
|
+
"storybook": "node ../../scripts/storybook/runner",
|
|
26
26
|
"type-check": "tsc -b tsconfig.json"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@fluentui/babel-make-styles": "0.0.0-nightly3bc051736320220112.1",
|
|
30
29
|
"@fluentui/eslint-plugin": "*",
|
|
31
|
-
"@fluentui/jest-serializer-make-styles": "0.0.0-nightly3bc051736320220112.1",
|
|
32
30
|
"@fluentui/react-conformance": "*",
|
|
33
|
-
"@fluentui/react-conformance-
|
|
31
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly43b133e62020220224.1",
|
|
34
32
|
"@fluentui/scripts": "^1.0.0",
|
|
35
33
|
"@types/enzyme": "3.10.3",
|
|
36
34
|
"@types/enzyme-adapter-react-16": "1.0.3",
|
|
@@ -44,12 +42,12 @@
|
|
|
44
42
|
"react-test-renderer": "^16.3.0"
|
|
45
43
|
},
|
|
46
44
|
"dependencies": {
|
|
47
|
-
"@fluentui/react-
|
|
48
|
-
"@fluentui/react-
|
|
49
|
-
"@fluentui/react-
|
|
50
|
-
"@fluentui/react-
|
|
51
|
-
"@fluentui/react-
|
|
52
|
-
"@
|
|
45
|
+
"@fluentui/react-portal": "0.0.0-nightly43b133e62020220224.1",
|
|
46
|
+
"@fluentui/react-positioning": "0.0.0-nightly43b133e62020220224.1",
|
|
47
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly43b133e62020220224.1",
|
|
48
|
+
"@fluentui/react-theme": "0.0.0-nightly43b133e62020220224.1",
|
|
49
|
+
"@fluentui/react-utilities": "0.0.0-nightly43b133e62020220224.1",
|
|
50
|
+
"@griffel/react": "1.0.0",
|
|
53
51
|
"tslib": "^2.1.0"
|
|
54
52
|
},
|
|
55
53
|
"peerDependencies": {
|