@fluentui/react-popover 9.3.5 → 9.4.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (70) hide show
  1. package/CHANGELOG.json +131 -1
  2. package/CHANGELOG.md +33 -2
  3. package/dist/index.d.ts +7 -0
  4. package/lib/components/Popover/Popover.js +0 -1
  5. package/lib/components/Popover/Popover.js.map +1 -1
  6. package/lib/components/Popover/Popover.types.js.map +1 -1
  7. package/lib/components/Popover/renderPopover.js +0 -1
  8. package/lib/components/Popover/renderPopover.js.map +1 -1
  9. package/lib/components/Popover/usePopover.js +12 -27
  10. package/lib/components/Popover/usePopover.js.map +1 -1
  11. package/lib/components/PopoverSurface/PopoverSurface.js +0 -1
  12. package/lib/components/PopoverSurface/PopoverSurface.js.map +1 -1
  13. package/lib/components/PopoverSurface/renderPopoverSurface.js +2 -4
  14. package/lib/components/PopoverSurface/renderPopoverSurface.js.map +1 -1
  15. package/lib/components/PopoverSurface/usePopoverSurface.js +2 -11
  16. package/lib/components/PopoverSurface/usePopoverSurface.js.map +1 -1
  17. package/lib/components/PopoverSurface/usePopoverSurfaceStyles.js +80 -83
  18. package/lib/components/PopoverSurface/usePopoverSurfaceStyles.js.map +1 -1
  19. package/lib/components/PopoverTrigger/PopoverTrigger.js +2 -3
  20. package/lib/components/PopoverTrigger/PopoverTrigger.js.map +1 -1
  21. package/lib/components/PopoverTrigger/renderPopoverTrigger.js.map +1 -1
  22. package/lib/components/PopoverTrigger/usePopoverTrigger.js +6 -11
  23. package/lib/components/PopoverTrigger/usePopoverTrigger.js.map +1 -1
  24. package/lib/index.js.map +1 -1
  25. package/lib/popoverContext.js.map +1 -1
  26. package/lib-amd/components/Popover/Popover.types.js.map +1 -1
  27. package/lib-amd/components/Popover/usePopover.js +4 -1
  28. package/lib-amd/components/Popover/usePopover.js.map +1 -1
  29. package/lib-commonjs/Popover.js +0 -2
  30. package/lib-commonjs/Popover.js.map +1 -1
  31. package/lib-commonjs/PopoverSurface.js +0 -2
  32. package/lib-commonjs/PopoverSurface.js.map +1 -1
  33. package/lib-commonjs/PopoverTrigger.js +0 -2
  34. package/lib-commonjs/PopoverTrigger.js.map +1 -1
  35. package/lib-commonjs/components/Popover/Popover.js +0 -5
  36. package/lib-commonjs/components/Popover/Popover.js.map +1 -1
  37. package/lib-commonjs/components/Popover/Popover.types.js.map +1 -1
  38. package/lib-commonjs/components/Popover/constants.js +0 -1
  39. package/lib-commonjs/components/Popover/constants.js.map +1 -1
  40. package/lib-commonjs/components/Popover/index.js +0 -5
  41. package/lib-commonjs/components/Popover/index.js.map +1 -1
  42. package/lib-commonjs/components/Popover/renderPopover.js +0 -5
  43. package/lib-commonjs/components/Popover/renderPopover.js.map +1 -1
  44. package/lib-commonjs/components/Popover/usePopover.js +12 -37
  45. package/lib-commonjs/components/Popover/usePopover.js.map +1 -1
  46. package/lib-commonjs/components/PopoverSurface/PopoverSurface.js +0 -6
  47. package/lib-commonjs/components/PopoverSurface/PopoverSurface.js.map +1 -1
  48. package/lib-commonjs/components/PopoverSurface/PopoverSurface.types.js.map +1 -1
  49. package/lib-commonjs/components/PopoverSurface/index.js +0 -6
  50. package/lib-commonjs/components/PopoverSurface/index.js.map +1 -1
  51. package/lib-commonjs/components/PopoverSurface/renderPopoverSurface.js +2 -9
  52. package/lib-commonjs/components/PopoverSurface/renderPopoverSurface.js.map +1 -1
  53. package/lib-commonjs/components/PopoverSurface/usePopoverSurface.js +2 -16
  54. package/lib-commonjs/components/PopoverSurface/usePopoverSurface.js.map +1 -1
  55. package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.js +80 -88
  56. package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.js.map +1 -1
  57. package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.js +2 -7
  58. package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.js.map +1 -1
  59. package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.types.js.map +1 -1
  60. package/lib-commonjs/components/PopoverTrigger/index.js +0 -5
  61. package/lib-commonjs/components/PopoverTrigger/index.js.map +1 -1
  62. package/lib-commonjs/components/PopoverTrigger/renderPopoverTrigger.js +0 -2
  63. package/lib-commonjs/components/PopoverTrigger/renderPopoverTrigger.js.map +1 -1
  64. package/lib-commonjs/components/PopoverTrigger/usePopoverTrigger.js +6 -18
  65. package/lib-commonjs/components/PopoverTrigger/usePopoverTrigger.js.map +1 -1
  66. package/lib-commonjs/index.js +0 -8
  67. package/lib-commonjs/index.js.map +1 -1
  68. package/lib-commonjs/popoverContext.js +0 -4
  69. package/lib-commonjs/popoverContext.js.map +1 -1
  70. package/package.json +10 -10
package/CHANGELOG.json CHANGED
@@ -2,7 +2,137 @@
2
2
  "name": "@fluentui/react-popover",
