@fluentui/react-popover 9.14.3 → 9.14.5
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/lib/components/Popover/usePopover.js +13 -6
- package/lib/components/Popover/usePopover.js.map +1 -1
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.styles.js +0 -2
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.styles.js.map +1 -1
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.styles.raw.js +0 -1
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/Popover/usePopover.js +13 -6
- package/lib-commonjs/components/Popover/usePopover.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.styles.js +0 -1
- 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 +10 -10
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,40 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-popover
|
|
2
2
|
|
|
3
|
-
This log was last generated on Tue,
|
|
3
|
+
This log was last generated on Tue, 04 Aug 2026 10:10:11 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.14.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.14.5)
|
|
8
|
+
|
|
9
|
+
Tue, 04 Aug 2026 10:10:11 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.14.4..@fluentui/react-popover_v9.14.5)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: close Popover on focus escape only when focus was inside the surface, so a popover whose focus never entered (e.g. an external input stays focused) is not dismissed when focus moves programmatically ([PR #36440](https://github.com/microsoft/fluentui/pull/36440) by petrduda@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-positioning to v9.23.0 ([PR #36453](https://github.com/microsoft/fluentui/pull/36453) by beachball)
|
|
16
|
+
|
|
17
|
+
## [9.14.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.14.4)
|
|
18
|
+
|
|
19
|
+
Wed, 24 Jun 2026 11:09:52 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.14.3..@fluentui/react-popover_v9.14.4)
|
|
21
|
+
|
|
22
|
+
### Patches
|
|
23
|
+
|
|
24
|
+
- fix: remove redundant use no memo directives, and add justification to valid ones ([PR #36224](https://github.com/microsoft/fluentui/pull/36224) by martinhochel@microsoft.com)
|
|
25
|
+
- Bump @fluentui/react-aria to v9.17.13 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
26
|
+
- Bump @fluentui/react-context-selector to v9.2.18 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
27
|
+
- Bump @fluentui/react-motion to v9.16.1 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
28
|
+
- Bump @fluentui/react-motion-components-preview to v0.15.6 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
29
|
+
- Bump @fluentui/react-portal to v9.8.14 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
30
|
+
- Bump @fluentui/react-positioning to v9.22.3 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
31
|
+
- Bump @fluentui/react-tabster to v9.26.16 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
32
|
+
- Bump @fluentui/react-utilities to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
33
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.4 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
34
|
+
|
|
7
35
|
## [9.14.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.14.3)
|
|
8
36
|
|
|
9
|
-
Tue, 26 May 2026 09:
|
|
37
|
+
Tue, 26 May 2026 09:39:30 GMT
|
|
10
38
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.14.2..@fluentui/react-popover_v9.14.3)
|
|
11
39
|
|
|
12
40
|
### Patches
|
|
@@ -104,10 +104,12 @@ import { PopoverSurfaceMotion } from './PopoverSurfaceMotion';
|
|
|
104
104
|
disabled: !open || !closeOnScroll
|
|
105
105
|
});
|
|
106
106
|
var _props_closeOnFocusOutside;
|
|
107
|
-
// When trapFocus is enabled,
|
|
108
|
-
//
|
|
107
|
+
// When trapFocus is enabled, dismiss the popover only on a genuine inside -> outside focus
|
|
108
|
+
// transition. Focus that was never inside - e.g. a consumer keeping focus on an external element
|
|
109
|
+
// via `unstable_disableAutoFocus` - must not dismiss it on an outside -> outside focus change.
|
|
109
110
|
// Internal `closeOnFocusOutside` prop allows consumers to opt out during gradual rollout.
|
|
110
111
|
const closeOnFocusOutside = (_props_closeOnFocusOutside = props.closeOnFocusOutside) !== null && _props_closeOnFocusOutside !== void 0 ? _props_closeOnFocusOutside : true;
|
|
112
|
+
const focusWasInsideRef = React.useRef(false);
|
|
111
113
|
const closeOnFocusOutCallback = useEventCallback((ev)=>{
|
|
112
114
|
var _ev_composedPath_;
|
|
113
115
|
const target = (_ev_composedPath_ = ev.composedPath()[0]) !== null && _ev_composedPath_ !== void 0 ? _ev_composedPath_ : ev.target;
|
|
@@ -117,8 +119,14 @@ import { PopoverSurfaceMotion } from './PopoverSurfaceMotion';
|
|
|
117
119
|
if (!contentElement) {
|
|
118
120
|
return;
|
|
119
121
|
}
|
|
120
|
-
const
|
|
121
|
-
if (
|
|
122
|
+
const isInside = elementContains(contentElement, target) || elementContains(triggerElement, target);
|
|
123
|
+
if (isInside) {
|
|
124
|
+
focusWasInsideRef.current = true;
|
|
125
|
+
return;
|
|
126
|
+
}
|
|
127
|
+
// Only dismiss if focus previously lived inside the popover.
|
|
128
|
+
if (focusWasInsideRef.current) {
|
|
129
|
+
focusWasInsideRef.current = false;
|
|
122
130
|
setOpen(ev, false);
|
|
123
131
|
}
|
|
124
132
|
});
|
|
@@ -126,6 +134,7 @@ import { PopoverSurfaceMotion } from './PopoverSurfaceMotion';
|
|
|
126
134
|
if (!open || !props.trapFocus || !closeOnFocusOutside) {
|
|
127
135
|
return;
|
|
128
136
|
}
|
|
137
|
+
focusWasInsideRef.current = false;
|
|
129
138
|
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('focusin', closeOnFocusOutCallback, true);
|
|
130
139
|
return ()=>{
|
|
131
140
|
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('focusin', closeOnFocusOutCallback, true);
|
|
@@ -192,7 +201,6 @@ import { PopoverSurfaceMotion } from './PopoverSurfaceMotion';
|
|
|
192
201
|
/**
|
|
193
202
|
* Creates and manages the Popover open state
|
|
194
203
|
*/ function useOpenState(state) {
|
|
195
|
-
'use no memo';
|
|
196
204
|
const onOpenChange = useEventCallback((e, data)=>{
|
|
197
205
|
var _state_onOpenChange;
|
|
198
206
|
return (_state_onOpenChange = state.onOpenChange) === null || _state_onOpenChange === void 0 ? void 0 : _state_onOpenChange.call(state, e, data);
|
|
@@ -229,7 +237,6 @@ import { PopoverSurfaceMotion } from './PopoverSurfaceMotion';
|
|
|
229
237
|
/**
|
|
230
238
|
* Creates and sets the necessary trigger, target and content refs used by Popover
|
|
231
239
|
*/ function usePopoverRefs(state) {
|
|
232
|
-
'use no memo';
|
|
233
240
|
const positioningOptions = {
|
|
234
241
|
position: 'above',
|
|
235
242
|
align: 'center',
|
|
@@ -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, close the popover if focus is programmatically moved outside\n // (e.g. via element.focus()), which doesn't trigger click or scroll dismiss handlers.\n // Internal `closeOnFocusOutside` prop allows consumers to opt out during gradual rollout.\n const closeOnFocusOutside = (props as PopoverProps & { closeOnFocusOutside?: boolean }).closeOnFocusOutside ?? true;\n\n const closeOnFocusOutCallback = useEventCallback((ev: FocusEvent) => {\n const target = (ev.composedPath()[0] ?? ev.target) as HTMLElement;\n const contentElement = positioningRefs.contentRef.current;\n const triggerElement = positioningRefs.triggerRef.current ?? null;\n\n if (!contentElement) {\n return;\n }\n\n const isOutside = !elementContains(contentElement, target) && !elementContains(triggerElement, target);\n\n if (isOutside) {\n setOpen(ev, false);\n }\n });\n\n React.useEffect(() => {\n if (!open || !props.trapFocus || !closeOnFocusOutside) {\n return;\n }\n\n targetDocument?.addEventListener('focusin', closeOnFocusOutCallback, true);\n return () => {\n targetDocument?.removeEventListener('focusin', closeOnFocusOutCallback, true);\n };\n }, [open, props.trapFocus, closeOnFocusOutside, targetDocument, closeOnFocusOutCallback]);\n\n const { findFirstFocusable } = useFocusFinders();\n const activateModal = useActivateModal();\n\n React.useEffect(() => {\n if (props.unstable_disableAutoFocus) {\n return;\n }\n\n const contentElement = positioningRefs.contentRef.current;\n\n if (open && contentElement) {\n const shouldFocusContainer = !isNaN(contentElement.getAttribute('tabIndex') ?? undefined);\n const firstFocusable = shouldFocusContainer ? contentElement : findFirstFocusable(contentElement);\n\n firstFocusable?.focus();\n\n if (shouldFocusContainer) {\n // Modal activation happens automatically when something inside the modal is focused programmatically.\n // When the container is focused, we need to activate the modal manually.\n activateModal(contentElement);\n }\n }\n }, [findFirstFocusable, activateModal, open, positioningRefs.contentRef, props.unstable_disableAutoFocus]);\n\n return {\n components: {\n surfaceMotion: PopoverSurfaceMotion,\n },\n ...initialState,\n ...positioningRefs,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n inertTrapFocus: props.inertTrapFocus ?? (props.legacyTrapFocus === undefined ? false : !props.legacyTrapFocus),\n popoverTrigger,\n popoverSurface,\n open,\n setOpen,\n toggleOpen,\n setContextTarget,\n contextTarget,\n inline: props.inline ?? false,\n surfaceMotion: presenceMotionSlot(props.surfaceMotion, {\n elementType: PopoverSurfaceMotion,\n defaultProps: {\n visible: open,\n appear: true,\n unmountOnExit: true,\n },\n }),\n };\n};\n\n/**\n * Creates and manages the Popover open state\n */\nfunction useOpenState(\n state: Pick<PopoverState, 'setContextTarget' | 'onOpenChange'> & Pick<PopoverProps, 'open' | 'defaultOpen'>,\n) {\n 'use no memo';\n\n const onOpenChange: PopoverState['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n const [open, setOpenState] = useControllableState({\n state: state.open,\n defaultState: state.defaultOpen,\n initialState: false,\n });\n // eslint-disable-next-line react-hooks/immutability\n state.open = open !== undefined ? open : state.open;\n const setContextTarget = state.setContextTarget;\n\n const setOpen = React.useCallback(\n (e: OpenPopoverEvents, shouldOpen: boolean) => {\n if (shouldOpen && e.type === 'contextmenu') {\n setContextTarget(e as React.MouseEvent);\n }\n\n if (!shouldOpen) {\n setContextTarget(undefined);\n }\n\n setOpenState(shouldOpen);\n onOpenChange?.(e, { open: shouldOpen });\n },\n [setOpenState, onOpenChange, setContextTarget],\n );\n\n return [open, setOpen] as const;\n}\n\n/**\n * Creates and sets the necessary trigger, target and content refs used by Popover\n */\nfunction usePopoverRefs(\n state: Pick<PopoverState, 'size' | 'contextTarget'> &\n Pick<PopoverProps, 'positioning' | 'openOnContext' | 'withArrow'>,\n) {\n 'use no memo';\n\n const positioningOptions = {\n position: 'above' as const,\n align: 'center' as const,\n arrowPadding: 2 * popoverSurfaceBorderRadius,\n target: state.openOnContext ? state.contextTarget : undefined,\n ...resolvePositioningShorthand(state.positioning),\n };\n\n // no reason to render arrow when covering the target\n if (positioningOptions.coverTarget) {\n // eslint-disable-next-line react-hooks/immutability\n state.withArrow = false;\n }\n\n if (state.withArrow) {\n positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeights[state.size]);\n }\n\n const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePositioning(positioningOptions);\n\n return {\n triggerRef,\n contentRef,\n arrowRef,\n } as const;\n}\n"],"names":["React","useControllableState","useEventCallback","useOnClickOutside","useOnScrollOutside","elementContains","useTimeout","useFluent_unstable","useFluent","usePositioning","resolvePositioningShorthand","mergeArrowOffset","usePositioningMouseTarget","usePositioningSlideDirection","useFocusFinders","useActivateModal","arrowHeights","popoverSurfaceBorderRadius","presenceMotionSlot","PopoverSurfaceMotion","usePopover_unstable","props","contextTarget","setContextTarget","targetDocument","positioning","handlePositionEnd","onPositioningEnd","initialState","size","children","Children","toArray","process","env","NODE_ENV","length","console","warn","popoverTrigger","undefined","popoverSurface","open","setOpenState","useOpenState","setOpenTimeout","clearOpenTimeout","setOpen","e","shouldOpen","Event","persist","type","mouseLeaveDelay","toggleOpen","useCallback","positioningRefs","usePopoverRefs","contains","element","callback","ev","refs","triggerRef","contentRef","disabled","disabledFocusOnIframe","closeOnIframeFocus","closeOnScroll","openOnContext","closeOnFocusOutside","closeOnFocusOutCallback","target","composedPath","contentElement","current","triggerElement","isOutside","useEffect","trapFocus","addEventListener","removeEventListener","findFirstFocusable","activateModal","unstable_disableAutoFocus","shouldFocusContainer","isNaN","getAttribute","firstFocusable","focus","components","surfaceMotion","inertTrapFocus","legacyTrapFocus","inline","elementType","defaultProps","visible","appear","unmountOnExit","state","onOpenChange","data","defaultState","defaultOpen","positioningOptions","position","align","arrowPadding","coverTarget","withArrow","offset","targetRef","containerRef","arrowRef"],"mappings":"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,0BAA0B;AAEvD,SAASC,0BAA0B,QAAQ,cAAc;AACzD,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SAASC,oBAAoB,QAAQ,yBAAyB;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;QAK4B;IAH5B,0FAA0F;IAC1F,sFAAsF;IACtF,0FAA0F;IAC1F,MAAME,sBAAsB,CAAA,6BAAA,AAACjD,MAA2DiD,mBAAmB,cAA/E,wCAAA,6BAAmF;IAE/G,MAAMC,0BAA0BrE,iBAAiB,CAAC2D;YAChCA;QAAhB,MAAMW,SAAUX,CAAAA,oBAAAA,GAAGY,YAAY,EAAE,CAAC,EAAE,cAApBZ,+BAAAA,oBAAwBA,GAAGW,MAAM;QACjD,MAAME,iBAAiBlB,gBAAgBQ,UAAU,CAACW,OAAO;YAClCnB;QAAvB,MAAMoB,iBAAiBpB,CAAAA,sCAAAA,gBAAgBO,UAAU,CAACY,OAAO,cAAlCnB,iDAAAA,sCAAsC;QAE7D,IAAI,CAACkB,gBAAgB;YACnB;QACF;QAEA,MAAMG,YAAY,CAACxE,gBAAgBqE,gBAAgBF,WAAW,CAACnE,gBAAgBuE,gBAAgBJ;QAE/F,IAAIK,WAAW;YACb9B,QAAQc,IAAI;QACd;IACF;IAEA7D,MAAM8E,SAAS,CAAC;QACd,IAAI,CAACpC,QAAQ,CAACrB,MAAM0D,SAAS,IAAI,CAACT,qBAAqB;YACrD;QACF;QAEA9C,2BAAAA,qCAAAA,eAAgBwD,gBAAgB,CAAC,WAAWT,yBAAyB;QACrE,OAAO;YACL/C,2BAAAA,qCAAAA,eAAgByD,mBAAmB,CAAC,WAAWV,yBAAyB;QAC1E;IACF,GAAG;QAAC7B;QAAMrB,MAAM0D,SAAS;QAAET;QAAqB9C;QAAgB+C;KAAwB;IAExF,MAAM,EAAEW,kBAAkB,EAAE,GAAGpE;IAC/B,MAAMqE,gBAAgBpE;IAEtBf,MAAM8E,SAAS,CAAC;QACd,IAAIzD,MAAM+D,yBAAyB,EAAE;YACnC;QACF;QAEA,MAAMV,iBAAiBlB,gBAAgBQ,UAAU,CAACW,OAAO;QAEzD,IAAIjC,QAAQgC,gBAAgB;gBACUA;YAApC,MAAMW,uBAAuB,CAACC,MAAMZ,CAAAA,+BAAAA,eAAea,YAAY,CAAC,yBAA5Bb,0CAAAA,+BAA2ClC;YAC/E,MAAMgD,iBAAiBH,uBAAuBX,iBAAiBQ,mBAAmBR;YAElFc,2BAAAA,qCAAAA,eAAgBC,KAAK;YAErB,IAAIJ,sBAAsB;gBACxB,sGAAsG;gBACtG,yEAAyE;gBACzEF,cAAcT;YAChB;QACF;IACF,GAAG;QAACQ;QAAoBC;QAAezC;QAAMc,gBAAgBQ,UAAU;QAAE3C,MAAM+D,yBAAyB;KAAC;QASvF/D,uBAQRA;IAfV,OAAO;QACLqE,YAAY;YACVC,eAAexE;QACjB;QACA,GAAGS,YAAY;QACf,GAAG4B,eAAe;QAClB,4DAA4D;QAC5DoC,gBAAgBvE,CAAAA,wBAAAA,MAAMuE,cAAc,cAApBvE,mCAAAA,wBAAyBA,MAAMwE,eAAe,KAAKrD,YAAY,QAAQ,CAACnB,MAAMwE,eAAe;QAC7GtD;QACAE;QACAC;QACAK;QACAO;QACA/B;QACAD;QACAwE,QAAQzE,CAAAA,gBAAAA,MAAMyE,MAAM,cAAZzE,2BAAAA,gBAAgB;QACxBsE,eAAezE,mBAAmBG,MAAMsE,aAAa,EAAE;YACrDI,aAAa5E;YACb6E,cAAc;gBACZC,SAASvD;gBACTwD,QAAQ;gBACRC,eAAe;YACjB;QACF;IACF;AACF,EAAE;AAEF;;CAEC,GACD,SAASvD,aACPwD,KAA2G;IAE3G;IAEA,MAAMC,eAA6CnG,iBAAiB,CAAC8C,GAAGsD;YAASF;gBAAAA,sBAAAA,MAAMC,YAAY,cAAlBD,0CAAAA,yBAAAA,OAAqBpD,GAAGsD;;IAEzG,MAAM,CAAC5D,MAAMC,aAAa,GAAG1C,qBAAqB;QAChDmG,OAAOA,MAAM1D,IAAI;QACjB6D,cAAcH,MAAMI,WAAW;QAC/B5E,cAAc;IAChB;IACA,oDAAoD;IACpDwE,MAAM1D,IAAI,GAAGA,SAASF,YAAYE,OAAO0D,MAAM1D,IAAI;IACnD,MAAMnB,mBAAmB6E,MAAM7E,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;QACboD,yBAAAA,mCAAAA,aAAerD,GAAG;YAAEN,MAAMO;QAAW;IACvC,GACA;QAACN;QAAc0D;QAAc9E;KAAiB;IAGhD,OAAO;QAACmB;QAAMK;KAAQ;AACxB;AAEA;;CAEC,GACD,SAASU,eACP2C,KACmE;IAEnE;IAEA,MAAMK,qBAAqB;QACzBC,UAAU;QACVC,OAAO;QACPC,cAAc,IAAI3F;QAClBuD,QAAQ4B,MAAM/B,aAAa,GAAG+B,MAAM9E,aAAa,GAAGkB;QACpD,GAAG9B,4BAA4B0F,MAAM3E,WAAW,CAAC;IACnD;IAEA,qDAAqD;IACrD,IAAIgF,mBAAmBI,WAAW,EAAE;QAClC,oDAAoD;QACpDT,MAAMU,SAAS,GAAG;IACpB;IAEA,IAAIV,MAAMU,SAAS,EAAE;QACnBL,mBAAmBM,MAAM,GAAGpG,iBAAiB8F,mBAAmBM,MAAM,EAAE/F,YAAY,CAACoF,MAAMvE,IAAI,CAAC;IAClG;IAEA,MAAM,EAAEmF,WAAWjD,UAAU,EAAEkD,cAAcjD,UAAU,EAAEkD,QAAQ,EAAE,GAAGzG,eAAegG;IAErF,OAAO;QACL1C;QACAC;QACAkD;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":"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"}
|
|
@@ -155,8 +155,6 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
155
155
|
* Apply styling to the PopoverSurface slots based on the state
|
|
156
156
|
*/
|
|
157
157
|
export const usePopoverSurfaceStyles_unstable = state => {
|
|
158
|
-
'use no memo';
|
|
159
|
-
|
|
160
158
|
const styles = useStyles();
|
|
161
159
|
// eslint-disable-next-line react-hooks/immutability
|
|
162
160
|
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);
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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 const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\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 // eslint-disable-next-line react-hooks/immutability\n state.arrowClassName = mergeClasses(styles.arrow, state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow);\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -53,7 +53,6 @@ export const arrowHeights = {
|
|
|
53
53
|
/**
|
|
54
54
|
* Apply styling to the PopoverSurface slots based on the state
|
|
55
55
|
*/ export const usePopoverSurfaceStyles_unstable = (state)=>{
|
|
56
|
-
'use no memo';
|
|
57
56
|
const styles = useStyles();
|
|
58
57
|
// eslint-disable-next-line react-hooks/immutability
|
|
59
58
|
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);
|
|
@@ -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 } 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
|
|
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 const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\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 // eslint-disable-next-line react-hooks/immutability\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,MAAMC,SAAShC;IACf,oDAAoD;IACpD+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;IAGtB,oDAAoD;IACpDF,MAAMK,cAAc,GAAG/C,aACrB2C,OAAOL,KAAK,EACZI,MAAMG,IAAI,KAAK,UAAUF,OAAOP,UAAU,GAAGO,OAAON,gBAAgB;IAGtE,OAAOK;AACT,EAAE"}
|
|
@@ -108,10 +108,12 @@ const usePopover_unstable = (props)=>{
|
|
|
108
108
|
disabled: !open || !closeOnScroll
|
|
109
109
|
});
|
|
110
110
|
var _props_closeOnFocusOutside;
|
|
111
|
-
// When trapFocus is enabled,
|
|
112
|
-
//
|
|
111
|
+
// When trapFocus is enabled, dismiss the popover only on a genuine inside -> outside focus
|
|
112
|
+
// transition. Focus that was never inside - e.g. a consumer keeping focus on an external element
|
|
113
|
+
// via `unstable_disableAutoFocus` - must not dismiss it on an outside -> outside focus change.
|
|
113
114
|
// Internal `closeOnFocusOutside` prop allows consumers to opt out during gradual rollout.
|
|
114
115
|
const closeOnFocusOutside = (_props_closeOnFocusOutside = props.closeOnFocusOutside) !== null && _props_closeOnFocusOutside !== void 0 ? _props_closeOnFocusOutside : true;
|
|
116
|
+
const focusWasInsideRef = _react.useRef(false);
|
|
115
117
|
const closeOnFocusOutCallback = (0, _reactutilities.useEventCallback)((ev)=>{
|
|
116
118
|
var _ev_composedPath_;
|
|
117
119
|
const target = (_ev_composedPath_ = ev.composedPath()[0]) !== null && _ev_composedPath_ !== void 0 ? _ev_composedPath_ : ev.target;
|
|
@@ -121,8 +123,14 @@ const usePopover_unstable = (props)=>{
|
|
|
121
123
|
if (!contentElement) {
|
|
122
124
|
return;
|
|
123
125
|
}
|
|
124
|
-
const
|
|
125
|
-
if (
|
|
126
|
+
const isInside = (0, _reactutilities.elementContains)(contentElement, target) || (0, _reactutilities.elementContains)(triggerElement, target);
|
|
127
|
+
if (isInside) {
|
|
128
|
+
focusWasInsideRef.current = true;
|
|
129
|
+
return;
|
|
130
|
+
}
|
|
131
|
+
// Only dismiss if focus previously lived inside the popover.
|
|
132
|
+
if (focusWasInsideRef.current) {
|
|
133
|
+
focusWasInsideRef.current = false;
|
|
126
134
|
setOpen(ev, false);
|
|
127
135
|
}
|
|
128
136
|
});
|
|
@@ -130,6 +138,7 @@ const usePopover_unstable = (props)=>{
|
|
|
130
138
|
if (!open || !props.trapFocus || !closeOnFocusOutside) {
|
|
131
139
|
return;
|
|
132
140
|
}
|
|
141
|
+
focusWasInsideRef.current = false;
|
|
133
142
|
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('focusin', closeOnFocusOutCallback, true);
|
|
134
143
|
return ()=>{
|
|
135
144
|
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('focusin', closeOnFocusOutCallback, true);
|
|
@@ -196,7 +205,6 @@ const usePopover_unstable = (props)=>{
|
|
|
196
205
|
/**
|
|
197
206
|
* Creates and manages the Popover open state
|
|
198
207
|
*/ function useOpenState(state) {
|
|
199
|
-
'use no memo';
|
|
200
208
|
const onOpenChange = (0, _reactutilities.useEventCallback)((e, data)=>{
|
|
201
209
|
var _state_onOpenChange;
|
|
202
210
|
return (_state_onOpenChange = state.onOpenChange) === null || _state_onOpenChange === void 0 ? void 0 : _state_onOpenChange.call(state, e, data);
|
|
@@ -233,7 +241,6 @@ const usePopover_unstable = (props)=>{
|
|
|
233
241
|
/**
|
|
234
242
|
* Creates and sets the necessary trigger, target and content refs used by Popover
|
|
235
243
|
*/ function usePopoverRefs(state) {
|
|
236
|
-
'use no memo';
|
|
237
244
|
const positioningOptions = {
|
|
238
245
|
position: 'above',
|
|
239
246
|
align: 'center',
|
|
@@ -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, close the popover if focus is programmatically moved outside\n // (e.g. via element.focus()), which doesn't trigger click or scroll dismiss handlers.\n // Internal `closeOnFocusOutside` prop allows consumers to opt out during gradual rollout.\n const closeOnFocusOutside = (props as PopoverProps & { closeOnFocusOutside?: boolean }).closeOnFocusOutside ?? true;\n\n const closeOnFocusOutCallback = useEventCallback((ev: FocusEvent) => {\n const target = (ev.composedPath()[0] ?? ev.target) as HTMLElement;\n const contentElement = positioningRefs.contentRef.current;\n const triggerElement = positioningRefs.triggerRef.current ?? null;\n\n if (!contentElement) {\n return;\n }\n\n const isOutside = !elementContains(contentElement, target) && !elementContains(triggerElement, target);\n\n if (isOutside) {\n setOpen(ev, false);\n }\n });\n\n React.useEffect(() => {\n if (!open || !props.trapFocus || !closeOnFocusOutside) {\n return;\n }\n\n targetDocument?.addEventListener('focusin', closeOnFocusOutCallback, true);\n return () => {\n targetDocument?.removeEventListener('focusin', closeOnFocusOutCallback, true);\n };\n }, [open, props.trapFocus, closeOnFocusOutside, targetDocument, closeOnFocusOutCallback]);\n\n const { findFirstFocusable } = useFocusFinders();\n const activateModal = useActivateModal();\n\n React.useEffect(() => {\n if (props.unstable_disableAutoFocus) {\n return;\n }\n\n const contentElement = positioningRefs.contentRef.current;\n\n if (open && contentElement) {\n const shouldFocusContainer = !isNaN(contentElement.getAttribute('tabIndex') ?? undefined);\n const firstFocusable = shouldFocusContainer ? contentElement : findFirstFocusable(contentElement);\n\n firstFocusable?.focus();\n\n if (shouldFocusContainer) {\n // Modal activation happens automatically when something inside the modal is focused programmatically.\n // When the container is focused, we need to activate the modal manually.\n activateModal(contentElement);\n }\n }\n }, [findFirstFocusable, activateModal, open, positioningRefs.contentRef, props.unstable_disableAutoFocus]);\n\n return {\n components: {\n surfaceMotion: PopoverSurfaceMotion,\n },\n ...initialState,\n ...positioningRefs,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n inertTrapFocus: props.inertTrapFocus ?? (props.legacyTrapFocus === undefined ? false : !props.legacyTrapFocus),\n popoverTrigger,\n popoverSurface,\n open,\n setOpen,\n toggleOpen,\n setContextTarget,\n contextTarget,\n inline: props.inline ?? false,\n surfaceMotion: presenceMotionSlot(props.surfaceMotion, {\n elementType: PopoverSurfaceMotion,\n defaultProps: {\n visible: open,\n appear: true,\n unmountOnExit: true,\n },\n }),\n };\n};\n\n/**\n * Creates and manages the Popover open state\n */\nfunction useOpenState(\n state: Pick<PopoverState, 'setContextTarget' | 'onOpenChange'> & Pick<PopoverProps, 'open' | 'defaultOpen'>,\n) {\n 'use no memo';\n\n const onOpenChange: PopoverState['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n const [open, setOpenState] = useControllableState({\n state: state.open,\n defaultState: state.defaultOpen,\n initialState: false,\n });\n // eslint-disable-next-line react-hooks/immutability\n state.open = open !== undefined ? open : state.open;\n const setContextTarget = state.setContextTarget;\n\n const setOpen = React.useCallback(\n (e: OpenPopoverEvents, shouldOpen: boolean) => {\n if (shouldOpen && e.type === 'contextmenu') {\n setContextTarget(e as React.MouseEvent);\n }\n\n if (!shouldOpen) {\n setContextTarget(undefined);\n }\n\n setOpenState(shouldOpen);\n onOpenChange?.(e, { open: shouldOpen });\n },\n [setOpenState, onOpenChange, setContextTarget],\n );\n\n return [open, setOpen] as const;\n}\n\n/**\n * Creates and sets the necessary trigger, target and content refs used by Popover\n */\nfunction usePopoverRefs(\n state: Pick<PopoverState, 'size' | 'contextTarget'> &\n Pick<PopoverProps, 'positioning' | 'openOnContext' | 'withArrow'>,\n) {\n 'use no memo';\n\n const positioningOptions = {\n position: 'above' as const,\n align: 'center' as const,\n arrowPadding: 2 * popoverSurfaceBorderRadius,\n target: state.openOnContext ? state.contextTarget : undefined,\n ...resolvePositioningShorthand(state.positioning),\n };\n\n // no reason to render arrow when covering the target\n if (positioningOptions.coverTarget) {\n // eslint-disable-next-line react-hooks/immutability\n state.withArrow = false;\n }\n\n if (state.withArrow) {\n positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeights[state.size]);\n }\n\n const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePositioning(positioningOptions);\n\n return {\n triggerRef,\n contentRef,\n arrowRef,\n } as const;\n}\n"],"names":["React","useControllableState","useEventCallback","useOnClickOutside","useOnScrollOutside","elementContains","useTimeout","useFluent_unstable","useFluent","usePositioning","resolvePositioningShorthand","mergeArrowOffset","usePositioningMouseTarget","usePositioningSlideDirection","useFocusFinders","useActivateModal","arrowHeights","popoverSurfaceBorderRadius","presenceMotionSlot","PopoverSurfaceMotion","usePopover_unstable","props","contextTarget","setContextTarget","targetDocument","positioning","handlePositionEnd","onPositioningEnd","initialState","size","children","Children","toArray","process","env","NODE_ENV","length","console","warn","popoverTrigger","undefined","popoverSurface","open","setOpenState","useOpenState","setOpenTimeout","clearOpenTimeout","setOpen","e","shouldOpen","Event","persist","type","mouseLeaveDelay","toggleOpen","useCallback","positioningRefs","usePopoverRefs","contains","element","callback","ev","refs","triggerRef","contentRef","disabled","disabledFocusOnIframe","closeOnIframeFocus","closeOnScroll","openOnContext","closeOnFocusOutside","closeOnFocusOutCallback","target","composedPath","contentElement","current","triggerElement","isOutside","useEffect","trapFocus","addEventListener","removeEventListener","findFirstFocusable","activateModal","unstable_disableAutoFocus","shouldFocusContainer","isNaN","getAttribute","firstFocusable","focus","components","surfaceMotion","inertTrapFocus","legacyTrapFocus","inline","elementType","defaultProps","visible","appear","unmountOnExit","state","onOpenChange","data","defaultState","defaultOpen","positioningOptions","position","align","arrowPadding","coverTarget","withArrow","offset","targetRef","containerRef","arrowRef"],"mappings":"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"}
|
|
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":"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"}
|
|
@@ -238,7 +238,6 @@ const arrowHeights = {
|
|
|
238
238
|
]
|
|
239
239
|
});
|
|
240
240
|
const usePopoverSurfaceStyles_unstable = (state)=>{
|
|
241
|
-
'use no memo';
|
|
242
241
|
const styles = useStyles();
|
|
243
242
|
// eslint-disable-next-line react-hooks/immutability
|
|
244
243
|
state.root.className = (0, _react.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);
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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 const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\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 // eslint-disable-next-line react-hooks/immutability\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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"}
|
|
@@ -72,7 +72,6 @@ const arrowHeights = {
|
|
|
72
72
|
})
|
|
73
73
|
});
|
|
74
74
|
const usePopoverSurfaceStyles_unstable = (state)=>{
|
|
75
|
-
'use no memo';
|
|
76
75
|
const styles = useStyles();
|
|
77
76
|
// eslint-disable-next-line react-hooks/immutability
|
|
78
77
|
state.root.className = (0, _react.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);
|
|
@@ -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 } 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
|
|
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 const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\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 // eslint-disable-next-line react-hooks/immutability\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,YAAYnC,6CAAAA,EAAwBM,aAAaC,KAAK;IACtD6B,sBAAkBpC,yCAAAA,EAAwBM,aAAaE,MAAM;IAC7D6B,WAAOpC,mCAAAA,EAAkB;QAAEqC,aAAaC;IAAU;AACpD;AAKO,yCAAyC,CAACE;IAC/C,MAAMC,SAAShC;IACf,oDAAoD;IACpD+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;IAGtB,oDAAoD;IACpDF,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.14.
|
|
3
|
+
"version": "9.14.5",
|
|
4
4
|
"description": "Popover component for Fluent UI",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -13,17 +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-motion
|
|
20
|
-
"@fluentui/react-
|
|
21
|
-
"@fluentui/react-
|
|
16
|
+
"@fluentui/react-aria": "^9.17.13",
|
|
17
|
+
"@fluentui/react-context-selector": "^9.2.18",
|
|
18
|
+
"@fluentui/react-jsx-runtime": "^9.4.4",
|
|
19
|
+
"@fluentui/react-motion": "^9.16.1",
|
|
20
|
+
"@fluentui/react-motion-components-preview": "^0.15.6",
|
|
21
|
+
"@fluentui/react-portal": "^9.8.14",
|
|
22
|
+
"@fluentui/react-positioning": "^9.23.0",
|
|
22
23
|
"@fluentui/react-shared-contexts": "^9.26.2",
|
|
23
|
-
"@fluentui/react-tabster": "^9.26.
|
|
24
|
+
"@fluentui/react-tabster": "^9.26.16",
|
|
24
25
|
"@fluentui/react-theme": "^9.2.1",
|
|
25
|
-
"@fluentui/react-utilities": "^9.26.
|
|
26
|
-
"@fluentui/react-jsx-runtime": "^9.4.3",
|
|
26
|
+
"@fluentui/react-utilities": "^9.26.5",
|
|
27
27
|
"@griffel/react": "^1.5.32",
|
|
28
28
|
"@swc/helpers": "^0.5.1"
|
|
29
29
|
},
|