@fluentui/react-popover 9.0.0-rc.5 → 9.0.0-rc.6
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +90 -1
- package/CHANGELOG.md +20 -2
- package/dist/react-popover.d.ts +6 -0
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.d.ts +6 -1
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.js +8 -1
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.d.ts +6 -1
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.js +9 -2
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.js.map +1 -1
- package/package.json +11 -21
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,96 @@
|
|
|
2
2
|
"name": "@fluentui/react-popover",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Tue, 19 Apr 2022 19:13:57 GMT",
|
|
6
|
+
"tag": "@fluentui/react-popover_v9.0.0-rc.6",
|
|
7
|
+
"version": "9.0.0-rc.6",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "seanmonahan@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-popover",
|
|
13
|
+
"commit": "086a675fd0c648944ff4048450190a0a13467de3",
|
|
14
|
+
"comment": "Add static classnames to Popover"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "olfedias@microsoft.com",
|
|
18
|
+
"package": "@fluentui/react-popover",
|
|
19
|
+
"commit": "e569d6e04d83cbcc6225e61db52ff81d2addd363",
|
|
20
|
+
"comment": "chore: Update Griffel to latest version"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-popover",
|
|
25
|
+
"comment": "Bump @fluentui/react-context-selector to v9.0.0-rc.6",
|
|
26
|
+
"commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-popover",
|
|
31
|
+
"comment": "Bump @fluentui/react-portal to v9.0.0-rc.6",
|
|
32
|
+
"commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-popover",
|
|
37
|
+
"comment": "Bump @fluentui/react-positioning to v9.0.0-rc.6",
|
|
38
|
+
"commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "beachball",
|
|
42
|
+
"package": "@fluentui/react-popover",
|
|
43
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.5",
|
|
44
|
+
"commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"author": "beachball",
|
|
48
|
+
"package": "@fluentui/react-popover",
|
|
49
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.0-rc.6",
|
|
50
|
+
"commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"author": "beachball",
|
|
54
|
+
"package": "@fluentui/react-popover",
|
|
55
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0-rc.5",
|
|
56
|
+
"commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"author": "beachball",
|
|
60
|
+
"package": "@fluentui/react-popover",
|
|
61
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.6",
|
|
62
|
+
"commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"author": "beachball",
|
|
66
|
+
"package": "@fluentui/react-popover",
|
|
67
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4",
|
|
68
|
+
"commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
|
|
69
|
+
}
|
|
70
|
+
],
|
|
71
|
+
"none": [
|
|
72
|
+
{
|
|
73
|
+
"author": "lingfangao@hotmail.com",
|
|
74
|
+
"package": "@fluentui/react-popover",
|
|
75
|
+
"commit": "67dd475e49182d17dbf7d9195c5df9bce02b7b3c",
|
|
76
|
+
"comment": "chore: Update e2e tests to use cypress component testing"
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"author": "elcraig@microsoft.com",
|
|
80
|
+
"package": "@fluentui/react-popover",
|
|
81
|
+
"commit": "b7f17e976f9e058f39c9fce4f0f9bb6eb4dfa577",
|
|
82
|
+
"comment": "Update React dev deps and hoist them to the repo root"
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"author": "mgodbolt@microsoft.com",
|
|
86
|
+
"package": "@fluentui/react-popover",
|
|
87
|
+
"commit": "905e46db07ada986fd7885531f72a71b7bbaabdc",
|
|
88
|
+
"comment": "create v9 api extractor config and set all v9 packags to use it, suppress forgotten export"
|
|
89
|
+
}
|
|
90
|
+
]
|
|
91
|
+
}
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
"date": "Fri, 04 Mar 2022 05:17:38 GMT",
|
|
6
95
|
"tag": "@fluentui/react-popover_v9.0.0-rc.5",
|
|
7
96
|
"version": "9.0.0-rc.5",
|
|
8
97
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,30 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-popover
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 19 Apr 2022 19:13:57 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-rc.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.0.0-rc.6)
|
|
8
|
+
|
|
9
|
+
Tue, 19 Apr 2022 19:13:57 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.0.0-rc.5..@fluentui/react-popover_v9.0.0-rc.6)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- Add static classnames to Popover ([PR #21960](https://github.com/microsoft/fluentui/pull/21960) by seanmonahan@microsoft.com)
|
|
15
|
+
- chore: Update Griffel to latest version ([PR #21976](https://github.com/microsoft/fluentui/pull/21976) by olfedias@microsoft.com)
|
|
16
|
+
- Bump @fluentui/react-context-selector to v9.0.0-rc.6 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
|
|
17
|
+
- Bump @fluentui/react-portal to v9.0.0-rc.6 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
|
|
18
|
+
- Bump @fluentui/react-positioning to v9.0.0-rc.6 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
|
|
19
|
+
- Bump @fluentui/react-shared-contexts to v9.0.0-rc.5 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
|
|
20
|
+
- Bump @fluentui/react-tabster to v9.0.0-rc.6 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
|
|
21
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.5 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
|
|
22
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.6 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
|
|
23
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
|
|
24
|
+
|
|
7
25
|
## [9.0.0-rc.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.0.0-rc.5)
|
|
8
26
|
|
|
9
|
-
Fri, 04 Mar 2022 05:
|
|
27
|
+
Fri, 04 Mar 2022 05:17:38 GMT
|
|
10
28
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.0.0-rc.4..@fluentui/react-popover_v9.0.0-rc.5)
|
|
11
29
|
|
|
12
30
|
### Changes
|
package/dist/react-popover.d.ts
CHANGED
|
@@ -11,6 +11,7 @@ import type { PositioningShorthand } from '@fluentui/react-positioning';
|
|
|
11
11
|
import * as React_2 from 'react';
|
|
12
12
|
import { ReactElement } from 'react';
|
|
13
13
|
import type { Slot } from '@fluentui/react-utilities';
|
|
14
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
14
15
|
import type { usePopperMouseTarget } from '@fluentui/react-positioning';
|
|
15
16
|
|
|
16
17
|
export declare const arrowHeights: Record<PopoverSize, number>;
|
|
@@ -143,8 +144,13 @@ export declare type PopoverState = PopoverCommons & Pick<PopoverProps, 'children
|
|
|
143
144
|
*/
|
|
144
145
|
export declare const PopoverSurface: ForwardRefComponent<PopoverSurfaceProps>;
|
|
145
146
|
|
|
147
|
+
/**
|
|
148
|
+
* @deprecated Use `popoverSurfaceClassNames.root` instead.
|
|
149
|
+
*/
|
|
146
150
|
export declare const popoverSurfaceClassName = "fui-PopoverSurface";
|
|
147
151
|
|
|
152
|
+
export declare const popoverSurfaceClassNames: SlotClassNames<PopoverSurfaceSlots>;
|
|
153
|
+
|
|
148
154
|
/**
|
|
149
155
|
* PopoverSurface Props
|
|
150
156
|
*/
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
import type { PopoverSize } from '../Popover/Popover.types';
|
|
2
|
-
import type { PopoverSurfaceState } from './PopoverSurface.types';
|
|
2
|
+
import type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';
|
|
3
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Use `popoverSurfaceClassNames.root` instead.
|
|
6
|
+
*/
|
|
3
7
|
export declare const popoverSurfaceClassName = "fui-PopoverSurface";
|
|
8
|
+
export declare const popoverSurfaceClassNames: SlotClassNames<PopoverSurfaceSlots>;
|
|
4
9
|
export declare const arrowHeights: Record<PopoverSize, number>;
|
|
5
10
|
/**
|
|
6
11
|
* Apply styling to the PopoverSurface slots based on the state
|
|
@@ -1,7 +1,14 @@
|
|
|
1
1
|
import { shorthands, __styles, mergeClasses } from '@griffel/react';
|
|
2
2
|
import { createArrowHeightStyles, createArrowStyles } from '@fluentui/react-positioning';
|
|
3
3
|
import { tokens } from '@fluentui/react-theme';
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Use `popoverSurfaceClassNames.root` instead.
|
|
6
|
+
*/
|
|
7
|
+
|
|
4
8
|
export const popoverSurfaceClassName = 'fui-PopoverSurface';
|
|
9
|
+
export const popoverSurfaceClassNames = {
|
|
10
|
+
root: 'fui-PopoverSurface'
|
|
11
|
+
};
|
|
5
12
|
export const arrowHeights = {
|
|
6
13
|
small: 6,
|
|
7
14
|
medium: 8,
|
|
@@ -105,7 +112,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
105
112
|
|
|
106
113
|
export const usePopoverSurfaceStyles_unstable = state => {
|
|
107
114
|
const styles = useStyles();
|
|
108
|
-
state.root.className = mergeClasses(
|
|
115
|
+
state.root.className = mergeClasses(popoverSurfaceClassNames.root, styles.root, state.size === 'small' && styles.smallPadding, state.size === 'medium' && styles.mediumPadding, state.size === 'large' && styles.largePadding, state.appearance === 'inverted' && styles.inverted, state.appearance === 'brand' && styles.brand, state.root.className);
|
|
109
116
|
state.arrowClassName = mergeClasses(styles.arrow, state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow);
|
|
110
117
|
return state;
|
|
111
118
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/PopoverSurface/usePopoverSurfaceStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,YAAiC,YAAjC,QAAqD,gBAArD;AACA,SAAS,uBAAT,EAAkC,iBAAlC,QAA2D,6BAA3D;AACA,SAAS,MAAT,QAAuB,uBAAvB;
|
|
1
|
+
{"version":3,"sources":["components/PopoverSurface/usePopoverSurfaceStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,YAAiC,YAAjC,QAAqD,gBAArD;AACA,SAAS,uBAAT,EAAkC,iBAAlC,QAA2D,6BAA3D;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAKA;;AAEG;;AACH,OAAO,MAAM,uBAAuB,GAAG,oBAAhC;AACP,OAAO,MAAM,wBAAwB,GAAwC;AAC3E,EAAA,IAAI,EAAE;AADqE,CAAtE;AAIP,OAAO,MAAM,YAAY,GAAgC;AACvD,EAAA,KAAK,EAAE,CADgD;AAEvD,EAAA,MAAM,EAAE,CAF+C;AAGvD,EAAA,KAAK,EAAE;AAHgD,CAAlD;AAMP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqCA;;AAEG;;;AACH,OAAO,MAAM,gCAAgC,GAAI,KAAD,IAAoD;AAClG,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,wBAAwB,CAAC,IADQ,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,IAAN,KAAe,OAAf,IAA0B,MAAM,CAAC,YAHA,EAIjC,KAAK,CAAC,IAAN,KAAe,QAAf,IAA2B,MAAM,CAAC,aAJD,EAKjC,KAAK,CAAC,IAAN,KAAe,OAAf,IAA0B,MAAM,CAAC,YALA,EAMjC,KAAK,CAAC,UAAN,KAAqB,UAArB,IAAmC,MAAM,CAAC,QANT,EAOjC,KAAK,CAAC,UAAN,KAAqB,OAArB,IAAgC,MAAM,CAAC,KAPN,EAQjC,KAAK,CAAC,IAAN,CAAW,SARsB,CAAnC;AAWA,EAAA,KAAK,CAAC,cAAN,GAAuB,YAAY,CACjC,MAAM,CAAC,KAD0B,EAEjC,KAAK,CAAC,IAAN,KAAe,OAAf,GAAyB,MAAM,CAAC,UAAhC,GAA6C,MAAM,CAAC,gBAFnB,CAAnC;AAKA,SAAO,KAAP;AACD,CAnBM","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createArrowHeightStyles, createArrowStyles } from '@fluentui/react-positioning';\nimport { tokens } from '@fluentui/react-theme';\nimport type { PopoverSize } from '../Popover/Popover.types';\nimport type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `popoverSurfaceClassNames.root` instead.\n */\nexport const popoverSurfaceClassName = 'fui-PopoverSurface';\nexport const popoverSurfaceClassNames: SlotClassNames<PopoverSurfaceSlots> = {\n root: 'fui-PopoverSurface',\n};\n\nexport const arrowHeights: Record<PopoverSize, number> = {\n small: 6,\n medium: 8,\n large: 8,\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow16,\n ...shorthands.borderRadius('4px'),\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n },\n\n inverted: {\n // TODO: neutral background inverted missing from superset and theme\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralForegroundInverted,\n },\n\n brand: {\n backgroundColor: tokens.colorBrandBackground,\n // TODO: clarify with designers what foreground color should be with brand background,\n color: tokens.colorNeutralForegroundInverted,\n },\n\n smallPadding: {\n ...shorthands.padding('12px'),\n },\n\n mediumPadding: {\n ...shorthands.padding('16px'),\n },\n\n largePadding: {\n ...shorthands.padding('20px'),\n },\n\n smallArrow: createArrowHeightStyles(arrowHeights.small),\n mediumLargeArrow: createArrowHeightStyles(arrowHeights.medium),\n arrow: createArrowStyles({ arrowHeight: undefined }),\n});\n\n/**\n * Apply styling to the PopoverSurface slots based on the state\n */\nexport const usePopoverSurfaceStyles_unstable = (state: PopoverSurfaceState): PopoverSurfaceState => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n popoverSurfaceClassNames.root,\n styles.root,\n state.size === 'small' && styles.smallPadding,\n state.size === 'medium' && styles.mediumPadding,\n state.size === 'large' && styles.largePadding,\n state.appearance === 'inverted' && styles.inverted,\n state.appearance === 'brand' && styles.brand,\n state.root.className,\n );\n\n state.arrowClassName = mergeClasses(\n styles.arrow,\n state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
import type { PopoverSize } from '../Popover/Popover.types';
|
|
2
|
-
import type { PopoverSurfaceState } from './PopoverSurface.types';
|
|
2
|
+
import type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';
|
|
3
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Use `popoverSurfaceClassNames.root` instead.
|
|
6
|
+
*/
|
|
3
7
|
export declare const popoverSurfaceClassName = "fui-PopoverSurface";
|
|
8
|
+
export declare const popoverSurfaceClassNames: SlotClassNames<PopoverSurfaceSlots>;
|
|
4
9
|
export declare const arrowHeights: Record<PopoverSize, number>;
|
|
5
10
|
/**
|
|
6
11
|
* Apply styling to the PopoverSurface slots based on the state
|
|
@@ -3,15 +3,22 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.usePopoverSurfaceStyles_unstable = exports.arrowHeights = exports.popoverSurfaceClassName = void 0;
|
|
6
|
+
exports.usePopoverSurfaceStyles_unstable = exports.arrowHeights = exports.popoverSurfaceClassNames = exports.popoverSurfaceClassName = void 0;
|
|
7
7
|
|
|
8
8
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
9
|
|
|
10
10
|
const react_positioning_1 = /*#__PURE__*/require("@fluentui/react-positioning");
|
|
11
11
|
|
|
12
12
|
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
|
13
|
+
/**
|
|
14
|
+
* @deprecated Use `popoverSurfaceClassNames.root` instead.
|
|
15
|
+
*/
|
|
16
|
+
|
|
13
17
|
|
|
14
18
|
exports.popoverSurfaceClassName = 'fui-PopoverSurface';
|
|
19
|
+
exports.popoverSurfaceClassNames = {
|
|
20
|
+
root: 'fui-PopoverSurface'
|
|
21
|
+
};
|
|
15
22
|
exports.arrowHeights = {
|
|
16
23
|
small: 6,
|
|
17
24
|
medium: 8,
|
|
@@ -115,7 +122,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
115
122
|
|
|
116
123
|
const usePopoverSurfaceStyles_unstable = state => {
|
|
117
124
|
const styles = useStyles();
|
|
118
|
-
state.root.className = react_1.mergeClasses(exports.
|
|
125
|
+
state.root.className = react_1.mergeClasses(exports.popoverSurfaceClassNames.root, styles.root, state.size === 'small' && styles.smallPadding, state.size === 'medium' && styles.mediumPadding, state.size === 'large' && styles.largePadding, state.appearance === 'inverted' && styles.inverted, state.appearance === 'brand' && styles.brand, state.root.className);
|
|
119
126
|
state.arrowClassName = react_1.mergeClasses(styles.arrow, state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow);
|
|
120
127
|
return state;
|
|
121
128
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/PopoverSurface/usePopoverSurfaceStyles.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;;
|
|
1
|
+
{"version":3,"sources":["components/PopoverSurface/usePopoverSurfaceStyles.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;AAKA;;AAEG;;;AACU,OAAA,CAAA,uBAAA,GAA0B,oBAA1B;AACA,OAAA,CAAA,wBAAA,GAAgE;AAC3E,EAAA,IAAI,EAAE;AADqE,CAAhE;AAIA,OAAA,CAAA,YAAA,GAA4C;AACvD,EAAA,KAAK,EAAE,CADgD;AAEvD,EAAA,MAAM,EAAE,CAF+C;AAGvD,EAAA,KAAK,EAAE;AAHgD,CAA5C;AAMb;;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqCA;;AAEG;;;AACI,MAAM,gCAAgC,GAAI,KAAD,IAAoD;AAClG,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,wBAAA,CAAyB,IADJ,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,IAAN,KAAe,OAAf,IAA0B,MAAM,CAAC,YAHZ,EAIrB,KAAK,CAAC,IAAN,KAAe,QAAf,IAA2B,MAAM,CAAC,aAJb,EAKrB,KAAK,CAAC,IAAN,KAAe,OAAf,IAA0B,MAAM,CAAC,YALZ,EAMrB,KAAK,CAAC,UAAN,KAAqB,UAArB,IAAmC,MAAM,CAAC,QANrB,EAOrB,KAAK,CAAC,UAAN,KAAqB,OAArB,IAAgC,MAAM,CAAC,KAPlB,EAQrB,KAAK,CAAC,IAAN,CAAW,SARU,CAAvB;AAWA,EAAA,KAAK,CAAC,cAAN,GAAuB,OAAA,CAAA,YAAA,CACrB,MAAM,CAAC,KADc,EAErB,KAAK,CAAC,IAAN,KAAe,OAAf,GAAyB,MAAM,CAAC,UAAhC,GAA6C,MAAM,CAAC,gBAF/B,CAAvB;AAKA,SAAO,KAAP;AACD,CAnBM;;AAAM,OAAA,CAAA,gCAAA,GAAgC,gCAAhC","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createArrowHeightStyles, createArrowStyles } from '@fluentui/react-positioning';\nimport { tokens } from '@fluentui/react-theme';\nimport type { PopoverSize } from '../Popover/Popover.types';\nimport type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `popoverSurfaceClassNames.root` instead.\n */\nexport const popoverSurfaceClassName = 'fui-PopoverSurface';\nexport const popoverSurfaceClassNames: SlotClassNames<PopoverSurfaceSlots> = {\n root: 'fui-PopoverSurface',\n};\n\nexport const arrowHeights: Record<PopoverSize, number> = {\n small: 6,\n medium: 8,\n large: 8,\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow16,\n ...shorthands.borderRadius('4px'),\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n },\n\n inverted: {\n // TODO: neutral background inverted missing from superset and theme\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralForegroundInverted,\n },\n\n brand: {\n backgroundColor: tokens.colorBrandBackground,\n // TODO: clarify with designers what foreground color should be with brand background,\n color: tokens.colorNeutralForegroundInverted,\n },\n\n smallPadding: {\n ...shorthands.padding('12px'),\n },\n\n mediumPadding: {\n ...shorthands.padding('16px'),\n },\n\n largePadding: {\n ...shorthands.padding('20px'),\n },\n\n smallArrow: createArrowHeightStyles(arrowHeights.small),\n mediumLargeArrow: createArrowHeightStyles(arrowHeights.medium),\n arrow: createArrowStyles({ arrowHeight: undefined }),\n});\n\n/**\n * Apply styling to the PopoverSurface slots based on the state\n */\nexport const usePopoverSurfaceStyles_unstable = (state: PopoverSurfaceState): PopoverSurfaceState => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n popoverSurfaceClassNames.root,\n styles.root,\n state.size === 'small' && styles.smallPadding,\n state.size === 'medium' && styles.mediumPadding,\n state.size === 'large' && styles.largePadding,\n state.appearance === 'inverted' && styles.inverted,\n state.appearance === 'brand' && styles.brand,\n state.root.className,\n );\n\n state.arrowClassName = mergeClasses(\n styles.arrow,\n state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-popover",
|
|
3
|
-
"version": "9.0.0-rc.
|
|
3
|
+
"version": "9.0.0-rc.6",
|
|
4
4
|
"description": "Popover component for Fluent UI",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -29,28 +29,18 @@
|
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@fluentui/eslint-plugin": "*",
|
|
31
31
|
"@fluentui/react-conformance": "*",
|
|
32
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
|
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"
|
|
32
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.4",
|
|
33
|
+
"@fluentui/scripts": "^1.0.0"
|
|
44
34
|
},
|
|
45
35
|
"dependencies": {
|
|
46
|
-
"@fluentui/react-context-selector": "9.0.0-rc.
|
|
47
|
-
"@griffel/react": "1.0.
|
|
48
|
-
"@fluentui/react-portal": "9.0.0-rc.
|
|
49
|
-
"@fluentui/react-positioning": "9.0.0-rc.
|
|
50
|
-
"@fluentui/react-shared-contexts": "9.0.0-rc.
|
|
51
|
-
"@fluentui/react-tabster": "9.0.0-rc.
|
|
52
|
-
"@fluentui/react-theme": "9.0.0-rc.
|
|
53
|
-
"@fluentui/react-utilities": "9.0.0-rc.
|
|
36
|
+
"@fluentui/react-context-selector": "9.0.0-rc.6",
|
|
37
|
+
"@griffel/react": "1.0.3",
|
|
38
|
+
"@fluentui/react-portal": "9.0.0-rc.6",
|
|
39
|
+
"@fluentui/react-positioning": "9.0.0-rc.6",
|
|
40
|
+
"@fluentui/react-shared-contexts": "9.0.0-rc.5",
|
|
41
|
+
"@fluentui/react-tabster": "9.0.0-rc.6",
|
|
42
|
+
"@fluentui/react-theme": "9.0.0-rc.5",
|
|
43
|
+
"@fluentui/react-utilities": "9.0.0-rc.6",
|
|
54
44
|
"tslib": "^2.1.0"
|
|
55
45
|
},
|
|
56
46
|
"peerDependencies": {
|