@fluentui/react-popover 9.14.1 → 9.14.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +38 -2
- package/dist/index.d.ts +11 -5
- package/lib/Popover.js +1 -1
- package/lib/Popover.js.map +1 -1
- package/lib/PopoverSurface.js +1 -1
- package/lib/PopoverSurface.js.map +1 -1
- package/lib/components/Popover/Popover.js +3 -2
- package/lib/components/Popover/Popover.js.map +1 -1
- package/lib/components/Popover/Popover.types.js +3 -1
- package/lib/components/Popover/Popover.types.js.map +1 -1
- package/lib/components/Popover/index.js +2 -1
- package/lib/components/Popover/index.js.map +1 -1
- package/lib/components/Popover/renderPopover.js +4 -20
- package/lib/components/Popover/renderPopover.js.map +1 -1
- package/lib/components/Popover/usePopover.js +58 -42
- package/lib/components/Popover/usePopover.js.map +1 -1
- package/lib/components/Popover/usePopoverContextValues.js +41 -0
- package/lib/components/Popover/usePopoverContextValues.js.map +1 -0
- package/lib/components/PopoverSurface/PopoverSurface.types.js +3 -1
- package/lib/components/PopoverSurface/PopoverSurface.types.js.map +1 -1
- package/lib/components/PopoverSurface/index.js +1 -1
- package/lib/components/PopoverSurface/index.js.map +1 -1
- package/lib/components/PopoverSurface/usePopoverSurface.js +12 -22
- package/lib/components/PopoverSurface/usePopoverSurface.js.map +1 -1
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.styles.js +2 -0
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.styles.js.map +1 -1
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.styles.raw.js +2 -0
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.styles.raw.js.map +1 -1
- package/lib/components/PopoverTrigger/PopoverTrigger.js +0 -1
- package/lib/components/PopoverTrigger/PopoverTrigger.js.map +1 -1
- package/lib/components/PopoverTrigger/PopoverTrigger.types.js +3 -1
- package/lib/components/PopoverTrigger/PopoverTrigger.types.js.map +1 -1
- package/lib/components/PopoverTrigger/usePopoverTrigger.js +0 -1
- package/lib/components/PopoverTrigger/usePopoverTrigger.js.map +1 -1
- package/lib/index.js +1 -6
- package/lib/index.js.map +1 -1
- package/lib/popoverContext.js +1 -1
- package/lib/popoverContext.js.map +1 -1
- package/lib-commonjs/Popover.js +2 -2
- package/lib-commonjs/Popover.js.map +1 -1
- package/lib-commonjs/PopoverSurface.js +0 -3
- package/lib-commonjs/PopoverSurface.js.map +1 -1
- package/lib-commonjs/components/Popover/Popover.js +3 -3
- package/lib-commonjs/components/Popover/Popover.js.map +1 -1
- package/lib-commonjs/components/Popover/Popover.types.js +3 -3
- package/lib-commonjs/components/Popover/Popover.types.js.map +1 -1
- package/lib-commonjs/components/Popover/index.js +3 -2
- package/lib-commonjs/components/Popover/index.js.map +1 -1
- package/lib-commonjs/components/Popover/renderPopover.js +3 -19
- package/lib-commonjs/components/Popover/renderPopover.js.map +1 -1
- package/lib-commonjs/components/Popover/usePopover.js +61 -46
- package/lib-commonjs/components/Popover/usePopover.js.map +1 -1
- package/lib-commonjs/components/Popover/usePopoverContextValues.js +52 -0
- package/lib-commonjs/components/Popover/usePopoverContextValues.js.map +1 -0
- package/lib-commonjs/components/PopoverSurface/PopoverSurface.types.js +3 -1
- package/lib-commonjs/components/PopoverSurface/PopoverSurface.types.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/index.js +0 -3
- package/lib-commonjs/components/PopoverSurface/index.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/usePopoverSurface.js +14 -27
- package/lib-commonjs/components/PopoverSurface/usePopoverSurface.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.styles.js +2 -0
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.styles.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.styles.raw.js +2 -0
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.js +0 -2
- package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.js.map +1 -1
- package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.types.js +3 -3
- package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.types.js.map +1 -1
- package/lib-commonjs/components/PopoverTrigger/usePopoverTrigger.js +0 -2
- package/lib-commonjs/components/PopoverTrigger/usePopoverTrigger.js.map +1 -1
- package/lib-commonjs/index.js +3 -5
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/popoverContext.js +3 -0
- package/lib-commonjs/popoverContext.js.map +1 -1
- package/package.json +10 -10
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,48 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-popover
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 26 May 2026 09:33:51 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.14.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.14.3)
|
|
8
|
+
|
|
9
|
+
Tue, 26 May 2026 09:33:51 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.14.2..@fluentui/react-popover_v9.14.3)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: close Popover when focus escapes outside while trapFocus is enabled ([PR #35995](https://github.com/microsoft/fluentui/pull/35995) by petrduda@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-aria to v9.17.12 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
16
|
+
- Bump @fluentui/react-context-selector to v9.2.17 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
17
|
+
- Bump @fluentui/react-motion to v9.16.0 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
18
|
+
- Bump @fluentui/react-motion-components-preview to v0.15.5 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
19
|
+
- Bump @fluentui/react-portal to v9.8.13 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
20
|
+
- Bump @fluentui/react-positioning to v9.22.2 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
21
|
+
- Bump @fluentui/react-tabster to v9.26.15 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
22
|
+
- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
23
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
24
|
+
|
|
25
|
+
## [9.14.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.14.2)
|
|
26
|
+
|
|
27
|
+
Thu, 23 Apr 2026 14:21:03 GMT
|
|
28
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.14.1..@fluentui/react-popover_v9.14.2)
|
|
29
|
+
|
|
30
|
+
### Patches
|
|
31
|
+
|
|
32
|
+
- perf: memoize context values in use*ContextValues hooks ([PR #36008](https://github.com/microsoft/fluentui/pull/36008) by olfedias@microsoft.com)
|
|
33
|
+
- Bump @fluentui/react-aria to v9.17.11 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
34
|
+
- Bump @fluentui/react-context-selector to v9.2.16 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
35
|
+
- Bump @fluentui/react-motion to v9.15.0 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
36
|
+
- Bump @fluentui/react-motion-components-preview to v0.15.4 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
37
|
+
- Bump @fluentui/react-portal to v9.8.12 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
38
|
+
- Bump @fluentui/react-positioning to v9.22.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
39
|
+
- Bump @fluentui/react-tabster to v9.26.14 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
40
|
+
- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
41
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
42
|
+
|
|
7
43
|
## [9.14.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.14.1)
|
|
8
44
|
|
|
9
|
-
Mon, 30 Mar 2026 14:
|
|
45
|
+
Mon, 30 Mar 2026 14:37:41 GMT
|
|
10
46
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.14.0..@fluentui/react-popover_v9.14.1)
|
|
11
47
|
|
|
12
48
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { ARIAButtonResultProps } from '@fluentui/react-aria';
|
|
2
|
-
import { ARIAButtonType } from '@fluentui/react-aria';
|
|
1
|
+
import type { ARIAButtonResultProps } from '@fluentui/react-aria';
|
|
2
|
+
import type { ARIAButtonType } from '@fluentui/react-aria';
|
|
3
3
|
import type { ComponentProps } from '@fluentui/react-utilities';
|
|
4
4
|
import type { ComponentState } from '@fluentui/react-utilities';
|
|
5
5
|
import type { ContextSelector } from '@fluentui/react-context-selector';
|
|
@@ -12,7 +12,7 @@ import type { PositioningVirtualElement } from '@fluentui/react-positioning';
|
|
|
12
12
|
import type { PresenceMotionSlotProps } from '@fluentui/react-motion';
|
|
13
13
|
import { Provider } from 'react';
|
|
14
14
|
import { ProviderProps } from 'react';
|
|
15
|
-
import * as React_2 from 'react';
|
|
15
|
+
import type * as React_2 from 'react';
|
|
16
16
|
import type { SetVirtualMouseTarget } from '@fluentui/react-positioning';
|
|
17
17
|
import type { Slot } from '@fluentui/react-utilities';
|
|
18
18
|
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
@@ -34,7 +34,7 @@ export declare type OnOpenChangeData = {
|
|
|
34
34
|
/**
|
|
35
35
|
* The supported events that will trigger open/close of the menu
|
|
36
36
|
*/
|
|
37
|
-
export declare type OpenPopoverEvents = MouseEvent | TouchEvent | React_2.FocusEvent<HTMLElement> | React_2.KeyboardEvent<HTMLElement> | React_2.MouseEvent<HTMLElement>;
|
|
37
|
+
export declare type OpenPopoverEvents = MouseEvent | TouchEvent | FocusEvent | React_2.FocusEvent<HTMLElement> | React_2.KeyboardEvent<HTMLElement> | React_2.MouseEvent<HTMLElement>;
|
|
38
38
|
|
|
39
39
|
/**
|
|
40
40
|
* Wrapper component that manages state for a PopoverTrigger and a PopoverSurface components.
|
|
@@ -46,6 +46,10 @@ export declare const Popover: React_2.FC<PopoverProps>;
|
|
|
46
46
|
*/
|
|
47
47
|
export declare type PopoverContextValue = Pick<PopoverState, 'open' | 'toggleOpen' | 'setOpen' | 'triggerRef' | 'contentRef' | 'openOnHover' | 'openOnContext' | 'mountNode' | 'withArrow' | 'arrowRef' | 'size' | 'appearance' | 'trapFocus' | 'inertTrapFocus' | 'inline'>;
|
|
48
48
|
|
|
49
|
+
export declare type PopoverContextValues = {
|
|
50
|
+
popover: PopoverContextValue;
|
|
51
|
+
};
|
|
52
|
+
|
|
49
53
|
/**
|
|
50
54
|
* Popover Props
|
|
51
55
|
*/
|
|
@@ -279,7 +283,7 @@ export declare type PopoverTriggerState = {
|
|
|
279
283
|
/**
|
|
280
284
|
* Render the final JSX of Popover
|
|
281
285
|
*/
|
|
282
|
-
export declare const renderPopover_unstable: (state: PopoverState) => JSXElement;
|
|
286
|
+
export declare const renderPopover_unstable: (state: PopoverState, contextValues?: PopoverContextValues) => JSXElement;
|
|
283
287
|
|
|
284
288
|
/**
|
|
285
289
|
* Render the final JSX of PopoverSurface
|
|
@@ -303,6 +307,8 @@ export declare const usePopover_unstable: (props: PopoverProps) => PopoverState;
|
|
|
303
307
|
|
|
304
308
|
export declare const usePopoverContext_unstable: <T>(selector: ContextSelector<PopoverContextValue, T>) => T;
|
|
305
309
|
|
|
310
|
+
export declare function usePopoverContextValues_unstable(state: PopoverState): PopoverContextValues;
|
|
311
|
+
|
|
306
312
|
/**
|
|
307
313
|
* Create the state required to render PopoverSurface.
|
|
308
314
|
*
|
package/lib/Popover.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { Popover, renderPopover_unstable, usePopover_unstable,
|
|
1
|
+
export { Popover, renderPopover_unstable, usePopover_unstable, usePopoverContextValues_unstable } from './components/Popover/index';
|
package/lib/Popover.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Popover.ts"],"sourcesContent":["export type {\n OnOpenChangeData,\n OpenPopoverEvents,\n
|
|
1
|
+
{"version":3,"sources":["../src/Popover.ts"],"sourcesContent":["export type {\n OnOpenChangeData,\n OpenPopoverEvents,\n PopoverContextValues,\n PopoverProps,\n PopoverSize,\n PopoverState,\n} from './components/Popover/index';\nexport {\n Popover,\n renderPopover_unstable,\n usePopover_unstable,\n usePopoverContextValues_unstable,\n} from './components/Popover/index';\n"],"names":["Popover","renderPopover_unstable","usePopover_unstable","usePopoverContextValues_unstable"],"mappings":"AAQA,SACEA,OAAO,EACPC,sBAAsB,EACtBC,mBAAmB,EACnBC,gCAAgC,QAC3B,6BAA6B"}
|
package/lib/PopoverSurface.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { PopoverSurface, arrowHeights, popoverSurfaceClassNames, renderPopoverSurface_unstable, usePopoverSurfaceStyles_unstable, usePopoverSurface_unstable
|
|
1
|
+
export { PopoverSurface, arrowHeights, popoverSurfaceClassNames, renderPopoverSurface_unstable, usePopoverSurfaceStyles_unstable, usePopoverSurface_unstable } from './components/PopoverSurface/index';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/PopoverSurface.ts"],"sourcesContent":["export type {
|
|
1
|
+
{"version":3,"sources":["../src/PopoverSurface.ts"],"sourcesContent":["export type { PopoverSurfaceProps, PopoverSurfaceSlots, PopoverSurfaceState } from './components/PopoverSurface/index';\nexport {\n PopoverSurface,\n arrowHeights,\n popoverSurfaceClassNames,\n renderPopoverSurface_unstable,\n usePopoverSurfaceStyles_unstable,\n usePopoverSurface_unstable,\n} from './components/PopoverSurface/index';\n"],"names":["PopoverSurface","arrowHeights","popoverSurfaceClassNames","renderPopoverSurface_unstable","usePopoverSurfaceStyles_unstable","usePopoverSurface_unstable"],"mappings":"AACA,SACEA,cAAc,EACdC,YAAY,EACZC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,oCAAoC"}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import * as React from 'react';
|
|
3
2
|
import { usePopover_unstable } from './usePopover';
|
|
3
|
+
import { usePopoverContextValues_unstable } from './usePopoverContextValues';
|
|
4
4
|
import { renderPopover_unstable } from './renderPopover';
|
|
5
5
|
/**
|
|
6
6
|
* Wrapper component that manages state for a PopoverTrigger and a PopoverSurface components.
|
|
7
7
|
*/ export const Popover = (props)=>{
|
|
8
8
|
const state = usePopover_unstable(props);
|
|
9
|
-
|
|
9
|
+
const contextValues = usePopoverContextValues_unstable(state);
|
|
10
|
+
return renderPopover_unstable(state, contextValues);
|
|
10
11
|
};
|
|
11
12
|
Popover.displayName = 'Popover';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Popover/Popover.tsx"],"sourcesContent":["'use client';\n\nimport * 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"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/Popover/Popover.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { usePopover_unstable } from './usePopover';\nimport { usePopoverContextValues_unstable } from './usePopoverContextValues';\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 const contextValues = usePopoverContextValues_unstable(state);\n\n return renderPopover_unstable(state, contextValues);\n};\n\nPopover.displayName = 'Popover';\n"],"names":["usePopover_unstable","usePopoverContextValues_unstable","renderPopover_unstable","Popover","props","state","contextValues","displayName"],"mappings":"AAAA;AAGA,SAASA,mBAAmB,QAAQ,eAAe;AACnD,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,sBAAsB,QAAQ,kBAAkB;AAGzD;;CAEC,GACD,OAAO,MAAMC,UAAkCC,CAAAA;IAC7C,MAAMC,QAAQL,oBAAoBI;IAClC,MAAME,gBAAgBL,iCAAiCI;IAEvD,OAAOH,uBAAuBG,OAAOC;AACvC,EAAE;AAEFH,QAAQI,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Popover/Popover.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, JSXElement, Slot } from '@fluentui/react-utilities';\nimport type {\n PositioningVirtualElement,\n PositioningShorthand,\n SetVirtualMouseTarget,\n} from '@fluentui/react-positioning';\nimport type { PortalProps } from '@fluentui/react-portal';\n\nexport type PopoverSlots = {\n /**\n * Slot for the surface motion animation.\n * For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs).\n */\n surfaceMotion: Slot<PresenceMotionSlotProps>;\n};\n\nexport type InternalPopoverSlots = {\n surfaceMotion: NonNullable<Slot<PresenceMotionSlotProps>>;\n};\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 = ComponentProps<Partial<PopoverSlots>> &\n 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 `PopoverTrigger` and `PopoverSurface`.\n * Alternatively can only contain `PopoverSurface` if using a custom `target`.\n */\n children: [JSXElement, JSXElement] | JSXElement;\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 // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\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 * Flag to close the Popover when an iframe outside a PopoverSurface is focused\n *\n * @default true\n */\n closeOnIframeFocus?: boolean;\n\n /**\n * Configures the position of the Popover.\n * Explore [Positioning docs](https://react.fluentui.dev/?path=/docs/concepts-developer-positioning-components--docs) for more options.\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 * 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 * @deprecated this behavior is default provided now, to opt-out of it in favor of standard behavior use the `inertTrapFocus` property\n */\n legacyTrapFocus?: boolean;\n /**\n * Enables 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 * making navigation leak from the trapped area back to the browser toolbar and vice-versa.\n *\n * @default false\n */\n inertTrapFocus?: boolean;\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\
|
|
1
|
+
{"version":3,"sources":["../src/components/Popover/Popover.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, JSXElement, Slot } from '@fluentui/react-utilities';\nimport type {\n PositioningVirtualElement,\n PositioningShorthand,\n SetVirtualMouseTarget,\n} from '@fluentui/react-positioning';\nimport type { PortalProps } from '@fluentui/react-portal';\n\nexport type PopoverSlots = {\n /**\n * Slot for the surface motion animation.\n * For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs).\n */\n surfaceMotion: Slot<PresenceMotionSlotProps>;\n};\n\nexport type InternalPopoverSlots = {\n surfaceMotion: NonNullable<Slot<PresenceMotionSlotProps>>;\n};\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 = ComponentProps<Partial<PopoverSlots>> &\n 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 `PopoverTrigger` and `PopoverSurface`.\n * Alternatively can only contain `PopoverSurface` if using a custom `target`.\n */\n children: [JSXElement, JSXElement] | JSXElement;\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 // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\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 * Flag to close the Popover when an iframe outside a PopoverSurface is focused\n *\n * @default true\n */\n closeOnIframeFocus?: boolean;\n\n /**\n * Configures the position of the Popover.\n * Explore [Positioning docs](https://react.fluentui.dev/?path=/docs/concepts-developer-positioning-components--docs) for more options.\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 * 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 * @deprecated this behavior is default provided now, to opt-out of it in favor of standard behavior use the `inertTrapFocus` property\n */\n legacyTrapFocus?: boolean;\n /**\n * Enables 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 * making navigation leak from the trapped area back to the browser toolbar and vice-versa.\n *\n * @default false\n */\n inertTrapFocus?: boolean;\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 = ComponentState<InternalPopoverSlots> &\n Pick<\n PopoverProps,\n | 'appearance'\n | 'mountNode'\n | 'onOpenChange'\n | 'openOnContext'\n | 'openOnHover'\n | 'trapFocus'\n | 'withArrow'\n | 'inertTrapFocus'\n > &\n Required<Pick<PopoverProps, 'inline' | 'open'>> &\n Pick<PopoverProps, 'children'> & {\n /**\n * Ref of the pointing arrow\n */\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n arrowRef: React.MutableRefObject<HTMLDivElement | null>;\n\n /**\n * Ref of the PopoverSurface\n */\n // eslint-disable-next-line @typescript-eslint/no-deprecated\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 // eslint-disable-next-line @typescript-eslint/no-deprecated\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 | FocusEvent\n | React.FocusEvent<HTMLElement>\n | React.KeyboardEvent<HTMLElement>\n | React.MouseEvent<HTMLElement>;\n"],"names":[],"mappings":"AAoOA;;CAEC,GACD,WAMkC"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
export { Popover } from './Popover';
|
|
2
2
|
export { renderPopover_unstable } from './renderPopover';
|
|
3
|
-
export { usePopover_unstable
|
|
3
|
+
export { usePopover_unstable } from './usePopover';
|
|
4
|
+
export { usePopoverContextValues_unstable } from './usePopoverContextValues';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Popover/index.ts"],"sourcesContent":["export { Popover } from './Popover';\nexport type {
|
|
1
|
+
{"version":3,"sources":["../src/components/Popover/index.ts"],"sourcesContent":["export { Popover } from './Popover';\nexport type { OnOpenChangeData, OpenPopoverEvents, PopoverProps, PopoverSize, PopoverState } from './Popover.types';\nexport { renderPopover_unstable } from './renderPopover';\nexport { usePopover_unstable } from './usePopover';\nexport { usePopoverContextValues_unstable } from './usePopoverContextValues';\nexport type { PopoverContextValues } from './usePopoverContextValues';\n"],"names":["Popover","renderPopover_unstable","usePopover_unstable","usePopoverContextValues_unstable"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AAEpC,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,gCAAgC,QAAQ,4BAA4B"}
|
|
@@ -2,30 +2,14 @@
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { assertSlots } from '@fluentui/react-utilities';
|
|
4
4
|
import { MotionRefForwarder } from '@fluentui/react-motion';
|
|
5
|
-
import { PopoverContext } from '../../popoverContext';
|
|
5
|
+
import { PopoverContext, popoverContextDefaultValue } from '../../popoverContext';
|
|
6
6
|
/**
|
|
7
7
|
* Render the final JSX of Popover
|
|
8
|
-
*/ export const renderPopover_unstable = (state)=>{
|
|
8
|
+
*/ export const renderPopover_unstable = (state, contextValues)=>{
|
|
9
9
|
assertSlots(state);
|
|
10
|
-
|
|
10
|
+
var _contextValues_popover;
|
|
11
11
|
return /*#__PURE__*/ _jsxs(PopoverContext.Provider, {
|
|
12
|
-
value:
|
|
13
|
-
appearance,
|
|
14
|
-
arrowRef,
|
|
15
|
-
contentRef,
|
|
16
|
-
inline,
|
|
17
|
-
mountNode,
|
|
18
|
-
open,
|
|
19
|
-
openOnContext,
|
|
20
|
-
openOnHover,
|
|
21
|
-
setOpen,
|
|
22
|
-
toggleOpen,
|
|
23
|
-
triggerRef,
|
|
24
|
-
size,
|
|
25
|
-
trapFocus,
|
|
26
|
-
inertTrapFocus,
|
|
27
|
-
withArrow
|
|
28
|
-
},
|
|
12
|
+
value: (_contextValues_popover = contextValues === null || contextValues === void 0 ? void 0 : contextValues.popover) !== null && _contextValues_popover !== void 0 ? _contextValues_popover : popoverContextDefaultValue,
|
|
29
13
|
children: [
|
|
30
14
|
state.popoverTrigger,
|
|
31
15
|
state.popoverSurface && /*#__PURE__*/ _jsx(state.surfaceMotion, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Popover/renderPopover.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport * as React from 'react';\nimport { assertSlots, type JSXElement } from '@fluentui/react-utilities';\nimport { MotionRefForwarder } from '@fluentui/react-motion';\nimport { PopoverContext } from '../../popoverContext';\nimport type { InternalPopoverSlots, PopoverState } from './Popover.types';\n\n/**\n * Render the final JSX of Popover\n */\nexport const renderPopover_unstable = (state: PopoverState): JSXElement => {\n assertSlots<InternalPopoverSlots>(state);\n\n
|
|
1
|
+
{"version":3,"sources":["../src/components/Popover/renderPopover.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport * as React from 'react';\nimport { assertSlots, type JSXElement } from '@fluentui/react-utilities';\nimport { MotionRefForwarder } from '@fluentui/react-motion';\nimport { PopoverContext, popoverContextDefaultValue } from '../../popoverContext';\nimport type { InternalPopoverSlots, PopoverState } from './Popover.types';\nimport type { PopoverContextValues } from './usePopoverContextValues';\n\n/**\n * Render the final JSX of Popover\n */\nexport const renderPopover_unstable = (state: PopoverState, contextValues?: PopoverContextValues): JSXElement => {\n assertSlots<InternalPopoverSlots>(state);\n\n return (\n <PopoverContext.Provider value={contextValues?.popover ?? popoverContextDefaultValue}>\n {state.popoverTrigger}\n {state.popoverSurface && (\n <state.surfaceMotion>\n <MotionRefForwarder>\n {/* Casting here as content should be equivalent to <PopoverSurface /> */}\n {/* FIXME: content should not be ReactNode it should be ReactElement instead. */}\n {state.popoverSurface as React.ReactElement}\n </MotionRefForwarder>\n </state.surfaceMotion>\n )}\n </PopoverContext.Provider>\n );\n};\n"],"names":["React","assertSlots","MotionRefForwarder","PopoverContext","popoverContextDefaultValue","renderPopover_unstable","state","contextValues","Provider","value","popover","popoverTrigger","popoverSurface","surfaceMotion"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,QAAyB,4BAA4B;AACzE,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SAASC,cAAc,EAAEC,0BAA0B,QAAQ,uBAAuB;AAIlF;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAqBC;IAC1DN,YAAkCK;QAGAC;IADlC,qBACE,MAACJ,eAAeK,QAAQ;QAACC,OAAOF,CAAAA,yBAAAA,0BAAAA,oCAAAA,cAAeG,OAAO,cAAtBH,oCAAAA,yBAA0BH;;YACvDE,MAAMK,cAAc;YACpBL,MAAMM,cAAc,kBACnB,KAACN,MAAMO,aAAa;0BAClB,cAAA,KAACX;8BAGEI,MAAMM,cAAc;;;;;AAMjC,EAAE"}
|
|
@@ -16,55 +16,22 @@ import { PopoverSurfaceMotion } from './PopoverSurfaceMotion';
|
|
|
16
16
|
*
|
|
17
17
|
* @param props - props from this instance of Popover
|
|
18
18
|
*/ export const usePopover_unstable = (props)=>{
|
|
19
|
-
const
|
|
20
|
-
const positioning = resolvePositioningShorthand(props.positioning);
|
|
21
|
-
const withArrow = props.withArrow && !positioning.coverTarget;
|
|
19
|
+
const [contextTarget, setContextTarget] = usePositioningMouseTarget();
|
|
22
20
|
const { targetDocument } = useFluent();
|
|
21
|
+
const positioning = resolvePositioningShorthand(props.positioning);
|
|
23
22
|
const handlePositionEnd = usePositioningSlideDirection({
|
|
24
23
|
targetDocument,
|
|
25
24
|
onPositioningEnd: positioning.onPositioningEnd
|
|
26
25
|
});
|
|
27
|
-
const
|
|
26
|
+
const initialState = {
|
|
27
|
+
size: 'medium',
|
|
28
|
+
contextTarget,
|
|
29
|
+
setContextTarget,
|
|
28
30
|
...props,
|
|
29
31
|
positioning: {
|
|
30
32
|
...positioning,
|
|
31
|
-
onPositioningEnd: handlePositionEnd
|
|
32
|
-
// Update the offset with the arrow size only when it's available
|
|
33
|
-
...withArrow ? {
|
|
34
|
-
offset: mergeArrowOffset(positioning.offset, arrowHeights[size])
|
|
35
|
-
} : {}
|
|
33
|
+
onPositioningEnd: handlePositionEnd
|
|
36
34
|
}
|
|
37
|
-
});
|
|
38
|
-
return {
|
|
39
|
-
components: {
|
|
40
|
-
surfaceMotion: PopoverSurfaceMotion
|
|
41
|
-
},
|
|
42
|
-
appearance,
|
|
43
|
-
size,
|
|
44
|
-
...state,
|
|
45
|
-
surfaceMotion: presenceMotionSlot(props.surfaceMotion, {
|
|
46
|
-
elementType: PopoverSurfaceMotion,
|
|
47
|
-
defaultProps: {
|
|
48
|
-
visible: state.open,
|
|
49
|
-
appear: true,
|
|
50
|
-
unmountOnExit: true
|
|
51
|
-
}
|
|
52
|
-
})
|
|
53
|
-
};
|
|
54
|
-
};
|
|
55
|
-
/**
|
|
56
|
-
* Base hook that builds Popover state for behavior and structure only.
|
|
57
|
-
* Does not add design-related defaults such as appearance or size.
|
|
58
|
-
* Does not manage focus behavior, it's handled by `usePopoverFocusManagement_unstable`.
|
|
59
|
-
*
|
|
60
|
-
* @internal
|
|
61
|
-
* @param props - props from this instance of Popover
|
|
62
|
-
*/ export const usePopoverBase_unstable = (props)=>{
|
|
63
|
-
const [contextTarget, setContextTarget] = usePositioningMouseTarget();
|
|
64
|
-
const initialState = {
|
|
65
|
-
contextTarget,
|
|
66
|
-
setContextTarget,
|
|
67
|
-
...props
|
|
68
35
|
};
|
|
69
36
|
const children = React.Children.toArray(props.children);
|
|
70
37
|
if (process.env.NODE_ENV !== 'production') {
|
|
@@ -112,7 +79,6 @@ import { PopoverSurfaceMotion } from './PopoverSurfaceMotion';
|
|
|
112
79
|
open
|
|
113
80
|
]);
|
|
114
81
|
const positioningRefs = usePopoverRefs(initialState);
|
|
115
|
-
const { targetDocument } = useFluent();
|
|
116
82
|
var _props_closeOnIframeFocus;
|
|
117
83
|
useOnClickOutside({
|
|
118
84
|
contains: elementContains,
|
|
@@ -137,6 +103,40 @@ import { PopoverSurfaceMotion } from './PopoverSurfaceMotion';
|
|
|
137
103
|
],
|
|
138
104
|
disabled: !open || !closeOnScroll
|
|
139
105
|
});
|
|
106
|
+
var _props_closeOnFocusOutside;
|
|
107
|
+
// When trapFocus is enabled, close the popover if focus is programmatically moved outside
|
|
108
|
+
// (e.g. via element.focus()), which doesn't trigger click or scroll dismiss handlers.
|
|
109
|
+
// Internal `closeOnFocusOutside` prop allows consumers to opt out during gradual rollout.
|
|
110
|
+
const closeOnFocusOutside = (_props_closeOnFocusOutside = props.closeOnFocusOutside) !== null && _props_closeOnFocusOutside !== void 0 ? _props_closeOnFocusOutside : true;
|
|
111
|
+
const closeOnFocusOutCallback = useEventCallback((ev)=>{
|
|
112
|
+
var _ev_composedPath_;
|
|
113
|
+
const target = (_ev_composedPath_ = ev.composedPath()[0]) !== null && _ev_composedPath_ !== void 0 ? _ev_composedPath_ : ev.target;
|
|
114
|
+
const contentElement = positioningRefs.contentRef.current;
|
|
115
|
+
var _positioningRefs_triggerRef_current;
|
|
116
|
+
const triggerElement = (_positioningRefs_triggerRef_current = positioningRefs.triggerRef.current) !== null && _positioningRefs_triggerRef_current !== void 0 ? _positioningRefs_triggerRef_current : null;
|
|
117
|
+
if (!contentElement) {
|
|
118
|
+
return;
|
|
119
|
+
}
|
|
120
|
+
const isOutside = !elementContains(contentElement, target) && !elementContains(triggerElement, target);
|
|
121
|
+
if (isOutside) {
|
|
122
|
+
setOpen(ev, false);
|
|
123
|
+
}
|
|
124
|
+
});
|
|
125
|
+
React.useEffect(()=>{
|
|
126
|
+
if (!open || !props.trapFocus || !closeOnFocusOutside) {
|
|
127
|
+
return;
|
|
128
|
+
}
|
|
129
|
+
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('focusin', closeOnFocusOutCallback, true);
|
|
130
|
+
return ()=>{
|
|
131
|
+
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('focusin', closeOnFocusOutCallback, true);
|
|
132
|
+
};
|
|
133
|
+
}, [
|
|
134
|
+
open,
|
|
135
|
+
props.trapFocus,
|
|
136
|
+
closeOnFocusOutside,
|
|
137
|
+
targetDocument,
|
|
138
|
+
closeOnFocusOutCallback
|
|
139
|
+
]);
|
|
140
140
|
const { findFirstFocusable } = useFocusFinders();
|
|
141
141
|
const activateModal = useActivateModal();
|
|
142
142
|
React.useEffect(()=>{
|
|
@@ -164,6 +164,9 @@ import { PopoverSurfaceMotion } from './PopoverSurfaceMotion';
|
|
|
164
164
|
]);
|
|
165
165
|
var _props_inertTrapFocus, _props_inline;
|
|
166
166
|
return {
|
|
167
|
+
components: {
|
|
168
|
+
surfaceMotion: PopoverSurfaceMotion
|
|
169
|
+
},
|
|
167
170
|
...initialState,
|
|
168
171
|
...positioningRefs,
|
|
169
172
|
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
@@ -175,7 +178,15 @@ import { PopoverSurfaceMotion } from './PopoverSurfaceMotion';
|
|
|
175
178
|
toggleOpen,
|
|
176
179
|
setContextTarget,
|
|
177
180
|
contextTarget,
|
|
178
|
-
inline: (_props_inline = props.inline) !== null && _props_inline !== void 0 ? _props_inline : false
|
|
181
|
+
inline: (_props_inline = props.inline) !== null && _props_inline !== void 0 ? _props_inline : false,
|
|
182
|
+
surfaceMotion: presenceMotionSlot(props.surfaceMotion, {
|
|
183
|
+
elementType: PopoverSurfaceMotion,
|
|
184
|
+
defaultProps: {
|
|
185
|
+
visible: open,
|
|
186
|
+
appear: true,
|
|
187
|
+
unmountOnExit: true
|
|
188
|
+
}
|
|
189
|
+
})
|
|
179
190
|
};
|
|
180
191
|
};
|
|
181
192
|
/**
|
|
@@ -191,6 +202,7 @@ import { PopoverSurfaceMotion } from './PopoverSurfaceMotion';
|
|
|
191
202
|
defaultState: state.defaultOpen,
|
|
192
203
|
initialState: false
|
|
193
204
|
});
|
|
205
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
194
206
|
state.open = open !== undefined ? open : state.open;
|
|
195
207
|
const setContextTarget = state.setContextTarget;
|
|
196
208
|
const setOpen = React.useCallback((e, shouldOpen)=>{
|
|
@@ -227,8 +239,12 @@ import { PopoverSurfaceMotion } from './PopoverSurfaceMotion';
|
|
|
227
239
|
};
|
|
228
240
|
// no reason to render arrow when covering the target
|
|
229
241
|
if (positioningOptions.coverTarget) {
|
|
242
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
230
243
|
state.withArrow = false;
|
|
231
244
|
}
|
|
245
|
+
if (state.withArrow) {
|
|
246
|
+
positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeights[state.size]);
|
|
247
|
+
}
|
|
232
248
|
const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePositioning(positioningOptions);
|
|
233
249
|
return {
|
|
234
250
|
triggerRef,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Popover/usePopover.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n useControllableState,\n useEventCallback,\n useOnClickOutside,\n useOnScrollOutside,\n elementContains,\n useTimeout,\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 usePositioningSlideDirection,\n} from '@fluentui/react-positioning';\nimport { useFocusFinders, useActivateModal } from '@fluentui/react-tabster';\nimport { arrowHeights } from '../PopoverSurface/index';\nimport type {\n OpenPopoverEvents,\n PopoverBaseProps,\n PopoverBaseState,\n PopoverProps,\n PopoverState,\n} from './Popover.types';\nimport { popoverSurfaceBorderRadius } from './constants';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { PopoverSurfaceMotion } from './PopoverSurfaceMotion';\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 { appearance, size = 'medium' } = props;\n const positioning = resolvePositioningShorthand(props.positioning);\n const withArrow = props.withArrow && !positioning.coverTarget;\n\n const { targetDocument } = useFluent();\n\n const handlePositionEnd = usePositioningSlideDirection({\n targetDocument,\n onPositioningEnd: positioning.onPositioningEnd,\n });\n\n const state = usePopoverBase_unstable({\n ...props,\n positioning: {\n ...positioning,\n onPositioningEnd: handlePositionEnd,\n // Update the offset with the arrow size only when it's available\n ...(withArrow ? { offset: mergeArrowOffset(positioning.offset, arrowHeights[size]) } : {}),\n },\n });\n\n return {\n components: {\n surfaceMotion: PopoverSurfaceMotion,\n },\n appearance,\n size,\n ...state,\n surfaceMotion: presenceMotionSlot(props.surfaceMotion, {\n elementType: PopoverSurfaceMotion,\n defaultProps: {\n visible: state.open,\n appear: true,\n unmountOnExit: true,\n },\n }),\n };\n};\n\n/**\n * Base hook that builds Popover state for behavior and structure only.\n * Does not add design-related defaults such as appearance or size.\n * Does not manage focus behavior, it's handled by `usePopoverFocusManagement_unstable`.\n *\n * @internal\n * @param props - props from this instance of Popover\n */\nexport const usePopoverBase_unstable = (props: PopoverBaseProps): PopoverBaseState => {\n const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n const initialState = {\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 [setOpenTimeout, clearOpenTimeout] = useTimeout();\n const setOpen = useEventCallback((e: OpenPopoverEvents, shouldOpen: boolean) => {\n clearOpenTimeout();\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 setOpenTimeout(() => {\n setOpenState(e, shouldOpen);\n }, props.mouseLeaveDelay ?? 500);\n } else {\n setOpenState(e, shouldOpen);\n }\n });\n\n const toggleOpen = React.useCallback<PopoverBaseState['toggleOpen']>(\n (e: OpenPopoverEvents) => {\n setOpen(e, !open);\n },\n [setOpen, open],\n );\n\n const positioningRefs = usePopoverRefs(initialState);\n const { targetDocument } = useFluent();\n\n useOnClickOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, false),\n refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n disabled: !open,\n disabledFocusOnIframe: !(props.closeOnIframeFocus ?? true),\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 const activateModal = useActivateModal();\n\n React.useEffect(() => {\n if (props.unstable_disableAutoFocus) {\n return;\n }\n\n const contentElement = positioningRefs.contentRef.current;\n\n if (open && contentElement) {\n const shouldFocusContainer = !isNaN(contentElement.getAttribute('tabIndex') ?? undefined);\n const firstFocusable = shouldFocusContainer ? contentElement : findFirstFocusable(contentElement);\n\n firstFocusable?.focus();\n\n if (shouldFocusContainer) {\n // Modal activation happens automatically when something inside the modal is focused programmatically.\n // When the container is focused, we need to activate the modal manually.\n activateModal(contentElement);\n }\n }\n }, [findFirstFocusable, activateModal, open, positioningRefs.contentRef, props.unstable_disableAutoFocus]);\n\n return {\n ...initialState,\n ...positioningRefs,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n inertTrapFocus: props.inertTrapFocus ?? (props.legacyTrapFocus === undefined ? false : !props.legacyTrapFocus),\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<PopoverBaseState, 'setContextTarget' | 'onOpenChange'> & Pick<PopoverBaseProps, 'open' | 'defaultOpen'>,\n) {\n 'use no memo';\n\n const onOpenChange: PopoverBaseState['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<PopoverBaseState, 'contextTarget'> &\n Pick<PopoverBaseProps, 'positioning' | 'openOnContext' | 'withArrow'>,\n) {\n 'use no memo';\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 const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePositioning(positioningOptions);\n\n return {\n triggerRef,\n contentRef,\n arrowRef,\n } as const;\n}\n"],"names":["React","useControllableState","useEventCallback","useOnClickOutside","useOnScrollOutside","elementContains","useTimeout","useFluent_unstable","useFluent","usePositioning","resolvePositioningShorthand","mergeArrowOffset","usePositioningMouseTarget","usePositioningSlideDirection","useFocusFinders","useActivateModal","arrowHeights","popoverSurfaceBorderRadius","presenceMotionSlot","PopoverSurfaceMotion","usePopover_unstable","props","appearance","size","positioning","withArrow","coverTarget","targetDocument","handlePositionEnd","onPositioningEnd","state","usePopoverBase_unstable","offset","components","surfaceMotion","elementType","defaultProps","visible","open","appear","unmountOnExit","contextTarget","setContextTarget","initialState","children","Children","toArray","process","env","NODE_ENV","length","console","warn","popoverTrigger","undefined","popoverSurface","setOpenState","useOpenState","setOpenTimeout","clearOpenTimeout","setOpen","e","shouldOpen","Event","persist","type","mouseLeaveDelay","toggleOpen","useCallback","positioningRefs","usePopoverRefs","contains","element","callback","ev","refs","triggerRef","contentRef","disabled","disabledFocusOnIframe","closeOnIframeFocus","closeOnScroll","openOnContext","findFirstFocusable","activateModal","useEffect","unstable_disableAutoFocus","contentElement","current","shouldFocusContainer","isNaN","getAttribute","firstFocusable","focus","inertTrapFocus","legacyTrapFocus","inline","onOpenChange","data","defaultState","defaultOpen","positioningOptions","position","align","arrowPadding","target","targetRef","containerRef","arrowRef"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/components/Popover/usePopover.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n useControllableState,\n useEventCallback,\n useOnClickOutside,\n useOnScrollOutside,\n elementContains,\n useTimeout,\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 usePositioningSlideDirection,\n} from '@fluentui/react-positioning';\nimport { useFocusFinders, useActivateModal } from '@fluentui/react-tabster';\nimport { arrowHeights } from '../PopoverSurface/index';\nimport type { OpenPopoverEvents, PopoverProps, PopoverState } from './Popover.types';\nimport { popoverSurfaceBorderRadius } from './constants';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { PopoverSurfaceMotion } from './PopoverSurfaceMotion';\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 { targetDocument } = useFluent();\n\n const positioning = resolvePositioningShorthand(props.positioning);\n const handlePositionEnd = usePositioningSlideDirection({\n targetDocument,\n onPositioningEnd: positioning.onPositioningEnd,\n });\n\n const initialState = {\n size: 'medium',\n contextTarget,\n setContextTarget,\n ...props,\n positioning: {\n ...positioning,\n onPositioningEnd: handlePositionEnd,\n },\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 [setOpenTimeout, clearOpenTimeout] = useTimeout();\n const setOpen = useEventCallback((e: OpenPopoverEvents, shouldOpen: boolean) => {\n clearOpenTimeout();\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 setOpenTimeout(() => {\n setOpenState(e, shouldOpen);\n }, props.mouseLeaveDelay ?? 500);\n } else {\n setOpenState(e, shouldOpen);\n }\n });\n\n const toggleOpen = React.useCallback<PopoverState['toggleOpen']>(\n (e: OpenPopoverEvents) => {\n setOpen(e, !open);\n },\n [setOpen, open],\n );\n\n const positioningRefs = usePopoverRefs(initialState);\n\n useOnClickOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, false),\n refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n disabled: !open,\n disabledFocusOnIframe: !(props.closeOnIframeFocus ?? true),\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 // When trapFocus is enabled, close the popover if focus is programmatically moved outside\n // (e.g. via element.focus()), which doesn't trigger click or scroll dismiss handlers.\n // Internal `closeOnFocusOutside` prop allows consumers to opt out during gradual rollout.\n const closeOnFocusOutside = (props as PopoverProps & { closeOnFocusOutside?: boolean }).closeOnFocusOutside ?? true;\n\n const closeOnFocusOutCallback = useEventCallback((ev: FocusEvent) => {\n const target = (ev.composedPath()[0] ?? ev.target) as HTMLElement;\n const contentElement = positioningRefs.contentRef.current;\n const triggerElement = positioningRefs.triggerRef.current ?? null;\n\n if (!contentElement) {\n return;\n }\n\n const isOutside = !elementContains(contentElement, target) && !elementContains(triggerElement, target);\n\n if (isOutside) {\n setOpen(ev, false);\n }\n });\n\n React.useEffect(() => {\n if (!open || !props.trapFocus || !closeOnFocusOutside) {\n return;\n }\n\n targetDocument?.addEventListener('focusin', closeOnFocusOutCallback, true);\n return () => {\n targetDocument?.removeEventListener('focusin', closeOnFocusOutCallback, true);\n };\n }, [open, props.trapFocus, closeOnFocusOutside, targetDocument, closeOnFocusOutCallback]);\n\n const { findFirstFocusable } = useFocusFinders();\n const activateModal = useActivateModal();\n\n React.useEffect(() => {\n if (props.unstable_disableAutoFocus) {\n return;\n }\n\n const contentElement = positioningRefs.contentRef.current;\n\n if (open && contentElement) {\n const shouldFocusContainer = !isNaN(contentElement.getAttribute('tabIndex') ?? undefined);\n const firstFocusable = shouldFocusContainer ? contentElement : findFirstFocusable(contentElement);\n\n firstFocusable?.focus();\n\n if (shouldFocusContainer) {\n // Modal activation happens automatically when something inside the modal is focused programmatically.\n // When the container is focused, we need to activate the modal manually.\n activateModal(contentElement);\n }\n }\n }, [findFirstFocusable, activateModal, open, positioningRefs.contentRef, props.unstable_disableAutoFocus]);\n\n return {\n components: {\n surfaceMotion: PopoverSurfaceMotion,\n },\n ...initialState,\n ...positioningRefs,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n inertTrapFocus: props.inertTrapFocus ?? (props.legacyTrapFocus === undefined ? false : !props.legacyTrapFocus),\n popoverTrigger,\n popoverSurface,\n open,\n setOpen,\n toggleOpen,\n setContextTarget,\n contextTarget,\n inline: props.inline ?? false,\n surfaceMotion: presenceMotionSlot(props.surfaceMotion, {\n elementType: PopoverSurfaceMotion,\n defaultProps: {\n visible: open,\n appear: true,\n unmountOnExit: true,\n },\n }),\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 'use no memo';\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 // eslint-disable-next-line react-hooks/immutability\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 'use no memo';\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 // eslint-disable-next-line react-hooks/immutability\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"],"names":["React","useControllableState","useEventCallback","useOnClickOutside","useOnScrollOutside","elementContains","useTimeout","useFluent_unstable","useFluent","usePositioning","resolvePositioningShorthand","mergeArrowOffset","usePositioningMouseTarget","usePositioningSlideDirection","useFocusFinders","useActivateModal","arrowHeights","popoverSurfaceBorderRadius","presenceMotionSlot","PopoverSurfaceMotion","usePopover_unstable","props","contextTarget","setContextTarget","targetDocument","positioning","handlePositionEnd","onPositioningEnd","initialState","size","children","Children","toArray","process","env","NODE_ENV","length","console","warn","popoverTrigger","undefined","popoverSurface","open","setOpenState","useOpenState","setOpenTimeout","clearOpenTimeout","setOpen","e","shouldOpen","Event","persist","type","mouseLeaveDelay","toggleOpen","useCallback","positioningRefs","usePopoverRefs","contains","element","callback","ev","refs","triggerRef","contentRef","disabled","disabledFocusOnIframe","closeOnIframeFocus","closeOnScroll","openOnContext","closeOnFocusOutside","closeOnFocusOutCallback","target","composedPath","contentElement","current","triggerElement","isOutside","useEffect","trapFocus","addEventListener","removeEventListener","findFirstFocusable","activateModal","unstable_disableAutoFocus","shouldFocusContainer","isNaN","getAttribute","firstFocusable","focus","components","surfaceMotion","inertTrapFocus","legacyTrapFocus","inline","elementType","defaultProps","visible","appear","unmountOnExit","state","onOpenChange","data","defaultState","defaultOpen","positioningOptions","position","align","arrowPadding","coverTarget","withArrow","offset","targetRef","containerRef","arrowRef"],"mappings":"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"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
export function usePopoverContextValues_unstable(state) {
|
|
4
|
+
const { appearance, arrowRef, contentRef, inline, mountNode, open, openOnContext, openOnHover, setOpen, size, toggleOpen, trapFocus, triggerRef, withArrow, inertTrapFocus } = state;
|
|
5
|
+
const popover = React.useMemo(()=>({
|
|
6
|
+
appearance,
|
|
7
|
+
arrowRef,
|
|
8
|
+
contentRef,
|
|
9
|
+
inline,
|
|
10
|
+
mountNode,
|
|
11
|
+
open,
|
|
12
|
+
openOnContext,
|
|
13
|
+
openOnHover,
|
|
14
|
+
setOpen,
|
|
15
|
+
size,
|
|
16
|
+
toggleOpen,
|
|
17
|
+
trapFocus,
|
|
18
|
+
triggerRef,
|
|
19
|
+
withArrow,
|
|
20
|
+
inertTrapFocus
|
|
21
|
+
}), [
|
|
22
|
+
appearance,
|
|
23
|
+
arrowRef,
|
|
24
|
+
contentRef,
|
|
25
|
+
inline,
|
|
26
|
+
mountNode,
|
|
27
|
+
open,
|
|
28
|
+
openOnContext,
|
|
29
|
+
openOnHover,
|
|
30
|
+
setOpen,
|
|
31
|
+
size,
|
|
32
|
+
toggleOpen,
|
|
33
|
+
trapFocus,
|
|
34
|
+
triggerRef,
|
|
35
|
+
withArrow,
|
|
36
|
+
inertTrapFocus
|
|
37
|
+
]);
|
|
38
|
+
return {
|
|
39
|
+
popover
|
|
40
|
+
};
|
|
41
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Popover/usePopoverContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { PopoverContextValue } from '../../popoverContext';\nimport type { PopoverState } from './Popover.types';\n\nexport type PopoverContextValues = {\n popover: PopoverContextValue;\n};\n\nexport function usePopoverContextValues_unstable(state: PopoverState): PopoverContextValues {\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 inertTrapFocus,\n } = state;\n\n const popover = React.useMemo<PopoverContextValue>(\n () => ({\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 inertTrapFocus,\n }),\n [\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 inertTrapFocus,\n ],\n );\n\n return { popover };\n}\n"],"names":["React","usePopoverContextValues_unstable","state","appearance","arrowRef","contentRef","inline","mountNode","open","openOnContext","openOnHover","setOpen","size","toggleOpen","trapFocus","triggerRef","withArrow","inertTrapFocus","popover","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAQ/B,OAAO,SAASC,iCAAiCC,KAAmB;IAClE,MAAM,EACJC,UAAU,EACVC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,IAAI,EACJC,aAAa,EACbC,WAAW,EACXC,OAAO,EACPC,IAAI,EACJC,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,cAAc,EACf,GAAGf;IAEJ,MAAMgB,UAAUlB,MAAMmB,OAAO,CAC3B,IAAO,CAAA;YACLhB;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QACEd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;KACD;IAGH,OAAO;QAAEC;IAAQ;AACnB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/PopoverSurface/PopoverSurface.types.ts"],"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\
|
|
1
|
+
{"version":3,"sources":["../src/components/PopoverSurface/PopoverSurface.types.ts"],"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"],"names":[],"mappings":"AAeA;;CAEC,GACD,WAMI"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { PopoverSurface } from './PopoverSurface';
|
|
2
2
|
export { renderPopoverSurface_unstable } from './renderPopoverSurface';
|
|
3
|
-
export { usePopoverSurface_unstable
|
|
3
|
+
export { usePopoverSurface_unstable } from './usePopoverSurface';
|
|
4
4
|
export { arrowHeights, popoverSurfaceClassNames, usePopoverSurfaceStyles_unstable } from './usePopoverSurfaceStyles.styles';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/PopoverSurface/index.ts"],"sourcesContent":["export { PopoverSurface } from './PopoverSurface';\nexport type {
|
|
1
|
+
{"version":3,"sources":["../src/components/PopoverSurface/index.ts"],"sourcesContent":["export { PopoverSurface } from './PopoverSurface';\nexport type { PopoverSurfaceProps, PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';\nexport { renderPopoverSurface_unstable } from './renderPopoverSurface';\nexport { usePopoverSurface_unstable } from './usePopoverSurface';\nexport {\n arrowHeights,\n popoverSurfaceClassNames,\n usePopoverSurfaceStyles_unstable,\n} from './usePopoverSurfaceStyles.styles';\n"],"names":["PopoverSurface","renderPopoverSurface_unstable","usePopoverSurface_unstable","arrowHeights","popoverSurfaceClassNames","usePopoverSurfaceStyles_unstable"],"mappings":"AAAA,SAASA,cAAc,QAAQ,mBAAmB;AAElD,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SACEC,YAAY,EACZC,wBAAwB,EACxBC,gCAAgC,QAC3B,mCAAmC"}
|