@fluentui/react-popover 9.13.1 → 9.14.0
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 +30 -2
- package/dist/index.d.ts +16 -3
- package/lib/components/Popover/Popover.types.js.map +1 -1
- package/lib/components/Popover/PopoverSurfaceMotion.js +40 -0
- package/lib/components/Popover/PopoverSurfaceMotion.js.map +1 -0
- package/lib/components/Popover/renderPopover.js +15 -3
- package/lib/components/Popover/renderPopover.js.map +1 -1
- package/lib/components/Popover/usePopover.js +21 -2
- package/lib/components/Popover/usePopover.js.map +1 -1
- package/lib/components/PopoverSurface/usePopoverSurface.js +3 -1
- package/lib/components/PopoverSurface/usePopoverSurface.js.map +1 -1
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.styles.js +3 -25
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.styles.js.map +1 -1
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.styles.raw.js +1 -2
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/Popover/Popover.types.js.map +1 -1
- package/lib-commonjs/components/Popover/PopoverSurfaceMotion.js +42 -0
- package/lib-commonjs/components/Popover/PopoverSurfaceMotion.js.map +1 -0
- package/lib-commonjs/components/Popover/renderPopover.js +15 -3
- package/lib-commonjs/components/Popover/renderPopover.js.map +1 -1
- package/lib-commonjs/components/Popover/usePopover.js +20 -1
- package/lib-commonjs/components/Popover/usePopover.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/usePopoverSurface.js +3 -1
- package/lib-commonjs/components/PopoverSurface/usePopoverSurface.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.styles.js +0 -48
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.styles.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.styles.raw.js +0 -1
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.styles.raw.js.map +1 -1
- package/package.json +11 -9
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,40 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-popover
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 03 Mar 2026 09:41:31 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.14.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.14.0)
|
|
8
|
+
|
|
9
|
+
Tue, 03 Mar 2026 09:41:31 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.13.2..@fluentui/react-popover_v9.14.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- refactor: migrate slide animation from CSS to motion components with surfaceMotion slot ([PR #35763](https://github.com/microsoft/fluentui/pull/35763) by robertpenner@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-motion to v9.13.0 ([commit](https://github.com/microsoft/fluentui/commit/81e1556b008bfbd07fe427d89af6142459d74c6f) by beachball)
|
|
16
|
+
- Bump @fluentui/react-motion-components-preview to v0.15.2 ([commit](https://github.com/microsoft/fluentui/commit/81e1556b008bfbd07fe427d89af6142459d74c6f) by beachball)
|
|
17
|
+
- Bump @fluentui/react-positioning to v9.22.0 ([commit](https://github.com/microsoft/fluentui/commit/81e1556b008bfbd07fe427d89af6142459d74c6f) by beachball)
|
|
18
|
+
|
|
19
|
+
## [9.13.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.13.2)
|
|
20
|
+
|
|
21
|
+
Wed, 25 Feb 2026 13:32:28 GMT
|
|
22
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.13.1..@fluentui/react-popover_v9.13.2)
|
|
23
|
+
|
|
24
|
+
### Patches
|
|
25
|
+
|
|
26
|
+
- Bump @fluentui/react-aria to v9.17.10 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
|
|
27
|
+
- Bump @fluentui/react-context-selector to v9.2.15 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
|
|
28
|
+
- Bump @fluentui/react-portal to v9.8.11 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
|
|
29
|
+
- Bump @fluentui/react-positioning to v9.21.0 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
|
|
30
|
+
- Bump @fluentui/react-shared-contexts to v9.26.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
|
|
31
|
+
- Bump @fluentui/react-tabster to v9.26.13 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
|
|
32
|
+
- Bump @fluentui/react-utilities to v9.26.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
|
|
33
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.1 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
|
|
34
|
+
|
|
7
35
|
## [9.13.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.13.1)
|
|
8
36
|
|
|
9
|
-
Thu, 12 Feb 2026 10:
|
|
37
|
+
Thu, 12 Feb 2026 10:46:15 GMT
|
|
10
38
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.13.0..@fluentui/react-popover_v9.13.1)
|
|
11
39
|
|
|
12
40
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -5,10 +5,11 @@ import type { ComponentState } from '@fluentui/react-utilities';
|
|
|
5
5
|
import type { ContextSelector } from '@fluentui/react-context-selector';
|
|
6
6
|
import { FC } from 'react';
|
|
7
7
|
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
8
|
-
import
|
|
8
|
+
import { JSXElement } from '@fluentui/react-utilities';
|
|
9
9
|
import type { PortalProps } from '@fluentui/react-portal';
|
|
10
10
|
import type { PositioningShorthand } from '@fluentui/react-positioning';
|
|
11
11
|
import type { PositioningVirtualElement } from '@fluentui/react-positioning';
|
|
12
|
+
import type { PresenceMotionSlotProps } from '@fluentui/react-motion';
|
|
12
13
|
import { Provider } from 'react';
|
|
13
14
|
import { ProviderProps } from 'react';
|
|
14
15
|
import * as React_2 from 'react';
|
|
@@ -19,6 +20,10 @@ import type { TriggerProps } from '@fluentui/react-utilities';
|
|
|
19
20
|
|
|
20
21
|
export declare const arrowHeights: Record<PopoverSize, number>;
|
|
21
22
|
|
|
23
|
+
declare type InternalPopoverSlots = {
|
|
24
|
+
surfaceMotion: NonNullable<Slot<PresenceMotionSlotProps>>;
|
|
25
|
+
};
|
|
26
|
+
|
|
22
27
|
/**
|
|
23
28
|
* Data attached to open/close events
|
|
24
29
|
*/
|
|
@@ -44,7 +49,7 @@ export declare type PopoverContextValue = Pick<PopoverState, 'open' | 'toggleOpe
|
|
|
44
49
|
/**
|
|
45
50
|
* Popover Props
|
|
46
51
|
*/
|
|
47
|
-
export declare type PopoverProps = Pick<PortalProps, 'mountNode'> & {
|
|
52
|
+
export declare type PopoverProps = ComponentProps<Partial<PopoverSlots>> & Pick<PortalProps, 'mountNode'> & {
|
|
48
53
|
/**
|
|
49
54
|
* A popover can appear styled with brand or inverted.
|
|
50
55
|
* When not specified, the default style is used.
|
|
@@ -163,10 +168,18 @@ export declare const PopoverProvider: Provider<PopoverContextValue> & FC<Provide
|
|
|
163
168
|
*/
|
|
164
169
|
export declare type PopoverSize = 'small' | 'medium' | 'large';
|
|
165
170
|
|
|
171
|
+
declare type PopoverSlots = {
|
|
172
|
+
/**
|
|
173
|
+
* Slot for the surface motion animation.
|
|
174
|
+
* For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs).
|
|
175
|
+
*/
|
|
176
|
+
surfaceMotion: Slot<PresenceMotionSlotProps>;
|
|
177
|
+
};
|
|
178
|
+
|
|
166
179
|
/**
|
|
167
180
|
* Popover State
|
|
168
181
|
*/
|
|
169
|
-
export declare type PopoverState = Pick<PopoverProps, 'appearance' | 'mountNode' | 'onOpenChange' | 'openOnContext' | 'openOnHover' | 'trapFocus' | 'withArrow' | 'inertTrapFocus'> & Required<Pick<PopoverProps, 'inline' | 'open'>> & Pick<PopoverProps, 'children'> & {
|
|
182
|
+
export declare type PopoverState = ComponentState<InternalPopoverSlots> & Pick<PopoverProps, 'appearance' | 'mountNode' | 'onOpenChange' | 'openOnContext' | 'openOnHover' | 'trapFocus' | 'withArrow' | 'inertTrapFocus'> & Required<Pick<PopoverProps, 'inline' | 'open'>> & Pick<PopoverProps, 'children'> & {
|
|
170
183
|
/**
|
|
171
184
|
* Ref of the pointing arrow
|
|
172
185
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Popover/Popover.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { JSXElement } 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\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
|
|
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\nexport type PopoverBaseProps = Omit<PopoverProps, 'appearance' | 'size'>;\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\nexport type PopoverBaseState = Omit<PopoverState, 'appearance' | 'components' | 'size' | 'surfaceMotion'>;\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"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';
|
|
2
|
+
import { fadeAtom, slideAtom } from '@fluentui/react-motion-components-preview';
|
|
3
|
+
import { POSITIONING_SLIDE_DIRECTION_VAR_X as slideDirectionVarX, POSITIONING_SLIDE_DIRECTION_VAR_Y as slideDirectionVarY } from '@fluentui/react-positioning';
|
|
4
|
+
// Shared timing constants for the enter animation.
|
|
5
|
+
const duration = motionTokens.durationSlower;
|
|
6
|
+
const easing = motionTokens.curveDecelerateMid;
|
|
7
|
+
/**
|
|
8
|
+
* Default `surfaceMotion` slot for `<Popover>`.
|
|
9
|
+
*
|
|
10
|
+
* Enter-only animation combining a fade and a direction-aware slide.
|
|
11
|
+
* The slide reads CSS variables set by `usePositioningSlideDirection` and scales
|
|
12
|
+
* them by `distance` pixels. There is no exit animation; the surface unmounts immediately.
|
|
13
|
+
*
|
|
14
|
+
* @param distance - Travel distance (px) for the enter slide. Defaults to `10`.
|
|
15
|
+
*/ export const PopoverSurfaceMotion = createPresenceComponent(({ distance = 10 })=>({
|
|
16
|
+
enter: [
|
|
17
|
+
fadeAtom({
|
|
18
|
+
duration,
|
|
19
|
+
easing,
|
|
20
|
+
direction: 'enter'
|
|
21
|
+
}),
|
|
22
|
+
{
|
|
23
|
+
// slideAtom produces translate keyframes from `outX`/`outY` → `0px`.
|
|
24
|
+
// The `outX`/`outY` values read the positioning-provided CSS variables and scale
|
|
25
|
+
// them by `distance` so the surface slides in from the correct direction.
|
|
26
|
+
...slideAtom({
|
|
27
|
+
duration,
|
|
28
|
+
easing,
|
|
29
|
+
direction: 'enter',
|
|
30
|
+
outX: `calc(var(${slideDirectionVarX}, 0px) * ${distance})`,
|
|
31
|
+
outY: `calc(var(${slideDirectionVarY}, 0px) * ${distance})`
|
|
32
|
+
}),
|
|
33
|
+
// 'accumulate' compositing adds this effect's transform on top of the element's
|
|
34
|
+
// existing transform, preserving any transform applied by the positioning engine.
|
|
35
|
+
composite: 'accumulate'
|
|
36
|
+
}
|
|
37
|
+
],
|
|
38
|
+
// No exit animation — the surface unmounts immediately on close.
|
|
39
|
+
exit: []
|
|
40
|
+
}));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Popover/PopoverSurfaceMotion.ts"],"sourcesContent":["import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';\nimport { fadeAtom, slideAtom } from '@fluentui/react-motion-components-preview';\nimport {\n POSITIONING_SLIDE_DIRECTION_VAR_X as slideDirectionVarX,\n POSITIONING_SLIDE_DIRECTION_VAR_Y as slideDirectionVarY,\n} from '@fluentui/react-positioning';\n\n// Shared timing constants for the enter animation.\nconst duration = motionTokens.durationSlower;\nconst easing = motionTokens.curveDecelerateMid;\n\n/**\n * Default `surfaceMotion` slot for `<Popover>`.\n *\n * Enter-only animation combining a fade and a direction-aware slide.\n * The slide reads CSS variables set by `usePositioningSlideDirection` and scales\n * them by `distance` pixels. There is no exit animation; the surface unmounts immediately.\n *\n * @param distance - Travel distance (px) for the enter slide. Defaults to `10`.\n */\nexport const PopoverSurfaceMotion = createPresenceComponent(({ distance = 10 }: { distance?: number }) => ({\n enter: [\n fadeAtom({ duration, easing, direction: 'enter' }),\n {\n // slideAtom produces translate keyframes from `outX`/`outY` → `0px`.\n // The `outX`/`outY` values read the positioning-provided CSS variables and scale\n // them by `distance` so the surface slides in from the correct direction.\n ...slideAtom({\n duration,\n easing,\n direction: 'enter',\n outX: `calc(var(${slideDirectionVarX}, 0px) * ${distance})`,\n outY: `calc(var(${slideDirectionVarY}, 0px) * ${distance})`,\n }),\n // 'accumulate' compositing adds this effect's transform on top of the element's\n // existing transform, preserving any transform applied by the positioning engine.\n composite: 'accumulate',\n },\n ],\n // No exit animation — the surface unmounts immediately on close.\n exit: [],\n}));\n"],"names":["createPresenceComponent","motionTokens","fadeAtom","slideAtom","POSITIONING_SLIDE_DIRECTION_VAR_X","slideDirectionVarX","POSITIONING_SLIDE_DIRECTION_VAR_Y","slideDirectionVarY","duration","durationSlower","easing","curveDecelerateMid","PopoverSurfaceMotion","distance","enter","direction","outX","outY","composite","exit"],"mappings":"AAAA,SAASA,uBAAuB,EAAEC,YAAY,QAAQ,yBAAyB;AAC/E,SAASC,QAAQ,EAAEC,SAAS,QAAQ,4CAA4C;AAChF,SACEC,qCAAqCC,kBAAkB,EACvDC,qCAAqCC,kBAAkB,QAClD,8BAA8B;AAErC,mDAAmD;AACnD,MAAMC,WAAWP,aAAaQ,cAAc;AAC5C,MAAMC,SAAST,aAAaU,kBAAkB;AAE9C;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuBZ,wBAAwB,CAAC,EAAEa,WAAW,EAAE,EAAyB,GAAM,CAAA;QACzGC,OAAO;YACLZ,SAAS;gBAAEM;gBAAUE;gBAAQK,WAAW;YAAQ;YAChD;gBACE,qEAAqE;gBACrE,iFAAiF;gBACjF,0EAA0E;gBAC1E,GAAGZ,UAAU;oBACXK;oBACAE;oBACAK,WAAW;oBACXC,MAAM,CAAC,SAAS,EAAEX,mBAAmB,SAAS,EAAEQ,SAAS,CAAC,CAAC;oBAC3DI,MAAM,CAAC,SAAS,EAAEV,mBAAmB,SAAS,EAAEM,SAAS,CAAC,CAAC;gBAC7D,EAAE;gBACF,gFAAgF;gBAChF,kFAAkF;gBAClFK,WAAW;YACb;SACD;QACD,iEAAiE;QACjEC,MAAM,EAAE;IACV,CAAA,GAAI"}
|
|
@@ -1,10 +1,14 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
|
|
1
2
|
import * as React from 'react';
|
|
3
|
+
import { assertSlots } from '@fluentui/react-utilities';
|
|
4
|
+
import { MotionRefForwarder } from '@fluentui/react-motion';
|
|
2
5
|
import { PopoverContext } from '../../popoverContext';
|
|
3
6
|
/**
|
|
4
7
|
* Render the final JSX of Popover
|
|
5
8
|
*/ export const renderPopover_unstable = (state)=>{
|
|
9
|
+
assertSlots(state);
|
|
6
10
|
const { appearance, arrowRef, contentRef, inline, mountNode, open, openOnContext, openOnHover, setOpen, size, toggleOpen, trapFocus, triggerRef, withArrow, inertTrapFocus } = state;
|
|
7
|
-
return /*#__PURE__*/
|
|
11
|
+
return /*#__PURE__*/ _jsxs(PopoverContext.Provider, {
|
|
8
12
|
value: {
|
|
9
13
|
appearance,
|
|
10
14
|
arrowRef,
|
|
@@ -21,6 +25,14 @@ import { PopoverContext } from '../../popoverContext';
|
|
|
21
25
|
trapFocus,
|
|
22
26
|
inertTrapFocus,
|
|
23
27
|
withArrow
|
|
24
|
-
}
|
|
25
|
-
|
|
28
|
+
},
|
|
29
|
+
children: [
|
|
30
|
+
state.popoverTrigger,
|
|
31
|
+
state.popoverSurface && /*#__PURE__*/ _jsx(state.surfaceMotion, {
|
|
32
|
+
children: /*#__PURE__*/ _jsx(MotionRefForwarder, {
|
|
33
|
+
children: state.popoverSurface
|
|
34
|
+
})
|
|
35
|
+
})
|
|
36
|
+
]
|
|
37
|
+
});
|
|
26
38
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Popover/renderPopover.tsx"],"sourcesContent":["
|
|
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 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 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 inertTrapFocus,\n withArrow,\n }}\n >\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","renderPopover_unstable","state","appearance","arrowRef","contentRef","inline","mountNode","open","openOnContext","openOnHover","setOpen","size","toggleOpen","trapFocus","triggerRef","withArrow","inertTrapFocus","Provider","value","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,QAAQ,uBAAuB;AAGtD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC;IACrCJ,YAAkCI;IAElC,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,qBACE,MAACF,eAAekB,QAAQ;QACtBC,OAAO;YACLhB;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAE;YACAE;YACAH;YACAE;YACAG;YACAD;QACF;;YAECd,MAAMkB,cAAc;YACpBlB,MAAMmB,cAAc,kBACnB,KAACnB,MAAMoB,aAAa;0BAClB,cAAA,KAACvB;8BAGEG,MAAMmB,cAAc;;;;;AAMjC,EAAE"}
|
|
@@ -2,10 +2,12 @@
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { useControllableState, useEventCallback, useOnClickOutside, useOnScrollOutside, elementContains, useTimeout } from '@fluentui/react-utilities';
|
|
4
4
|
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
5
|
-
import { usePositioning, resolvePositioningShorthand, mergeArrowOffset, usePositioningMouseTarget } from '@fluentui/react-positioning';
|
|
5
|
+
import { usePositioning, resolvePositioningShorthand, mergeArrowOffset, usePositioningMouseTarget, usePositioningSlideDirection } from '@fluentui/react-positioning';
|
|
6
6
|
import { useFocusFinders, useActivateModal } from '@fluentui/react-tabster';
|
|
7
7
|
import { arrowHeights } from '../PopoverSurface/index';
|
|
8
8
|
import { popoverSurfaceBorderRadius } from './constants';
|
|
9
|
+
import { presenceMotionSlot } from '@fluentui/react-motion';
|
|
10
|
+
import { PopoverSurfaceMotion } from './PopoverSurfaceMotion';
|
|
9
11
|
/**
|
|
10
12
|
* Create the state required to render Popover.
|
|
11
13
|
*
|
|
@@ -17,10 +19,16 @@ import { popoverSurfaceBorderRadius } from './constants';
|
|
|
17
19
|
const { appearance, size = 'medium' } = props;
|
|
18
20
|
const positioning = resolvePositioningShorthand(props.positioning);
|
|
19
21
|
const withArrow = props.withArrow && !positioning.coverTarget;
|
|
22
|
+
const { targetDocument } = useFluent();
|
|
23
|
+
const handlePositionEnd = usePositioningSlideDirection({
|
|
24
|
+
targetDocument,
|
|
25
|
+
onPositioningEnd: positioning.onPositioningEnd
|
|
26
|
+
});
|
|
20
27
|
const state = usePopoverBase_unstable({
|
|
21
28
|
...props,
|
|
22
29
|
positioning: {
|
|
23
30
|
...positioning,
|
|
31
|
+
onPositioningEnd: handlePositionEnd,
|
|
24
32
|
// Update the offset with the arrow size only when it's available
|
|
25
33
|
...withArrow ? {
|
|
26
34
|
offset: mergeArrowOffset(positioning.offset, arrowHeights[size])
|
|
@@ -28,9 +36,20 @@ import { popoverSurfaceBorderRadius } from './constants';
|
|
|
28
36
|
}
|
|
29
37
|
});
|
|
30
38
|
return {
|
|
39
|
+
components: {
|
|
40
|
+
surfaceMotion: PopoverSurfaceMotion
|
|
41
|
+
},
|
|
31
42
|
appearance,
|
|
32
43
|
size,
|
|
33
|
-
...state
|
|
44
|
+
...state,
|
|
45
|
+
surfaceMotion: presenceMotionSlot(props.surfaceMotion, {
|
|
46
|
+
elementType: PopoverSurfaceMotion,
|
|
47
|
+
defaultProps: {
|
|
48
|
+
visible: state.open,
|
|
49
|
+
appear: true,
|
|
50
|
+
unmountOnExit: true
|
|
51
|
+
}
|
|
52
|
+
})
|
|
34
53
|
};
|
|
35
54
|
};
|
|
36
55
|
/**
|
|
@@ -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} 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';\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 state = usePopoverBase_unstable({\n ...props,\n positioning: {\n ...positioning,\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 appearance,\n size,\n ...state,\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","useFocusFinders","useActivateModal","arrowHeights","popoverSurfaceBorderRadius","usePopover_unstable","props","appearance","size","positioning","withArrow","coverTarget","state","usePopoverBase_unstable","offset","contextTarget","setContextTarget","initialState","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","targetDocument","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 {\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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"}
|
|
@@ -3,6 +3,7 @@ import * as React from 'react';
|
|
|
3
3
|
import { useMergedRefs, slot } from '@fluentui/react-utilities';
|
|
4
4
|
import { useModalAttributes } from '@fluentui/react-tabster';
|
|
5
5
|
import { usePopoverContext_unstable } from '../../popoverContext';
|
|
6
|
+
import { useMotionForwardedRef } from '@fluentui/react-motion';
|
|
6
7
|
/**
|
|
7
8
|
* Create the state required to render PopoverSurface.
|
|
8
9
|
*
|
|
@@ -14,7 +15,8 @@ import { usePopoverContext_unstable } from '../../popoverContext';
|
|
|
14
15
|
*/ export const usePopoverSurface_unstable = (props, ref)=>{
|
|
15
16
|
const size = usePopoverContext_unstable((context)=>context.size);
|
|
16
17
|
const appearance = usePopoverContext_unstable((context)=>context.appearance);
|
|
17
|
-
const
|
|
18
|
+
const motionForwardedRef = useMotionForwardedRef();
|
|
19
|
+
const state = usePopoverSurfaceBase_unstable(props, useMergedRefs(ref, motionForwardedRef));
|
|
18
20
|
return {
|
|
19
21
|
appearance,
|
|
20
22
|
size,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/PopoverSurface/usePopoverSurface.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext_unstable } from '../../popoverContext';\nimport type {\n PopoverSurfaceProps,\n PopoverSurfaceState,\n PopoverSurfaceBaseProps,\n PopoverSurfaceBaseState,\n} from './PopoverSurface.types';\n\n/**\n * Create the state required to render PopoverSurface.\n *\n * The returned state can be modified with hooks such as usePopoverSurfaceStyles_unstable,\n * before being passed to renderPopoverSurface_unstable.\n *\n * @param props - props from this instance of PopoverSurface\n * @param ref - reference to root HTMLDivElement of PopoverSurface\n */\nexport const usePopoverSurface_unstable = (\n props: PopoverSurfaceProps,\n ref: React.Ref<HTMLDivElement>,\n): PopoverSurfaceState => {\n const size = usePopoverContext_unstable(context => context.size);\n const appearance = usePopoverContext_unstable(context => context.appearance);\n const state = usePopoverSurfaceBase_unstable(props, ref);\n\n return {\n appearance,\n size,\n ...state,\n };\n};\n\n/**\n * Base hook that builds PopoverSurface state for behavior and structure only.\n *\n * @internal\n * @param props - User provided props to the PopoverSurface component.\n * @param ref - User provided ref to be passed to the PopoverSurface component.\n */\nexport const usePopoverSurfaceBase_unstable = (\n props: PopoverSurfaceBaseProps,\n ref: React.Ref<HTMLDivElement>,\n): PopoverSurfaceBaseState => {\n const contentRef = usePopoverContext_unstable(context => context.contentRef);\n const openOnHover = usePopoverContext_unstable(context => context.openOnHover);\n const setOpen = usePopoverContext_unstable(context => context.setOpen);\n const mountNode = usePopoverContext_unstable(context => context.mountNode);\n const arrowRef = usePopoverContext_unstable(context => context.arrowRef);\n const withArrow = usePopoverContext_unstable(context => context.withArrow);\n const trapFocus = usePopoverContext_unstable(context => context.trapFocus);\n const inertTrapFocus = usePopoverContext_unstable(context => context.inertTrapFocus);\n const inline = usePopoverContext_unstable(context => context.inline);\n const { modalAttributes } = useModalAttributes({\n trapFocus,\n legacyTrapFocus: !inertTrapFocus,\n alwaysFocusable: !trapFocus,\n });\n\n const state: PopoverSurfaceBaseState = {\n inline,\n withArrow,\n arrowRef,\n mountNode,\n components: {\n root: 'div',\n },\n root: slot.always(\n {\n ref: useMergedRefs(ref, contentRef) as React.Ref<HTMLDivElement>,\n role: trapFocus ? 'dialog' : 'group',\n 'aria-modal': trapFocus ? true : undefined,\n ...modalAttributes,\n ...props,\n },\n { elementType: 'div' },\n ),\n };\n\n const {\n onMouseEnter: onMouseEnterOriginal,\n onMouseLeave: onMouseLeaveOriginal,\n onKeyDown: onKeyDownOriginal,\n } = state.root;\n state.root.onMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {\n if (openOnHover) {\n setOpen(e, true);\n }\n\n onMouseEnterOriginal?.(e);\n };\n\n state.root.onMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {\n if (openOnHover) {\n setOpen(e, false);\n }\n\n onMouseLeaveOriginal?.(e);\n };\n\n state.root.onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n // only close if the event happened inside the current popover\n // If using a stack of inline popovers, the user should call `stopPropagation` to avoid dismissing the entire stack\n if (e.key === 'Escape' && contentRef.current?.contains(e.target as HTMLDivElement)) {\n e.preventDefault();\n setOpen(e, false);\n }\n\n onKeyDownOriginal?.(e);\n };\n\n return state;\n};\n"],"names":["React","useMergedRefs","slot","useModalAttributes","usePopoverContext_unstable","usePopoverSurface_unstable","props","ref","size","context","appearance","state","usePopoverSurfaceBase_unstable","contentRef","openOnHover","setOpen","mountNode","arrowRef","withArrow","trapFocus","inertTrapFocus","inline","modalAttributes","legacyTrapFocus","alwaysFocusable","components","root","always","role","undefined","elementType","onMouseEnter","onMouseEnterOriginal","onMouseLeave","onMouseLeaveOriginal","onKeyDown","onKeyDownOriginal","e","key","current","contains","target","preventDefault"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAChE,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,0BAA0B,QAAQ,uBAAuB;
|
|
1
|
+
{"version":3,"sources":["../src/components/PopoverSurface/usePopoverSurface.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext_unstable } from '../../popoverContext';\nimport type {\n PopoverSurfaceProps,\n PopoverSurfaceState,\n PopoverSurfaceBaseProps,\n PopoverSurfaceBaseState,\n} from './PopoverSurface.types';\nimport { useMotionForwardedRef } from '@fluentui/react-motion';\n\n/**\n * Create the state required to render PopoverSurface.\n *\n * The returned state can be modified with hooks such as usePopoverSurfaceStyles_unstable,\n * before being passed to renderPopoverSurface_unstable.\n *\n * @param props - props from this instance of PopoverSurface\n * @param ref - reference to root HTMLDivElement of PopoverSurface\n */\nexport const usePopoverSurface_unstable = (\n props: PopoverSurfaceProps,\n ref: React.Ref<HTMLDivElement>,\n): PopoverSurfaceState => {\n const size = usePopoverContext_unstable(context => context.size);\n const appearance = usePopoverContext_unstable(context => context.appearance);\n const motionForwardedRef = useMotionForwardedRef();\n const state = usePopoverSurfaceBase_unstable(props, useMergedRefs(ref, motionForwardedRef));\n\n return {\n appearance,\n size,\n ...state,\n };\n};\n\n/**\n * Base hook that builds PopoverSurface state for behavior and structure only.\n *\n * @internal\n * @param props - User provided props to the PopoverSurface component.\n * @param ref - User provided ref to be passed to the PopoverSurface component.\n */\nexport const usePopoverSurfaceBase_unstable = (\n props: PopoverSurfaceBaseProps,\n ref: React.Ref<HTMLDivElement>,\n): PopoverSurfaceBaseState => {\n const contentRef = usePopoverContext_unstable(context => context.contentRef);\n const openOnHover = usePopoverContext_unstable(context => context.openOnHover);\n const setOpen = usePopoverContext_unstable(context => context.setOpen);\n const mountNode = usePopoverContext_unstable(context => context.mountNode);\n const arrowRef = usePopoverContext_unstable(context => context.arrowRef);\n const withArrow = usePopoverContext_unstable(context => context.withArrow);\n const trapFocus = usePopoverContext_unstable(context => context.trapFocus);\n const inertTrapFocus = usePopoverContext_unstable(context => context.inertTrapFocus);\n const inline = usePopoverContext_unstable(context => context.inline);\n const { modalAttributes } = useModalAttributes({\n trapFocus,\n legacyTrapFocus: !inertTrapFocus,\n alwaysFocusable: !trapFocus,\n });\n\n const state: PopoverSurfaceBaseState = {\n inline,\n withArrow,\n arrowRef,\n mountNode,\n components: {\n root: 'div',\n },\n root: slot.always(\n {\n ref: useMergedRefs(ref, contentRef) as React.Ref<HTMLDivElement>,\n role: trapFocus ? 'dialog' : 'group',\n 'aria-modal': trapFocus ? true : undefined,\n ...modalAttributes,\n ...props,\n },\n { elementType: 'div' },\n ),\n };\n\n const {\n onMouseEnter: onMouseEnterOriginal,\n onMouseLeave: onMouseLeaveOriginal,\n onKeyDown: onKeyDownOriginal,\n } = state.root;\n state.root.onMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {\n if (openOnHover) {\n setOpen(e, true);\n }\n\n onMouseEnterOriginal?.(e);\n };\n\n state.root.onMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {\n if (openOnHover) {\n setOpen(e, false);\n }\n\n onMouseLeaveOriginal?.(e);\n };\n\n state.root.onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n // only close if the event happened inside the current popover\n // If using a stack of inline popovers, the user should call `stopPropagation` to avoid dismissing the entire stack\n if (e.key === 'Escape' && contentRef.current?.contains(e.target as HTMLDivElement)) {\n e.preventDefault();\n setOpen(e, false);\n }\n\n onKeyDownOriginal?.(e);\n };\n\n return state;\n};\n"],"names":["React","useMergedRefs","slot","useModalAttributes","usePopoverContext_unstable","useMotionForwardedRef","usePopoverSurface_unstable","props","ref","size","context","appearance","motionForwardedRef","state","usePopoverSurfaceBase_unstable","contentRef","openOnHover","setOpen","mountNode","arrowRef","withArrow","trapFocus","inertTrapFocus","inline","modalAttributes","legacyTrapFocus","alwaysFocusable","components","root","always","role","undefined","elementType","onMouseEnter","onMouseEnterOriginal","onMouseLeave","onMouseLeaveOriginal","onKeyDown","onKeyDownOriginal","e","key","current","contains","target","preventDefault"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAChE,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,0BAA0B,QAAQ,uBAAuB;AAOlE,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,OAAOL,2BAA2BM,CAAAA,UAAWA,QAAQD,IAAI;IAC/D,MAAME,aAAaP,2BAA2BM,CAAAA,UAAWA,QAAQC,UAAU;IAC3E,MAAMC,qBAAqBP;IAC3B,MAAMQ,QAAQC,+BAA+BP,OAAON,cAAcO,KAAKI;IAEvE,OAAO;QACLD;QACAF;QACA,GAAGI,KAAK;IACV;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMC,iCAAiC,CAC5CP,OACAC;IAEA,MAAMO,aAAaX,2BAA2BM,CAAAA,UAAWA,QAAQK,UAAU;IAC3E,MAAMC,cAAcZ,2BAA2BM,CAAAA,UAAWA,QAAQM,WAAW;IAC7E,MAAMC,UAAUb,2BAA2BM,CAAAA,UAAWA,QAAQO,OAAO;IACrE,MAAMC,YAAYd,2BAA2BM,CAAAA,UAAWA,QAAQQ,SAAS;IACzE,MAAMC,WAAWf,2BAA2BM,CAAAA,UAAWA,QAAQS,QAAQ;IACvE,MAAMC,YAAYhB,2BAA2BM,CAAAA,UAAWA,QAAQU,SAAS;IACzE,MAAMC,YAAYjB,2BAA2BM,CAAAA,UAAWA,QAAQW,SAAS;IACzE,MAAMC,iBAAiBlB,2BAA2BM,CAAAA,UAAWA,QAAQY,cAAc;IACnF,MAAMC,SAASnB,2BAA2BM,CAAAA,UAAWA,QAAQa,MAAM;IACnE,MAAM,EAAEC,eAAe,EAAE,GAAGrB,mBAAmB;QAC7CkB;QACAI,iBAAiB,CAACH;QAClBI,iBAAiB,CAACL;IACpB;IAEA,MAAMR,QAAiC;QACrCU;QACAH;QACAD;QACAD;QACAS,YAAY;YACVC,MAAM;QACR;QACAA,MAAM1B,KAAK2B,MAAM,CACf;YACErB,KAAKP,cAAcO,KAAKO;YACxBe,MAAMT,YAAY,WAAW;YAC7B,cAAcA,YAAY,OAAOU;YACjC,GAAGP,eAAe;YAClB,GAAGjB,KAAK;QACV,GACA;YAAEyB,aAAa;QAAM;IAEzB;IAEA,MAAM,EACJC,cAAcC,oBAAoB,EAClCC,cAAcC,oBAAoB,EAClCC,WAAWC,iBAAiB,EAC7B,GAAGzB,MAAMe,IAAI;IACdf,MAAMe,IAAI,CAACK,YAAY,GAAG,CAACM;QACzB,IAAIvB,aAAa;YACfC,QAAQsB,GAAG;QACb;QAEAL,iCAAAA,2CAAAA,qBAAuBK;IACzB;IAEA1B,MAAMe,IAAI,CAACO,YAAY,GAAG,CAACI;QACzB,IAAIvB,aAAa;YACfC,QAAQsB,GAAG;QACb;QAEAH,iCAAAA,2CAAAA,qBAAuBG;IACzB;IAEA1B,MAAMe,IAAI,CAACS,SAAS,GAAG,CAACE;YAGIxB;QAF1B,8DAA8D;QAC9D,mHAAmH;QACnH,IAAIwB,EAAEC,GAAG,KAAK,cAAYzB,sBAAAA,WAAW0B,OAAO,cAAlB1B,0CAAAA,oBAAoB2B,QAAQ,CAACH,EAAEI,MAAM,IAAqB;YAClFJ,EAAEK,cAAc;YAChB3B,QAAQsB,GAAG;QACb;QAEAD,8BAAAA,wCAAAA,kBAAoBC;IACtB;IAEA,OAAO1B;AACT,EAAE"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
3
|
import { __styles, mergeClasses } from '@griffel/react';
|
|
4
|
-
import { createArrowHeightStyles, createArrowStyles
|
|
4
|
+
import { createArrowHeightStyles, createArrowStyles } from '@fluentui/react-positioning';
|
|
5
5
|
import { tokens, typographyStyles } from '@fluentui/react-theme';
|
|
6
6
|
export const popoverSurfaceClassNames = {
|
|
7
7
|
root: 'fui-PopoverSurface'
|
|
@@ -44,21 +44,6 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
44
44
|
Be2twd7: "fkhj508",
|
|
45
45
|
Bhrd7zp: "figsok6",
|
|
46
46
|
Bg96gwp: "f1i3iumi",
|
|
47
|
-
B93otf3: "f18k4bn6",
|
|
48
|
-
vin17d: "fo1kyvf",
|
|
49
|
-
Ezkn3b: "fetxo7e",
|
|
50
|
-
nyiy2g: "f8x1vz1",
|
|
51
|
-
swvrvq: "f8g0anz",
|
|
52
|
-
Bkovbt3: "fezwn9i",
|
|
53
|
-
hgjdhn: "fz5efge",
|
|
54
|
-
fsy9dk: "f1ydixl4",
|
|
55
|
-
B3ogreh: "f8dgqj5",
|
|
56
|
-
jv49x5: "fnyfnr8",
|
|
57
|
-
Bk7o48c: "fgw77r4",
|
|
58
|
-
Bv12yb3: "f1noc5he",
|
|
59
|
-
i09l9u: "f1k46bua",
|
|
60
|
-
Bcrj8ia: "f1lhuzxm",
|
|
61
|
-
Bmmhre5: "f1f9qikc",
|
|
62
47
|
Bhu2qc9: "fymb6k8"
|
|
63
48
|
},
|
|
64
49
|
inline: {
|
|
@@ -154,7 +139,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
154
139
|
p: -1
|
|
155
140
|
}], [".f9ggezi{border:1px solid var(--colorTransparentStroke);}", {
|
|
156
141
|
p: -2
|
|
157
|
-
}], ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".
|
|
142
|
+
}], ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fymb6k8{filter:drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 8px 16px var(--colorNeutralShadowKey));}", ".f19g0ac{z-index:1;}", ".fg3r6xk{background-color:var(--colorNeutralBackgroundStatic);}", ".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", [".f1sy4kr4{padding:12px;}", {
|
|
158
143
|
p: -1
|
|
159
144
|
}], [".f4zyqsv{padding:16px;}", {
|
|
160
145
|
p: -1
|
|
@@ -164,14 +149,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
164
149
|
p: -1
|
|
165
150
|
}], ".f9mhzq7::before{width:100%;}", ".fr6rhvx::before{height:100%;}", [".f1kc0wz4::before{border:1px solid var(--colorTransparentStroke);}", {
|
|
166
151
|
p: -2
|
|
167
|
-
}], ".fgq90dz::before{border-bottom-left-radius:var(--borderRadiusSmall);}", ".fq0y47f::before{clip-path:polygon(0% 0%, 100% 100%, 0% 100%);}", "[data-popper-placement^=\"top\"] .f1pwrbz6{bottom:var(--fui-positioning-arrow-offset);}", "[data-popper-placement^=\"top\"] .f1hxxcvm{--fui-positioning-arrow-angle:-45deg;}", "[data-popper-placement^=\"right\"] .fw8rgyo{left:var(--fui-positioning-arrow-offset);}", "[data-popper-placement^=\"right\"] .f1wnzycx{--fui-positioning-arrow-angle:45deg;}", "[data-popper-placement^=\"bottom\"] .f1730wal{top:var(--fui-positioning-arrow-offset);}", "[data-popper-placement^=\"bottom\"] .f1fy4ixr{--fui-positioning-arrow-angle:135deg;}", "[data-popper-placement^=\"left\"] .fobkauc{right:var(--fui-positioning-arrow-offset);}", "[data-popper-placement^=\"left\"] .f16bqv1l{--fui-positioning-arrow-angle:225deg;}"]
|
|
168
|
-
k: ["@keyframes f1m0q9mo{from{opacity:-1;}to{opacity:0;}}", "@keyframes f79suad{from{transform:translate(var(--fui-positioning-slide-distance-x), var(--fui-positioning-slide-distance-y));}}"],
|
|
169
|
-
m: [["@media (prefers-reduced-motion){.f1k46bua[data-popper-placement]{animation-duration:1ms;}}", {
|
|
170
|
-
m: "(prefers-reduced-motion)"
|
|
171
|
-
}], ["@media (prefers-reduced-motion){.f1lhuzxm[data-popper-placement]{animation-name:f1m0q9mo;}}", {
|
|
172
|
-
m: "(prefers-reduced-motion)"
|
|
173
|
-
}]],
|
|
174
|
-
t: ["@supports not (animation-composition: accumulate){.f1f9qikc[data-popper-placement]{animation-name:f1m0q9mo;}}"]
|
|
152
|
+
}], ".fgq90dz::before{border-bottom-left-radius:var(--borderRadiusSmall);}", ".fq0y47f::before{clip-path:polygon(0% 0%, 100% 100%, 0% 100%);}", "[data-popper-placement^=\"top\"] .f1pwrbz6{bottom:var(--fui-positioning-arrow-offset);}", "[data-popper-placement^=\"top\"] .f1hxxcvm{--fui-positioning-arrow-angle:-45deg;}", "[data-popper-placement^=\"right\"] .fw8rgyo{left:var(--fui-positioning-arrow-offset);}", "[data-popper-placement^=\"right\"] .f1wnzycx{--fui-positioning-arrow-angle:45deg;}", "[data-popper-placement^=\"bottom\"] .f1730wal{top:var(--fui-positioning-arrow-offset);}", "[data-popper-placement^=\"bottom\"] .f1fy4ixr{--fui-positioning-arrow-angle:135deg;}", "[data-popper-placement^=\"left\"] .fobkauc{right:var(--fui-positioning-arrow-offset);}", "[data-popper-placement^=\"left\"] .f16bqv1l{--fui-positioning-arrow-angle:225deg;}"]
|
|
175
153
|
});
|
|
176
154
|
/**
|
|
177
155
|
* Apply styling to the PopoverSurface slots based on the state
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","createArrowHeightStyles","createArrowStyles","
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","createArrowHeightStyles","createArrowStyles","tokens","typographyStyles","popoverSurfaceClassNames","root","arrowHeights","small","medium","large","useStyles","sj55zd","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Bhu2qc9","inline","Bj3rh1h","inverted","brand","smallPadding","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","mediumPadding","largePadding","smallArrow","rhnwrx","Bdy53xb","mediumLargeArrow","arrow","B7ck84d","qhf8xq","B2eet1l","Bz10aip","Bqenvij","a9b677","Ftih45","Br0sdwz","cmx5o7","susq4k","Biibvgv","Bicfajf","qehafq","Brs5u8j","Ccq8qp","Baz25je","Bcgcnre","Bqjgrrk","qa3bma","y0oebl","Biqmznv","Bm6vgfq","Bbv0w2i","uvfttm","eqrjj","Bk5zm6e","m598lv","B4f6apu","ydt019","Bq4z7u6","Bdkvgpv","B0qfbqy","kj8mxx","r59vdv","Bkw5xw4","hl6cv3","aea9ga","yayu3t","Bhsv975","rhl9o9","B7gxrvb","B6q6orb","B0lu1f8","d","p","usePopoverSurfaceStyles_unstable","state","styles","className","size","appearance","arrowClassName"],"sources":["usePopoverSurfaceStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createArrowHeightStyles, createArrowStyles } from '@fluentui/react-positioning';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const popoverSurfaceClassNames = {\n root: 'fui-PopoverSurface'\n};\nexport const arrowHeights = {\n small: 6,\n medium: 8,\n large: 8\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n borderRadius: tokens.borderRadiusMedium,\n border: `1px solid ${tokens.colorTransparentStroke}`,\n ...typographyStyles.body1,\n // TODO need to add versions of tokens.alias.shadow.shadow16, etc. that work with filter\n filter: `drop-shadow(0 0 2px ${tokens.colorNeutralShadowAmbient}) ` + `drop-shadow(0 8px 16px ${tokens.colorNeutralShadowKey})`\n },\n inline: {\n // When rendering inline, the PopoverSurface will be rendered under relatively positioned elements such as Input.\n // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n zIndex: 1\n },\n inverted: {\n backgroundColor: tokens.colorNeutralBackgroundStatic,\n color: tokens.colorNeutralForegroundStaticInverted\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand\n },\n smallPadding: {\n padding: '12px'\n },\n mediumPadding: {\n padding: '16px'\n },\n largePadding: {\n padding: '20px'\n },\n smallArrow: createArrowHeightStyles(arrowHeights.small),\n mediumLargeArrow: createArrowHeightStyles(arrowHeights.medium),\n arrow: createArrowStyles({\n arrowHeight: undefined\n })\n});\n/**\n * Apply styling to the PopoverSurface slots based on the state\n */ export const usePopoverSurfaceStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(popoverSurfaceClassNames.root, styles.root, state.inline && styles.inline, state.size === 'small' && styles.smallPadding, state.size === 'medium' && styles.mediumPadding, state.size === 'large' && styles.largePadding, state.appearance === 'inverted' && styles.inverted, state.appearance === 'brand' && styles.brand, state.root.className);\n state.arrowClassName = mergeClasses(styles.arrow, state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow);\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { makeStyles, mergeClasses } from '@griffel/react';
|
|
3
|
-
import { createArrowHeightStyles, createArrowStyles
|
|
3
|
+
import { createArrowHeightStyles, createArrowStyles } from '@fluentui/react-positioning';
|
|
4
4
|
import { tokens, typographyStyles } from '@fluentui/react-theme';
|
|
5
5
|
export const popoverSurfaceClassNames = {
|
|
6
6
|
root: 'fui-PopoverSurface'
|
|
@@ -19,7 +19,6 @@ export const arrowHeights = {
|
|
|
19
19
|
borderRadius: tokens.borderRadiusMedium,
|
|
20
20
|
border: `1px solid ${tokens.colorTransparentStroke}`,
|
|
21
21
|
...typographyStyles.body1,
|
|
22
|
-
...createSlideStyles(10),
|
|
23
22
|
// TODO need to add versions of tokens.alias.shadow.shadow16, etc. that work with filter
|
|
24
23
|
filter: `drop-shadow(0 0 2px ${tokens.colorNeutralShadowAmbient}) ` + `drop-shadow(0 8px 16px ${tokens.colorNeutralShadowKey})`
|
|
25
24
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/PopoverSurface/usePopoverSurfaceStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createArrowHeightStyles, createArrowStyles
|
|
1
|
+
{"version":3,"sources":["../src/components/PopoverSurface/usePopoverSurfaceStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createArrowHeightStyles, createArrowStyles } from '@fluentui/react-positioning';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { PopoverSize } from '../Popover/Popover.types';\nimport type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const popoverSurfaceClassNames: SlotClassNames<PopoverSurfaceSlots> = {\n root: 'fui-PopoverSurface',\n};\n\nexport const arrowHeights: Record<PopoverSize, number> = {\n small: 6,\n medium: 8,\n large: 8,\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n borderRadius: tokens.borderRadiusMedium,\n border: `1px solid ${tokens.colorTransparentStroke}`,\n ...typographyStyles.body1,\n\n // TODO need to add versions of tokens.alias.shadow.shadow16, etc. that work with filter\n filter:\n `drop-shadow(0 0 2px ${tokens.colorNeutralShadowAmbient}) ` +\n `drop-shadow(0 8px 16px ${tokens.colorNeutralShadowKey})`,\n },\n\n inline: {\n // When rendering inline, the PopoverSurface will be rendered under relatively positioned elements such as Input.\n // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n zIndex: 1,\n },\n\n inverted: {\n backgroundColor: tokens.colorNeutralBackgroundStatic,\n color: tokens.colorNeutralForegroundStaticInverted,\n },\n\n brand: {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n smallPadding: { padding: '12px' },\n\n mediumPadding: { padding: '16px' },\n\n largePadding: { padding: '20px' },\n\n smallArrow: createArrowHeightStyles(arrowHeights.small),\n mediumLargeArrow: createArrowHeightStyles(arrowHeights.medium),\n arrow: createArrowStyles({ arrowHeight: undefined }),\n});\n\n/**\n * Apply styling to the PopoverSurface slots based on the state\n */\nexport const usePopoverSurfaceStyles_unstable = (state: PopoverSurfaceState): PopoverSurfaceState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(\n popoverSurfaceClassNames.root,\n styles.root,\n state.inline && styles.inline,\n state.size === 'small' && styles.smallPadding,\n state.size === 'medium' && styles.mediumPadding,\n state.size === 'large' && styles.largePadding,\n state.appearance === 'inverted' && styles.inverted,\n state.appearance === 'brand' && styles.brand,\n state.root.className,\n );\n\n state.arrowClassName = mergeClasses(\n styles.arrow,\n state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","createArrowHeightStyles","createArrowStyles","tokens","typographyStyles","popoverSurfaceClassNames","root","arrowHeights","small","medium","large","useStyles","color","colorNeutralForeground1","backgroundColor","colorNeutralBackground1","borderRadius","borderRadiusMedium","border","colorTransparentStroke","body1","filter","colorNeutralShadowAmbient","colorNeutralShadowKey","inline","zIndex","inverted","colorNeutralBackgroundStatic","colorNeutralForegroundStaticInverted","brand","colorBrandBackground","colorNeutralForegroundOnBrand","smallPadding","padding","mediumPadding","largePadding","smallArrow","mediumLargeArrow","arrow","arrowHeight","undefined","usePopoverSurfaceStyles_unstable","state","styles","className","size","appearance","arrowClassName"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,uBAAuB,EAAEC,iBAAiB,QAAQ,8BAA8B;AACzF,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAKjE,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,eAA4C;IACvDC,OAAO;IACPC,QAAQ;IACRC,OAAO;AACT,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYZ,WAAW;IAC3BO,MAAM;QACJM,OAAOT,OAAOU,uBAAuB;QACrCC,iBAAiBX,OAAOY,uBAAuB;QAC/CC,cAAcb,OAAOc,kBAAkB;QACvCC,QAAQ,CAAC,UAAU,EAAEf,OAAOgB,sBAAsB,EAAE;QACpD,GAAGf,iBAAiBgB,KAAK;QAEzB,wFAAwF;QACxFC,QACE,CAAC,oBAAoB,EAAElB,OAAOmB,yBAAyB,CAAC,EAAE,CAAC,GAC3D,CAAC,uBAAuB,EAAEnB,OAAOoB,qBAAqB,CAAC,CAAC,CAAC;IAC7D;IAEAC,QAAQ;QACN,iHAAiH;QACjH,0GAA0G;QAC1GC,QAAQ;IACV;IAEAC,UAAU;QACRZ,iBAAiBX,OAAOwB,4BAA4B;QACpDf,OAAOT,OAAOyB,oCAAoC;IACpD;IAEAC,OAAO;QACLf,iBAAiBX,OAAO2B,oBAAoB;QAC5ClB,OAAOT,OAAO4B,6BAA6B;IAC7C;IAEAC,cAAc;QAAEC,SAAS;IAAO;IAEhCC,eAAe;QAAED,SAAS;IAAO;IAEjCE,cAAc;QAAEF,SAAS;IAAO;IAEhCG,YAAYnC,wBAAwBM,aAAaC,KAAK;IACtD6B,kBAAkBpC,wBAAwBM,aAAaE,MAAM;IAC7D6B,OAAOpC,kBAAkB;QAAEqC,aAAaC;IAAU;AACpD;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,SAAShC;IACf+B,MAAMpC,IAAI,CAACsC,SAAS,GAAG5C,aACrBK,yBAAyBC,IAAI,EAC7BqC,OAAOrC,IAAI,EACXoC,MAAMlB,MAAM,IAAImB,OAAOnB,MAAM,EAC7BkB,MAAMG,IAAI,KAAK,WAAWF,OAAOX,YAAY,EAC7CU,MAAMG,IAAI,KAAK,YAAYF,OAAOT,aAAa,EAC/CQ,MAAMG,IAAI,KAAK,WAAWF,OAAOR,YAAY,EAC7CO,MAAMI,UAAU,KAAK,cAAcH,OAAOjB,QAAQ,EAClDgB,MAAMI,UAAU,KAAK,WAAWH,OAAOd,KAAK,EAC5Ca,MAAMpC,IAAI,CAACsC,SAAS;IAGtBF,MAAMK,cAAc,GAAG/C,aACrB2C,OAAOL,KAAK,EACZI,MAAMG,IAAI,KAAK,UAAUF,OAAOP,UAAU,GAAGO,OAAON,gBAAgB;IAGtE,OAAOK;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Popover/Popover.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { JSXElement } 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\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
|
|
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\nexport type PopoverBaseProps = Omit<PopoverProps, 'appearance' | 'size'>;\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\nexport type PopoverBaseState = Omit<PopoverState, 'appearance' | 'components' | 'size' | 'surfaceMotion'>;\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"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "PopoverSurfaceMotion", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function() {
|
|
8
|
+
return PopoverSurfaceMotion;
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
const _reactmotion = require("@fluentui/react-motion");
|
|
12
|
+
const _reactmotioncomponentspreview = require("@fluentui/react-motion-components-preview");
|
|
13
|
+
const _reactpositioning = require("@fluentui/react-positioning");
|
|
14
|
+
// Shared timing constants for the enter animation.
|
|
15
|
+
const duration = _reactmotion.motionTokens.durationSlower;
|
|
16
|
+
const easing = _reactmotion.motionTokens.curveDecelerateMid;
|
|
17
|
+
const PopoverSurfaceMotion = (0, _reactmotion.createPresenceComponent)(({ distance = 10 })=>({
|
|
18
|
+
enter: [
|
|
19
|
+
(0, _reactmotioncomponentspreview.fadeAtom)({
|
|
20
|
+
duration,
|
|
21
|
+
easing,
|
|
22
|
+
direction: 'enter'
|
|
23
|
+
}),
|
|
24
|
+
{
|
|
25
|
+
// slideAtom produces translate keyframes from `outX`/`outY` → `0px`.
|
|
26
|
+
// The `outX`/`outY` values read the positioning-provided CSS variables and scale
|
|
27
|
+
// them by `distance` so the surface slides in from the correct direction.
|
|
28
|
+
...(0, _reactmotioncomponentspreview.slideAtom)({
|
|
29
|
+
duration,
|
|
30
|
+
easing,
|
|
31
|
+
direction: 'enter',
|
|
32
|
+
outX: `calc(var(${_reactpositioning.POSITIONING_SLIDE_DIRECTION_VAR_X}, 0px) * ${distance})`,
|
|
33
|
+
outY: `calc(var(${_reactpositioning.POSITIONING_SLIDE_DIRECTION_VAR_Y}, 0px) * ${distance})`
|
|
34
|
+
}),
|
|
35
|
+
// 'accumulate' compositing adds this effect's transform on top of the element's
|
|
36
|
+
// existing transform, preserving any transform applied by the positioning engine.
|
|
37
|
+
composite: 'accumulate'
|
|
38
|
+
}
|
|
39
|
+
],
|
|
40
|
+
// No exit animation — the surface unmounts immediately on close.
|
|
41
|
+
exit: []
|
|
42
|
+
}));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Popover/PopoverSurfaceMotion.ts"],"sourcesContent":["import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';\nimport { fadeAtom, slideAtom } from '@fluentui/react-motion-components-preview';\nimport {\n POSITIONING_SLIDE_DIRECTION_VAR_X as slideDirectionVarX,\n POSITIONING_SLIDE_DIRECTION_VAR_Y as slideDirectionVarY,\n} from '@fluentui/react-positioning';\n\n// Shared timing constants for the enter animation.\nconst duration = motionTokens.durationSlower;\nconst easing = motionTokens.curveDecelerateMid;\n\n/**\n * Default `surfaceMotion` slot for `<Popover>`.\n *\n * Enter-only animation combining a fade and a direction-aware slide.\n * The slide reads CSS variables set by `usePositioningSlideDirection` and scales\n * them by `distance` pixels. There is no exit animation; the surface unmounts immediately.\n *\n * @param distance - Travel distance (px) for the enter slide. Defaults to `10`.\n */\nexport const PopoverSurfaceMotion = createPresenceComponent(({ distance = 10 }: { distance?: number }) => ({\n enter: [\n fadeAtom({ duration, easing, direction: 'enter' }),\n {\n // slideAtom produces translate keyframes from `outX`/`outY` → `0px`.\n // The `outX`/`outY` values read the positioning-provided CSS variables and scale\n // them by `distance` so the surface slides in from the correct direction.\n ...slideAtom({\n duration,\n easing,\n direction: 'enter',\n outX: `calc(var(${slideDirectionVarX}, 0px) * ${distance})`,\n outY: `calc(var(${slideDirectionVarY}, 0px) * ${distance})`,\n }),\n // 'accumulate' compositing adds this effect's transform on top of the element's\n // existing transform, preserving any transform applied by the positioning engine.\n composite: 'accumulate',\n },\n ],\n // No exit animation — the surface unmounts immediately on close.\n exit: [],\n}));\n"],"names":["createPresenceComponent","motionTokens","fadeAtom","slideAtom","POSITIONING_SLIDE_DIRECTION_VAR_X","slideDirectionVarX","POSITIONING_SLIDE_DIRECTION_VAR_Y","slideDirectionVarY","duration","durationSlower","easing","curveDecelerateMid","PopoverSurfaceMotion","distance","enter","direction","outX","outY","composite","exit"],"mappings":";;;;+BAoBaY;;;;;;6BApByC,yBAAyB;8CAC3C,4CAA4C;kCAIzE,8BAA8B;AAErC,mDAAmD;AACnD,MAAMJ,WAAWP,yBAAAA,CAAaQ,cAAc;AAC5C,MAAMC,SAAST,yBAAAA,CAAaU,kBAAkB;AAWvC,iCAA6BX,oCAAAA,EAAwB,CAAC,EAAEa,WAAW,EAAE,EAAyB,GAAM,CAAA;QACzGC,OAAO;gBACLZ,sCAAAA,EAAS;gBAAEM;gBAAUE;gBAAQK,WAAW;YAAQ;YAChD;gBACE,qEAAqE;gBACrE,iFAAiF;gBACjF,0EAA0E;gBAC1E,GAAGZ,2CAAAA,EAAU;oBACXK;oBACAE;oBACAK,WAAW;oBACXC,MAAM,CAAC,SAAS,EAAEX,mDAAAA,CAAmB,SAAS,EAAEQ,SAAS,CAAC,CAAC;oBAC3DI,MAAM,CAAC,SAAS,EAAEV,mDAAAA,CAAmB,SAAS,EAAEM,SAAS,CAAC,CAAC;gBAC7D,EAAE;gBACF,gFAAgF;gBAChF,kFAAkF;gBAClFK,WAAW;YACb;SACD;QACD,iEAAiE;QACjEC,MAAM,EAAE;KACV,CAAA,GAAI"}
|
|
@@ -9,11 +9,15 @@ Object.defineProperty(exports, "renderPopover_unstable", {
|
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
11
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
|
+
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
|
|
12
13
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
14
|
+
const _reactutilities = require("@fluentui/react-utilities");
|
|
15
|
+
const _reactmotion = require("@fluentui/react-motion");
|
|
13
16
|
const _popoverContext = require("../../popoverContext");
|
|
14
17
|
const renderPopover_unstable = (state)=>{
|
|
18
|
+
(0, _reactutilities.assertSlots)(state);
|
|
15
19
|
const { appearance, arrowRef, contentRef, inline, mountNode, open, openOnContext, openOnHover, setOpen, size, toggleOpen, trapFocus, triggerRef, withArrow, inertTrapFocus } = state;
|
|
16
|
-
return /*#__PURE__*/
|
|
20
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_popoverContext.PopoverContext.Provider, {
|
|
17
21
|
value: {
|
|
18
22
|
appearance,
|
|
19
23
|
arrowRef,
|
|
@@ -30,6 +34,14 @@ const renderPopover_unstable = (state)=>{
|
|
|
30
34
|
trapFocus,
|
|
31
35
|
inertTrapFocus,
|
|
32
36
|
withArrow
|
|
33
|
-
}
|
|
34
|
-
|
|
37
|
+
},
|
|
38
|
+
children: [
|
|
39
|
+
state.popoverTrigger,
|
|
40
|
+
state.popoverSurface && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.surfaceMotion, {
|
|
41
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactmotion.MotionRefForwarder, {
|
|
42
|
+
children: state.popoverSurface
|
|
43
|
+
})
|
|
44
|
+
})
|
|
45
|
+
]
|
|
46
|
+
});
|
|
35
47
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Popover/renderPopover.tsx"],"sourcesContent":["
|
|
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 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 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 inertTrapFocus,\n withArrow,\n }}\n >\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","renderPopover_unstable","state","appearance","arrowRef","contentRef","inline","mountNode","open","openOnContext","openOnHover","setOpen","size","toggleOpen","trapFocus","triggerRef","withArrow","inertTrapFocus","Provider","value","popoverTrigger","popoverSurface","surfaceMotion"],"mappings":";;;;+BAYaI;;;;;;;4BAXb,iCAAiD;iEAE1B,QAAQ;gCACc,4BAA4B;6BACtC,yBAAyB;gCAC7B,uBAAuB;AAM/C,+BAA+B,CAACC;QACrCJ,2BAAAA,EAAkCI;IAElC,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,OAAA,WAAA,OACE,gBAAA,EAACF,8BAAAA,CAAekB,QAAQ,EAAA;QACtBC,OAAO;YACLhB;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAE;YACAE;YACAH;YACAE;YACAG;YACAD;QACF;;YAECd,MAAMkB,cAAc;YACpBlB,MAAMmB,cAAc,IAAA,WAAA,OACnB,eAAA,EAACnB,MAAMoB,aAAa,EAAA;0BAClB,WAAA,OAAA,eAAA,EAACvB,+BAAAA,EAAAA;8BAGEG,MAAMmB,cAAc;;;;;AAMjC,EAAE"}
|
|
@@ -25,14 +25,22 @@ const _reactpositioning = require("@fluentui/react-positioning");
|
|
|
25
25
|
const _reacttabster = require("@fluentui/react-tabster");
|
|
26
26
|
const _index = require("../PopoverSurface/index");
|
|
27
27
|
const _constants = require("./constants");
|
|
28
|
+
const _reactmotion = require("@fluentui/react-motion");
|
|
29
|
+
const _PopoverSurfaceMotion = require("./PopoverSurfaceMotion");
|
|
28
30
|
const usePopover_unstable = (props)=>{
|
|
29
31
|
const { appearance, size = 'medium' } = props;
|
|
30
32
|
const positioning = (0, _reactpositioning.resolvePositioningShorthand)(props.positioning);
|
|
31
33
|
const withArrow = props.withArrow && !positioning.coverTarget;
|
|
34
|
+
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
|
|
35
|
+
const handlePositionEnd = (0, _reactpositioning.usePositioningSlideDirection)({
|
|
36
|
+
targetDocument,
|
|
37
|
+
onPositioningEnd: positioning.onPositioningEnd
|
|
38
|
+
});
|
|
32
39
|
const state = usePopoverBase_unstable({
|
|
33
40
|
...props,
|
|
34
41
|
positioning: {
|
|
35
42
|
...positioning,
|
|
43
|
+
onPositioningEnd: handlePositionEnd,
|
|
36
44
|
// Update the offset with the arrow size only when it's available
|
|
37
45
|
...withArrow ? {
|
|
38
46
|
offset: (0, _reactpositioning.mergeArrowOffset)(positioning.offset, _index.arrowHeights[size])
|
|
@@ -40,9 +48,20 @@ const usePopover_unstable = (props)=>{
|
|
|
40
48
|
}
|
|
41
49
|
});
|
|
42
50
|
return {
|
|
51
|
+
components: {
|
|
52
|
+
surfaceMotion: _PopoverSurfaceMotion.PopoverSurfaceMotion
|
|
53
|
+
},
|
|
43
54
|
appearance,
|
|
44
55
|
size,
|
|
45
|
-
...state
|
|
56
|
+
...state,
|
|
57
|
+
surfaceMotion: (0, _reactmotion.presenceMotionSlot)(props.surfaceMotion, {
|
|
58
|
+
elementType: _PopoverSurfaceMotion.PopoverSurfaceMotion,
|
|
59
|
+
defaultProps: {
|
|
60
|
+
visible: state.open,
|
|
61
|
+
appear: true,
|
|
62
|
+
unmountOnExit: true
|
|
63
|
+
}
|
|
64
|
+
})
|
|
46
65
|
};
|
|
47
66
|
};
|
|
48
67
|
const usePopoverBase_unstable = (props)=>{
|
|
@@ -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} 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';\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 state = usePopoverBase_unstable({\n ...props,\n positioning: {\n ...positioning,\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 appearance,\n size,\n ...state,\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","useFocusFinders","useActivateModal","arrowHeights","popoverSurfaceBorderRadius","usePopover_unstable","props","appearance","size","positioning","withArrow","coverTarget","state","usePopoverBase_unstable","offset","contextTarget","setContextTarget","initialState","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","targetDocument","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 {\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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"}
|
|
@@ -22,10 +22,12 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
|
22
22
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
23
23
|
const _reacttabster = require("@fluentui/react-tabster");
|
|
24
24
|
const _popoverContext = require("../../popoverContext");
|
|
25
|
+
const _reactmotion = require("@fluentui/react-motion");
|
|
25
26
|
const usePopoverSurface_unstable = (props, ref)=>{
|
|
26
27
|
const size = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.size);
|
|
27
28
|
const appearance = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.appearance);
|
|
28
|
-
const
|
|
29
|
+
const motionForwardedRef = (0, _reactmotion.useMotionForwardedRef)();
|
|
30
|
+
const state = usePopoverSurfaceBase_unstable(props, (0, _reactutilities.useMergedRefs)(ref, motionForwardedRef));
|
|
29
31
|
return {
|
|
30
32
|
appearance,
|
|
31
33
|
size,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/PopoverSurface/usePopoverSurface.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext_unstable } from '../../popoverContext';\nimport type {\n PopoverSurfaceProps,\n PopoverSurfaceState,\n PopoverSurfaceBaseProps,\n PopoverSurfaceBaseState,\n} from './PopoverSurface.types';\n\n/**\n * Create the state required to render PopoverSurface.\n *\n * The returned state can be modified with hooks such as usePopoverSurfaceStyles_unstable,\n * before being passed to renderPopoverSurface_unstable.\n *\n * @param props - props from this instance of PopoverSurface\n * @param ref - reference to root HTMLDivElement of PopoverSurface\n */\nexport const usePopoverSurface_unstable = (\n props: PopoverSurfaceProps,\n ref: React.Ref<HTMLDivElement>,\n): PopoverSurfaceState => {\n const size = usePopoverContext_unstable(context => context.size);\n const appearance = usePopoverContext_unstable(context => context.appearance);\n const state = usePopoverSurfaceBase_unstable(props, ref);\n\n return {\n appearance,\n size,\n ...state,\n };\n};\n\n/**\n * Base hook that builds PopoverSurface state for behavior and structure only.\n *\n * @internal\n * @param props - User provided props to the PopoverSurface component.\n * @param ref - User provided ref to be passed to the PopoverSurface component.\n */\nexport const usePopoverSurfaceBase_unstable = (\n props: PopoverSurfaceBaseProps,\n ref: React.Ref<HTMLDivElement>,\n): PopoverSurfaceBaseState => {\n const contentRef = usePopoverContext_unstable(context => context.contentRef);\n const openOnHover = usePopoverContext_unstable(context => context.openOnHover);\n const setOpen = usePopoverContext_unstable(context => context.setOpen);\n const mountNode = usePopoverContext_unstable(context => context.mountNode);\n const arrowRef = usePopoverContext_unstable(context => context.arrowRef);\n const withArrow = usePopoverContext_unstable(context => context.withArrow);\n const trapFocus = usePopoverContext_unstable(context => context.trapFocus);\n const inertTrapFocus = usePopoverContext_unstable(context => context.inertTrapFocus);\n const inline = usePopoverContext_unstable(context => context.inline);\n const { modalAttributes } = useModalAttributes({\n trapFocus,\n legacyTrapFocus: !inertTrapFocus,\n alwaysFocusable: !trapFocus,\n });\n\n const state: PopoverSurfaceBaseState = {\n inline,\n withArrow,\n arrowRef,\n mountNode,\n components: {\n root: 'div',\n },\n root: slot.always(\n {\n ref: useMergedRefs(ref, contentRef) as React.Ref<HTMLDivElement>,\n role: trapFocus ? 'dialog' : 'group',\n 'aria-modal': trapFocus ? true : undefined,\n ...modalAttributes,\n ...props,\n },\n { elementType: 'div' },\n ),\n };\n\n const {\n onMouseEnter: onMouseEnterOriginal,\n onMouseLeave: onMouseLeaveOriginal,\n onKeyDown: onKeyDownOriginal,\n } = state.root;\n state.root.onMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {\n if (openOnHover) {\n setOpen(e, true);\n }\n\n onMouseEnterOriginal?.(e);\n };\n\n state.root.onMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {\n if (openOnHover) {\n setOpen(e, false);\n }\n\n onMouseLeaveOriginal?.(e);\n };\n\n state.root.onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n // only close if the event happened inside the current popover\n // If using a stack of inline popovers, the user should call `stopPropagation` to avoid dismissing the entire stack\n if (e.key === 'Escape' && contentRef.current?.contains(e.target as HTMLDivElement)) {\n e.preventDefault();\n setOpen(e, false);\n }\n\n onKeyDownOriginal?.(e);\n };\n\n return state;\n};\n"],"names":["React","useMergedRefs","slot","useModalAttributes","usePopoverContext_unstable","usePopoverSurface_unstable","props","ref","size","context","appearance","state","usePopoverSurfaceBase_unstable","contentRef","openOnHover","setOpen","mountNode","arrowRef","withArrow","trapFocus","inertTrapFocus","inline","modalAttributes","legacyTrapFocus","alwaysFocusable","components","root","always","role","undefined","elementType","onMouseEnter","onMouseEnterOriginal","onMouseLeave","onMouseLeaveOriginal","onKeyDown","onKeyDownOriginal","e","key","current","contains","target","preventDefault"],"mappings":"AAAA;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../src/components/PopoverSurface/usePopoverSurface.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext_unstable } from '../../popoverContext';\nimport type {\n PopoverSurfaceProps,\n PopoverSurfaceState,\n PopoverSurfaceBaseProps,\n PopoverSurfaceBaseState,\n} from './PopoverSurface.types';\nimport { useMotionForwardedRef } from '@fluentui/react-motion';\n\n/**\n * Create the state required to render PopoverSurface.\n *\n * The returned state can be modified with hooks such as usePopoverSurfaceStyles_unstable,\n * before being passed to renderPopoverSurface_unstable.\n *\n * @param props - props from this instance of PopoverSurface\n * @param ref - reference to root HTMLDivElement of PopoverSurface\n */\nexport const usePopoverSurface_unstable = (\n props: PopoverSurfaceProps,\n ref: React.Ref<HTMLDivElement>,\n): PopoverSurfaceState => {\n const size = usePopoverContext_unstable(context => context.size);\n const appearance = usePopoverContext_unstable(context => context.appearance);\n const motionForwardedRef = useMotionForwardedRef();\n const state = usePopoverSurfaceBase_unstable(props, useMergedRefs(ref, motionForwardedRef));\n\n return {\n appearance,\n size,\n ...state,\n };\n};\n\n/**\n * Base hook that builds PopoverSurface state for behavior and structure only.\n *\n * @internal\n * @param props - User provided props to the PopoverSurface component.\n * @param ref - User provided ref to be passed to the PopoverSurface component.\n */\nexport const usePopoverSurfaceBase_unstable = (\n props: PopoverSurfaceBaseProps,\n ref: React.Ref<HTMLDivElement>,\n): PopoverSurfaceBaseState => {\n const contentRef = usePopoverContext_unstable(context => context.contentRef);\n const openOnHover = usePopoverContext_unstable(context => context.openOnHover);\n const setOpen = usePopoverContext_unstable(context => context.setOpen);\n const mountNode = usePopoverContext_unstable(context => context.mountNode);\n const arrowRef = usePopoverContext_unstable(context => context.arrowRef);\n const withArrow = usePopoverContext_unstable(context => context.withArrow);\n const trapFocus = usePopoverContext_unstable(context => context.trapFocus);\n const inertTrapFocus = usePopoverContext_unstable(context => context.inertTrapFocus);\n const inline = usePopoverContext_unstable(context => context.inline);\n const { modalAttributes } = useModalAttributes({\n trapFocus,\n legacyTrapFocus: !inertTrapFocus,\n alwaysFocusable: !trapFocus,\n });\n\n const state: PopoverSurfaceBaseState = {\n inline,\n withArrow,\n arrowRef,\n mountNode,\n components: {\n root: 'div',\n },\n root: slot.always(\n {\n ref: useMergedRefs(ref, contentRef) as React.Ref<HTMLDivElement>,\n role: trapFocus ? 'dialog' : 'group',\n 'aria-modal': trapFocus ? true : undefined,\n ...modalAttributes,\n ...props,\n },\n { elementType: 'div' },\n ),\n };\n\n const {\n onMouseEnter: onMouseEnterOriginal,\n onMouseLeave: onMouseLeaveOriginal,\n onKeyDown: onKeyDownOriginal,\n } = state.root;\n state.root.onMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {\n if (openOnHover) {\n setOpen(e, true);\n }\n\n onMouseEnterOriginal?.(e);\n };\n\n state.root.onMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {\n if (openOnHover) {\n setOpen(e, false);\n }\n\n onMouseLeaveOriginal?.(e);\n };\n\n state.root.onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n // only close if the event happened inside the current popover\n // If using a stack of inline popovers, the user should call `stopPropagation` to avoid dismissing the entire stack\n if (e.key === 'Escape' && contentRef.current?.contains(e.target as HTMLDivElement)) {\n e.preventDefault();\n setOpen(e, false);\n }\n\n onKeyDownOriginal?.(e);\n };\n\n return state;\n};\n"],"names":["React","useMergedRefs","slot","useModalAttributes","usePopoverContext_unstable","useMotionForwardedRef","usePopoverSurface_unstable","props","ref","size","context","appearance","motionForwardedRef","state","usePopoverSurfaceBase_unstable","contentRef","openOnHover","setOpen","mountNode","arrowRef","withArrow","trapFocus","inertTrapFocus","inline","modalAttributes","legacyTrapFocus","alwaysFocusable","components","root","always","role","undefined","elementType","onMouseEnter","onMouseEnterOriginal","onMouseLeave","onMouseLeaveOriginal","onKeyDown","onKeyDownOriginal","e","key","current","contains","target","preventDefault"],"mappings":"AAAA;;;;;;;;;;;;IA8Cac,8BAAAA;;;8BAvBAR;;;;;iEArBU,QAAQ;gCACK,4BAA4B;8BAC7B,0BAA0B;gCAClB,uBAAuB;6BAO5B,yBAAyB;AAWxD,MAAMA,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,WAAOL,0CAAAA,EAA2BM,CAAAA,UAAWA,QAAQD,IAAI;IAC/D,MAAME,iBAAaP,0CAAAA,EAA2BM,CAAAA,UAAWA,QAAQC,UAAU;IAC3E,MAAMC,yBAAqBP,kCAAAA;IAC3B,MAAMQ,QAAQC,+BAA+BP,WAAON,6BAAAA,EAAcO,KAAKI;IAEvE,OAAO;QACLD;QACAF;QACA,GAAGI,KAAK;IACV;AACF,EAAE;AASK,uCAAuC,CAC5CN,OACAC;IAEA,MAAMO,iBAAaX,0CAAAA,EAA2BM,CAAAA,UAAWA,QAAQK,UAAU;IAC3E,MAAMC,cAAcZ,8CAAAA,EAA2BM,CAAAA,UAAWA,QAAQM,WAAW;IAC7E,MAAMC,cAAUb,0CAAAA,EAA2BM,CAAAA,UAAWA,QAAQO,OAAO;IACrE,MAAMC,gBAAYd,0CAAAA,EAA2BM,CAAAA,UAAWA,QAAQQ,SAAS;IACzE,MAAMC,eAAWf,0CAAAA,EAA2BM,CAAAA,UAAWA,QAAQS,QAAQ;IACvE,MAAMC,gBAAYhB,0CAAAA,EAA2BM,CAAAA,UAAWA,QAAQU,SAAS;IACzE,MAAMC,gBAAYjB,0CAAAA,EAA2BM,CAAAA,UAAWA,QAAQW,SAAS;IACzE,MAAMC,qBAAiBlB,0CAAAA,EAA2BM,CAAAA,UAAWA,QAAQY,cAAc;IACnF,MAAMC,aAASnB,0CAAAA,EAA2BM,CAAAA,UAAWA,QAAQa,MAAM;IACnE,MAAM,EAAEC,eAAe,EAAE,OAAGrB,gCAAAA,EAAmB;QAC7CkB;QACAI,iBAAiB,CAACH;QAClBI,iBAAiB,CAACL;IACpB;IAEA,MAAMR,QAAiC;QACrCU;QACAH;QACAD;QACAD;QACAS,YAAY;YACVC,MAAM;QACR;QACAA,MAAM1B,oBAAAA,CAAK2B,MAAM,CACf;YACErB,KAAKP,iCAAAA,EAAcO,KAAKO;YACxBe,MAAMT,YAAY,WAAW;YAC7B,cAAcA,YAAY,OAAOU;YACjC,GAAGP,eAAe;YAClB,GAAGjB,KAAK;QACV,GACA;YAAEyB,aAAa;QAAM;IAEzB;IAEA,MAAM,EACJC,cAAcC,oBAAoB,EAClCC,cAAcC,oBAAoB,EAClCC,WAAWC,iBAAiB,EAC7B,GAAGzB,MAAMe,IAAI;IACdf,MAAMe,IAAI,CAACK,YAAY,GAAG,CAACM;QACzB,IAAIvB,aAAa;YACfC,QAAQsB,GAAG;QACb;QAEAL,yBAAAA,QAAAA,yBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,qBAAuBK;IACzB;IAEA1B,MAAMe,IAAI,CAACO,YAAY,GAAG,CAACI;QACzB,IAAIvB,aAAa;YACfC,QAAQsB,GAAG;QACb;QAEAH,yBAAAA,QAAAA,yBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,qBAAuBG;IACzB;IAEA1B,MAAMe,IAAI,CAACS,SAAS,GAAG,CAACE;YAGIxB;QAF1B,8DAA8D;QAC9D,mHAAmH;QACnH,IAAIwB,EAAEC,GAAG,KAAK,YAAA,CAAA,CAAYzB,sBAAAA,WAAW0B,OAAAA,AAAO,MAAA,QAAlB1B,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAoB2B,QAAQ,CAACH,EAAEI,OAAM,GAAqB;YAClFJ,EAAEK,cAAc;YAChB3B,QAAQsB,GAAG;QACb;QAEAD,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAoBC;IACtB;IAEA,OAAO1B;AACT,EAAE"}
|
|
@@ -61,21 +61,6 @@ const arrowHeights = {
|
|
|
61
61
|
Be2twd7: "fkhj508",
|
|
62
62
|
Bhrd7zp: "figsok6",
|
|
63
63
|
Bg96gwp: "f1i3iumi",
|
|
64
|
-
B93otf3: "f18k4bn6",
|
|
65
|
-
vin17d: "fo1kyvf",
|
|
66
|
-
Ezkn3b: "fetxo7e",
|
|
67
|
-
nyiy2g: "f8x1vz1",
|
|
68
|
-
swvrvq: "f8g0anz",
|
|
69
|
-
Bkovbt3: "fezwn9i",
|
|
70
|
-
hgjdhn: "fz5efge",
|
|
71
|
-
fsy9dk: "f1ydixl4",
|
|
72
|
-
B3ogreh: "f8dgqj5",
|
|
73
|
-
jv49x5: "fnyfnr8",
|
|
74
|
-
Bk7o48c: "fgw77r4",
|
|
75
|
-
Bv12yb3: "f1noc5he",
|
|
76
|
-
i09l9u: "f1k46bua",
|
|
77
|
-
Bcrj8ia: "f1lhuzxm",
|
|
78
|
-
Bmmhre5: "f1f9qikc",
|
|
79
64
|
Bhu2qc9: "fymb6k8"
|
|
80
65
|
},
|
|
81
66
|
inline: {
|
|
@@ -186,18 +171,6 @@ const arrowHeights = {
|
|
|
186
171
|
".fkhj508{font-size:var(--fontSizeBase300);}",
|
|
187
172
|
".figsok6{font-weight:var(--fontWeightRegular);}",
|
|
188
173
|
".f1i3iumi{line-height:var(--lineHeightBase300);}",
|
|
189
|
-
".f18k4bn6{animation-composition:accumulate;}",
|
|
190
|
-
".fo1kyvf{animation-duration:var(--durationSlower);}",
|
|
191
|
-
".fetxo7e{animation-timing-function:var(--curveDecelerateMid);}",
|
|
192
|
-
".f8x1vz1{--fui-positioning-slide-distance-x:0px;}",
|
|
193
|
-
".f8g0anz{--fui-positioning-slide-distance-y:10px;}",
|
|
194
|
-
".fezwn9i[data-popper-placement^=right]{--fui-positioning-slide-distance-x:-10px;}",
|
|
195
|
-
".fz5efge[data-popper-placement^=right]{--fui-positioning-slide-distance-y:0px;}",
|
|
196
|
-
".f1ydixl4[data-popper-placement^=bottom]{--fui-positioning-slide-distance-x:0px;}",
|
|
197
|
-
".f8dgqj5[data-popper-placement^=bottom]{--fui-positioning-slide-distance-y:-10px;}",
|
|
198
|
-
".fnyfnr8[data-popper-placement^=left]{--fui-positioning-slide-distance-x:10px;}",
|
|
199
|
-
".fgw77r4[data-popper-placement^=left]{--fui-positioning-slide-distance-y:0px;}",
|
|
200
|
-
".f1noc5he{animation-name:f1m0q9mo,f79suad;}",
|
|
201
174
|
".fymb6k8{filter:drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 8px 16px var(--colorNeutralShadowKey));}",
|
|
202
175
|
".f19g0ac{z-index:1;}",
|
|
203
176
|
".fg3r6xk{background-color:var(--colorNeutralBackgroundStatic);}",
|
|
@@ -262,27 +235,6 @@ const arrowHeights = {
|
|
|
262
235
|
"[data-popper-placement^=\"bottom\"] .f1fy4ixr{--fui-positioning-arrow-angle:135deg;}",
|
|
263
236
|
"[data-popper-placement^=\"left\"] .fobkauc{right:var(--fui-positioning-arrow-offset);}",
|
|
264
237
|
"[data-popper-placement^=\"left\"] .f16bqv1l{--fui-positioning-arrow-angle:225deg;}"
|
|
265
|
-
],
|
|
266
|
-
k: [
|
|
267
|
-
"@keyframes f1m0q9mo{from{opacity:-1;}to{opacity:0;}}",
|
|
268
|
-
"@keyframes f79suad{from{transform:translate(var(--fui-positioning-slide-distance-x), var(--fui-positioning-slide-distance-y));}}"
|
|
269
|
-
],
|
|
270
|
-
m: [
|
|
271
|
-
[
|
|
272
|
-
"@media (prefers-reduced-motion){.f1k46bua[data-popper-placement]{animation-duration:1ms;}}",
|
|
273
|
-
{
|
|
274
|
-
m: "(prefers-reduced-motion)"
|
|
275
|
-
}
|
|
276
|
-
],
|
|
277
|
-
[
|
|
278
|
-
"@media (prefers-reduced-motion){.f1lhuzxm[data-popper-placement]{animation-name:f1m0q9mo;}}",
|
|
279
|
-
{
|
|
280
|
-
m: "(prefers-reduced-motion)"
|
|
281
|
-
}
|
|
282
|
-
]
|
|
283
|
-
],
|
|
284
|
-
t: [
|
|
285
|
-
"@supports not (animation-composition: accumulate){.f1f9qikc[data-popper-placement]{animation-name:f1m0q9mo;}}"
|
|
286
238
|
]
|
|
287
239
|
});
|
|
288
240
|
const usePopoverSurfaceStyles_unstable = (state)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["usePopoverSurfaceStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createArrowHeightStyles, createArrowStyles
|
|
1
|
+
{"version":3,"sources":["usePopoverSurfaceStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createArrowHeightStyles, createArrowStyles } from '@fluentui/react-positioning';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const popoverSurfaceClassNames = {\n root: 'fui-PopoverSurface'\n};\nexport const arrowHeights = {\n small: 6,\n medium: 8,\n large: 8\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n borderRadius: tokens.borderRadiusMedium,\n border: `1px solid ${tokens.colorTransparentStroke}`,\n ...typographyStyles.body1,\n // TODO need to add versions of tokens.alias.shadow.shadow16, etc. that work with filter\n filter: `drop-shadow(0 0 2px ${tokens.colorNeutralShadowAmbient}) ` + `drop-shadow(0 8px 16px ${tokens.colorNeutralShadowKey})`\n },\n inline: {\n // When rendering inline, the PopoverSurface will be rendered under relatively positioned elements such as Input.\n // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n zIndex: 1\n },\n inverted: {\n backgroundColor: tokens.colorNeutralBackgroundStatic,\n color: tokens.colorNeutralForegroundStaticInverted\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand\n },\n smallPadding: {\n padding: '12px'\n },\n mediumPadding: {\n padding: '16px'\n },\n largePadding: {\n padding: '20px'\n },\n smallArrow: createArrowHeightStyles(arrowHeights.small),\n mediumLargeArrow: createArrowHeightStyles(arrowHeights.medium),\n arrow: createArrowStyles({\n arrowHeight: undefined\n })\n});\n/**\n * Apply styling to the PopoverSurface slots based on the state\n */ export const usePopoverSurfaceStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(popoverSurfaceClassNames.root, styles.root, state.inline && styles.inline, state.size === 'small' && styles.smallPadding, state.size === 'medium' && styles.mediumPadding, state.size === 'large' && styles.largePadding, state.appearance === 'inverted' && styles.inverted, state.appearance === 'brand' && styles.brand, state.root.className);\n state.arrowClassName = mergeClasses(styles.arrow, state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow);\n return state;\n};\n"],"names":["__styles","mergeClasses","createArrowHeightStyles","createArrowStyles","tokens","typographyStyles","popoverSurfaceClassNames","root","arrowHeights","small","medium","large","useStyles","sj55zd","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Bhu2qc9","inline","Bj3rh1h","inverted","brand","smallPadding","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","mediumPadding","largePadding","smallArrow","rhnwrx","Bdy53xb","mediumLargeArrow","arrow","B7ck84d","qhf8xq","B2eet1l","Bz10aip","Bqenvij","a9b677","Ftih45","Br0sdwz","cmx5o7","susq4k","Biibvgv","Bicfajf","qehafq","Brs5u8j","Ccq8qp","Baz25je","Bcgcnre","Bqjgrrk","qa3bma","y0oebl","Biqmznv","Bm6vgfq","Bbv0w2i","uvfttm","eqrjj","Bk5zm6e","m598lv","B4f6apu","ydt019","Bq4z7u6","Bdkvgpv","B0qfbqy","kj8mxx","r59vdv","Bkw5xw4","hl6cv3","aea9ga","yayu3t","Bhsv975","rhl9o9","B7gxrvb","B6q6orb","B0lu1f8","d","p","usePopoverSurfaceStyles_unstable","state","styles","className","size","appearance","arrowClassName"],"mappings":"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"}
|
|
@@ -40,7 +40,6 @@ const arrowHeights = {
|
|
|
40
40
|
borderRadius: _reacttheme.tokens.borderRadiusMedium,
|
|
41
41
|
border: `1px solid ${_reacttheme.tokens.colorTransparentStroke}`,
|
|
42
42
|
..._reacttheme.typographyStyles.body1,
|
|
43
|
-
...(0, _reactpositioning.createSlideStyles)(10),
|
|
44
43
|
// TODO need to add versions of tokens.alias.shadow.shadow16, etc. that work with filter
|
|
45
44
|
filter: `drop-shadow(0 0 2px ${_reacttheme.tokens.colorNeutralShadowAmbient}) ` + `drop-shadow(0 8px 16px ${_reacttheme.tokens.colorNeutralShadowKey})`
|
|
46
45
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/PopoverSurface/usePopoverSurfaceStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createArrowHeightStyles, createArrowStyles
|
|
1
|
+
{"version":3,"sources":["../src/components/PopoverSurface/usePopoverSurfaceStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createArrowHeightStyles, createArrowStyles } from '@fluentui/react-positioning';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { PopoverSize } from '../Popover/Popover.types';\nimport type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const popoverSurfaceClassNames: SlotClassNames<PopoverSurfaceSlots> = {\n root: 'fui-PopoverSurface',\n};\n\nexport const arrowHeights: Record<PopoverSize, number> = {\n small: 6,\n medium: 8,\n large: 8,\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n borderRadius: tokens.borderRadiusMedium,\n border: `1px solid ${tokens.colorTransparentStroke}`,\n ...typographyStyles.body1,\n\n // TODO need to add versions of tokens.alias.shadow.shadow16, etc. that work with filter\n filter:\n `drop-shadow(0 0 2px ${tokens.colorNeutralShadowAmbient}) ` +\n `drop-shadow(0 8px 16px ${tokens.colorNeutralShadowKey})`,\n },\n\n inline: {\n // When rendering inline, the PopoverSurface will be rendered under relatively positioned elements such as Input.\n // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n zIndex: 1,\n },\n\n inverted: {\n backgroundColor: tokens.colorNeutralBackgroundStatic,\n color: tokens.colorNeutralForegroundStaticInverted,\n },\n\n brand: {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n smallPadding: { padding: '12px' },\n\n mediumPadding: { padding: '16px' },\n\n largePadding: { padding: '20px' },\n\n smallArrow: createArrowHeightStyles(arrowHeights.small),\n mediumLargeArrow: createArrowHeightStyles(arrowHeights.medium),\n arrow: createArrowStyles({ arrowHeight: undefined }),\n});\n\n/**\n * Apply styling to the PopoverSurface slots based on the state\n */\nexport const usePopoverSurfaceStyles_unstable = (state: PopoverSurfaceState): PopoverSurfaceState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(\n popoverSurfaceClassNames.root,\n styles.root,\n state.inline && styles.inline,\n state.size === 'small' && styles.smallPadding,\n state.size === 'medium' && styles.mediumPadding,\n state.size === 'large' && styles.largePadding,\n state.appearance === 'inverted' && styles.inverted,\n state.appearance === 'brand' && styles.brand,\n state.root.className,\n );\n\n state.arrowClassName = mergeClasses(\n styles.arrow,\n state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","createArrowHeightStyles","createArrowStyles","tokens","typographyStyles","popoverSurfaceClassNames","root","arrowHeights","small","medium","large","useStyles","color","colorNeutralForeground1","backgroundColor","colorNeutralBackground1","borderRadius","borderRadiusMedium","border","colorTransparentStroke","body1","filter","colorNeutralShadowAmbient","colorNeutralShadowKey","inline","zIndex","inverted","colorNeutralBackgroundStatic","colorNeutralForegroundStaticInverted","brand","colorBrandBackground","colorNeutralForegroundOnBrand","smallPadding","padding","mediumPadding","largePadding","smallArrow","mediumLargeArrow","arrow","arrowHeight","undefined","usePopoverSurfaceStyles_unstable","state","styles","className","size","appearance","arrowClassName"],"mappings":"AAAA;;;;;;;;;;;;IAaaQ,YAAAA;;;4BAJAF;;;oCAyDAoC;eAAAA;;;uBAhE4B,iBAAiB;kCACC,8BAA8B;4BAChD,wBAAwB;AAK1D,MAAMpC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEK,qBAAkD;IACvDE,OAAO;IACPC,QAAQ;IACRC,OAAO;AACT,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYZ,iBAAAA,EAAW;IAC3BO,MAAM;QACJM,OAAOT,kBAAAA,CAAOU,uBAAuB;QACrCC,iBAAiBX,kBAAAA,CAAOY,uBAAuB;QAC/CC,cAAcb,kBAAAA,CAAOc,kBAAkB;QACvCC,QAAQ,CAAC,UAAU,EAAEf,kBAAAA,CAAOgB,sBAAsB,EAAE;QACpD,GAAGf,4BAAAA,CAAiBgB,KAAK;QAEzB,wFAAwF;QACxFC,QACE,CAAC,oBAAoB,EAAElB,kBAAAA,CAAOmB,yBAAyB,CAAC,EAAE,CAAC,GAC3D,CAAC,uBAAuB,EAAEnB,kBAAAA,CAAOoB,qBAAqB,CAAC,CAAC,CAAC;IAC7D;IAEAC,QAAQ;QACN,iHAAiH;QACjH,0GAA0G;QAC1GC,QAAQ;IACV;IAEAC,UAAU;QACRZ,iBAAiBX,kBAAAA,CAAOwB,4BAA4B;QACpDf,OAAOT,kBAAAA,CAAOyB,oCAAoC;IACpD;IAEAC,OAAO;QACLf,iBAAiBX,kBAAAA,CAAO2B,oBAAoB;QAC5ClB,OAAOT,kBAAAA,CAAO4B,6BAA6B;IAC7C;IAEAC,cAAc;QAAEC,SAAS;IAAO;IAEhCC,eAAe;QAAED,SAAS;IAAO;IAEjCE,cAAc;QAAEF,SAAS;IAAO;IAEhCG,gBAAYnC,yCAAAA,EAAwBM,aAAaC,KAAK;IACtD6B,sBAAkBpC,yCAAAA,EAAwBM,aAAaE,MAAM;IAC7D6B,WAAOpC,mCAAAA,EAAkB;QAAEqC,aAAaC;IAAU;AACpD;AAKO,yCAAyC,CAACE;IAC/C;IAEA,MAAMC,SAAShC;IACf+B,MAAMpC,IAAI,CAACsC,SAAS,OAAG5C,mBAAAA,EACrBK,yBAAyBC,IAAI,EAC7BqC,OAAOrC,IAAI,EACXoC,MAAMlB,MAAM,IAAImB,OAAOnB,MAAM,EAC7BkB,MAAMG,IAAI,KAAK,WAAWF,OAAOX,YAAY,EAC7CU,MAAMG,IAAI,KAAK,YAAYF,OAAOT,aAAa,EAC/CQ,MAAMG,IAAI,KAAK,WAAWF,OAAOR,YAAY,EAC7CO,MAAMI,UAAU,KAAK,cAAcH,OAAOjB,QAAQ,EAClDgB,MAAMI,UAAU,KAAK,WAAWH,OAAOd,KAAK,EAC5Ca,MAAMpC,IAAI,CAACsC,SAAS;IAGtBF,MAAMK,cAAc,OAAG/C,mBAAAA,EACrB2C,OAAOL,KAAK,EACZI,MAAMG,IAAI,KAAK,UAAUF,OAAOP,UAAU,GAAGO,OAAON,gBAAgB;IAGtE,OAAOK;AACT,EAAE"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-popover",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.14.0",
|
|
4
4
|
"description": "Popover component for Fluent UI",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -13,15 +13,17 @@
|
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
15
|
"@fluentui/keyboard-keys": "^9.0.8",
|
|
16
|
-
"@fluentui/react-aria": "^9.17.
|
|
17
|
-
"@fluentui/react-context-selector": "^9.2.
|
|
18
|
-
"@fluentui/react-
|
|
19
|
-
"@fluentui/react-
|
|
20
|
-
"@fluentui/react-
|
|
21
|
-
"@fluentui/react-
|
|
16
|
+
"@fluentui/react-aria": "^9.17.10",
|
|
17
|
+
"@fluentui/react-context-selector": "^9.2.15",
|
|
18
|
+
"@fluentui/react-motion": "^9.13.0",
|
|
19
|
+
"@fluentui/react-motion-components-preview": "^0.15.2",
|
|
20
|
+
"@fluentui/react-portal": "^9.8.11",
|
|
21
|
+
"@fluentui/react-positioning": "^9.22.0",
|
|
22
|
+
"@fluentui/react-shared-contexts": "^9.26.2",
|
|
23
|
+
"@fluentui/react-tabster": "^9.26.13",
|
|
22
24
|
"@fluentui/react-theme": "^9.2.1",
|
|
23
|
-
"@fluentui/react-utilities": "^9.26.
|
|
24
|
-
"@fluentui/react-jsx-runtime": "^9.4.
|
|
25
|
+
"@fluentui/react-utilities": "^9.26.2",
|
|
26
|
+
"@fluentui/react-jsx-runtime": "^9.4.1",
|
|
25
27
|
"@griffel/react": "^1.5.32",
|
|
26
28
|
"@swc/helpers": "^0.5.1"
|
|
27
29
|
},
|