@fluentui/react-popover 9.3.0 → 9.3.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 +129 -1
- package/CHANGELOG.md +35 -2
- package/lib-amd/Popover.js +6 -0
- package/lib-amd/Popover.js.map +1 -0
- package/lib-amd/PopoverSurface.js +6 -0
- package/lib-amd/PopoverSurface.js.map +1 -0
- package/lib-amd/PopoverTrigger.js +6 -0
- package/lib-amd/PopoverTrigger.js.map +1 -0
- package/lib-amd/components/Popover/Popover.js +15 -0
- package/lib-amd/components/Popover/Popover.js.map +1 -0
- package/lib-amd/components/Popover/Popover.types.js +5 -0
- package/lib-amd/components/Popover/Popover.types.js.map +1 -0
- package/lib-amd/components/Popover/constants.js +15 -0
- package/lib-amd/components/Popover/constants.js.map +1 -0
- package/lib-amd/components/Popover/index.js +9 -0
- package/lib-amd/components/Popover/index.js.map +1 -0
- package/lib-amd/components/Popover/renderPopover.js +32 -0
- package/lib-amd/components/Popover/renderPopover.js.map +1 -0
- package/lib-amd/components/Popover/usePopover.js +150 -0
- package/lib-amd/components/Popover/usePopover.js.map +1 -0
- package/lib-amd/components/PopoverSurface/PopoverSurface.js +15 -0
- package/lib-amd/components/PopoverSurface/PopoverSurface.js.map +1 -0
- package/lib-amd/components/PopoverSurface/PopoverSurface.types.js +5 -0
- package/lib-amd/components/PopoverSurface/PopoverSurface.types.js.map +1 -0
- package/lib-amd/components/PopoverSurface/index.js +10 -0
- package/lib-amd/components/PopoverSurface/index.js.map +1 -0
- package/lib-amd/components/PopoverSurface/renderPopoverSurface.js +20 -0
- package/lib-amd/components/PopoverSurface/renderPopoverSurface.js.map +1 -0
- package/lib-amd/components/PopoverSurface/usePopoverSurface.js +65 -0
- package/lib-amd/components/PopoverSurface/usePopoverSurface.js.map +1 -0
- package/lib-amd/components/PopoverSurface/usePopoverSurfaceStyles.js +44 -0
- package/lib-amd/components/PopoverSurface/usePopoverSurfaceStyles.js.map +1 -0
- package/lib-amd/components/PopoverTrigger/PopoverTrigger.js +17 -0
- package/lib-amd/components/PopoverTrigger/PopoverTrigger.js.map +1 -0
- package/lib-amd/components/PopoverTrigger/PopoverTrigger.types.js +5 -0
- package/lib-amd/components/PopoverTrigger/PopoverTrigger.types.js.map +1 -0
- package/lib-amd/components/PopoverTrigger/index.js +9 -0
- package/lib-amd/components/PopoverTrigger/index.js.map +1 -0
- package/lib-amd/components/PopoverTrigger/renderPopoverTrigger.js +13 -0
- package/lib-amd/components/PopoverTrigger/renderPopoverTrigger.js.map +1 -0
- package/lib-amd/components/PopoverTrigger/usePopoverTrigger.js +61 -0
- package/lib-amd/components/PopoverTrigger/usePopoverTrigger.js.map +1 -0
- package/lib-amd/index.js +20 -0
- package/lib-amd/index.js.map +1 -0
- package/lib-amd/popoverContext.js +28 -0
- package/lib-amd/popoverContext.js.map +1 -0
- package/package.json +15 -14
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,135 @@
|
|
|
2
2
|
"name": "@fluentui/react-popover",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Thu, 17 Nov 2022 23:02:40 GMT",
|
|
6
|
+
"tag": "@fluentui/react-popover_v9.3.2",
|
|
7
|
+
"version": "9.3.2",
|
|
8
|
+
"comments": {
|
|
9
|
+
"none": [
|
|
10
|
+
{
|
|
11
|
+
"author": "martinhochel@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-popover",
|
|
13
|
+
"commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
|
|
14
|
+
"comment": "chore: update package scaffold"
|
|
15
|
+
}
|
|
16
|
+
],
|
|
17
|
+
"patch": [
|
|
18
|
+
{
|
|
19
|
+
"author": "beachball",
|
|
20
|
+
"package": "@fluentui/react-popover",
|
|
21
|
+
"comment": "Bump @fluentui/react-aria to v9.3.2",
|
|
22
|
+
"commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"author": "beachball",
|
|
26
|
+
"package": "@fluentui/react-popover",
|
|
27
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.2",
|
|
28
|
+
"commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"author": "beachball",
|
|
32
|
+
"package": "@fluentui/react-popover",
|
|
33
|
+
"comment": "Bump @fluentui/react-portal to v9.0.11",
|
|
34
|
+
"commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"author": "beachball",
|
|
38
|
+
"package": "@fluentui/react-popover",
|
|
39
|
+
"comment": "Bump @fluentui/react-positioning to v9.3.2",
|
|
40
|
+
"commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"author": "beachball",
|
|
44
|
+
"package": "@fluentui/react-popover",
|
|
45
|
+
"comment": "Bump @fluentui/react-tabster to v9.3.1",
|
|
46
|
+
"commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"author": "beachball",
|
|
50
|
+
"package": "@fluentui/react-popover",
|
|
51
|
+
"comment": "Bump @fluentui/react-utilities to v9.2.2",
|
|
52
|
+
"commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
|
|
53
|
+
}
|
|
54
|
+
]
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"date": "Fri, 11 Nov 2022 14:58:09 GMT",
|
|
59
|
+
"tag": "@fluentui/react-popover_v9.3.1",
|
|
60
|
+
"version": "9.3.1",
|
|
61
|
+
"comments": {
|
|
62
|
+
"patch": [
|
|
63
|
+
{
|
|
64
|
+
"author": "martinhochel@microsoft.com",
|
|
65
|
+
"package": "@fluentui/react-popover",
|
|
66
|
+
"commit": "b3907043bd8d7b650c55e8e7c3119b14f2606c38",
|
|
67
|
+
"comment": "fix: create valid export maps"
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
"author": "beachball",
|
|
71
|
+
"package": "@fluentui/react-popover",
|
|
72
|
+
"comment": "Bump @fluentui/keyboard-keys to v9.0.1",
|
|
73
|
+
"commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"author": "beachball",
|
|
77
|
+
"package": "@fluentui/react-popover",
|
|
78
|
+
"comment": "Bump @fluentui/react-aria to v9.3.1",
|
|
79
|
+
"commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
"author": "beachball",
|
|
83
|
+
"package": "@fluentui/react-popover",
|
|
84
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.1",
|
|
85
|
+
"commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"author": "beachball",
|
|
89
|
+
"package": "@fluentui/react-popover",
|
|
90
|
+
"comment": "Bump @fluentui/react-portal to v9.0.10",
|
|
91
|
+
"commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
"author": "beachball",
|
|
95
|
+
"package": "@fluentui/react-popover",
|
|
96
|
+
"comment": "Bump @fluentui/react-positioning to v9.3.1",
|
|
97
|
+
"commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"author": "beachball",
|
|
101
|
+
"package": "@fluentui/react-popover",
|
|
102
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.1.1",
|
|
103
|
+
"commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
"author": "beachball",
|
|
107
|
+
"package": "@fluentui/react-popover",
|
|
108
|
+
"comment": "Bump @fluentui/react-tabster to v9.3.0",
|
|
109
|
+
"commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
"author": "beachball",
|
|
113
|
+
"package": "@fluentui/react-popover",
|
|
114
|
+
"comment": "Bump @fluentui/react-theme to v9.1.2",
|
|
115
|
+
"commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
"author": "beachball",
|
|
119
|
+
"package": "@fluentui/react-popover",
|
|
120
|
+
"comment": "Bump @fluentui/react-utilities to v9.2.1",
|
|
121
|
+
"commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
"author": "beachball",
|
|
125
|
+
"package": "@fluentui/react-popover",
|
|
126
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.18",
|
|
127
|
+
"commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
|
|
128
|
+
}
|
|
129
|
+
]
|
|
130
|
+
}
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
"date": "Wed, 02 Nov 2022 11:57:56 GMT",
|
|
6
134
|
"tag": "@fluentui/react-popover_v9.3.0",
|
|
7
135
|
"version": "9.3.0",
|
|
8
136
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,45 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-popover
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 17 Nov 2022 23:02:40 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.3.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.3.2)
|
|
8
|
+
|
|
9
|
+
Thu, 17 Nov 2022 23:02:40 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.3.1..@fluentui/react-popover_v9.3.2)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-aria to v9.3.2 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
|
|
15
|
+
- Bump @fluentui/react-context-selector to v9.1.2 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
|
|
16
|
+
- Bump @fluentui/react-portal to v9.0.11 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
|
|
17
|
+
- Bump @fluentui/react-positioning to v9.3.2 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
|
|
18
|
+
- Bump @fluentui/react-tabster to v9.3.1 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
|
|
19
|
+
- Bump @fluentui/react-utilities to v9.2.2 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
|
|
20
|
+
|
|
21
|
+
## [9.3.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.3.1)
|
|
22
|
+
|
|
23
|
+
Fri, 11 Nov 2022 14:58:09 GMT
|
|
24
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.3.0..@fluentui/react-popover_v9.3.1)
|
|
25
|
+
|
|
26
|
+
### Patches
|
|
27
|
+
|
|
28
|
+
- fix: create valid export maps ([PR #25558](https://github.com/microsoft/fluentui/pull/25558) by martinhochel@microsoft.com)
|
|
29
|
+
- Bump @fluentui/keyboard-keys to v9.0.1 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
|
|
30
|
+
- Bump @fluentui/react-aria to v9.3.1 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
|
|
31
|
+
- Bump @fluentui/react-context-selector to v9.1.1 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
|
|
32
|
+
- Bump @fluentui/react-portal to v9.0.10 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
|
|
33
|
+
- Bump @fluentui/react-positioning to v9.3.1 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
|
|
34
|
+
- Bump @fluentui/react-shared-contexts to v9.1.1 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
|
|
35
|
+
- Bump @fluentui/react-tabster to v9.3.0 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
|
|
36
|
+
- Bump @fluentui/react-theme to v9.1.2 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
|
|
37
|
+
- Bump @fluentui/react-utilities to v9.2.1 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
|
|
38
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.18 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
|
|
39
|
+
|
|
7
40
|
## [9.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.3.0)
|
|
8
41
|
|
|
9
|
-
Wed, 02 Nov 2022 11:
|
|
42
|
+
Wed, 02 Nov 2022 11:57:56 GMT
|
|
10
43
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.2.1..@fluentui/react-popover_v9.3.0)
|
|
11
44
|
|
|
12
45
|
### Minor changes
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
define(["require", "exports", "tslib", "./components/Popover/index"], function (require, exports, tslib_1, index_1) {
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
tslib_1.__exportStar(index_1, exports);
|
|
5
|
+
});
|
|
6
|
+
//# sourceMappingURL=Popover.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-popover/src/Popover.ts"],"names":[],"mappings":";;;IAAA,uCAA2C","sourcesContent":["export * from './components/Popover/index';\n"]}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
define(["require", "exports", "tslib", "./components/PopoverSurface/index"], function (require, exports, tslib_1, index_1) {
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
tslib_1.__exportStar(index_1, exports);
|
|
5
|
+
});
|
|
6
|
+
//# sourceMappingURL=PopoverSurface.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PopoverSurface.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-popover/src/PopoverSurface.ts"],"names":[],"mappings":";;;IAAA,uCAAkD","sourcesContent":["export * from './components/PopoverSurface/index';\n"]}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
define(["require", "exports", "tslib", "./components/PopoverTrigger/index"], function (require, exports, tslib_1, index_1) {
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
tslib_1.__exportStar(index_1, exports);
|
|
5
|
+
});
|
|
6
|
+
//# sourceMappingURL=PopoverTrigger.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PopoverTrigger.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-popover/src/PopoverTrigger.ts"],"names":[],"mappings":";;;IAAA,uCAAkD","sourcesContent":["export * from './components/PopoverTrigger/index';\n"]}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
define(["require", "exports", "./usePopover", "./renderPopover"], function (require, exports, usePopover_1, renderPopover_1) {
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.Popover = void 0;
|
|
5
|
+
/**
|
|
6
|
+
* Wrapper component that manages state for a PopoverTrigger and a PopoverSurface components.
|
|
7
|
+
*/
|
|
8
|
+
var Popover = function (props) {
|
|
9
|
+
var state = usePopover_1.usePopover_unstable(props);
|
|
10
|
+
return renderPopover_1.renderPopover_unstable(state);
|
|
11
|
+
};
|
|
12
|
+
exports.Popover = Popover;
|
|
13
|
+
exports.Popover.displayName = 'Popover';
|
|
14
|
+
});
|
|
15
|
+
//# sourceMappingURL=Popover.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-popover/src/components/Popover/Popover.tsx"],"names":[],"mappings":";;;;IAKA;;OAEG;IACI,IAAM,OAAO,GAA2B,UAAA,KAAK;QAClD,IAAM,KAAK,GAAG,gCAAmB,CAAC,KAAK,CAAC,CAAC;QAEzC,OAAO,sCAAsB,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC,CAAC;IAJW,QAAA,OAAO,WAIlB;IAEF,eAAO,CAAC,WAAW,GAAG,SAAS,CAAC","sourcesContent":["import * as React from 'react';\nimport { usePopover_unstable } from './usePopover';\nimport { renderPopover_unstable } from './renderPopover';\nimport type { PopoverProps } from './Popover.types';\n\n/**\n * Wrapper component that manages state for a PopoverTrigger and a PopoverSurface components.\n */\nexport const Popover: React.FC<PopoverProps> = props => {\n const state = usePopover_unstable(props);\n\n return renderPopover_unstable(state);\n};\n\nPopover.displayName = 'Popover';\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Popover.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-popover/src/components/Popover/Popover.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type {\n PositioningVirtualElement,\n PositioningShorthand,\n SetVirtualMouseTarget,\n} from '@fluentui/react-positioning';\nimport type { PortalProps } from '@fluentui/react-portal';\nimport type { UseModalAttributesOptions } from '@fluentui/react-tabster';\n\n/**\n * Determines popover padding and arrow size\n */\nexport type PopoverSize = 'small' | 'medium' | 'large';\n\n/**\n * Popover Props\n */\nexport type PopoverProps = Pick<PortalProps, 'mountNode'> & {\n /**\n * A popover can appear styled with brand or inverted.\n * When not specified, the default style is used.\n */\n appearance?: 'brand' | 'inverted';\n\n /**\n * Can contain two children including {@link PopoverTrigger} and {@link PopoverSurface}.\n * Alternatively can only contain {@link PopoverSurface} if using a custom `target`.\n */\n children: [JSX.Element, JSX.Element] | JSX.Element;\n\n /**\n * Close when scroll outside of it\n *\n * @default false\n */\n closeOnScroll?: boolean;\n\n /**\n * Used to set the initial open state of the Popover in uncontrolled mode\n *\n * @default false\n */\n defaultOpen?: boolean;\n\n /**\n * Popovers are rendered out of DOM order on `document.body` by default, use this to render the popover in DOM order\n *\n * @default false\n */\n inline?: boolean;\n\n /**\n * Sets the delay for closing popover on mouse leave\n */\n mouseLeaveDelay?: number;\n\n /**\n * Display an arrow pointing to the target.\n *\n * @default false\n */\n withArrow?: boolean;\n\n /**\n * Call back when the component requests to change value\n * The `open` value is used as a hint when directly controlling the component\n */\n onOpenChange?: (e: OpenPopoverEvents, data: OnOpenChangeData) => void;\n\n /**\n * Controls the opening of the Popover\n *\n * @default false\n */\n open?: boolean;\n\n /**\n * Flag to open the Popover as a context menu. Disables all other interactions\n *\n * @default false\n */\n openOnContext?: boolean;\n\n /**\n * Flag to open the Popover by hovering the trigger\n *\n * @default false\n */\n openOnHover?: boolean;\n\n /**\n * Configures the position of the Popover\n */\n positioning?: PositioningShorthand;\n\n /**\n * Determines popover padding and arrow size\n *\n * @default medium\n */\n size?: PopoverSize;\n\n /**\n * Should trap focus\n *\n * @default false\n */\n trapFocus?: UseModalAttributesOptions['trapFocus'];\n\n /**\n * Must be used with the `trapFocus` prop\n * Enables older Fluent UI focus trap behavior where the user\n * cannot tab into the window outside of the document. This is now\n * non-standard behavior according to the [HTML dialog spec](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)\n * where the focus trap involves setting outside elements inert.\n *\n * @default false\n */\n legacyTrapFocus?: UseModalAttributesOptions['legacyTrapFocus'];\n};\n\n/**\n * Popover State\n */\nexport type PopoverState = Pick<\n PopoverProps,\n | 'appearance'\n | 'mountNode'\n | 'onOpenChange'\n | 'openOnContext'\n | 'openOnHover'\n | 'trapFocus'\n | 'withArrow'\n | 'legacyTrapFocus'\n> &\n Required<Pick<PopoverProps, 'inline' | 'open'>> &\n Pick<PopoverProps, 'children'> & {\n /**\n * Ref of the pointing arrow\n */\n arrowRef: React.MutableRefObject<HTMLDivElement | null>;\n\n /**\n * Ref of the PopoverSurface\n */\n contentRef: React.MutableRefObject<HTMLElement | null>;\n\n /**\n * Anchors the popper to the mouse click for context events\n */\n contextTarget: PositioningVirtualElement | undefined;\n\n popoverSurface: React.ReactElement | undefined;\n\n popoverTrigger: React.ReactElement | undefined;\n\n /**\n * A callback to set the target of the popper to the mouse click for context events\n */\n setContextTarget: SetVirtualMouseTarget;\n\n /**\n * Callback to open/close the Popover\n */\n setOpen: (e: OpenPopoverEvents, open: boolean) => void;\n\n size: NonNullable<PopoverProps['size']>;\n\n /**\n * Callback to toggle the open state of the Popover\n */\n toggleOpen: (e: OpenPopoverEvents) => void;\n\n /**\n * Ref of the PopoverTrigger\n */\n triggerRef: React.MutableRefObject<HTMLElement | null>;\n };\n\n/**\n * Data attached to open/close events\n */\nexport type OnOpenChangeData = { open: boolean };\n\n/**\n * The supported events that will trigger open/close of the menu\n */\nexport type OpenPopoverEvents =\n | MouseEvent\n | TouchEvent\n | React.FocusEvent<HTMLElement>\n | React.KeyboardEvent<HTMLElement>\n | React.MouseEvent<HTMLElement>;\n"]}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
define(["require", "exports"], function (require, exports) {
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.popoverSurfaceBorderRadius = void 0;
|
|
5
|
+
/**
|
|
6
|
+
* @internal
|
|
7
|
+
* The default value of the tooltip's border radius (borderRadiusMedium).
|
|
8
|
+
*
|
|
9
|
+
* Unfortunately, Popper requires it to be specified as a variable instead of using CSS.
|
|
10
|
+
* While we could use getComputedStyle, that adds a performance penalty for something that
|
|
11
|
+
* will likely never change.
|
|
12
|
+
*/
|
|
13
|
+
exports.popoverSurfaceBorderRadius = 4;
|
|
14
|
+
});
|
|
15
|
+
//# sourceMappingURL=constants.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-popover/src/components/Popover/constants.ts"],"names":[],"mappings":";;;;IAAA;;;;;;;OAOG;IACU,QAAA,0BAA0B,GAAG,CAAC,CAAC","sourcesContent":["/**\n * @internal\n * The default value of the tooltip's border radius (borderRadiusMedium).\n *\n * Unfortunately, Popper requires it to be specified as a variable instead of using CSS.\n * While we could use getComputedStyle, that adds a performance penalty for something that\n * will likely never change.\n */\nexport const popoverSurfaceBorderRadius = 4;\n"]}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
define(["require", "exports", "tslib", "./Popover", "./Popover.types", "./renderPopover", "./usePopover"], function (require, exports, tslib_1, Popover_1, Popover_types_1, renderPopover_1, usePopover_1) {
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
tslib_1.__exportStar(Popover_1, exports);
|
|
5
|
+
tslib_1.__exportStar(Popover_types_1, exports);
|
|
6
|
+
tslib_1.__exportStar(renderPopover_1, exports);
|
|
7
|
+
tslib_1.__exportStar(usePopover_1, exports);
|
|
8
|
+
});
|
|
9
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-popover/src/components/Popover/index.ts"],"names":[],"mappings":";;;IAAA,yCAA0B;IAC1B,+CAAgC;IAChC,+CAAgC;IAChC,4CAA6B","sourcesContent":["export * from './Popover';\nexport * from './Popover.types';\nexport * from './renderPopover';\nexport * from './usePopover';\n"]}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
define(["require", "exports", "react", "../../popoverContext"], function (require, exports, React, popoverContext_1) {
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.renderPopover_unstable = void 0;
|
|
5
|
+
/**
|
|
6
|
+
* Render the final JSX of Popover
|
|
7
|
+
*/
|
|
8
|
+
var renderPopover_unstable = function (state) {
|
|
9
|
+
var appearance = state.appearance, arrowRef = state.arrowRef, contentRef = state.contentRef, inline = state.inline, mountNode = state.mountNode, open = state.open, openOnContext = state.openOnContext, openOnHover = state.openOnHover, setOpen = state.setOpen, size = state.size, toggleOpen = state.toggleOpen, trapFocus = state.trapFocus, triggerRef = state.triggerRef, withArrow = state.withArrow, legacyTrapFocus = state.legacyTrapFocus;
|
|
10
|
+
return (React.createElement(popoverContext_1.PopoverContext.Provider, { value: {
|
|
11
|
+
appearance: appearance,
|
|
12
|
+
arrowRef: arrowRef,
|
|
13
|
+
contentRef: contentRef,
|
|
14
|
+
inline: inline,
|
|
15
|
+
mountNode: mountNode,
|
|
16
|
+
open: open,
|
|
17
|
+
openOnContext: openOnContext,
|
|
18
|
+
openOnHover: openOnHover,
|
|
19
|
+
setOpen: setOpen,
|
|
20
|
+
toggleOpen: toggleOpen,
|
|
21
|
+
triggerRef: triggerRef,
|
|
22
|
+
size: size,
|
|
23
|
+
trapFocus: trapFocus,
|
|
24
|
+
legacyTrapFocus: legacyTrapFocus,
|
|
25
|
+
withArrow: withArrow,
|
|
26
|
+
} },
|
|
27
|
+
state.popoverTrigger,
|
|
28
|
+
state.open && state.popoverSurface));
|
|
29
|
+
};
|
|
30
|
+
exports.renderPopover_unstable = renderPopover_unstable;
|
|
31
|
+
});
|
|
32
|
+
//# sourceMappingURL=renderPopover.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"renderPopover.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-popover/src/components/Popover/renderPopover.tsx"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,sBAAsB,GAAG,UAAC,KAAmB;QAEtD,IAAA,UAAU,GAeR,KAAK,WAfG,EACV,QAAQ,GAcN,KAAK,SAdC,EACR,UAAU,GAaR,KAAK,WAbG,EACV,MAAM,GAYJ,KAAK,OAZD,EACN,SAAS,GAWP,KAAK,UAXE,EACT,IAAI,GAUF,KAAK,KAVH,EACJ,aAAa,GASX,KAAK,cATM,EACb,WAAW,GAQT,KAAK,YARI,EACX,OAAO,GAOL,KAAK,QAPA,EACP,IAAI,GAMF,KAAK,KANH,EACJ,UAAU,GAKR,KAAK,WALG,EACV,SAAS,GAIP,KAAK,UAJE,EACT,UAAU,GAGR,KAAK,WAHG,EACV,SAAS,GAEP,KAAK,UAFE,EACT,eAAe,GACb,KAAK,gBADQ,CACP;QAEV,OAAO,CACL,oBAAC,+BAAc,CAAC,QAAQ,IACtB,KAAK,EAAE;gBACL,UAAU,YAAA;gBACV,QAAQ,UAAA;gBACR,UAAU,YAAA;gBACV,MAAM,QAAA;gBACN,SAAS,WAAA;gBACT,IAAI,MAAA;gBACJ,aAAa,eAAA;gBACb,WAAW,aAAA;gBACX,OAAO,SAAA;gBACP,UAAU,YAAA;gBACV,UAAU,YAAA;gBACV,IAAI,MAAA;gBACJ,SAAS,WAAA;gBACT,eAAe,iBAAA;gBACf,SAAS,WAAA;aACV;YAEA,KAAK,CAAC,cAAc;YACpB,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,cAAc,CACX,CAC3B,CAAC;IACJ,CAAC,CAAC;IA3CW,QAAA,sBAAsB,0BA2CjC","sourcesContent":["import * as React from 'react';\nimport { PopoverContext } from '../../popoverContext';\nimport type { PopoverState } from './Popover.types';\n\n/**\n * Render the final JSX of Popover\n */\nexport const renderPopover_unstable = (state: PopoverState) => {\n const {\n appearance,\n arrowRef,\n contentRef,\n inline,\n mountNode,\n open,\n openOnContext,\n openOnHover,\n setOpen,\n size,\n toggleOpen,\n trapFocus,\n triggerRef,\n withArrow,\n legacyTrapFocus,\n } = state;\n\n return (\n <PopoverContext.Provider\n value={{\n appearance,\n arrowRef,\n contentRef,\n inline,\n mountNode,\n open,\n openOnContext,\n openOnHover,\n setOpen,\n toggleOpen,\n triggerRef,\n size,\n trapFocus,\n legacyTrapFocus,\n withArrow,\n }}\n >\n {state.popoverTrigger}\n {state.open && state.popoverSurface}\n </PopoverContext.Provider>\n );\n};\n"]}
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@fluentui/react-shared-contexts", "@fluentui/react-positioning", "@fluentui/react-portal", "@fluentui/react-tabster", "../PopoverSurface/index", "./constants"], function (require, exports, tslib_1, React, react_utilities_1, react_shared_contexts_1, react_positioning_1, react_portal_1, react_tabster_1, index_1, constants_1) {
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.usePopover_unstable = void 0;
|
|
5
|
+
/**
|
|
6
|
+
* Create the state required to render Popover.
|
|
7
|
+
*
|
|
8
|
+
* The returned state can be modified with hooks such as usePopoverStyles,
|
|
9
|
+
* before being passed to renderPopover_unstable.
|
|
10
|
+
*
|
|
11
|
+
* @param props - props from this instance of Popover
|
|
12
|
+
*/
|
|
13
|
+
var usePopover_unstable = function (props) {
|
|
14
|
+
var _a;
|
|
15
|
+
var _b = react_positioning_1.usePositioningMouseTarget(), contextTarget = _b[0], setContextTarget = _b[1];
|
|
16
|
+
var initialState = tslib_1.__assign({ size: 'medium', contextTarget: contextTarget, setContextTarget: setContextTarget }, props);
|
|
17
|
+
var children = React.Children.toArray(props.children);
|
|
18
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
19
|
+
if (children.length === 0) {
|
|
20
|
+
// eslint-disable-next-line no-console
|
|
21
|
+
console.warn('Popover must contain at least one child');
|
|
22
|
+
}
|
|
23
|
+
if (children.length > 2) {
|
|
24
|
+
// eslint-disable-next-line no-console
|
|
25
|
+
console.warn('Popover must contain at most two children');
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
var popoverTrigger = undefined;
|
|
29
|
+
var popoverSurface = undefined;
|
|
30
|
+
if (children.length === 2) {
|
|
31
|
+
popoverTrigger = children[0];
|
|
32
|
+
popoverSurface = children[1];
|
|
33
|
+
}
|
|
34
|
+
else if (children.length === 1) {
|
|
35
|
+
popoverSurface = children[0];
|
|
36
|
+
}
|
|
37
|
+
var _c = useOpenState(initialState), open = _c[0], setOpenState = _c[1];
|
|
38
|
+
var setOpenTimeoutRef = React.useRef(0);
|
|
39
|
+
var setOpen = react_utilities_1.useEventCallback(function (e, shouldOpen) {
|
|
40
|
+
var _a;
|
|
41
|
+
clearTimeout(setOpenTimeoutRef.current);
|
|
42
|
+
if (!(e instanceof Event) && e.persist) {
|
|
43
|
+
// < React 17 still uses pooled synthetic events
|
|
44
|
+
e.persist();
|
|
45
|
+
}
|
|
46
|
+
if (e.type === 'mouseleave') {
|
|
47
|
+
// FIXME leaking Node timeout type
|
|
48
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
49
|
+
// @ts-ignore
|
|
50
|
+
setOpenTimeoutRef.current = setTimeout(function () {
|
|
51
|
+
setOpenState(e, shouldOpen);
|
|
52
|
+
}, (_a = props.mouseLeaveDelay) !== null && _a !== void 0 ? _a : 500);
|
|
53
|
+
}
|
|
54
|
+
else {
|
|
55
|
+
setOpenState(e, shouldOpen);
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
// Clear timeout on unmount
|
|
59
|
+
// Setting state after a component unmounts can cause memory leaks
|
|
60
|
+
React.useEffect(function () {
|
|
61
|
+
return function () {
|
|
62
|
+
clearTimeout(setOpenTimeoutRef.current);
|
|
63
|
+
};
|
|
64
|
+
}, []);
|
|
65
|
+
var toggleOpen = React.useCallback(function (e) {
|
|
66
|
+
setOpen(e, !open);
|
|
67
|
+
}, [setOpen, open]);
|
|
68
|
+
var positioningRefs = usePopoverRefs(initialState);
|
|
69
|
+
var targetDocument = react_shared_contexts_1.useFluent_unstable().targetDocument;
|
|
70
|
+
react_utilities_1.useOnClickOutside({
|
|
71
|
+
contains: react_portal_1.elementContains,
|
|
72
|
+
element: targetDocument,
|
|
73
|
+
callback: function (ev) { return setOpen(ev, false); },
|
|
74
|
+
refs: [positioningRefs.triggerRef, positioningRefs.contentRef],
|
|
75
|
+
disabled: !open,
|
|
76
|
+
});
|
|
77
|
+
// only close on scroll for context, or when closeOnScroll is specified
|
|
78
|
+
var closeOnScroll = initialState.openOnContext || initialState.closeOnScroll;
|
|
79
|
+
react_utilities_1.useOnScrollOutside({
|
|
80
|
+
contains: react_portal_1.elementContains,
|
|
81
|
+
element: targetDocument,
|
|
82
|
+
callback: function (ev) { return setOpen(ev, false); },
|
|
83
|
+
refs: [positioningRefs.triggerRef, positioningRefs.contentRef],
|
|
84
|
+
disabled: !open || !closeOnScroll,
|
|
85
|
+
});
|
|
86
|
+
var findFirstFocusable = react_tabster_1.useFocusFinders().findFirstFocusable;
|
|
87
|
+
React.useEffect(function () {
|
|
88
|
+
var _a;
|
|
89
|
+
if (open && positioningRefs.contentRef.current) {
|
|
90
|
+
var containerTabIndex = (_a = positioningRefs.contentRef.current.getAttribute('tabIndex')) !== null && _a !== void 0 ? _a : undefined;
|
|
91
|
+
var firstFocusable = isNaN(containerTabIndex)
|
|
92
|
+
? findFirstFocusable(positioningRefs.contentRef.current)
|
|
93
|
+
: positioningRefs.contentRef.current;
|
|
94
|
+
firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
|
|
95
|
+
}
|
|
96
|
+
}, [findFirstFocusable, open, positioningRefs.contentRef]);
|
|
97
|
+
return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, initialState), positioningRefs), { popoverTrigger: popoverTrigger, popoverSurface: popoverSurface, open: open, setOpen: setOpen, toggleOpen: toggleOpen, setContextTarget: setContextTarget, contextTarget: contextTarget, inline: (_a = props.inline) !== null && _a !== void 0 ? _a : false });
|
|
98
|
+
};
|
|
99
|
+
exports.usePopover_unstable = usePopover_unstable;
|
|
100
|
+
/**
|
|
101
|
+
* Creates and manages the Popover open state
|
|
102
|
+
*/
|
|
103
|
+
function useOpenState(state) {
|
|
104
|
+
var onOpenChange = react_utilities_1.useEventCallback(function (e, data) { var _a; return (_a = state.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(state, e, data); });
|
|
105
|
+
var _a = react_utilities_1.useControllableState({
|
|
106
|
+
state: state.open,
|
|
107
|
+
defaultState: state.defaultOpen,
|
|
108
|
+
initialState: false,
|
|
109
|
+
}), open = _a[0], setOpenState = _a[1];
|
|
110
|
+
state.open = open !== undefined ? open : state.open;
|
|
111
|
+
var setContextTarget = state.setContextTarget;
|
|
112
|
+
var setOpen = React.useCallback(function (e, shouldOpen) {
|
|
113
|
+
if (shouldOpen && e.type === 'contextmenu') {
|
|
114
|
+
setContextTarget(e);
|
|
115
|
+
}
|
|
116
|
+
if (!shouldOpen) {
|
|
117
|
+
setContextTarget(undefined);
|
|
118
|
+
}
|
|
119
|
+
setOpenState(function (prevOpen) {
|
|
120
|
+
// More than one event (mouse, focus, keyboard) can request the Popover to close
|
|
121
|
+
// We assume the first event is the correct one
|
|
122
|
+
if (prevOpen !== shouldOpen) {
|
|
123
|
+
onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(e, { open: shouldOpen });
|
|
124
|
+
}
|
|
125
|
+
return shouldOpen;
|
|
126
|
+
});
|
|
127
|
+
}, [setOpenState, onOpenChange, setContextTarget]);
|
|
128
|
+
return [open, setOpen];
|
|
129
|
+
}
|
|
130
|
+
/**
|
|
131
|
+
* Creates and sets the necessary trigger, target and content refs used by Popover
|
|
132
|
+
*/
|
|
133
|
+
function usePopoverRefs(state) {
|
|
134
|
+
var positioningOptions = tslib_1.__assign({ position: 'above', align: 'center', arrowPadding: 2 * constants_1.popoverSurfaceBorderRadius, target: state.openOnContext ? state.contextTarget : undefined }, react_positioning_1.resolvePositioningShorthand(state.positioning));
|
|
135
|
+
// no reason to render arrow when covering the target
|
|
136
|
+
if (positioningOptions.coverTarget) {
|
|
137
|
+
state.withArrow = false;
|
|
138
|
+
}
|
|
139
|
+
if (state.withArrow) {
|
|
140
|
+
positioningOptions.offset = react_positioning_1.mergeArrowOffset(positioningOptions.offset, index_1.arrowHeights[state.size]);
|
|
141
|
+
}
|
|
142
|
+
var _a = react_positioning_1.usePositioning(positioningOptions), triggerRef = _a.targetRef, contentRef = _a.containerRef, arrowRef = _a.arrowRef;
|
|
143
|
+
return {
|
|
144
|
+
triggerRef: triggerRef,
|
|
145
|
+
contentRef: contentRef,
|
|
146
|
+
arrowRef: arrowRef,
|
|
147
|
+
};
|
|
148
|
+
}
|
|
149
|
+
});
|
|
150
|
+
//# sourceMappingURL=usePopover.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"usePopover.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-popover/src/components/Popover/usePopover.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n useControllableState,\n useEventCallback,\n useOnClickOutside,\n useOnScrollOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n usePositioning,\n resolvePositioningShorthand,\n mergeArrowOffset,\n usePositioningMouseTarget,\n} from '@fluentui/react-positioning';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { arrowHeights } from '../PopoverSurface/index';\nimport type { OpenPopoverEvents, PopoverProps, PopoverState } from './Popover.types';\nimport { popoverSurfaceBorderRadius } from './constants';\n\n/**\n * Create the state required to render Popover.\n *\n * The returned state can be modified with hooks such as usePopoverStyles,\n * before being passed to renderPopover_unstable.\n *\n * @param props - props from this instance of Popover\n */\nexport const usePopover_unstable = (props: PopoverProps): PopoverState => {\n const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n const initialState = {\n size: 'medium',\n contextTarget,\n setContextTarget,\n ...props,\n } as const;\n\n const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n if (process.env.NODE_ENV !== 'production') {\n if (children.length === 0) {\n // eslint-disable-next-line no-console\n console.warn('Popover must contain at least one child');\n }\n\n if (children.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('Popover must contain at most two children');\n }\n }\n\n let popoverTrigger: React.ReactElement | undefined = undefined;\n let popoverSurface: React.ReactElement | undefined = undefined;\n if (children.length === 2) {\n popoverTrigger = children[0];\n popoverSurface = children[1];\n } else if (children.length === 1) {\n popoverSurface = children[0];\n }\n\n const [open, setOpenState] = useOpenState(initialState);\n\n const setOpenTimeoutRef = React.useRef(0);\n\n const setOpen = useEventCallback((e: OpenPopoverEvents, shouldOpen: boolean) => {\n clearTimeout(setOpenTimeoutRef.current);\n if (!(e instanceof Event) && e.persist) {\n // < React 17 still uses pooled synthetic events\n e.persist();\n }\n\n if (e.type === 'mouseleave') {\n // FIXME leaking Node timeout type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n setOpenTimeoutRef.current = setTimeout(() => {\n setOpenState(e, shouldOpen);\n }, props.mouseLeaveDelay ?? 500);\n } else {\n setOpenState(e, shouldOpen);\n }\n });\n\n // Clear timeout on unmount\n // Setting state after a component unmounts can cause memory leaks\n React.useEffect(() => {\n return () => {\n clearTimeout(setOpenTimeoutRef.current);\n };\n }, []);\n\n const toggleOpen = React.useCallback<PopoverState['toggleOpen']>(\n e => {\n setOpen(e, !open);\n },\n [setOpen, open],\n );\n\n const positioningRefs = usePopoverRefs(initialState);\n\n const { targetDocument } = useFluent();\n useOnClickOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, false),\n refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n disabled: !open,\n });\n\n // only close on scroll for context, or when closeOnScroll is specified\n const closeOnScroll = initialState.openOnContext || initialState.closeOnScroll;\n useOnScrollOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, false),\n refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n disabled: !open || !closeOnScroll,\n });\n\n const { findFirstFocusable } = useFocusFinders();\n\n React.useEffect(() => {\n if (open && positioningRefs.contentRef.current) {\n const containerTabIndex = positioningRefs.contentRef.current.getAttribute('tabIndex') ?? undefined;\n const firstFocusable = isNaN(containerTabIndex)\n ? findFirstFocusable(positioningRefs.contentRef.current)\n : positioningRefs.contentRef.current;\n firstFocusable?.focus();\n }\n }, [findFirstFocusable, open, positioningRefs.contentRef]);\n\n return {\n ...initialState,\n ...positioningRefs,\n popoverTrigger,\n popoverSurface,\n open,\n setOpen,\n toggleOpen,\n setContextTarget,\n contextTarget,\n inline: props.inline ?? false,\n };\n};\n\n/**\n * Creates and manages the Popover open state\n */\nfunction useOpenState(\n state: Pick<PopoverState, 'setContextTarget' | 'onOpenChange'> & Pick<PopoverProps, 'open' | 'defaultOpen'>,\n) {\n const onOpenChange: PopoverState['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n const [open, setOpenState] = useControllableState({\n state: state.open,\n defaultState: state.defaultOpen,\n initialState: false,\n });\n state.open = open !== undefined ? open : state.open;\n const setContextTarget = state.setContextTarget;\n\n const setOpen = React.useCallback(\n (e: OpenPopoverEvents, shouldOpen: boolean) => {\n if (shouldOpen && e.type === 'contextmenu') {\n setContextTarget(e as React.MouseEvent);\n }\n\n if (!shouldOpen) {\n setContextTarget(undefined);\n }\n\n setOpenState(prevOpen => {\n // More than one event (mouse, focus, keyboard) can request the Popover to close\n // We assume the first event is the correct one\n if (prevOpen !== shouldOpen) {\n onOpenChange?.(e, { open: shouldOpen });\n }\n\n return shouldOpen;\n });\n },\n [setOpenState, onOpenChange, setContextTarget],\n );\n\n return [open, setOpen] as const;\n}\n\n/**\n * Creates and sets the necessary trigger, target and content refs used by Popover\n */\nfunction usePopoverRefs(\n state: Pick<PopoverState, 'size' | 'contextTarget'> &\n Pick<PopoverProps, 'positioning' | 'openOnContext' | 'withArrow'>,\n) {\n const positioningOptions = {\n position: 'above' as const,\n align: 'center' as const,\n arrowPadding: 2 * popoverSurfaceBorderRadius,\n target: state.openOnContext ? state.contextTarget : undefined,\n ...resolvePositioningShorthand(state.positioning),\n };\n\n // no reason to render arrow when covering the target\n if (positioningOptions.coverTarget) {\n state.withArrow = false;\n }\n\n if (state.withArrow) {\n positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeights[state.size]);\n }\n\n const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePositioning(positioningOptions);\n\n return {\n triggerRef,\n contentRef,\n arrowRef,\n } as const;\n}\n"]}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
define(["require", "exports", "react", "./usePopoverSurface", "./renderPopoverSurface", "./usePopoverSurfaceStyles"], function (require, exports, React, usePopoverSurface_1, renderPopoverSurface_1, usePopoverSurfaceStyles_1) {
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.PopoverSurface = void 0;
|
|
5
|
+
/**
|
|
6
|
+
* PopoverSurface component renders react children in a positioned box
|
|
7
|
+
*/
|
|
8
|
+
exports.PopoverSurface = React.forwardRef(function (props, ref) {
|
|
9
|
+
var state = usePopoverSurface_1.usePopoverSurface_unstable(props, ref);
|
|
10
|
+
usePopoverSurfaceStyles_1.usePopoverSurfaceStyles_unstable(state);
|
|
11
|
+
return renderPopoverSurface_1.renderPopoverSurface_unstable(state);
|
|
12
|
+
});
|
|
13
|
+
exports.PopoverSurface.displayName = 'PopoverSurface';
|
|
14
|
+
});
|
|
15
|
+
//# sourceMappingURL=PopoverSurface.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PopoverSurface.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-popover/src/components/PopoverSurface/PopoverSurface.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,cAAc,GAA6C,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAClG,IAAM,KAAK,GAAG,8CAA0B,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAErD,0DAAgC,CAAC,KAAK,CAAC,CAAC;QACxC,OAAO,oDAA6B,CAAC,KAAK,CAAC,CAAC;IAC9C,CAAC,CAAC,CAAC;IAEH,sBAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["import * as React from 'react';\nimport { usePopoverSurface_unstable } from './usePopoverSurface';\nimport { renderPopoverSurface_unstable } from './renderPopoverSurface';\nimport { usePopoverSurfaceStyles_unstable } from './usePopoverSurfaceStyles';\nimport type { PopoverSurfaceProps } from './PopoverSurface.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * PopoverSurface component renders react children in a positioned box\n */\nexport const PopoverSurface: ForwardRefComponent<PopoverSurfaceProps> = React.forwardRef((props, ref) => {\n const state = usePopoverSurface_unstable(props, ref);\n\n usePopoverSurfaceStyles_unstable(state);\n return renderPopoverSurface_unstable(state);\n});\n\nPopoverSurface.displayName = 'PopoverSurface';\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PopoverSurface.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-popover/src/components/PopoverSurface/PopoverSurface.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverContextValue } from '../../popoverContext';\n\n/**\n * PopoverSurface Props\n */\nexport type PopoverSurfaceProps = ComponentProps<PopoverSurfaceSlots>;\n\n/**\n * Names of the slots in PopoverSurfaceProps\n */\nexport type PopoverSurfaceSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * PopoverSurface State\n */\nexport type PopoverSurfaceState = ComponentState<PopoverSurfaceSlots> &\n Pick<PopoverContextValue, 'appearance' | 'arrowRef' | 'inline' | 'mountNode' | 'size' | 'withArrow'> & {\n /**\n * CSS class for the arrow element\n */\n arrowClassName?: string;\n };\n"]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
define(["require", "exports", "tslib", "./PopoverSurface", "./PopoverSurface.types", "./renderPopoverSurface", "./usePopoverSurface", "./usePopoverSurfaceStyles"], function (require, exports, tslib_1, PopoverSurface_1, PopoverSurface_types_1, renderPopoverSurface_1, usePopoverSurface_1, usePopoverSurfaceStyles_1) {
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
tslib_1.__exportStar(PopoverSurface_1, exports);
|
|
5
|
+
tslib_1.__exportStar(PopoverSurface_types_1, exports);
|
|
6
|
+
tslib_1.__exportStar(renderPopoverSurface_1, exports);
|
|
7
|
+
tslib_1.__exportStar(usePopoverSurface_1, exports);
|
|
8
|
+
tslib_1.__exportStar(usePopoverSurfaceStyles_1, exports);
|
|
9
|
+
});
|
|
10
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-popover/src/components/PopoverSurface/index.ts"],"names":[],"mappings":";;;IAAA,gDAAiC;IACjC,sDAAuC;IACvC,sDAAuC;IACvC,mDAAoC;IACpC,yDAA0C","sourcesContent":["export * from './PopoverSurface';\nexport * from './PopoverSurface.types';\nexport * from './renderPopoverSurface';\nexport * from './usePopoverSurface';\nexport * from './usePopoverSurfaceStyles';\n"]}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
define(["require", "exports", "tslib", "react", "@fluentui/react-portal", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_portal_1, react_utilities_1) {
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.renderPopoverSurface_unstable = void 0;
|
|
5
|
+
/**
|
|
6
|
+
* Render the final JSX of PopoverSurface
|
|
7
|
+
*/
|
|
8
|
+
var renderPopoverSurface_unstable = function (state) {
|
|
9
|
+
var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
|
|
10
|
+
var surface = (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
|
|
11
|
+
state.withArrow && React.createElement("div", { ref: state.arrowRef, className: state.arrowClassName }),
|
|
12
|
+
slotProps.root.children));
|
|
13
|
+
if (state.inline) {
|
|
14
|
+
return surface;
|
|
15
|
+
}
|
|
16
|
+
return React.createElement(react_portal_1.Portal, { mountNode: state.mountNode }, surface);
|
|
17
|
+
};
|
|
18
|
+
exports.renderPopoverSurface_unstable = renderPopoverSurface_unstable;
|
|
19
|
+
});
|
|
20
|
+
//# sourceMappingURL=renderPopoverSurface.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"renderPopoverSurface.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-popover/src/components/PopoverSurface/renderPopoverSurface.tsx"],"names":[],"mappings":";;;;IAKA;;OAEG;IACI,IAAM,6BAA6B,GAAG,UAAC,KAA0B;QAChE,IAAA,KAAuB,0BAAQ,CAAsB,KAAK,CAAC,EAAzD,KAAK,WAAA,EAAE,SAAS,eAAyC,CAAC;QAElE,IAAM,OAAO,GAAG,CACd,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,KAAK,CAAC,SAAS,IAAI,6BAAK,GAAG,EAAE,KAAK,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,CAAC,cAAc,GAAI;YAChF,SAAS,CAAC,IAAI,CAAC,QAAQ,CACb,CACd,CAAC;QAEF,IAAI,KAAK,CAAC,MAAM,EAAE;YAChB,OAAO,OAAO,CAAC;SAChB;QAED,OAAO,oBAAC,qBAAM,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,IAAG,OAAO,CAAU,CAAC;IAChE,CAAC,CAAC;IAfW,QAAA,6BAA6B,iCAexC","sourcesContent":["import * as React from 'react';\nimport { Portal } from '@fluentui/react-portal';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';\n\n/**\n * Render the final JSX of PopoverSurface\n */\nexport const renderPopoverSurface_unstable = (state: PopoverSurfaceState) => {\n const { slots, slotProps } = getSlots<PopoverSurfaceSlots>(state);\n\n const surface = (\n <slots.root {...slotProps.root}>\n {state.withArrow && <div ref={state.arrowRef} className={state.arrowClassName} />}\n {slotProps.root.children}\n </slots.root>\n );\n\n if (state.inline) {\n return surface;\n }\n\n return <Portal mountNode={state.mountNode}>{surface}</Portal>;\n};\n"]}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
define(["require", "exports", "tslib", "@fluentui/react-utilities", "@fluentui/react-tabster", "../../popoverContext"], function (require, exports, tslib_1, react_utilities_1, react_tabster_1, popoverContext_1) {
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.usePopoverSurface_unstable = void 0;
|
|
5
|
+
/**
|
|
6
|
+
* Create the state required to render PopoverSurface.
|
|
7
|
+
*
|
|
8
|
+
* The returned state can be modified with hooks such as usePopoverSurfaceStyles_unstable,
|
|
9
|
+
* before being passed to renderPopoverSurface_unstable.
|
|
10
|
+
*
|
|
11
|
+
* @param props - props from this instance of PopoverSurface
|
|
12
|
+
* @param ref - reference to root HTMLDivElement of PopoverSurface
|
|
13
|
+
*/
|
|
14
|
+
var usePopoverSurface_unstable = function (props, ref) {
|
|
15
|
+
var contentRef = popoverContext_1.usePopoverContext_unstable(function (context) { return context.contentRef; });
|
|
16
|
+
var openOnHover = popoverContext_1.usePopoverContext_unstable(function (context) { return context.openOnHover; });
|
|
17
|
+
var setOpen = popoverContext_1.usePopoverContext_unstable(function (context) { return context.setOpen; });
|
|
18
|
+
var mountNode = popoverContext_1.usePopoverContext_unstable(function (context) { return context.mountNode; });
|
|
19
|
+
var arrowRef = popoverContext_1.usePopoverContext_unstable(function (context) { return context.arrowRef; });
|
|
20
|
+
var size = popoverContext_1.usePopoverContext_unstable(function (context) { return context.size; });
|
|
21
|
+
var withArrow = popoverContext_1.usePopoverContext_unstable(function (context) { return context.withArrow; });
|
|
22
|
+
var appearance = popoverContext_1.usePopoverContext_unstable(function (context) { return context.appearance; });
|
|
23
|
+
var trapFocus = popoverContext_1.usePopoverContext_unstable(function (context) { return context.trapFocus; });
|
|
24
|
+
var legacyTrapFocus = popoverContext_1.usePopoverContext_unstable(function (context) { return context.legacyTrapFocus; });
|
|
25
|
+
var inline = popoverContext_1.usePopoverContext_unstable(function (context) { return context.inline; });
|
|
26
|
+
var modalAttributes = react_tabster_1.useModalAttributes({ trapFocus: trapFocus, legacyTrapFocus: legacyTrapFocus }).modalAttributes;
|
|
27
|
+
var state = {
|
|
28
|
+
inline: inline,
|
|
29
|
+
appearance: appearance,
|
|
30
|
+
withArrow: withArrow,
|
|
31
|
+
size: size,
|
|
32
|
+
arrowRef: arrowRef,
|
|
33
|
+
mountNode: mountNode,
|
|
34
|
+
components: {
|
|
35
|
+
root: 'div',
|
|
36
|
+
},
|
|
37
|
+
root: react_utilities_1.getNativeElementProps('div', tslib_1.__assign(tslib_1.__assign({ ref: react_utilities_1.useMergedRefs(ref, contentRef), role: trapFocus ? 'dialog' : 'group', 'aria-modal': trapFocus ? true : undefined }, modalAttributes), props)),
|
|
38
|
+
};
|
|
39
|
+
var _a = state.root, onMouseEnterOriginal = _a.onMouseEnter, onMouseLeaveOriginal = _a.onMouseLeave, onKeyDownOriginal = _a.onKeyDown;
|
|
40
|
+
state.root.onMouseEnter = function (e) {
|
|
41
|
+
if (openOnHover) {
|
|
42
|
+
setOpen(e, true);
|
|
43
|
+
}
|
|
44
|
+
onMouseEnterOriginal === null || onMouseEnterOriginal === void 0 ? void 0 : onMouseEnterOriginal(e);
|
|
45
|
+
};
|
|
46
|
+
state.root.onMouseLeave = function (e) {
|
|
47
|
+
if (openOnHover) {
|
|
48
|
+
setOpen(e, false);
|
|
49
|
+
}
|
|
50
|
+
onMouseLeaveOriginal === null || onMouseLeaveOriginal === void 0 ? void 0 : onMouseLeaveOriginal(e);
|
|
51
|
+
};
|
|
52
|
+
state.root.onKeyDown = function (e) {
|
|
53
|
+
var _a;
|
|
54
|
+
// only close if the event happened inside the current popover
|
|
55
|
+
// If using a stack of inline popovers, the user should call `stopPropagation` to avoid dismissing the entire stack
|
|
56
|
+
if (e.key === 'Escape' && ((_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
|
|
57
|
+
setOpen(e, false);
|
|
58
|
+
}
|
|
59
|
+
onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(e);
|
|
60
|
+
};
|
|
61
|
+
return state;
|
|
62
|
+
};
|
|
63
|
+
exports.usePopoverSurface_unstable = usePopoverSurface_unstable;
|
|
64
|
+
});
|
|
65
|
+
//# sourceMappingURL=usePopoverSurface.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"usePopoverSurface.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurface.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext_unstable } from '../../popoverContext';\nimport type { PopoverSurfaceProps, PopoverSurfaceState } from './PopoverSurface.types';\n\n/**\n * Create the state required to render PopoverSurface.\n *\n * The returned state can be modified with hooks such as usePopoverSurfaceStyles_unstable,\n * before being passed to renderPopoverSurface_unstable.\n *\n * @param props - props from this instance of PopoverSurface\n * @param ref - reference to root HTMLDivElement of PopoverSurface\n */\nexport const usePopoverSurface_unstable = (\n props: PopoverSurfaceProps,\n ref: React.Ref<HTMLDivElement>,\n): PopoverSurfaceState => {\n const contentRef = usePopoverContext_unstable(context => context.contentRef);\n const openOnHover = usePopoverContext_unstable(context => context.openOnHover);\n const setOpen = usePopoverContext_unstable(context => context.setOpen);\n const mountNode = usePopoverContext_unstable(context => context.mountNode);\n const arrowRef = usePopoverContext_unstable(context => context.arrowRef);\n const size = usePopoverContext_unstable(context => context.size);\n const withArrow = usePopoverContext_unstable(context => context.withArrow);\n const appearance = usePopoverContext_unstable(context => context.appearance);\n const trapFocus = usePopoverContext_unstable(context => context.trapFocus);\n const legacyTrapFocus = usePopoverContext_unstable(context => context.legacyTrapFocus);\n const inline = usePopoverContext_unstable(context => context.inline);\n const { modalAttributes } = useModalAttributes({ trapFocus, legacyTrapFocus });\n\n const state: PopoverSurfaceState = {\n inline,\n appearance,\n withArrow,\n size,\n arrowRef,\n mountNode,\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref: useMergedRefs(ref, contentRef),\n role: trapFocus ? 'dialog' : 'group',\n 'aria-modal': trapFocus ? true : undefined,\n ...modalAttributes,\n ...props,\n }),\n };\n\n const {\n onMouseEnter: onMouseEnterOriginal,\n onMouseLeave: onMouseLeaveOriginal,\n onKeyDown: onKeyDownOriginal,\n } = state.root;\n state.root.onMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {\n if (openOnHover) {\n setOpen(e, true);\n }\n\n onMouseEnterOriginal?.(e);\n };\n\n state.root.onMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {\n if (openOnHover) {\n setOpen(e, false);\n }\n\n onMouseLeaveOriginal?.(e);\n };\n\n state.root.onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n // only close if the event happened inside the current popover\n // If using a stack of inline popovers, the user should call `stopPropagation` to avoid dismissing the entire stack\n if (e.key === 'Escape' && contentRef.current?.contains(e.target as HTMLDivElement)) {\n setOpen(e, false);\n }\n\n onKeyDownOriginal?.(e);\n };\n\n return state;\n};\n"]}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-positioning", "@fluentui/react-theme"], function (require, exports, tslib_1, react_1, react_positioning_1, react_theme_1) {
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.usePopoverSurfaceStyles_unstable = exports.arrowHeights = exports.popoverSurfaceClassNames = void 0;
|
|
5
|
+
exports.popoverSurfaceClassNames = {
|
|
6
|
+
root: 'fui-PopoverSurface',
|
|
7
|
+
};
|
|
8
|
+
exports.arrowHeights = {
|
|
9
|
+
small: 6,
|
|
10
|
+
medium: 8,
|
|
11
|
+
large: 8,
|
|
12
|
+
};
|
|
13
|
+
/**
|
|
14
|
+
* Styles for the root slot
|
|
15
|
+
*/
|
|
16
|
+
var useStyles = react_1.makeStyles({
|
|
17
|
+
root: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackground1, boxShadow: react_theme_1.tokens.shadow16 }, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)), react_1.shorthands.border('1px', 'solid', react_theme_1.tokens.colorTransparentStroke)),
|
|
18
|
+
inverted: {
|
|
19
|
+
backgroundColor: react_theme_1.tokens.colorNeutralBackgroundStatic,
|
|
20
|
+
color: react_theme_1.tokens.colorNeutralForegroundStaticInverted,
|
|
21
|
+
},
|
|
22
|
+
brand: {
|
|
23
|
+
backgroundColor: react_theme_1.tokens.colorBrandBackground,
|
|
24
|
+
color: react_theme_1.tokens.colorNeutralForegroundOnBrand,
|
|
25
|
+
},
|
|
26
|
+
smallPadding: tslib_1.__assign({}, react_1.shorthands.padding('12px')),
|
|
27
|
+
mediumPadding: tslib_1.__assign({}, react_1.shorthands.padding('16px')),
|
|
28
|
+
largePadding: tslib_1.__assign({}, react_1.shorthands.padding('20px')),
|
|
29
|
+
smallArrow: react_positioning_1.createArrowHeightStyles(exports.arrowHeights.small),
|
|
30
|
+
mediumLargeArrow: react_positioning_1.createArrowHeightStyles(exports.arrowHeights.medium),
|
|
31
|
+
arrow: react_positioning_1.createArrowStyles({ arrowHeight: undefined }),
|
|
32
|
+
});
|
|
33
|
+
/**
|
|
34
|
+
* Apply styling to the PopoverSurface slots based on the state
|
|
35
|
+
*/
|
|
36
|
+
var usePopoverSurfaceStyles_unstable = function (state) {
|
|
37
|
+
var styles = useStyles();
|
|
38
|
+
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);
|
|
39
|
+
state.arrowClassName = react_1.mergeClasses(styles.arrow, state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow);
|
|
40
|
+
return state;
|
|
41
|
+
};
|
|
42
|
+
exports.usePopoverSurfaceStyles_unstable = usePopoverSurfaceStyles_unstable;
|
|
43
|
+
});
|
|
44
|
+
//# sourceMappingURL=usePopoverSurfaceStyles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"usePopoverSurfaceStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts"],"names":[],"mappings":";;;;IAOa,QAAA,wBAAwB,GAAwC;QAC3E,IAAI,EAAE,oBAAoB;KAC3B,CAAC;IAEW,QAAA,YAAY,GAAgC;QACvD,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;QACT,KAAK,EAAE,CAAC;KACT,CAAC;IAEF;;OAEG;IACH,IAAM,SAAS,GAAG,kBAAU,CAAC;QAC3B,IAAI,sCACF,eAAe,EAAE,oBAAM,CAAC,uBAAuB,EAC/C,SAAS,EAAE,oBAAM,CAAC,QAAQ,IACvB,kBAAU,CAAC,YAAY,CAAC,oBAAM,CAAC,kBAAkB,CAAC,GAClD,kBAAU,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,oBAAM,CAAC,sBAAsB,CAAC,CACpE;QAED,QAAQ,EAAE;YACR,eAAe,EAAE,oBAAM,CAAC,4BAA4B;YACpD,KAAK,EAAE,oBAAM,CAAC,oCAAoC;SACnD;QAED,KAAK,EAAE;YACL,eAAe,EAAE,oBAAM,CAAC,oBAAoB;YAC5C,KAAK,EAAE,oBAAM,CAAC,6BAA6B;SAC5C;QAED,YAAY,uBACP,kBAAU,CAAC,OAAO,CAAC,MAAM,CAAC,CAC9B;QAED,aAAa,uBACR,kBAAU,CAAC,OAAO,CAAC,MAAM,CAAC,CAC9B;QAED,YAAY,uBACP,kBAAU,CAAC,OAAO,CAAC,MAAM,CAAC,CAC9B;QAED,UAAU,EAAE,2CAAuB,CAAC,oBAAY,CAAC,KAAK,CAAC;QACvD,gBAAgB,EAAE,2CAAuB,CAAC,oBAAY,CAAC,MAAM,CAAC;QAC9D,KAAK,EAAE,qCAAiB,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC;KACrD,CAAC,CAAC;IAEH;;OAEG;IACI,IAAM,gCAAgC,GAAG,UAAC,KAA0B;QACzE,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;QAC3B,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CACjC,gCAAwB,CAAC,IAAI,EAC7B,MAAM,CAAC,IAAI,EACX,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,MAAM,CAAC,YAAY,EAC7C,KAAK,CAAC,IAAI,KAAK,QAAQ,IAAI,MAAM,CAAC,aAAa,EAC/C,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,MAAM,CAAC,YAAY,EAC7C,KAAK,CAAC,UAAU,KAAK,UAAU,IAAI,MAAM,CAAC,QAAQ,EAClD,KAAK,CAAC,UAAU,KAAK,OAAO,IAAI,MAAM,CAAC,KAAK,EAC5C,KAAK,CAAC,IAAI,CAAC,SAAS,CACrB,CAAC;QAEF,KAAK,CAAC,cAAc,GAAG,oBAAY,CACjC,MAAM,CAAC,KAAK,EACZ,KAAK,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CACrE,CAAC;QAEF,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAnBW,QAAA,gCAAgC,oCAmB3C","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\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(tokens.borderRadiusMedium),\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n },\n\n inverted: {\n backgroundColor: tokens.colorNeutralBackgroundStatic,\n color: tokens.colorNeutralForegroundStaticInverted,\n },\n\n brand: {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\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"]}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
define(["require", "exports", "./usePopoverTrigger", "./renderPopoverTrigger"], function (require, exports, usePopoverTrigger_1, renderPopoverTrigger_1) {
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.PopoverTrigger = void 0;
|
|
5
|
+
/**
|
|
6
|
+
* Wraps a trigger element as an only child and adds the necessary event handling to open a popover.
|
|
7
|
+
*/
|
|
8
|
+
var PopoverTrigger = function (props) {
|
|
9
|
+
var state = usePopoverTrigger_1.usePopoverTrigger_unstable(props);
|
|
10
|
+
return renderPopoverTrigger_1.renderPopoverTrigger_unstable(state);
|
|
11
|
+
};
|
|
12
|
+
exports.PopoverTrigger = PopoverTrigger;
|
|
13
|
+
exports.PopoverTrigger.displayName = 'PopoverTrigger';
|
|
14
|
+
// type casting here is required to ensure internal type FluentTriggerComponent is not leaked
|
|
15
|
+
exports.PopoverTrigger.isFluentTriggerComponent = true;
|
|
16
|
+
});
|
|
17
|
+
//# sourceMappingURL=PopoverTrigger.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PopoverTrigger.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-popover/src/components/PopoverTrigger/PopoverTrigger.tsx"],"names":[],"mappings":";;;;IAMA;;OAEG;IACI,IAAM,cAAc,GAAkC,UAAA,KAAK;QAChE,IAAM,KAAK,GAAG,8CAA0B,CAAC,KAAK,CAAC,CAAC;QAEhD,OAAO,oDAA6B,CAAC,KAAK,CAAC,CAAC;IAC9C,CAAC,CAAC;IAJW,QAAA,cAAc,kBAIzB;IAEF,sBAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC;IAC9C,6FAA6F;IAC5F,sBAAyC,CAAC,wBAAwB,GAAG,IAAI,CAAC","sourcesContent":["import * as React from 'react';\nimport { usePopoverTrigger_unstable } from './usePopoverTrigger';\nimport { renderPopoverTrigger_unstable } from './renderPopoverTrigger';\nimport type { FluentTriggerComponent } from '@fluentui/react-utilities';\nimport type { PopoverTriggerProps } from './PopoverTrigger.types';\n\n/**\n * Wraps a trigger element as an only child and adds the necessary event handling to open a popover.\n */\nexport const PopoverTrigger: React.FC<PopoverTriggerProps> = props => {\n const state = usePopoverTrigger_unstable(props);\n\n return renderPopoverTrigger_unstable(state);\n};\n\nPopoverTrigger.displayName = 'PopoverTrigger';\n// type casting here is required to ensure internal type FluentTriggerComponent is not leaked\n(PopoverTrigger as FluentTriggerComponent).isFluentTriggerComponent = true;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PopoverTrigger.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-popover/src/components/PopoverTrigger/PopoverTrigger.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ARIAButtonResultProps, ARIAButtonType } from '@fluentui/react-aria';\nimport type { TriggerProps } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\n/**\n * PopoverTrigger Props\n */\nexport type PopoverTriggerProps = TriggerProps<PopoverTriggerChildProps> & {\n /**\n * Disables internal trigger mechanism that ensures a child provided will be a compliant ARIA button.\n * @default false\n */\n disableButtonEnhancement?: boolean;\n};\n\n/**\n * PopoverTrigger State\n */\nexport type PopoverTriggerState = {\n children: React.ReactElement | null;\n};\n\n/**\n * Props that are passed to the child of the DialogTrigger when cloned to ensure correct behaviour for the Dialog\n */\nexport type PopoverTriggerChildProps<Type extends ARIAButtonType = ARIAButtonType, Props = {}> = ARIAButtonResultProps<\n Type,\n Props & {\n 'aria-expanded'?: 'true' | 'false';\n ref: React.Ref<unknown>;\n onMouseEnter: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n onMouseLeave: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n onContextMenu: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n }\n>;\n"]}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
define(["require", "exports", "tslib", "./PopoverTrigger", "./PopoverTrigger.types", "./renderPopoverTrigger", "./usePopoverTrigger"], function (require, exports, tslib_1, PopoverTrigger_1, PopoverTrigger_types_1, renderPopoverTrigger_1, usePopoverTrigger_1) {
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
tslib_1.__exportStar(PopoverTrigger_1, exports);
|
|
5
|
+
tslib_1.__exportStar(PopoverTrigger_types_1, exports);
|
|
6
|
+
tslib_1.__exportStar(renderPopoverTrigger_1, exports);
|
|
7
|
+
tslib_1.__exportStar(usePopoverTrigger_1, exports);
|
|
8
|
+
});
|
|
9
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-popover/src/components/PopoverTrigger/index.ts"],"names":[],"mappings":";;;IAAA,gDAAiC;IACjC,sDAAuC;IACvC,sDAAuC;IACvC,mDAAoC","sourcesContent":["export * from './PopoverTrigger';\nexport * from './PopoverTrigger.types';\nexport * from './renderPopoverTrigger';\nexport * from './usePopoverTrigger';\n"]}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
define(["require", "exports"], function (require, exports) {
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.renderPopoverTrigger_unstable = void 0;
|
|
5
|
+
/**
|
|
6
|
+
* Render the final JSX of PopoverTrigger
|
|
7
|
+
*/
|
|
8
|
+
var renderPopoverTrigger_unstable = function (state) {
|
|
9
|
+
return state.children;
|
|
10
|
+
};
|
|
11
|
+
exports.renderPopoverTrigger_unstable = renderPopoverTrigger_unstable;
|
|
12
|
+
});
|
|
13
|
+
//# sourceMappingURL=renderPopoverTrigger.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"renderPopoverTrigger.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-popover/src/components/PopoverTrigger/renderPopoverTrigger.tsx"],"names":[],"mappings":";;;;IAEA;;OAEG;IACI,IAAM,6BAA6B,GAAG,UAAC,KAA0B;QACtE,OAAO,KAAK,CAAC,QAAQ,CAAC;IACxB,CAAC,CAAC;IAFW,QAAA,6BAA6B,iCAExC","sourcesContent":["import type { PopoverTriggerState } from './PopoverTrigger.types';\n\n/**\n * Render the final JSX of PopoverTrigger\n */\nexport const renderPopoverTrigger_unstable = (state: PopoverTriggerState) => {\n return state.children;\n};\n"]}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
define(["require", "exports", "tslib", "@fluentui/react-utilities", "@fluentui/react-tabster", "../../popoverContext", "@fluentui/react-aria", "@fluentui/keyboard-keys"], function (require, exports, tslib_1, react_utilities_1, react_tabster_1, popoverContext_1, react_aria_1, keyboard_keys_1) {
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.usePopoverTrigger_unstable = void 0;
|
|
5
|
+
/**
|
|
6
|
+
* Create the state required to render PopoverTrigger.
|
|
7
|
+
*
|
|
8
|
+
* The returned state can be modified with hooks such as usePopoverTriggerStyles,
|
|
9
|
+
* before being passed to renderPopoverTrigger_unstable.
|
|
10
|
+
*
|
|
11
|
+
* @param props - props from this instance of PopoverTrigger
|
|
12
|
+
*/
|
|
13
|
+
var usePopoverTrigger_unstable = function (props) {
|
|
14
|
+
var children = props.children, _a = props.disableButtonEnhancement, disableButtonEnhancement = _a === void 0 ? false : _a;
|
|
15
|
+
var child = react_utilities_1.getTriggerChild(children);
|
|
16
|
+
var open = popoverContext_1.usePopoverContext_unstable(function (context) { return context.open; });
|
|
17
|
+
var setOpen = popoverContext_1.usePopoverContext_unstable(function (context) { return context.setOpen; });
|
|
18
|
+
var toggleOpen = popoverContext_1.usePopoverContext_unstable(function (context) { return context.toggleOpen; });
|
|
19
|
+
var triggerRef = popoverContext_1.usePopoverContext_unstable(function (context) { return context.triggerRef; });
|
|
20
|
+
var openOnHover = popoverContext_1.usePopoverContext_unstable(function (context) { return context.openOnHover; });
|
|
21
|
+
var openOnContext = popoverContext_1.usePopoverContext_unstable(function (context) { return context.openOnContext; });
|
|
22
|
+
var triggerAttributes = react_tabster_1.useModalAttributes().triggerAttributes;
|
|
23
|
+
var onContextMenu = function (e) {
|
|
24
|
+
if (openOnContext) {
|
|
25
|
+
e.preventDefault();
|
|
26
|
+
setOpen(e, true);
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
var onClick = function (e) {
|
|
30
|
+
if (!openOnContext) {
|
|
31
|
+
toggleOpen(e);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
var onKeyDown = function (e) {
|
|
35
|
+
if (e.key === keyboard_keys_1.Escape && open) {
|
|
36
|
+
setOpen(e, false);
|
|
37
|
+
// stop propagation to avoid conflicting with other elements that listen for `Escape`
|
|
38
|
+
// e,g: Dialog, Menu
|
|
39
|
+
e.stopPropagation();
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
var onMouseEnter = function (e) {
|
|
43
|
+
if (openOnHover) {
|
|
44
|
+
setOpen(e, true);
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
var onMouseLeave = function (e) {
|
|
48
|
+
if (openOnHover) {
|
|
49
|
+
setOpen(e, false);
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
var contextMenuProps = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, triggerAttributes), { 'aria-expanded': "" + open }), child === null || child === void 0 ? void 0 : child.props), { onMouseEnter: react_utilities_1.useEventCallback(react_utilities_1.mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onMouseEnter, onMouseEnter)), onMouseLeave: react_utilities_1.useEventCallback(react_utilities_1.mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onMouseLeave, onMouseLeave)), onContextMenu: react_utilities_1.useEventCallback(react_utilities_1.mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onContextMenu, onContextMenu)), ref: react_utilities_1.useMergedRefs(triggerRef, child === null || child === void 0 ? void 0 : child.ref) });
|
|
53
|
+
var triggerChildProps = tslib_1.__assign(tslib_1.__assign({}, contextMenuProps), { onClick: react_utilities_1.useEventCallback(react_utilities_1.mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onClick, onClick)), onKeyDown: react_utilities_1.useEventCallback(react_utilities_1.mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onKeyDown, onKeyDown)) });
|
|
54
|
+
var ariaButtonTriggerChildProps = react_aria_1.useARIAButtonProps((child === null || child === void 0 ? void 0 : child.type) === 'button' || (child === null || child === void 0 ? void 0 : child.type) === 'a' ? child.type : 'div', triggerChildProps);
|
|
55
|
+
return {
|
|
56
|
+
children: react_utilities_1.applyTriggerPropsToChildren(props.children, react_aria_1.useARIAButtonProps((child === null || child === void 0 ? void 0 : child.type) === 'button' || (child === null || child === void 0 ? void 0 : child.type) === 'a' ? child.type : 'div', openOnContext ? contextMenuProps : disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps)),
|
|
57
|
+
};
|
|
58
|
+
};
|
|
59
|
+
exports.usePopoverTrigger_unstable = usePopoverTrigger_unstable;
|
|
60
|
+
});
|
|
61
|
+
//# sourceMappingURL=usePopoverTrigger.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"usePopoverTrigger.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-popover/src/components/PopoverTrigger/usePopoverTrigger.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n applyTriggerPropsToChildren,\n getTriggerChild,\n mergeCallbacks,\n useMergedRefs,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext_unstable } from '../../popoverContext';\nimport type { PopoverTriggerProps, PopoverTriggerState } from './PopoverTrigger.types';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { Escape } from '@fluentui/keyboard-keys';\n\n/**\n * Create the state required to render PopoverTrigger.\n *\n * The returned state can be modified with hooks such as usePopoverTriggerStyles,\n * before being passed to renderPopoverTrigger_unstable.\n *\n * @param props - props from this instance of PopoverTrigger\n */\nexport const usePopoverTrigger_unstable = (props: PopoverTriggerProps): PopoverTriggerState => {\n const { children, disableButtonEnhancement = false } = props;\n const child = getTriggerChild(children);\n\n const open = usePopoverContext_unstable(context => context.open);\n const setOpen = usePopoverContext_unstable(context => context.setOpen);\n const toggleOpen = usePopoverContext_unstable(context => context.toggleOpen);\n const triggerRef = usePopoverContext_unstable(context => context.triggerRef);\n const openOnHover = usePopoverContext_unstable(context => context.openOnHover);\n const openOnContext = usePopoverContext_unstable(context => context.openOnContext);\n const { triggerAttributes } = useModalAttributes();\n\n const onContextMenu = (e: React.MouseEvent<HTMLElement>) => {\n if (openOnContext) {\n e.preventDefault();\n setOpen(e, true);\n }\n };\n\n const onClick = (e: React.MouseEvent<HTMLElement>) => {\n if (!openOnContext) {\n toggleOpen(e);\n }\n };\n\n const onKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n if (e.key === Escape && open) {\n setOpen(e, false);\n // stop propagation to avoid conflicting with other elements that listen for `Escape`\n // e,g: Dialog, Menu\n e.stopPropagation();\n }\n };\n\n const onMouseEnter = (e: React.MouseEvent<HTMLElement>) => {\n if (openOnHover) {\n setOpen(e, true);\n }\n };\n\n const onMouseLeave = (e: React.MouseEvent<HTMLElement>) => {\n if (openOnHover) {\n setOpen(e, false);\n }\n };\n\n const contextMenuProps = {\n ...triggerAttributes,\n 'aria-expanded': `${open}`,\n ...child?.props,\n onMouseEnter: useEventCallback(mergeCallbacks(child?.props.onMouseEnter, onMouseEnter)),\n onMouseLeave: useEventCallback(mergeCallbacks(child?.props.onMouseLeave, onMouseLeave)),\n onContextMenu: useEventCallback(mergeCallbacks(child?.props.onContextMenu, onContextMenu)),\n ref: useMergedRefs(triggerRef, child?.ref),\n } as const;\n\n const triggerChildProps = {\n ...contextMenuProps,\n onClick: useEventCallback(mergeCallbacks(child?.props.onClick, onClick)),\n onKeyDown: useEventCallback(mergeCallbacks(child?.props.onKeyDown, onKeyDown)),\n };\n\n const ariaButtonTriggerChildProps = useARIAButtonProps(\n child?.type === 'button' || child?.type === 'a' ? child.type : 'div',\n triggerChildProps,\n );\n\n return {\n children: applyTriggerPropsToChildren(\n props.children,\n useARIAButtonProps(\n child?.type === 'button' || child?.type === 'a' ? child.type : 'div',\n openOnContext ? contextMenuProps : disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps,\n ),\n ),\n };\n};\n"]}
|
package/lib-amd/index.js
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
define(["require", "exports", "./Popover", "./PopoverSurface", "./popoverContext", "./PopoverTrigger"], function (require, exports, Popover_1, PopoverSurface_1, popoverContext_1, PopoverTrigger_1) {
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.usePopoverTrigger_unstable = exports.renderPopoverTrigger_unstable = exports.PopoverTrigger = exports.usePopoverContext_unstable = exports.PopoverProvider = exports.usePopoverSurface_unstable = exports.usePopoverSurfaceStyles_unstable = exports.renderPopoverSurface_unstable = exports.popoverSurfaceClassNames = exports.arrowHeights = exports.PopoverSurface = exports.usePopover_unstable = exports.renderPopover_unstable = exports.Popover = void 0;
|
|
5
|
+
Object.defineProperty(exports, "Popover", { enumerable: true, get: function () { return Popover_1.Popover; } });
|
|
6
|
+
Object.defineProperty(exports, "renderPopover_unstable", { enumerable: true, get: function () { return Popover_1.renderPopover_unstable; } });
|
|
7
|
+
Object.defineProperty(exports, "usePopover_unstable", { enumerable: true, get: function () { return Popover_1.usePopover_unstable; } });
|
|
8
|
+
Object.defineProperty(exports, "PopoverSurface", { enumerable: true, get: function () { return PopoverSurface_1.PopoverSurface; } });
|
|
9
|
+
Object.defineProperty(exports, "arrowHeights", { enumerable: true, get: function () { return PopoverSurface_1.arrowHeights; } });
|
|
10
|
+
Object.defineProperty(exports, "popoverSurfaceClassNames", { enumerable: true, get: function () { return PopoverSurface_1.popoverSurfaceClassNames; } });
|
|
11
|
+
Object.defineProperty(exports, "renderPopoverSurface_unstable", { enumerable: true, get: function () { return PopoverSurface_1.renderPopoverSurface_unstable; } });
|
|
12
|
+
Object.defineProperty(exports, "usePopoverSurfaceStyles_unstable", { enumerable: true, get: function () { return PopoverSurface_1.usePopoverSurfaceStyles_unstable; } });
|
|
13
|
+
Object.defineProperty(exports, "usePopoverSurface_unstable", { enumerable: true, get: function () { return PopoverSurface_1.usePopoverSurface_unstable; } });
|
|
14
|
+
Object.defineProperty(exports, "PopoverProvider", { enumerable: true, get: function () { return popoverContext_1.PopoverProvider; } });
|
|
15
|
+
Object.defineProperty(exports, "usePopoverContext_unstable", { enumerable: true, get: function () { return popoverContext_1.usePopoverContext_unstable; } });
|
|
16
|
+
Object.defineProperty(exports, "PopoverTrigger", { enumerable: true, get: function () { return PopoverTrigger_1.PopoverTrigger; } });
|
|
17
|
+
Object.defineProperty(exports, "renderPopoverTrigger_unstable", { enumerable: true, get: function () { return PopoverTrigger_1.renderPopoverTrigger_unstable; } });
|
|
18
|
+
Object.defineProperty(exports, "usePopoverTrigger_unstable", { enumerable: true, get: function () { return PopoverTrigger_1.usePopoverTrigger_unstable; } });
|
|
19
|
+
});
|
|
20
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-popover/src/index.ts"],"names":[],"mappings":";;;;IAAS,kGAAA,OAAO,OAAA;IAAE,iHAAA,sBAAsB,OAAA;IAAE,8GAAA,mBAAmB,OAAA;IAG3D,gHAAA,cAAc,OAAA;IACd,8GAAA,YAAY,OAAA;IACZ,0HAAA,wBAAwB,OAAA;IACxB,+HAAA,6BAA6B,OAAA;IAC7B,kIAAA,gCAAgC,OAAA;IAChC,4HAAA,0BAA0B,OAAA;IAGnB,iHAAA,eAAe,OAAA;IAAE,4HAAA,0BAA0B,OAAA;IAE3C,gHAAA,cAAc,OAAA;IAAE,+HAAA,6BAA6B,OAAA;IAAE,4HAAA,0BAA0B,OAAA","sourcesContent":["export { Popover, renderPopover_unstable, usePopover_unstable } from './Popover';\nexport type { OnOpenChangeData, OpenPopoverEvents, PopoverProps, PopoverSize, PopoverState } from './Popover';\nexport {\n PopoverSurface,\n arrowHeights,\n popoverSurfaceClassNames,\n renderPopoverSurface_unstable,\n usePopoverSurfaceStyles_unstable,\n usePopoverSurface_unstable,\n} from './PopoverSurface';\nexport type { PopoverSurfaceProps, PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface';\nexport { PopoverProvider, usePopoverContext_unstable } from './popoverContext';\nexport type { PopoverContextValue } from './popoverContext';\nexport { PopoverTrigger, renderPopoverTrigger_unstable, usePopoverTrigger_unstable } from './PopoverTrigger';\nexport type { PopoverTriggerChildProps, PopoverTriggerProps, PopoverTriggerState } from './PopoverTrigger';\n"]}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
define(["require", "exports", "@fluentui/react-context-selector"], function (require, exports, react_context_selector_1) {
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.usePopoverContext_unstable = exports.PopoverProvider = exports.PopoverContext = void 0;
|
|
5
|
+
exports.PopoverContext = react_context_selector_1.createContext(undefined);
|
|
6
|
+
var popoverContextDefaultValue = {
|
|
7
|
+
open: false,
|
|
8
|
+
setOpen: function () { return null; },
|
|
9
|
+
toggleOpen: function () { return null; },
|
|
10
|
+
triggerRef: { current: null },
|
|
11
|
+
contentRef: { current: null },
|
|
12
|
+
arrowRef: { current: null },
|
|
13
|
+
openOnContext: false,
|
|
14
|
+
openOnHover: false,
|
|
15
|
+
size: 'medium',
|
|
16
|
+
trapFocus: false,
|
|
17
|
+
inline: false,
|
|
18
|
+
};
|
|
19
|
+
exports.PopoverProvider = exports.PopoverContext.Provider;
|
|
20
|
+
var usePopoverContext_unstable = function (selector) {
|
|
21
|
+
return react_context_selector_1.useContextSelector(exports.PopoverContext, function (ctx) {
|
|
22
|
+
if (ctx === void 0) { ctx = popoverContextDefaultValue; }
|
|
23
|
+
return selector(ctx);
|
|
24
|
+
});
|
|
25
|
+
};
|
|
26
|
+
exports.usePopoverContext_unstable = usePopoverContext_unstable;
|
|
27
|
+
});
|
|
28
|
+
//# sourceMappingURL=popoverContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"popoverContext.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-popover/src/popoverContext.ts"],"names":[],"mappings":";;;;IAIa,QAAA,cAAc,GAAiC,sCAAa,CACvE,SAAS,CACsB,CAAC;IAClC,IAAM,0BAA0B,GAAwB;QACtD,IAAI,EAAE,KAAK;QACX,OAAO,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI;QACnB,UAAU,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI;QACtB,UAAU,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC7B,UAAU,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC7B,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,aAAa,EAAE,KAAK;QACpB,WAAW,EAAE,KAAK;QAClB,IAAI,EAAE,QAAiB;QACvB,SAAS,EAAE,KAAK;QAChB,MAAM,EAAE,KAAK;KACd,CAAC;IAEW,QAAA,eAAe,GAAG,sBAAc,CAAC,QAAQ,CAAC;IAwBhD,IAAM,0BAA0B,GAAG,UAAI,QAAiD;QAC7F,OAAA,2CAAkB,CAAC,sBAAc,EAAE,UAAC,GAAgC;YAAhC,oBAAA,EAAA,gCAAgC;YAAK,OAAA,QAAQ,CAAC,GAAG,CAAC;QAAb,CAAa,CAAC;IAAvF,CAAuF,CAAC;IAD7E,QAAA,0BAA0B,8BACmD","sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { PopoverState } from './components/Popover/index';\n\nexport const PopoverContext: Context<PopoverContextValue> = createContext<PopoverContextValue | undefined>(\n undefined,\n) as Context<PopoverContextValue>;\nconst popoverContextDefaultValue: PopoverContextValue = {\n open: false,\n setOpen: () => null,\n toggleOpen: () => null,\n triggerRef: { current: null },\n contentRef: { current: null },\n arrowRef: { current: null },\n openOnContext: false,\n openOnHover: false,\n size: 'medium' as const,\n trapFocus: false,\n inline: false,\n};\n\nexport const PopoverProvider = PopoverContext.Provider;\n\n/**\n * Context shared between Popover and its children components\n */\nexport type PopoverContextValue = Pick<\n PopoverState,\n | 'open'\n | 'toggleOpen'\n | 'setOpen'\n | 'triggerRef'\n | 'contentRef'\n | 'openOnHover'\n | 'openOnContext'\n | 'mountNode'\n | 'withArrow'\n | 'arrowRef'\n | 'size'\n | 'appearance'\n | 'trapFocus'\n | 'legacyTrapFocus'\n | 'inline'\n>;\n\nexport const usePopoverContext_unstable = <T>(selector: ContextSelector<PopoverContextValue, T>): T =>\n useContextSelector(PopoverContext, (ctx = popoverContextDefaultValue) => selector(ctx));\n"]}
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-popover",
|
|
3
|
-
"version": "9.3.
|
|
3
|
+
"version": "9.3.2",
|
|
4
4
|
"description": "Popover component for Fluent UI",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
7
|
-
"typings": "dist/index.d.ts",
|
|
7
|
+
"typings": "./dist/index.d.ts",
|
|
8
8
|
"sideEffects": false,
|
|
9
9
|
"repository": {
|
|
10
10
|
"type": "git",
|
|
@@ -29,19 +29,19 @@
|
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@fluentui/eslint-plugin": "*",
|
|
31
31
|
"@fluentui/react-conformance": "*",
|
|
32
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
|
32
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.18",
|
|
33
33
|
"@fluentui/scripts": "^1.0.0"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@fluentui/keyboard-keys": "^9.0.
|
|
37
|
-
"@fluentui/react-aria": "^9.3.
|
|
38
|
-
"@fluentui/react-context-selector": "^9.1.
|
|
39
|
-
"@fluentui/react-portal": "^9.0.
|
|
40
|
-
"@fluentui/react-positioning": "^9.3.
|
|
41
|
-
"@fluentui/react-shared-contexts": "^9.1.
|
|
42
|
-
"@fluentui/react-tabster": "^9.
|
|
43
|
-
"@fluentui/react-theme": "^9.1.
|
|
44
|
-
"@fluentui/react-utilities": "^9.2.
|
|
36
|
+
"@fluentui/keyboard-keys": "^9.0.1",
|
|
37
|
+
"@fluentui/react-aria": "^9.3.2",
|
|
38
|
+
"@fluentui/react-context-selector": "^9.1.2",
|
|
39
|
+
"@fluentui/react-portal": "^9.0.11",
|
|
40
|
+
"@fluentui/react-positioning": "^9.3.2",
|
|
41
|
+
"@fluentui/react-shared-contexts": "^9.1.1",
|
|
42
|
+
"@fluentui/react-tabster": "^9.3.1",
|
|
43
|
+
"@fluentui/react-theme": "^9.1.2",
|
|
44
|
+
"@fluentui/react-utilities": "^9.2.2",
|
|
45
45
|
"@griffel/react": "^1.4.2",
|
|
46
46
|
"tslib": "^2.1.0"
|
|
47
47
|
},
|
|
@@ -60,9 +60,10 @@
|
|
|
60
60
|
},
|
|
61
61
|
"exports": {
|
|
62
62
|
".": {
|
|
63
|
-
"types": "./
|
|
63
|
+
"types": "./dist/index.d.ts",
|
|
64
64
|
"import": "./lib/index.js",
|
|
65
65
|
"require": "./lib-commonjs/index.js"
|
|
66
|
-
}
|
|
66
|
+
},
|
|
67
|
+
"./package.json": "./package.json"
|
|
67
68
|
}
|
|
68
69
|
}
|