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

Sign up to get free protection for your applications and to get access to all the features.
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":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,eAAT,QAAgC,wBAAhC;AACA,SACE,gBADF,EAEE,2BAFF,EAGE,SAHF,EAIE,oBAJF,QAKO,6BALP;AAMA,SAAS,SAAT,QAA0B,iCAA1B;AACA,SAAS,eAAT,QAAgC,yBAAhC;AACA,SACE,oBADF,EAEE,gBAFF,EAGE,iBAHF,EAIE,kBAJF,QAKO,2BALP;AAMA,SAAS,YAAT,QAA6B,yBAA7B;AAGA;;;;;;;AAOG;;AACH,OAAO,MAAM,mBAAmB,GAAI,KAAD,IAAsC;;;AACvE,QAAM,CAAC,aAAD,EAAgB,gBAAhB,IAAoC,oBAAoB,EAA9D;AACA,QAAM,YAAY,GAAG;AACnB,IAAA,IAAI,EAAE,QADa;AAEnB,IAAA,aAFmB;AAGnB,IAAA,gBAHmB;AAInB,OAAG;AAJgB,GAArB;AAOA,QAAM,QAAQ,GAAG,KAAK,CAAC,QAAN,CAAe,OAAf,CAAuB,KAAK,CAAC,QAA7B,CAAjB;;AAEA,MAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;AACzC,QAAI,QAAQ,CAAC,MAAT,KAAoB,CAAxB,EAA2B;AACzB;AACA,MAAA,OAAO,CAAC,IAAR,CAAa,yCAAb;AACD;;AAED,QAAI,QAAQ,CAAC,MAAT,GAAkB,CAAtB,EAAyB;AACvB;AACA,MAAA,OAAO,CAAC,IAAR,CAAa,2CAAb;AACD;AACF;;AAED,MAAI,cAAc,GAAmC,SAArD;AACA,MAAI,cAAc,GAAmC,SAArD;;AACA,MAAI,QAAQ,CAAC,MAAT,KAAoB,CAAxB,EAA2B;AACzB,IAAA,cAAc,GAAG,QAAQ,CAAC,CAAD,CAAzB;AACA,IAAA,cAAc,GAAG,QAAQ,CAAC,CAAD,CAAzB;AACD,GAHD,MAGO,IAAI,QAAQ,CAAC,MAAT,KAAoB,CAAxB,EAA2B;AAChC,IAAA,cAAc,GAAG,QAAQ,CAAC,CAAD,CAAzB;AACD;;AAED,QAAM,CAAC,IAAD,EAAO,YAAP,IAAuB,YAAY,CAAC,YAAD,CAAzC;AAEA,QAAM,iBAAiB,GAAG,KAAK,CAAC,MAAN,CAAa,CAAb,CAA1B;AAEA,QAAM,OAAO,GAAG,gBAAgB,CAAC,CAAC,CAAD,EAAuB,UAAvB,KAA8C;;;AAC7E,IAAA,YAAY,CAAC,iBAAiB,CAAC,OAAnB,CAAZ;;AACA,QAAI,EAAE,CAAC,YAAY,KAAf,KAAyB,CAAC,CAAC,OAA/B,EAAwC;AACtC;AACA,MAAA,CAAC,CAAC,OAAF;AACD;;AAED,QAAI,CAAC,CAAC,IAAF,KAAW,YAAf,EAA6B;AAC3B;AACA;AACA;AACA,MAAA,iBAAiB,CAAC,OAAlB,GAA4B,UAAU,CAAC,MAAK;AAC1C,QAAA,YAAY,CAAC,CAAD,EAAI,UAAJ,CAAZ;AACD,OAFqC,EAEnC,CAAA,EAAA,GAAA,KAAK,CAAC,eAAN,MAAqB,IAArB,IAAqB,EAAA,KAAA,KAAA,CAArB,GAAqB,EAArB,GAAyB,GAFU,CAAtC;AAGD,KAPD,MAOO;AACL,MAAA,YAAY,CAAC,CAAD,EAAI,UAAJ,CAAZ;AACD;AACF,GAjB+B,CAAhC,CApCuE,CAuDvE;AACA;;AACA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,WAAO,MAAK;AACV,MAAA,YAAY,CAAC,iBAAiB,CAAC,OAAnB,CAAZ;AACD,KAFD;AAGD,GAJD,EAIG,EAJH;AAMA,QAAM,UAAU,GAAG,KAAK,CAAC,WAAN,CACjB,CAAC,IAAG;AACF,IAAA,OAAO,CAAC,CAAD,EAAI,CAAC,IAAL,CAAP;AACD,GAHgB,EAIjB,CAAC,OAAD,EAAU,IAAV,CAJiB,CAAnB;AAOA,QAAM,UAAU,GAAG,cAAc,CAAC,YAAD,CAAjC;AAEA,QAAM;AAAE,IAAA;AAAF,MAAqB,SAAS,EAApC;AACA,EAAA,iBAAiB,CAAC;AAChB,IAAA,QAAQ,EAAE,eADM;AAEhB,IAAA,OAAO,EAAE,cAFO;AAGhB,IAAA,QAAQ,EAAE,EAAE,IAAI,OAAO,CAAC,EAAD,EAAK,KAAL,CAHP;AAIhB,IAAA,IAAI,EAAE,CAAC,UAAU,CAAC,UAAZ,EAAwB,UAAU,CAAC,UAAnC,CAJU;AAKhB,IAAA,QAAQ,EAAE,CAAC;AALK,GAAD,CAAjB,CAzEuE,CAiFvE;;AACA,QAAM,aAAa,GAAG,YAAY,CAAC,aAAb,IAA8B,YAAY,CAAC,aAAjE;AACA,EAAA,kBAAkB,CAAC;AACjB,IAAA,QAAQ,EAAE,eADO;AAEjB,IAAA,OAAO,EAAE,cAFQ;AAGjB,IAAA,QAAQ,EAAE,EAAE,IAAI,OAAO,CAAC,EAAD,EAAK,KAAL,CAHN;AAIjB,IAAA,IAAI,EAAE,CAAC,UAAU,CAAC,UAAZ,EAAwB,UAAU,CAAC,UAAnC,CAJW;AAKjB,IAAA,QAAQ,EAAE,CAAC,IAAD,IAAS,CAAC;AALH,GAAD,CAAlB;AAQA,QAAM;AAAE,IAAA;AAAF,MAAyB,eAAe,EAA9C;AAEA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,QAAI,IAAI,IAAI,UAAU,CAAC,UAAX,CAAsB,OAAlC,EAA2C;AACzC,YAAM,cAAc,GAAG,kBAAkB,CAAC,UAAU,CAAC,UAAX,CAAsB,OAAvB,CAAzC;AACA,MAAA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,KAAhB,EAAA;AACD;AACF,GALD,EAKG,CAAC,kBAAD,EAAqB,IAArB,EAA2B,UAAU,CAAC,UAAtC,CALH;AAOA,SAAO,EACL,GAAG,YADE;AAEL,OAAG,UAFE;AAGL,IAAA,cAHK;AAIL,IAAA,cAJK;AAKL,IAAA,IALK;AAML,IAAA,OANK;AAOL,IAAA,UAPK;AAQL,IAAA,gBARK;AASL,IAAA,aATK;AAUL,IAAA,MAAM,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,MAAN,MAAY,IAAZ,IAAY,EAAA,KAAA,KAAA,CAAZ,GAAY,EAAZ,GAAgB;AAVnB,GAAP;AAYD,CAhHM;AAkHP;;AAEG;;AACH,SAAS,YAAT,CACE,KADF,EAC6G;AAE3G,QAAM,YAAY,GAAiC,gBAAgB,CAAC,CAAC,CAAD,EAAI,IAAJ,KAAY;AAAA,QAAA,EAAA;;AAAC,WAAA,CAAA,EAAA,GAAA,KAAK,CAAC,YAAN,MAAkB,IAAlB,IAAkB,EAAA,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAkB,EAAA,CAAA,IAAA,CAAlB,KAAkB,EAAG,CAAH,EAAM,IAAN,CAAlB;AAA6B,GAA3C,CAAnE;AAEA,QAAM,CAAC,IAAD,EAAO,YAAP,IAAuB,oBAAoB,CAAC;AAChD,IAAA,KAAK,EAAE,KAAK,CAAC,IADmC;AAEhD,IAAA,YAAY,EAAE,KAAK,CAAC,WAF4B;AAGhD,IAAA,YAAY,EAAE;AAHkC,GAAD,CAAjD;AAKA,EAAA,KAAK,CAAC,IAAN,GAAa,IAAI,KAAK,SAAT,GAAqB,IAArB,GAA4B,KAAK,CAAC,IAA/C;AACA,QAAM,gBAAgB,GAAG,KAAK,CAAC,gBAA/B;AAEA,QAAM,OAAO,GAAG,KAAK,CAAC,WAAN,CACd,CAAC,CAAD,EAAuB,UAAvB,KAA8C;AAC5C,QAAI,UAAU,IAAI,CAAC,CAAC,IAAF,KAAW,aAA7B,EAA4C;AAC1C,MAAA,gBAAgB,CAAC,CAAD,CAAhB;AACD;;AAED,QAAI,CAAC,UAAL,EAAiB;AACf,MAAA,gBAAgB,CAAC,SAAD,CAAhB;AACD;;AAED,IAAA,YAAY,CAAC,QAAQ,IAAG;AACtB;AACA;AACA,UAAI,QAAQ,KAAK,UAAjB,EAA6B;AAC3B,QAAA,YAAY,KAAA,IAAZ,IAAA,YAAY,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAA,YAAY,CAAG,CAAH,EAAM;AAAE,UAAA,IAAI,EAAE;AAAR,SAAN,CAAZ;AACD;;AAED,aAAO,UAAP;AACD,KARW,CAAZ;AASD,GAnBa,EAoBd,CAAC,YAAD,EAAe,YAAf,EAA6B,gBAA7B,CApBc,CAAhB;AAuBA,SAAO,CAAC,IAAD,EAAO,OAAP,CAAP;AACD;AAED;;AAEG;;;AACH,SAAS,cAAT,CACE,KADF,EACuH;AAErH,QAAM,aAAa,GAAG;AACpB,IAAA,QAAQ,EAAE,OADU;AAEpB,IAAA,KAAK,EAAE,QAFa;AAGpB,IAAA,MAAM,EAAE,KAAK,CAAC,aAAN,GAAsB,KAAK,CAAC,aAA5B,GAA4C,SAHhC;AAIpB,OAAG,2BAA2B,CAAC,KAAK,CAAC,WAAP;AAJV,GAAtB,CAFqH,CASrH;;AACA,MAAI,aAAa,CAAC,WAAlB,EAA+B;AAC7B,IAAA,KAAK,CAAC,OAAN,GAAgB,IAAhB;AACD;;AAED,MAAI,CAAC,KAAK,CAAC,OAAX,EAAoB;AAClB,IAAA,aAAa,CAAC,MAAd,GAAuB,gBAAgB,CAAC,aAAa,CAAC,MAAf,EAAuB,YAAY,CAAC,KAAK,CAAC,IAAP,CAAnC,CAAvC;AACD;;AAED,QAAM;AAAE,IAAA,SAAS,EAAE,UAAb;AAAyB,IAAA,YAAY,EAAE,UAAvC;AAAmD,IAAA;AAAnD,MAAgE,SAAS,CAAC,aAAD,CAA/E;AAEA,SAAO;AACL,IAAA,UADK;AAEL,IAAA,UAFK;AAGL,IAAA;AAHK,GAAP;AAKD","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"]}