3
3
  "entries": [
4
4
  {
5
- "date": "Wed, 21 Dec 2022 10:17:16 GMT",
5
+ "date": "Mon, 09 Jan 2023 14:31:45 GMT",
6
+ "tag": "@fluentui/react-popover_v9.4.0",
7
+ "version": "9.4.0",
8
+ "comments": {
9
+ "none": [
10
+ {
11
+ "author": "martinhochel@microsoft.com",
12
+ "package": "@fluentui/react-popover",
13
+ "commit": "abae9f7a10d544d8d6b530b974fff235cfd2f956",
14
+ "comment": "chore: introduce more barrel file api within /scripts"
15
+ }
16
+ ],
17
+ "minor": [
18
+ {
19
+ "author": "yuanboxue@microsoft.com",
20
+ "package": "@fluentui/react-popover",
21
+ "commit": "46dc6befc9db655c2763908d91c7c603f1063af4",
22
+ "comment": "feat: add new prop unstable_disableAutoFocus on Popover"
23
+ },
24
+ {
25
+ "author": "beachball",
26
+ "package": "@fluentui/react-popover",
27
+ "comment": "Bump @fluentui/react-aria to v9.3.5",
28
+ "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
29
+ },
30
+ {
31
+ "author": "beachball",
32
+ "package": "@fluentui/react-popover",
33
+ "comment": "Bump @fluentui/react-context-selector to v9.1.5",
34
+ "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
35
+ },
36
+ {
37
+ "author": "beachball",
38
+ "package": "@fluentui/react-popover",
39
+ "comment": "Bump @fluentui/react-portal to v9.1.0",
40
+ "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
41
+ },
42
+ {
43
+ "author": "beachball",
44
+ "package": "@fluentui/react-popover",
45
+ "comment": "Bump @fluentui/react-positioning to v9.3.7",
46
+ "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
47
+ },
48
+ {
49
+ "author": "beachball",
50
+ "package": "@fluentui/react-popover",
51
+ "comment": "Bump @fluentui/react-tabster to v9.3.6",
52
+ "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
53
+ },
54
+ {
55
+ "author": "beachball",
56
+ "package": "@fluentui/react-popover",
57
+ "comment": "Bump @fluentui/react-utilities to v9.4.0",
58
+ "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
59
+ }
60
+ ]
61
+ }
62
+ },
63
+ {
64
+ "date": "Wed, 04 Jan 2023 01:40:16 GMT",
65
+ "tag": "@fluentui/react-popover_v9.3.6",
66
+ "version": "9.3.6",
67
+ "comments": {
68
+ "patch": [
69
+ {
70
+ "author": "olfedias@microsoft.com",
71
+ "package": "@fluentui/react-popover",
72
+ "commit": "2c38f1e4ae07b2b60df596efe11015a68f166dbf",
73
+ "comment": "chore: Update Griffel to latest version"
74
+ },
75
+ {
76
+ "author": "beachball",
77
+ "package": "@fluentui/react-popover",
78
+ "comment": "Bump @fluentui/react-aria to v9.3.4",
79
+ "commit": "3e322d15529451be153e97298873253e21af4082"
80
+ },
81
+ {
82
+ "author": "beachball",
83
+ "package": "@fluentui/react-popover",
84
+ "comment": "Bump @fluentui/react-context-selector to v9.1.4",
85
+ "commit": "3e322d15529451be153e97298873253e21af4082"
86
+ },
87
+ {
88
+ "author": "beachball",
89
+ "package": "@fluentui/react-popover",
90
+ "comment": "Bump @fluentui/react-portal to v9.0.15",
91
+ "commit": "3e322d15529451be153e97298873253e21af4082"
92
+ },
93
+ {
94
+ "author": "beachball",
95
+ "package": "@fluentui/react-popover",
96
+ "comment": "Bump @fluentui/react-positioning to v9.3.6",
97
+ "commit": "3e322d15529451be153e97298873253e21af4082"
98
+ },
99
+ {
100
+ "author": "beachball",
101
+ "package": "@fluentui/react-popover",
102
+ "comment": "Bump @fluentui/react-tabster to v9.3.5",
103
+ "commit": "3e322d15529451be153e97298873253e21af4082"
104
+ },
105
+ {
106
+ "author": "beachball",
107
+ "package": "@fluentui/react-popover",
108
+ "comment": "Bump @fluentui/react-utilities to v9.3.1",
109
+ "commit": "3e322d15529451be153e97298873253e21af4082"
110
+ },
111
+ {
112
+ "author": "beachball",
113
+ "package": "@fluentui/react-popover",
114
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19",
115
+ "commit": "3e322d15529451be153e97298873253e21af4082"
116
+ }
117
+ ],
118
+ "none": [
119
+ {
120
+ "author": "martinhochel@microsoft.com",
121
+ "package": "@fluentui/react-popover",
122
+ "commit": "194b0cf0cc27c1c1233aa945f09b3ad29778d8ca",
123
+ "comment": "chore(scripts): use for @fluentui/scripts version within all package.json"
124
+ },
125
+ {
126
+ "author": "martinhochel@microsoft.com",
127
+ "package": "@fluentui/react-popover",
128
+ "commit": "4ec2b998b294d6d9c3196d3d82893bdd97d0c105",
129
+ "comment": "chore(scripts): move index.ts to to follow sub-folder domain packaging"
130
+ }
131
+ ]
132
+ }
133
+ },
134
+ {
135
+ "date": "Wed, 21 Dec 2022 10:20:33 GMT",
6
136
  "tag": "@fluentui/react-popover_v9.3.5",
7
137
  "version": "9.3.5",
8
138
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,43 @@
1
1
  # Change Log - @fluentui/react-popover
2
2
 
3
- This log was last generated on Wed, 21 Dec 2022 10:17:16 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 09 Jan 2023 14:31:45 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.4.0)
8
+
9
+ Mon, 09 Jan 2023 14:31:45 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.3.6..@fluentui/react-popover_v9.4.0)
11
+
12
+ ### Minor changes
13
+
14
+ - feat: add new prop unstable_disableAutoFocus on Popover ([PR #26141](https://github.com/microsoft/fluentui/pull/26141) by yuanboxue@microsoft.com)
15
+ - Bump @fluentui/react-aria to v9.3.5 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
16
+ - Bump @fluentui/react-context-selector to v9.1.5 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
17
+ - Bump @fluentui/react-portal to v9.1.0 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
18
+ - Bump @fluentui/react-positioning to v9.3.7 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
19
+ - Bump @fluentui/react-tabster to v9.3.6 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
20
+ - Bump @fluentui/react-utilities to v9.4.0 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
21
+
22
+ ## [9.3.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.3.6)
23
+
24
+ Wed, 04 Jan 2023 01:40:16 GMT
25
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.3.5..@fluentui/react-popover_v9.3.6)
26
+
27
+ ### Patches
28
+
29
+ - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
30
+ - Bump @fluentui/react-aria to v9.3.4 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
31
+ - Bump @fluentui/react-context-selector to v9.1.4 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
32
+ - Bump @fluentui/react-portal to v9.0.15 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
33
+ - Bump @fluentui/react-positioning to v9.3.6 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
34
+ - Bump @fluentui/react-tabster to v9.3.5 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
35
+ - Bump @fluentui/react-utilities to v9.3.1 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
36
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
37
+
7
38
  ## [9.3.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.3.5)
8
39
 
9
- Wed, 21 Dec 2022 10:17:16 GMT
40
+ Wed, 21 Dec 2022 10:20:33 GMT
10
41
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.3.4..@fluentui/react-popover_v9.3.5)
11
42
 
12
43
  ### Patches
package/dist/index.d.ts CHANGED
@@ -134,6 +134,13 @@ export declare type PopoverProps = Pick<PortalProps, 'mountNode'> & {
134
134
  * @default false
135
135
  */
136
136
  legacyTrapFocus?: UseModalAttributesOptions['legacyTrapFocus'];
137
+ /**
138
+ * By default Popover focuses the first focusable element in PopoverSurface on open.
139
+ * Specify `disableAutoFocus` to prevent this behavior.
140
+ *
141
+ * @default false
142
+ */
143
+ unstable_disableAutoFocus?: boolean;
137
144
  };
138
145
 
139
146
  export declare const PopoverProvider: Provider<PopoverContextValue> & FC<ProviderProps<PopoverContextValue>>;
@@ -3,7 +3,6 @@ import { renderPopover_unstable } from './renderPopover';
3
3
  /**
4
4
  * Wrapper component that manages state for a PopoverTrigger and a PopoverSurface components.
5
5
  */
