@fluentui-react-native/callout 0.19.45 → 0.20.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +64 -1
- package/CHANGELOG.md +29 -2
- package/lib/Callout.types.d.ts +49 -0
- package/lib/Callout.types.d.ts.map +1 -1
- package/lib-commonjs/Callout.types.d.ts +49 -0
- package/lib-commonjs/Callout.types.d.ts.map +1 -1
- package/package.json +4 -4
- package/src/Callout.types.ts +50 -0
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,70 @@
|
|
|
2
2
|
"name": "@fluentui-react-native/callout",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Sat, 21 May 2022 01:46:24 GMT",
|
|
6
|
+
"tag": "@fluentui-react-native/callout_v0.20.1",
|
|
7
|
+
"version": "0.20.1",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "beachball",
|
|
12
|
+
"package": "@fluentui-react-native/callout",
|
|
13
|
+
"comment": "Bump @fluentui-react-native/interactive-hooks to v0.15.7",
|
|
14
|
+
"commit": "5c1efc2232601998fc0dd0bb1607e7ffafbe5613"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui-react-native/callout",
|
|
19
|
+
"comment": "Bump @fluentui-react-native/tokens to v0.12.1",
|
|
20
|
+
"commit": "5c1efc2232601998fc0dd0bb1607e7ffafbe5613"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui-react-native/callout",
|
|
25
|
+
"comment": "Bump @uifabricshared/foundation-compose to v1.11.20",
|
|
26
|
+
"commit": "5c1efc2232601998fc0dd0bb1607e7ffafbe5613"
|
|
27
|
+
}
|
|
28
|
+
]
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"date": "Tue, 10 May 2022 20:49:25 GMT",
|
|
33
|
+
"tag": "@fluentui-react-native/callout_v0.20.0",
|
|
34
|
+
"version": "0.20.0",
|
|
35
|
+
"comments": {
|
|
36
|
+
"minor": [
|
|
37
|
+
{
|
|
38
|
+
"author": "patboyd@microsoft.com",
|
|
39
|
+
"package": "@fluentui-react-native/callout",
|
|
40
|
+
"commit": "d21b7b13c7a7ea38b81c23b9eca7461fffb801e1",
|
|
41
|
+
"comment": "Add doNotTakePointerCapture prop to Callout interface"
|
|
42
|
+
}
|
|
43
|
+
]
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"date": "Wed, 04 May 2022 21:06:04 GMT",
|
|
48
|
+
"tag": "@fluentui-react-native/callout_v0.19.46",
|
|
49
|
+
"version": "0.19.46",
|
|
50
|
+
"comments": {
|
|
51
|
+
"patch": [
|
|
52
|
+
{
|
|
53
|
+
"author": "beachball",
|
|
54
|
+
"package": "@fluentui-react-native/callout",
|
|
55
|
+
"comment": "Bump @fluentui-react-native/interactive-hooks to v0.15.6",
|
|
56
|
+
"commit": "d503e2af4e84ba5c8c1c40ea3698fcbd1691dda6"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"author": "beachball",
|
|
60
|
+
"package": "@fluentui-react-native/callout",
|
|
61
|
+
"comment": "Bump @fluentui-react-native/tokens to v0.12.0",
|
|
62
|
+
"commit": "d503e2af4e84ba5c8c1c40ea3698fcbd1691dda6"
|
|
63
|
+
}
|
|
64
|
+
]
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"date": "Thu, 28 Apr 2022 19:09:51 GMT",
|
|
6
69
|
"tag": "@fluentui-react-native/callout_v0.19.45",
|
|
7
70
|
"version": "0.19.45",
|
|
8
71
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,39 @@
|
|
|
1
1
|
# Change Log - @fluentui-react-native/callout
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Sat, 21 May 2022 01:46:24 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 0.20.1
|
|
8
|
+
|
|
9
|
+
Sat, 21 May 2022 01:46:24 GMT
|
|
10
|
+
|
|
11
|
+
### Patches
|
|
12
|
+
|
|
13
|
+
- Bump @fluentui-react-native/interactive-hooks to v0.15.7
|
|
14
|
+
- Bump @fluentui-react-native/tokens to v0.12.1
|
|
15
|
+
- Bump @uifabricshared/foundation-compose to v1.11.20
|
|
16
|
+
|
|
17
|
+
## 0.20.0
|
|
18
|
+
|
|
19
|
+
Tue, 10 May 2022 20:49:25 GMT
|
|
20
|
+
|
|
21
|
+
### Minor changes
|
|
22
|
+
|
|
23
|
+
- Add doNotTakePointerCapture prop to Callout interface (patboyd@microsoft.com)
|
|
24
|
+
|
|
25
|
+
## 0.19.46
|
|
26
|
+
|
|
27
|
+
Wed, 04 May 2022 21:06:04 GMT
|
|
28
|
+
|
|
29
|
+
### Patches
|
|
30
|
+
|
|
31
|
+
- Bump @fluentui-react-native/interactive-hooks to v0.15.6
|
|
32
|
+
- Bump @fluentui-react-native/tokens to v0.12.0
|
|
33
|
+
|
|
7
34
|
## 0.19.45
|
|
8
35
|
|
|
9
|
-
Thu, 28 Apr 2022 19:
|
|
36
|
+
Thu, 28 Apr 2022 19:09:51 GMT
|
|
10
37
|
|
|
11
38
|
### Patches
|
|
12
39
|
|
package/lib/Callout.types.d.ts
CHANGED
|
@@ -79,6 +79,55 @@ export interface ICalloutProps extends IViewProps, ICalloutTokens {
|
|
|
79
79
|
* A RefObject to access the IFocusable interface. Use this to access the public methods and properties of the component.
|
|
80
80
|
*/
|
|
81
81
|
componentRef?: React.RefObject<IFocusable>;
|
|
82
|
+
/**
|
|
83
|
+
* Defines event redirection behaviors for pointer events relative to the Callout control.
|
|
84
|
+
*
|
|
85
|
+
* Pointer events (i.e. mouse, pen, touch) often have the effect of initiating and dismissing Callout controls.
|
|
86
|
+
* Typically the instigating events are click events, but when using a mouse may also include pointer enter
|
|
87
|
+
* and leave events i.e. hover. Once opened, many Callout scenarios desire modal-like interactions, where
|
|
88
|
+
* the user must interact with or relative to the Callout before interacting with other controls again. A common
|
|
89
|
+
* example is context menus, where pointer events away from the menu may dismiss the context menu. Such an interaction
|
|
90
|
+
* can initiate unintended actions such as invoking a button or otherwise pointer-responsive surface. The modal-like
|
|
91
|
+
* behavior is the most common case of Callout usage, and having "safe" areas to press-dismiss the Callout without
|
|
92
|
+
* invoking additional actions is useful.
|
|
93
|
+
*
|
|
94
|
+
* This modal-like behavior, where true modal behavior would specifically require interacting with the modal component until
|
|
95
|
+
* it is dismissed, has implications for canonical event routing in React-Native. Canonically all pointer events are passed in
|
|
96
|
+
* a Capture phase from the root element to the target element, then bubbled back from the target element to the root element.
|
|
97
|
+
* This structure allows many interaction patterns to be implemented that may include stopping event routing in each phase.
|
|
98
|
+
* This event routing can disrupt the modal-like behavior desired by a Callout control, which in native frameworks may take
|
|
99
|
+
* advantage of a "take event capture" feature -- making the Callout the first handler of the pointer event. The event may optionally
|
|
100
|
+
* be forwarded afterwards to the canonical event routing pattern for further handling (and often is not forwarded).
|
|
101
|
+
*
|
|
102
|
+
* One impact of "taking event capture" is the implicit behavior for mouse events on the parent surface of the Callout -- if
|
|
103
|
+
* event capture is taken by the Callout, paired events may fire such as a mouse leave event. This makes sense if we think about
|
|
104
|
+
* the event behavior after the Callout has taken capture; mouse enter and mouse leave events would only propagate to the parent surface
|
|
105
|
+
* if the Callout event handling decided to forward said events (often not). As paired events, however, there should not be a
|
|
106
|
+
* mouse enter event without a corresponding mouse leave event (or vice versa). Since mouse enter and mouse leave events would not
|
|
107
|
+
* naturally fire on the parent surface when the Callout has pointer capture, the parent surface should receive a mouse leave event when
|
|
108
|
+
* the Callout takes capture.
|
|
109
|
+
*
|
|
110
|
+
* Coming back to the start of this comment, some Callout scenarios may be initiated by mouse enter/leave events. A common example is
|
|
111
|
+
* tooltips, which are supported on lower-level React-Native components, but such behavior is not exclusive to tooltips.
|
|
112
|
+
* The Callout control is generally used for more advanced scenarios, as mentioned before often desiring modal-like behavior and accordingly
|
|
113
|
+
* the default behavior of the Callout control is to take pointer capture. Accounting for the paired mouse enter/leave events in the paragraph
|
|
114
|
+
* above, it is difficult to have a mouse enter/leave-invoked Callout that takes pointer capture -- without significant workarounds,
|
|
115
|
+
* the Callout would open and close cyclically from repeated mouse enter/leave events. There are other scenarios where taking pointer capture
|
|
116
|
+
* is not desirable, such as a semi-persistent Callout; to support these scenarios the doNotTakePointerCapture property is offered to
|
|
117
|
+
* specify if the Callout should not take pointer capture when it opens.
|
|
118
|
+
*
|
|
119
|
+
* While pointer capture is generally managed in native frameworks via imperative APIs, managing pointer capture is offered as a property that
|
|
120
|
+
* only affects the Callout's on-show behavior when it would typically take pointer capture. This design implies that changing this property after
|
|
121
|
+
* the Callout has been shown has no effect -- similar to the Callout's onShow callback. Doing so simplifies Callout usage for developers,
|
|
122
|
+
* not needing to mind native platform pointer capture that may be complex particularly when React-Native is integrated into a larger app.
|
|
123
|
+
* Pointer capture may be lost (and regained) but is otherwise abstracted away from the developer. More advanced control of pointer capture
|
|
124
|
+
* would need to be provided by a native module independent of any particular control.
|
|
125
|
+
*
|
|
126
|
+
* When the Callout is closed, pointer capture is released by the Callout and further handled by the native platform -- generally returning
|
|
127
|
+
* pointer capture to the parent surface.
|
|
128
|
+
* @platform win32
|
|
129
|
+
*/
|
|
130
|
+
doNotTakePointerCapture?: boolean;
|
|
82
131
|
/**
|
|
83
132
|
* Adds a beak to the Callout, pointing to the anchor target.
|
|
84
133
|
* Notable Win32 limitation: Beak rendering currently limits the border width to its default, and the
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Callout.types.d.ts","sourceRoot":"","sources":["../src/Callout.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AACtF,OAAO,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAC;AACtE,eAAO,MAAM,WAAW,YAAY,CAAC;AAErC;;GAEG;AAEH,oBAAY,eAAe,GACvB,aAAa,GACb,YAAY,GACZ,gBAAgB,GAChB,aAAa,GACb,aAAa,GACb,WAAW,GACX,cAAc,GACd,cAAc,GACd,aAAa,GACb,iBAAiB,GACjB,gBAAgB,GAChB,gBAAgB,GAChB,cAAc,GACd,iBAAiB,CAAC;AAEtB,oBAAY,gBAAgB,GAAG,yBAAyB,GAAG,8BAA8B,CAAC;AAE1F,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE;QACX;;WAEG;QACH,aAAa,EAAE,OAAO,CAAC;KACxB,CAAC;CACH;AAED,UAAU,mBAAmB;IAC3B,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,WAAW,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;CACxC;AAED,aAAK,mBAAmB,GAAG,IAAI,CAAC,aAAa,EAAE,MAAM,mBAAmB,CAAC,CAAC;AAE1E,MAAM,WAAW,cAAe,SAAQ,sBAAsB,EAAE,mBAAmB;IACjF;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;IAElC;;;;;;;;;;;OAWG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAEtC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE3B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,aAAc,SAAQ,UAAU,EAAE,cAAc;IAC/D;;;OAGG;IACH,+BAA+B,CAAC,EAAE,MAAM,CAAC;IAEzC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IAE3C;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB;;;;;;;;;;OAUG;IACH,cAAc,CAAC,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAEhE;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC;CACpD;AAED,oBAAY,iBAAiB,GAAG;IAC9B,IAAI,EAAE,aAAa,CAAC;CACrB,CAAC;AAEF,oBAAY,kBAAkB,GAAG,WAAW,CAAC,iBAAiB,CAAC,CAAC;AAEhE,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,aAAa,CAAC;IACrB,SAAS,EAAE,iBAAiB,CAAC;IAC7B,MAAM,EAAE,cAAc,CAAC;CACxB"}
|
|
1
|
+
{"version":3,"file":"Callout.types.d.ts","sourceRoot":"","sources":["../src/Callout.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -79,6 +79,55 @@ export interface ICalloutProps extends IViewProps, ICalloutTokens {
|
|
|
79
79
|
* A RefObject to access the IFocusable interface. Use this to access the public methods and properties of the component.
|
|
80
80
|
*/
|
|
81
81
|
componentRef?: React.RefObject<IFocusable>;
|
|
82
|
+
/**
|
|
83
|
+
* Defines event redirection behaviors for pointer events relative to the Callout control.
|
|
84
|
+
*
|
|
85
|
+
* Pointer events (i.e. mouse, pen, touch) often have the effect of initiating and dismissing Callout controls.
|
|
86
|
+
* Typically the instigating events are click events, but when using a mouse may also include pointer enter
|
|
87
|
+
* and leave events i.e. hover. Once opened, many Callout scenarios desire modal-like interactions, where
|
|
88
|
+
* the user must interact with or relative to the Callout before interacting with other controls again. A common
|
|
89
|
+
* example is context menus, where pointer events away from the menu may dismiss the context menu. Such an interaction
|
|
90
|
+
* can initiate unintended actions such as invoking a button or otherwise pointer-responsive surface. The modal-like
|
|
91
|
+
* behavior is the most common case of Callout usage, and having "safe" areas to press-dismiss the Callout without
|
|
92
|
+
* invoking additional actions is useful.
|
|
93
|
+
*
|
|
94
|
+
* This modal-like behavior, where true modal behavior would specifically require interacting with the modal component until
|
|
95
|
+
* it is dismissed, has implications for canonical event routing in React-Native. Canonically all pointer events are passed in
|
|
96
|
+
* a Capture phase from the root element to the target element, then bubbled back from the target element to the root element.
|
|
97
|
+
* This structure allows many interaction patterns to be implemented that may include stopping event routing in each phase.
|
|
98
|
+
* This event routing can disrupt the modal-like behavior desired by a Callout control, which in native frameworks may take
|
|
99
|
+
* advantage of a "take event capture" feature -- making the Callout the first handler of the pointer event. The event may optionally
|
|
100
|
+
* be forwarded afterwards to the canonical event routing pattern for further handling (and often is not forwarded).
|
|
101
|
+
*
|
|
102
|
+
* One impact of "taking event capture" is the implicit behavior for mouse events on the parent surface of the Callout -- if
|
|
103
|
+
* event capture is taken by the Callout, paired events may fire such as a mouse leave event. This makes sense if we think about
|
|
104
|
+
* the event behavior after the Callout has taken capture; mouse enter and mouse leave events would only propagate to the parent surface
|
|
105
|
+
* if the Callout event handling decided to forward said events (often not). As paired events, however, there should not be a
|
|
106
|
+
* mouse enter event without a corresponding mouse leave event (or vice versa). Since mouse enter and mouse leave events would not
|
|
107
|
+
* naturally fire on the parent surface when the Callout has pointer capture, the parent surface should receive a mouse leave event when
|
|
108
|
+
* the Callout takes capture.
|
|
109
|
+
*
|
|
110
|
+
* Coming back to the start of this comment, some Callout scenarios may be initiated by mouse enter/leave events. A common example is
|
|
111
|
+
* tooltips, which are supported on lower-level React-Native components, but such behavior is not exclusive to tooltips.
|
|
112
|
+
* The Callout control is generally used for more advanced scenarios, as mentioned before often desiring modal-like behavior and accordingly
|
|
113
|
+
* the default behavior of the Callout control is to take pointer capture. Accounting for the paired mouse enter/leave events in the paragraph
|
|
114
|
+
* above, it is difficult to have a mouse enter/leave-invoked Callout that takes pointer capture -- without significant workarounds,
|
|
115
|
+
* the Callout would open and close cyclically from repeated mouse enter/leave events. There are other scenarios where taking pointer capture
|
|
116
|
+
* is not desirable, such as a semi-persistent Callout; to support these scenarios the doNotTakePointerCapture property is offered to
|
|
117
|
+
* specify if the Callout should not take pointer capture when it opens.
|
|
118
|
+
*
|
|
119
|
+
* While pointer capture is generally managed in native frameworks via imperative APIs, managing pointer capture is offered as a property that
|
|
120
|
+
* only affects the Callout's on-show behavior when it would typically take pointer capture. This design implies that changing this property after
|
|
121
|
+
* the Callout has been shown has no effect -- similar to the Callout's onShow callback. Doing so simplifies Callout usage for developers,
|
|
122
|
+
* not needing to mind native platform pointer capture that may be complex particularly when React-Native is integrated into a larger app.
|
|
123
|
+
* Pointer capture may be lost (and regained) but is otherwise abstracted away from the developer. More advanced control of pointer capture
|
|
124
|
+
* would need to be provided by a native module independent of any particular control.
|
|
125
|
+
*
|
|
126
|
+
* When the Callout is closed, pointer capture is released by the Callout and further handled by the native platform -- generally returning
|
|
127
|
+
* pointer capture to the parent surface.
|
|
128
|
+
* @platform win32
|
|
129
|
+
*/
|
|
130
|
+
doNotTakePointerCapture?: boolean;
|
|
82
131
|
/**
|
|
83
132
|
* Adds a beak to the Callout, pointing to the anchor target.
|
|
84
133
|
* Notable Win32 limitation: Beak rendering currently limits the border width to its default, and the
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Callout.types.d.ts","sourceRoot":"","sources":["../src/Callout.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AACtF,OAAO,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAC;AACtE,eAAO,MAAM,WAAW,YAAY,CAAC;AAErC;;GAEG;AAEH,oBAAY,eAAe,GACvB,aAAa,GACb,YAAY,GACZ,gBAAgB,GAChB,aAAa,GACb,aAAa,GACb,WAAW,GACX,cAAc,GACd,cAAc,GACd,aAAa,GACb,iBAAiB,GACjB,gBAAgB,GAChB,gBAAgB,GAChB,cAAc,GACd,iBAAiB,CAAC;AAEtB,oBAAY,gBAAgB,GAAG,yBAAyB,GAAG,8BAA8B,CAAC;AAE1F,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE;QACX;;WAEG;QACH,aAAa,EAAE,OAAO,CAAC;KACxB,CAAC;CACH;AAED,UAAU,mBAAmB;IAC3B,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,WAAW,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;CACxC;AAED,aAAK,mBAAmB,GAAG,IAAI,CAAC,aAAa,EAAE,MAAM,mBAAmB,CAAC,CAAC;AAE1E,MAAM,WAAW,cAAe,SAAQ,sBAAsB,EAAE,mBAAmB;IACjF;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;IAElC;;;;;;;;;;;OAWG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAEtC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE3B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,aAAc,SAAQ,UAAU,EAAE,cAAc;IAC/D;;;OAGG;IACH,+BAA+B,CAAC,EAAE,MAAM,CAAC;IAEzC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IAE3C;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB;;;;;;;;;;OAUG;IACH,cAAc,CAAC,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAEhE;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC;CACpD;AAED,oBAAY,iBAAiB,GAAG;IAC9B,IAAI,EAAE,aAAa,CAAC;CACrB,CAAC;AAEF,oBAAY,kBAAkB,GAAG,WAAW,CAAC,iBAAiB,CAAC,CAAC;AAEhE,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,aAAa,CAAC;IACrB,SAAS,EAAE,iBAAiB,CAAC;IAC7B,MAAM,EAAE,cAAc,CAAC;CACxB"}
|
|
1
|
+
{"version":3,"file":"Callout.types.d.ts","sourceRoot":"","sources":["../src/Callout.types.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-react-native/callout",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.20.1",
|
|
4
4
|
"description": "A cross-platform Callout component using the Fluent Design System",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "",
|
|
@@ -27,10 +27,10 @@
|
|
|
27
27
|
"dependencies": {
|
|
28
28
|
"@fluentui-react-native/adapters": "^0.8.5",
|
|
29
29
|
"@fluentui-react-native/component-cache": "^1.3.2",
|
|
30
|
-
"@fluentui-react-native/interactive-hooks": ">=0.15.
|
|
31
|
-
"@fluentui-react-native/tokens": ">=0.
|
|
30
|
+
"@fluentui-react-native/interactive-hooks": ">=0.15.7 <1.0.0",
|
|
31
|
+
"@fluentui-react-native/tokens": ">=0.12.1 <1.0.0",
|
|
32
32
|
"@uifabricshared/foundation-composable": ">=0.10.3 <1.0.0",
|
|
33
|
-
"@uifabricshared/foundation-compose": "^1.11.
|
|
33
|
+
"@uifabricshared/foundation-compose": "^1.11.20",
|
|
34
34
|
"@uifabricshared/foundation-settings": ">=0.11.3 <1.0.0"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
package/src/Callout.types.ts
CHANGED
|
@@ -110,6 +110,56 @@ export interface ICalloutProps extends IViewProps, ICalloutTokens {
|
|
|
110
110
|
*/
|
|
111
111
|
componentRef?: React.RefObject<IFocusable>;
|
|
112
112
|
|
|
113
|
+
/**
|
|
114
|
+
* Defines event redirection behaviors for pointer events relative to the Callout control.
|
|
115
|
+
*
|
|
116
|
+
* Pointer events (i.e. mouse, pen, touch) often have the effect of initiating and dismissing Callout controls.
|
|
117
|
+
* Typically the instigating events are click events, but when using a mouse may also include pointer enter
|
|
118
|
+
* and leave events i.e. hover. Once opened, many Callout scenarios desire modal-like interactions, where
|
|
119
|
+
* the user must interact with or relative to the Callout before interacting with other controls again. A common
|
|
120
|
+
* example is context menus, where pointer events away from the menu may dismiss the context menu. Such an interaction
|
|
121
|
+
* can initiate unintended actions such as invoking a button or otherwise pointer-responsive surface. The modal-like
|
|
122
|
+
* behavior is the most common case of Callout usage, and having "safe" areas to press-dismiss the Callout without
|
|
123
|
+
* invoking additional actions is useful.
|
|
124
|
+
*
|
|
125
|
+
* This modal-like behavior, where true modal behavior would specifically require interacting with the modal component until
|
|
126
|
+
* it is dismissed, has implications for canonical event routing in React-Native. Canonically all pointer events are passed in
|
|
127
|
+
* a Capture phase from the root element to the target element, then bubbled back from the target element to the root element.
|
|
128
|
+
* This structure allows many interaction patterns to be implemented that may include stopping event routing in each phase.
|
|
129
|
+
* This event routing can disrupt the modal-like behavior desired by a Callout control, which in native frameworks may take
|
|
130
|
+
* advantage of a "take event capture" feature -- making the Callout the first handler of the pointer event. The event may optionally
|
|
131
|
+
* be forwarded afterwards to the canonical event routing pattern for further handling (and often is not forwarded).
|
|
132
|
+
*
|
|
133
|
+
* One impact of "taking event capture" is the implicit behavior for mouse events on the parent surface of the Callout -- if
|
|
134
|
+
* event capture is taken by the Callout, paired events may fire such as a mouse leave event. This makes sense if we think about
|
|
135
|
+
* the event behavior after the Callout has taken capture; mouse enter and mouse leave events would only propagate to the parent surface
|
|
136
|
+
* if the Callout event handling decided to forward said events (often not). As paired events, however, there should not be a
|
|
137
|
+
* mouse enter event without a corresponding mouse leave event (or vice versa). Since mouse enter and mouse leave events would not
|
|
138
|
+
* naturally fire on the parent surface when the Callout has pointer capture, the parent surface should receive a mouse leave event when
|
|
139
|
+
* the Callout takes capture.
|
|
140
|
+
*
|
|
141
|
+
* Coming back to the start of this comment, some Callout scenarios may be initiated by mouse enter/leave events. A common example is
|
|
142
|
+
* tooltips, which are supported on lower-level React-Native components, but such behavior is not exclusive to tooltips.
|
|
143
|
+
* The Callout control is generally used for more advanced scenarios, as mentioned before often desiring modal-like behavior and accordingly
|
|
144
|
+
* the default behavior of the Callout control is to take pointer capture. Accounting for the paired mouse enter/leave events in the paragraph
|
|
145
|
+
* above, it is difficult to have a mouse enter/leave-invoked Callout that takes pointer capture -- without significant workarounds,
|
|
146
|
+
* the Callout would open and close cyclically from repeated mouse enter/leave events. There are other scenarios where taking pointer capture
|
|
147
|
+
* is not desirable, such as a semi-persistent Callout; to support these scenarios the doNotTakePointerCapture property is offered to
|
|
148
|
+
* specify if the Callout should not take pointer capture when it opens.
|
|
149
|
+
*
|
|
150
|
+
* While pointer capture is generally managed in native frameworks via imperative APIs, managing pointer capture is offered as a property that
|
|
151
|
+
* only affects the Callout's on-show behavior when it would typically take pointer capture. This design implies that changing this property after
|
|
152
|
+
* the Callout has been shown has no effect -- similar to the Callout's onShow callback. Doing so simplifies Callout usage for developers,
|
|
153
|
+
* not needing to mind native platform pointer capture that may be complex particularly when React-Native is integrated into a larger app.
|
|
154
|
+
* Pointer capture may be lost (and regained) but is otherwise abstracted away from the developer. More advanced control of pointer capture
|
|
155
|
+
* would need to be provided by a native module independent of any particular control.
|
|
156
|
+
*
|
|
157
|
+
* When the Callout is closed, pointer capture is released by the Callout and further handled by the native platform -- generally returning
|
|
158
|
+
* pointer capture to the parent surface.
|
|
159
|
+
* @platform win32
|
|
160
|
+
*/
|
|
161
|
+
doNotTakePointerCapture?: boolean;
|
|
162
|
+
|
|
113
163
|
/**
|
|
114
164
|
* Adds a beak to the Callout, pointing to the anchor target.
|
|
115
165
|
* Notable Win32 limitation: Beak rendering currently limits the border width to its default, and the
|