@fluentui/react-popover 9.0.0-rc.10 → 9.0.0-rc.13

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.
Files changed (40) hide show
  1. package/CHANGELOG.json +168 -1
  2. package/CHANGELOG.md +48 -2
  3. package/Spec.md +5 -5
  4. package/dist/index.d.ts +17 -18
  5. package/lib/components/Popover/Popover.types.js.map +1 -1
  6. package/lib/components/Popover/renderPopover.js +6 -4
  7. package/lib/components/Popover/renderPopover.js.map +1 -1
  8. package/lib/components/Popover/usePopover.js +17 -17
  9. package/lib/components/Popover/usePopover.js.map +1 -1
  10. package/lib/components/PopoverSurface/PopoverSurface.types.js.map +1 -1
  11. package/lib/components/PopoverSurface/renderPopoverSurface.js +1 -1
  12. package/lib/components/PopoverSurface/renderPopoverSurface.js.map +1 -1
  13. package/lib/components/PopoverSurface/usePopoverSurface.js +2 -2
  14. package/lib/components/PopoverSurface/usePopoverSurface.js.map +1 -1
  15. package/lib/components/PopoverSurface/usePopoverSurfaceStyles.js +0 -5
  16. package/lib/components/PopoverSurface/usePopoverSurfaceStyles.js.map +1 -1
  17. package/lib/components/PopoverTrigger/PopoverTrigger.types.js.map +1 -1
  18. package/lib/components/PopoverTrigger/usePopoverTrigger.js +2 -2
  19. package/lib/components/PopoverTrigger/usePopoverTrigger.js.map +1 -1
  20. package/lib/index.js +2 -3
  21. package/lib/index.js.map +1 -1
  22. package/lib/popoverContext.js +2 -0
  23. package/lib/popoverContext.js.map +1 -1
  24. package/lib-commonjs/components/Popover/renderPopover.js +6 -4
  25. package/lib-commonjs/components/Popover/renderPopover.js.map +1 -1
  26. package/lib-commonjs/components/Popover/usePopover.js +19 -19
  27. package/lib-commonjs/components/Popover/usePopover.js.map +1 -1
  28. package/lib-commonjs/components/PopoverSurface/renderPopoverSurface.js +1 -1
  29. package/lib-commonjs/components/PopoverSurface/renderPopoverSurface.js.map +1 -1
  30. package/lib-commonjs/components/PopoverSurface/usePopoverSurface.js +2 -2
  31. package/lib-commonjs/components/PopoverSurface/usePopoverSurface.js.map +1 -1
  32. package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.js +1 -6
  33. package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.js.map +1 -1
  34. package/lib-commonjs/components/PopoverTrigger/usePopoverTrigger.js +2 -2
  35. package/lib-commonjs/components/PopoverTrigger/usePopoverTrigger.js.map +1 -1
  36. package/lib-commonjs/index.js +3 -10
  37. package/lib-commonjs/index.js.map +1 -1
  38. package/lib-commonjs/popoverContext.js +3 -1
  39. package/lib-commonjs/popoverContext.js.map +1 -1
  40. package/package.json +10 -10
package/CHANGELOG.json CHANGED
@@ -2,7 +2,174 @@
2
2
  "name": "@fluentui/react-popover",