6
-
7
6
  export const Popover = props => {
8
7
  const state = usePopover_unstable(props);
9
8
  return renderPopover_unstable(state);
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-popover/src/components/Popover/Popover.tsx"],"names":[],"mappings":"AACA,SAAS,mBAAT,QAAoC,cAApC;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AAGA;;AAEG;;AACH,OAAO,MAAM,OAAO,GAA2B,KAAK,IAAG;EACrD,MAAM,KAAK,GAAG,mBAAmB,CAAC,KAAD,CAAjC;EAEA,OAAO,sBAAsB,CAAC,KAAD,CAA7B;AACD,CAJM;AAMP,OAAO,CAAC,WAAR,GAAsB,SAAtB","sourcesContent":["import * as React from 'react';\nimport { usePopover_unstable } from './usePopover';\nimport { renderPopover_unstable } from './renderPopover';\nimport type { PopoverProps } from './Popover.types';\n\n/**\n * Wrapper component that manages state for a PopoverTrigger and a PopoverSurface components.\n */\nexport const Popover: React.FC<PopoverProps> = props => {\n const state = usePopover_unstable(props);\n\n return renderPopover_unstable(state);\n};\n\nPopover.displayName = 'Popover';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AACA,SAASA,mBAAmB,QAAQ,cAAc;AAClD,SAASC,sBAAsB,QAAQ,iBAAiB;AAGxD;;;AAGA,OAAO,MAAMC,OAAO,GAA2BC,KAAK,IAAG;EACrD,MAAMC,KAAK,GAAGJ,mBAAmB,CAACG,KAAK,CAAC;EAExC,OAAOF,sBAAsB,CAACG,KAAK,CAAC;AACtC,CAAC;AAEDF,OAAO,CAACG,WAAW,GAAG,SAAS","names":["usePopover_unstable","renderPopover_unstable","Popover","props","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-popover/src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePopover_unstable } from './usePopover';\nimport { renderPopover_unstable } from './renderPopover';\nimport type { PopoverProps } from './Popover.types';\n\n/**\n * Wrapper component that manages state for a PopoverTrigger and a PopoverSurface components.\n */\nexport const Popover: React.FC<PopoverProps> = props => {\n const state = usePopover_unstable(props);\n\n return renderPopover_unstable(state);\n};\n\nPopover.displayName = 'Popover';\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"Popover.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-popover/src/components/Popover/Popover.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type {\n PositioningVirtualElement,\n PositioningShorthand,\n SetVirtualMouseTarget,\n} from '@fluentui/react-positioning';\nimport type { PortalProps } from '@fluentui/react-portal';\nimport type { UseModalAttributesOptions } from '@fluentui/react-tabster';\n\n/**\n * Determines popover padding and arrow size\n */\nexport type PopoverSize = 'small' | 'medium' | 'large';\n\n/**\n * Popover Props\n */\nexport type PopoverProps = Pick<PortalProps, 'mountNode'> & {\n /**\n * A popover can appear styled with brand or inverted.\n * When not specified, the default style is used.\n */\n appearance?: 'brand' | 'inverted';\n\n /**\n * Can contain two children including {@link PopoverTrigger} and {@link PopoverSurface}.\n * Alternatively can only contain {@link PopoverSurface} if using a custom `target`.\n */\n children: [JSX.Element, JSX.Element] | JSX.Element;\n\n /**\n * Close when scroll outside of it\n *\n * @default false\n */\n closeOnScroll?: boolean;\n\n /**\n * Used to set the initial open state of the Popover in uncontrolled mode\n *\n * @default false\n */\n defaultOpen?: boolean;\n\n /**\n * Popovers are rendered out of DOM order on `document.body` by default, use this to render the popover in DOM order\n *\n * @default false\n */\n inline?: boolean;\n\n /**\n * Sets the delay for closing popover on mouse leave\n */\n mouseLeaveDelay?: number;\n\n /**\n * Display an arrow pointing to the target.\n *\n * @default false\n */\n withArrow?: boolean;\n\n /**\n * Call back when the component requests to change value\n * The `open` value is used as a hint when directly controlling the component\n */\n onOpenChange?: (e: OpenPopoverEvents, data: OnOpenChangeData) => void;\n\n /**\n * Controls the opening of the Popover\n *\n * @default false\n */\n open?: boolean;\n\n /**\n * Flag to open the Popover as a context menu. Disables all other interactions\n *\n * @default false\n */\n openOnContext?: boolean;\n\n /**\n * Flag to open the Popover by hovering the trigger\n *\n * @default false\n */\n openOnHover?: boolean;\n\n /**\n * Configures the position of the Popover\n */\n positioning?: PositioningShorthand;\n\n /**\n * Determines popover padding and arrow size\n *\n * @default medium\n */\n size?: PopoverSize;\n\n /**\n * Should trap focus\n *\n * @default false\n */\n trapFocus?: UseModalAttributesOptions['trapFocus'];\n\n /**\n * Must be used with the `trapFocus` prop\n * Enables older Fluent UI focus trap behavior where the user\n * cannot tab into the window outside of the document. This is now\n * non-standard behavior according to the [HTML dialog spec](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)\n * where the focus trap involves setting outside elements inert.\n *\n * @default false\n */\n legacyTrapFocus?: UseModalAttributesOptions['legacyTrapFocus'];\n};\n\n/**\n * Popover State\n */\nexport type PopoverState = Pick<\n PopoverProps,\n | 'appearance'\n | 'mountNode'\n | 'onOpenChange'\n | 'openOnContext'\n | 'openOnHover'\n | 'trapFocus'\n | 'withArrow'\n | 'legacyTrapFocus'\n> &\n Required<Pick<PopoverProps, 'inline' | 'open'>> &\n Pick<PopoverProps, 'children'> & {\n /**\n * Ref of the pointing arrow\n */\n arrowRef: React.MutableRefObject<HTMLDivElement | null>;\n\n /**\n * Ref of the PopoverSurface\n */\n contentRef: React.MutableRefObject<HTMLElement | null>;\n\n /**\n * Anchors the popper to the mouse click for context events\n */\n contextTarget: PositioningVirtualElement | undefined;\n\n popoverSurface: React.ReactElement | undefined;\n\n popoverTrigger: React.ReactElement | undefined;\n\n /**\n * A callback to set the target of the popper to the mouse click for context events\n */\n setContextTarget: SetVirtualMouseTarget;\n\n /**\n * Callback to open/close the Popover\n */\n setOpen: (e: OpenPopoverEvents, open: boolean) => void;\n\n size: NonNullable<PopoverProps['size']>;\n\n /**\n * Callback to toggle the open state of the Popover\n */\n toggleOpen: (e: OpenPopoverEvents) => void;\n\n /**\n * Ref of the PopoverTrigger\n */\n triggerRef: React.MutableRefObject<HTMLElement | null>;\n };\n\n/**\n * Data attached to open/close events\n */\nexport type OnOpenChangeData = { open: boolean };\n\n/**\n * The supported events that will trigger open/close of the menu\n */\nexport type OpenPopoverEvents =\n | MouseEvent\n | TouchEvent\n | React.FocusEvent<HTMLElement>\n | React.KeyboardEvent<HTMLElement>\n | React.MouseEvent<HTMLElement>;\n"]}
1
+ {"version":3,"file":"Popover.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-popover/src/components/Popover/Popover.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type {\n PositioningVirtualElement,\n PositioningShorthand,\n SetVirtualMouseTarget,\n} from '@fluentui/react-positioning';\nimport type { PortalProps } from '@fluentui/react-portal';\nimport type { UseModalAttributesOptions } from '@fluentui/react-tabster';\n\n/**\n * Determines popover padding and arrow size\n */\nexport type PopoverSize = 'small' | 'medium' | 'large';\n\n/**\n * Popover Props\n */\nexport type PopoverProps = Pick<PortalProps, 'mountNode'> & {\n /**\n * A popover can appear styled with brand or inverted.\n * When not specified, the default style is used.\n */\n appearance?: 'brand' | 'inverted';\n\n /**\n * Can contain two children including {@link PopoverTrigger} and {@link PopoverSurface}.\n * Alternatively can only contain {@link PopoverSurface} if using a custom `target`.\n */\n children: [JSX.Element, JSX.Element] | JSX.Element;\n\n /**\n * Close when scroll outside of it\n *\n * @default false\n */\n closeOnScroll?: boolean;\n\n /**\n * Used to set the initial open state of the Popover in uncontrolled mode\n *\n * @default false\n */\n defaultOpen?: boolean;\n\n /**\n * Popovers are rendered out of DOM order on `document.body` by default, use this to render the popover in DOM order\n *\n * @default false\n */\n inline?: boolean;\n\n /**\n * Sets the delay for closing popover on mouse leave\n */\n mouseLeaveDelay?: number;\n\n /**\n * Display an arrow pointing to the target.\n *\n * @default false\n */\n withArrow?: boolean;\n\n /**\n * Call back when the component requests to change value\n * The `open` value is used as a hint when directly controlling the component\n */\n onOpenChange?: (e: OpenPopoverEvents, data: OnOpenChangeData) => void;\n\n /**\n * Controls the opening of the Popover\n *\n * @default false\n */\n open?: boolean;\n\n /**\n * Flag to open the Popover as a context menu. Disables all other interactions\n *\n * @default false\n */\n openOnContext?: boolean;\n\n /**\n * Flag to open the Popover by hovering the trigger\n *\n * @default false\n */\n openOnHover?: boolean;\n\n /**\n * Configures the position of the Popover\n */\n positioning?: PositioningShorthand;\n\n /**\n * Determines popover padding and arrow size\n *\n * @default medium\n */\n size?: PopoverSize;\n\n /**\n * Should trap focus\n *\n * @default false\n */\n trapFocus?: UseModalAttributesOptions['trapFocus'];\n\n /**\n * Must be used with the `trapFocus` prop\n * Enables older Fluent UI focus trap behavior where the user\n * cannot tab into the window outside of the document. This is now\n * non-standard behavior according to the [HTML dialog spec](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)\n * where the focus trap involves setting outside elements inert.\n *\n * @default false\n */\n legacyTrapFocus?: UseModalAttributesOptions['legacyTrapFocus'];\n\n /**\n * By default Popover focuses the first focusable element in PopoverSurface on open.\n * Specify `disableAutoFocus` to prevent this behavior.\n *\n * @default false\n */\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_disableAutoFocus?: boolean;\n};\n\n/**\n * Popover State\n */\nexport type PopoverState = Pick<\n PopoverProps,\n | 'appearance'\n | 'mountNode'\n | 'onOpenChange'\n | 'openOnContext'\n | 'openOnHover'\n | 'trapFocus'\n | 'withArrow'\n | 'legacyTrapFocus'\n> &\n Required<Pick<PopoverProps, 'inline' | 'open'>> &\n Pick<PopoverProps, 'children'> & {\n /**\n * Ref of the pointing arrow\n */\n arrowRef: React.MutableRefObject<HTMLDivElement | null>;\n\n /**\n * Ref of the PopoverSurface\n */\n contentRef: React.MutableRefObject<HTMLElement | null>;\n\n /**\n * Anchors the popper to the mouse click for context events\n */\n contextTarget: PositioningVirtualElement | undefined;\n\n popoverSurface: React.ReactElement | undefined;\n\n popoverTrigger: React.ReactElement | undefined;\n\n /**\n * A callback to set the target of the popper to the mouse click for context events\n */\n setContextTarget: SetVirtualMouseTarget;\n\n /**\n * Callback to open/close the Popover\n */\n setOpen: (e: OpenPopoverEvents, open: boolean) => void;\n\n size: NonNullable<PopoverProps['size']>;\n\n /**\n * Callback to toggle the open state of the Popover\n */\n toggleOpen: (e: OpenPopoverEvents) => void;\n\n /**\n * Ref of the PopoverTrigger\n */\n triggerRef: React.MutableRefObject<HTMLElement | null>;\n };\n\n/**\n * Data attached to open/close events\n */\nexport type OnOpenChangeData = { open: boolean };\n\n/**\n * The supported events that will trigger open/close of the menu\n */\nexport type OpenPopoverEvents =\n | MouseEvent\n | TouchEvent\n | React.FocusEvent<HTMLElement>\n | React.KeyboardEvent<HTMLElement>\n | React.MouseEvent<HTMLElement>;\n"]}
@@ -3,7 +3,6 @@ import { PopoverContext } from '../../popoverContext';
3
3
  /**
4
4
  * Render the final JSX of Popover
5
5
  */
