@fluentui/react-popover 9.8.0 → 9.8.1
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +82 -1
- package/CHANGELOG.md +22 -2
- package/lib/components/Popover/Popover.js.map +1 -1
- package/lib/components/Popover/renderPopover.js +1 -1
- package/lib/components/Popover/renderPopover.js.map +1 -1
- package/lib/components/Popover/usePopover.js +9 -7
- package/lib/components/Popover/usePopover.js.map +1 -1
- package/lib/components/PopoverSurface/PopoverSurface.js.map +1 -1
- package/lib/components/PopoverSurface/renderPopoverSurface.js +14 -8
- package/lib/components/PopoverSurface/renderPopoverSurface.js.map +1 -1
- package/lib/components/PopoverSurface/usePopoverSurface.js +8 -6
- package/lib/components/PopoverSurface/usePopoverSurface.js.map +1 -1
- package/lib/components/PopoverTrigger/PopoverTrigger.js.map +1 -1
- package/lib/components/PopoverTrigger/renderPopoverTrigger.js.map +1 -1
- package/lib/components/PopoverTrigger/usePopoverTrigger.js +12 -11
- package/lib/components/PopoverTrigger/usePopoverTrigger.js.map +1 -1
- package/lib/popoverContext.js.map +1 -1
- package/lib-commonjs/Popover.js +2 -2
- package/lib-commonjs/Popover.js.map +1 -1
- package/lib-commonjs/PopoverSurface.js +2 -2
- package/lib-commonjs/PopoverSurface.js.map +1 -1
- package/lib-commonjs/PopoverTrigger.js +2 -2
- package/lib-commonjs/PopoverTrigger.js.map +1 -1
- package/lib-commonjs/components/Popover/Popover.js +5 -3
- package/lib-commonjs/components/Popover/Popover.js.map +1 -1
- package/lib-commonjs/components/Popover/Popover.types.js +2 -2
- package/lib-commonjs/components/Popover/Popover.types.js.map +1 -1
- package/lib-commonjs/components/Popover/constants.js +3 -1
- package/lib-commonjs/components/Popover/constants.js.map +1 -1
- package/lib-commonjs/components/Popover/index.js +5 -5
- package/lib-commonjs/components/Popover/index.js.map +1 -1
- package/lib-commonjs/components/Popover/renderPopover.js +6 -4
- package/lib-commonjs/components/Popover/renderPopover.js.map +1 -1
- package/lib-commonjs/components/Popover/usePopover.js +29 -25
- package/lib-commonjs/components/Popover/usePopover.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/PopoverSurface.js +9 -7
- package/lib-commonjs/components/PopoverSurface/PopoverSurface.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/index.js +6 -6
- package/lib-commonjs/components/PopoverSurface/index.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/renderPopoverSurface.js +21 -13
- package/lib-commonjs/components/PopoverSurface/renderPopoverSurface.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/usePopoverSurface.js +17 -13
- package/lib-commonjs/components/PopoverSurface/usePopoverSurface.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.styles.js +10 -4
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.styles.js.map +1 -1
- package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.js +5 -3
- package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.js.map +1 -1
- package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.types.js +2 -2
- package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.types.js.map +1 -1
- package/lib-commonjs/components/PopoverTrigger/index.js +5 -5
- package/lib-commonjs/components/PopoverTrigger/index.js.map +1 -1
- package/lib-commonjs/components/PopoverTrigger/renderPopoverTrigger.js +3 -1
- package/lib-commonjs/components/PopoverTrigger/renderPopoverTrigger.js.map +1 -1
- package/lib-commonjs/components/PopoverTrigger/usePopoverTrigger.js +23 -20
- package/lib-commonjs/components/PopoverTrigger/usePopoverTrigger.js.map +1 -1
- package/lib-commonjs/index.js +45 -17
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/popoverContext.js +12 -6
- package/lib-commonjs/popoverContext.js.map +1 -1
- package/package.json +16 -16
@@ -4,10 +4,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
});
|
5
5
|
Object.defineProperty(exports, "Popover", {
|
6
6
|
enumerable: true,
|
7
|
-
get: ()
|
7
|
+
get: function() {
|
8
|
+
return Popover;
|
9
|
+
}
|
8
10
|
});
|
9
|
-
const
|
10
|
-
const _react = /*#__PURE__*/
|
11
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
12
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
11
13
|
const _usePopover = require("./usePopover");
|
12
14
|
const _renderPopover = require("./renderPopover");
|
13
15
|
const Popover = (props)=>{
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["Popover.js"],"sourcesContent":["import * as React from 'react';\nimport { usePopover_unstable } from './usePopover';\nimport { renderPopover_unstable } from './renderPopover';\n/**\n * Wrapper component that manages state for a PopoverTrigger and a PopoverSurface components.\n */ export const Popover = (props)=>{\n const state = usePopover_unstable(props);\n return renderPopover_unstable(state);\n};\nPopover.displayName = 'Popover';\n"],"names":["Popover","props","state","usePopover_unstable","renderPopover_unstable","displayName"],"mappings":";;;;+BAKiBA
|
1
|
+
{"version":3,"sources":["Popover.js"],"sourcesContent":["import * as React from 'react';\nimport { usePopover_unstable } from './usePopover';\nimport { renderPopover_unstable } from './renderPopover';\n/**\n * Wrapper component that manages state for a PopoverTrigger and a PopoverSurface components.\n */ export const Popover = (props)=>{\n const state = usePopover_unstable(props);\n return renderPopover_unstable(state);\n};\nPopover.displayName = 'Popover';\n"],"names":["Popover","props","state","usePopover_unstable","renderPopover_unstable","displayName"],"mappings":";;;;+BAKiBA;;;eAAAA;;;;iEALM;4BACa;+BACG;AAG5B,MAAMA,UAAU,CAACC;IACxB,MAAMC,QAAQC,IAAAA,+BAAmB,EAACF;IAClC,OAAOG,IAAAA,qCAAsB,EAACF;AAClC;AACAF,QAAQK,WAAW,GAAG"}
|
@@ -2,5 +2,5 @@
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
3
3
|
value: true
|
4
4
|
});
|
5
|
-
const
|
6
|
-
const _react = /*#__PURE__*/
|
5
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
6
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["Popover.types.js"],"sourcesContent":["import * as React from 'react';\n"],"names":[],"mappings":";;;;;
|
1
|
+
{"version":3,"sources":["Popover.types.js"],"sourcesContent":["import * as React from 'react';\n"],"names":[],"mappings":";;;;;iEAAuB"}
|
@@ -11,6 +11,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
11
11
|
});
|
12
12
|
Object.defineProperty(exports, "popoverSurfaceBorderRadius", {
|
13
13
|
enumerable: true,
|
14
|
-
get: ()
|
14
|
+
get: function() {
|
15
|
+
return popoverSurfaceBorderRadius;
|
16
|
+
}
|
15
17
|
});
|
16
18
|
const popoverSurfaceBorderRadius = 4;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["constants.js"],"sourcesContent":["/**\n * @internal\n * The default value of the tooltip's border radius (borderRadiusMedium).\n *\n * Unfortunately, Popper requires it to be specified as a variable instead of using CSS.\n * While we could use getComputedStyle, that adds a performance penalty for something that\n * will likely never change.\n */ export const popoverSurfaceBorderRadius = 4;\n"],"names":["popoverSurfaceBorderRadius"],"mappings":"AAAA;;;;;;;CAOC;;;;+BAAgBA
|
1
|
+
{"version":3,"sources":["constants.js"],"sourcesContent":["/**\n * @internal\n * The default value of the tooltip's border radius (borderRadiusMedium).\n *\n * Unfortunately, Popper requires it to be specified as a variable instead of using CSS.\n * While we could use getComputedStyle, that adds a performance penalty for something that\n * will likely never change.\n */ export const popoverSurfaceBorderRadius = 4;\n"],"names":["popoverSurfaceBorderRadius"],"mappings":"AAAA;;;;;;;CAOC;;;;+BAAgBA;;;eAAAA;;;AAAN,MAAMA,6BAA6B"}
|
@@ -2,8 +2,8 @@
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
3
3
|
value: true
|
4
4
|
});
|
5
|
-
const
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
5
|
+
const _export_star = require("@swc/helpers/_/_export_star");
|
6
|
+
_export_star._(require("./Popover"), exports);
|
7
|
+
_export_star._(require("./Popover.types"), exports);
|
8
|
+
_export_star._(require("./renderPopover"), exports);
|
9
|
+
_export_star._(require("./usePopover"), exports);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["index.js"],"sourcesContent":["export * from './Popover';\nexport * from './Popover.types';\nexport * from './renderPopover';\nexport * from './usePopover';\n"],"names":[],"mappings":";;;;;
|
1
|
+
{"version":3,"sources":["index.js"],"sourcesContent":["export * from './Popover';\nexport * from './Popover.types';\nexport * from './renderPopover';\nexport * from './usePopover';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA"}
|
@@ -4,13 +4,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
});
|
5
5
|
Object.defineProperty(exports, "renderPopover_unstable", {
|
6
6
|
enumerable: true,
|
7
|
-
get: ()
|
7
|
+
get: function() {
|
8
|
+
return renderPopover_unstable;
|
9
|
+
}
|
8
10
|
});
|
9
|
-
const
|
10
|
-
const _react = /*#__PURE__*/
|
11
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
12
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
11
13
|
const _popoverContext = require("../../popoverContext");
|
12
14
|
const renderPopover_unstable = (state)=>{
|
13
|
-
const { appearance
|
15
|
+
const { appearance, arrowRef, contentRef, inline, mountNode, open, openOnContext, openOnHover, setOpen, size, toggleOpen, trapFocus, triggerRef, withArrow, inertTrapFocus } = state;
|
14
16
|
return /*#__PURE__*/ _react.createElement(_popoverContext.PopoverContext.Provider, {
|
15
17
|
value: {
|
16
18
|
appearance,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["renderPopover.js"],"sourcesContent":["import * as React from 'react';\nimport { PopoverContext } from '../../popoverContext';\n/**\n * Render the final JSX of Popover\n */ export const renderPopover_unstable = (state)=>{\n const { appearance
|
1
|
+
{"version":3,"sources":["renderPopover.js"],"sourcesContent":["import * as React from 'react';\nimport { PopoverContext } from '../../popoverContext';\n/**\n * Render the final JSX of Popover\n */ export const renderPopover_unstable = (state)=>{\n const { appearance, arrowRef, contentRef, inline, mountNode, open, openOnContext, openOnHover, setOpen, size, toggleOpen, trapFocus, triggerRef, withArrow, inertTrapFocus } = state;\n return /*#__PURE__*/ React.createElement(PopoverContext.Provider, {\n value: {\n appearance,\n arrowRef,\n contentRef,\n inline,\n mountNode,\n open,\n openOnContext,\n openOnHover,\n setOpen,\n toggleOpen,\n triggerRef,\n size,\n trapFocus,\n inertTrapFocus,\n withArrow\n }\n }, state.popoverTrigger, state.open && state.popoverSurface);\n};\n"],"names":["renderPopover_unstable","state","appearance","arrowRef","contentRef","inline","mountNode","open","openOnContext","openOnHover","setOpen","size","toggleOpen","trapFocus","triggerRef","withArrow","inertTrapFocus","React","createElement","PopoverContext","Provider","value","popoverTrigger","popoverSurface"],"mappings":";;;;+BAIiBA;;;eAAAA;;;;iEAJM;gCACQ;AAGpB,MAAMA,yBAAyB,CAACC;IACvC,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,MAAM,EAAEC,SAAS,EAAEC,IAAI,EAAEC,aAAa,EAAEC,WAAW,EAAEC,OAAO,EAAEC,IAAI,EAAEC,UAAU,EAAEC,SAAS,EAAEC,UAAU,EAAEC,SAAS,EAAEC,cAAc,EAAE,GAAGf;IAC/K,OAAO,WAAW,GAAGgB,OAAMC,aAAa,CAACC,8BAAc,CAACC,QAAQ,EAAE;QAC9DC,OAAO;YACHnB;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAE;YACAE;YACAH;YACAE;YACAG;YACAD;QACJ;IACJ,GAAGd,MAAMqB,cAAc,EAAErB,MAAMM,IAAI,IAAIN,MAAMsB,cAAc;AAC/D"}
|
@@ -4,19 +4,21 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
});
|
5
5
|
Object.defineProperty(exports, "usePopover_unstable", {
|
6
6
|
enumerable: true,
|
7
|
-
get: ()
|
7
|
+
get: function() {
|
8
|
+
return usePopover_unstable;
|
9
|
+
}
|
8
10
|
});
|
9
|
-
const
|
10
|
-
const _react = /*#__PURE__*/
|
11
|
-
const
|
12
|
-
const
|
13
|
-
const
|
14
|
-
const
|
15
|
-
const
|
11
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
12
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
13
|
+
const _reactutilities = require("@fluentui/react-utilities");
|
14
|
+
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
15
|
+
const _reactpositioning = require("@fluentui/react-positioning");
|
16
|
+
const _reactportal = require("@fluentui/react-portal");
|
17
|
+
const _reacttabster = require("@fluentui/react-tabster");
|
16
18
|
const _index = require("../PopoverSurface/index");
|
17
19
|
const _constants = require("./constants");
|
18
20
|
const usePopover_unstable = (props)=>{
|
19
|
-
const [contextTarget, setContextTarget] = (0,
|
21
|
+
const [contextTarget, setContextTarget] = (0, _reactpositioning.usePositioningMouseTarget)();
|
20
22
|
const initialState = {
|
21
23
|
size: 'medium',
|
22
24
|
contextTarget,
|
@@ -44,7 +46,7 @@ const usePopover_unstable = (props)=>{
|
|
44
46
|
}
|
45
47
|
const [open, setOpenState] = useOpenState(initialState);
|
46
48
|
const setOpenTimeoutRef = _react.useRef(0);
|
47
|
-
const setOpen = (0,
|
49
|
+
const setOpen = (0, _reactutilities.useEventCallback)((e, shouldOpen)=>{
|
48
50
|
clearTimeout(setOpenTimeoutRef.current);
|
49
51
|
if (!(e instanceof Event) && e.persist) {
|
50
52
|
// < React 17 still uses pooled synthetic events
|
@@ -76,10 +78,10 @@ const usePopover_unstable = (props)=>{
|
|
76
78
|
open
|
77
79
|
]);
|
78
80
|
const positioningRefs = usePopoverRefs(initialState);
|
79
|
-
const { targetDocument
|
81
|
+
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
|
80
82
|
var _props_closeOnIframeFocus;
|
81
|
-
(0,
|
82
|
-
contains:
|
83
|
+
(0, _reactutilities.useOnClickOutside)({
|
84
|
+
contains: _reactportal.elementContains,
|
83
85
|
element: targetDocument,
|
84
86
|
callback: (ev)=>setOpen(ev, false),
|
85
87
|
refs: [
|
@@ -91,8 +93,8 @@ const usePopover_unstable = (props)=>{
|
|
91
93
|
});
|
92
94
|
// only close on scroll for context, or when closeOnScroll is specified
|
93
95
|
const closeOnScroll = initialState.openOnContext || initialState.closeOnScroll;
|
94
|
-
(0,
|
95
|
-
contains:
|
96
|
+
(0, _reactutilities.useOnScrollOutside)({
|
97
|
+
contains: _reactportal.elementContains,
|
96
98
|
element: targetDocument,
|
97
99
|
callback: (ev)=>setOpen(ev, false),
|
98
100
|
refs: [
|
@@ -101,16 +103,17 @@ const usePopover_unstable = (props)=>{
|
|
101
103
|
],
|
102
104
|
disabled: !open || !closeOnScroll
|
103
105
|
});
|
104
|
-
const { findFirstFocusable
|
106
|
+
const { findFirstFocusable } = (0, _reacttabster.useFocusFinders)();
|
105
107
|
_react.useEffect(()=>{
|
106
108
|
if (props.unstable_disableAutoFocus) {
|
107
109
|
return;
|
108
110
|
}
|
109
111
|
if (open && positioningRefs.contentRef.current) {
|
112
|
+
var _firstFocusable;
|
110
113
|
var _positioningRefs_contentRef_current_getAttribute;
|
111
114
|
const containerTabIndex = (_positioningRefs_contentRef_current_getAttribute = positioningRefs.contentRef.current.getAttribute('tabIndex')) !== null && _positioningRefs_contentRef_current_getAttribute !== void 0 ? _positioningRefs_contentRef_current_getAttribute : undefined;
|
112
115
|
const firstFocusable = isNaN(containerTabIndex) ? findFirstFocusable(positioningRefs.contentRef.current) : positioningRefs.contentRef.current;
|
113
|
-
firstFocusable === null ||
|
116
|
+
(_firstFocusable = firstFocusable) === null || _firstFocusable === void 0 ? void 0 : _firstFocusable.focus();
|
114
117
|
}
|
115
118
|
}, [
|
116
119
|
findFirstFocusable,
|
@@ -137,11 +140,11 @@ const usePopover_unstable = (props)=>{
|
|
137
140
|
/**
|
138
141
|
* Creates and manages the Popover open state
|
139
142
|
*/ function useOpenState(state) {
|
140
|
-
const onOpenChange = (0,
|
141
|
-
var _state_onOpenChange;
|
142
|
-
return (_state_onOpenChange = state.onOpenChange) === null || _state_onOpenChange === void 0 ? void 0 : _state_onOpenChange.call(
|
143
|
+
const onOpenChange = (0, _reactutilities.useEventCallback)((e, data)=>{
|
144
|
+
var _state_onOpenChange, _state;
|
145
|
+
return (_state_onOpenChange = (_state = state).onOpenChange) === null || _state_onOpenChange === void 0 ? void 0 : _state_onOpenChange.call(_state, e, data);
|
143
146
|
});
|
144
|
-
const [open, setOpenState] = (0,
|
147
|
+
const [open, setOpenState] = (0, _reactutilities.useControllableState)({
|
145
148
|
state: state.open,
|
146
149
|
defaultState: state.defaultOpen,
|
147
150
|
initialState: false
|
@@ -149,6 +152,7 @@ const usePopover_unstable = (props)=>{
|
|
149
152
|
state.open = open !== undefined ? open : state.open;
|
150
153
|
const setContextTarget = state.setContextTarget;
|
151
154
|
const setOpen = _react.useCallback((e, shouldOpen)=>{
|
155
|
+
var _onOpenChange;
|
152
156
|
if (shouldOpen && e.type === 'contextmenu') {
|
153
157
|
setContextTarget(e);
|
154
158
|
}
|
@@ -156,7 +160,7 @@ const usePopover_unstable = (props)=>{
|
|
156
160
|
setContextTarget(undefined);
|
157
161
|
}
|
158
162
|
setOpenState(shouldOpen);
|
159
|
-
onOpenChange === null ||
|
163
|
+
(_onOpenChange = onOpenChange) === null || _onOpenChange === void 0 ? void 0 : _onOpenChange(e, {
|
160
164
|
open: shouldOpen
|
161
165
|
});
|
162
166
|
}, [
|
@@ -177,16 +181,16 @@ const usePopover_unstable = (props)=>{
|
|
177
181
|
align: 'center',
|
178
182
|
arrowPadding: 2 * _constants.popoverSurfaceBorderRadius,
|
179
183
|
target: state.openOnContext ? state.contextTarget : undefined,
|
180
|
-
...(0,
|
184
|
+
...(0, _reactpositioning.resolvePositioningShorthand)(state.positioning)
|
181
185
|
};
|
182
186
|
// no reason to render arrow when covering the target
|
183
187
|
if (positioningOptions.coverTarget) {
|
184
188
|
state.withArrow = false;
|
185
189
|
}
|
186
190
|
if (state.withArrow) {
|
187
|
-
positioningOptions.offset = (0,
|
191
|
+
positioningOptions.offset = (0, _reactpositioning.mergeArrowOffset)(positioningOptions.offset, _index.arrowHeights[state.size]);
|
188
192
|
}
|
189
|
-
const { targetRef: triggerRef
|
193
|
+
const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = (0, _reactpositioning.usePositioning)(positioningOptions);
|
190
194
|
return {
|
191
195
|
triggerRef,
|
192
196
|
contentRef,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["usePopover.js"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback, useOnClickOutside, useOnScrollOutside } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { usePositioning, resolvePositioningShorthand, mergeArrowOffset, usePositioningMouseTarget } from '@fluentui/react-positioning';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { arrowHeights } from '../PopoverSurface/index';\nimport { popoverSurfaceBorderRadius } from './constants';\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 */ export const usePopover_unstable = (props)=>{\n const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n const initialState = {\n size: 'medium',\n contextTarget,\n setContextTarget,\n ...props\n };\n const children = React.Children.toArray(props.children);\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 if (children.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('Popover must contain at most two children');\n }\n }\n let popoverTrigger = undefined;\n let popoverSurface = 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 const [open, setOpenState] = useOpenState(initialState);\n const setOpenTimeoutRef = React.useRef(0);\n const setOpen = useEventCallback((e, shouldOpen)=>{\n clearTimeout(setOpenTimeoutRef.current);\n if (!(e instanceof Event) && e.persist) {\n // < React 17 still uses pooled synthetic events\n e.persist();\n }\n if (e.type === 'mouseleave') {\n var _props_mouseLeaveDelay;\n // FIXME leaking Node timeout type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n setOpenTimeoutRef.current = setTimeout(()=>{\n setOpenState(e, shouldOpen);\n }, (_props_mouseLeaveDelay = props.mouseLeaveDelay) !== null && _props_mouseLeaveDelay !== void 0 ? _props_mouseLeaveDelay : 500);\n } else {\n setOpenState(e, shouldOpen);\n }\n });\n // Clear timeout on unmount\n // Setting state after a component unmounts can cause memory leaks\n React.useEffect(()=>{\n return ()=>{\n clearTimeout(setOpenTimeoutRef.current);\n };\n }, []);\n const toggleOpen = React.useCallback((e)=>{\n setOpen(e, !open);\n }, [\n setOpen,\n open\n ]);\n const positioningRefs = usePopoverRefs(initialState);\n const { targetDocument } = useFluent();\n var _props_closeOnIframeFocus;\n useOnClickOutside({\n contains: elementContains,\n element: targetDocument,\n callback: (ev)=>setOpen(ev, false),\n refs: [\n positioningRefs.triggerRef,\n positioningRefs.contentRef\n ],\n disabled: !open,\n disabledFocusOnIframe: !((_props_closeOnIframeFocus = props.closeOnIframeFocus) !== null && _props_closeOnIframeFocus !== void 0 ? _props_closeOnIframeFocus : true)\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: [\n positioningRefs.triggerRef,\n positioningRefs.contentRef\n ],\n disabled: !open || !closeOnScroll\n });\n const { findFirstFocusable } = useFocusFinders();\n React.useEffect(()=>{\n if (props.unstable_disableAutoFocus) {\n return;\n }\n if (open && positioningRefs.contentRef.current) {\n var _positioningRefs_contentRef_current_getAttribute;\n const containerTabIndex = (_positioningRefs_contentRef_current_getAttribute = positioningRefs.contentRef.current.getAttribute('tabIndex')) !== null && _positioningRefs_contentRef_current_getAttribute !== void 0 ? _positioningRefs_contentRef_current_getAttribute : undefined;\n const firstFocusable = isNaN(containerTabIndex) ? findFirstFocusable(positioningRefs.contentRef.current) : positioningRefs.contentRef.current;\n firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();\n }\n }, [\n findFirstFocusable,\n open,\n positioningRefs.contentRef,\n props.unstable_disableAutoFocus\n ]);\n var _props_inertTrapFocus, _props_inline;\n return {\n ...initialState,\n ...positioningRefs,\n // eslint-disable-next-line deprecation/deprecation\n inertTrapFocus: (_props_inertTrapFocus = props.inertTrapFocus) !== null && _props_inertTrapFocus !== void 0 ? _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 = props.inline) !== null && _props_inline !== void 0 ? _props_inline : false\n };\n};\n/**\n * Creates and manages the Popover open state\n */ function useOpenState(state) {\n const onOpenChange = useEventCallback((e, data)=>{\n var _state_onOpenChange;\n return (_state_onOpenChange = state.onOpenChange) === null || _state_onOpenChange === void 0 ? void 0 : _state_onOpenChange.call(state, e, data);\n });\n const [open, setOpenState] = useControllableState({\n state: state.open,\n defaultState: state.defaultOpen,\n initialState: false\n });\n state.open = open !== undefined ? open : state.open;\n const setContextTarget = state.setContextTarget;\n const setOpen = React.useCallback((e, shouldOpen)=>{\n if (shouldOpen && e.type === 'contextmenu') {\n setContextTarget(e);\n }\n if (!shouldOpen) {\n setContextTarget(undefined);\n }\n setOpenState(shouldOpen);\n onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(e, {\n open: shouldOpen\n });\n }, [\n setOpenState,\n onOpenChange,\n setContextTarget\n ]);\n return [\n open,\n setOpen\n ];\n}\n/**\n * Creates and sets the necessary trigger, target and content refs used by Popover\n */ function usePopoverRefs(state) {\n const positioningOptions = {\n position: 'above',\n align: 'center',\n arrowPadding: 2 * popoverSurfaceBorderRadius,\n target: state.openOnContext ? state.contextTarget : undefined,\n ...resolvePositioningShorthand(state.positioning)\n };\n // no reason to render arrow when covering the target\n if (positioningOptions.coverTarget) {\n state.withArrow = false;\n }\n if (state.withArrow) {\n positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeights[state.size]);\n }\n const { targetRef: triggerRef , containerRef: contentRef , arrowRef } = usePositioning(positioningOptions);\n return {\n triggerRef,\n contentRef,\n arrowRef\n };\n}\n"],"names":["usePopover_unstable","props","contextTarget","setContextTarget","usePositioningMouseTarget","initialState","size","children","React","Children","toArray","process","env","NODE_ENV","length","console","warn","popoverTrigger","undefined","popoverSurface","open","setOpenState","useOpenState","setOpenTimeoutRef","useRef","setOpen","useEventCallback","e","shouldOpen","clearTimeout","current","Event","persist","type","_props_mouseLeaveDelay","setTimeout","mouseLeaveDelay","useEffect","toggleOpen","useCallback","positioningRefs","usePopoverRefs","targetDocument","useFluent","_props_closeOnIframeFocus","useOnClickOutside","contains","elementContains","element","callback","ev","refs","triggerRef","contentRef","disabled","disabledFocusOnIframe","closeOnIframeFocus","closeOnScroll","openOnContext","useOnScrollOutside","findFirstFocusable","useFocusFinders","unstable_disableAutoFocus","_positioningRefs_contentRef_current_getAttribute","containerTabIndex","getAttribute","firstFocusable","isNaN","focus","_props_inertTrapFocus","_props_inline","inertTrapFocus","legacyTrapFocus","inline","state","onOpenChange","data","_state_onOpenChange","call","useControllableState","defaultState","defaultOpen","positioningOptions","position","align","arrowPadding","popoverSurfaceBorderRadius","target","resolvePositioningShorthand","positioning","coverTarget","withArrow","offset","mergeArrowOffset","arrowHeights","targetRef","containerRef","arrowRef","usePositioning"],"mappings":";;;;+BAeiBA;;aAAAA;;;6DAfM;gCACuE;qCAC9C;kCACyD;6BACzE;8BACA;uBACH;2BACc;AAQhC,MAAMA,sBAAsB,CAACC,QAAQ;IAC5C,MAAM,CAACC,eAAeC,iBAAiB,GAAGC,IAAAA,2CAAyB;IACnE,MAAMC,eAAe;QACjBC,MAAM;QACNJ;QACAC;QACA,GAAGF,KAAK;IACZ;IACA,MAAMM,WAAWC,OAAMC,QAAQ,CAACC,OAAO,CAACT,MAAMM,QAAQ;IACtD,IAAII,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACvC,IAAIN,SAASO,MAAM,KAAK,GAAG;YACvB,sCAAsC;YACtCC,QAAQC,IAAI,CAAC;QACjB,CAAC;QACD,IAAIT,SAASO,MAAM,GAAG,GAAG;YACrB,sCAAsC;YACtCC,QAAQC,IAAI,CAAC;QACjB,CAAC;IACL,CAAC;IACD,IAAIC,iBAAiBC;IACrB,IAAIC,iBAAiBD;IACrB,IAAIX,SAASO,MAAM,KAAK,GAAG;QACvBG,iBAAiBV,QAAQ,CAAC,EAAE;QAC5BY,iBAAiBZ,QAAQ,CAAC,EAAE;IAChC,OAAO,IAAIA,SAASO,MAAM,KAAK,GAAG;QAC9BK,iBAAiBZ,QAAQ,CAAC,EAAE;IAChC,CAAC;IACD,MAAM,CAACa,MAAMC,aAAa,GAAGC,aAAajB;IAC1C,MAAMkB,oBAAoBf,OAAMgB,MAAM,CAAC;IACvC,MAAMC,UAAUC,IAAAA,gCAAgB,EAAC,CAACC,GAAGC,aAAa;QAC9CC,aAAaN,kBAAkBO,OAAO;QACtC,IAAI,CAAEH,CAAAA,aAAaI,KAAI,KAAMJ,EAAEK,OAAO,EAAE;YACpC,gDAAgD;YAChDL,EAAEK,OAAO;QACb,CAAC;QACD,IAAIL,EAAEM,IAAI,KAAK,cAAc;YACzB,IAAIC;YACJ,kCAAkC;YAClC,6DAA6D;YAC7D,aAAa;YACbX,kBAAkBO,OAAO,GAAGK,WAAW,IAAI;gBACvCd,aAAaM,GAAGC;YACpB,GAAG,AAACM,CAAAA,yBAAyBjC,MAAMmC,eAAe,AAAD,MAAO,IAAI,IAAIF,2BAA2B,KAAK,IAAIA,yBAAyB,GAAG;QACpI,OAAO;YACHb,aAAaM,GAAGC;QACpB,CAAC;IACL;IACA,2BAA2B;IAC3B,kEAAkE;IAClEpB,OAAM6B,SAAS,CAAC,IAAI;QAChB,OAAO,IAAI;YACPR,aAAaN,kBAAkBO,OAAO;QAC1C;IACJ,GAAG,EAAE;IACL,MAAMQ,aAAa9B,OAAM+B,WAAW,CAAC,CAACZ,IAAI;QACtCF,QAAQE,GAAG,CAACP;IAChB,GAAG;QACCK;QACAL;KACH;IACD,MAAMoB,kBAAkBC,eAAepC;IACvC,MAAM,EAAEqC,eAAc,EAAG,GAAGC,IAAAA,uCAAS;IACrC,IAAIC;IACJC,IAAAA,iCAAiB,EAAC;QACdC,UAAUC,4BAAe;QACzBC,SAASN;QACTO,UAAU,CAACC,KAAKzB,QAAQyB,IAAI,KAAK;QACjCC,MAAM;YACFX,gBAAgBY,UAAU;YAC1BZ,gBAAgBa,UAAU;SAC7B;QACDC,UAAU,CAAClC;QACXmC,uBAAuB,CAAE,CAAA,AAACX,CAAAA,4BAA4B3C,MAAMuD,kBAAkB,AAAD,MAAO,IAAI,IAAIZ,8BAA8B,KAAK,IAAIA,4BAA4B,IAAI,AAAD;IACtK;IACA,uEAAuE;IACvE,MAAMa,gBAAgBpD,aAAaqD,aAAa,IAAIrD,aAAaoD,aAAa;IAC9EE,IAAAA,kCAAkB,EAAC;QACfb,UAAUC,4BAAe;QACzBC,SAASN;QACTO,UAAU,CAACC,KAAKzB,QAAQyB,IAAI,KAAK;QACjCC,MAAM;YACFX,gBAAgBY,UAAU;YAC1BZ,gBAAgBa,UAAU;SAC7B;QACDC,UAAU,CAAClC,QAAQ,CAACqC;IACxB;IACA,MAAM,EAAEG,mBAAkB,EAAG,GAAGC,IAAAA,6BAAe;IAC/CrD,OAAM6B,SAAS,CAAC,IAAI;QAChB,IAAIpC,MAAM6D,yBAAyB,EAAE;YACjC;QACJ,CAAC;QACD,IAAI1C,QAAQoB,gBAAgBa,UAAU,CAACvB,OAAO,EAAE;YAC5C,IAAIiC;YACJ,MAAMC,oBAAoB,AAACD,CAAAA,mDAAmDvB,gBAAgBa,UAAU,CAACvB,OAAO,CAACmC,YAAY,CAAC,WAAU,MAAO,IAAI,IAAIF,qDAAqD,KAAK,IAAIA,mDAAmD7C,SAAS;YACjR,MAAMgD,iBAAiBC,MAAMH,qBAAqBJ,mBAAmBpB,gBAAgBa,UAAU,CAACvB,OAAO,IAAIU,gBAAgBa,UAAU,CAACvB,OAAO;YAC7IoC,mBAAmB,IAAI,IAAIA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeE,KAAK,EAAE;QAC1F,CAAC;IACL,GAAG;QACCR;QACAxC;QACAoB,gBAAgBa,UAAU;QAC1BpD,MAAM6D,yBAAyB;KAClC;IACD,IAAIO,uBAAuBC;IAC3B,OAAO;QACH,GAAGjE,YAAY;QACf,GAAGmC,eAAe;QAClB,mDAAmD;QACnD+B,gBAAgB,AAACF,CAAAA,wBAAwBpE,MAAMsE,cAAc,AAAD,MAAO,IAAI,IAAIF,0BAA0B,KAAK,IAAIA,wBAAwBpE,MAAMuE,eAAe,KAAKtD,YAAY,KAAK,GAAG,CAACjB,MAAMuE,eAAe;QAC1MvD;QACAE;QACAC;QACAK;QACAa;QACAnC;QACAD;QACAuE,QAAQ,AAACH,CAAAA,gBAAgBrE,MAAMwE,MAAM,AAAD,MAAO,IAAI,IAAIH,kBAAkB,KAAK,IAAIA,gBAAgB,KAAK;IACvG;AACJ;AACA;;CAEC,GAAG,SAAShD,aAAaoD,KAAK,EAAE;IAC7B,MAAMC,eAAejD,IAAAA,gCAAgB,EAAC,CAACC,GAAGiD,OAAO;QAC7C,IAAIC;QACJ,OAAO,AAACA,CAAAA,sBAAsBH,MAAMC,YAAY,AAAD,MAAO,IAAI,IAAIE,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBC,IAAI,CAACJ,OAAO/C,GAAGiD,KAAK;IACpJ;IACA,MAAM,CAACxD,MAAMC,aAAa,GAAG0D,IAAAA,oCAAoB,EAAC;QAC9CL,OAAOA,MAAMtD,IAAI;QACjB4D,cAAcN,MAAMO,WAAW;QAC/B5E,cAAc,KAAK;IACvB;IACAqE,MAAMtD,IAAI,GAAGA,SAASF,YAAYE,OAAOsD,MAAMtD,IAAI;IACnD,MAAMjB,mBAAmBuE,MAAMvE,gBAAgB;IAC/C,MAAMsB,UAAUjB,OAAM+B,WAAW,CAAC,CAACZ,GAAGC,aAAa;QAC/C,IAAIA,cAAcD,EAAEM,IAAI,KAAK,eAAe;YACxC9B,iBAAiBwB;QACrB,CAAC;QACD,IAAI,CAACC,YAAY;YACbzB,iBAAiBe;QACrB,CAAC;QACDG,aAAaO;QACb+C,iBAAiB,IAAI,IAAIA,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAahD,GAAG;YACxEP,MAAMQ;QACV,EAAE;IACN,GAAG;QACCP;QACAsD;QACAxE;KACH;IACD,OAAO;QACHiB;QACAK;KACH;AACL;AACA;;CAEC,GAAG,SAASgB,eAAeiC,KAAK,EAAE;IAC/B,MAAMQ,qBAAqB;QACvBC,UAAU;QACVC,OAAO;QACPC,cAAc,IAAIC,qCAA0B;QAC5CC,QAAQb,MAAMhB,aAAa,GAAGgB,MAAMxE,aAAa,GAAGgB,SAAS;QAC7D,GAAGsE,IAAAA,6CAA2B,EAACd,MAAMe,WAAW,CAAC;IACrD;IACA,qDAAqD;IACrD,IAAIP,mBAAmBQ,WAAW,EAAE;QAChChB,MAAMiB,SAAS,GAAG,KAAK;IAC3B,CAAC;IACD,IAAIjB,MAAMiB,SAAS,EAAE;QACjBT,mBAAmBU,MAAM,GAAGC,IAAAA,kCAAgB,EAACX,mBAAmBU,MAAM,EAAEE,mBAAY,CAACpB,MAAMpE,IAAI,CAAC;IACpG,CAAC;IACD,MAAM,EAAEyF,WAAW3C,WAAU,EAAG4C,cAAc3C,WAAU,EAAG4C,SAAQ,EAAG,GAAGC,IAAAA,gCAAc,EAAChB;IACxF,OAAO;QACH9B;QACAC;QACA4C;IACJ;AACJ"}
|
1
|
+
{"version":3,"sources":["usePopover.js"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback, useOnClickOutside, useOnScrollOutside } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { usePositioning, resolvePositioningShorthand, mergeArrowOffset, usePositioningMouseTarget } from '@fluentui/react-positioning';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { arrowHeights } from '../PopoverSurface/index';\nimport { popoverSurfaceBorderRadius } from './constants';\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 */ export const usePopover_unstable = (props)=>{\n const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n const initialState = {\n size: 'medium',\n contextTarget,\n setContextTarget,\n ...props\n };\n const children = React.Children.toArray(props.children);\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 if (children.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('Popover must contain at most two children');\n }\n }\n let popoverTrigger = undefined;\n let popoverSurface = 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 const [open, setOpenState] = useOpenState(initialState);\n const setOpenTimeoutRef = React.useRef(0);\n const setOpen = useEventCallback((e, shouldOpen)=>{\n clearTimeout(setOpenTimeoutRef.current);\n if (!(e instanceof Event) && e.persist) {\n // < React 17 still uses pooled synthetic events\n e.persist();\n }\n if (e.type === 'mouseleave') {\n var _props_mouseLeaveDelay;\n // FIXME leaking Node timeout type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n setOpenTimeoutRef.current = setTimeout(()=>{\n setOpenState(e, shouldOpen);\n }, (_props_mouseLeaveDelay = props.mouseLeaveDelay) !== null && _props_mouseLeaveDelay !== void 0 ? _props_mouseLeaveDelay : 500);\n } else {\n setOpenState(e, shouldOpen);\n }\n });\n // Clear timeout on unmount\n // Setting state after a component unmounts can cause memory leaks\n React.useEffect(()=>{\n return ()=>{\n clearTimeout(setOpenTimeoutRef.current);\n };\n }, []);\n const toggleOpen = React.useCallback((e)=>{\n setOpen(e, !open);\n }, [\n setOpen,\n open\n ]);\n const positioningRefs = usePopoverRefs(initialState);\n const { targetDocument } = useFluent();\n var _props_closeOnIframeFocus;\n useOnClickOutside({\n contains: elementContains,\n element: targetDocument,\n callback: (ev)=>setOpen(ev, false),\n refs: [\n positioningRefs.triggerRef,\n positioningRefs.contentRef\n ],\n disabled: !open,\n disabledFocusOnIframe: !((_props_closeOnIframeFocus = props.closeOnIframeFocus) !== null && _props_closeOnIframeFocus !== void 0 ? _props_closeOnIframeFocus : true)\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: [\n positioningRefs.triggerRef,\n positioningRefs.contentRef\n ],\n disabled: !open || !closeOnScroll\n });\n const { findFirstFocusable } = useFocusFinders();\n React.useEffect(()=>{\n if (props.unstable_disableAutoFocus) {\n return;\n }\n if (open && positioningRefs.contentRef.current) {\n var _firstFocusable;\n var _positioningRefs_contentRef_current_getAttribute;\n const containerTabIndex = (_positioningRefs_contentRef_current_getAttribute = positioningRefs.contentRef.current.getAttribute('tabIndex')) !== null && _positioningRefs_contentRef_current_getAttribute !== void 0 ? _positioningRefs_contentRef_current_getAttribute : undefined;\n const firstFocusable = isNaN(containerTabIndex) ? findFirstFocusable(positioningRefs.contentRef.current) : positioningRefs.contentRef.current;\n (_firstFocusable = firstFocusable) === null || _firstFocusable === void 0 ? void 0 : _firstFocusable.focus();\n }\n }, [\n findFirstFocusable,\n open,\n positioningRefs.contentRef,\n props.unstable_disableAutoFocus\n ]);\n var _props_inertTrapFocus, _props_inline;\n return {\n ...initialState,\n ...positioningRefs,\n // eslint-disable-next-line deprecation/deprecation\n inertTrapFocus: (_props_inertTrapFocus = props.inertTrapFocus) !== null && _props_inertTrapFocus !== void 0 ? _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 = props.inline) !== null && _props_inline !== void 0 ? _props_inline : false\n };\n};\n/**\n * Creates and manages the Popover open state\n */ function useOpenState(state) {\n const onOpenChange = useEventCallback((e, data)=>{\n var _state_onOpenChange, _state;\n return (_state_onOpenChange = (_state = state).onOpenChange) === null || _state_onOpenChange === void 0 ? void 0 : _state_onOpenChange.call(_state, e, data);\n });\n const [open, setOpenState] = useControllableState({\n state: state.open,\n defaultState: state.defaultOpen,\n initialState: false\n });\n state.open = open !== undefined ? open : state.open;\n const setContextTarget = state.setContextTarget;\n const setOpen = React.useCallback((e, shouldOpen)=>{\n var _onOpenChange;\n if (shouldOpen && e.type === 'contextmenu') {\n setContextTarget(e);\n }\n if (!shouldOpen) {\n setContextTarget(undefined);\n }\n setOpenState(shouldOpen);\n (_onOpenChange = onOpenChange) === null || _onOpenChange === void 0 ? void 0 : _onOpenChange(e, {\n open: shouldOpen\n });\n }, [\n setOpenState,\n onOpenChange,\n setContextTarget\n ]);\n return [\n open,\n setOpen\n ];\n}\n/**\n * Creates and sets the necessary trigger, target and content refs used by Popover\n */ function usePopoverRefs(state) {\n const positioningOptions = {\n position: 'above',\n align: 'center',\n arrowPadding: 2 * popoverSurfaceBorderRadius,\n target: state.openOnContext ? state.contextTarget : undefined,\n ...resolvePositioningShorthand(state.positioning)\n };\n // no reason to render arrow when covering the target\n if (positioningOptions.coverTarget) {\n state.withArrow = false;\n }\n if (state.withArrow) {\n positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeights[state.size]);\n }\n const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePositioning(positioningOptions);\n return {\n triggerRef,\n contentRef,\n arrowRef\n };\n}\n"],"names":["usePopover_unstable","props","contextTarget","setContextTarget","usePositioningMouseTarget","initialState","size","children","React","Children","toArray","process","env","NODE_ENV","length","console","warn","popoverTrigger","undefined","popoverSurface","open","setOpenState","useOpenState","setOpenTimeoutRef","useRef","setOpen","useEventCallback","e","shouldOpen","clearTimeout","current","Event","persist","type","_props_mouseLeaveDelay","setTimeout","mouseLeaveDelay","useEffect","toggleOpen","useCallback","positioningRefs","usePopoverRefs","targetDocument","useFluent","_props_closeOnIframeFocus","useOnClickOutside","contains","elementContains","element","callback","ev","refs","triggerRef","contentRef","disabled","disabledFocusOnIframe","closeOnIframeFocus","closeOnScroll","openOnContext","useOnScrollOutside","findFirstFocusable","useFocusFinders","unstable_disableAutoFocus","_firstFocusable","_positioningRefs_contentRef_current_getAttribute","containerTabIndex","getAttribute","firstFocusable","isNaN","focus","_props_inertTrapFocus","_props_inline","inertTrapFocus","legacyTrapFocus","inline","state","onOpenChange","data","_state_onOpenChange","_state","call","useControllableState","defaultState","defaultOpen","_onOpenChange","positioningOptions","position","align","arrowPadding","popoverSurfaceBorderRadius","target","resolvePositioningShorthand","positioning","coverTarget","withArrow","offset","mergeArrowOffset","arrowHeights","targetRef","containerRef","arrowRef","usePositioning"],"mappings":"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"}
|
@@ -4,18 +4,20 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
});
|
5
5
|
Object.defineProperty(exports, "PopoverSurface", {
|
6
6
|
enumerable: true,
|
7
|
-
get: ()
|
7
|
+
get: function() {
|
8
|
+
return PopoverSurface;
|
9
|
+
}
|
8
10
|
});
|
9
|
-
const
|
10
|
-
const _react = /*#__PURE__*/
|
11
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
12
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
11
13
|
const _usePopoverSurface = require("./usePopoverSurface");
|
12
14
|
const _renderPopoverSurface = require("./renderPopoverSurface");
|
13
|
-
const
|
14
|
-
const
|
15
|
+
const _usePopoverSurfaceStylesstyles = require("./usePopoverSurfaceStyles.styles");
|
16
|
+
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
15
17
|
const PopoverSurface = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
16
18
|
const state = (0, _usePopoverSurface.usePopoverSurface_unstable)(props, ref);
|
17
|
-
(0,
|
18
|
-
(0,
|
19
|
+
(0, _usePopoverSurfaceStylesstyles.usePopoverSurfaceStyles_unstable)(state);
|
20
|
+
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('usePopoverSurfaceStyles_unstable')(state);
|
19
21
|
return (0, _renderPopoverSurface.renderPopoverSurface_unstable)(state);
|
20
22
|
});
|
21
23
|
PopoverSurface.displayName = 'PopoverSurface';
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["PopoverSurface.js"],"sourcesContent":["import * as React from 'react';\nimport { usePopoverSurface_unstable } from './usePopoverSurface';\nimport { renderPopoverSurface_unstable } from './renderPopoverSurface';\nimport { usePopoverSurfaceStyles_unstable } from './usePopoverSurfaceStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n/**\n * PopoverSurface component renders react children in a positioned box\n */ export const PopoverSurface = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n const state = usePopoverSurface_unstable(props, ref);\n usePopoverSurfaceStyles_unstable(state);\n useCustomStyleHook_unstable('usePopoverSurfaceStyles_unstable')(state);\n return renderPopoverSurface_unstable(state);\n});\nPopoverSurface.displayName = 'PopoverSurface';\n"],"names":["PopoverSurface","React","forwardRef","props","ref","state","usePopoverSurface_unstable","usePopoverSurfaceStyles_unstable","useCustomStyleHook_unstable","renderPopoverSurface_unstable","displayName"],"mappings":";;;;+BAOiBA
|
1
|
+
{"version":3,"sources":["PopoverSurface.js"],"sourcesContent":["import * as React from 'react';\nimport { usePopoverSurface_unstable } from './usePopoverSurface';\nimport { renderPopoverSurface_unstable } from './renderPopoverSurface';\nimport { usePopoverSurfaceStyles_unstable } from './usePopoverSurfaceStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n/**\n * PopoverSurface component renders react children in a positioned box\n */ export const PopoverSurface = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n const state = usePopoverSurface_unstable(props, ref);\n usePopoverSurfaceStyles_unstable(state);\n useCustomStyleHook_unstable('usePopoverSurfaceStyles_unstable')(state);\n return renderPopoverSurface_unstable(state);\n});\nPopoverSurface.displayName = 'PopoverSurface';\n"],"names":["PopoverSurface","React","forwardRef","props","ref","state","usePopoverSurface_unstable","usePopoverSurfaceStyles_unstable","useCustomStyleHook_unstable","renderPopoverSurface_unstable","displayName"],"mappings":";;;;+BAOiBA;;;eAAAA;;;;iEAPM;mCACoB;sCACG;+CACG;qCACL;AAGjC,MAAMA,iBAAiB,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACrE,MAAMC,QAAQC,IAAAA,6CAA0B,EAACH,OAAOC;IAChDG,IAAAA,+DAAgC,EAACF;IACjCG,IAAAA,gDAA2B,EAAC,oCAAoCH;IAChE,OAAOI,IAAAA,mDAA6B,EAACJ;AACzC;AACAL,eAAeU,WAAW,GAAG"}
|
@@ -2,9 +2,9 @@
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
3
3
|
value: true
|
4
4
|
});
|
5
|
-
const
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
5
|
+
const _export_star = require("@swc/helpers/_/_export_star");
|
6
|
+
_export_star._(require("./PopoverSurface"), exports);
|
7
|
+
_export_star._(require("./PopoverSurface.types"), exports);
|
8
|
+
_export_star._(require("./renderPopoverSurface"), exports);
|
9
|
+
_export_star._(require("./usePopoverSurface"), exports);
|
10
|
+
_export_star._(require("./usePopoverSurfaceStyles.styles"), exports);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["index.js"],"sourcesContent":["export * from './PopoverSurface';\nexport * from './PopoverSurface.types';\nexport * from './renderPopoverSurface';\nexport * from './usePopoverSurface';\nexport * from './usePopoverSurfaceStyles.styles';\n"],"names":[],"mappings":";;;;;
|
1
|
+
{"version":3,"sources":["index.js"],"sourcesContent":["export * from './PopoverSurface';\nexport * from './PopoverSurface.types';\nexport * from './renderPopoverSurface';\nexport * from './usePopoverSurface';\nexport * from './usePopoverSurfaceStyles.styles';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
|
@@ -1,24 +1,32 @@
|
|
1
|
-
/** @jsxRuntime
|
1
|
+
/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ "use strict";
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
3
3
|
value: true
|
4
4
|
});
|
5
5
|
Object.defineProperty(exports, "renderPopoverSurface_unstable", {
|
6
6
|
enumerable: true,
|
7
|
-
get: ()
|
7
|
+
get: function() {
|
8
|
+
return renderPopoverSurface_unstable;
|
9
|
+
}
|
8
10
|
});
|
9
|
-
const
|
10
|
-
const
|
11
|
-
const
|
11
|
+
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
|
12
|
+
const _reactutilities = require("@fluentui/react-utilities");
|
13
|
+
const _reactportal = require("@fluentui/react-portal");
|
12
14
|
const renderPopoverSurface_unstable = (state)=>{
|
13
|
-
(0,
|
14
|
-
const surface = /*#__PURE__*/ (0,
|
15
|
-
|
16
|
-
|
17
|
-
|
15
|
+
(0, _reactutilities.assertSlots)(state);
|
16
|
+
const surface = /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
|
17
|
+
children: [
|
18
|
+
state.withArrow && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
|
19
|
+
ref: state.arrowRef,
|
20
|
+
className: state.arrowClassName
|
21
|
+
}),
|
22
|
+
state.root.children
|
23
|
+
]
|
24
|
+
});
|
18
25
|
if (state.inline) {
|
19
26
|
return surface;
|
20
27
|
}
|
21
|
-
return /*#__PURE__*/ (0,
|
22
|
-
mountNode: state.mountNode
|
23
|
-
|
28
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactportal.Portal, {
|
29
|
+
mountNode: state.mountNode,
|
30
|
+
children: surface
|
31
|
+
});
|
24
32
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["renderPopoverSurface.js"],"sourcesContent":["/** @jsxRuntime
|
1
|
+
{"version":3,"sources":["renderPopoverSurface.js"],"sourcesContent":["/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { Portal } from '@fluentui/react-portal';\n/**\n * Render the final JSX of PopoverSurface\n */ export const renderPopoverSurface_unstable = (state)=>{\n assertSlots(state);\n const surface = /*#__PURE__*/ _jsxs(state.root, {\n children: [\n state.withArrow && /*#__PURE__*/ _jsx(\"div\", {\n ref: state.arrowRef,\n className: state.arrowClassName\n }),\n state.root.children\n ]\n });\n if (state.inline) {\n return surface;\n }\n return /*#__PURE__*/ _jsx(Portal, {\n mountNode: state.mountNode,\n children: surface\n });\n};\n"],"names":["renderPopoverSurface_unstable","state","assertSlots","surface","_jsxs","root","children","withArrow","_jsx","ref","arrowRef","className","arrowClassName","inline","Portal","mountNode"],"mappings":"AAAA,0BAA0B,GAAG,iDAAiD;;;;+BAK7DA;;;eAAAA;;;4BAL2G;gCAChG;6BACL;AAGZ,MAAMA,gCAAgC,CAACC;IAC9CC,IAAAA,2BAAW,EAACD;IACZ,MAAME,UAAU,WAAW,GAAGC,IAAAA,gBAAK,EAACH,MAAMI,IAAI,EAAE;QAC5CC,UAAU;YACNL,MAAMM,SAAS,IAAI,WAAW,GAAGC,IAAAA,eAAI,EAAC,OAAO;gBACzCC,KAAKR,MAAMS,QAAQ;gBACnBC,WAAWV,MAAMW,cAAc;YACnC;YACAX,MAAMI,IAAI,CAACC,QAAQ;SACtB;IACL;IACA,IAAIL,MAAMY,MAAM,EAAE;QACd,OAAOV;IACX;IACA,OAAO,WAAW,GAAGK,IAAAA,eAAI,EAACM,mBAAM,EAAE;QAC9BC,WAAWd,MAAMc,SAAS;QAC1BT,UAAUH;IACd;AACJ"}
|
@@ -4,12 +4,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
});
|
5
5
|
Object.defineProperty(exports, "usePopoverSurface_unstable", {
|
6
6
|
enumerable: true,
|
7
|
-
get: ()
|
7
|
+
get: function() {
|
8
|
+
return usePopoverSurface_unstable;
|
9
|
+
}
|
8
10
|
});
|
9
|
-
const
|
10
|
-
const _react = /*#__PURE__*/
|
11
|
-
const
|
12
|
-
const
|
11
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
12
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
13
|
+
const _reactutilities = require("@fluentui/react-utilities");
|
14
|
+
const _reacttabster = require("@fluentui/react-tabster");
|
13
15
|
const _popoverContext = require("../../popoverContext");
|
14
16
|
const usePopoverSurface_unstable = (props, ref)=>{
|
15
17
|
const contentRef = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.contentRef);
|
@@ -23,7 +25,7 @@ const usePopoverSurface_unstable = (props, ref)=>{
|
|
23
25
|
const trapFocus = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.trapFocus);
|
24
26
|
const inertTrapFocus = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.inertTrapFocus);
|
25
27
|
const inline = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.inline);
|
26
|
-
const { modalAttributes
|
28
|
+
const { modalAttributes } = (0, _reacttabster.useModalAttributes)({
|
27
29
|
trapFocus,
|
28
30
|
legacyTrapFocus: !inertTrapFocus,
|
29
31
|
alwaysFocusable: !trapFocus
|
@@ -38,8 +40,8 @@ const usePopoverSurface_unstable = (props, ref)=>{
|
|
38
40
|
components: {
|
39
41
|
root: 'div'
|
40
42
|
},
|
41
|
-
root:
|
42
|
-
ref: (0,
|
43
|
+
root: _reactutilities.slot.always((0, _reactutilities.getNativeElementProps)('div', {
|
44
|
+
ref: (0, _reactutilities.useMergedRefs)(ref, contentRef),
|
43
45
|
role: trapFocus ? 'dialog' : 'group',
|
44
46
|
'aria-modal': trapFocus ? true : undefined,
|
45
47
|
...trapFocus ? modalAttributes : {},
|
@@ -48,28 +50,30 @@ const usePopoverSurface_unstable = (props, ref)=>{
|
|
48
50
|
elementType: 'div'
|
49
51
|
})
|
50
52
|
};
|
51
|
-
const { onMouseEnter: onMouseEnterOriginal
|
53
|
+
const { onMouseEnter: onMouseEnterOriginal, onMouseLeave: onMouseLeaveOriginal, onKeyDown: onKeyDownOriginal } = state.root;
|
52
54
|
state.root.onMouseEnter = (e)=>{
|
55
|
+
var _onMouseEnterOriginal;
|
53
56
|
if (openOnHover) {
|
54
57
|
setOpen(e, true);
|
55
58
|
}
|
56
|
-
onMouseEnterOriginal === null ||
|
59
|
+
(_onMouseEnterOriginal = onMouseEnterOriginal) === null || _onMouseEnterOriginal === void 0 ? void 0 : _onMouseEnterOriginal(e);
|
57
60
|
};
|
58
61
|
state.root.onMouseLeave = (e)=>{
|
62
|
+
var _onMouseLeaveOriginal;
|
59
63
|
if (openOnHover) {
|
60
64
|
setOpen(e, false);
|
61
65
|
}
|
62
|
-
onMouseLeaveOriginal === null ||
|
66
|
+
(_onMouseLeaveOriginal = onMouseLeaveOriginal) === null || _onMouseLeaveOriginal === void 0 ? void 0 : _onMouseLeaveOriginal(e);
|
63
67
|
};
|
64
68
|
state.root.onKeyDown = (e)=>{
|
65
|
-
var _contentRef_current;
|
69
|
+
var _contentRef_current, _onKeyDownOriginal;
|
66
70
|
// only close if the event happened inside the current popover
|
67
71
|
// If using a stack of inline popovers, the user should call `stopPropagation` to avoid dismissing the entire stack
|
68
72
|
if (e.key === 'Escape' && ((_contentRef_current = contentRef.current) === null || _contentRef_current === void 0 ? void 0 : _contentRef_current.contains(e.target))) {
|
69
73
|
e.preventDefault();
|
70
74
|
setOpen(e, false);
|
71
75
|
}
|
72
|
-
onKeyDownOriginal === null ||
|
76
|
+
(_onKeyDownOriginal = onKeyDownOriginal) === null || _onKeyDownOriginal === void 0 ? void 0 : _onKeyDownOriginal(e);
|
73
77
|
};
|
74
78
|
return state;
|
75
79
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["usePopoverSurface.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext_unstable } from '../../popoverContext';\n/**\n * Create the state required to render PopoverSurface.\n *\n * The returned state can be modified with hooks such as usePopoverSurfaceStyles_unstable,\n * before being passed to renderPopoverSurface_unstable.\n *\n * @param props - props from this instance of PopoverSurface\n * @param ref - reference to root HTMLDivElement of PopoverSurface\n */ export const usePopoverSurface_unstable = (props, ref)=>{\n const contentRef = usePopoverContext_unstable((context)=>context.contentRef);\n const openOnHover = usePopoverContext_unstable((context)=>context.openOnHover);\n const setOpen = usePopoverContext_unstable((context)=>context.setOpen);\n const mountNode = usePopoverContext_unstable((context)=>context.mountNode);\n const arrowRef = usePopoverContext_unstable((context)=>context.arrowRef);\n const size = usePopoverContext_unstable((context)=>context.size);\n const withArrow = usePopoverContext_unstable((context)=>context.withArrow);\n const appearance = usePopoverContext_unstable((context)=>context.appearance);\n const trapFocus = usePopoverContext_unstable((context)=>context.trapFocus);\n const inertTrapFocus = usePopoverContext_unstable((context)=>context.inertTrapFocus);\n const inline = usePopoverContext_unstable((context)=>context.inline);\n const { modalAttributes
|
1
|
+
{"version":3,"sources":["usePopoverSurface.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext_unstable } from '../../popoverContext';\n/**\n * Create the state required to render PopoverSurface.\n *\n * The returned state can be modified with hooks such as usePopoverSurfaceStyles_unstable,\n * before being passed to renderPopoverSurface_unstable.\n *\n * @param props - props from this instance of PopoverSurface\n * @param ref - reference to root HTMLDivElement of PopoverSurface\n */ export const usePopoverSurface_unstable = (props, ref)=>{\n const contentRef = usePopoverContext_unstable((context)=>context.contentRef);\n const openOnHover = usePopoverContext_unstable((context)=>context.openOnHover);\n const setOpen = usePopoverContext_unstable((context)=>context.setOpen);\n const mountNode = usePopoverContext_unstable((context)=>context.mountNode);\n const arrowRef = usePopoverContext_unstable((context)=>context.arrowRef);\n const size = usePopoverContext_unstable((context)=>context.size);\n const withArrow = usePopoverContext_unstable((context)=>context.withArrow);\n const appearance = usePopoverContext_unstable((context)=>context.appearance);\n const trapFocus = usePopoverContext_unstable((context)=>context.trapFocus);\n const inertTrapFocus = usePopoverContext_unstable((context)=>context.inertTrapFocus);\n const inline = usePopoverContext_unstable((context)=>context.inline);\n const { modalAttributes } = useModalAttributes({\n trapFocus,\n legacyTrapFocus: !inertTrapFocus,\n alwaysFocusable: !trapFocus\n });\n const state = {\n inline,\n appearance,\n withArrow,\n size,\n arrowRef,\n mountNode,\n components: {\n root: 'div'\n },\n root: slot.always(getNativeElementProps('div', {\n ref: useMergedRefs(ref, contentRef),\n role: trapFocus ? 'dialog' : 'group',\n 'aria-modal': trapFocus ? true : undefined,\n ...trapFocus ? modalAttributes : {},\n ...props\n }), {\n elementType: 'div'\n })\n };\n const { onMouseEnter: onMouseEnterOriginal, onMouseLeave: onMouseLeaveOriginal, onKeyDown: onKeyDownOriginal } = state.root;\n state.root.onMouseEnter = (e)=>{\n var _onMouseEnterOriginal;\n if (openOnHover) {\n setOpen(e, true);\n }\n (_onMouseEnterOriginal = onMouseEnterOriginal) === null || _onMouseEnterOriginal === void 0 ? void 0 : _onMouseEnterOriginal(e);\n };\n state.root.onMouseLeave = (e)=>{\n var _onMouseLeaveOriginal;\n if (openOnHover) {\n setOpen(e, false);\n }\n (_onMouseLeaveOriginal = onMouseLeaveOriginal) === null || _onMouseLeaveOriginal === void 0 ? void 0 : _onMouseLeaveOriginal(e);\n };\n state.root.onKeyDown = (e)=>{\n var _contentRef_current, _onKeyDownOriginal;\n // only close if the event happened inside the current popover\n // If using a stack of inline popovers, the user should call `stopPropagation` to avoid dismissing the entire stack\n if (e.key === 'Escape' && ((_contentRef_current = contentRef.current) === null || _contentRef_current === void 0 ? void 0 : _contentRef_current.contains(e.target))) {\n e.preventDefault();\n setOpen(e, false);\n }\n (_onKeyDownOriginal = onKeyDownOriginal) === null || _onKeyDownOriginal === void 0 ? void 0 : _onKeyDownOriginal(e);\n };\n return state;\n};\n"],"names":["usePopoverSurface_unstable","props","ref","contentRef","usePopoverContext_unstable","context","openOnHover","setOpen","mountNode","arrowRef","size","withArrow","appearance","trapFocus","inertTrapFocus","inline","modalAttributes","useModalAttributes","legacyTrapFocus","alwaysFocusable","state","components","root","slot","always","getNativeElementProps","useMergedRefs","role","undefined","elementType","onMouseEnter","onMouseEnterOriginal","onMouseLeave","onMouseLeaveOriginal","onKeyDown","onKeyDownOriginal","e","_onMouseEnterOriginal","_onMouseLeaveOriginal","_contentRef_current","_onKeyDownOriginal","key","current","contains","target","preventDefault"],"mappings":";;;;+BAYiBA;;;eAAAA;;;;iEAZM;gCACoC;8BACxB;gCACQ;AAShC,MAAMA,6BAA6B,CAACC,OAAOC;IAClD,MAAMC,aAAaC,IAAAA,0CAA0B,EAAC,CAACC,UAAUA,QAAQF,UAAU;IAC3E,MAAMG,cAAcF,IAAAA,0CAA0B,EAAC,CAACC,UAAUA,QAAQC,WAAW;IAC7E,MAAMC,UAAUH,IAAAA,0CAA0B,EAAC,CAACC,UAAUA,QAAQE,OAAO;IACrE,MAAMC,YAAYJ,IAAAA,0CAA0B,EAAC,CAACC,UAAUA,QAAQG,SAAS;IACzE,MAAMC,WAAWL,IAAAA,0CAA0B,EAAC,CAACC,UAAUA,QAAQI,QAAQ;IACvE,MAAMC,OAAON,IAAAA,0CAA0B,EAAC,CAACC,UAAUA,QAAQK,IAAI;IAC/D,MAAMC,YAAYP,IAAAA,0CAA0B,EAAC,CAACC,UAAUA,QAAQM,SAAS;IACzE,MAAMC,aAAaR,IAAAA,0CAA0B,EAAC,CAACC,UAAUA,QAAQO,UAAU;IAC3E,MAAMC,YAAYT,IAAAA,0CAA0B,EAAC,CAACC,UAAUA,QAAQQ,SAAS;IACzE,MAAMC,iBAAiBV,IAAAA,0CAA0B,EAAC,CAACC,UAAUA,QAAQS,cAAc;IACnF,MAAMC,SAASX,IAAAA,0CAA0B,EAAC,CAACC,UAAUA,QAAQU,MAAM;IACnE,MAAM,EAAEC,eAAe,EAAE,GAAGC,IAAAA,gCAAkB,EAAC;QAC3CJ;QACAK,iBAAiB,CAACJ;QAClBK,iBAAiB,CAACN;IACtB;IACA,MAAMO,QAAQ;QACVL;QACAH;QACAD;QACAD;QACAD;QACAD;QACAa,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3CvB,KAAKwB,IAAAA,6BAAa,EAACxB,KAAKC;YACxBwB,MAAMd,YAAY,WAAW;YAC7B,cAAcA,YAAY,OAAOe;YACjC,GAAGf,YAAYG,kBAAkB,CAAC,CAAC;YACnC,GAAGf,KAAK;QACZ,IAAI;YACA4B,aAAa;QACjB;IACJ;IACA,MAAM,EAAEC,cAAcC,oBAAoB,EAAEC,cAAcC,oBAAoB,EAAEC,WAAWC,iBAAiB,EAAE,GAAGf,MAAME,IAAI;IAC3HF,MAAME,IAAI,CAACQ,YAAY,GAAG,CAACM;QACvB,IAAIC;QACJ,IAAI/B,aAAa;YACbC,QAAQ6B,GAAG;QACf;QACCC,CAAAA,wBAAwBN,oBAAmB,MAAO,QAAQM,0BAA0B,KAAK,IAAI,KAAK,IAAIA,sBAAsBD;IACjI;IACAhB,MAAME,IAAI,CAACU,YAAY,GAAG,CAACI;QACvB,IAAIE;QACJ,IAAIhC,aAAa;YACbC,QAAQ6B,GAAG;QACf;QACCE,CAAAA,wBAAwBL,oBAAmB,MAAO,QAAQK,0BAA0B,KAAK,IAAI,KAAK,IAAIA,sBAAsBF;IACjI;IACAhB,MAAME,IAAI,CAACY,SAAS,GAAG,CAACE;QACpB,IAAIG,qBAAqBC;QACzB,8DAA8D;QAC9D,mHAAmH;QACnH,IAAIJ,EAAEK,GAAG,KAAK,YAAa,CAAA,AAACF,CAAAA,sBAAsBpC,WAAWuC,OAAO,AAAD,MAAO,QAAQH,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBI,QAAQ,CAACP,EAAEQ,MAAM,CAAA,GAAI;YACjKR,EAAES,cAAc;YAChBtC,QAAQ6B,GAAG;QACf;QACCI,CAAAA,qBAAqBL,iBAAgB,MAAO,QAAQK,uBAAuB,KAAK,IAAI,KAAK,IAAIA,mBAAmBJ;IACrH;IACA,OAAOhB;AACX"}
|
@@ -9,9 +9,15 @@ function _export(target, all) {
|
|
9
9
|
});
|
10
10
|
}
|
11
11
|
_export(exports, {
|
12
|
-
popoverSurfaceClassNames: ()
|
13
|
-
|
14
|
-
|
12
|
+
popoverSurfaceClassNames: function() {
|
13
|
+
return popoverSurfaceClassNames;
|
14
|
+
},
|
15
|
+
arrowHeights: function() {
|
16
|
+
return arrowHeights;
|
17
|
+
},
|
18
|
+
usePopoverSurfaceStyles_unstable: function() {
|
19
|
+
return usePopoverSurfaceStyles_unstable;
|
20
|
+
}
|
15
21
|
});
|
16
22
|
const _react = require("@griffel/react");
|
17
23
|
const popoverSurfaceClassNames = {
|
@@ -24,7 +30,7 @@ const arrowHeights = {
|
|
24
30
|
};
|
25
31
|
/**
|
26
32
|
* Styles for the root slot
|
27
|
-
*/ const useStyles = /*#__PURE__*/ (0, _react
|
33
|
+
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
28
34
|
root: {
|
29
35
|
sj55zd: "f19n0e5",
|
30
36
|
De3pzq: "fxugw4r",
|