3
3
  "entries": [
4
4
  {
5
- "date": "Mon, 23 May 2022 12:09:57 GMT",
5
+ "date": "Tue, 31 May 2022 21:26:35 GMT",
6
+ "tag": "@fluentui/react-popover_v9.0.0-rc.13",
7
+ "version": "9.0.0-rc.13",
8
+ "comments": {
9
+ "prerelease": [
10
+ {
11
+ "author": "olfedias@microsoft.com",
12
+ "package": "@fluentui/react-popover",
13
+ "commit": "0a5e9fa77a72eecafdd07034ccdc0b95fd49877c",
14
+ "comment": "chore: Update Griffel to latest version"
15
+ },
16
+ {
17
+ "author": "sarah.higley@microsoft.com",
18
+ "package": "@fluentui/react-popover",
19
+ "commit": "c55c7d9d1141ae09542a78970416a8bbb344f623",
20
+ "comment": "update popover trigger to use aria-expanded instead of aria-haspopup"
21
+ },
22
+ {
23
+ "author": "bernardo.sunderhus@gmail.com",
24
+ "package": "@fluentui/react-popover",
25
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd",
26
+ "comment": "updates import to react-shared-components"
27
+ },
28
+ {
29
+ "author": "beachball",
30
+ "package": "@fluentui/react-popover",
31
+ "comment": "Bump @fluentui/react-context-selector to v9.0.0-rc.10",
32
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
33
+ },
34
+ {
35
+ "author": "beachball",
36
+ "package": "@fluentui/react-popover",
37
+ "comment": "Bump @fluentui/react-portal to v9.0.0-rc.13",
38
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
39
+ },
40
+ {
41
+ "author": "beachball",
42
+ "package": "@fluentui/react-popover",
43
+ "comment": "Bump @fluentui/react-positioning to v9.0.0-rc.11",
44
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
45
+ },
46
+ {
47
+ "author": "beachball",
48
+ "package": "@fluentui/react-popover",
49
+ "comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.10",
50
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
51
+ },
52
+ {
53
+ "author": "beachball",
54
+ "package": "@fluentui/react-popover",
55
+ "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.13",
56
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
57
+ },
58
+ {
59
+ "author": "beachball",
60
+ "package": "@fluentui/react-popover",
61
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.10",
62
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
63
+ },
64
+ {
65
+ "author": "beachball",
66
+ "package": "@fluentui/react-popover",
67
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8",
68
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
69
+ }
70
+ ]
71
+ }
72
+ },
73
+ {
74
+ "date": "Thu, 26 May 2022 21:01:27 GMT",
75
+ "tag": "@fluentui/react-popover_v9.0.0-rc.12",
76
+ "version": "9.0.0-rc.12",
77
+ "comments": {
78
+ "none": [
79
+ {
80
+ "author": "olfedias@microsoft.com",
81
+ "package": "@fluentui/react-popover",
82
+ "commit": "ca6d248d3b70b893a0d857c4c4759b95651572aa",
83
+ "comment": "use \"useId\" in stories for id generation"
84
+ }
85
+ ],
86
+ "prerelease": [
87
+ {
88
+ "author": "behowell@microsoft.com",
89
+ "package": "@fluentui/react-popover",
90
+ "commit": "2bed5a599f10435dfa95be96f0bab5e4f71b4202",
91
+ "comment": "BREAKING: Popover no longer has an arrow by default. The `noArrow` prop is replaced by `withArrow`."
92
+ },
93
+ {
94
+ "author": "beachball",
95
+ "package": "@fluentui/react-popover",
96
+ "comment": "Bump @fluentui/react-portal to v9.0.0-rc.12",
97
+ "commit": "3cf55ce998048554bf6a550de44403843ea8ede0"
98
+ },
99
+ {
100
+ "author": "beachball",
101
+ "package": "@fluentui/react-popover",
102
+ "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.12",
103
+ "commit": "3cf55ce998048554bf6a550de44403843ea8ede0"
104
+ }
105
+ ]
106
+ }
107
+ },
108
+ {
109
+ "date": "Mon, 23 May 2022 18:56:46 GMT",
110
+ "tag": "@fluentui/react-popover_v9.0.0-rc.11",
111
+ "version": "9.0.0-rc.11",
112
+ "comments": {
113
+ "prerelease": [
114
+ {
115
+ "author": "lingfangao@hotmail.com",
116
+ "package": "@fluentui/react-popover",
117
+ "commit": "5ed22515a7542b432ed694f22606ac3718d501cb",
118
+ "comment": "BREAKING: changes to positioning prop"
119
+ },
120
+ {
121
+ "author": "lingfangao@hotmail.com",
122
+ "package": "@fluentui/react-popover",
123
+ "commit": "5ed22515a7542b432ed694f22606ac3718d501cb",
124
+ "comment": "BREAKING: stop exporting PopoverContext"
125
+ },
126
+ {
127
+ "author": "esteban.230@hotmail.com",
128
+ "package": "@fluentui/react-popover",
129
+ "commit": "5ed22515a7542b432ed694f22606ac3718d501cb",
130
+ "comment": "Removing <componentName>ClassName exports."
131
+ },
132
+ {
133
+ "author": "beachball",
134
+ "package": "@fluentui/react-popover",
135
+ "comment": "Bump @fluentui/react-portal to v9.0.0-rc.11",
136
+ "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
137
+ },
138
+ {
139
+ "author": "beachball",
140
+ "package": "@fluentui/react-popover",
141
+ "comment": "Bump @fluentui/react-positioning to v9.0.0-rc.10",
142
+ "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
143
+ },
144
+ {
145
+ "author": "beachball",
146
+ "package": "@fluentui/react-popover",
147
+ "comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.9",
148
+ "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
149
+ },
150
+ {
151
+ "author": "beachball",
152
+ "package": "@fluentui/react-popover",
153
+ "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.11",
154
+ "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
155
+ },
156
+ {
157
+ "author": "beachball",
158
+ "package": "@fluentui/react-popover",
159
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.9",
160
+ "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
161
+ },
162
+ {
163
+ "author": "beachball",
164
+ "package": "@fluentui/react-popover",
165
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.7",
166
+ "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
167
+ }
168
+ ]
169
+ }
170
+ },
171
+ {
172
+ "date": "Mon, 23 May 2022 12:13:32 GMT",
6
173
  "tag": "@fluentui/react-popover_v9.0.0-rc.10",
7
174
  "version": "9.0.0-rc.10",
8
175
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,58 @@
1
1
  # Change Log - @fluentui/react-popover
2
2
 
3
- This log was last generated on Mon, 23 May 2022 12:09:57 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 31 May 2022 21:26:35 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0-rc.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.0.0-rc.13)
8
+
9
+ Tue, 31 May 2022 21:26:35 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.0.0-rc.12..@fluentui/react-popover_v9.0.0-rc.13)
11
+
12
+ ### Changes
13
+
14
+ - chore: Update Griffel to latest version ([PR #23275](https://github.com/microsoft/fluentui/pull/23275) by olfedias@microsoft.com)
15
+ - update popover trigger to use aria-expanded instead of aria-haspopup ([PR #23127](https://github.com/microsoft/fluentui/pull/23127) by sarah.higley@microsoft.com)
16
+ - updates import to react-shared-components ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by bernardo.sunderhus@gmail.com)
17
+ - Bump @fluentui/react-context-selector to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
18
+ - Bump @fluentui/react-portal to v9.0.0-rc.13 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
19
+ - Bump @fluentui/react-positioning to v9.0.0-rc.11 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
20
+ - Bump @fluentui/react-shared-contexts to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
21
+ - Bump @fluentui/react-tabster to v9.0.0-rc.13 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
22
+ - Bump @fluentui/react-utilities to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
23
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
24
+
25
+ ## [9.0.0-rc.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.0.0-rc.12)
26
+
27
+ Thu, 26 May 2022 21:01:27 GMT
28
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.0.0-rc.11..@fluentui/react-popover_v9.0.0-rc.12)
29
+
30
+ ### Changes
31
+
32
+ - BREAKING: Popover no longer has an arrow by default. The `noArrow` prop is replaced by `withArrow`. ([PR #23205](https://github.com/microsoft/fluentui/pull/23205) by behowell@microsoft.com)
33
+ - Bump @fluentui/react-portal to v9.0.0-rc.12 ([PR #23267](https://github.com/microsoft/fluentui/pull/23267) by beachball)
34
+ - Bump @fluentui/react-tabster to v9.0.0-rc.12 ([PR #23267](https://github.com/microsoft/fluentui/pull/23267) by beachball)
35
+
36
+ ## [9.0.0-rc.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.0.0-rc.11)
37
+
38
+ Mon, 23 May 2022 18:56:46 GMT
39
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.0.0-rc.10..@fluentui/react-popover_v9.0.0-rc.11)
40
+
41
+ ### Changes
42
+
43
+ - BREAKING: changes to positioning prop ([PR #23092](https://github.com/microsoft/fluentui/pull/23092) by lingfangao@hotmail.com)
44
+ - BREAKING: stop exporting PopoverContext ([PR #23092](https://github.com/microsoft/fluentui/pull/23092) by lingfangao@hotmail.com)
45
+ - Removing <componentName>ClassName exports. ([PR #23092](https://github.com/microsoft/fluentui/pull/23092) by esteban.230@hotmail.com)
46
+ - Bump @fluentui/react-portal to v9.0.0-rc.11 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
47
+ - Bump @fluentui/react-positioning to v9.0.0-rc.10 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
48
+ - Bump @fluentui/react-shared-contexts to v9.0.0-rc.9 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
49
+ - Bump @fluentui/react-tabster to v9.0.0-rc.11 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
50
+ - Bump @fluentui/react-theme to v9.0.0-rc.9 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
51
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.7 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
52
+
7
53
  ## [9.0.0-rc.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.0.0-rc.10)
8
54
 
9
- Mon, 23 May 2022 12:09:57 GMT
55
+ Mon, 23 May 2022 12:13:32 GMT
10
56
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.0.0-rc.9..@fluentui/react-popover_v9.0.0-rc.10)
11
57
 
12
58
  ### Changes
package/Spec.md CHANGED
@@ -344,7 +344,7 @@ Default popover
344
344
 
345
345
  // Expected Markup
346
346
  <div id="container">
347
- <button aria-haspopup="dialog">Trigger</button>
347
+ <button aria-expanded="false">Trigger</button>
348
348
  </div>
349
349
 
350
350
  // on document.body
@@ -370,7 +370,7 @@ Popover that traps focus
370
370
 
371
371
  // Expected Markup
372
372
  <div id="container">
373
- <button aria-haspopup="dialog">Trigger</button>
373
+ <button aria-expanded="false">Trigger</button>
374
374
  </div>
375
375
 
376
376
  // on document.body
@@ -396,7 +396,7 @@ Inline popover
396
396
 
397
397
  // Expected Markup
398
398
  <div id="container">
399
- <button aria-haspopup="dialog">Trigger</button>
399
+ <button aria-expanded="false">Trigger</button>
400
400
  <div>
401
401
  {/** content */}
402
402
  </div>
@@ -498,7 +498,7 @@ Accessible markup is divided into two scenarios:
498
498
 
499
499
  ```tsx
500
500
  // Popover that does not trap focus
501
- <button aria-haspopup="dialog">Trigger</button>
501
+ <button aria-expanded="false">Trigger</button>
502
502
  <div role="complementary">
503
503
  No focus trap
504
504
  </div>
@@ -507,7 +507,7 @@ Accessible markup is divided into two scenarios:
507
507
  <div aria-hidden="true" /> // other content
508
508
  <div aria-hidden="true" /> // other content
509
509
  <div aria-hidden="true" className='fui-provider'>
510
- <button aria-haspopup="dialog">Trigger</button>
510
+ <button aria-expanded="false">Trigger</button>
511
511
  </div>
512
512
 
513
513
  <div role="dialog" aria-modal="true">
package/dist/index.d.ts CHANGED
@@ -1,18 +1,20 @@
1
1
  import type { ComponentProps } from '@fluentui/react-utilities';
2
2
  import type { ComponentState } from '@fluentui/react-utilities';
3
- import type { Context } from '@fluentui/react-context-selector';
4
3
  import type { ContextSelector } from '@fluentui/react-context-selector';
4
+ import { FC } from 'react';
5
5
  import type { FluentTriggerComponent } from '@fluentui/react-utilities';
6
6
  import type { ForwardRefComponent } from '@fluentui/react-utilities';
7
7
  import { JSXElementConstructor } from 'react';
8
- import type { PopperVirtualElement } from '@fluentui/react-positioning';
9
8
  import type { PortalProps } from '@fluentui/react-portal';
10
9
  import type { PositioningShorthand } from '@fluentui/react-positioning';
10
+ import type { PositioningVirtualElement } from '@fluentui/react-positioning';
11
+ import { Provider } from 'react';
12
+ import { ProviderProps } from 'react';
11
13
  import * as React_2 from 'react';
12
14
  import { ReactElement } from 'react';
13
15
  import type { Slot } from '@fluentui/react-utilities';
14
16
  import type { SlotClassNames } from '@fluentui/react-utilities';
15
- import type { usePopperMouseTarget } from '@fluentui/react-positioning';
17
+ import type { usePositioningMouseTarget } from '@fluentui/react-positioning';
16
18
 
17
19
  export declare const arrowHeights: Record<PopoverSize, number>;
18
20
 
@@ -33,12 +35,10 @@ export declare type OpenPopoverEvents = MouseEvent | TouchEvent | React_2.FocusE
33
35
  */
34
36
  export declare const Popover: React_2.FC<PopoverProps>;
35
37
 
36
- export declare const PopoverContext: Context<PopoverContextValue>;
37
-
38
38
  /**
39
39
  * Context shared between Popover and its children components
40
40
  */
41
- export declare type PopoverContextValue = Pick<PopoverState, 'toggleOpen' | 'setOpen' | 'triggerRef' | 'contentRef' | 'openOnHover' | 'openOnContext' | 'mountNode' | 'noArrow' | 'arrowRef' | 'size' | 'appearance' | 'trapFocus' | 'inline'>;
41
+ export declare type PopoverContextValue = Pick<PopoverState, 'open' | 'toggleOpen' | 'setOpen' | 'triggerRef' | 'contentRef' | 'openOnHover' | 'openOnContext' | 'mountNode' | 'withArrow' | 'arrowRef' | 'size' | 'appearance' | 'trapFocus' | 'inline'>;
42
42
 
43
43
  /**
44
44
  * Popover Props
@@ -77,9 +77,11 @@ export declare type PopoverProps = Pick<PortalProps, 'mountNode'> & {
77
77
  */
78
78
  mouseLeaveDelay?: number;
79
79
  /**
80
- * Do not display the arrow
80
+ * Display an arrow pointing to the target.
81
+ *
82
+ * @default false
81
83
  */
82
- noArrow?: boolean;
84
+ withArrow?: boolean;
83
85
  /**
84
86
  * Call back when the component requests to change value
85
87
  * The `open` value is used as a hint when directly controlling the component
@@ -121,6 +123,8 @@ export declare type PopoverProps = Pick<PortalProps, 'mountNode'> & {
121
123
  trapFocus?: boolean;
122
124
  };
123
125
 
126
+ export declare const PopoverProvider: Provider<PopoverContextValue> & FC<ProviderProps<PopoverContextValue>>;
127
+
124
128
  /**
125
129
  * Determines popover padding and arrow size
126
130
  */
@@ -129,7 +133,7 @@ export declare type PopoverSize = 'small' | 'medium' | 'large';
129
133
  /**
130
134
  * Popover State
131
135
  */
132
- export declare type PopoverState = Pick<PopoverProps, 'appearance' | 'mountNode' | 'noArrow' | 'onOpenChange' | 'openOnContext' | 'openOnHover' | 'trapFocus'> & Required<Pick<PopoverProps, 'inline' | 'open'>> & Pick<PopoverProps, 'children'> & {
136
+ export declare type PopoverState = Pick<PopoverProps, 'appearance' | 'mountNode' | 'onOpenChange' | 'openOnContext' | 'openOnHover' | 'trapFocus' | 'withArrow'> & Required<Pick<PopoverProps, 'inline' | 'open'>> & Pick<PopoverProps, 'children'> & {
133
137
  /**
134
138
  * Ref of the pointing arrow
135
139
  */
@@ -141,13 +145,13 @@ export declare type PopoverState = Pick<PopoverProps, 'appearance' | 'mountNode'
141
145
  /**
142
146
  * Anchors the popper to the mouse click for context events
143
147
  */
144
- contextTarget: PopperVirtualElement | undefined;
148
+ contextTarget: PositioningVirtualElement | undefined;
145
149
  popoverSurface: React_2.ReactElement | undefined;
146
150
  popoverTrigger: React_2.ReactElement | undefined;
147
151
  /**
148
152
  * A callback to set the target of the popper to the mouse click for context events
149
153
  */
150
- setContextTarget: ReturnType<typeof usePopperMouseTarget>[1];
154
+ setContextTarget: ReturnType<typeof usePositioningMouseTarget>[1];
151
155
  /**
152
156
  * Callback to open/close the Popover
153
157
  */
@@ -168,11 +172,6 @@ export declare type PopoverState = Pick<PopoverProps, 'appearance' | 'mountNode'
168
172
  */
169
173
  export declare const PopoverSurface: ForwardRefComponent<PopoverSurfaceProps>;
170
174
 
171
- /**
172
- * @deprecated Use `popoverSurfaceClassNames.root` instead.
173
- */
174
- export declare const popoverSurfaceClassName = "fui-PopoverSurface";
175
-
176
175
  export declare const popoverSurfaceClassNames: SlotClassNames<PopoverSurfaceSlots>;
177
176
 
178
177
  /**
@@ -190,7 +189,7 @@ export declare type PopoverSurfaceSlots = {
190
189
  /**
191
190
  * PopoverSurface State
192
191
  */
193
- export declare type PopoverSurfaceState = ComponentState<PopoverSurfaceSlots> & Pick<PopoverContextValue, 'appearance' | 'arrowRef' | 'inline' | 'mountNode' | 'noArrow' | 'size'> & {
192
+ export declare type PopoverSurfaceState = ComponentState<PopoverSurfaceSlots> & Pick<PopoverContextValue, 'appearance' | 'arrowRef' | 'inline' | 'mountNode' | 'size' | 'withArrow'> & {
194
193
  /**
195
194
  * CSS class for the arrow element
196
195
  */
@@ -204,7 +203,7 @@ export declare const PopoverTrigger: React_2.FC<PopoverTriggerProps> & FluentTri
204
203
 
205
204
  export declare type PopoverTriggerChildProps = {
206
205
  ref?: React_2.Ref<never>;
207
- } & Pick<React_2.HTMLAttributes<HTMLElement>, 'aria-haspopup' | 'onClick' | 'onContextMenu' | 'onKeyDown' | 'onMouseEnter' | 'onMouseLeave'>;
206
+ } & Pick<React_2.HTMLAttributes<HTMLElement>, 'aria-expanded' | 'onClick' | 'onContextMenu' | 'onKeyDown' | 'onMouseEnter' | 'onMouseLeave'>;
208
207
 
209
208
  /**
210
209
  * PopoverTrigger Props
package/lib/components/Popover/Popover.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Popover.types.js","sourceRoot":"../src/","sources":["components/Popover/Popover.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { PortalProps } from '@fluentui/react-portal';\nimport type { PopperVirtualElement, PositioningShorthand, usePopperMouseTarget } from '@fluentui/react-positioning';\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 * Do not display the arrow\n */\n noArrow?: 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?: boolean;\n};\n\n/**\n * Popover State\n */\nexport type PopoverState = Pick<\n PopoverProps,\n 'appearance' | 'mountNode' | 'noArrow' | 'onOpenChange' | 'openOnContext' | 'openOnHover' | 'trapFocus'\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: PopperVirtualElement | 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: ReturnType<typeof usePopperMouseTarget>[1];\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"]}
1
+ {"version":3,"file":"Popover.types.js","sourceRoot":"../src/","sources":["components/Popover/Popover.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type {\n PositioningVirtualElement,\n PositioningShorthand,\n usePositioningMouseTarget,\n} from '@fluentui/react-positioning';\nimport type { PortalProps } from '@fluentui/react-portal';\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?: boolean;\n};\n\n/**\n * Popover State\n */\nexport type PopoverState = Pick<\n PopoverProps,\n 'appearance' | 'mountNode' | 'onOpenChange' | 'openOnContext' | 'openOnHover' | 'trapFocus' | 'withArrow'\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: ReturnType<typeof usePositioningMouseTarget>[1];\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"]}
package/lib/components/Popover/renderPopover.js CHANGED
@@ -11,14 +11,15 @@ export const renderPopover_unstable = state => {
11
11
  contentRef,
12
12
  inline,
13
13
  mountNode,
14
- noArrow,
14
+ open,
15
15
  openOnContext,
16
16
  openOnHover,
17
17
  setOpen,
18
18
  size,
19
19
  toggleOpen,
20
20
  trapFocus,
21
- triggerRef
21
+ triggerRef,
22
+ withArrow
22
23
  } = state;
23
24
  return /*#__PURE__*/React.createElement(PopoverContext.Provider, {
24
25
  value: {
@@ -27,14 +28,15 @@ export const renderPopover_unstable = state => {
27
28
  contentRef,
28
29
  inline,
29
30
  mountNode,
30
- noArrow,
31
+ open,
31
32
  openOnContext,
32
33
  openOnHover,
33
34
  setOpen,
34
35
  toggleOpen,
35
36
  triggerRef,
36
37
  size,
37
- trapFocus
38
+ trapFocus,
39
+ withArrow
38
40
  }
39
41
  }, state.popoverTrigger, state.open && state.popoverSurface);
40
42
  };
package/lib/components/Popover/renderPopover.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Popover/renderPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,QAA+B,sBAA/B;AAGA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAwB;AAC5D,QAAM;AACJ,IAAA,UADI;AAEJ,IAAA,QAFI;AAGJ,IAAA,UAHI;AAIJ,IAAA,MAJI;AAKJ,IAAA,SALI;AAMJ,IAAA,OANI;AAOJ,IAAA,aAPI;AAQJ,IAAA,WARI;AASJ,IAAA,OATI;AAUJ,IAAA,IAVI;AAWJ,IAAA,UAXI;AAYJ,IAAA,SAZI;AAaJ,IAAA;AAbI,MAcF,KAdJ;AAgBA,sBACE,KAAA,CAAA,aAAA,CAAC,cAAc,CAAC,QAAhB,EAAwB;AACtB,IAAA,KAAK,EAAE;AACL,MAAA,UADK;AAEL,MAAA,QAFK;AAGL,MAAA,UAHK;AAIL,MAAA,MAJK;AAKL,MAAA,SALK;AAML,MAAA,OANK;AAOL,MAAA,aAPK;AAQL,MAAA,WARK;AASL,MAAA,OATK;AAUL,MAAA,UAVK;AAWL,MAAA,UAXK;AAYL,MAAA,IAZK;AAaL,MAAA;AAbK;AADe,GAAxB,EAiBG,KAAK,CAAC,cAjBT,EAkBG,KAAK,CAAC,IAAN,IAAc,KAAK,CAAC,cAlBvB,CADF;AAsBD,CAvCM","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 noArrow,\n openOnContext,\n openOnHover,\n setOpen,\n size,\n toggleOpen,\n trapFocus,\n triggerRef,\n } = state;\n\n return (\n <PopoverContext.Provider\n value={{\n appearance,\n arrowRef,\n contentRef,\n inline,\n mountNode,\n noArrow,\n openOnContext,\n openOnHover,\n setOpen,\n toggleOpen,\n triggerRef,\n size,\n trapFocus,\n }}\n >\n {state.popoverTrigger}\n {state.open && state.popoverSurface}\n </PopoverContext.Provider>\n );\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Popover/renderPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,QAA+B,sBAA/B;AAGA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAwB;AAC5D,QAAM;AACJ,IAAA,UADI;AAEJ,IAAA,QAFI;AAGJ,IAAA,UAHI;AAIJ,IAAA,MAJI;AAKJ,IAAA,SALI;AAMJ,IAAA,IANI;AAOJ,IAAA,aAPI;AAQJ,IAAA,WARI;AASJ,IAAA,OATI;AAUJ,IAAA,IAVI;AAWJ,IAAA,UAXI;AAYJ,IAAA,SAZI;AAaJ,IAAA,UAbI;AAcJ,IAAA;AAdI,MAeF,KAfJ;AAiBA,sBACE,KAAA,CAAA,aAAA,CAAC,cAAc,CAAC,QAAhB,EAAwB;AACtB,IAAA,KAAK,EAAE;AACL,MAAA,UADK;AAEL,MAAA,QAFK;AAGL,MAAA,UAHK;AAIL,MAAA,MAJK;AAKL,MAAA,SALK;AAML,MAAA,IANK;AAOL,MAAA,aAPK;AAQL,MAAA,WARK;AASL,MAAA,OATK;AAUL,MAAA,UAVK;AAWL,MAAA,UAXK;AAYL,MAAA,IAZK;AAaL,MAAA,SAbK;AAcL,MAAA;AAdK;AADe,GAAxB,EAkBG,KAAK,CAAC,cAlBT,EAmBG,KAAK,CAAC,IAAN,IAAc,KAAK,CAAC,cAnBvB,CADF;AAuBD,CAzCM","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 } = 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 withArrow,\n }}\n >\n {state.popoverTrigger}\n {state.open && state.popoverSurface}\n </PopoverContext.Provider>\n );\n};\n"],"sourceRoot":"../src/"}
package/lib/components/Popover/usePopover.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import * as React from 'react';
2
+ import { useControllableState, useEventCallback, useOnClickOutside, useOnScrollOutside } from '@fluentui/react-utilities';
3
+ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
4
+ import { usePositioning, resolvePositioningShorthand, mergeArrowOffset, usePositioningMouseTarget } from '@fluentui/react-positioning';
2
5
  import { elementContains } from '@fluentui/react-portal';
3
- import { mergeArrowOffset, resolvePositioningShorthand, usePopper, usePopperMouseTarget } from '@fluentui/react-positioning';
4
- import { useFluent } from '@fluentui/react-shared-contexts';
5
6
  import { useFocusFinders } from '@fluentui/react-tabster';
6
- import { useControllableState, useEventCallback, useOnClickOutside, useOnScrollOutside } from '@fluentui/react-utilities';
7
7
  import { arrowHeights } from '../PopoverSurface/index';
8
8
  /**
9
9
  * Create the state required to render Popover.
@@ -17,7 +17,7 @@ import { arrowHeights } from '../PopoverSurface/index';
17
17
  export const usePopover_unstable = props => {
18
18
  var _a;
19
19
 
20
- const [contextTarget, setContextTarget] = usePopperMouseTarget();
20
+ const [contextTarget, setContextTarget] = usePositioningMouseTarget();
21
21
  const initialState = {
22
22
  size: 'medium',
23
23
  contextTarget,
@@ -81,7 +81,7 @@ export const usePopover_unstable = props => {
81
81
  const toggleOpen = React.useCallback(e => {
82
82
  setOpen(e, !open);
83
83
  }, [setOpen, open]);
84
- const popperRefs = usePopoverRefs(initialState);
84
+ const positioningRefs = usePopoverRefs(initialState);
85
85
  const {
86
86
  targetDocument
87
87
  } = useFluent();
@@ -89,7 +89,7 @@ export const usePopover_unstable = props => {
89
89
  contains: elementContains,
90
90
  element: targetDocument,
91
91
  callback: ev => setOpen(ev, false),
92
- refs: [popperRefs.triggerRef, popperRefs.contentRef],
92
+ refs: [positioningRefs.triggerRef, positioningRefs.contentRef],
93
93
  disabled: !open
94
94
  }); // only close on scroll for context, or when closeOnScroll is specified
95
95
 
@@ -98,20 +98,20 @@ export const usePopover_unstable = props => {
98
98
  contains: elementContains,
99
99
  element: targetDocument,
100
100
  callback: ev => setOpen(ev, false),
101
- refs: [popperRefs.triggerRef, popperRefs.contentRef],
101
+ refs: [positioningRefs.triggerRef, positioningRefs.contentRef],
102
102
  disabled: !open || !closeOnScroll
103
103
  });
104
104
  const {
105
105
  findFirstFocusable
106
106
  } = useFocusFinders();
107
107
  React.useEffect(() => {
108
- if (open && popperRefs.contentRef.current) {
109
- const firstFocusable = findFirstFocusable(popperRefs.contentRef.current);
108
+ if (open && positioningRefs.contentRef.current) {
109
+ const firstFocusable = findFirstFocusable(positioningRefs.contentRef.current);
110
110
  firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
111
111
  }
112
- }, [findFirstFocusable, open, popperRefs.contentRef]);
112
+ }, [findFirstFocusable, open, positioningRefs.contentRef]);
113
113
  return { ...initialState,
114
- ...popperRefs,
114
+ ...positioningRefs,
115
115
  popoverTrigger,
116
116
  popoverSurface,
117
117
  open,
@@ -168,26 +168,26 @@ function useOpenState(state) {
168
168
 
169
169
 
170
170
  function usePopoverRefs(state) {
171
- const popperOptions = {
171
+ const positioningOptions = {
172
172
  position: 'above',
173
173
  align: 'center',
174
174
  target: state.openOnContext ? state.contextTarget : undefined,
175
175
  ...resolvePositioningShorthand(state.positioning)
176
176
  }; // no reason to render arrow when covering the target
177
177
 
178
- if (popperOptions.coverTarget) {
179
- state.noArrow = true;
178
+ if (positioningOptions.coverTarget) {
179
+ state.withArrow = false;
180
180
  }
181
181
 
182
- if (!state.noArrow) {
183
- popperOptions.offset = mergeArrowOffset(popperOptions.offset, arrowHeights[state.size]);
182
+ if (state.withArrow) {
183
+ positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeights[state.size]);
184
184
  }
185
185
 
186
186
  const {
187
187
  targetRef: triggerRef,
188
188
  containerRef: contentRef,
189
189
  arrowRef
190
- } = usePopper(popperOptions);
190
+ } = usePositioning(positioningOptions);
191
191
  return {
192
192
  triggerRef,
193
193
  contentRef,
package/lib/components/Popover/usePopover.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Popover/usePopover.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { elementContains } from '@fluentui/react-portal';\nimport {\n mergeArrowOffset,\n resolvePositioningShorthand,\n usePopper,\n usePopperMouseTarget,\n} from '@fluentui/react-positioning';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport {\n useControllableState,\n useEventCallback,\n useOnClickOutside,\n useOnScrollOutside,\n} from '@fluentui/react-utilities';\nimport { arrowHeights } from '../PopoverSurface/index';\nimport type { OpenPopoverEvents, PopoverProps, PopoverState } from './Popover.types';\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] = usePopperMouseTarget();\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 popperRefs = usePopoverRefs(initialState);\n\n const { targetDocument } = useFluent();\n useOnClickOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, false),\n refs: [popperRefs.triggerRef, popperRefs.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: [popperRefs.triggerRef, popperRefs.contentRef],\n disabled: !open || !closeOnScroll,\n });\n\n const { findFirstFocusable } = useFocusFinders();\n\n React.useEffect(() => {\n if (open && popperRefs.contentRef.current) {\n const firstFocusable = findFirstFocusable(popperRefs.contentRef.current);\n firstFocusable?.focus();\n }\n }, [findFirstFocusable, open, popperRefs.contentRef]);\n\n return {\n ...initialState,\n ...popperRefs,\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'> & Pick<PopoverProps, 'positioning' | 'openOnContext' | 'noArrow'>,\n) {\n const popperOptions = {\n position: 'above' as const,\n align: 'center' as const,\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 (popperOptions.coverTarget) {\n state.noArrow = true;\n }\n\n if (!state.noArrow) {\n popperOptions.offset = mergeArrowOffset(popperOptions.offset, arrowHeights[state.size]);\n }\n\n const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePopper(popperOptions);\n\n return {\n triggerRef,\n contentRef,\n arrowRef,\n } as const;\n}\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["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';\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 firstFocusable = findFirstFocusable(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 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"],"sourceRoot":"../src/"}
package/lib/components/PopoverSurface/PopoverSurface.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PopoverSurface.types.js","sourceRoot":"../src/","sources":["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' | 'noArrow' | 'size'> & {\n /**\n * CSS class for the arrow element\n */\n arrowClassName?: string;\n };\n"]}
1
+ {"version":3,"file":"PopoverSurface.types.js","sourceRoot":"../src/","sources":["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"]}