6
-
7
6
  export const renderPopover_unstable = state => {
8
7
  const {
9
8
  appearance,
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-popover/src/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;EAC5D,MAAM;IACJ,UADI;IAEJ,QAFI;IAGJ,UAHI;IAIJ,MAJI;IAKJ,SALI;IAMJ,IANI;IAOJ,aAPI;IAQJ,WARI;IASJ,OATI;IAUJ,IAVI;IAWJ,UAXI;IAYJ,SAZI;IAaJ,UAbI;IAcJ,SAdI;IAeJ;EAfI,IAgBF,KAhBJ;EAkBA,oBACE,KAAA,CAAA,aAAA,CAAC,cAAc,CAAC,QAAhB,EAAwB;IACtB,KAAK,EAAE;MACL,UADK;MAEL,QAFK;MAGL,UAHK;MAIL,MAJK;MAKL,SALK;MAML,IANK;MAOL,aAPK;MAQL,WARK;MASL,OATK;MAUL,UAVK;MAWL,UAXK;MAYL,IAZK;MAaL,SAbK;MAcL,eAdK;MAeL;IAfK;EADe,CAAxB,EAmBG,KAAK,CAAC,cAnBT,EAoBG,KAAK,CAAC,IAAN,IAAc,KAAK,CAAC,cApBvB,CADF;AAwBD,CA3CM","sourcesContent":["import * as React from 'react';\nimport { PopoverContext } from '../../popoverContext';\nimport type { PopoverState } from './Popover.types';\n\n/**\n * Render the final JSX of Popover\n */\nexport const renderPopover_unstable = (state: PopoverState) => {\n const {\n appearance,\n arrowRef,\n contentRef,\n inline,\n mountNode,\n open,\n openOnContext,\n openOnHover,\n setOpen,\n size,\n toggleOpen,\n trapFocus,\n triggerRef,\n withArrow,\n legacyTrapFocus,\n } = state;\n\n return (\n <PopoverContext.Provider\n value={{\n appearance,\n arrowRef,\n contentRef,\n inline,\n mountNode,\n open,\n openOnContext,\n openOnHover,\n setOpen,\n toggleOpen,\n triggerRef,\n size,\n trapFocus,\n legacyTrapFocus,\n withArrow,\n }}\n >\n {state.popoverTrigger}\n {state.open && state.popoverSurface}\n </PopoverContext.Provider>\n );\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,cAAc,QAAQ,sBAAsB;AAGrD;;;AAGA,OAAO,MAAMC,sBAAsB,GAAIC,KAAmB,IAAI;EAC5D,MAAM;IACJC,UAAU;IACVC,QAAQ;IACRC,UAAU;IACVC,MAAM;IACNC,SAAS;IACTC,IAAI;IACJC,aAAa;IACbC,WAAW;IACXC,OAAO;IACPC,IAAI;IACJC,UAAU;IACVC,SAAS;IACTC,UAAU;IACVC,SAAS;IACTC;EAAe,CAChB,GAAGf,KAAK;EAET,oBACEH,oBAACC,cAAc,CAACkB,QAAQ;IACtBC,KAAK,EAAE;MACLhB,UAAU;MACVC,QAAQ;MACRC,UAAU;MACVC,MAAM;MACNC,SAAS;MACTC,IAAI;MACJC,aAAa;MACbC,WAAW;MACXC,OAAO;MACPE,UAAU;MACVE,UAAU;MACVH,IAAI;MACJE,SAAS;MACTG,eAAe;MACfD;;EACD,GAEAd,KAAK,CAACkB,cAAc,EACpBlB,KAAK,CAACM,IAAI,IAAIN,KAAK,CAACmB,cAAc,CACX;AAE9B,CAAC","names":["React","PopoverContext","renderPopover_unstable","state","appearance","arrowRef","contentRef","inline","mountNode","open","openOnContext","openOnHover","setOpen","size","toggleOpen","trapFocus","triggerRef","withArrow","legacyTrapFocus","Provider","value","popoverTrigger","popoverSurface"],"sourceRoot":"../src/","sources":["packages/react-components/react-popover/src/components/Popover/renderPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { PopoverContext } from '../../popoverContext';\nimport type { PopoverState } from './Popover.types';\n\n/**\n * Render the final JSX of Popover\n */\nexport const renderPopover_unstable = (state: PopoverState) => {\n const {\n appearance,\n arrowRef,\n contentRef,\n inline,\n mountNode,\n open,\n openOnContext,\n openOnHover,\n setOpen,\n size,\n toggleOpen,\n trapFocus,\n triggerRef,\n withArrow,\n legacyTrapFocus,\n } = state;\n\n return (\n <PopoverContext.Provider\n value={{\n appearance,\n arrowRef,\n contentRef,\n inline,\n mountNode,\n open,\n openOnContext,\n openOnHover,\n setOpen,\n toggleOpen,\n triggerRef,\n size,\n trapFocus,\n legacyTrapFocus,\n withArrow,\n }}\n >\n {state.popoverTrigger}\n {state.open && state.popoverSurface}\n </PopoverContext.Provider>\n );\n};\n"]}
@@ -14,10 +14,8 @@ import { popoverSurfaceBorderRadius } from './constants';
14
14
  *
15
15
  * @param props - props from this instance of Popover
16
16
  */
17
-
18
17
  export const usePopover_unstable = props => {
19
18
  var _a;
20
-
21
19
  const [contextTarget, setContextTarget] = usePositioningMouseTarget();
22
20
  const initialState = {
23
21
  size: 'medium',
@@ -26,41 +24,33 @@ export const usePopover_unstable = props => {
26
24
  ...props
27
25
  };
28
26
  const children = React.Children.toArray(props.children);
29
-
30
27
  if (process.env.NODE_ENV !== 'production') {
31
28
  if (children.length === 0) {
32
29
  // eslint-disable-next-line no-console
33
30
  console.warn('Popover must contain at least one child');
34
31
  }
35
-
36
32
  if (children.length > 2) {
37
33
  // eslint-disable-next-line no-console
38
34
  console.warn('Popover must contain at most two children');
39
35
  }
40
36
  }
41
-
42
37
  let popoverTrigger = undefined;
43
38
  let popoverSurface = undefined;
44
-
45
39
  if (children.length === 2) {
46
40
  popoverTrigger = children[0];
47
41
  popoverSurface = children[1];
48
42
  } else if (children.length === 1) {
49
43
  popoverSurface = children[0];
50
44
  }
51
-
52
45
  const [open, setOpenState] = useOpenState(initialState);
53
46
  const setOpenTimeoutRef = React.useRef(0);
54
47
  const setOpen = useEventCallback((e, shouldOpen) => {
55
48
  var _a;
56
-
57
49
  clearTimeout(setOpenTimeoutRef.current);
58
-
59
50
  if (!(e instanceof Event) && e.persist) {
60
51
  // < React 17 still uses pooled synthetic events
61
52
  e.persist();
62
53
  }
63
-
64
54
  if (e.type === 'mouseleave') {
65
55
  // FIXME leaking Node timeout type
66
56
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -71,9 +61,9 @@ export const usePopover_unstable = props => {
71
61
  } else {
72
62
  setOpenState(e, shouldOpen);
73
63
  }
74
- }); // Clear timeout on unmount
64
+ });
65
+ // Clear timeout on unmount
75
66
  // Setting state after a component unmounts can cause memory leaks
76
-
77
67
  React.useEffect(() => {
78
68
  return () => {
79
69
  clearTimeout(setOpenTimeoutRef.current);
@@ -92,8 +82,8 @@ export const usePopover_unstable = props => {
92
82
  callback: ev => setOpen(ev, false),
93
83
  refs: [positioningRefs.triggerRef, positioningRefs.contentRef],
94
84
  disabled: !open
95
- }); // only close on scroll for context, or when closeOnScroll is specified
96
-
85
+ });
86
+ // only close on scroll for context, or when closeOnScroll is specified
97
87
  const closeOnScroll = initialState.openOnContext || initialState.closeOnScroll;
98
88
  useOnScrollOutside({
99
89
  contains: elementContains,
@@ -107,14 +97,17 @@ export const usePopover_unstable = props => {
107
97
  } = useFocusFinders();
108
98
  React.useEffect(() => {
109
99
  var _a;
110
-
100
+ if (props.unstable_disableAutoFocus) {
101
+ return;
102
+ }
111
103
  if (open && positioningRefs.contentRef.current) {
112
104
  const containerTabIndex = (_a = positioningRefs.contentRef.current.getAttribute('tabIndex')) !== null && _a !== void 0 ? _a : undefined;
113
105
  const firstFocusable = isNaN(containerTabIndex) ? findFirstFocusable(positioningRefs.contentRef.current) : positioningRefs.contentRef.current;
114
106
  firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
115
107
  }
116
- }, [findFirstFocusable, open, positioningRefs.contentRef]);
117
- return { ...initialState,
108
+ }, [findFirstFocusable, open, positioningRefs.contentRef, props.unstable_disableAutoFocus]);
109
+ return {
110
+ ...initialState,
118
111
  ...positioningRefs,
119
112
  popoverTrigger,
120
113
  popoverSurface,
@@ -129,11 +122,9 @@ export const usePopover_unstable = props => {
129
122
  /**
130
123
  * Creates and manages the Popover open state
131
124
  */
132
-
133
125
  function useOpenState(state) {
134
126
  const onOpenChange = useEventCallback((e, data) => {
135
127
  var _a;
136
-
137
128
  return (_a = state.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(state, e, data);
138
129
  });
139
130
  const [open, setOpenState] = useControllableState({
@@ -147,11 +138,9 @@ function useOpenState(state) {
147
138
  if (shouldOpen && e.type === 'contextmenu') {
148
139
  setContextTarget(e);
149
140
  }
150
-
151
141
  if (!shouldOpen) {
152
142
  setContextTarget(undefined);
153
143
  }
154
-
155
144
  setOpenState(shouldOpen);
156
145
  onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(e, {
157
146
  open: shouldOpen
@@ -162,8 +151,6 @@ function useOpenState(state) {
162
151
  /**
163
152
  * Creates and sets the necessary trigger, target and content refs used by Popover
164
153
  */
165
-
166
-
167
154
  function usePopoverRefs(state) {
168
155
  const positioningOptions = {
169
156
  position: 'above',
@@ -171,16 +158,14 @@ function usePopoverRefs(state) {
171
158
  arrowPadding: 2 * popoverSurfaceBorderRadius,
172
159
  target: state.openOnContext ? state.contextTarget : undefined,
173
160
  ...resolvePositioningShorthand(state.positioning)
174
- }; // no reason to render arrow when covering the target
175
-
161
+ };
162
+ // no reason to render arrow when covering the target
176
163
  if (positioningOptions.coverTarget) {
177
164
  state.withArrow = false;
178
165
  }
179
-
180
166
  if (state.withArrow) {
181
167
  positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeights[state.size]);
182
168
  }
183
-
184
169
  const {
185
170
  targetRef: triggerRef,
186
171
  containerRef: contentRef,
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-popover/src/components/Popover/usePopover.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n useControllableState,\n useEventCallback,\n useOnClickOutside,\n useOnScrollOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n usePositioning,\n resolvePositioningShorthand,\n mergeArrowOffset,\n usePositioningMouseTarget,\n} from '@fluentui/react-positioning';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { arrowHeights } from '../PopoverSurface/index';\nimport type { OpenPopoverEvents, PopoverProps, PopoverState } from './Popover.types';\nimport { popoverSurfaceBorderRadius } from './constants';\n\n/**\n * Create the state required to render Popover.\n *\n * The returned state can be modified with hooks such as usePopoverStyles,\n * before being passed to renderPopover_unstable.\n *\n * @param props - props from this instance of Popover\n */\nexport const usePopover_unstable = (props: PopoverProps): PopoverState => {\n const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n const initialState = {\n size: 'medium',\n contextTarget,\n setContextTarget,\n ...props,\n } as const;\n\n const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n if (process.env.NODE_ENV !== 'production') {\n if (children.length === 0) {\n // eslint-disable-next-line no-console\n console.warn('Popover must contain at least one child');\n }\n\n if (children.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('Popover must contain at most two children');\n }\n }\n\n let popoverTrigger: React.ReactElement | undefined = undefined;\n let popoverSurface: React.ReactElement | undefined = undefined;\n if (children.length === 2) {\n popoverTrigger = children[0];\n popoverSurface = children[1];\n } else if (children.length === 1) {\n popoverSurface = children[0];\n }\n\n const [open, setOpenState] = useOpenState(initialState);\n\n const setOpenTimeoutRef = React.useRef(0);\n\n const setOpen = useEventCallback((e: OpenPopoverEvents, shouldOpen: boolean) => {\n clearTimeout(setOpenTimeoutRef.current);\n if (!(e instanceof Event) && e.persist) {\n // < React 17 still uses pooled synthetic events\n e.persist();\n }\n\n if (e.type === 'mouseleave') {\n // FIXME leaking Node timeout type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n setOpenTimeoutRef.current = setTimeout(() => {\n setOpenState(e, shouldOpen);\n }, props.mouseLeaveDelay ?? 500);\n } else {\n setOpenState(e, shouldOpen);\n }\n });\n\n // Clear timeout on unmount\n // Setting state after a component unmounts can cause memory leaks\n React.useEffect(() => {\n return () => {\n clearTimeout(setOpenTimeoutRef.current);\n };\n }, []);\n\n const toggleOpen = React.useCallback<PopoverState['toggleOpen']>(\n e => {\n setOpen(e, !open);\n },\n [setOpen, open],\n );\n\n const positioningRefs = usePopoverRefs(initialState);\n\n const { targetDocument } = useFluent();\n useOnClickOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, false),\n refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n disabled: !open,\n });\n\n // only close on scroll for context, or when closeOnScroll is specified\n const closeOnScroll = initialState.openOnContext || initialState.closeOnScroll;\n useOnScrollOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, false),\n refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n disabled: !open || !closeOnScroll,\n });\n\n const { findFirstFocusable } = useFocusFinders();\n\n React.useEffect(() => {\n if (open && positioningRefs.contentRef.current) {\n const containerTabIndex = positioningRefs.contentRef.current.getAttribute('tabIndex') ?? undefined;\n const firstFocusable = isNaN(containerTabIndex)\n ? findFirstFocusable(positioningRefs.contentRef.current)\n : positioningRefs.contentRef.current;\n firstFocusable?.focus();\n }\n }, [findFirstFocusable, open, positioningRefs.contentRef]);\n\n return {\n ...initialState,\n ...positioningRefs,\n popoverTrigger,\n popoverSurface,\n open,\n setOpen,\n toggleOpen,\n setContextTarget,\n contextTarget,\n inline: props.inline ?? false,\n };\n};\n\n/**\n * Creates and manages the Popover open state\n */\nfunction useOpenState(\n state: Pick<PopoverState, 'setContextTarget' | 'onOpenChange'> & Pick<PopoverProps, 'open' | 'defaultOpen'>,\n) {\n const onOpenChange: PopoverState['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n const [open, setOpenState] = useControllableState({\n state: state.open,\n defaultState: state.defaultOpen,\n initialState: false,\n });\n state.open = open !== undefined ? open : state.open;\n const setContextTarget = state.setContextTarget;\n\n const setOpen = React.useCallback(\n (e: OpenPopoverEvents, shouldOpen: boolean) => {\n if (shouldOpen && e.type === 'contextmenu') {\n setContextTarget(e as React.MouseEvent);\n }\n\n if (!shouldOpen) {\n setContextTarget(undefined);\n }\n\n setOpenState(shouldOpen);\n onOpenChange?.(e, { open: shouldOpen });\n },\n [setOpenState, onOpenChange, setContextTarget],\n );\n\n return [open, setOpen] as const;\n}\n\n/**\n * Creates and sets the necessary trigger, target and content refs used by Popover\n */\nfunction usePopoverRefs(\n state: Pick<PopoverState, 'size' | 'contextTarget'> &\n Pick<PopoverProps, 'positioning' | 'openOnContext' | 'withArrow'>,\n) {\n const positioningOptions = {\n position: 'above' as const,\n align: 'center' as const,\n arrowPadding: 2 * popoverSurfaceBorderRadius,\n target: state.openOnContext ? state.contextTarget : undefined,\n ...resolvePositioningShorthand(state.positioning),\n };\n\n // no reason to render arrow when covering the target\n if (positioningOptions.coverTarget) {\n state.withArrow = false;\n }\n\n if (state.withArrow) {\n positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeights[state.size]);\n }\n\n const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePositioning(positioningOptions);\n\n return {\n triggerRef,\n contentRef,\n arrowRef,\n } as const;\n}\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,oBAAoB,EACpBC,gBAAgB,EAChBC,iBAAiB,EACjBC,kBAAkB,QACb,2BAA2B;AAClC,SAASC,kBAAkB,IAAIC,SAAS,QAAQ,iCAAiC;AACjF,SACEC,cAAc,EACdC,2BAA2B,EAC3BC,gBAAgB,EAChBC,yBAAyB,QACpB,6BAA6B;AACpC,SAASC,eAAe,QAAQ,wBAAwB;AACxD,SAASC,eAAe,QAAQ,yBAAyB;AACzD,SAASC,YAAY,QAAQ,yBAAyB;AAEtD,SAASC,0BAA0B,QAAQ,aAAa;AAExD;;;;;;;;AAQA,OAAO,MAAMC,mBAAmB,GAAIC,KAAmB,IAAkB;;EACvE,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGR,yBAAyB,EAAE;EACrE,MAAMS,YAAY,GAAG;IACnBC,IAAI,EAAE,QAAQ;IACdH,aAAa;IACbC,gBAAgB;IAChB,GAAGF;GACK;EAEV,MAAMK,QAAQ,GAAGrB,KAAK,CAACsB,QAAQ,CAACC,OAAO,CAACP,KAAK,CAACK,QAAQ,CAAyB;EAE/E,IAAIG,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;IACzC,IAAIL,QAAQ,CAACM,MAAM,KAAK,CAAC,EAAE;MACzB;MACAC,OAAO,CAACC,IAAI,CAAC,yCAAyC,CAAC;;IAGzD,IAAIR,QAAQ,CAACM,MAAM,GAAG,CAAC,EAAE;MACvB;MACAC,OAAO,CAACC,IAAI,CAAC,2CAA2C,CAAC;;;EAI7D,IAAIC,cAAc,GAAmCC,SAAS;EAC9D,IAAIC,cAAc,GAAmCD,SAAS;EAC9D,IAAIV,QAAQ,CAACM,MAAM,KAAK,CAAC,EAAE;IACzBG,cAAc,GAAGT,QAAQ,CAAC,CAAC,CAAC;IAC5BW,cAAc,GAAGX,QAAQ,CAAC,CAAC,CAAC;GAC7B,MAAM,IAAIA,QAAQ,CAACM,MAAM,KAAK,CAAC,EAAE;IAChCK,cAAc,GAAGX,QAAQ,CAAC,CAAC,CAAC;;EAG9B,MAAM,CAACY,IAAI,EAAEC,YAAY,CAAC,GAAGC,YAAY,CAAChB,YAAY,CAAC;EAEvD,MAAMiB,iBAAiB,GAAGpC,KAAK,CAACqC,MAAM,CAAC,CAAC,CAAC;EAEzC,MAAMC,OAAO,GAAGpC,gBAAgB,CAAC,CAACqC,CAAoB,EAAEC,UAAmB,KAAI;;IAC7EC,YAAY,CAACL,iBAAiB,CAACM,OAAO,CAAC;IACvC,IAAI,EAAEH,CAAC,YAAYI,KAAK,CAAC,IAAIJ,CAAC,CAACK,OAAO,EAAE;MACtC;MACAL,CAAC,CAACK,OAAO,EAAE;;IAGb,IAAIL,CAAC,CAACM,IAAI,KAAK,YAAY,EAAE;MAC3B;MACA;MACA;MACAT,iBAAiB,CAACM,OAAO,GAAGI,UAAU,CAAC,MAAK;QAC1CZ,YAAY,CAACK,CAAC,EAAEC,UAAU,CAAC;MAC7B,CAAC,EAAE,WAAK,CAACO,eAAe,mCAAI,GAAG,CAAC;KACjC,MAAM;MACLb,YAAY,CAACK,CAAC,EAAEC,UAAU,CAAC;;EAE/B,CAAC,CAAC;EAEF;EACA;EACAxC,KAAK,CAACgD,SAAS,CAAC,MAAK;IACnB,OAAO,MAAK;MACVP,YAAY,CAACL,iBAAiB,CAACM,OAAO,CAAC;IACzC,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMO,UAAU,GAAGjD,KAAK,CAACkD,WAAW,CAClCX,CAAC,IAAG;IACFD,OAAO,CAACC,CAAC,EAAE,CAACN,IAAI,CAAC;EACnB,CAAC,EACD,CAACK,OAAO,EAAEL,IAAI,CAAC,CAChB;EAED,MAAMkB,eAAe,GAAGC,cAAc,CAACjC,YAAY,CAAC;EAEpD,MAAM;IAAEkC;EAAc,CAAE,GAAG/C,SAAS,EAAE;EACtCH,iBAAiB,CAAC;IAChBmD,QAAQ,EAAE3C,eAAe;IACzB4C,OAAO,EAAEF,cAAc;IACvBG,QAAQ,EAAEC,EAAE,IAAInB,OAAO,CAACmB,EAAE,EAAE,KAAK,CAAC;IAClCC,IAAI,EAAE,CAACP,eAAe,CAACQ,UAAU,EAAER,eAAe,CAACS,UAAU,CAAC;IAC9DC,QAAQ,EAAE,CAAC5B;GACZ,CAAC;EAEF;EACA,MAAM6B,aAAa,GAAG3C,YAAY,CAAC4C,aAAa,IAAI5C,YAAY,CAAC2C,aAAa;EAC9E1D,kBAAkB,CAAC;IACjBkD,QAAQ,EAAE3C,eAAe;IACzB4C,OAAO,EAAEF,cAAc;IACvBG,QAAQ,EAAEC,EAAE,IAAInB,OAAO,CAACmB,EAAE,EAAE,KAAK,CAAC;IAClCC,IAAI,EAAE,CAACP,eAAe,CAACQ,UAAU,EAAER,eAAe,CAACS,UAAU,CAAC;IAC9DC,QAAQ,EAAE,CAAC5B,IAAI,IAAI,CAAC6B;GACrB,CAAC;EAEF,MAAM;IAAEE;EAAkB,CAAE,GAAGpD,eAAe,EAAE;EAEhDZ,KAAK,CAACgD,SAAS,CAAC,MAAK;;IACnB,IAAIhC,KAAK,CAACiD,yBAAyB,EAAE;MACnC;;IAGF,IAAIhC,IAAI,IAAIkB,eAAe,CAACS,UAAU,CAAClB,OAAO,EAAE;MAC9C,MAAMwB,iBAAiB,GAAG,qBAAe,CAACN,UAAU,CAAClB,OAAO,CAACyB,YAAY,CAAC,UAAU,CAAC,mCAAIpC,SAAS;MAClG,MAAMqC,cAAc,GAAGC,KAAK,CAACH,iBAAiB,CAAC,GAC3CF,kBAAkB,CAACb,eAAe,CAACS,UAAU,CAAClB,OAAO,CAAC,GACtDS,eAAe,CAACS,UAAU,CAAClB,OAAO;MACtC0B,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEE,KAAK,EAAE;;EAE3B,CAAC,EAAE,CAACN,kBAAkB,EAAE/B,IAAI,EAAEkB,eAAe,CAACS,UAAU,EAAE5C,KAAK,CAACiD,yBAAyB,CAAC,CAAC;EAE3F,OAAO;IACL,GAAG9C,YAAY;IACf,GAAGgC,eAAe;IAClBrB,cAAc;IACdE,cAAc;IACdC,IAAI;IACJK,OAAO;IACPW,UAAU;IACV/B,gBAAgB;IAChBD,aAAa;IACbsD,MAAM,EAAE,WAAK,CAACA,MAAM,mCAAI;GACzB;AACH,CAAC;AAED;;;AAGA,SAASpC,YAAY,CACnBqC,KAA2G;EAE3G,MAAMC,YAAY,GAAiCvE,gBAAgB,CAAC,CAACqC,CAAC,EAAEmC,IAAI,KAAI;IAAA;IAAC,kBAAK,CAACD,YAAY,+CAAlBD,KAAK,EAAgBjC,CAAC,EAAEmC,IAAI,CAAC;EAAA,EAAC;EAE/G,MAAM,CAACzC,IAAI,EAAEC,YAAY,CAAC,GAAGjC,oBAAoB,CAAC;IAChDuE,KAAK,EAAEA,KAAK,CAACvC,IAAI;IACjB0C,YAAY,EAAEH,KAAK,CAACI,WAAW;IAC/BzD,YAAY,EAAE;GACf,CAAC;EACFqD,KAAK,CAACvC,IAAI,GAAGA,IAAI,KAAKF,SAAS,GAAGE,IAAI,GAAGuC,KAAK,CAACvC,IAAI;EACnD,MAAMf,gBAAgB,GAAGsD,KAAK,CAACtD,gBAAgB;EAE/C,MAAMoB,OAAO,GAAGtC,KAAK,CAACkD,WAAW,CAC/B,CAACX,CAAoB,EAAEC,UAAmB,KAAI;IAC5C,IAAIA,UAAU,IAAID,CAAC,CAACM,IAAI,KAAK,aAAa,EAAE;MAC1C3B,gBAAgB,CAACqB,CAAqB,CAAC;;IAGzC,IAAI,CAACC,UAAU,EAAE;MACftB,gBAAgB,CAACa,SAAS,CAAC;;IAG7BG,YAAY,CAACM,UAAU,CAAC;IACxBiC,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAGlC,CAAC,EAAE;MAAEN,IAAI,EAAEO;IAAU,CAAE,CAAC;EACzC,CAAC,EACD,CAACN,YAAY,EAAEuC,YAAY,EAAEvD,gBAAgB,CAAC,CAC/C;EAED,OAAO,CAACe,IAAI,EAAEK,OAAO,CAAU;AACjC;AAEA;;;AAGA,SAASc,cAAc,CACrBoB,KACmE;EAEnE,MAAMK,kBAAkB,GAAG;IACzBC,QAAQ,EAAE,OAAgB;IAC1BC,KAAK,EAAE,QAAiB;IACxBC,YAAY,EAAE,CAAC,GAAGlE,0BAA0B;IAC5CmE,MAAM,EAAET,KAAK,CAACT,aAAa,GAAGS,KAAK,CAACvD,aAAa,GAAGc,SAAS;IAC7D,GAAGvB,2BAA2B,CAACgE,KAAK,CAACU,WAAW;GACjD;EAED;EACA,IAAIL,kBAAkB,CAACM,WAAW,EAAE;IAClCX,KAAK,CAACY,SAAS,GAAG,KAAK;;EAGzB,IAAIZ,KAAK,CAACY,SAAS,EAAE;IACnBP,kBAAkB,CAACQ,MAAM,GAAG5E,gBAAgB,CAACoE,kBAAkB,CAACQ,MAAM,EAAExE,YAAY,CAAC2D,KAAK,CAACpD,IAAI,CAAC,CAAC;;EAGnG,MAAM;IAAEkE,SAAS,EAAE3B,UAAU;IAAE4B,YAAY,EAAE3B,UAAU;IAAE4B;EAAQ,CAAE,GAAGjF,cAAc,CAACsE,kBAAkB,CAAC;EAExG,OAAO;IACLlB,UAAU;IACVC,UAAU;IACV4B;GACQ;AACZ","names":["React","useControllableState","useEventCallback","useOnClickOutside","useOnScrollOutside","useFluent_unstable","useFluent","usePositioning","resolvePositioningShorthand","mergeArrowOffset","usePositioningMouseTarget","elementContains","useFocusFinders","arrowHeights","popoverSurfaceBorderRadius","usePopover_unstable","props","contextTarget","setContextTarget","initialState","size","children","Children","toArray","process","env","NODE_ENV","length","console","warn","popoverTrigger","undefined","popoverSurface","open","setOpenState","useOpenState","setOpenTimeoutRef","useRef","setOpen","e","shouldOpen","clearTimeout","current","Event","persist","type","setTimeout","mouseLeaveDelay","useEffect","toggleOpen","useCallback","positioningRefs","usePopoverRefs","targetDocument","contains","element","callback","ev","refs","triggerRef","contentRef","disabled","closeOnScroll","openOnContext","findFirstFocusable","unstable_disableAutoFocus","containerTabIndex","getAttribute","firstFocusable","isNaN","focus","inline","state","onOpenChange","data","defaultState","defaultOpen","positioningOptions","position","align","arrowPadding","target","positioning","coverTarget","withArrow","offset","targetRef","containerRef","arrowRef"],"sourceRoot":"../src/","sources":["packages/react-components/react-popover/src/components/Popover/usePopover.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n useControllableState,\n useEventCallback,\n useOnClickOutside,\n useOnScrollOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n usePositioning,\n resolvePositioningShorthand,\n mergeArrowOffset,\n usePositioningMouseTarget,\n} from '@fluentui/react-positioning';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { arrowHeights } from '../PopoverSurface/index';\nimport type { OpenPopoverEvents, PopoverProps, PopoverState } from './Popover.types';\nimport { popoverSurfaceBorderRadius } from './constants';\n\n/**\n * Create the state required to render Popover.\n *\n * The returned state can be modified with hooks such as usePopoverStyles,\n * before being passed to renderPopover_unstable.\n *\n * @param props - props from this instance of Popover\n */\nexport const usePopover_unstable = (props: PopoverProps): PopoverState => {\n const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n const initialState = {\n size: 'medium',\n contextTarget,\n setContextTarget,\n ...props,\n } as const;\n\n const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n if (process.env.NODE_ENV !== 'production') {\n if (children.length === 0) {\n // eslint-disable-next-line no-console\n console.warn('Popover must contain at least one child');\n }\n\n if (children.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('Popover must contain at most two children');\n }\n }\n\n let popoverTrigger: React.ReactElement | undefined = undefined;\n let popoverSurface: React.ReactElement | undefined = undefined;\n if (children.length === 2) {\n popoverTrigger = children[0];\n popoverSurface = children[1];\n } else if (children.length === 1) {\n popoverSurface = children[0];\n }\n\n const [open, setOpenState] = useOpenState(initialState);\n\n const setOpenTimeoutRef = React.useRef(0);\n\n const setOpen = useEventCallback((e: OpenPopoverEvents, shouldOpen: boolean) => {\n clearTimeout(setOpenTimeoutRef.current);\n if (!(e instanceof Event) && e.persist) {\n // < React 17 still uses pooled synthetic events\n e.persist();\n }\n\n if (e.type === 'mouseleave') {\n // FIXME leaking Node timeout type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n setOpenTimeoutRef.current = setTimeout(() => {\n setOpenState(e, shouldOpen);\n }, props.mouseLeaveDelay ?? 500);\n } else {\n setOpenState(e, shouldOpen);\n }\n });\n\n // Clear timeout on unmount\n // Setting state after a component unmounts can cause memory leaks\n React.useEffect(() => {\n return () => {\n clearTimeout(setOpenTimeoutRef.current);\n };\n }, []);\n\n const toggleOpen = React.useCallback<PopoverState['toggleOpen']>(\n e => {\n setOpen(e, !open);\n },\n [setOpen, open],\n );\n\n const positioningRefs = usePopoverRefs(initialState);\n\n const { targetDocument } = useFluent();\n useOnClickOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, false),\n refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n disabled: !open,\n });\n\n // only close on scroll for context, or when closeOnScroll is specified\n const closeOnScroll = initialState.openOnContext || initialState.closeOnScroll;\n useOnScrollOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, false),\n refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n disabled: !open || !closeOnScroll,\n });\n\n const { findFirstFocusable } = useFocusFinders();\n\n React.useEffect(() => {\n if (props.unstable_disableAutoFocus) {\n return;\n }\n\n if (open && positioningRefs.contentRef.current) {\n const containerTabIndex = positioningRefs.contentRef.current.getAttribute('tabIndex') ?? undefined;\n const firstFocusable = isNaN(containerTabIndex)\n ? findFirstFocusable(positioningRefs.contentRef.current)\n : positioningRefs.contentRef.current;\n firstFocusable?.focus();\n }\n }, [findFirstFocusable, open, positioningRefs.contentRef, props.unstable_disableAutoFocus]);\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(shouldOpen);\n onOpenChange?.(e, { open: shouldOpen });\n },\n [setOpenState, onOpenChange, setContextTarget],\n );\n\n return [open, setOpen] as const;\n}\n\n/**\n * Creates and sets the necessary trigger, target and content refs used by Popover\n */\nfunction usePopoverRefs(\n state: Pick<PopoverState, 'size' | 'contextTarget'> &\n Pick<PopoverProps, 'positioning' | 'openOnContext' | 'withArrow'>,\n) {\n const positioningOptions = {\n position: 'above' as const,\n align: 'center' as const,\n arrowPadding: 2 * popoverSurfaceBorderRadius,\n target: state.openOnContext ? state.contextTarget : undefined,\n ...resolvePositioningShorthand(state.positioning),\n };\n\n // no reason to render arrow when covering the target\n if (positioningOptions.coverTarget) {\n state.withArrow = false;\n }\n\n if (state.withArrow) {\n positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeights[state.size]);\n }\n\n const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePositioning(positioningOptions);\n\n return {\n triggerRef,\n contentRef,\n arrowRef,\n } as const;\n}\n"]}
@@ -5,7 +5,6 @@ import { usePopoverSurfaceStyles_unstable } from './usePopoverSurfaceStyles';
5
5
  /**
6
6
  * PopoverSurface component renders react children in a positioned box
7
7
  */
8
-
9
8
  export const PopoverSurface = /*#__PURE__*/React.forwardRef((props, ref) => {
10
9
  const state = usePopoverSurface_unstable(props, ref);
11
10
  usePopoverSurfaceStyles_unstable(state);
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-popover/src/components/PopoverSurface/PopoverSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AACA,SAAS,gCAAT,QAAiD,2BAAjD;AAIA;;AAEG;;AACH,OAAO,MAAM,cAAc,gBAA6C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACtG,MAAM,KAAK,GAAG,0BAA0B,CAAC,KAAD,EAAQ,GAAR,CAAxC;EAEA,gCAAgC,CAAC,KAAD,CAAhC;EACA,OAAO,6BAA6B,CAAC,KAAD,CAApC;AACD,CALuE,CAAjE;AAOP,cAAc,CAAC,WAAf,GAA6B,gBAA7B","sourcesContent":["import * as React from 'react';\nimport { usePopoverSurface_unstable } from './usePopoverSurface';\nimport { renderPopoverSurface_unstable } from './renderPopoverSurface';\nimport { usePopoverSurfaceStyles_unstable } from './usePopoverSurfaceStyles';\nimport type { PopoverSurfaceProps } from './PopoverSurface.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * PopoverSurface component renders react children in a positioned box\n */\nexport const PopoverSurface: ForwardRefComponent<PopoverSurfaceProps> = React.forwardRef((props, ref) => {\n const state = usePopoverSurface_unstable(props, ref);\n\n usePopoverSurfaceStyles_unstable(state);\n return renderPopoverSurface_unstable(state);\n});\n\nPopoverSurface.displayName = 'PopoverSurface';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,gCAAgC,QAAQ,2BAA2B;AAI5E;;;AAGA,OAAO,MAAMC,cAAc,gBAA6CJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACtG,MAAMC,KAAK,GAAGP,0BAA0B,CAACK,KAAK,EAAEC,GAAG,CAAC;EAEpDJ,gCAAgC,CAACK,KAAK,CAAC;EACvC,OAAON,6BAA6B,CAACM,KAAK,CAAC;AAC7C,CAAC,CAAC;AAEFJ,cAAc,CAACK,WAAW,GAAG,gBAAgB","names":["React","usePopoverSurface_unstable","renderPopoverSurface_unstable","usePopoverSurfaceStyles_unstable","PopoverSurface","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-popover/src/components/PopoverSurface/PopoverSurface.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePopoverSurface_unstable } from './usePopoverSurface';\nimport { renderPopoverSurface_unstable } from './renderPopoverSurface';\nimport { usePopoverSurfaceStyles_unstable } from './usePopoverSurfaceStyles';\nimport type { PopoverSurfaceProps } from './PopoverSurface.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * PopoverSurface component renders react children in a positioned box\n */\nexport const PopoverSurface: ForwardRefComponent<PopoverSurfaceProps> = React.forwardRef((props, ref) => {\n const state = usePopoverSurface_unstable(props, ref);\n\n usePopoverSurfaceStyles_unstable(state);\n return renderPopoverSurface_unstable(state);\n});\n\nPopoverSurface.displayName = 'PopoverSurface';\n"]}
@@ -4,22 +4,20 @@ import { getSlots } from '@fluentui/react-utilities';
4
4
  /**
5
5
  * Render the final JSX of PopoverSurface
6
6
  */
7
-
8
7
  export const renderPopoverSurface_unstable = state => {
9
8
  const {
10
9
  slots,
11
10
  slotProps
12
11
  } = getSlots(state);
13
- const surface = /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
12
+ const surface = /*#__PURE__*/React.createElement(slots.root, {
13
+ ...slotProps.root
14
14
  }, state.withArrow && /*#__PURE__*/React.createElement("div", {
15
15
  ref: state.arrowRef,
16
16
  className: state.arrowClassName
17
17
  }), slotProps.root.children);
18
-
19
18
  if (state.inline) {
20
19
  return surface;
21
20
  }
22
-
23
21
  return /*#__PURE__*/React.createElement(Portal, {
24
22
  mountNode: state.mountNode
25
23
  }, surface);
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-popover/src/components/PopoverSurface/renderPopoverSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,MAAT,QAAuB,wBAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA+B;EAC1E,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAsB,KAAtB,CAArC;EAEA,MAAM,OAAO,gBACX,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,SAAN,iBAAmB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;IAAK,GAAG,EAAE,KAAK,CAAC,QAAhB;IAA0B,SAAS,EAAE,KAAK,CAAC;EAA3C,CAAA,CADtB,EAEG,SAAS,CAAC,IAAV,CAAe,QAFlB,CADF;;EAOA,IAAI,KAAK,CAAC,MAAV,EAAkB;IAChB,OAAO,OAAP;EACD;;EAED,oBAAO,KAAA,CAAA,aAAA,CAAC,MAAD,EAAO;IAAC,SAAS,EAAE,KAAK,CAAC;EAAlB,CAAP,EAAqC,OAArC,CAAP;AACD,CAfM","sourcesContent":["import * as React from 'react';\nimport { Portal } from '@fluentui/react-portal';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';\n\n/**\n * Render the final JSX of PopoverSurface\n */\nexport const renderPopoverSurface_unstable = (state: PopoverSurfaceState) => {\n const { slots, slotProps } = getSlots<PopoverSurfaceSlots>(state);\n\n const surface = (\n <slots.root {...slotProps.root}>\n {state.withArrow && <div ref={state.arrowRef} className={state.arrowClassName} />}\n {slotProps.root.children}\n </slots.root>\n );\n\n if (state.inline) {\n return surface;\n }\n\n return <Portal mountNode={state.mountNode}>{surface}</Portal>;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,6BAA6B,GAAIC,KAA0B,IAAI;EAC1E,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAsBE,KAAK,CAAC;EAEjE,MAAMG,OAAO,gBACXP,oBAACK,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,GAC3BJ,KAAK,CAACK,SAAS,iBAAIT;IAAKU,GAAG,EAAEN,KAAK,CAACO,QAAQ;IAAEC,SAAS,EAAER,KAAK,CAACS;EAAc,EAAI,EAChFP,SAAS,CAACE,IAAI,CAACM,QAAQ,CAE3B;EAED,IAAIV,KAAK,CAACW,MAAM,EAAE;IAChB,OAAOR,OAAO;;EAGhB,oBAAOP,oBAACC,MAAM;IAACe,SAAS,EAAEZ,KAAK,CAACY;EAAS,GAAGT,OAAO,CAAU;AAC/D,CAAC","names":["React","Portal","getSlots","renderPopoverSurface_unstable","state","slots","slotProps","surface","root","withArrow","ref","arrowRef","className","arrowClassName","children","inline","mountNode"],"sourceRoot":"../src/","sources":["packages/react-components/react-popover/src/components/PopoverSurface/renderPopoverSurface.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Portal } from '@fluentui/react-portal';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';\n\n/**\n * Render the final JSX of PopoverSurface\n */\nexport const renderPopoverSurface_unstable = (state: PopoverSurfaceState) => {\n const { slots, slotProps } = getSlots<PopoverSurfaceSlots>(state);\n\n const surface = (\n <slots.root {...slotProps.root}>\n {state.withArrow && <div ref={state.arrowRef} className={state.arrowClassName} />}\n {slotProps.root.children}\n </slots.root>\n );\n\n if (state.inline) {\n return surface;\n }\n\n return <Portal mountNode={state.mountNode}>{surface}</Portal>;\n};\n"]}
@@ -10,7 +10,6 @@ import { usePopoverContext_unstable } from '../../popoverContext';
10
10
  * @param props - props from this instance of PopoverSurface
11
11
  * @param ref - reference to root HTMLDivElement of PopoverSurface
12
12
  */
13
-
14
13
  export const usePopoverSurface_unstable = (props, ref) => {
15
14
  const contentRef = usePopoverContext_unstable(context => context.contentRef);
16
15
  const openOnHover = usePopoverContext_unstable(context => context.openOnHover);
@@ -52,35 +51,27 @@ export const usePopoverSurface_unstable = (props, ref) => {
52
51
  onMouseLeave: onMouseLeaveOriginal,
53
52
  onKeyDown: onKeyDownOriginal
54
53
  } = state.root;
55
-
56
54
  state.root.onMouseEnter = e => {
57
55
  if (openOnHover) {
58
56
  setOpen(e, true);
59
57
  }
60
-
61
58
  onMouseEnterOriginal === null || onMouseEnterOriginal === void 0 ? void 0 : onMouseEnterOriginal(e);
62
59
  };
63
-
64
60
  state.root.onMouseLeave = e => {
65
61
  if (openOnHover) {
66
62
  setOpen(e, false);
67
63
  }
68
-
69
64
  onMouseLeaveOriginal === null || onMouseLeaveOriginal === void 0 ? void 0 : onMouseLeaveOriginal(e);
70
65
  };
71
-
72
66
  state.root.onKeyDown = e => {
73
- var _a; // only close if the event happened inside the current popover
67
+ var _a;
68
+ // only close if the event happened inside the current popover
74
69
  // If using a stack of inline popovers, the user should call `stopPropagation` to avoid dismissing the entire stack
75
-
76
-
77
70
  if (e.key === 'Escape' && ((_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
78
71
  setOpen(e, false);
79
72
  }
80
-
81
73
  onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(e);
82
74
  };
83
-
84
75
  return state;
85
76
  };
86
77
  //# sourceMappingURL=usePopoverSurface.js.map