@fluentui/react-popover 9.74.7-experimental.cli-api.20261006-ccaa611d58.0 → 9.75.0-experimental.css-modules.20261031-810ab07afb.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 +61 -17
- package/lib/components/Popover/Popover.js.map +1 -1
- package/lib/components/Popover/Popover.types.js.map +1 -1
- package/lib/components/Popover/PopoverSurfaceMotion.js.map +1 -1
- package/lib/components/Popover/constants.js.map +1 -1
- package/lib/components/Popover/index.js.map +1 -1
- package/lib/components/Popover/renderPopover.js +4 -4
- package/lib/components/Popover/renderPopover.js.map +1 -1
- package/lib/components/Popover/usePopover.js +2 -5
- package/lib/components/Popover/usePopover.js.map +1 -1
- package/lib/components/Popover/usePopoverContextValues.js.map +1 -1
- package/lib/components/PopoverSurface/PopoverSurface.js.map +1 -1
- package/lib/components/PopoverSurface/PopoverSurface.module.css +87 -0
- package/lib/components/PopoverSurface/PopoverSurface.types.js.map +1 -1
- package/lib/components/PopoverSurface/index.js.map +1 -1
- package/lib/components/PopoverSurface/renderPopoverSurface.js +2 -2
- package/lib/components/PopoverSurface/renderPopoverSurface.js.map +1 -1
- package/lib/components/PopoverSurface/usePopoverSurface.js.map +1 -1
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.styles.css.js +15 -0
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.styles.css.js.map +1 -0
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.styles.js +2 -2
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.styles.raw.css.js +15 -0
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.styles.raw.css.js.map +1 -0
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.styles.raw.js.map +1 -1
- package/lib/components/PopoverTrigger/PopoverTrigger.js.map +1 -1
- package/lib/components/PopoverTrigger/PopoverTrigger.types.js.map +1 -1
- package/lib/components/PopoverTrigger/index.js.map +1 -1
- package/lib/components/PopoverTrigger/renderPopoverTrigger.js.map +1 -1
- package/lib/components/PopoverTrigger/usePopoverTrigger.js.map +1 -1
- package/lib-commonjs/Popover.cjs +5 -5
- package/lib-commonjs/PopoverSurface.cjs +7 -7
- package/lib-commonjs/PopoverTrigger.cjs +4 -4
- package/lib-commonjs/components/Popover/Popover.cjs.map +1 -1
- package/lib-commonjs/components/Popover/Popover.types.cjs.map +1 -1
- package/lib-commonjs/components/Popover/PopoverSurfaceMotion.cjs.map +1 -1
- package/lib-commonjs/components/Popover/constants.cjs.map +1 -1
- package/lib-commonjs/components/Popover/index.cjs +5 -5
- package/lib-commonjs/components/Popover/index.cjs.map +1 -1
- package/lib-commonjs/components/Popover/renderPopover.cjs +2 -2
- package/lib-commonjs/components/Popover/renderPopover.cjs.map +1 -1
- package/lib-commonjs/components/Popover/usePopover.cjs +2 -5
- package/lib-commonjs/components/Popover/usePopover.cjs.map +1 -1
- package/lib-commonjs/components/Popover/usePopoverContextValues.cjs.map +1 -1
- package/lib-commonjs/components/PopoverSurface/PopoverSurface.cjs.map +1 -1
- package/lib-commonjs/components/PopoverSurface/PopoverSurface.module.css +87 -0
- package/lib-commonjs/components/PopoverSurface/PopoverSurface.types.cjs.map +1 -1
- package/lib-commonjs/components/PopoverSurface/index.cjs +7 -7
- package/lib-commonjs/components/PopoverSurface/index.cjs.map +1 -1
- package/lib-commonjs/components/PopoverSurface/renderPopoverSurface.cjs.map +1 -1
- package/lib-commonjs/components/PopoverSurface/usePopoverSurface.cjs.map +1 -1
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.styles.cjs +9 -9
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.styles.cjs.map +1 -1
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.styles.css.cjs +37 -0
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.styles.css.cjs.map +1 -0
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.styles.raw.cjs +4 -4
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.styles.raw.cjs.map +1 -1
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.styles.raw.css.cjs +37 -0
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.styles.raw.css.cjs.map +1 -0
- package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.cjs.map +1 -1
- package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.types.cjs.map +1 -1
- package/lib-commonjs/components/PopoverTrigger/index.cjs +4 -4
- package/lib-commonjs/components/PopoverTrigger/index.cjs.map +1 -1
- package/lib-commonjs/components/PopoverTrigger/renderPopoverTrigger.cjs.map +1 -1
- package/lib-commonjs/components/PopoverTrigger/usePopoverTrigger.cjs.map +1 -1
- package/lib-commonjs/index.cjs +16 -16
- package/lib-commonjs/index.cjs.map +1 -1
- package/lib-commonjs/popoverContext.cjs +5 -5
- package/lib-commonjs/popoverContext.cjs.map +1 -1
- package/package.json +20 -20
- package/dist/metadata/api/api-root.json +0 -1
- package/dist/metadata/index.json +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,29 +1,73 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-popover
|
|
2
2
|
|
|
3
|
-
<!-- This log was last generated on
|
|
3
|
+
<!-- This log was last generated on Sat, 31 Oct 2026 11:08:50 GMT and should not be manually modified. -->
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [9.
|
|
7
|
+
## [9.75.0-experimental.css-modules.20261031-810ab07afb.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.75.0-experimental.css-modules.20261031-810ab07afb.0)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.14.7..@fluentui/react-popover_v9.74.7-experimental.cli-api.20261006-ccaa611d58.0)
|
|
9
|
+
Sat, 31 Oct 2026 11:08:50 GMT
|
|
11
10
|
|
|
12
11
|
### Changes
|
|
13
12
|
|
|
14
|
-
- Release 9.
|
|
15
|
-
- Bump @fluentui/keyboard-keys to v9.
|
|
16
|
-
- Bump @fluentui/react-aria to v9.
|
|
17
|
-
- Bump @fluentui/react-context-selector to v9.
|
|
18
|
-
- Bump @fluentui/react-jsx-runtime to v9.
|
|
19
|
-
- Bump @fluentui/react-motion to v9.
|
|
20
|
-
- Bump @fluentui/react-motion-components-preview to v9.
|
|
21
|
-
- Bump @fluentui/react-portal to v9.
|
|
22
|
-
- Bump @fluentui/react-positioning to v9.
|
|
23
|
-
- Bump @fluentui/react-shared-contexts to v9.
|
|
24
|
-
- Bump @fluentui/react-tabster to v9.
|
|
25
|
-
- Bump @fluentui/react-theme to v9.
|
|
26
|
-
- Bump @fluentui/react-utilities to v9.
|
|
13
|
+
- Release 9.75.0-experimental.css-modules.20261031-810ab07afb ([commit](https://github.com/microsoft/fluentui/commit/undefined) by 257645319+office-ogx-auth-helper[bot]@users.noreply.github.com)
|
|
14
|
+
- Bump @fluentui/keyboard-keys to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
15
|
+
- Bump @fluentui/react-aria to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
16
|
+
- Bump @fluentui/react-context-selector to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
17
|
+
- Bump @fluentui/react-jsx-runtime to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
18
|
+
- Bump @fluentui/react-motion to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
19
|
+
- Bump @fluentui/react-motion-components-preview to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
20
|
+
- Bump @fluentui/react-portal to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
21
|
+
- Bump @fluentui/react-positioning to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
22
|
+
- Bump @fluentui/react-shared-contexts to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
23
|
+
- Bump @fluentui/react-tabster to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
24
|
+
- Bump @fluentui/react-theme to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
25
|
+
- Bump @fluentui/react-utilities to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
26
|
+
|
|
27
|
+
## [9.14.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.14.10)
|
|
28
|
+
|
|
29
|
+
Mon, 19 Oct 2026 16:49:01 GMT
|
|
30
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.14.9..@fluentui/react-popover_v9.14.10)
|
|
31
|
+
|
|
32
|
+
### Patches
|
|
33
|
+
|
|
34
|
+
- Bump @fluentui/react-aria to v9.17.16 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
35
|
+
- Bump @fluentui/react-context-selector to v9.2.21 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
36
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.7 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
37
|
+
- Bump @fluentui/react-motion to v9.16.5 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
38
|
+
- Bump @fluentui/react-motion-components-preview to v0.15.10 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
39
|
+
- Bump @fluentui/react-portal to v9.8.17 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
40
|
+
- Bump @fluentui/react-positioning to v9.23.4 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
41
|
+
- Bump @fluentui/react-tabster to v9.26.19 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
42
|
+
- Bump @fluentui/react-utilities to v9.27.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
43
|
+
|
|
44
|
+
## [9.14.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.14.9)
|
|
45
|
+
|
|
46
|
+
Wed, 23 Sep 2026 09:04:33 GMT
|
|
47
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.14.8..@fluentui/react-popover_v9.14.9)
|
|
48
|
+
|
|
49
|
+
### Patches
|
|
50
|
+
|
|
51
|
+
- Bump @fluentui/react-positioning to v9.23.3 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
52
|
+
|
|
53
|
+
## [9.14.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.14.8)
|
|
54
|
+
|
|
55
|
+
Tue, 22 Sep 2026 11:25:39 GMT
|
|
56
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.14.7..@fluentui/react-popover_v9.14.8)
|
|
57
|
+
|
|
58
|
+
### Patches
|
|
59
|
+
|
|
60
|
+
- fix: remove unused react-dom and @types/react-dom peer dependencies, mark @types/react as optional ([PR #36559](https://github.com/microsoft/fluentui/pull/36559) by martinhochel@microsoft.com)
|
|
61
|
+
- Bump @fluentui/react-aria to v9.17.15 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
62
|
+
- Bump @fluentui/react-context-selector to v9.2.20 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
63
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.6 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
64
|
+
- Bump @fluentui/react-motion to v9.16.4 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
65
|
+
- Bump @fluentui/react-motion-components-preview to v0.15.9 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
66
|
+
- Bump @fluentui/react-portal to v9.8.16 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
67
|
+
- Bump @fluentui/react-positioning to v9.23.2 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
68
|
+
- Bump @fluentui/react-shared-contexts to v9.26.4 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
69
|
+
- Bump @fluentui/react-tabster to v9.26.18 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
70
|
+
- Bump @fluentui/react-utilities to v9.26.7 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
27
71
|
|
|
28
72
|
## [9.14.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.14.7)
|
|
29
73
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { usePopover_unstable } from './usePopover';\nimport { usePopoverContextValues_unstable } from './usePopoverContextValues';\nimport { renderPopover_unstable } from './renderPopover';\nimport type { PopoverProps } from './Popover.types';\n\n/**\n * Wrapper component that manages state for a PopoverTrigger and a PopoverSurface components.\n */\nexport const Popover: React.FC<PopoverProps> = props => {\n const state = usePopover_unstable(props);\n const contextValues = usePopoverContextValues_unstable(state);\n\n return renderPopover_unstable(state, contextValues);\n};\n\nPopover.displayName = 'Popover';\n"],"names":["usePopover_unstable","usePopoverContextValues_unstable","renderPopover_unstable","Popover","props","state","contextValues","displayName"],"mappings":"AAAA;AAGA,SAASA,mBAAmB,QAAQ,kBAAe;AACnD,SAASC,gCAAgC,QAAQ,+BAA4B;AAC7E,SAASC,sBAAsB,QAAQ,qBAAkB;AAGzD;;CAEC,GACD,OAAO,MAAMC,UAAkCC,CAAAA;IAC7C,MAAMC,QAAQL,oBAAoBI;IAClC,MAAME,gBAAgBL,iCAAiCI;IAEvD,OAAOH,uBAAuBG,OAAOC;AACvC,EAAE;AAEFH,QAAQI,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Popover/Popover.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, JSXElement, Slot } from '@fluentui/react-utilities';\nimport type {\n PositioningVirtualElement,\n PositioningShorthand,\n SetVirtualMouseTarget,\n} from '@fluentui/react-positioning';\nimport type { PortalProps } from '@fluentui/react-portal';\n\nexport type PopoverSlots = {\n /**\n * Slot for the surface motion animation.\n * For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs).\n */\n surfaceMotion: Slot<PresenceMotionSlotProps>;\n};\n\nexport type InternalPopoverSlots = {\n surfaceMotion: NonNullable<Slot<PresenceMotionSlotProps>>;\n};\n\n/**\n * Determines popover padding and arrow size\n */\nexport type PopoverSize = 'small' | 'medium' | 'large';\n\n/**\n * Popover Props\n */\nexport type PopoverProps = ComponentProps<Partial<PopoverSlots>> &\n Pick<PortalProps, 'mountNode'> & {\n /**\n * A popover can appear styled with brand or inverted.\n * When not specified, the default style is used.\n */\n appearance?: 'brand' | 'inverted';\n\n /**\n * Can contain two children including `PopoverTrigger` and `PopoverSurface`.\n * Alternatively can only contain `PopoverSurface` if using a custom `target`.\n */\n children: [JSXElement, JSXElement] | JSXElement;\n\n /**\n * Close when scroll outside of it\n *\n * @default false\n */\n closeOnScroll?: boolean;\n\n /**\n * Used to set the initial open state of the Popover in uncontrolled mode\n *\n * @default false\n */\n defaultOpen?: boolean;\n\n /**\n * Popovers are rendered out of DOM order on `document.body` by default, use this to render the popover in DOM order\n *\n * @default false\n */\n inline?: boolean;\n\n /**\n * Sets the delay for closing popover on mouse leave\n */\n mouseLeaveDelay?: number;\n\n /**\n * Display an arrow pointing to the target.\n *\n * @default false\n */\n withArrow?: boolean;\n\n /**\n * Call back when the component requests to change value\n * The `open` value is used as a hint when directly controlling the component\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onOpenChange?: (e: OpenPopoverEvents, data: OnOpenChangeData) => void;\n\n /**\n * Controls the opening of the Popover\n *\n * @default false\n */\n open?: boolean;\n\n /**\n * Flag to open the Popover as a context menu. Disables all other interactions\n *\n * @default false\n */\n openOnContext?: boolean;\n\n /**\n * Flag to open the Popover by hovering the trigger\n *\n * @default false\n */\n openOnHover?: boolean;\n\n /**\n * Flag to close the Popover when an iframe outside a PopoverSurface is focused\n *\n * @default true\n */\n closeOnIframeFocus?: boolean;\n\n /**\n * Configures the position of the Popover.\n * Explore [Positioning docs](https://react.fluentui.dev/?path=/docs/concepts-developer-positioning-components--docs) for more options.\n */\n positioning?: PositioningShorthand;\n\n /**\n * Determines popover padding and arrow size\n *\n * @default medium\n */\n size?: PopoverSize;\n\n /**\n * Should trap focus\n *\n * @default false\n */\n trapFocus?: boolean;\n\n /**\n * Must be used with the `trapFocus` prop\n * Enables older Fluent UI focus trap behavior where the user\n * cannot tab into the window outside of the document. This is now\n * non-standard behavior according to the [HTML dialog spec](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)\n * where the focus trap involves setting outside elements inert.\n *\n * @deprecated this behavior is default provided now, to opt-out of it in favor of standard behavior use the `inertTrapFocus` property\n */\n legacyTrapFocus?: boolean;\n /**\n * Enables standard behavior according to the [HTML dialog spec](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)\n * where the focus trap involves setting outside elements inert,\n * making navigation leak from the trapped area back to the browser toolbar and vice-versa.\n *\n * @default false\n */\n inertTrapFocus?: boolean;\n\n /**\n * By default Popover focuses the first focusable element in PopoverSurface on open.\n * Specify `disableAutoFocus` to prevent this behavior.\n *\n * @default false\n */\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_disableAutoFocus?: boolean;\n };\n\n/**\n * Popover State\n */\nexport type PopoverState = ComponentState<InternalPopoverSlots> &\n Pick<\n PopoverProps,\n | 'appearance'\n | 'mountNode'\n | 'onOpenChange'\n | 'openOnContext'\n | 'openOnHover'\n | 'trapFocus'\n | 'withArrow'\n | 'inertTrapFocus'\n > &\n Required<Pick<PopoverProps, 'inline' | 'open'>> &\n Pick<PopoverProps, 'children'> & {\n /**\n * Ref of the pointing arrow\n */\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n arrowRef: React.MutableRefObject<HTMLDivElement | null>;\n\n /**\n * Ref of the PopoverSurface\n */\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n contentRef: React.MutableRefObject<HTMLElement | null>;\n\n /**\n * Anchors the popper to the mouse click for context events\n */\n contextTarget: PositioningVirtualElement | undefined;\n\n popoverSurface: React.ReactElement | undefined;\n\n popoverTrigger: React.ReactElement | undefined;\n\n /**\n * A callback to set the target of the popper to the mouse click for context events\n */\n setContextTarget: SetVirtualMouseTarget;\n\n /**\n * Callback to open/close the Popover\n */\n setOpen: (e: OpenPopoverEvents, open: boolean) => void;\n\n size: NonNullable<PopoverProps['size']>;\n\n /**\n * Callback to toggle the open state of the Popover\n */\n toggleOpen: (e: OpenPopoverEvents) => void;\n\n /**\n * Ref of the PopoverTrigger\n */\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n triggerRef: React.MutableRefObject<HTMLElement | null>;\n };\n\n/**\n * Data attached to open/close events\n */\nexport type OnOpenChangeData = { open: boolean };\n\n/**\n * The supported events that will trigger open/close of the menu\n */\nexport type OpenPopoverEvents =\n | MouseEvent\n | TouchEvent\n | FocusEvent\n | React.FocusEvent<HTMLElement>\n | React.KeyboardEvent<HTMLElement>\n | React.MouseEvent<HTMLElement>;\n"],"names":[],"mappings":"AAoOA;;CAEC,GACD,WAMkC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
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 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Popover/constants.ts"],"sourcesContent":["/**\n * The default value of the tooltip's border radius (borderRadiusMedium).\n *\n * Unfortunately, Popper requires it to be specified as a variable instead of using CSS.\n * While we could use getComputedStyle, that adds a performance penalty for something that\n * will likely never change.\n *\n * @internal\n */\nexport const popoverSurfaceBorderRadius = 4;\n"],"names":["popoverSurfaceBorderRadius"],"mappings":"AAAA;;;;;;;;CAQC,GACD,OAAO,MAAMA,6BAA6B,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Popover/index.ts"],"sourcesContent":["export { Popover } from './Popover';\nexport type { OnOpenChangeData, OpenPopoverEvents, PopoverProps, PopoverSize, PopoverState } from './Popover.types';\nexport { renderPopover_unstable } from './renderPopover';\nexport { usePopover_unstable } from './usePopover';\nexport { usePopoverContextValues_unstable } from './usePopoverContextValues';\nexport type { PopoverContextValues } from './usePopoverContextValues';\n"],"names":["Popover","renderPopover_unstable","usePopover_unstable","usePopoverContextValues_unstable"],"mappings":"AAAA,SAASA,OAAO,QAAQ,eAAY;AAEpC,SAASC,sBAAsB,QAAQ,qBAAkB;AACzD,SAASC,mBAAmB,QAAQ,kBAAe;AACnD,SAASC,gCAAgC,QAAQ,+BAA4B"}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
import * as React from "react";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
|
|
2
|
+
import * as React from "react";
|
|
3
3
|
import { assertSlots } from "@fluentui/react-utilities";
|
|
4
4
|
import { MotionRefForwarder } from "@fluentui/react-motion";
|
|
5
5
|
import { PopoverContext, popoverContextDefaultValue } from "../../popoverContext.js";
|
|
6
6
|
/**
|
|
7
7
|
* Render the final JSX of Popover
|
|
8
8
|
*/ export const renderPopover_unstable = (state, contextValues)=>{
|
|
9
|
+
var _ref;
|
|
9
10
|
assertSlots(state);
|
|
10
|
-
var _contextValues_popover;
|
|
11
11
|
return /*#__PURE__*/ _jsxs(PopoverContext.Provider, {
|
|
12
|
-
value: (
|
|
12
|
+
value: (_ref = contextValues === null || contextValues === void 0 ? void 0 : contextValues.popover) !== null && _ref !== void 0 ? _ref : popoverContextDefaultValue,
|
|
13
13
|
children: [
|
|
14
14
|
state.popoverTrigger,
|
|
15
15
|
state.popoverSurface && /*#__PURE__*/ _jsx(state.surfaceMotion, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Popover/renderPopover.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport * as React from 'react';\nimport { assertSlots, type JSXElement } from '@fluentui/react-utilities';\nimport { MotionRefForwarder } from '@fluentui/react-motion';\nimport { PopoverContext, popoverContextDefaultValue } from '../../popoverContext';\nimport type { InternalPopoverSlots, PopoverState } from './Popover.types';\nimport type { PopoverContextValues } from './usePopoverContextValues';\n\n/**\n * Render the final JSX of Popover\n */\nexport const renderPopover_unstable = (state: PopoverState, contextValues?: PopoverContextValues): JSXElement => {\n assertSlots<InternalPopoverSlots>(state);\n\n return (\n <PopoverContext.Provider value={contextValues?.popover ?? popoverContextDefaultValue}>\n {state.popoverTrigger}\n {state.popoverSurface && (\n <state.surfaceMotion>\n <MotionRefForwarder>\n {/* Casting here as content should be equivalent to <PopoverSurface /> */}\n {/* FIXME: content should not be ReactNode it should be ReactElement instead. */}\n {state.popoverSurface as React.ReactElement}\n </MotionRefForwarder>\n </state.surfaceMotion>\n )}\n </PopoverContext.Provider>\n );\n};\n"],"names":["React","assertSlots","MotionRefForwarder","PopoverContext","popoverContextDefaultValue","renderPopover_unstable","state","contextValues","Provider","value","popover","popoverTrigger","popoverSurface","surfaceMotion"],"mappings":";AAAA,0BAA0B,GAC1B,iDAAiD,GAEjD,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,QAAyB,4BAA4B;AACzE,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SAASC,cAAc,EAAEC,0BAA0B,QAAQ,0BAAuB;AAIlF;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAqBC;;IAC1DN,YAAkCK;IAElC,qBACE,MAACH,eAAeK,QAAQ;QAACC,KAAK,UAAEF,0BAAAA,oCAAAA,cAAeG,OAAO,uCAAIN;;YACvDE,MAAMK,cAAc;YACpBL,MAAMM,cAAc,kBACnB,KAACN,MAAMO,aAAa;0BAClB,cAAA,KAACX;8BAGEI,MAAMM,cAAc;;;;;AAMjC,EAAE"}
|
|
@@ -16,6 +16,7 @@ import { PopoverSurfaceMotion } from "./PopoverSurfaceMotion.js";
|
|
|
16
16
|
*
|
|
17
17
|
* @param props - props from this instance of Popover
|
|
18
18
|
*/ export const usePopover_unstable = (props)=>{
|
|
19
|
+
var _props_closeOnIframeFocus, _props_closeOnFocusOutside, _props_inertTrapFocus, _props_inline;
|
|
19
20
|
const [contextTarget, setContextTarget] = usePositioningMouseTarget();
|
|
20
21
|
const { targetDocument } = useFluent();
|
|
21
22
|
const positioning = resolvePositioningShorthand(props.positioning);
|
|
@@ -79,7 +80,6 @@ import { PopoverSurfaceMotion } from "./PopoverSurfaceMotion.js";
|
|
|
79
80
|
open
|
|
80
81
|
]);
|
|
81
82
|
const positioningRefs = usePopoverRefs(initialState);
|
|
82
|
-
var _props_closeOnIframeFocus;
|
|
83
83
|
useOnClickOutside({
|
|
84
84
|
contains: elementContains,
|
|
85
85
|
element: targetDocument,
|
|
@@ -103,7 +103,6 @@ import { PopoverSurfaceMotion } from "./PopoverSurfaceMotion.js";
|
|
|
103
103
|
],
|
|
104
104
|
disabled: !open || !closeOnScroll
|
|
105
105
|
});
|
|
106
|
-
var _props_closeOnFocusOutside;
|
|
107
106
|
// When trapFocus is enabled, dismiss the popover only on a genuine inside -> outside focus
|
|
108
107
|
// transition. Focus that was never inside - e.g. a consumer keeping focus on an external element
|
|
109
108
|
// via `unstable_disableAutoFocus` - must not dismiss it on an outside -> outside focus change.
|
|
@@ -111,10 +110,9 @@ import { PopoverSurfaceMotion } from "./PopoverSurfaceMotion.js";
|
|
|
111
110
|
const closeOnFocusOutside = (_props_closeOnFocusOutside = props.closeOnFocusOutside) !== null && _props_closeOnFocusOutside !== void 0 ? _props_closeOnFocusOutside : true;
|
|
112
111
|
const focusWasInsideRef = React.useRef(false);
|
|
113
112
|
const closeOnFocusOutCallback = useEventCallback((ev)=>{
|
|
114
|
-
var _ev_composedPath_;
|
|
113
|
+
var _ev_composedPath_, _positioningRefs_triggerRef_current;
|
|
115
114
|
const target = (_ev_composedPath_ = ev.composedPath()[0]) !== null && _ev_composedPath_ !== void 0 ? _ev_composedPath_ : ev.target;
|
|
116
115
|
const contentElement = positioningRefs.contentRef.current;
|
|
117
|
-
var _positioningRefs_triggerRef_current;
|
|
118
116
|
const triggerElement = (_positioningRefs_triggerRef_current = positioningRefs.triggerRef.current) !== null && _positioningRefs_triggerRef_current !== void 0 ? _positioningRefs_triggerRef_current : null;
|
|
119
117
|
if (!contentElement) {
|
|
120
118
|
return;
|
|
@@ -171,7 +169,6 @@ import { PopoverSurfaceMotion } from "./PopoverSurfaceMotion.js";
|
|
|
171
169
|
positioningRefs.contentRef,
|
|
172
170
|
props.unstable_disableAutoFocus
|
|
173
171
|
]);
|
|
174
|
-
var _props_inertTrapFocus, _props_inline;
|
|
175
172
|
return {
|
|
176
173
|
components: {
|
|
177
174
|
surfaceMotion: PopoverSurfaceMotion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Popover/usePopover.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n useControllableState,\n useEventCallback,\n useOnClickOutside,\n useOnScrollOutside,\n elementContains,\n useTimeout,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n usePositioning,\n resolvePositioningShorthand,\n mergeArrowOffset,\n usePositioningMouseTarget,\n usePositioningSlideDirection,\n} from '@fluentui/react-positioning';\nimport { useFocusFinders, useActivateModal } from '@fluentui/react-tabster';\nimport { arrowHeights } from '../PopoverSurface/index';\nimport type { OpenPopoverEvents, PopoverProps, PopoverState } from './Popover.types';\nimport { popoverSurfaceBorderRadius } from './constants';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { PopoverSurfaceMotion } from './PopoverSurfaceMotion';\n\n/**\n * Create the state required to render Popover.\n *\n * The returned state can be modified with hooks such as usePopoverStyles,\n * before being passed to renderPopover_unstable.\n *\n * @param props - props from this instance of Popover\n */\nexport const usePopover_unstable = (props: PopoverProps): PopoverState => {\n const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n const { targetDocument } = useFluent();\n\n const positioning = resolvePositioningShorthand(props.positioning);\n const handlePositionEnd = usePositioningSlideDirection({\n targetDocument,\n onPositioningEnd: positioning.onPositioningEnd,\n });\n\n const initialState = {\n size: 'medium',\n contextTarget,\n setContextTarget,\n ...props,\n positioning: {\n ...positioning,\n onPositioningEnd: handlePositionEnd,\n },\n } as const;\n\n const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n if (process.env.NODE_ENV !== 'production') {\n if (children.length === 0) {\n // eslint-disable-next-line no-console\n console.warn('Popover must contain at least one child');\n }\n\n if (children.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('Popover must contain at most two children');\n }\n }\n\n let popoverTrigger: React.ReactElement | undefined = undefined;\n let popoverSurface: React.ReactElement | undefined = undefined;\n if (children.length === 2) {\n popoverTrigger = children[0];\n popoverSurface = children[1];\n } else if (children.length === 1) {\n popoverSurface = children[0];\n }\n\n const [open, setOpenState] = useOpenState(initialState);\n\n const [setOpenTimeout, clearOpenTimeout] = useTimeout();\n const setOpen = useEventCallback((e: OpenPopoverEvents, shouldOpen: boolean) => {\n clearOpenTimeout();\n if (!(e instanceof Event) && e.persist) {\n // < React 17 still uses pooled synthetic events\n e.persist();\n }\n\n if (e.type === 'mouseleave') {\n // FIXME leaking Node timeout type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n setOpenTimeout(() => {\n setOpenState(e, shouldOpen);\n }, props.mouseLeaveDelay ?? 500);\n } else {\n setOpenState(e, shouldOpen);\n }\n });\n\n const toggleOpen = React.useCallback<PopoverState['toggleOpen']>(\n (e: OpenPopoverEvents) => {\n setOpen(e, !open);\n },\n [setOpen, open],\n );\n\n const positioningRefs = usePopoverRefs(initialState);\n\n useOnClickOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, false),\n refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n disabled: !open,\n disabledFocusOnIframe: !(props.closeOnIframeFocus ?? true),\n });\n\n // only close on scroll for context, or when closeOnScroll is specified\n const closeOnScroll = initialState.openOnContext || initialState.closeOnScroll;\n useOnScrollOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, false),\n refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n disabled: !open || !closeOnScroll,\n });\n\n // When trapFocus is enabled, dismiss the popover only on a genuine inside -> outside focus\n // transition. Focus that was never inside - e.g. a consumer keeping focus on an external element\n // via `unstable_disableAutoFocus` - must not dismiss it on an outside -> outside focus change.\n // Internal `closeOnFocusOutside` prop allows consumers to opt out during gradual rollout.\n const closeOnFocusOutside = (props as PopoverProps & { closeOnFocusOutside?: boolean }).closeOnFocusOutside ?? true;\n\n const focusWasInsideRef = React.useRef(false);\n\n const closeOnFocusOutCallback = useEventCallback((ev: FocusEvent) => {\n const target = (ev.composedPath()[0] ?? ev.target) as HTMLElement | null;\n const contentElement = positioningRefs.contentRef.current;\n const triggerElement = positioningRefs.triggerRef.current ?? null;\n\n if (!contentElement) {\n return;\n }\n\n const isInside = elementContains(contentElement, target) || elementContains(triggerElement, target);\n\n if (isInside) {\n focusWasInsideRef.current = true;\n return;\n }\n\n // Only dismiss if focus previously lived inside the popover.\n if (focusWasInsideRef.current) {\n focusWasInsideRef.current = false;\n setOpen(ev, false);\n }\n });\n\n React.useEffect(() => {\n if (!open || !props.trapFocus || !closeOnFocusOutside) {\n return;\n }\n\n focusWasInsideRef.current = false;\n targetDocument?.addEventListener('focusin', closeOnFocusOutCallback, true);\n return () => {\n targetDocument?.removeEventListener('focusin', closeOnFocusOutCallback, true);\n };\n }, [open, props.trapFocus, closeOnFocusOutside, targetDocument, closeOnFocusOutCallback]);\n\n const { findFirstFocusable } = useFocusFinders();\n const activateModal = useActivateModal();\n\n React.useEffect(() => {\n if (props.unstable_disableAutoFocus) {\n return;\n }\n\n const contentElement = positioningRefs.contentRef.current;\n\n if (open && contentElement) {\n const shouldFocusContainer = !isNaN(contentElement.getAttribute('tabIndex') ?? undefined);\n const firstFocusable = shouldFocusContainer ? contentElement : findFirstFocusable(contentElement);\n\n firstFocusable?.focus();\n\n if (shouldFocusContainer) {\n // Modal activation happens automatically when something inside the modal is focused programmatically.\n // When the container is focused, we need to activate the modal manually.\n activateModal(contentElement);\n }\n }\n }, [findFirstFocusable, activateModal, open, positioningRefs.contentRef, props.unstable_disableAutoFocus]);\n\n return {\n components: {\n surfaceMotion: PopoverSurfaceMotion,\n },\n ...initialState,\n ...positioningRefs,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n inertTrapFocus: props.inertTrapFocus ?? (props.legacyTrapFocus === undefined ? false : !props.legacyTrapFocus),\n popoverTrigger,\n popoverSurface,\n open,\n setOpen,\n toggleOpen,\n setContextTarget,\n contextTarget,\n inline: props.inline ?? false,\n surfaceMotion: presenceMotionSlot(props.surfaceMotion, {\n elementType: PopoverSurfaceMotion,\n defaultProps: {\n visible: open,\n appear: true,\n unmountOnExit: true,\n },\n }),\n };\n};\n\n/**\n * Creates and manages the Popover open state\n */\nfunction useOpenState(\n state: Pick<PopoverState, 'setContextTarget' | 'onOpenChange'> & Pick<PopoverProps, 'open' | 'defaultOpen'>,\n) {\n const onOpenChange: PopoverState['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n const [open, setOpenState] = useControllableState({\n state: state.open,\n defaultState: state.defaultOpen,\n initialState: false,\n });\n // eslint-disable-next-line react-hooks/immutability\n state.open = open !== undefined ? open : state.open;\n const setContextTarget = state.setContextTarget;\n\n const setOpen = React.useCallback(\n (e: OpenPopoverEvents, shouldOpen: boolean) => {\n if (shouldOpen && e.type === 'contextmenu') {\n setContextTarget(e as React.MouseEvent);\n }\n\n if (!shouldOpen) {\n setContextTarget(undefined);\n }\n\n setOpenState(shouldOpen);\n onOpenChange?.(e, { open: shouldOpen });\n },\n [setOpenState, onOpenChange, setContextTarget],\n );\n\n return [open, setOpen] as const;\n}\n\n/**\n * Creates and sets the necessary trigger, target and content refs used by Popover\n */\nfunction usePopoverRefs(\n state: Pick<PopoverState, 'size' | 'contextTarget'> &\n Pick<PopoverProps, 'positioning' | 'openOnContext' | 'withArrow'>,\n) {\n const positioningOptions = {\n position: 'above' as const,\n align: 'center' as const,\n arrowPadding: 2 * popoverSurfaceBorderRadius,\n target: state.openOnContext ? state.contextTarget : undefined,\n ...resolvePositioningShorthand(state.positioning),\n };\n\n // no reason to render arrow when covering the target\n if (positioningOptions.coverTarget) {\n // eslint-disable-next-line react-hooks/immutability\n state.withArrow = false;\n }\n\n if (state.withArrow) {\n positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeights[state.size]);\n }\n\n const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePositioning(positioningOptions);\n\n return {\n triggerRef,\n contentRef,\n arrowRef,\n } as const;\n}\n"],"names":["React","useControllableState","useEventCallback","useOnClickOutside","useOnScrollOutside","elementContains","useTimeout","useFluent_unstable","useFluent","usePositioning","resolvePositioningShorthand","mergeArrowOffset","usePositioningMouseTarget","usePositioningSlideDirection","useFocusFinders","useActivateModal","arrowHeights","popoverSurfaceBorderRadius","presenceMotionSlot","PopoverSurfaceMotion","usePopover_unstable","props","contextTarget","setContextTarget","targetDocument","positioning","handlePositionEnd","onPositioningEnd","initialState","size","children","Children","toArray","process","env","NODE_ENV","length","console","warn","popoverTrigger","undefined","popoverSurface","open","setOpenState","useOpenState","setOpenTimeout","clearOpenTimeout","setOpen","e","shouldOpen","Event","persist","type","mouseLeaveDelay","toggleOpen","useCallback","positioningRefs","usePopoverRefs","contains","element","callback","ev","refs","triggerRef","contentRef","disabled","disabledFocusOnIframe","closeOnIframeFocus","closeOnScroll","openOnContext","closeOnFocusOutside","focusWasInsideRef","useRef","closeOnFocusOutCallback","target","composedPath","contentElement","current","triggerElement","isInside","useEffect","trapFocus","addEventListener","removeEventListener","findFirstFocusable","activateModal","unstable_disableAutoFocus","shouldFocusContainer","isNaN","getAttribute","firstFocusable","focus","components","surfaceMotion","inertTrapFocus","legacyTrapFocus","inline","elementType","defaultProps","visible","appear","unmountOnExit","state","onOpenChange","data","defaultState","defaultOpen","positioningOptions","position","align","arrowPadding","coverTarget","withArrow","offset","targetRef","containerRef","arrowRef"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,oBAAoB,EACpBC,gBAAgB,EAChBC,iBAAiB,EACjBC,kBAAkB,EAClBC,eAAe,EACfC,UAAU,QACL,4BAA4B;AACnC,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SACEC,cAAc,EACdC,2BAA2B,EAC3BC,gBAAgB,EAChBC,yBAAyB,EACzBC,4BAA4B,QACvB,8BAA8B;AACrC,SAASC,eAAe,EAAEC,gBAAgB,QAAQ,0BAA0B;AAC5E,SAASC,YAAY,QAAQ,6BAA0B;AAEvD,SAASC,0BAA0B,QAAQ,iBAAc;AACzD,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SAASC,oBAAoB,QAAQ,4BAAyB;AAE9D;;;;;;;CAOC,GACD,OAAO,MAAMC,sBAAsB,CAACC;IAClC,MAAM,CAACC,eAAeC,iBAAiB,GAAGX;IAC1C,MAAM,EAAEY,cAAc,EAAE,GAAGhB;IAE3B,MAAMiB,cAAcf,4BAA4BW,MAAMI,WAAW;IACjE,MAAMC,oBAAoBb,6BAA6B;QACrDW;QACAG,kBAAkBF,YAAYE,gBAAgB;IAChD;IAEA,MAAMC,eAAe;QACnBC,MAAM;QACNP;QACAC;QACA,GAAGF,KAAK;QACRI,aAAa;YACX,GAAGA,WAAW;YACdE,kBAAkBD;QACpB;IACF;IAEA,MAAMI,WAAW9B,MAAM+B,QAAQ,CAACC,OAAO,CAACX,MAAMS,QAAQ;IAEtD,IAAIG,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAIL,SAASM,MAAM,KAAK,GAAG;YACzB,sCAAsC;YACtCC,QAAQC,IAAI,CAAC;QACf;QAEA,IAAIR,SAASM,MAAM,GAAG,GAAG;YACvB,sCAAsC;YACtCC,QAAQC,IAAI,CAAC;QACf;IACF;IAEA,IAAIC,iBAAiDC;IACrD,IAAIC,iBAAiDD;IACrD,IAAIV,SAASM,MAAM,KAAK,GAAG;QACzBG,iBAAiBT,QAAQ,CAAC,EAAE;QAC5BW,iBAAiBX,QAAQ,CAAC,EAAE;IAC9B,OAAO,IAAIA,SAASM,MAAM,KAAK,GAAG;QAChCK,iBAAiBX,QAAQ,CAAC,EAAE;IAC9B;IAEA,MAAM,CAACY,MAAMC,aAAa,GAAGC,aAAahB;IAE1C,MAAM,CAACiB,gBAAgBC,iBAAiB,GAAGxC;IAC3C,MAAMyC,UAAU7C,iBAAiB,CAAC8C,GAAsBC;QACtDH;QACA,IAAI,CAAEE,CAAAA,aAAaE,KAAI,KAAMF,EAAEG,OAAO,EAAE;YACtC,gDAAgD;YAChDH,EAAEG,OAAO;QACX;QAEA,IAAIH,EAAEI,IAAI,KAAK,cAAc;gBAMxB/B;YALH,kCAAkC;YAClC,6DAA6D;YAC7D,aAAa;YACbwB,eAAe;gBACbF,aAAaK,GAAGC;YAClB,GAAG5B,CAAAA,yBAAAA,MAAMgC,eAAe,cAArBhC,oCAAAA,yBAAyB;QAC9B,OAAO;YACLsB,aAAaK,GAAGC;QAClB;IACF;IAEA,MAAMK,aAAatD,MAAMuD,WAAW,CAClC,CAACP;QACCD,QAAQC,GAAG,CAACN;IACd,GACA;QAACK;QAASL;KAAK;IAGjB,MAAMc,kBAAkBC,eAAe7B;QAQZP;IAN3BlB,kBAAkB;QAChBuD,UAAUrD;QACVsD,SAASnC;QACToC,UAAUC,CAAAA,KAAMd,QAAQc,IAAI;QAC5BC,MAAM;YAACN,gBAAgBO,UAAU;YAAEP,gBAAgBQ,UAAU;SAAC;QAC9DC,UAAU,CAACvB;QACXwB,uBAAuB,CAAE7C,CAAAA,CAAAA,4BAAAA,MAAM8C,kBAAkB,cAAxB9C,uCAAAA,4BAA4B,IAAG;IAC1D;IAEA,uEAAuE;IACvE,MAAM+C,gBAAgBxC,aAAayC,aAAa,IAAIzC,aAAawC,aAAa;IAC9EhE,mBAAmB;QACjBsD,UAAUrD;QACVsD,SAASnC;QACToC,UAAUC,CAAAA,KAAMd,QAAQc,IAAI;QAC5BC,MAAM;YAACN,gBAAgBO,UAAU;YAAEP,gBAAgBQ,UAAU;SAAC;QAC9DC,UAAU,CAACvB,QAAQ,CAAC0B;IACtB;QAM4B;IAJ5B,2FAA2F;IAC3F,iGAAiG;IACjG,+FAA+F;IAC/F,0FAA0F;IAC1F,MAAME,sBAAsB,CAAA,6BAAA,AAACjD,MAA2DiD,mBAAmB,cAA/E,wCAAA,6BAAmF;IAE/G,MAAMC,oBAAoBvE,MAAMwE,MAAM,CAAC;IAEvC,MAAMC,0BAA0BvE,iBAAiB,CAAC2D;YAChCA;QAAhB,MAAMa,SAAUb,CAAAA,oBAAAA,GAAGc,YAAY,EAAE,CAAC,EAAE,cAApBd,+BAAAA,oBAAwBA,GAAGa,MAAM;QACjD,MAAME,iBAAiBpB,gBAAgBQ,UAAU,CAACa,OAAO;YAClCrB;QAAvB,MAAMsB,iBAAiBtB,CAAAA,sCAAAA,gBAAgBO,UAAU,CAACc,OAAO,cAAlCrB,iDAAAA,sCAAsC;QAE7D,IAAI,CAACoB,gBAAgB;YACnB;QACF;QAEA,MAAMG,WAAW1E,gBAAgBuE,gBAAgBF,WAAWrE,gBAAgByE,gBAAgBJ;QAE5F,IAAIK,UAAU;YACZR,kBAAkBM,OAAO,GAAG;YAC5B;QACF;QAEA,6DAA6D;QAC7D,IAAIN,kBAAkBM,OAAO,EAAE;YAC7BN,kBAAkBM,OAAO,GAAG;YAC5B9B,QAAQc,IAAI;QACd;IACF;IAEA7D,MAAMgF,SAAS,CAAC;QACd,IAAI,CAACtC,QAAQ,CAACrB,MAAM4D,SAAS,IAAI,CAACX,qBAAqB;YACrD;QACF;QAEAC,kBAAkBM,OAAO,GAAG;QAC5BrD,2BAAAA,qCAAAA,eAAgB0D,gBAAgB,CAAC,WAAWT,yBAAyB;QACrE,OAAO;YACLjD,2BAAAA,qCAAAA,eAAgB2D,mBAAmB,CAAC,WAAWV,yBAAyB;QAC1E;IACF,GAAG;QAAC/B;QAAMrB,MAAM4D,SAAS;QAAEX;QAAqB9C;QAAgBiD;KAAwB;IAExF,MAAM,EAAEW,kBAAkB,EAAE,GAAGtE;IAC/B,MAAMuE,gBAAgBtE;IAEtBf,MAAMgF,SAAS,CAAC;QACd,IAAI3D,MAAMiE,yBAAyB,EAAE;YACnC;QACF;QAEA,MAAMV,iBAAiBpB,gBAAgBQ,UAAU,CAACa,OAAO;QAEzD,IAAInC,QAAQkC,gBAAgB;gBACUA;YAApC,MAAMW,uBAAuB,CAACC,MAAMZ,CAAAA,+BAAAA,eAAea,YAAY,CAAC,yBAA5Bb,0CAAAA,+BAA2CpC;YAC/E,MAAMkD,iBAAiBH,uBAAuBX,iBAAiBQ,mBAAmBR;YAElFc,2BAAAA,qCAAAA,eAAgBC,KAAK;YAErB,IAAIJ,sBAAsB;gBACxB,sGAAsG;gBACtG,yEAAyE;gBACzEF,cAAcT;YAChB;QACF;IACF,GAAG;QAACQ;QAAoBC;QAAe3C;QAAMc,gBAAgBQ,UAAU;QAAE3C,MAAMiE,yBAAyB;KAAC;QASvFjE,uBAQRA;IAfV,OAAO;QACLuE,YAAY;YACVC,eAAe1E;QACjB;QACA,GAAGS,YAAY;QACf,GAAG4B,eAAe;QAClB,4DAA4D;QAC5DsC,gBAAgBzE,CAAAA,wBAAAA,MAAMyE,cAAc,cAApBzE,mCAAAA,wBAAyBA,MAAM0E,eAAe,KAAKvD,YAAY,QAAQ,CAACnB,MAAM0E,eAAe;QAC7GxD;QACAE;QACAC;QACAK;QACAO;QACA/B;QACAD;QACA0E,QAAQ3E,CAAAA,gBAAAA,MAAM2E,MAAM,cAAZ3E,2BAAAA,gBAAgB;QACxBwE,eAAe3E,mBAAmBG,MAAMwE,aAAa,EAAE;YACrDI,aAAa9E;YACb+E,cAAc;gBACZC,SAASzD;gBACT0D,QAAQ;gBACRC,eAAe;YACjB;QACF;IACF;AACF,EAAE;AAEF;;CAEC,GACD,SAASzD,aACP0D,KAA2G;IAE3G,MAAMC,eAA6CrG,iBAAiB,CAAC8C,GAAGwD;YAASF;gBAAAA,sBAAAA,MAAMC,YAAY,cAAlBD,0CAAAA,yBAAAA,OAAqBtD,GAAGwD;;IAEzG,MAAM,CAAC9D,MAAMC,aAAa,GAAG1C,qBAAqB;QAChDqG,OAAOA,MAAM5D,IAAI;QACjB+D,cAAcH,MAAMI,WAAW;QAC/B9E,cAAc;IAChB;IACA,oDAAoD;IACpD0E,MAAM5D,IAAI,GAAGA,SAASF,YAAYE,OAAO4D,MAAM5D,IAAI;IACnD,MAAMnB,mBAAmB+E,MAAM/E,gBAAgB;IAE/C,MAAMwB,UAAU/C,MAAMuD,WAAW,CAC/B,CAACP,GAAsBC;QACrB,IAAIA,cAAcD,EAAEI,IAAI,KAAK,eAAe;YAC1C7B,iBAAiByB;QACnB;QAEA,IAAI,CAACC,YAAY;YACf1B,iBAAiBiB;QACnB;QAEAG,aAAaM;QACbsD,yBAAAA,mCAAAA,aAAevD,GAAG;YAAEN,MAAMO;QAAW;IACvC,GACA;QAACN;QAAc4D;QAAchF;KAAiB;IAGhD,OAAO;QAACmB;QAAMK;KAAQ;AACxB;AAEA;;CAEC,GACD,SAASU,eACP6C,KACmE;IAEnE,MAAMK,qBAAqB;QACzBC,UAAU;QACVC,OAAO;QACPC,cAAc,IAAI7F;QAClByD,QAAQ4B,MAAMjC,aAAa,GAAGiC,MAAMhF,aAAa,GAAGkB;QACpD,GAAG9B,4BAA4B4F,MAAM7E,WAAW,CAAC;IACnD;IAEA,qDAAqD;IACrD,IAAIkF,mBAAmBI,WAAW,EAAE;QAClC,oDAAoD;QACpDT,MAAMU,SAAS,GAAG;IACpB;IAEA,IAAIV,MAAMU,SAAS,EAAE;QACnBL,mBAAmBM,MAAM,GAAGtG,iBAAiBgG,mBAAmBM,MAAM,EAAEjG,YAAY,CAACsF,MAAMzE,IAAI,CAAC;IAClG;IAEA,MAAM,EAAEqF,WAAWnD,UAAU,EAAEoD,cAAcnD,UAAU,EAAEoD,QAAQ,EAAE,GAAG3G,eAAekG;IAErF,OAAO;QACL5C;QACAC;QACAoD;IACF;AACF"}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Popover/usePopover.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n useControllableState,\n useEventCallback,\n useOnClickOutside,\n useOnScrollOutside,\n elementContains,\n useTimeout,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n usePositioning,\n resolvePositioningShorthand,\n mergeArrowOffset,\n usePositioningMouseTarget,\n usePositioningSlideDirection,\n} from '@fluentui/react-positioning';\nimport { useFocusFinders, useActivateModal } from '@fluentui/react-tabster';\nimport { arrowHeights } from '../PopoverSurface/index';\nimport type { OpenPopoverEvents, PopoverProps, PopoverState } from './Popover.types';\nimport { popoverSurfaceBorderRadius } from './constants';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { PopoverSurfaceMotion } from './PopoverSurfaceMotion';\n\n/**\n * Create the state required to render Popover.\n *\n * The returned state can be modified with hooks such as usePopoverStyles,\n * before being passed to renderPopover_unstable.\n *\n * @param props - props from this instance of Popover\n */\nexport const usePopover_unstable = (props: PopoverProps): PopoverState => {\n const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n const { targetDocument } = useFluent();\n\n const positioning = resolvePositioningShorthand(props.positioning);\n const handlePositionEnd = usePositioningSlideDirection({\n targetDocument,\n onPositioningEnd: positioning.onPositioningEnd,\n });\n\n const initialState = {\n size: 'medium',\n contextTarget,\n setContextTarget,\n ...props,\n positioning: {\n ...positioning,\n onPositioningEnd: handlePositionEnd,\n },\n } as const;\n\n const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n if (process.env.NODE_ENV !== 'production') {\n if (children.length === 0) {\n // eslint-disable-next-line no-console\n console.warn('Popover must contain at least one child');\n }\n\n if (children.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('Popover must contain at most two children');\n }\n }\n\n let popoverTrigger: React.ReactElement | undefined = undefined;\n let popoverSurface: React.ReactElement | undefined = undefined;\n if (children.length === 2) {\n popoverTrigger = children[0];\n popoverSurface = children[1];\n } else if (children.length === 1) {\n popoverSurface = children[0];\n }\n\n const [open, setOpenState] = useOpenState(initialState);\n\n const [setOpenTimeout, clearOpenTimeout] = useTimeout();\n const setOpen = useEventCallback((e: OpenPopoverEvents, shouldOpen: boolean) => {\n clearOpenTimeout();\n if (!(e instanceof Event) && e.persist) {\n // < React 17 still uses pooled synthetic events\n e.persist();\n }\n\n if (e.type === 'mouseleave') {\n // FIXME leaking Node timeout type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n setOpenTimeout(() => {\n setOpenState(e, shouldOpen);\n }, props.mouseLeaveDelay ?? 500);\n } else {\n setOpenState(e, shouldOpen);\n }\n });\n\n const toggleOpen = React.useCallback<PopoverState['toggleOpen']>(\n (e: OpenPopoverEvents) => {\n setOpen(e, !open);\n },\n [setOpen, open],\n );\n\n const positioningRefs = usePopoverRefs(initialState);\n\n useOnClickOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, false),\n refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n disabled: !open,\n disabledFocusOnIframe: !(props.closeOnIframeFocus ?? true),\n });\n\n // only close on scroll for context, or when closeOnScroll is specified\n const closeOnScroll = initialState.openOnContext || initialState.closeOnScroll;\n useOnScrollOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, false),\n refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n disabled: !open || !closeOnScroll,\n });\n\n // When trapFocus is enabled, dismiss the popover only on a genuine inside -> outside focus\n // transition. Focus that was never inside - e.g. a consumer keeping focus on an external element\n // via `unstable_disableAutoFocus` - must not dismiss it on an outside -> outside focus change.\n // Internal `closeOnFocusOutside` prop allows consumers to opt out during gradual rollout.\n const closeOnFocusOutside = (props as PopoverProps & { closeOnFocusOutside?: boolean }).closeOnFocusOutside ?? true;\n\n const focusWasInsideRef = React.useRef(false);\n\n const closeOnFocusOutCallback = useEventCallback((ev: FocusEvent) => {\n const target = (ev.composedPath()[0] ?? ev.target) as HTMLElement | null;\n const contentElement = positioningRefs.contentRef.current;\n const triggerElement = positioningRefs.triggerRef.current ?? null;\n\n if (!contentElement) {\n return;\n }\n\n const isInside = elementContains(contentElement, target) || elementContains(triggerElement, target);\n\n if (isInside) {\n focusWasInsideRef.current = true;\n return;\n }\n\n // Only dismiss if focus previously lived inside the popover.\n if (focusWasInsideRef.current) {\n focusWasInsideRef.current = false;\n setOpen(ev, false);\n }\n });\n\n React.useEffect(() => {\n if (!open || !props.trapFocus || !closeOnFocusOutside) {\n return;\n }\n\n focusWasInsideRef.current = false;\n targetDocument?.addEventListener('focusin', closeOnFocusOutCallback, true);\n return () => {\n targetDocument?.removeEventListener('focusin', closeOnFocusOutCallback, true);\n };\n }, [open, props.trapFocus, closeOnFocusOutside, targetDocument, closeOnFocusOutCallback]);\n\n const { findFirstFocusable } = useFocusFinders();\n const activateModal = useActivateModal();\n\n React.useEffect(() => {\n if (props.unstable_disableAutoFocus) {\n return;\n }\n\n const contentElement = positioningRefs.contentRef.current;\n\n if (open && contentElement) {\n const shouldFocusContainer = !isNaN(contentElement.getAttribute('tabIndex') ?? undefined);\n const firstFocusable = shouldFocusContainer ? contentElement : findFirstFocusable(contentElement);\n\n firstFocusable?.focus();\n\n if (shouldFocusContainer) {\n // Modal activation happens automatically when something inside the modal is focused programmatically.\n // When the container is focused, we need to activate the modal manually.\n activateModal(contentElement);\n }\n }\n }, [findFirstFocusable, activateModal, open, positioningRefs.contentRef, props.unstable_disableAutoFocus]);\n\n return {\n components: {\n surfaceMotion: PopoverSurfaceMotion,\n },\n ...initialState,\n ...positioningRefs,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n inertTrapFocus: props.inertTrapFocus ?? (props.legacyTrapFocus === undefined ? false : !props.legacyTrapFocus),\n popoverTrigger,\n popoverSurface,\n open,\n setOpen,\n toggleOpen,\n setContextTarget,\n contextTarget,\n inline: props.inline ?? false,\n surfaceMotion: presenceMotionSlot(props.surfaceMotion, {\n elementType: PopoverSurfaceMotion,\n defaultProps: {\n visible: open,\n appear: true,\n unmountOnExit: true,\n },\n }),\n };\n};\n\n/**\n * Creates and manages the Popover open state\n */\nfunction useOpenState(\n state: Pick<PopoverState, 'setContextTarget' | 'onOpenChange'> & Pick<PopoverProps, 'open' | 'defaultOpen'>,\n) {\n const onOpenChange: PopoverState['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n const [open, setOpenState] = useControllableState({\n state: state.open,\n defaultState: state.defaultOpen,\n initialState: false,\n });\n // eslint-disable-next-line react-hooks/immutability\n state.open = open !== undefined ? open : state.open;\n const setContextTarget = state.setContextTarget;\n\n const setOpen = React.useCallback(\n (e: OpenPopoverEvents, shouldOpen: boolean) => {\n if (shouldOpen && e.type === 'contextmenu') {\n setContextTarget(e as React.MouseEvent);\n }\n\n if (!shouldOpen) {\n setContextTarget(undefined);\n }\n\n setOpenState(shouldOpen);\n onOpenChange?.(e, { open: shouldOpen });\n },\n [setOpenState, onOpenChange, setContextTarget],\n );\n\n return [open, setOpen] as const;\n}\n\n/**\n * Creates and sets the necessary trigger, target and content refs used by Popover\n */\nfunction usePopoverRefs(\n state: Pick<PopoverState, 'size' | 'contextTarget'> &\n Pick<PopoverProps, 'positioning' | 'openOnContext' | 'withArrow'>,\n) {\n const positioningOptions = {\n position: 'above' as const,\n align: 'center' as const,\n arrowPadding: 2 * popoverSurfaceBorderRadius,\n target: state.openOnContext ? state.contextTarget : undefined,\n ...resolvePositioningShorthand(state.positioning),\n };\n\n // no reason to render arrow when covering the target\n if (positioningOptions.coverTarget) {\n // eslint-disable-next-line react-hooks/immutability\n state.withArrow = false;\n }\n\n if (state.withArrow) {\n positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeights[state.size]);\n }\n\n const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePositioning(positioningOptions);\n\n return {\n triggerRef,\n contentRef,\n arrowRef,\n } as const;\n}\n"],"names":["React","useControllableState","useEventCallback","useOnClickOutside","useOnScrollOutside","elementContains","useTimeout","useFluent_unstable","useFluent","usePositioning","resolvePositioningShorthand","mergeArrowOffset","usePositioningMouseTarget","usePositioningSlideDirection","useFocusFinders","useActivateModal","arrowHeights","popoverSurfaceBorderRadius","presenceMotionSlot","PopoverSurfaceMotion","usePopover_unstable","props","contextTarget","setContextTarget","targetDocument","positioning","handlePositionEnd","onPositioningEnd","initialState","size","children","Children","toArray","process","env","NODE_ENV","length","console","warn","popoverTrigger","undefined","popoverSurface","open","setOpenState","useOpenState","setOpenTimeout","clearOpenTimeout","setOpen","e","shouldOpen","Event","persist","type","mouseLeaveDelay","toggleOpen","useCallback","positioningRefs","usePopoverRefs","contains","element","callback","ev","refs","triggerRef","contentRef","disabled","disabledFocusOnIframe","closeOnIframeFocus","closeOnScroll","openOnContext","closeOnFocusOutside","focusWasInsideRef","useRef","closeOnFocusOutCallback","target","composedPath","contentElement","current","triggerElement","isInside","useEffect","trapFocus","addEventListener","removeEventListener","findFirstFocusable","activateModal","unstable_disableAutoFocus","shouldFocusContainer","isNaN","getAttribute","firstFocusable","focus","components","surfaceMotion","inertTrapFocus","legacyTrapFocus","inline","elementType","defaultProps","visible","appear","unmountOnExit","state","onOpenChange","data","defaultState","defaultOpen","positioningOptions","position","align","arrowPadding","coverTarget","withArrow","offset","targetRef","containerRef","arrowRef"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,oBAAoB,EACpBC,gBAAgB,EAChBC,iBAAiB,EACjBC,kBAAkB,EAClBC,eAAe,EACfC,UAAU,QACL,4BAA4B;AACnC,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SACEC,cAAc,EACdC,2BAA2B,EAC3BC,gBAAgB,EAChBC,yBAAyB,EACzBC,4BAA4B,QACvB,8BAA8B;AACrC,SAASC,eAAe,EAAEC,gBAAgB,QAAQ,0BAA0B;AAC5E,SAASC,YAAY,QAAQ,6BAA0B;AAEvD,SAASC,0BAA0B,QAAQ,iBAAc;AACzD,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SAASC,oBAAoB,QAAQ,4BAAyB;AAE9D;;;;;;;CAOC,GACD,OAAO,MAAMC,sBAAsB,CAACC;QAiFPA,2BAiBC,4BAsEVA,uBAQRA;IA/KV,MAAM,CAACC,eAAeC,iBAAiB,GAAGX;IAC1C,MAAM,EAAEY,cAAc,EAAE,GAAGhB;IAE3B,MAAMiB,cAAcf,4BAA4BW,MAAMI,WAAW;IACjE,MAAMC,oBAAoBb,6BAA6B;QACrDW;QACAG,kBAAkBF,YAAYE,gBAAgB;IAChD;IAEA,MAAMC,eAAe;QACnBC,MAAM;QACNP;QACAC;QACA,GAAGF,KAAK;QACRI,aAAa;YACX,GAAGA,WAAW;YACdE,kBAAkBD;QACpB;IACF;IAEA,MAAMI,WAAW9B,MAAM+B,QAAQ,CAACC,OAAO,CAACX,MAAMS,QAAQ;IAEtD,IAAIG,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAIL,SAASM,MAAM,KAAK,GAAG;YACzB,sCAAsC;YACtCC,QAAQC,IAAI,CAAC;QACf;QAEA,IAAIR,SAASM,MAAM,GAAG,GAAG;YACvB,sCAAsC;YACtCC,QAAQC,IAAI,CAAC;QACf;IACF;IAEA,IAAIC,iBAAiDC;IACrD,IAAIC,iBAAiDD;IACrD,IAAIV,SAASM,MAAM,KAAK,GAAG;QACzBG,iBAAiBT,QAAQ,CAAC,EAAE;QAC5BW,iBAAiBX,QAAQ,CAAC,EAAE;IAC9B,OAAO,IAAIA,SAASM,MAAM,KAAK,GAAG;QAChCK,iBAAiBX,QAAQ,CAAC,EAAE;IAC9B;IAEA,MAAM,CAACY,MAAMC,aAAa,GAAGC,aAAahB;IAE1C,MAAM,CAACiB,gBAAgBC,iBAAiB,GAAGxC;IAC3C,MAAMyC,UAAU7C,iBAAiB,CAAC8C,GAAsBC;QACtDH;QACA,IAAI,CAAEE,CAAAA,aAAaE,KAAI,KAAMF,EAAEG,OAAO,EAAE;YACtC,gDAAgD;YAChDH,EAAEG,OAAO;QACX;QAEA,IAAIH,EAAEI,IAAI,KAAK,cAAc;gBAMxB/B;YALH,kCAAkC;YAClC,6DAA6D;YAC7D,aAAa;YACbwB,eAAe;gBACbF,aAAaK,GAAGC;YAClB,IAAG5B,yBAAAA,MAAMgC,eAAe,cAArBhC,oCAAAA,yBAAyB;QAC9B,OAAO;YACLsB,aAAaK,GAAGC;QAClB;IACF;IAEA,MAAMK,aAAatD,MAAMuD,WAAW,CAClC,CAACP;QACCD,QAAQC,GAAG,CAACN;IACd,GACA;QAACK;QAASL;KAAK;IAGjB,MAAMc,kBAAkBC,eAAe7B;IAEvCzB,kBAAkB;QAChBuD,UAAUrD;QACVsD,SAASnC;QACToC,UAAUC,CAAAA,KAAMd,QAAQc,IAAI;QAC5BC,MAAM;YAACN,gBAAgBO,UAAU;YAAEP,gBAAgBQ,UAAU;SAAC;QAC9DC,UAAU,CAACvB;QACXwB,uBAAuB,GAAE7C,4BAAAA,MAAM8C,kBAAkB,cAAxB9C,uCAAAA,4BAA4B;IACvD;IAEA,uEAAuE;IACvE,MAAM+C,gBAAgBxC,aAAayC,aAAa,IAAIzC,aAAawC,aAAa;IAC9EhE,mBAAmB;QACjBsD,UAAUrD;QACVsD,SAASnC;QACToC,UAAUC,CAAAA,KAAMd,QAAQc,IAAI;QAC5BC,MAAM;YAACN,gBAAgBO,UAAU;YAAEP,gBAAgBQ,UAAU;SAAC;QAC9DC,UAAU,CAACvB,QAAQ,CAAC0B;IACtB;IAEA,2FAA2F;IAC3F,iGAAiG;IACjG,+FAA+F;IAC/F,0FAA0F;IAC1F,MAAME,uBAAsB,6BAAA,AAACjD,MAA2DiD,mBAAmB,cAA/E,wCAAA,6BAAmF;IAE/G,MAAMC,oBAAoBvE,MAAMwE,MAAM,CAAC;IAEvC,MAAMC,0BAA0BvE,iBAAiB,CAAC2D;YAChCA,mBAEOL;QAFvB,MAAMkB,UAAUb,oBAAAA,GAAGc,YAAY,EAAE,CAAC,EAAE,cAApBd,+BAAAA,oBAAwBA,GAAGa,MAAM;QACjD,MAAME,iBAAiBpB,gBAAgBQ,UAAU,CAACa,OAAO;QACzD,MAAMC,kBAAiBtB,sCAAAA,gBAAgBO,UAAU,CAACc,OAAO,cAAlCrB,iDAAAA,sCAAsC;QAE7D,IAAI,CAACoB,gBAAgB;YACnB;QACF;QAEA,MAAMG,WAAW1E,gBAAgBuE,gBAAgBF,WAAWrE,gBAAgByE,gBAAgBJ;QAE5F,IAAIK,UAAU;YACZR,kBAAkBM,OAAO,GAAG;YAC5B;QACF;QAEA,6DAA6D;QAC7D,IAAIN,kBAAkBM,OAAO,EAAE;YAC7BN,kBAAkBM,OAAO,GAAG;YAC5B9B,QAAQc,IAAI;QACd;IACF;IAEA7D,MAAMgF,SAAS,CAAC;QACd,IAAI,CAACtC,QAAQ,CAACrB,MAAM4D,SAAS,IAAI,CAACX,qBAAqB;YACrD;QACF;QAEAC,kBAAkBM,OAAO,GAAG;QAC5BrD,2BAAAA,qCAAAA,eAAgB0D,gBAAgB,CAAC,WAAWT,yBAAyB;QACrE,OAAO;YACLjD,2BAAAA,qCAAAA,eAAgB2D,mBAAmB,CAAC,WAAWV,yBAAyB;QAC1E;IACF,GAAG;QAAC/B;QAAMrB,MAAM4D,SAAS;QAAEX;QAAqB9C;QAAgBiD;KAAwB;IAExF,MAAM,EAAEW,kBAAkB,EAAE,GAAGtE;IAC/B,MAAMuE,gBAAgBtE;IAEtBf,MAAMgF,SAAS,CAAC;QACd,IAAI3D,MAAMiE,yBAAyB,EAAE;YACnC;QACF;QAEA,MAAMV,iBAAiBpB,gBAAgBQ,UAAU,CAACa,OAAO;QAEzD,IAAInC,QAAQkC,gBAAgB;gBACUA;YAApC,MAAMW,uBAAuB,CAACC,OAAMZ,+BAAAA,eAAea,YAAY,CAAC,yBAA5Bb,0CAAAA,+BAA2CpC;YAC/E,MAAMkD,iBAAiBH,uBAAuBX,iBAAiBQ,mBAAmBR;YAElFc,2BAAAA,qCAAAA,eAAgBC,KAAK;YAErB,IAAIJ,sBAAsB;gBACxB,sGAAsG;gBACtG,yEAAyE;gBACzEF,cAAcT;YAChB;QACF;IACF,GAAG;QAACQ;QAAoBC;QAAe3C;QAAMc,gBAAgBQ,UAAU;QAAE3C,MAAMiE,yBAAyB;KAAC;IAEzG,OAAO;QACLM,YAAY;YACVC,eAAe1E;QACjB;QACA,GAAGS,YAAY;QACf,GAAG4B,eAAe;QAClB,4DAA4D;QAC5DsC,cAAc,GAAEzE,wBAAAA,MAAMyE,cAAc,cAApBzE,mCAAAA,wBAAyBA,MAAM0E,eAAe,KAAKvD,YAAY,QAAQ,CAACnB,MAAM0E,eAAe;QAC7GxD;QACAE;QACAC;QACAK;QACAO;QACA/B;QACAD;QACA0E,MAAM,GAAE3E,gBAAAA,MAAM2E,MAAM,cAAZ3E,2BAAAA,gBAAgB;QACxBwE,eAAe3E,mBAAmBG,MAAMwE,aAAa,EAAE;YACrDI,aAAa9E;YACb+E,cAAc;gBACZC,SAASzD;gBACT0D,QAAQ;gBACRC,eAAe;YACjB;QACF;IACF;AACF,EAAE;AAEF;;CAEC,GACD,SAASzD,aACP0D,KAA2G;IAE3G,MAAMC,eAA6CrG,iBAAiB,CAAC8C,GAAGwD;YAASF;gBAAAA,sBAAAA,MAAMC,YAAY,cAAlBD,0CAAAA,yBAAAA,OAAqBtD,GAAGwD;;IAEzG,MAAM,CAAC9D,MAAMC,aAAa,GAAG1C,qBAAqB;QAChDqG,OAAOA,MAAM5D,IAAI;QACjB+D,cAAcH,MAAMI,WAAW;QAC/B9E,cAAc;IAChB;IACA,oDAAoD;IACpD0E,MAAM5D,IAAI,GAAGA,SAASF,YAAYE,OAAO4D,MAAM5D,IAAI;IACnD,MAAMnB,mBAAmB+E,MAAM/E,gBAAgB;IAE/C,MAAMwB,UAAU/C,MAAMuD,WAAW,CAC/B,CAACP,GAAsBC;QACrB,IAAIA,cAAcD,EAAEI,IAAI,KAAK,eAAe;YAC1C7B,iBAAiByB;QACnB;QAEA,IAAI,CAACC,YAAY;YACf1B,iBAAiBiB;QACnB;QAEAG,aAAaM;QACbsD,yBAAAA,mCAAAA,aAAevD,GAAG;YAAEN,MAAMO;QAAW;IACvC,GACA;QAACN;QAAc4D;QAAchF;KAAiB;IAGhD,OAAO;QAACmB;QAAMK;KAAQ;AACxB;AAEA;;CAEC,GACD,SAASU,eACP6C,KACmE;IAEnE,MAAMK,qBAAqB;QACzBC,UAAU;QACVC,OAAO;QACPC,cAAc,IAAI7F;QAClByD,QAAQ4B,MAAMjC,aAAa,GAAGiC,MAAMhF,aAAa,GAAGkB;QACpD,GAAG9B,4BAA4B4F,MAAM7E,WAAW,CAAC;IACnD;IAEA,qDAAqD;IACrD,IAAIkF,mBAAmBI,WAAW,EAAE;QAClC,oDAAoD;QACpDT,MAAMU,SAAS,GAAG;IACpB;IAEA,IAAIV,MAAMU,SAAS,EAAE;QACnBL,mBAAmBM,MAAM,GAAGtG,iBAAiBgG,mBAAmBM,MAAM,EAAEjG,YAAY,CAACsF,MAAMzE,IAAI,CAAC;IAClG;IAEA,MAAM,EAAEqF,WAAWnD,UAAU,EAAEoD,cAAcnD,UAAU,EAAEoD,QAAQ,EAAE,GAAG3G,eAAekG;IAErF,OAAO;QACL5C;QACAC;QACAoD;IACF;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Popover/usePopoverContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { PopoverContextValue } from '../../popoverContext';\nimport type { PopoverState } from './Popover.types';\n\nexport type PopoverContextValues = {\n popover: PopoverContextValue;\n};\n\nexport function usePopoverContextValues_unstable(state: PopoverState): PopoverContextValues {\n const {\n appearance,\n arrowRef,\n contentRef,\n inline,\n mountNode,\n open,\n openOnContext,\n openOnHover,\n setOpen,\n size,\n toggleOpen,\n trapFocus,\n triggerRef,\n withArrow,\n inertTrapFocus,\n } = state;\n\n const popover = React.useMemo<PopoverContextValue>(\n () => ({\n appearance,\n arrowRef,\n contentRef,\n inline,\n mountNode,\n open,\n openOnContext,\n openOnHover,\n setOpen,\n size,\n toggleOpen,\n trapFocus,\n triggerRef,\n withArrow,\n inertTrapFocus,\n }),\n [\n appearance,\n arrowRef,\n contentRef,\n inline,\n mountNode,\n open,\n openOnContext,\n openOnHover,\n setOpen,\n size,\n toggleOpen,\n trapFocus,\n triggerRef,\n withArrow,\n inertTrapFocus,\n ],\n );\n\n return { popover };\n}\n"],"names":["React","usePopoverContextValues_unstable","state","appearance","arrowRef","contentRef","inline","mountNode","open","openOnContext","openOnHover","setOpen","size","toggleOpen","trapFocus","triggerRef","withArrow","inertTrapFocus","popover","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAQ/B,OAAO,SAASC,iCAAiCC,KAAmB;IAClE,MAAM,EACJC,UAAU,EACVC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,IAAI,EACJC,aAAa,EACbC,WAAW,EACXC,OAAO,EACPC,IAAI,EACJC,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,cAAc,EACf,GAAGf;IAEJ,MAAMgB,UAAUlB,MAAMmB,OAAO,CAC3B,IAAO,CAAA;YACLhB;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QACEd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;KACD;IAGH,OAAO;QAAEC;IAAQ;AACnB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/PopoverSurface/PopoverSurface.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { usePopoverSurface_unstable } from './usePopoverSurface';\nimport { renderPopoverSurface_unstable } from './renderPopoverSurface';\nimport { usePopoverSurfaceStyles_unstable } from './usePopoverSurfaceStyles.styles';\nimport type { PopoverSurfaceProps } from './PopoverSurface.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * PopoverSurface component renders react children in a positioned box\n */\nexport const PopoverSurface: ForwardRefComponent<PopoverSurfaceProps> = React.forwardRef((props, ref) => {\n const state = usePopoverSurface_unstable(props, ref);\n\n usePopoverSurfaceStyles_unstable(state);\n\n useCustomStyleHook_unstable('usePopoverSurfaceStyles_unstable')(state);\n\n return renderPopoverSurface_unstable(state);\n});\n\nPopoverSurface.displayName = 'PopoverSurface';\n"],"names":["React","usePopoverSurface_unstable","renderPopoverSurface_unstable","usePopoverSurfaceStyles_unstable","useCustomStyleHook_unstable","PopoverSurface","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,yBAAsB;AACjE,SAASC,6BAA6B,QAAQ,4BAAyB;AACvE,SAASC,gCAAgC,QAAQ,sCAAmC;AAGpF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,+BAA2DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQR,2BAA2BM,OAAOC;IAEhDL,iCAAiCM;IAEjCL,4BAA4B,oCAAoCK;IAEhE,OAAOP,8BAA8BO;AACvC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
@layer fluentui {
|
|
2
|
+
.root {
|
|
3
|
+
color: var(--colorNeutralForeground1);
|
|
4
|
+
background-color: var(--colorNeutralBackground1);
|
|
5
|
+
border-radius: var(--borderRadiusMedium);
|
|
6
|
+
border: var(--strokeWidthThin) solid var(--colorTransparentStroke);
|
|
7
|
+
font-family: var(--fontFamilyBase);
|
|
8
|
+
font-size: var(--fontSizeBase300);
|
|
9
|
+
font-weight: var(--fontWeightRegular);
|
|
10
|
+
line-height: var(--lineHeightBase300);
|
|
11
|
+
filter: drop-shadow(0 0 var(--strokeWidthThick) var(--colorNeutralShadowAmbient))
|
|
12
|
+
drop-shadow(0 var(--spacingVerticalS) var(--spacingVerticalL) var(--colorNeutralShadowKey));
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.inline {
|
|
16
|
+
z-index: 1;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.inverted {
|
|
20
|
+
background-color: var(--colorNeutralBackgroundStatic);
|
|
21
|
+
color: var(--colorNeutralForegroundStaticInverted);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.brand {
|
|
25
|
+
background-color: var(--colorBrandBackground);
|
|
26
|
+
color: var(--colorNeutralForegroundOnBrand);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.small {
|
|
30
|
+
padding: var(--spacingVerticalM);
|
|
31
|
+
--fui-positioning-arrow-height: calc(1.414 * var(--spacingVerticalSNudge));
|
|
32
|
+
--fui-positioning-arrow-offset: calc(-0.707 * var(--spacingVerticalSNudge));
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.medium {
|
|
36
|
+
padding: var(--spacingVerticalL);
|
|
37
|
+
--fui-positioning-arrow-height: calc(1.414 * var(--spacingVerticalS));
|
|
38
|
+
--fui-positioning-arrow-offset: calc(-0.707 * var(--spacingVerticalS));
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.large {
|
|
42
|
+
padding: var(--spacingVerticalXL);
|
|
43
|
+
--fui-positioning-arrow-height: calc(1.414 * var(--spacingVerticalS));
|
|
44
|
+
--fui-positioning-arrow-offset: calc(-0.707 * var(--spacingVerticalS));
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.arrow {
|
|
48
|
+
box-sizing: border-box;
|
|
49
|
+
position: absolute;
|
|
50
|
+
z-index: -1;
|
|
51
|
+
background-color: inherit;
|
|
52
|
+
background-clip: content-box;
|
|
53
|
+
border-bottom-left-radius: var(--borderRadiusSmall);
|
|
54
|
+
transform: rotate(var(--fui-positioning-arrow-angle));
|
|
55
|
+
height: var(--fui-positioning-arrow-height);
|
|
56
|
+
width: var(--fui-positioning-arrow-height);
|
|
57
|
+
|
|
58
|
+
&::before {
|
|
59
|
+
content: '';
|
|
60
|
+
display: block;
|
|
61
|
+
background-color: inherit;
|
|
62
|
+
margin: calc(-1 * var(--strokeWidthThin));
|
|
63
|
+
width: 100%;
|
|
64
|
+
height: 100%;
|
|
65
|
+
border: var(--strokeWidthThin) solid var(--colorTransparentStroke);
|
|
66
|
+
border-bottom-left-radius: var(--borderRadiusSmall);
|
|
67
|
+
clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
:global([data-popper-placement^='top']) & {
|
|
71
|
+
bottom: var(--fui-positioning-arrow-offset);
|
|
72
|
+
--fui-positioning-arrow-angle: -45deg;
|
|
73
|
+
}
|
|
74
|
+
:global([data-popper-placement^='right']) & {
|
|
75
|
+
left: var(--fui-positioning-arrow-offset);
|
|
76
|
+
--fui-positioning-arrow-angle: 45deg;
|
|
77
|
+
}
|
|
78
|
+
:global([data-popper-placement^='bottom']) & {
|
|
79
|
+
top: var(--fui-positioning-arrow-offset);
|
|
80
|
+
--fui-positioning-arrow-angle: 135deg;
|
|
81
|
+
}
|
|
82
|
+
:global([data-popper-placement^='left']) & {
|
|
83
|
+
right: var(--fui-positioning-arrow-offset);
|
|
84
|
+
--fui-positioning-arrow-angle: 225deg;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/PopoverSurface/PopoverSurface.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverContextValue } from '../../popoverContext';\n\n/**\n * PopoverSurface Props\n */\nexport type PopoverSurfaceProps = ComponentProps<PopoverSurfaceSlots>;\n\n/**\n * Names of the slots in PopoverSurfaceProps\n */\nexport type PopoverSurfaceSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * PopoverSurface State\n */\nexport type PopoverSurfaceState = ComponentState<PopoverSurfaceSlots> &\n Pick<PopoverContextValue, 'appearance' | 'arrowRef' | 'inline' | 'mountNode' | 'size' | 'withArrow'> & {\n /**\n * CSS class for the arrow element\n */\n arrowClassName?: string;\n };\n"],"names":[],"mappings":"AAeA;;CAEC,GACD,WAMI"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/PopoverSurface/index.ts"],"sourcesContent":["export { PopoverSurface } from './PopoverSurface';\nexport type { PopoverSurfaceProps, PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';\nexport { renderPopoverSurface_unstable } from './renderPopoverSurface';\nexport { usePopoverSurface_unstable } from './usePopoverSurface';\nexport {\n arrowHeights,\n popoverSurfaceClassNames,\n usePopoverSurfaceStyles_unstable,\n} from './usePopoverSurfaceStyles.styles';\n"],"names":["PopoverSurface","renderPopoverSurface_unstable","usePopoverSurface_unstable","arrowHeights","popoverSurfaceClassNames","usePopoverSurfaceStyles_unstable"],"mappings":"AAAA,SAASA,cAAc,QAAQ,sBAAmB;AAElD,SAASC,6BAA6B,QAAQ,4BAAyB;AACvE,SAASC,0BAA0B,QAAQ,yBAAsB;AACjE,SACEC,YAAY,EACZC,wBAAwB,EACxBC,gCAAgC,QAC3B,sCAAmC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
import { assertSlots } from "@fluentui/react-utilities";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
|
|
2
|
+
import { assertSlots } from "@fluentui/react-utilities";
|
|
3
3
|
import { Portal } from "@fluentui/react-portal";
|
|
4
4
|
/**
|
|
5
5
|
* Render the final JSX of PopoverSurface
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/PopoverSurface/renderPopoverSurface.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { Portal } from '@fluentui/react-portal';\nimport type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';\n\n/**\n * Render the final JSX of PopoverSurface\n */\nexport const renderPopoverSurface_unstable = (state: PopoverSurfaceState): JSXElement => {\n assertSlots<PopoverSurfaceSlots>(state);\n\n const surface = (\n <state.root>\n {state.withArrow && <div ref={state.arrowRef} className={state.arrowClassName} />}\n {state.root.children}\n </state.root>\n );\n\n if (state.inline) {\n return surface;\n }\n\n return <Portal mountNode={state.mountNode}>{surface}</Portal>;\n};\n"],"names":["assertSlots","Portal","renderPopoverSurface_unstable","state","surface","root","withArrow","div","ref","arrowRef","className","arrowClassName","children","inline","mountNode"],"mappings":";AAAA,0BAA0B,GAC1B,iDAAiD,GACjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,MAAM,QAAQ,yBAAyB;AAGhD;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5CH,YAAiCG;IAEjC,MAAMC,wBACJ,MAACD,MAAME,IAAI;;YACRF,MAAMG,SAAS,kBAAI,KAACC;gBAAIC,KAAKL,MAAMM,QAAQ;gBAAEC,WAAWP,MAAMQ,cAAc;;YAC5ER,MAAME,IAAI,CAACO,QAAQ;;;IAIxB,IAAIT,MAAMU,MAAM,EAAE;QAChB,OAAOT;IACT;IAEA,qBAAO,KAACH;QAAOa,WAAWX,MAAMW,SAAS;kBAAGV;;AAC9C,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/PopoverSurface/usePopoverSurface.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext_unstable } from '../../popoverContext';\nimport type { PopoverSurfaceProps, PopoverSurfaceState } 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 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 size = usePopoverContext_unstable(context => context.size);\n const withArrow = usePopoverContext_unstable(context => context.withArrow);\n const appearance = usePopoverContext_unstable(context => context.appearance);\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 motionForwardedRef = useMotionForwardedRef();\n const { modalAttributes } = useModalAttributes({\n trapFocus,\n legacyTrapFocus: !inertTrapFocus,\n alwaysFocusable: !trapFocus,\n });\n\n const state: PopoverSurfaceState = {\n inline,\n appearance,\n withArrow,\n size,\n arrowRef,\n mountNode,\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `contentRef` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, contentRef, motionForwardedRef) 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":["getIntrinsicElementProps","useMergedRefs","slot","useModalAttributes","usePopoverContext_unstable","useMotionForwardedRef","usePopoverSurface_unstable","props","ref","contentRef","context","openOnHover","setOpen","mountNode","arrowRef","size","withArrow","appearance","trapFocus","inertTrapFocus","inline","motionForwardedRef","modalAttributes","legacyTrapFocus","alwaysFocusable","state","components","root","always","role","undefined","elementType","onMouseEnter","onMouseEnterOriginal","onMouseLeave","onMouseLeaveOriginal","onKeyDown","onKeyDownOriginal","e","key","current","contains","target","preventDefault"],"mappings":"AAAA;AAGA,SAASA,wBAAwB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAC1F,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,0BAA0B,QAAQ,0BAAuB;AAElE,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,aAAaL,2BAA2BM,CAAAA,UAAWA,QAAQD,UAAU;IAC3E,MAAME,cAAcP,2BAA2BM,CAAAA,UAAWA,QAAQC,WAAW;IAC7E,MAAMC,UAAUR,2BAA2BM,CAAAA,UAAWA,QAAQE,OAAO;IACrE,MAAMC,YAAYT,2BAA2BM,CAAAA,UAAWA,QAAQG,SAAS;IACzE,MAAMC,WAAWV,2BAA2BM,CAAAA,UAAWA,QAAQI,QAAQ;IACvE,MAAMC,OAAOX,2BAA2BM,CAAAA,UAAWA,QAAQK,IAAI;IAC/D,MAAMC,YAAYZ,2BAA2BM,CAAAA,UAAWA,QAAQM,SAAS;IACzE,MAAMC,aAAab,2BAA2BM,CAAAA,UAAWA,QAAQO,UAAU;IAC3E,MAAMC,YAAYd,2BAA2BM,CAAAA,UAAWA,QAAQQ,SAAS;IACzE,MAAMC,iBAAiBf,2BAA2BM,CAAAA,UAAWA,QAAQS,cAAc;IACnF,MAAMC,SAAShB,2BAA2BM,CAAAA,UAAWA,QAAQU,MAAM;IACnE,MAAMC,qBAAqBhB;IAC3B,MAAM,EAAEiB,eAAe,EAAE,GAAGnB,mBAAmB;QAC7Ce;QACAK,iBAAiB,CAACJ;QAClBK,iBAAiB,CAACN;IACpB;IAEA,MAAMO,QAA6B;QACjCL;QACAH;QACAD;QACAD;QACAD;QACAD;QACAa,YAAY;YACVC,MAAM;QACR;QACAA,MAAMzB,KAAK0B,MAAM,CACf5B,yBAAyB,OAAO;YAC9B,SAAS;YACT,mFAAmF;YACnF,4FAA4F;YAC5FQ,KAAKP,cAAcO,KAAKC,YAAYY;YACpCQ,MAAMX,YAAY,WAAW;YAC7B,cAAcA,YAAY,OAAOY;YACjC,GAAGR,eAAe;YAClB,GAAGf,KAAK;QACV,IACA;YAAEwB,aAAa;QAAM;IAEzB;IAEA,MAAM,EACJC,cAAcC,oBAAoB,EAClCC,cAAcC,oBAAoB,EAClCC,WAAWC,iBAAiB,EAC7B,GAAGZ,MAAME,IAAI;IACdF,MAAME,IAAI,CAACK,YAAY,GAAG,CAACM;QACzB,IAAI3B,aAAa;YACfC,QAAQ0B,GAAG;QACb;QAEAL,iCAAAA,2CAAAA,qBAAuBK;IACzB;IAEAb,MAAME,IAAI,CAACO,YAAY,GAAG,CAACI;QACzB,IAAI3B,aAAa;YACfC,QAAQ0B,GAAG;QACb;QAEAH,iCAAAA,2CAAAA,qBAAuBG;IACzB;IAEAb,MAAME,IAAI,CAACS,SAAS,GAAG,CAACE;YAGI7B;QAF1B,8DAA8D;QAC9D,mHAAmH;QACnH,IAAI6B,EAAEC,GAAG,KAAK,cAAY9B,sBAAAA,WAAW+B,OAAO,cAAlB/B,0CAAAA,oBAAoBgC,QAAQ,CAACH,EAAEI,MAAM,IAAqB;YAClFJ,EAAEK,cAAc;YAChB/B,QAAQ0B,GAAG;QACb;QAEAD,8BAAAA,wCAAAA,kBAAoBC;IACtB;IAEA,OAAOb;AACT,EAAE"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { clsx } from "clsx";
|
|
2
|
+
import styles from "./PopoverSurface.module.css";
|
|
3
|
+
export const popoverSurfaceClassNames = {
|
|
4
|
+
root: 'fui-PopoverSurface'
|
|
5
|
+
};
|
|
6
|
+
export const arrowHeights = {
|
|
7
|
+
small: 6,
|
|
8
|
+
medium: 8,
|
|
9
|
+
large: 8
|
|
10
|
+
};
|
|
11
|
+
export const usePopoverSurfaceStyles_unstable = (state)=>{
|
|
12
|
+
state.root.className = clsx(popoverSurfaceClassNames.root, styles.root, styles[state.size], state.inline && styles.inline, state.appearance && styles[state.appearance], state.root.className);
|
|
13
|
+
state.arrowClassName = styles.arrow;
|
|
14
|
+
return state;
|
|
15
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/PopoverSurface/usePopoverSurfaceStyles.styles.css.ts"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport styles from './PopoverSurface.module.css';\nimport type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';\n\nexport const popoverSurfaceClassNames: SlotClassNames<PopoverSurfaceSlots> = {\n root: 'fui-PopoverSurface',\n};\n\nexport const arrowHeights = { small: 6, medium: 8, large: 8 };\n\nexport const usePopoverSurfaceStyles_unstable = (state: PopoverSurfaceState): PopoverSurfaceState => {\n state.root.className = clsx(\n popoverSurfaceClassNames.root,\n styles.root,\n styles[state.size],\n state.inline && styles.inline,\n state.appearance && styles[state.appearance],\n state.root.className,\n );\n state.arrowClassName = styles.arrow;\n return state;\n};\n"],"names":["clsx","styles","popoverSurfaceClassNames","root","arrowHeights","small","medium","large","usePopoverSurfaceStyles_unstable","state","className","size","inline","appearance","arrowClassName","arrow"],"mappings":"AAAA,SAASA,IAAI,QAAQ,OAAO;AAE5B,OAAOC,YAAY,8BAA8B;AAGjD,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,eAAe;IAAEC,OAAO;IAAGC,QAAQ;IAAGC,OAAO;AAAE,EAAE;AAE9D,OAAO,MAAMC,mCAAmC,CAACC;IAC/CA,MAAMN,IAAI,CAACO,SAAS,GAAGV,KACrBE,yBAAyBC,IAAI,EAC7BF,OAAOE,IAAI,EACXF,MAAM,CAACQ,MAAME,IAAI,CAAC,EAClBF,MAAMG,MAAM,IAAIX,OAAOW,MAAM,EAC7BH,MAAMI,UAAU,IAAIZ,MAAM,CAACQ,MAAMI,UAAU,CAAC,EAC5CJ,MAAMN,IAAI,CAACO,SAAS;IAEtBD,MAAMK,cAAc,GAAGb,OAAOc,KAAK;IACnC,OAAON;AACT,EAAE"}
|
|
@@ -145,11 +145,11 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
145
145
|
p: -1
|
|
146
146
|
}], [".fop8ug2{padding:20px;}", {
|
|
147
147
|
p: -1
|
|
148
|
-
}], ".f1s3jn22{--fui-positioning-arrow-height:8.484px;}", ".fv40uqz{--fui-positioning-arrow-offset:-4.242px;}", ".f1f72gjr{--fui-positioning-arrow-height:11.312px;}", ".f69yoe5{--fui-positioning-arrow-offset:-5.656px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1euv43f{position:absolute;}", ".f1bsuimh{z-index:-1;}", ".f1u2r49w{background-color:inherit;}", ".fqhgnl{background-clip:content-box;}", ".f17bz04i{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f36o3x3{transform:rotate(var(--fui-positioning-arrow-angle));}", ".fzofk8q{height:var(--fui-positioning-arrow-height);}", ".f1wbx1ie{width:var(--fui-positioning-arrow-height);}", ".f1wl9k8s::before{content:\"\";}", ".f1aocrix::before{display:block;}", ".f1ljr5q2::before{background-color:inherit;}", [".f155f1qt::before{margin:-1px;}", {
|
|
148
|
+
}], ".f1s3jn22{--fui-positioning-arrow-height:8.484px;}", ".fv40uqz{--fui-positioning-arrow-offset:-4.242px;}", ".f1f72gjr{--fui-positioning-arrow-height:11.312px;}", ".f69yoe5{--fui-positioning-arrow-offset:-5.656px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1euv43f{position:absolute;}", ".f1bsuimh{z-index:-1;}", ".f1u2r49w{background-color:inherit;}", ".fqhgnl{background-clip:content-box;}", ".f17bz04i{border-bottom-left-radius:var(--borderRadiusSmall) ;}", ".f36o3x3{transform:rotate(var(--fui-positioning-arrow-angle)) ;}", ".fzofk8q{height:var(--fui-positioning-arrow-height);}", ".f1wbx1ie{width:var(--fui-positioning-arrow-height);}", ".f1wl9k8s::before{content:\"\";}", ".f1aocrix::before{display:block;}", ".f1ljr5q2::before{background-color:inherit;}", [".f155f1qt::before{margin:-1px;}", {
|
|
149
149
|
p: -1
|
|
150
150
|
}], ".f9mhzq7::before{width:100%;}", ".fr6rhvx::before{height:100%;}", [".f1kc0wz4::before{border:1px solid var(--colorTransparentStroke);}", {
|
|
151
151
|
p: -2
|
|
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;}"]
|
|
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;}"]
|
|
153
153
|
});
|
|
154
154
|
/**
|
|
155
155
|
* Apply styling to the PopoverSurface slots based on the state
|