@fluentui/react-popover 9.5.15 → 9.7.0
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +147 -1
- package/CHANGELOG.md +42 -2
- package/lib/Popover.js +0 -1
- package/lib/Popover.js.map +1 -1
- package/lib/PopoverSurface.js +0 -1
- package/lib/PopoverSurface.js.map +1 -1
- package/lib/PopoverTrigger.js +0 -1
- package/lib/PopoverTrigger.js.map +1 -1
- package/lib/components/Popover/Popover.js +3 -5
- package/lib/components/Popover/Popover.js.map +1 -1
- package/lib/components/Popover/Popover.types.js +0 -1
- package/lib/components/Popover/Popover.types.js.map +1 -1
- package/lib/components/Popover/constants.js +1 -2
- package/lib/components/Popover/constants.js.map +1 -1
- package/lib/components/Popover/index.js +0 -1
- package/lib/components/Popover/index.js.map +1 -1
- package/lib/components/Popover/renderPopover.js +21 -39
- package/lib/components/Popover/renderPopover.js.map +1 -1
- package/lib/components/Popover/usePopover.js +165 -156
- package/lib/components/Popover/usePopover.js.map +1 -1
- package/lib/components/PopoverSurface/PopoverSurface.js +5 -7
- package/lib/components/PopoverSurface/PopoverSurface.js.map +1 -1
- package/lib/components/PopoverSurface/PopoverSurface.types.js +1 -2
- package/lib/components/PopoverSurface/PopoverSurface.types.js.map +1 -1
- package/lib/components/PopoverSurface/index.js +0 -1
- package/lib/components/PopoverSurface/index.js.map +1 -1
- package/lib/components/PopoverSurface/renderPopoverSurface.js +13 -18
- package/lib/components/PopoverSurface/renderPopoverSurface.js.map +1 -1
- package/lib/components/PopoverSurface/usePopoverSurface.js +59 -67
- package/lib/components/PopoverSurface/usePopoverSurface.js.map +1 -1
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.styles.js +25 -3
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.styles.js.map +1 -1
- package/lib/components/PopoverTrigger/PopoverTrigger.js +3 -5
- package/lib/components/PopoverTrigger/PopoverTrigger.js.map +1 -1
- package/lib/components/PopoverTrigger/PopoverTrigger.types.js +0 -1
- package/lib/components/PopoverTrigger/PopoverTrigger.types.js.map +1 -1
- package/lib/components/PopoverTrigger/index.js +0 -1
- package/lib/components/PopoverTrigger/index.js.map +1 -1
- package/lib/components/PopoverTrigger/renderPopoverTrigger.js +2 -3
- package/lib/components/PopoverTrigger/renderPopoverTrigger.js.map +1 -1
- package/lib/components/PopoverTrigger/usePopoverTrigger.js +57 -64
- package/lib/components/PopoverTrigger/usePopoverTrigger.js.map +1 -1
- package/lib/index.js +0 -1
- package/lib/index.js.map +1 -1
- package/lib/popoverContext.js +19 -20
- package/lib/popoverContext.js.map +1 -1
- package/lib-commonjs/Popover.js +0 -3
- package/lib-commonjs/Popover.js.map +1 -1
- package/lib-commonjs/PopoverSurface.js +0 -3
- package/lib-commonjs/PopoverSurface.js.map +1 -1
- package/lib-commonjs/PopoverTrigger.js +0 -3
- package/lib-commonjs/PopoverTrigger.js.map +1 -1
- package/lib-commonjs/components/Popover/Popover.js +1 -3
- package/lib-commonjs/components/Popover/Popover.js.map +1 -1
- package/lib-commonjs/components/Popover/Popover.types.js +0 -3
- package/lib-commonjs/components/Popover/Popover.types.js.map +1 -1
- package/lib-commonjs/components/Popover/constants.js +1 -3
- package/lib-commonjs/components/Popover/constants.js.map +1 -1
- package/lib-commonjs/components/Popover/index.js +0 -3
- package/lib-commonjs/components/Popover/index.js.map +1 -1
- package/lib-commonjs/components/Popover/renderPopover.js +1 -3
- package/lib-commonjs/components/Popover/renderPopover.js.map +1 -1
- package/lib-commonjs/components/Popover/usePopover.js +1 -3
- package/lib-commonjs/components/Popover/usePopover.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/PopoverSurface.js +1 -3
- package/lib-commonjs/components/PopoverSurface/PopoverSurface.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/PopoverSurface.types.js +0 -3
- package/lib-commonjs/components/PopoverSurface/PopoverSurface.types.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/index.js +0 -3
- package/lib-commonjs/components/PopoverSurface/index.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/renderPopoverSurface.js +1 -3
- package/lib-commonjs/components/PopoverSurface/renderPopoverSurface.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/usePopoverSurface.js +1 -3
- package/lib-commonjs/components/PopoverSurface/usePopoverSurface.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.styles.js +51 -3
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.styles.js.map +1 -1
- package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.js +1 -3
- package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.js.map +1 -1
- package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.types.js +0 -3
- package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.types.js.map +1 -1
- package/lib-commonjs/components/PopoverTrigger/index.js +0 -3
- package/lib-commonjs/components/PopoverTrigger/index.js.map +1 -1
- package/lib-commonjs/components/PopoverTrigger/renderPopoverTrigger.js +1 -3
- package/lib-commonjs/components/PopoverTrigger/renderPopoverTrigger.js.map +1 -1
- package/lib-commonjs/components/PopoverTrigger/usePopoverTrigger.js +1 -3
- package/lib-commonjs/components/PopoverTrigger/usePopoverTrigger.js.map +1 -1
- package/lib-commonjs/index.js +0 -3
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/popoverContext.js +2 -4
- package/lib-commonjs/popoverContext.js.map +1 -1
- package/package.json +12 -12
@@ -10,71 +10,63 @@ import { usePopoverContext_unstable } from '../../popoverContext';
|
|
10
10
|
*
|
11
11
|
* @param props - props from this instance of PopoverSurface
|
12
12
|
* @param ref - reference to root HTMLDivElement of PopoverSurface
|
13
|
-
*/
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
if (e.key === 'Escape' && ((_contentRef_current = contentRef.current) === null || _contentRef_current === void 0 ? void 0 : _contentRef_current.contains(e.target))) {
|
73
|
-
e.preventDefault();
|
74
|
-
setOpen(e, false);
|
75
|
-
}
|
76
|
-
onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(e);
|
77
|
-
};
|
78
|
-
return state;
|
13
|
+
*/ export const usePopoverSurface_unstable = (props, ref)=>{
|
14
|
+
const contentRef = usePopoverContext_unstable((context)=>context.contentRef);
|
15
|
+
const openOnHover = usePopoverContext_unstable((context)=>context.openOnHover);
|
16
|
+
const setOpen = usePopoverContext_unstable((context)=>context.setOpen);
|
17
|
+
const mountNode = usePopoverContext_unstable((context)=>context.mountNode);
|
18
|
+
const arrowRef = usePopoverContext_unstable((context)=>context.arrowRef);
|
19
|
+
const size = usePopoverContext_unstable((context)=>context.size);
|
20
|
+
const withArrow = usePopoverContext_unstable((context)=>context.withArrow);
|
21
|
+
const appearance = usePopoverContext_unstable((context)=>context.appearance);
|
22
|
+
const trapFocus = usePopoverContext_unstable((context)=>context.trapFocus);
|
23
|
+
const inertTrapFocus = usePopoverContext_unstable((context)=>context.inertTrapFocus);
|
24
|
+
const inline = usePopoverContext_unstable((context)=>context.inline);
|
25
|
+
const { modalAttributes } = useModalAttributes({
|
26
|
+
trapFocus,
|
27
|
+
legacyTrapFocus: !inertTrapFocus,
|
28
|
+
alwaysFocusable: !trapFocus
|
29
|
+
});
|
30
|
+
const state = {
|
31
|
+
inline,
|
32
|
+
appearance,
|
33
|
+
withArrow,
|
34
|
+
size,
|
35
|
+
arrowRef,
|
36
|
+
mountNode,
|
37
|
+
components: {
|
38
|
+
root: 'div'
|
39
|
+
},
|
40
|
+
root: getNativeElementProps('div', {
|
41
|
+
ref: useMergedRefs(ref, contentRef),
|
42
|
+
role: trapFocus ? 'dialog' : 'group',
|
43
|
+
'aria-modal': trapFocus ? true : undefined,
|
44
|
+
...modalAttributes,
|
45
|
+
...props
|
46
|
+
})
|
47
|
+
};
|
48
|
+
const { onMouseEnter: onMouseEnterOriginal , onMouseLeave: onMouseLeaveOriginal , onKeyDown: onKeyDownOriginal } = state.root;
|
49
|
+
state.root.onMouseEnter = (e)=>{
|
50
|
+
if (openOnHover) {
|
51
|
+
setOpen(e, true);
|
52
|
+
}
|
53
|
+
onMouseEnterOriginal === null || onMouseEnterOriginal === void 0 ? void 0 : onMouseEnterOriginal(e);
|
54
|
+
};
|
55
|
+
state.root.onMouseLeave = (e)=>{
|
56
|
+
if (openOnHover) {
|
57
|
+
setOpen(e, false);
|
58
|
+
}
|
59
|
+
onMouseLeaveOriginal === null || onMouseLeaveOriginal === void 0 ? void 0 : onMouseLeaveOriginal(e);
|
60
|
+
};
|
61
|
+
state.root.onKeyDown = (e)=>{
|
62
|
+
var _contentRef_current;
|
63
|
+
// only close if the event happened inside the current popover
|
64
|
+
// If using a stack of inline popovers, the user should call `stopPropagation` to avoid dismissing the entire stack
|
65
|
+
if (e.key === 'Escape' && ((_contentRef_current = contentRef.current) === null || _contentRef_current === void 0 ? void 0 : _contentRef_current.contains(e.target))) {
|
66
|
+
e.preventDefault();
|
67
|
+
setOpen(e, false);
|
68
|
+
}
|
69
|
+
onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(e);
|
70
|
+
};
|
71
|
+
return state;
|
79
72
|
};
|
80
|
-
//# sourceMappingURL=usePopoverSurface.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["usePopoverSurface.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext_unstable } from '../../popoverContext';\nimport type { PopoverSurfaceProps, PopoverSurfaceState } from './PopoverSurface.types';\n\n/**\n * Create the state required to render PopoverSurface.\n *\n * The returned state can be modified with hooks such as usePopoverSurfaceStyles_unstable,\n * before being passed to renderPopoverSurface_unstable.\n *\n * @param props - props from this instance of PopoverSurface\n * @param ref - reference to root HTMLDivElement of PopoverSurface\n */\nexport const usePopoverSurface_unstable = (\n props: PopoverSurfaceProps,\n ref: React.Ref<HTMLDivElement>,\n): PopoverSurfaceState => {\n const 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\n const state: PopoverSurfaceState = {\n inline,\n appearance,\n withArrow,\n size,\n arrowRef,\n mountNode,\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref: useMergedRefs(ref, contentRef),\n role: trapFocus ? 'dialog' : 'group',\n 'aria-modal': trapFocus ? true : undefined,\n ...modalAttributes,\n ...props,\n }),\n };\n\n const {\n onMouseEnter: onMouseEnterOriginal,\n onMouseLeave: onMouseLeaveOriginal,\n onKeyDown: onKeyDownOriginal,\n } = state.root;\n state.root.onMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {\n if (openOnHover) {\n setOpen(e, true);\n }\n\n onMouseEnterOriginal?.(e);\n };\n\n state.root.onMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {\n if (openOnHover) {\n setOpen(e, false);\n }\n\n onMouseLeaveOriginal?.(e);\n };\n\n state.root.onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n // only close if the event happened inside the current popover\n // If using a stack of inline popovers, the user should call `stopPropagation` to avoid dismissing the entire stack\n if (e.key === 'Escape' && contentRef.current?.contains(e.target as HTMLDivElement)) {\n e.preventDefault();\n setOpen(e, false);\n }\n\n onKeyDownOriginal?.(e);\n };\n\n return state;\n};\n"],"names":["React","getNativeElementProps","useMergedRefs","useModalAttributes","usePopoverContext_unstable","usePopoverSurface_unstable","props","ref","contentRef","context","openOnHover","setOpen","mountNode","arrowRef","size","withArrow","appearance","trapFocus","inertTrapFocus","inline","modalAttributes","legacyTrapFocus","alwaysFocusable","state","components","root","role","undefined","onMouseEnter","onMouseEnterOriginal","onMouseLeave","onMouseLeaveOriginal","onKeyDown","onKeyDownOriginal","e","key","current","contains","target","preventDefault"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,aAAa,QAAQ,4BAA4B;AACjF,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,0BAA0B,QAAQ,uBAAuB;AAGlE;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC,MACwB;IACxB,MAAMC,aAAaJ,2BAA2BK,CAAAA,UAAWA,QAAQD,UAAU;IAC3E,MAAME,cAAcN,2BAA2BK,CAAAA,UAAWA,QAAQC,WAAW;IAC7E,MAAMC,UAAUP,2BAA2BK,CAAAA,UAAWA,QAAQE,OAAO;IACrE,MAAMC,YAAYR,2BAA2BK,CAAAA,UAAWA,QAAQG,SAAS;IACzE,MAAMC,WAAWT,2BAA2BK,CAAAA,UAAWA,QAAQI,QAAQ;IACvE,MAAMC,OAAOV,2BAA2BK,CAAAA,UAAWA,QAAQK,IAAI;IAC/D,MAAMC,YAAYX,2BAA2BK,CAAAA,UAAWA,QAAQM,SAAS;IACzE,MAAMC,aAAaZ,2BAA2BK,CAAAA,UAAWA,QAAQO,UAAU;IAC3E,MAAMC,YAAYb,2BAA2BK,CAAAA,UAAWA,QAAQQ,SAAS;IACzE,MAAMC,iBAAiBd,2BAA2BK,CAAAA,UAAWA,QAAQS,cAAc;IACnF,MAAMC,SAASf,2BAA2BK,CAAAA,UAAWA,QAAQU,MAAM;IACnE,MAAM,EAAEC,gBAAe,EAAE,GAAGjB,mBAAmB;QAC7Cc;QACAI,iBAAiB,CAACH;QAClBI,iBAAiB,CAACL;IACpB;IAEA,MAAMM,QAA6B;QACjCJ;QACAH;QACAD;QACAD;QACAD;QACAD;QACAY,YAAY;YACVC,MAAM;QACR;QACAA,MAAMxB,sBAAsB,OAAO;YACjCM,KAAKL,cAAcK,KAAKC;YACxBkB,MAAMT,YAAY,WAAW,OAAO;YACpC,cAAcA,YAAY,IAAI,GAAGU,SAAS;YAC1C,GAAGP,eAAe;YAClB,GAAGd,KAAK;QACV;IACF;IAEA,MAAM,EACJsB,cAAcC,qBAAoB,EAClCC,cAAcC,qBAAoB,EAClCC,WAAWC,kBAAiB,EAC7B,GAAGV,MAAME,IAAI;IACdF,MAAME,IAAI,CAACG,YAAY,GAAG,CAACM,IAAwC;QACjE,IAAIxB,aAAa;YACfC,QAAQuB,GAAG,IAAI;QACjB,CAAC;QAEDL,iCAAAA,kCAAAA,KAAAA,IAAAA,qBAAuBK;IACzB;IAEAX,MAAME,IAAI,CAACK,YAAY,GAAG,CAACI,IAAwC;QACjE,IAAIxB,aAAa;YACfC,QAAQuB,GAAG,KAAK;QAClB,CAAC;QAEDH,iCAAAA,kCAAAA,KAAAA,IAAAA,qBAAuBG;IACzB;IAEAX,MAAME,IAAI,CAACO,SAAS,GAAG,CAACE,IAA2C;YAGvC1B;QAF1B,8DAA8D;QAC9D,mHAAmH;QACnH,IAAI0B,EAAEC,GAAG,KAAK,aAAY3B,CAAAA,sBAAAA,WAAW4B,OAAO,cAAlB5B,iCAAAA,KAAAA,IAAAA,oBAAoB6B,SAASH,EAAEI,MAAM,IAAqB;YAClFJ,EAAEK,cAAc;YAChB5B,QAAQuB,GAAG,KAAK;QAClB,CAAC;QAEDD,8BAAAA,+BAAAA,KAAAA,IAAAA,kBAAoBC;IACtB;IAEA,OAAOX;AACT,EAAE"}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { shorthands, __styles, mergeClasses } from '@griffel/react';
|
2
|
-
import { createArrowHeightStyles, createArrowStyles } from '@fluentui/react-positioning';
|
2
|
+
import { createArrowHeightStyles, createArrowStyles, createSlideStyles } from '@fluentui/react-positioning';
|
3
3
|
import { tokens, typographyStyles } from '@fluentui/react-theme';
|
4
4
|
export const popoverSurfaceClassNames = {
|
5
5
|
root: 'fui-PopoverSurface'
|
@@ -36,7 +36,22 @@ const useStyles = /*#__PURE__*/__styles({
|
|
36
36
|
Bahqtrf: "fk6fouc",
|
37
37
|
Be2twd7: "fkhj508",
|
38
38
|
Bhrd7zp: "figsok6",
|
39
|
-
Bg96gwp: "f1i3iumi"
|
39
|
+
Bg96gwp: "f1i3iumi",
|
40
|
+
B93otf3: "f18k4bn6",
|
41
|
+
vin17d: "fo1kyvf",
|
42
|
+
Ezkn3b: "fetxo7e",
|
43
|
+
ex8oj8: "fmm77a6",
|
44
|
+
Bksk4gw: "f12t24nk",
|
45
|
+
Bc5phfd: "f1babd7",
|
46
|
+
cbiifc: "f1jgo889",
|
47
|
+
fyiq5g: "f1ij1pew",
|
48
|
+
Bqc19t1: "f1gu8pa9",
|
49
|
+
Eet2gb: "fhfnl4n",
|
50
|
+
Bhl7k63: "fk8tkmz",
|
51
|
+
Bv12yb3: "f3n0535",
|
52
|
+
z0t1cu: "fi19xcv",
|
53
|
+
Bks05zx: "f1mzajhk",
|
54
|
+
Bvtglag: "fjp4h9y"
|
40
55
|
},
|
41
56
|
inverted: {
|
42
57
|
De3pzq: "fg3r6xk",
|
@@ -102,7 +117,14 @@ const useStyles = /*#__PURE__*/__styles({
|
|
102
117
|
Bwwlvwl: "fm1ycve"
|
103
118
|
}
|
104
119
|
}, {
|
105
|
-
d: [".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1hg901r{box-shadow:var(--shadow16);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fg3r6xk{background-color:var(--colorNeutralBackgroundStatic);}", ".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".f1kcqot9{padding-top:12px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fpe6lb7{padding-bottom:12px;}", ".fqag9an{padding-top:16px;}", ".f1gbmcue{padding-right:16px;}", ".f1rh9g5y{padding-left:16px;}", ".fp67ikv{padding-bottom:16px;}", ".fc7z3ec{padding-top:20px;}", ".fat0sn4{padding-right:20px;}", ".fekwl8i{padding-left:20px;}", ".fe2my4m{padding-bottom:20px;}", ".f1ekdpwm{width:8.484px;}", ".f83vc9z{height:8.484px;}", ".f1kmc0fn{width:11.312px;}", ".fb6lvc5{height:11.312px;}", ".f1euv43f{position:absolute;}", ".f1u2r49w{background-color:inherit;}", ".fd7fpy0{visibility:hidden;}", ".f1bsuimh{z-index:-1;}", ".f1wl9k8s::before{content:\"\";}", ".f1wkw4r9::before{visibility:visible;}", ".f1j7ml58::before{position:absolute;}", ".fyl8oag::before{box-sizing:border-box;}", ".frdoeuz::before{width:inherit;}", ".fb81m9q::before{height:inherit;}", ".f1ljr5q2::before{background-color:inherit;}", ".fyfemzf::before{border-right-width:1px;}", ".focyt6c::before{border-right-style:solid;}", ".fnhxbxj::before{border-right-color:var(--colorTransparentStroke);}", ".fdw6hkg::before{border-bottom-width:1px;}", ".f11yjt3y::before{border-bottom-style:solid;}", ".f1172wan::before{border-bottom-color:var(--colorTransparentStroke);}", ".f9e5op9::before{border-bottom-right-radius:var(--borderRadiusSmall);}", ".f112wvtl::before{border-bottom-left-radius:var(--borderRadiusSmall);}", ".ftj5xct::before{-webkit-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);-moz-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);-ms-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);}", ".fyavhwi::before{-webkit-transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);-moz-transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);-ms-transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);}", "[data-popper-placement^=\"top\"] .f1773hnp{bottom:-1px;}", "[data-popper-placement^=\"top\"] .f1n8855c{--angle:0;}", "[data-popper-placement^=\"right\"] .f1v7783n{left:-1px;}", "[data-popper-placement^=\"right\"] .fsw6im5{--angle:90deg;}", "[data-popper-placement^=\"bottom\"] .fh2hsk5{top:-1px;}", "[data-popper-placement^=\"bottom\"] .f159pzir{--angle:180deg;}", "[data-popper-placement^=\"left\"] .f11yvu4{right:-1px;}", "[data-popper-placement^=\"left\"] .fm1ycve{--angle:270deg;}"]
|
120
|
+
d: [".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1hg901r{box-shadow:var(--shadow16);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f18k4bn6{animation-composition:accumulate;}", ".fo1kyvf{-webkit-animation-duration:var(--durationSlower);animation-duration:var(--durationSlower);}", ".fetxo7e{-webkit-animation-timing-function:var(--curveDecelerateMid);animation-timing-function:var(--curveDecelerateMid);}", ".fmm77a6{--slide-distance-x:0px;}", ".f12t24nk{--slide-distance-y:10px;}", ".f1babd7[data-popper-placement^=right]{--slide-distance-x:-10px;}", ".f1jgo889[data-popper-placement^=right]{--slide-distance-y:0px;}", ".f1ij1pew[data-popper-placement^=bottom]{--slide-distance-x:0px;}", ".f1gu8pa9[data-popper-placement^=bottom]{--slide-distance-y:-10px;}", ".fhfnl4n[data-popper-placement^=left]{--slide-distance-x:10px;}", ".fk8tkmz[data-popper-placement^=left]{--slide-distance-y:0px;}", ".f3n0535{-webkit-animation-name:f5j8bii,fld5wjx;animation-name:f5j8bii,fld5wjx;}", ".fg3r6xk{background-color:var(--colorNeutralBackgroundStatic);}", ".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".f1kcqot9{padding-top:12px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fpe6lb7{padding-bottom:12px;}", ".fqag9an{padding-top:16px;}", ".f1gbmcue{padding-right:16px;}", ".f1rh9g5y{padding-left:16px;}", ".fp67ikv{padding-bottom:16px;}", ".fc7z3ec{padding-top:20px;}", ".fat0sn4{padding-right:20px;}", ".fekwl8i{padding-left:20px;}", ".fe2my4m{padding-bottom:20px;}", ".f1ekdpwm{width:8.484px;}", ".f83vc9z{height:8.484px;}", ".f1kmc0fn{width:11.312px;}", ".fb6lvc5{height:11.312px;}", ".f1euv43f{position:absolute;}", ".f1u2r49w{background-color:inherit;}", ".fd7fpy0{visibility:hidden;}", ".f1bsuimh{z-index:-1;}", ".f1wl9k8s::before{content:\"\";}", ".f1wkw4r9::before{visibility:visible;}", ".f1j7ml58::before{position:absolute;}", ".fyl8oag::before{box-sizing:border-box;}", ".frdoeuz::before{width:inherit;}", ".fb81m9q::before{height:inherit;}", ".f1ljr5q2::before{background-color:inherit;}", ".fyfemzf::before{border-right-width:1px;}", ".focyt6c::before{border-right-style:solid;}", ".fnhxbxj::before{border-right-color:var(--colorTransparentStroke);}", ".fdw6hkg::before{border-bottom-width:1px;}", ".f11yjt3y::before{border-bottom-style:solid;}", ".f1172wan::before{border-bottom-color:var(--colorTransparentStroke);}", ".f9e5op9::before{border-bottom-right-radius:var(--borderRadiusSmall);}", ".f112wvtl::before{border-bottom-left-radius:var(--borderRadiusSmall);}", ".ftj5xct::before{-webkit-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);-moz-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);-ms-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);}", ".fyavhwi::before{-webkit-transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);-moz-transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);-ms-transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);}", "[data-popper-placement^=\"top\"] .f1773hnp{bottom:-1px;}", "[data-popper-placement^=\"top\"] .f1n8855c{--angle:0;}", "[data-popper-placement^=\"right\"] .f1v7783n{left:-1px;}", "[data-popper-placement^=\"right\"] .fsw6im5{--angle:90deg;}", "[data-popper-placement^=\"bottom\"] .fh2hsk5{top:-1px;}", "[data-popper-placement^=\"bottom\"] .f159pzir{--angle:180deg;}", "[data-popper-placement^=\"left\"] .f11yvu4{right:-1px;}", "[data-popper-placement^=\"left\"] .fm1ycve{--angle:270deg;}"],
|
121
|
+
k: ["@-webkit-keyframes f5j8bii{from{opacity:0;}to{opacity:1;}}", "@keyframes f5j8bii{from{opacity:0;}to{opacity:1;}}", "@-webkit-keyframes fld5wjx{from{-webkit-transform:translate(var(--slide-distance-x), var(--slide-distance-y));-moz-transform:translate(var(--slide-distance-x), var(--slide-distance-y));-ms-transform:translate(var(--slide-distance-x), var(--slide-distance-y));transform:translate(var(--slide-distance-x), var(--slide-distance-y));}}", "@keyframes fld5wjx{from{-webkit-transform:translate(var(--slide-distance-x), var(--slide-distance-y));-moz-transform:translate(var(--slide-distance-x), var(--slide-distance-y));-ms-transform:translate(var(--slide-distance-x), var(--slide-distance-y));transform:translate(var(--slide-distance-x), var(--slide-distance-y));}}"],
|
122
|
+
m: [["@media (prefers-reduced-motion){.fi19xcv[data-popper-placement]{-webkit-animation-duration:1ms;animation-duration:1ms;}}", {
|
123
|
+
m: "(prefers-reduced-motion)"
|
124
|
+
}], ["@media (prefers-reduced-motion){.f1mzajhk[data-popper-placement]{-webkit-animation-name:f5j8bii;animation-name:f5j8bii;}}", {
|
125
|
+
m: "(prefers-reduced-motion)"
|
126
|
+
}]],
|
127
|
+
t: ["@supports not (animation-composition: accumulate){.fjp4h9y[data-popper-placement]{-webkit-animation-name:f5j8bii;animation-name:f5j8bii;}}"]
|
106
128
|
});
|
107
129
|
/**
|
108
130
|
* Apply styling to the PopoverSurface slots based on the state
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["shorthands","__styles","mergeClasses","createArrowHeightStyles","createArrowStyles","tokens","typographyStyles","popoverSurfaceClassNames","root","arrowHeights","small","medium","large","useStyles","sj55zd","De3pzq","E5pizo","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","inverted","brand","smallPadding","z8tnut","z189sj","Byoj8tv","uwmqm3","mediumPadding","largePadding","smallArrow","a9b677","Bqenvij","mediumLargeArrow","arrow","qhf8xq","Bcdw1i0","Bj3rh1h","Ftih45","B1puzpu","Brfgrao","Bcvre1j","Ccq8qp","Baz25je","cmx5o7","B4f6apu","m598lv","Bk5zm6e","y0oebl","qa3bma","Bqjgrrk","Budzafs","Hv9wc6","hl6cv3","Bh2vraf","yayu3t","wedwtw","rhl9o9","Bu8t5uz","B6q6orb","Bwwlvwl","d","usePopoverSurfaceStyles_unstable","state","styles","className","size","appearance","arrowClassName"],"sources":["
|
1
|
+
{"version":3,"names":["shorthands","__styles","mergeClasses","createArrowHeightStyles","createArrowStyles","createSlideStyles","tokens","typographyStyles","popoverSurfaceClassNames","root","arrowHeights","small","medium","large","useStyles","sj55zd","De3pzq","E5pizo","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","B93otf3","vin17d","Ezkn3b","ex8oj8","Bksk4gw","Bc5phfd","cbiifc","fyiq5g","Bqc19t1","Eet2gb","Bhl7k63","Bv12yb3","z0t1cu","Bks05zx","Bvtglag","inverted","brand","smallPadding","z8tnut","z189sj","Byoj8tv","uwmqm3","mediumPadding","largePadding","smallArrow","a9b677","Bqenvij","mediumLargeArrow","arrow","qhf8xq","Bcdw1i0","Bj3rh1h","Ftih45","B1puzpu","Brfgrao","Bcvre1j","Ccq8qp","Baz25je","cmx5o7","B4f6apu","m598lv","Bk5zm6e","y0oebl","qa3bma","Bqjgrrk","Budzafs","Hv9wc6","hl6cv3","Bh2vraf","yayu3t","wedwtw","rhl9o9","Bu8t5uz","B6q6orb","Bwwlvwl","d","k","m","t","usePopoverSurfaceStyles_unstable","state","styles","className","size","appearance","arrowClassName"],"sources":["usePopoverSurfaceStyles.styles.js"],"sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createArrowHeightStyles, createArrowStyles, createSlideStyles } 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 boxShadow: tokens.shadow16,\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n ...typographyStyles.body1,\n ...createSlideStyles(10)\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 ...shorthands.padding('12px')\n },\n mediumPadding: {\n ...shorthands.padding('16px')\n },\n largePadding: {\n ...shorthands.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 state.root.className = mergeClasses(popoverSurfaceClassNames.root, styles.root, state.size === 'small' && styles.smallPadding, state.size === 'medium' && styles.mediumPadding, state.size === 'large' && styles.largePadding, state.appearance === 'inverted' && styles.inverted, state.appearance === 'brand' && styles.brand, state.root.className);\n state.arrowClassName = mergeClasses(styles.arrow, state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow);\n return state;\n};\n"],"mappings":"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"}
|
@@ -3,12 +3,10 @@ import { usePopoverTrigger_unstable } from './usePopoverTrigger';
|
|
3
3
|
import { renderPopoverTrigger_unstable } from './renderPopoverTrigger';
|
4
4
|
/**
|
5
5
|
* Wraps a trigger element as an only child and adds the necessary event handling to open a popover.
|
6
|
-
*/
|
7
|
-
|
8
|
-
|
9
|
-
return renderPopoverTrigger_unstable(state);
|
6
|
+
*/ export const PopoverTrigger = (props)=>{
|
7
|
+
const state = usePopoverTrigger_unstable(props);
|
8
|
+
return renderPopoverTrigger_unstable(state);
|
10
9
|
};
|
11
10
|
PopoverTrigger.displayName = 'PopoverTrigger';
|
12
11
|
// type casting here is required to ensure internal type FluentTriggerComponent is not leaked
|
13
12
|
PopoverTrigger.isFluentTriggerComponent = true;
|
14
|
-
//# sourceMappingURL=PopoverTrigger.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["PopoverTrigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePopoverTrigger_unstable } from './usePopoverTrigger';\nimport { renderPopoverTrigger_unstable } from './renderPopoverTrigger';\nimport type { FluentTriggerComponent } from '@fluentui/react-utilities';\nimport type { PopoverTriggerProps } from './PopoverTrigger.types';\n\n/**\n * Wraps a trigger element as an only child and adds the necessary event handling to open a popover.\n */\nexport const PopoverTrigger: React.FC<PopoverTriggerProps> = props => {\n const state = usePopoverTrigger_unstable(props);\n\n return renderPopoverTrigger_unstable(state);\n};\n\nPopoverTrigger.displayName = 'PopoverTrigger';\n// type casting here is required to ensure internal type FluentTriggerComponent is not leaked\n(PopoverTrigger as FluentTriggerComponent).isFluentTriggerComponent = true;\n"],"names":["React","usePopoverTrigger_unstable","renderPopoverTrigger_unstable","PopoverTrigger","props","state","displayName","isFluentTriggerComponent"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AAIvE;;CAEC,GACD,OAAO,MAAMC,iBAAgDC,CAAAA,QAAS;IACpE,MAAMC,QAAQJ,2BAA2BG;IAEzC,OAAOF,8BAA8BG;AACvC,EAAE;AAEFF,eAAeG,WAAW,GAAG;AAC7B,6FAA6F;AAC5FH,eAA0CI,wBAAwB,GAAG,IAAI"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["PopoverTrigger.types.ts"],"sourcesContent":["import { ARIAButtonResultProps, ARIAButtonType } from '@fluentui/react-aria';\nimport type { TriggerProps } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\n/**\n * PopoverTrigger Props\n */\nexport type PopoverTriggerProps = TriggerProps<PopoverTriggerChildProps> & {\n /**\n * Disables internal trigger mechanism that ensures a child provided will be a compliant ARIA button.\n * @default false\n */\n disableButtonEnhancement?: boolean;\n};\n\n/**\n * PopoverTrigger State\n */\nexport type PopoverTriggerState = {\n children: React.ReactElement | null;\n};\n\n/**\n * Props that are passed to the child of the DialogTrigger when cloned to ensure correct behaviour for the Dialog\n */\nexport type PopoverTriggerChildProps<Type extends ARIAButtonType = ARIAButtonType, Props = {}> = ARIAButtonResultProps<\n Type,\n Props & {\n 'aria-expanded'?: 'true' | 'false';\n ref: React.Ref<unknown>;\n onMouseEnter: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n onMouseLeave: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n onContextMenu: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n }\n>;\n"],"names":["React"],"mappings":"AAEA,YAAYA,WAAW,QAAQ"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './PopoverTrigger';\nexport * from './PopoverTrigger.types';\nexport * from './renderPopoverTrigger';\nexport * from './usePopoverTrigger';\n"],"names":[],"mappings":"AAAA,cAAc,mBAAmB;AACjC,cAAc,yBAAyB;AACvC,cAAc,yBAAyB;AACvC,cAAc,sBAAsB"}
|
@@ -1,6 +1,5 @@
|
|
1
1
|
/**
|
2
2
|
* Render the final JSX of PopoverTrigger
|
3
|
-
*/export const renderPopoverTrigger_unstable = state
|
4
|
-
|
3
|
+
*/ export const renderPopoverTrigger_unstable = (state)=>{
|
4
|
+
return state.children;
|
5
5
|
};
|
6
|
-
//# sourceMappingURL=renderPopoverTrigger.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["renderPopoverTrigger.tsx"],"sourcesContent":["import type { PopoverTriggerState } from './PopoverTrigger.types';\n\n/**\n * Render the final JSX of PopoverTrigger\n */\nexport const renderPopoverTrigger_unstable = (state: PopoverTriggerState) => {\n return state.children;\n};\n"],"names":["renderPopoverTrigger_unstable","state","children"],"mappings":"AAEA;;CAEC,GACD,OAAO,MAAMA,gCAAgC,CAACC,QAA+B;IAC3E,OAAOA,MAAMC,QAAQ;AACvB,EAAE"}
|
@@ -11,68 +11,61 @@ import { Escape } from '@fluentui/keyboard-keys';
|
|
11
11
|
* before being passed to renderPopoverTrigger_unstable.
|
12
12
|
*
|
13
13
|
* @param props - props from this instance of PopoverTrigger
|
14
|
-
*/
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
}
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
}
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
}
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
onKeyDown: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onKeyDown, onKeyDown))
|
72
|
-
};
|
73
|
-
const ariaButtonTriggerChildProps = useARIAButtonProps((child === null || child === void 0 ? void 0 : child.type) === 'button' || (child === null || child === void 0 ? void 0 : child.type) === 'a' ? child.type : 'div', triggerChildProps);
|
74
|
-
return {
|
75
|
-
children: applyTriggerPropsToChildren(props.children, useARIAButtonProps((child === null || child === void 0 ? void 0 : child.type) === 'button' || (child === null || child === void 0 ? void 0 : child.type) === 'a' ? child.type : 'div', openOnContext ? contextMenuProps : disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps))
|
76
|
-
};
|
14
|
+
*/ export const usePopoverTrigger_unstable = (props)=>{
|
15
|
+
const { children , disableButtonEnhancement =false } = props;
|
16
|
+
const child = getTriggerChild(children);
|
17
|
+
const open = usePopoverContext_unstable((context)=>context.open);
|
18
|
+
const setOpen = usePopoverContext_unstable((context)=>context.setOpen);
|
19
|
+
const toggleOpen = usePopoverContext_unstable((context)=>context.toggleOpen);
|
20
|
+
const triggerRef = usePopoverContext_unstable((context)=>context.triggerRef);
|
21
|
+
const openOnHover = usePopoverContext_unstable((context)=>context.openOnHover);
|
22
|
+
const openOnContext = usePopoverContext_unstable((context)=>context.openOnContext);
|
23
|
+
const { triggerAttributes } = useModalAttributes();
|
24
|
+
const onContextMenu = (e)=>{
|
25
|
+
if (openOnContext) {
|
26
|
+
e.preventDefault();
|
27
|
+
setOpen(e, true);
|
28
|
+
}
|
29
|
+
};
|
30
|
+
const onClick = (e)=>{
|
31
|
+
if (!openOnContext) {
|
32
|
+
toggleOpen(e);
|
33
|
+
}
|
34
|
+
};
|
35
|
+
const onKeyDown = (e)=>{
|
36
|
+
if (e.key === Escape && open) {
|
37
|
+
setOpen(e, false);
|
38
|
+
// stop propagation to avoid conflicting with other elements that listen for `Escape`
|
39
|
+
// e,g: Dialog, Menu
|
40
|
+
e.stopPropagation();
|
41
|
+
}
|
42
|
+
};
|
43
|
+
const onMouseEnter = (e)=>{
|
44
|
+
if (openOnHover) {
|
45
|
+
setOpen(e, true);
|
46
|
+
}
|
47
|
+
};
|
48
|
+
const onMouseLeave = (e)=>{
|
49
|
+
if (openOnHover) {
|
50
|
+
setOpen(e, false);
|
51
|
+
}
|
52
|
+
};
|
53
|
+
const contextMenuProps = {
|
54
|
+
...triggerAttributes,
|
55
|
+
'aria-expanded': `${open}`,
|
56
|
+
...child === null || child === void 0 ? void 0 : child.props,
|
57
|
+
onMouseEnter: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onMouseEnter, onMouseEnter)),
|
58
|
+
onMouseLeave: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onMouseLeave, onMouseLeave)),
|
59
|
+
onContextMenu: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onContextMenu, onContextMenu)),
|
60
|
+
ref: useMergedRefs(triggerRef, child === null || child === void 0 ? void 0 : child.ref)
|
61
|
+
};
|
62
|
+
const triggerChildProps = {
|
63
|
+
...contextMenuProps,
|
64
|
+
onClick: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onClick, onClick)),
|
65
|
+
onKeyDown: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onKeyDown, onKeyDown))
|
66
|
+
};
|
67
|
+
const ariaButtonTriggerChildProps = useARIAButtonProps((child === null || child === void 0 ? void 0 : child.type) === 'button' || (child === null || child === void 0 ? void 0 : child.type) === 'a' ? child.type : 'div', triggerChildProps);
|
68
|
+
return {
|
69
|
+
children: applyTriggerPropsToChildren(props.children, useARIAButtonProps((child === null || child === void 0 ? void 0 : child.type) === 'button' || (child === null || child === void 0 ? void 0 : child.type) === 'a' ? child.type : 'div', openOnContext ? contextMenuProps : disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps))
|
70
|
+
};
|
77
71
|
};
|
78
|
-
//# sourceMappingURL=usePopoverTrigger.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["usePopoverTrigger.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n applyTriggerPropsToChildren,\n getTriggerChild,\n mergeCallbacks,\n useMergedRefs,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext_unstable } from '../../popoverContext';\nimport type { PopoverTriggerProps, PopoverTriggerState } from './PopoverTrigger.types';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { Escape } from '@fluentui/keyboard-keys';\n\n/**\n * Create the state required to render PopoverTrigger.\n *\n * The returned state can be modified with hooks such as usePopoverTriggerStyles,\n * before being passed to renderPopoverTrigger_unstable.\n *\n * @param props - props from this instance of PopoverTrigger\n */\nexport const usePopoverTrigger_unstable = (props: PopoverTriggerProps): PopoverTriggerState => {\n const { children, disableButtonEnhancement = false } = props;\n const child = getTriggerChild(children);\n\n const open = usePopoverContext_unstable(context => context.open);\n const setOpen = usePopoverContext_unstable(context => context.setOpen);\n const toggleOpen = usePopoverContext_unstable(context => context.toggleOpen);\n const triggerRef = usePopoverContext_unstable(context => context.triggerRef);\n const openOnHover = usePopoverContext_unstable(context => context.openOnHover);\n const openOnContext = usePopoverContext_unstable(context => context.openOnContext);\n const { triggerAttributes } = useModalAttributes();\n\n const onContextMenu = (e: React.MouseEvent<HTMLElement>) => {\n if (openOnContext) {\n e.preventDefault();\n setOpen(e, true);\n }\n };\n\n const onClick = (e: React.MouseEvent<HTMLElement>) => {\n if (!openOnContext) {\n toggleOpen(e);\n }\n };\n\n const onKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n if (e.key === Escape && open) {\n setOpen(e, false);\n // stop propagation to avoid conflicting with other elements that listen for `Escape`\n // e,g: Dialog, Menu\n e.stopPropagation();\n }\n };\n\n const onMouseEnter = (e: React.MouseEvent<HTMLElement>) => {\n if (openOnHover) {\n setOpen(e, true);\n }\n };\n\n const onMouseLeave = (e: React.MouseEvent<HTMLElement>) => {\n if (openOnHover) {\n setOpen(e, false);\n }\n };\n\n const contextMenuProps = {\n ...triggerAttributes,\n 'aria-expanded': `${open}`,\n ...child?.props,\n onMouseEnter: useEventCallback(mergeCallbacks(child?.props.onMouseEnter, onMouseEnter)),\n onMouseLeave: useEventCallback(mergeCallbacks(child?.props.onMouseLeave, onMouseLeave)),\n onContextMenu: useEventCallback(mergeCallbacks(child?.props.onContextMenu, onContextMenu)),\n ref: useMergedRefs(triggerRef, child?.ref),\n } as const;\n\n const triggerChildProps = {\n ...contextMenuProps,\n onClick: useEventCallback(mergeCallbacks(child?.props.onClick, onClick)),\n onKeyDown: useEventCallback(mergeCallbacks(child?.props.onKeyDown, onKeyDown)),\n };\n\n const ariaButtonTriggerChildProps = useARIAButtonProps(\n child?.type === 'button' || child?.type === 'a' ? child.type : 'div',\n triggerChildProps,\n );\n\n return {\n children: applyTriggerPropsToChildren(\n props.children,\n useARIAButtonProps(\n child?.type === 'button' || child?.type === 'a' ? child.type : 'div',\n openOnContext ? contextMenuProps : disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps,\n ),\n ),\n };\n};\n"],"names":["React","applyTriggerPropsToChildren","getTriggerChild","mergeCallbacks","useMergedRefs","useEventCallback","useModalAttributes","usePopoverContext_unstable","useARIAButtonProps","Escape","usePopoverTrigger_unstable","props","children","disableButtonEnhancement","child","open","context","setOpen","toggleOpen","triggerRef","openOnHover","openOnContext","triggerAttributes","onContextMenu","e","preventDefault","onClick","onKeyDown","key","stopPropagation","onMouseEnter","onMouseLeave","contextMenuProps","ref","triggerChildProps","ariaButtonTriggerChildProps","type"],"mappings":"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"}
|
package/lib/index.js
CHANGED
@@ -2,4 +2,3 @@ export { Popover, renderPopover_unstable, usePopover_unstable } from './Popover'
|
|
2
2
|
export { PopoverSurface, arrowHeights, popoverSurfaceClassNames, renderPopoverSurface_unstable, usePopoverSurfaceStyles_unstable, usePopoverSurface_unstable } from './PopoverSurface';
|
3
3
|
export { PopoverProvider, usePopoverContext_unstable } from './popoverContext';
|
4
4
|
export { PopoverTrigger, renderPopoverTrigger_unstable, usePopoverTrigger_unstable } from './PopoverTrigger';
|
5
|
-
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export { Popover, renderPopover_unstable, usePopover_unstable } from './Popover';\nexport type { OnOpenChangeData, OpenPopoverEvents, PopoverProps, PopoverSize, PopoverState } from './Popover';\nexport {\n PopoverSurface,\n arrowHeights,\n popoverSurfaceClassNames,\n renderPopoverSurface_unstable,\n usePopoverSurfaceStyles_unstable,\n usePopoverSurface_unstable,\n} from './PopoverSurface';\nexport type { PopoverSurfaceProps, PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface';\nexport { PopoverProvider, usePopoverContext_unstable } from './popoverContext';\nexport type { PopoverContextValue } from './popoverContext';\nexport { PopoverTrigger, renderPopoverTrigger_unstable, usePopoverTrigger_unstable } from './PopoverTrigger';\nexport type { PopoverTriggerChildProps, PopoverTriggerProps, PopoverTriggerState } from './PopoverTrigger';\n"],"names":["Popover","renderPopover_unstable","usePopover_unstable","PopoverSurface","arrowHeights","popoverSurfaceClassNames","renderPopoverSurface_unstable","usePopoverSurfaceStyles_unstable","usePopoverSurface_unstable","PopoverProvider","usePopoverContext_unstable","PopoverTrigger","renderPopoverTrigger_unstable","usePopoverTrigger_unstable"],"mappings":"AAAA,SAASA,OAAO,EAAEC,sBAAsB,EAAEC,mBAAmB,QAAQ,YAAY;AAEjF,SACEC,cAAc,EACdC,YAAY,EACZC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAE1B,SAASC,eAAe,EAAEC,0BAA0B,QAAQ,mBAAmB;AAE/E,SAASC,cAAc,EAAEC,6BAA6B,EAAEC,0BAA0B,QAAQ,mBAAmB"}
|
package/lib/popoverContext.js
CHANGED
@@ -1,24 +1,23 @@
|
|
1
1
|
import { createContext, useContextSelector } from '@fluentui/react-context-selector';
|
2
|
-
export const PopoverContext =
|
2
|
+
export const PopoverContext = createContext(undefined);
|
3
3
|
const popoverContextDefaultValue = {
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
4
|
+
open: false,
|
5
|
+
setOpen: ()=>null,
|
6
|
+
toggleOpen: ()=>null,
|
7
|
+
triggerRef: {
|
8
|
+
current: null
|
9
|
+
},
|
10
|
+
contentRef: {
|
11
|
+
current: null
|
12
|
+
},
|
13
|
+
arrowRef: {
|
14
|
+
current: null
|
15
|
+
},
|
16
|
+
openOnContext: false,
|
17
|
+
openOnHover: false,
|
18
|
+
size: 'medium',
|
19
|
+
trapFocus: false,
|
20
|
+
inline: false
|
21
21
|
};
|
22
22
|
export const PopoverProvider = PopoverContext.Provider;
|
23
|
-
export const usePopoverContext_unstable = selector
|
24
|
-
//# sourceMappingURL=popoverContext.js.map
|
23
|
+
export const usePopoverContext_unstable = (selector)=>useContextSelector(PopoverContext, (ctx = popoverContextDefaultValue)=>selector(ctx));
|