@fluentui/react-popover 9.0.0-rc.12 → 9.0.0-rc.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +70 -1
- package/CHANGELOG.md +20 -2
- package/Spec.md +5 -5
- package/dist/index.d.ts +2 -2
- package/lib/components/Popover/renderPopover.js +2 -0
- package/lib/components/Popover/renderPopover.js.map +1 -1
- package/lib/components/Popover/usePopover.js +1 -1
- package/lib/components/Popover/usePopover.js.map +1 -1
- package/lib/components/PopoverTrigger/PopoverTrigger.types.js.map +1 -1
- package/lib/components/PopoverTrigger/usePopoverTrigger.js +2 -2
- package/lib/components/PopoverTrigger/usePopoverTrigger.js.map +1 -1
- package/lib/popoverContext.js +1 -0
- package/lib/popoverContext.js.map +1 -1
- package/lib-commonjs/components/Popover/renderPopover.js +2 -0
- package/lib-commonjs/components/Popover/renderPopover.js.map +1 -1
- package/lib-commonjs/components/Popover/usePopover.js +1 -1
- package/lib-commonjs/components/Popover/usePopover.js.map +1 -1
- package/lib-commonjs/components/PopoverTrigger/usePopoverTrigger.js +2 -2
- package/lib-commonjs/components/PopoverTrigger/usePopoverTrigger.js.map +1 -1
- package/lib-commonjs/popoverContext.js +1 -0
- package/lib-commonjs/popoverContext.js.map +1 -1
- package/package.json +9 -9
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,76 @@
|
|
|
2
2
|
"name": "@fluentui/react-popover",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Tue, 31 May 2022 21:26:35 GMT",
|
|
6
|
+
"tag": "@fluentui/react-popover_v9.0.0-rc.13",
|
|
7
|
+
"version": "9.0.0-rc.13",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "olfedias@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-popover",
|
|
13
|
+
"commit": "0a5e9fa77a72eecafdd07034ccdc0b95fd49877c",
|
|
14
|
+
"comment": "chore: Update Griffel to latest version"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "sarah.higley@microsoft.com",
|
|
18
|
+
"package": "@fluentui/react-popover",
|
|
19
|
+
"commit": "c55c7d9d1141ae09542a78970416a8bbb344f623",
|
|
20
|
+
"comment": "update popover trigger to use aria-expanded instead of aria-haspopup"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "bernardo.sunderhus@gmail.com",
|
|
24
|
+
"package": "@fluentui/react-popover",
|
|
25
|
+
"commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd",
|
|
26
|
+
"comment": "updates import to react-shared-components"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-popover",
|
|
31
|
+
"comment": "Bump @fluentui/react-context-selector to v9.0.0-rc.10",
|
|
32
|
+
"commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-popover",
|
|
37
|
+
"comment": "Bump @fluentui/react-portal to v9.0.0-rc.13",
|
|
38
|
+
"commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "beachball",
|
|
42
|
+
"package": "@fluentui/react-popover",
|
|
43
|
+
"comment": "Bump @fluentui/react-positioning to v9.0.0-rc.11",
|
|
44
|
+
"commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"author": "beachball",
|
|
48
|
+
"package": "@fluentui/react-popover",
|
|
49
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.10",
|
|
50
|
+
"commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"author": "beachball",
|
|
54
|
+
"package": "@fluentui/react-popover",
|
|
55
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.0-rc.13",
|
|
56
|
+
"commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"author": "beachball",
|
|
60
|
+
"package": "@fluentui/react-popover",
|
|
61
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.10",
|
|
62
|
+
"commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"author": "beachball",
|
|
66
|
+
"package": "@fluentui/react-popover",
|
|
67
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8",
|
|
68
|
+
"commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
|
|
69
|
+
}
|
|
70
|
+
]
|
|
71
|
+
}
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"date": "Thu, 26 May 2022 21:01:27 GMT",
|
|
6
75
|
"tag": "@fluentui/react-popover_v9.0.0-rc.12",
|
|
7
76
|
"version": "9.0.0-rc.12",
|
|
8
77
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,30 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-popover
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 31 May 2022 21:26:35 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-rc.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.0.0-rc.13)
|
|
8
|
+
|
|
9
|
+
Tue, 31 May 2022 21:26:35 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.0.0-rc.12..@fluentui/react-popover_v9.0.0-rc.13)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- chore: Update Griffel to latest version ([PR #23275](https://github.com/microsoft/fluentui/pull/23275) by olfedias@microsoft.com)
|
|
15
|
+
- update popover trigger to use aria-expanded instead of aria-haspopup ([PR #23127](https://github.com/microsoft/fluentui/pull/23127) by sarah.higley@microsoft.com)
|
|
16
|
+
- updates import to react-shared-components ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by bernardo.sunderhus@gmail.com)
|
|
17
|
+
- Bump @fluentui/react-context-selector to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
|
|
18
|
+
- Bump @fluentui/react-portal to v9.0.0-rc.13 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
|
|
19
|
+
- Bump @fluentui/react-positioning to v9.0.0-rc.11 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
|
|
20
|
+
- Bump @fluentui/react-shared-contexts to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
|
|
21
|
+
- Bump @fluentui/react-tabster to v9.0.0-rc.13 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
|
|
22
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
|
|
23
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
|
|
24
|
+
|
|
7
25
|
## [9.0.0-rc.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.0.0-rc.12)
|
|
8
26
|
|
|
9
|
-
Thu, 26 May 2022 21:
|
|
27
|
+
Thu, 26 May 2022 21:01:27 GMT
|
|
10
28
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.0.0-rc.11..@fluentui/react-popover_v9.0.0-rc.12)
|
|
11
29
|
|
|
12
30
|
### Changes
|
package/Spec.md
CHANGED
|
@@ -344,7 +344,7 @@ Default popover
|
|
|
344
344
|
|
|
345
345
|
// Expected Markup
|
|
346
346
|
<div id="container">
|
|
347
|
-
<button aria-
|
|
347
|
+
<button aria-expanded="false">Trigger</button>
|
|
348
348
|
</div>
|
|
349
349
|
|
|
350
350
|
// on document.body
|
|
@@ -370,7 +370,7 @@ Popover that traps focus
|
|
|
370
370
|
|
|
371
371
|
// Expected Markup
|
|
372
372
|
<div id="container">
|
|
373
|
-
<button aria-
|
|
373
|
+
<button aria-expanded="false">Trigger</button>
|
|
374
374
|
</div>
|
|
375
375
|
|
|
376
376
|
// on document.body
|
|
@@ -396,7 +396,7 @@ Inline popover
|
|
|
396
396
|
|
|
397
397
|
// Expected Markup
|
|
398
398
|
<div id="container">
|
|
399
|
-
<button aria-
|
|
399
|
+
<button aria-expanded="false">Trigger</button>
|
|
400
400
|
<div>
|
|
401
401
|
{/** content */}
|
|
402
402
|
</div>
|
|
@@ -498,7 +498,7 @@ Accessible markup is divided into two scenarios:
|
|
|
498
498
|
|
|
499
499
|
```tsx
|
|
500
500
|
// Popover that does not trap focus
|
|
501
|
-
<button aria-
|
|
501
|
+
<button aria-expanded="false">Trigger</button>
|
|
502
502
|
<div role="complementary">
|
|
503
503
|
No focus trap
|
|
504
504
|
</div>
|
|
@@ -507,7 +507,7 @@ Accessible markup is divided into two scenarios:
|
|
|
507
507
|
<div aria-hidden="true" /> // other content
|
|
508
508
|
<div aria-hidden="true" /> // other content
|
|
509
509
|
<div aria-hidden="true" className='fui-provider'>
|
|
510
|
-
<button aria-
|
|
510
|
+
<button aria-expanded="false">Trigger</button>
|
|
511
511
|
</div>
|
|
512
512
|
|
|
513
513
|
<div role="dialog" aria-modal="true">
|
package/dist/index.d.ts
CHANGED
|
@@ -38,7 +38,7 @@ export declare const Popover: React_2.FC<PopoverProps>;
|
|
|
38
38
|
/**
|
|
39
39
|
* Context shared between Popover and its children components
|
|
40
40
|
*/
|
|
41
|
-
export declare type PopoverContextValue = Pick<PopoverState, 'toggleOpen' | 'setOpen' | 'triggerRef' | 'contentRef' | 'openOnHover' | 'openOnContext' | 'mountNode' | 'withArrow' | 'arrowRef' | 'size' | 'appearance' | 'trapFocus' | 'inline'>;
|
|
41
|
+
export declare type PopoverContextValue = Pick<PopoverState, 'open' | 'toggleOpen' | 'setOpen' | 'triggerRef' | 'contentRef' | 'openOnHover' | 'openOnContext' | 'mountNode' | 'withArrow' | 'arrowRef' | 'size' | 'appearance' | 'trapFocus' | 'inline'>;
|
|
42
42
|
|
|
43
43
|
/**
|
|
44
44
|
* Popover Props
|
|
@@ -203,7 +203,7 @@ export declare const PopoverTrigger: React_2.FC<PopoverTriggerProps> & FluentTri
|
|
|
203
203
|
|
|
204
204
|
export declare type PopoverTriggerChildProps = {
|
|
205
205
|
ref?: React_2.Ref<never>;
|
|
206
|
-
} & Pick<React_2.HTMLAttributes<HTMLElement>, 'aria-
|
|
206
|
+
} & Pick<React_2.HTMLAttributes<HTMLElement>, 'aria-expanded' | 'onClick' | 'onContextMenu' | 'onKeyDown' | 'onMouseEnter' | 'onMouseLeave'>;
|
|
207
207
|
|
|
208
208
|
/**
|
|
209
209
|
* PopoverTrigger Props
|
|
@@ -11,6 +11,7 @@ export const renderPopover_unstable = state => {
|
|
|
11
11
|
contentRef,
|
|
12
12
|
inline,
|
|
13
13
|
mountNode,
|
|
14
|
+
open,
|
|
14
15
|
openOnContext,
|
|
15
16
|
openOnHover,
|
|
16
17
|
setOpen,
|
|
@@ -27,6 +28,7 @@ export const renderPopover_unstable = state => {
|
|
|
27
28
|
contentRef,
|
|
28
29
|
inline,
|
|
29
30
|
mountNode,
|
|
31
|
+
open,
|
|
30
32
|
openOnContext,
|
|
31
33
|
openOnHover,
|
|
32
34
|
setOpen,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Popover/renderPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,QAA+B,sBAA/B;AAGA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAwB;AAC5D,QAAM;AACJ,IAAA,UADI;AAEJ,IAAA,QAFI;AAGJ,IAAA,UAHI;AAIJ,IAAA,MAJI;AAKJ,IAAA,SALI;AAMJ,IAAA,
|
|
1
|
+
{"version":3,"sources":["components/Popover/renderPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,QAA+B,sBAA/B;AAGA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAwB;AAC5D,QAAM;AACJ,IAAA,UADI;AAEJ,IAAA,QAFI;AAGJ,IAAA,UAHI;AAIJ,IAAA,MAJI;AAKJ,IAAA,SALI;AAMJ,IAAA,IANI;AAOJ,IAAA,aAPI;AAQJ,IAAA,WARI;AASJ,IAAA,OATI;AAUJ,IAAA,IAVI;AAWJ,IAAA,UAXI;AAYJ,IAAA,SAZI;AAaJ,IAAA,UAbI;AAcJ,IAAA;AAdI,MAeF,KAfJ;AAiBA,sBACE,KAAA,CAAA,aAAA,CAAC,cAAc,CAAC,QAAhB,EAAwB;AACtB,IAAA,KAAK,EAAE;AACL,MAAA,UADK;AAEL,MAAA,QAFK;AAGL,MAAA,UAHK;AAIL,MAAA,MAJK;AAKL,MAAA,SALK;AAML,MAAA,IANK;AAOL,MAAA,aAPK;AAQL,MAAA,WARK;AASL,MAAA,OATK;AAUL,MAAA,UAVK;AAWL,MAAA,UAXK;AAYL,MAAA,IAZK;AAaL,MAAA,SAbK;AAcL,MAAA;AAdK;AADe,GAAxB,EAkBG,KAAK,CAAC,cAlBT,EAmBG,KAAK,CAAC,IAAN,IAAc,KAAK,CAAC,cAnBvB,CADF;AAuBD,CAzCM","sourcesContent":["import * as React from 'react';\nimport { PopoverContext } from '../../popoverContext';\nimport type { PopoverState } from './Popover.types';\n\n/**\n * Render the final JSX of Popover\n */\nexport const renderPopover_unstable = (state: PopoverState) => {\n const {\n appearance,\n arrowRef,\n contentRef,\n inline,\n mountNode,\n open,\n openOnContext,\n openOnHover,\n setOpen,\n size,\n toggleOpen,\n trapFocus,\n triggerRef,\n withArrow,\n } = state;\n\n return (\n <PopoverContext.Provider\n value={{\n appearance,\n arrowRef,\n contentRef,\n inline,\n mountNode,\n open,\n openOnContext,\n openOnHover,\n setOpen,\n toggleOpen,\n triggerRef,\n size,\n trapFocus,\n withArrow,\n }}\n >\n {state.popoverTrigger}\n {state.open && state.popoverSurface}\n </PopoverContext.Provider>\n );\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { useControllableState, useEventCallback, useOnClickOutside, useOnScrollOutside } from '@fluentui/react-utilities';
|
|
3
|
-
import { useFluent } from '@fluentui/react-shared-contexts';
|
|
3
|
+
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
4
4
|
import { usePositioning, resolvePositioningShorthand, mergeArrowOffset, usePositioningMouseTarget } from '@fluentui/react-positioning';
|
|
5
5
|
import { elementContains } from '@fluentui/react-portal';
|
|
6
6
|
import { useFocusFinders } from '@fluentui/react-tabster';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Popover/usePopover.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SACE,oBADF,EAEE,gBAFF,EAGE,iBAHF,EAIE,kBAJF,QAKO,2BALP;AAMA,SAAS,SAAT,QAA0B,iCAA1B;AACA,SACE,cADF,EAEE,2BAFF,EAGE,gBAHF,EAIE,yBAJF,QAKO,6BALP;AAMA,SAAS,eAAT,QAAgC,wBAAhC;AACA,SAAS,eAAT,QAAgC,yBAAhC;AACA,SAAS,YAAT,QAA6B,yBAA7B;AAGA;;;;;;;AAOG;;AACH,OAAO,MAAM,mBAAmB,GAAI,KAAD,IAAsC;;;AACvE,QAAM,CAAC,aAAD,EAAgB,gBAAhB,IAAoC,yBAAyB,EAAnE;AACA,QAAM,YAAY,GAAG;AACnB,IAAA,IAAI,EAAE,QADa;AAEnB,IAAA,aAFmB;AAGnB,IAAA,gBAHmB;AAInB,OAAG;AAJgB,GAArB;AAOA,QAAM,QAAQ,GAAG,KAAK,CAAC,QAAN,CAAe,OAAf,CAAuB,KAAK,CAAC,QAA7B,CAAjB;;AAEA,MAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;AACzC,QAAI,QAAQ,CAAC,MAAT,KAAoB,CAAxB,EAA2B;AACzB;AACA,MAAA,OAAO,CAAC,IAAR,CAAa,yCAAb;AACD;;AAED,QAAI,QAAQ,CAAC,MAAT,GAAkB,CAAtB,EAAyB;AACvB;AACA,MAAA,OAAO,CAAC,IAAR,CAAa,2CAAb;AACD;AACF;;AAED,MAAI,cAAc,GAAmC,SAArD;AACA,MAAI,cAAc,GAAmC,SAArD;;AACA,MAAI,QAAQ,CAAC,MAAT,KAAoB,CAAxB,EAA2B;AACzB,IAAA,cAAc,GAAG,QAAQ,CAAC,CAAD,CAAzB;AACA,IAAA,cAAc,GAAG,QAAQ,CAAC,CAAD,CAAzB;AACD,GAHD,MAGO,IAAI,QAAQ,CAAC,MAAT,KAAoB,CAAxB,EAA2B;AAChC,IAAA,cAAc,GAAG,QAAQ,CAAC,CAAD,CAAzB;AACD;;AAED,QAAM,CAAC,IAAD,EAAO,YAAP,IAAuB,YAAY,CAAC,YAAD,CAAzC;AAEA,QAAM,iBAAiB,GAAG,KAAK,CAAC,MAAN,CAAa,CAAb,CAA1B;AAEA,QAAM,OAAO,GAAG,gBAAgB,CAAC,CAAC,CAAD,EAAuB,UAAvB,KAA8C;;;AAC7E,IAAA,YAAY,CAAC,iBAAiB,CAAC,OAAnB,CAAZ;;AACA,QAAI,EAAE,CAAC,YAAY,KAAf,KAAyB,CAAC,CAAC,OAA/B,EAAwC;AACtC;AACA,MAAA,CAAC,CAAC,OAAF;AACD;;AAED,QAAI,CAAC,CAAC,IAAF,KAAW,YAAf,EAA6B;AAC3B;AACA;AACA;AACA,MAAA,iBAAiB,CAAC,OAAlB,GAA4B,UAAU,CAAC,MAAK;AAC1C,QAAA,YAAY,CAAC,CAAD,EAAI,UAAJ,CAAZ;AACD,OAFqC,EAEnC,CAAA,EAAA,GAAA,KAAK,CAAC,eAAN,MAAqB,IAArB,IAAqB,EAAA,KAAA,KAAA,CAArB,GAAqB,EAArB,GAAyB,GAFU,CAAtC;AAGD,KAPD,MAOO;AACL,MAAA,YAAY,CAAC,CAAD,EAAI,UAAJ,CAAZ;AACD;AACF,GAjB+B,CAAhC,CApCuE,CAuDvE;AACA;;AACA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,WAAO,MAAK;AACV,MAAA,YAAY,CAAC,iBAAiB,CAAC,OAAnB,CAAZ;AACD,KAFD;AAGD,GAJD,EAIG,EAJH;AAMA,QAAM,UAAU,GAAG,KAAK,CAAC,WAAN,CACjB,CAAC,IAAG;AACF,IAAA,OAAO,CAAC,CAAD,EAAI,CAAC,IAAL,CAAP;AACD,GAHgB,EAIjB,CAAC,OAAD,EAAU,IAAV,CAJiB,CAAnB;AAOA,QAAM,eAAe,GAAG,cAAc,CAAC,YAAD,CAAtC;AAEA,QAAM;AAAE,IAAA;AAAF,MAAqB,SAAS,EAApC;AACA,EAAA,iBAAiB,CAAC;AAChB,IAAA,QAAQ,EAAE,eADM;AAEhB,IAAA,OAAO,EAAE,cAFO;AAGhB,IAAA,QAAQ,EAAE,EAAE,IAAI,OAAO,CAAC,EAAD,EAAK,KAAL,CAHP;AAIhB,IAAA,IAAI,EAAE,CAAC,eAAe,CAAC,UAAjB,EAA6B,eAAe,CAAC,UAA7C,CAJU;AAKhB,IAAA,QAAQ,EAAE,CAAC;AALK,GAAD,CAAjB,CAzEuE,CAiFvE;;AACA,QAAM,aAAa,GAAG,YAAY,CAAC,aAAb,IAA8B,YAAY,CAAC,aAAjE;AACA,EAAA,kBAAkB,CAAC;AACjB,IAAA,QAAQ,EAAE,eADO;AAEjB,IAAA,OAAO,EAAE,cAFQ;AAGjB,IAAA,QAAQ,EAAE,EAAE,IAAI,OAAO,CAAC,EAAD,EAAK,KAAL,CAHN;AAIjB,IAAA,IAAI,EAAE,CAAC,eAAe,CAAC,UAAjB,EAA6B,eAAe,CAAC,UAA7C,CAJW;AAKjB,IAAA,QAAQ,EAAE,CAAC,IAAD,IAAS,CAAC;AALH,GAAD,CAAlB;AAQA,QAAM;AAAE,IAAA;AAAF,MAAyB,eAAe,EAA9C;AAEA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,QAAI,IAAI,IAAI,eAAe,CAAC,UAAhB,CAA2B,OAAvC,EAAgD;AAC9C,YAAM,cAAc,GAAG,kBAAkB,CAAC,eAAe,CAAC,UAAhB,CAA2B,OAA5B,CAAzC;AACA,MAAA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,KAAhB,EAAA;AACD;AACF,GALD,EAKG,CAAC,kBAAD,EAAqB,IAArB,EAA2B,eAAe,CAAC,UAA3C,CALH;AAOA,SAAO,EACL,GAAG,YADE;AAEL,OAAG,eAFE;AAGL,IAAA,cAHK;AAIL,IAAA,cAJK;AAKL,IAAA,IALK;AAML,IAAA,OANK;AAOL,IAAA,UAPK;AAQL,IAAA,gBARK;AASL,IAAA,aATK;AAUL,IAAA,MAAM,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,MAAN,MAAY,IAAZ,IAAY,EAAA,KAAA,KAAA,CAAZ,GAAY,EAAZ,GAAgB;AAVnB,GAAP;AAYD,CAhHM;AAkHP;;AAEG;;AACH,SAAS,YAAT,CACE,KADF,EAC6G;AAE3G,QAAM,YAAY,GAAiC,gBAAgB,CAAC,CAAC,CAAD,EAAI,IAAJ,KAAY;AAAA,QAAA,EAAA;;AAAC,WAAA,CAAA,EAAA,GAAA,KAAK,CAAC,YAAN,MAAkB,IAAlB,IAAkB,EAAA,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAkB,EAAA,CAAA,IAAA,CAAlB,KAAkB,EAAG,CAAH,EAAM,IAAN,CAAlB;AAA6B,GAA3C,CAAnE;AAEA,QAAM,CAAC,IAAD,EAAO,YAAP,IAAuB,oBAAoB,CAAC;AAChD,IAAA,KAAK,EAAE,KAAK,CAAC,IADmC;AAEhD,IAAA,YAAY,EAAE,KAAK,CAAC,WAF4B;AAGhD,IAAA,YAAY,EAAE;AAHkC,GAAD,CAAjD;AAKA,EAAA,KAAK,CAAC,IAAN,GAAa,IAAI,KAAK,SAAT,GAAqB,IAArB,GAA4B,KAAK,CAAC,IAA/C;AACA,QAAM,gBAAgB,GAAG,KAAK,CAAC,gBAA/B;AAEA,QAAM,OAAO,GAAG,KAAK,CAAC,WAAN,CACd,CAAC,CAAD,EAAuB,UAAvB,KAA8C;AAC5C,QAAI,UAAU,IAAI,CAAC,CAAC,IAAF,KAAW,aAA7B,EAA4C;AAC1C,MAAA,gBAAgB,CAAC,CAAD,CAAhB;AACD;;AAED,QAAI,CAAC,UAAL,EAAiB;AACf,MAAA,gBAAgB,CAAC,SAAD,CAAhB;AACD;;AAED,IAAA,YAAY,CAAC,QAAQ,IAAG;AACtB;AACA;AACA,UAAI,QAAQ,KAAK,UAAjB,EAA6B;AAC3B,QAAA,YAAY,KAAA,IAAZ,IAAA,YAAY,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAA,YAAY,CAAG,CAAH,EAAM;AAAE,UAAA,IAAI,EAAE;AAAR,SAAN,CAAZ;AACD;;AAED,aAAO,UAAP;AACD,KARW,CAAZ;AASD,GAnBa,EAoBd,CAAC,YAAD,EAAe,YAAf,EAA6B,gBAA7B,CApBc,CAAhB;AAuBA,SAAO,CAAC,IAAD,EAAO,OAAP,CAAP;AACD;AAED;;AAEG;;;AACH,SAAS,cAAT,CACE,KADF,EAEqE;AAEnE,QAAM,kBAAkB,GAAG;AACzB,IAAA,QAAQ,EAAE,OADe;AAEzB,IAAA,KAAK,EAAE,QAFkB;AAGzB,IAAA,MAAM,EAAE,KAAK,CAAC,aAAN,GAAsB,KAAK,CAAC,aAA5B,GAA4C,SAH3B;AAIzB,OAAG,2BAA2B,CAAC,KAAK,CAAC,WAAP;AAJL,GAA3B,CAFmE,CASnE;;AACA,MAAI,kBAAkB,CAAC,WAAvB,EAAoC;AAClC,IAAA,KAAK,CAAC,SAAN,GAAkB,KAAlB;AACD;;AAED,MAAI,KAAK,CAAC,SAAV,EAAqB;AACnB,IAAA,kBAAkB,CAAC,MAAnB,GAA4B,gBAAgB,CAAC,kBAAkB,CAAC,MAApB,EAA4B,YAAY,CAAC,KAAK,CAAC,IAAP,CAAxC,CAA5C;AACD;;AAED,QAAM;AAAE,IAAA,SAAS,EAAE,UAAb;AAAyB,IAAA,YAAY,EAAE,UAAvC;AAAmD,IAAA;AAAnD,MAAgE,cAAc,CAAC,kBAAD,CAApF;AAEA,SAAO;AACL,IAAA,UADK;AAEL,IAAA,UAFK;AAGL,IAAA;AAHK,GAAP;AAKD","sourcesContent":["import * as React from 'react';\nimport {\n useControllableState,\n useEventCallback,\n useOnClickOutside,\n useOnScrollOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport {\n usePositioning,\n resolvePositioningShorthand,\n mergeArrowOffset,\n usePositioningMouseTarget,\n} from '@fluentui/react-positioning';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { arrowHeights } from '../PopoverSurface/index';\nimport type { OpenPopoverEvents, PopoverProps, PopoverState } from './Popover.types';\n\n/**\n * Create the state required to render Popover.\n *\n * The returned state can be modified with hooks such as usePopoverStyles,\n * before being passed to renderPopover_unstable.\n *\n * @param props - props from this instance of Popover\n */\nexport const usePopover_unstable = (props: PopoverProps): PopoverState => {\n const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n const initialState = {\n size: 'medium',\n contextTarget,\n setContextTarget,\n ...props,\n } as const;\n\n const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n if (process.env.NODE_ENV !== 'production') {\n if (children.length === 0) {\n // eslint-disable-next-line no-console\n console.warn('Popover must contain at least one child');\n }\n\n if (children.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('Popover must contain at most two children');\n }\n }\n\n let popoverTrigger: React.ReactElement | undefined = undefined;\n let popoverSurface: React.ReactElement | undefined = undefined;\n if (children.length === 2) {\n popoverTrigger = children[0];\n popoverSurface = children[1];\n } else if (children.length === 1) {\n popoverSurface = children[0];\n }\n\n const [open, setOpenState] = useOpenState(initialState);\n\n const setOpenTimeoutRef = React.useRef(0);\n\n const setOpen = useEventCallback((e: OpenPopoverEvents, shouldOpen: boolean) => {\n clearTimeout(setOpenTimeoutRef.current);\n if (!(e instanceof Event) && e.persist) {\n // < React 17 still uses pooled synthetic events\n e.persist();\n }\n\n if (e.type === 'mouseleave') {\n // FIXME leaking Node timeout type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n setOpenTimeoutRef.current = setTimeout(() => {\n setOpenState(e, shouldOpen);\n }, props.mouseLeaveDelay ?? 500);\n } else {\n setOpenState(e, shouldOpen);\n }\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\n const toggleOpen = React.useCallback<PopoverState['toggleOpen']>(\n e => {\n setOpen(e, !open);\n },\n [setOpen, open],\n );\n\n const positioningRefs = usePopoverRefs(initialState);\n\n const { targetDocument } = useFluent();\n useOnClickOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, false),\n refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n disabled: !open,\n });\n\n // only close on scroll for context, or when closeOnScroll is specified\n const closeOnScroll = initialState.openOnContext || initialState.closeOnScroll;\n useOnScrollOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, false),\n refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n disabled: !open || !closeOnScroll,\n });\n\n const { findFirstFocusable } = useFocusFinders();\n\n React.useEffect(() => {\n if (open && positioningRefs.contentRef.current) {\n const firstFocusable = findFirstFocusable(positioningRefs.contentRef.current);\n firstFocusable?.focus();\n }\n }, [findFirstFocusable, open, positioningRefs.contentRef]);\n\n return {\n ...initialState,\n ...positioningRefs,\n popoverTrigger,\n popoverSurface,\n open,\n setOpen,\n toggleOpen,\n setContextTarget,\n contextTarget,\n inline: props.inline ?? false,\n };\n};\n\n/**\n * Creates and manages the Popover open state\n */\nfunction useOpenState(\n state: Pick<PopoverState, 'setContextTarget' | 'onOpenChange'> & Pick<PopoverProps, 'open' | 'defaultOpen'>,\n) {\n const onOpenChange: PopoverState['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n const [open, setOpenState] = useControllableState({\n state: state.open,\n defaultState: state.defaultOpen,\n initialState: false,\n });\n state.open = open !== undefined ? open : state.open;\n const setContextTarget = state.setContextTarget;\n\n const setOpen = React.useCallback(\n (e: OpenPopoverEvents, shouldOpen: boolean) => {\n if (shouldOpen && e.type === 'contextmenu') {\n setContextTarget(e as React.MouseEvent);\n }\n\n if (!shouldOpen) {\n setContextTarget(undefined);\n }\n\n setOpenState(prevOpen => {\n // More than one event (mouse, focus, keyboard) can request the Popover to close\n // We assume the first event is the correct one\n if (prevOpen !== shouldOpen) {\n onOpenChange?.(e, { open: shouldOpen });\n }\n\n return shouldOpen;\n });\n },\n [setOpenState, onOpenChange, setContextTarget],\n );\n\n return [open, setOpen] as const;\n}\n\n/**\n * Creates and sets the necessary trigger, target and content refs used by Popover\n */\nfunction usePopoverRefs(\n state: Pick<PopoverState, 'size' | 'contextTarget'> &\n Pick<PopoverProps, 'positioning' | 'openOnContext' | 'withArrow'>,\n) {\n const positioningOptions = {\n position: 'above' as const,\n align: 'center' as const,\n target: state.openOnContext ? state.contextTarget : undefined,\n ...resolvePositioningShorthand(state.positioning),\n };\n\n // no reason to render arrow when covering the target\n if (positioningOptions.coverTarget) {\n state.withArrow = false;\n }\n\n if (state.withArrow) {\n positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeights[state.size]);\n }\n\n const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePositioning(positioningOptions);\n\n return {\n triggerRef,\n contentRef,\n arrowRef,\n } as const;\n}\n"],"sourceRoot":"../src/"}
|
|
1
|
+
{"version":3,"sources":["components/Popover/usePopover.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n useControllableState,\n useEventCallback,\n useOnClickOutside,\n useOnScrollOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n usePositioning,\n resolvePositioningShorthand,\n mergeArrowOffset,\n usePositioningMouseTarget,\n} from '@fluentui/react-positioning';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { arrowHeights } from '../PopoverSurface/index';\nimport type { OpenPopoverEvents, PopoverProps, PopoverState } from './Popover.types';\n\n/**\n * Create the state required to render Popover.\n *\n * The returned state can be modified with hooks such as usePopoverStyles,\n * before being passed to renderPopover_unstable.\n *\n * @param props - props from this instance of Popover\n */\nexport const usePopover_unstable = (props: PopoverProps): PopoverState => {\n const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n const initialState = {\n size: 'medium',\n contextTarget,\n setContextTarget,\n ...props,\n } as const;\n\n const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n if (process.env.NODE_ENV !== 'production') {\n if (children.length === 0) {\n // eslint-disable-next-line no-console\n console.warn('Popover must contain at least one child');\n }\n\n if (children.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('Popover must contain at most two children');\n }\n }\n\n let popoverTrigger: React.ReactElement | undefined = undefined;\n let popoverSurface: React.ReactElement | undefined = undefined;\n if (children.length === 2) {\n popoverTrigger = children[0];\n popoverSurface = children[1];\n } else if (children.length === 1) {\n popoverSurface = children[0];\n }\n\n const [open, setOpenState] = useOpenState(initialState);\n\n const setOpenTimeoutRef = React.useRef(0);\n\n const setOpen = useEventCallback((e: OpenPopoverEvents, shouldOpen: boolean) => {\n clearTimeout(setOpenTimeoutRef.current);\n if (!(e instanceof Event) && e.persist) {\n // < React 17 still uses pooled synthetic events\n e.persist();\n }\n\n if (e.type === 'mouseleave') {\n // FIXME leaking Node timeout type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n setOpenTimeoutRef.current = setTimeout(() => {\n setOpenState(e, shouldOpen);\n }, props.mouseLeaveDelay ?? 500);\n } else {\n setOpenState(e, shouldOpen);\n }\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\n const toggleOpen = React.useCallback<PopoverState['toggleOpen']>(\n e => {\n setOpen(e, !open);\n },\n [setOpen, open],\n );\n\n const positioningRefs = usePopoverRefs(initialState);\n\n const { targetDocument } = useFluent();\n useOnClickOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, false),\n refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n disabled: !open,\n });\n\n // only close on scroll for context, or when closeOnScroll is specified\n const closeOnScroll = initialState.openOnContext || initialState.closeOnScroll;\n useOnScrollOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, false),\n refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n disabled: !open || !closeOnScroll,\n });\n\n const { findFirstFocusable } = useFocusFinders();\n\n React.useEffect(() => {\n if (open && positioningRefs.contentRef.current) {\n const firstFocusable = findFirstFocusable(positioningRefs.contentRef.current);\n firstFocusable?.focus();\n }\n }, [findFirstFocusable, open, positioningRefs.contentRef]);\n\n return {\n ...initialState,\n ...positioningRefs,\n popoverTrigger,\n popoverSurface,\n open,\n setOpen,\n toggleOpen,\n setContextTarget,\n contextTarget,\n inline: props.inline ?? false,\n };\n};\n\n/**\n * Creates and manages the Popover open state\n */\nfunction useOpenState(\n state: Pick<PopoverState, 'setContextTarget' | 'onOpenChange'> & Pick<PopoverProps, 'open' | 'defaultOpen'>,\n) {\n const onOpenChange: PopoverState['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n const [open, setOpenState] = useControllableState({\n state: state.open,\n defaultState: state.defaultOpen,\n initialState: false,\n });\n state.open = open !== undefined ? open : state.open;\n const setContextTarget = state.setContextTarget;\n\n const setOpen = React.useCallback(\n (e: OpenPopoverEvents, shouldOpen: boolean) => {\n if (shouldOpen && e.type === 'contextmenu') {\n setContextTarget(e as React.MouseEvent);\n }\n\n if (!shouldOpen) {\n setContextTarget(undefined);\n }\n\n setOpenState(prevOpen => {\n // More than one event (mouse, focus, keyboard) can request the Popover to close\n // We assume the first event is the correct one\n if (prevOpen !== shouldOpen) {\n onOpenChange?.(e, { open: shouldOpen });\n }\n\n return shouldOpen;\n });\n },\n [setOpenState, onOpenChange, setContextTarget],\n );\n\n return [open, setOpen] as const;\n}\n\n/**\n * Creates and sets the necessary trigger, target and content refs used by Popover\n */\nfunction usePopoverRefs(\n state: Pick<PopoverState, 'size' | 'contextTarget'> &\n Pick<PopoverProps, 'positioning' | 'openOnContext' | 'withArrow'>,\n) {\n const positioningOptions = {\n position: 'above' as const,\n align: 'center' as const,\n target: state.openOnContext ? state.contextTarget : undefined,\n ...resolvePositioningShorthand(state.positioning),\n };\n\n // no reason to render arrow when covering the target\n if (positioningOptions.coverTarget) {\n state.withArrow = false;\n }\n\n if (state.withArrow) {\n positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeights[state.size]);\n }\n\n const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePositioning(positioningOptions);\n\n return {\n triggerRef,\n contentRef,\n arrowRef,\n } as const;\n}\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopoverTrigger.types.js","sourceRoot":"../src/","sources":["components/PopoverTrigger/PopoverTrigger.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\n\n/**\n * PopoverTrigger Props\n */\nexport type PopoverTriggerProps = {\n children:\n | (React.ReactElement & { ref?: React.Ref<unknown> })\n | ((props: PopoverTriggerChildProps) => React.ReactElement | null);\n};\n\n/**\n * PopoverTrigger State\n */\nexport type PopoverTriggerState = {\n children: React.ReactElement | null;\n};\n\nexport type PopoverTriggerChildProps = {\n ref?: React.Ref<never>;\n} & Pick<\n React.HTMLAttributes<HTMLElement>,\n 'aria-
|
|
1
|
+
{"version":3,"file":"PopoverTrigger.types.js","sourceRoot":"../src/","sources":["components/PopoverTrigger/PopoverTrigger.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\n\n/**\n * PopoverTrigger Props\n */\nexport type PopoverTriggerProps = {\n children:\n | (React.ReactElement & { ref?: React.Ref<unknown> })\n | ((props: PopoverTriggerChildProps) => React.ReactElement | null);\n};\n\n/**\n * PopoverTrigger State\n */\nexport type PopoverTriggerState = {\n children: React.ReactElement | null;\n};\n\nexport type PopoverTriggerChildProps = {\n ref?: React.Ref<never>;\n} & Pick<\n React.HTMLAttributes<HTMLElement>,\n 'aria-expanded' | 'onClick' | 'onContextMenu' | 'onKeyDown' | 'onMouseEnter' | 'onMouseLeave'\n>;\n"]}
|
|
@@ -18,12 +18,12 @@ export const usePopoverTrigger_unstable = props => {
|
|
|
18
18
|
children
|
|
19
19
|
} = props;
|
|
20
20
|
const child = /*#__PURE__*/React.isValidElement(children) ? getTriggerChild(children) : undefined;
|
|
21
|
+
const open = usePopoverContext_unstable(context => context.open);
|
|
21
22
|
const setOpen = usePopoverContext_unstable(context => context.setOpen);
|
|
22
23
|
const toggleOpen = usePopoverContext_unstable(context => context.toggleOpen);
|
|
23
24
|
const triggerRef = usePopoverContext_unstable(context => context.triggerRef);
|
|
24
25
|
const openOnHover = usePopoverContext_unstable(context => context.openOnHover);
|
|
25
26
|
const openOnContext = usePopoverContext_unstable(context => context.openOnContext);
|
|
26
|
-
const trapFocus = usePopoverContext_unstable(context => context.trapFocus);
|
|
27
27
|
const {
|
|
28
28
|
triggerAttributes
|
|
29
29
|
} = useModalAttributes();
|
|
@@ -68,7 +68,7 @@ export const usePopoverTrigger_unstable = props => {
|
|
|
68
68
|
|
|
69
69
|
return {
|
|
70
70
|
children: applyTriggerPropsToChildren(props.children, { ...triggerAttributes,
|
|
71
|
-
'aria-
|
|
71
|
+
'aria-expanded': `${open}`,
|
|
72
72
|
...(child === null || child === void 0 ? void 0 : child.props),
|
|
73
73
|
onClick: useMergedEventCallbacks((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onClick, onClick),
|
|
74
74
|
onMouseEnter: useMergedEventCallbacks((_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.onMouseEnter, onMouseEnter),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/PopoverTrigger/usePopoverTrigger.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SACE,2BADF,EAEE,eAFF,EAGE,6BAHF,EAIE,aAJF,EAKE,uBALF,EAME,gBANF,QAOO,2BAPP;AAQA,SAAS,kBAAT,QAAmC,yBAAnC;AACA,SAAS,0BAAT,QAA2C,sBAA3C;AAGA;;;;;;;AAOG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAAoD;;;AAC5F,QAAM;AAAE,IAAA;AAAF,MAAe,KAArB;AACA,QAAM,KAAK,GAAG,aAAA,KAAK,CAAC,cAAN,CAAqB,QAArB,IAAiC,eAAe,CAAC,QAAD,CAAhD,GAA6D,SAA3E;AAEA,QAAM,
|
|
1
|
+
{"version":3,"sources":["components/PopoverTrigger/usePopoverTrigger.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n applyTriggerPropsToChildren,\n getTriggerChild,\n shouldPreventDefaultOnKeyDown,\n useMergedRefs,\n useMergedEventCallbacks,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext_unstable } from '../../popoverContext';\nimport type { PopoverTriggerChildProps, PopoverTriggerProps, PopoverTriggerState } from './PopoverTrigger.types';\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 } = props;\n const child = React.isValidElement(children) ? getTriggerChild(children) : undefined;\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 (shouldPreventDefaultOnKeyDown(e) && (e.key === ' ' || e.key === 'Enter')) {\n e.preventDefault();\n (e.target as HTMLElement)?.click();\n }\n\n if (e.key === 'Escape') {\n setOpen(e, false);\n }\n };\n\n const onMouseEnter = useEventCallback((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 return {\n children: applyTriggerPropsToChildren<PopoverTriggerChildProps>(props.children, {\n ...triggerAttributes,\n 'aria-expanded': `${open}`,\n ...child?.props,\n onClick: useMergedEventCallbacks(child?.props?.onClick, onClick),\n onMouseEnter: useMergedEventCallbacks(child?.props?.onMouseEnter, onMouseEnter),\n onKeyDown: useMergedEventCallbacks(child?.props?.onKeyDown, onKeyDown),\n onMouseLeave: useMergedEventCallbacks(child?.props?.onMouseLeave, onMouseLeave),\n onContextMenu: useMergedEventCallbacks(child?.props?.onContextMenu, onContextMenu),\n ref: useMergedRefs(triggerRef, child?.ref),\n }),\n };\n};\n"],"sourceRoot":"../src/"}
|
package/lib/popoverContext.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["popoverContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,EAAwB,kBAAxB,QAAkD,kCAAlD;AAIA,OAAO,MAAM,cAAc,gBAAiC,aAAa,CAAsB;AAC7F,EAAA,OAAO,EAAE,MAAM,
|
|
1
|
+
{"version":3,"sources":["popoverContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,EAAwB,kBAAxB,QAAkD,kCAAlD;AAIA,OAAO,MAAM,cAAc,gBAAiC,aAAa,CAAsB;AAC7F,EAAA,IAAI,EAAE,KADuF;AAE7F,EAAA,OAAO,EAAE,MAAM,IAF8E;AAG7F,EAAA,UAAU,EAAE,MAAM,IAH2E;AAI7F,EAAA,UAAU,EAAE;AAAE,IAAA,OAAO,EAAE;AAAX,GAJiF;AAK7F,EAAA,UAAU,EAAE;AAAE,IAAA,OAAO,EAAE;AAAX,GALiF;AAM7F,EAAA,QAAQ,EAAE;AAAE,IAAA,OAAO,EAAE;AAAX,GANmF;AAO7F,EAAA,aAAa,EAAE,KAP8E;AAQ7F,EAAA,WAAW,EAAE,KARgF;AAS7F,EAAA,IAAI,EAAE,QATuF;AAU7F,EAAA,SAAS,EAAE,KAVkF;AAW7F,EAAA,MAAM,EAAE;AAXqF,CAAtB,CAAlE;AAcP,OAAO,MAAM,eAAe,GAAG,cAAc,CAAC,QAAvC;AAuBP,OAAO,MAAM,0BAA0B,GAAO,QAAJ,IACxC,kBAAkB,CAAC,cAAD,EAAiB,QAAjB,CADb","sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { PopoverState } from './components/Popover/index';\n\nexport const PopoverContext: Context<PopoverContextValue> = createContext<PopoverContextValue>({\n open: false,\n setOpen: () => null,\n toggleOpen: () => null,\n triggerRef: { current: null },\n contentRef: { current: null },\n arrowRef: { current: null },\n openOnContext: false,\n openOnHover: false,\n size: 'medium',\n trapFocus: false,\n inline: false,\n});\n\nexport const PopoverProvider = PopoverContext.Provider;\n\n/**\n * Context shared between Popover and its children components\n */\nexport type PopoverContextValue = Pick<\n PopoverState,\n | 'open'\n | 'toggleOpen'\n | 'setOpen'\n | 'triggerRef'\n | 'contentRef'\n | 'openOnHover'\n | 'openOnContext'\n | 'mountNode'\n | 'withArrow'\n | 'arrowRef'\n | 'size'\n | 'appearance'\n | 'trapFocus'\n | 'inline'\n>;\n\nexport const usePopoverContext_unstable = <T>(selector: ContextSelector<PopoverContextValue, T>): T =>\n useContextSelector(PopoverContext, selector);\n"],"sourceRoot":"../src/"}
|
|
@@ -20,6 +20,7 @@ const renderPopover_unstable = state => {
|
|
|
20
20
|
contentRef,
|
|
21
21
|
inline,
|
|
22
22
|
mountNode,
|
|
23
|
+
open,
|
|
23
24
|
openOnContext,
|
|
24
25
|
openOnHover,
|
|
25
26
|
setOpen,
|
|
@@ -36,6 +37,7 @@ const renderPopover_unstable = state => {
|
|
|
36
37
|
contentRef,
|
|
37
38
|
inline,
|
|
38
39
|
mountNode,
|
|
40
|
+
open,
|
|
39
41
|
openOnContext,
|
|
40
42
|
openOnHover,
|
|
41
43
|
setOpen,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Popover/renderPopover.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,sBAAsB,GAAI,KAAD,IAAwB;AAC5D,QAAM;AACJ,IAAA,UADI;AAEJ,IAAA,QAFI;AAGJ,IAAA,UAHI;AAIJ,IAAA,MAJI;AAKJ,IAAA,SALI;AAMJ,IAAA,
|
|
1
|
+
{"version":3,"sources":["components/Popover/renderPopover.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,sBAAsB,GAAI,KAAD,IAAwB;AAC5D,QAAM;AACJ,IAAA,UADI;AAEJ,IAAA,QAFI;AAGJ,IAAA,UAHI;AAIJ,IAAA,MAJI;AAKJ,IAAA,SALI;AAMJ,IAAA,IANI;AAOJ,IAAA,aAPI;AAQJ,IAAA,WARI;AASJ,IAAA,OATI;AAUJ,IAAA,IAVI;AAWJ,IAAA,UAXI;AAYJ,IAAA,SAZI;AAaJ,IAAA,UAbI;AAcJ,IAAA;AAdI,MAeF,KAfJ;AAiBA,SACE,KAAA,CAAA,aAAA,CAAC,gBAAA,CAAA,cAAA,CAAe,QAAhB,EAAwB;AACtB,IAAA,KAAK,EAAE;AACL,MAAA,UADK;AAEL,MAAA,QAFK;AAGL,MAAA,UAHK;AAIL,MAAA,MAJK;AAKL,MAAA,SALK;AAML,MAAA,IANK;AAOL,MAAA,aAPK;AAQL,MAAA,WARK;AASL,MAAA,OATK;AAUL,MAAA,UAVK;AAWL,MAAA,UAXK;AAYL,MAAA,IAZK;AAaL,MAAA,SAbK;AAcL,MAAA;AAdK;AADe,GAAxB,EAkBG,KAAK,CAAC,cAlBT,EAmBG,KAAK,CAAC,IAAN,IAAc,KAAK,CAAC,cAnBvB,CADF;AAuBD,CAzCM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourcesContent":["import * as React from 'react';\nimport { PopoverContext } from '../../popoverContext';\nimport type { PopoverState } from './Popover.types';\n\n/**\n * Render the final JSX of Popover\n */\nexport const renderPopover_unstable = (state: PopoverState) => {\n const {\n appearance,\n arrowRef,\n contentRef,\n inline,\n mountNode,\n open,\n openOnContext,\n openOnHover,\n setOpen,\n size,\n toggleOpen,\n trapFocus,\n triggerRef,\n withArrow,\n } = state;\n\n return (\n <PopoverContext.Provider\n value={{\n appearance,\n arrowRef,\n contentRef,\n inline,\n mountNode,\n open,\n openOnContext,\n openOnHover,\n setOpen,\n toggleOpen,\n triggerRef,\n size,\n trapFocus,\n withArrow,\n }}\n >\n {state.popoverTrigger}\n {state.open && state.popoverSurface}\n </PopoverContext.Provider>\n );\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -98,7 +98,7 @@ const usePopover_unstable = props => {
|
|
|
98
98
|
const positioningRefs = usePopoverRefs(initialState);
|
|
99
99
|
const {
|
|
100
100
|
targetDocument
|
|
101
|
-
} = react_shared_contexts_1.
|
|
101
|
+
} = react_shared_contexts_1.useFluent_unstable();
|
|
102
102
|
react_utilities_1.useOnClickOutside({
|
|
103
103
|
contains: react_portal_1.elementContains,
|
|
104
104
|
element: targetDocument,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Popover/usePopover.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n useControllableState,\n useEventCallback,\n useOnClickOutside,\n useOnScrollOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport {\n usePositioning,\n resolvePositioningShorthand,\n mergeArrowOffset,\n usePositioningMouseTarget,\n} from '@fluentui/react-positioning';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { arrowHeights } from '../PopoverSurface/index';\nimport type { OpenPopoverEvents, PopoverProps, PopoverState } from './Popover.types';\n\n/**\n * Create the state required to render Popover.\n *\n * The returned state can be modified with hooks such as usePopoverStyles,\n * before being passed to renderPopover_unstable.\n *\n * @param props - props from this instance of Popover\n */\nexport const usePopover_unstable = (props: PopoverProps): PopoverState => {\n const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n const initialState = {\n size: 'medium',\n contextTarget,\n setContextTarget,\n ...props,\n } as const;\n\n const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n if (process.env.NODE_ENV !== 'production') {\n if (children.length === 0) {\n // eslint-disable-next-line no-console\n console.warn('Popover must contain at least one child');\n }\n\n if (children.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('Popover must contain at most two children');\n }\n }\n\n let popoverTrigger: React.ReactElement | undefined = undefined;\n let popoverSurface: React.ReactElement | undefined = undefined;\n if (children.length === 2) {\n popoverTrigger = children[0];\n popoverSurface = children[1];\n } else if (children.length === 1) {\n popoverSurface = children[0];\n }\n\n const [open, setOpenState] = useOpenState(initialState);\n\n const setOpenTimeoutRef = React.useRef(0);\n\n const setOpen = useEventCallback((e: OpenPopoverEvents, shouldOpen: boolean) => {\n clearTimeout(setOpenTimeoutRef.current);\n if (!(e instanceof Event) && e.persist) {\n // < React 17 still uses pooled synthetic events\n e.persist();\n }\n\n if (e.type === 'mouseleave') {\n // FIXME leaking Node timeout type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n setOpenTimeoutRef.current = setTimeout(() => {\n setOpenState(e, shouldOpen);\n }, props.mouseLeaveDelay ?? 500);\n } else {\n setOpenState(e, shouldOpen);\n }\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\n const toggleOpen = React.useCallback<PopoverState['toggleOpen']>(\n e => {\n setOpen(e, !open);\n },\n [setOpen, open],\n );\n\n const positioningRefs = usePopoverRefs(initialState);\n\n const { targetDocument } = useFluent();\n useOnClickOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, false),\n refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n disabled: !open,\n });\n\n // only close on scroll for context, or when closeOnScroll is specified\n const closeOnScroll = initialState.openOnContext || initialState.closeOnScroll;\n useOnScrollOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, false),\n refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n disabled: !open || !closeOnScroll,\n });\n\n const { findFirstFocusable } = useFocusFinders();\n\n React.useEffect(() => {\n if (open && positioningRefs.contentRef.current) {\n const firstFocusable = findFirstFocusable(positioningRefs.contentRef.current);\n firstFocusable?.focus();\n }\n }, [findFirstFocusable, open, positioningRefs.contentRef]);\n\n return {\n ...initialState,\n ...positioningRefs,\n popoverTrigger,\n popoverSurface,\n open,\n setOpen,\n toggleOpen,\n setContextTarget,\n contextTarget,\n inline: props.inline ?? false,\n };\n};\n\n/**\n * Creates and manages the Popover open state\n */\nfunction useOpenState(\n state: Pick<PopoverState, 'setContextTarget' | 'onOpenChange'> & Pick<PopoverProps, 'open' | 'defaultOpen'>,\n) {\n const onOpenChange: PopoverState['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n const [open, setOpenState] = useControllableState({\n state: state.open,\n defaultState: state.defaultOpen,\n initialState: false,\n });\n state.open = open !== undefined ? open : state.open;\n const setContextTarget = state.setContextTarget;\n\n const setOpen = React.useCallback(\n (e: OpenPopoverEvents, shouldOpen: boolean) => {\n if (shouldOpen && e.type === 'contextmenu') {\n setContextTarget(e as React.MouseEvent);\n }\n\n if (!shouldOpen) {\n setContextTarget(undefined);\n }\n\n setOpenState(prevOpen => {\n // More than one event (mouse, focus, keyboard) can request the Popover to close\n // We assume the first event is the correct one\n if (prevOpen !== shouldOpen) {\n onOpenChange?.(e, { open: shouldOpen });\n }\n\n return shouldOpen;\n });\n },\n [setOpenState, onOpenChange, setContextTarget],\n );\n\n return [open, setOpen] as const;\n}\n\n/**\n * Creates and sets the necessary trigger, target and content refs used by Popover\n */\nfunction usePopoverRefs(\n state: Pick<PopoverState, 'size' | 'contextTarget'> &\n Pick<PopoverProps, 'positioning' | 'openOnContext' | 'withArrow'>,\n) {\n const positioningOptions = {\n position: 'above' as const,\n align: 'center' as const,\n target: state.openOnContext ? state.contextTarget : undefined,\n ...resolvePositioningShorthand(state.positioning),\n };\n\n // no reason to render arrow when covering the target\n if (positioningOptions.coverTarget) {\n state.withArrow = false;\n }\n\n if (state.withArrow) {\n positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeights[state.size]);\n }\n\n const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePositioning(positioningOptions);\n\n return {\n triggerRef,\n contentRef,\n arrowRef,\n } as const;\n}\n"],"sourceRoot":"../src/"}
|
|
1
|
+
{"version":3,"sources":["components/Popover/usePopover.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n useControllableState,\n useEventCallback,\n useOnClickOutside,\n useOnScrollOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n usePositioning,\n resolvePositioningShorthand,\n mergeArrowOffset,\n usePositioningMouseTarget,\n} from '@fluentui/react-positioning';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { arrowHeights } from '../PopoverSurface/index';\nimport type { OpenPopoverEvents, PopoverProps, PopoverState } from './Popover.types';\n\n/**\n * Create the state required to render Popover.\n *\n * The returned state can be modified with hooks such as usePopoverStyles,\n * before being passed to renderPopover_unstable.\n *\n * @param props - props from this instance of Popover\n */\nexport const usePopover_unstable = (props: PopoverProps): PopoverState => {\n const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n const initialState = {\n size: 'medium',\n contextTarget,\n setContextTarget,\n ...props,\n } as const;\n\n const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n if (process.env.NODE_ENV !== 'production') {\n if (children.length === 0) {\n // eslint-disable-next-line no-console\n console.warn('Popover must contain at least one child');\n }\n\n if (children.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('Popover must contain at most two children');\n }\n }\n\n let popoverTrigger: React.ReactElement | undefined = undefined;\n let popoverSurface: React.ReactElement | undefined = undefined;\n if (children.length === 2) {\n popoverTrigger = children[0];\n popoverSurface = children[1];\n } else if (children.length === 1) {\n popoverSurface = children[0];\n }\n\n const [open, setOpenState] = useOpenState(initialState);\n\n const setOpenTimeoutRef = React.useRef(0);\n\n const setOpen = useEventCallback((e: OpenPopoverEvents, shouldOpen: boolean) => {\n clearTimeout(setOpenTimeoutRef.current);\n if (!(e instanceof Event) && e.persist) {\n // < React 17 still uses pooled synthetic events\n e.persist();\n }\n\n if (e.type === 'mouseleave') {\n // FIXME leaking Node timeout type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n setOpenTimeoutRef.current = setTimeout(() => {\n setOpenState(e, shouldOpen);\n }, props.mouseLeaveDelay ?? 500);\n } else {\n setOpenState(e, shouldOpen);\n }\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\n const toggleOpen = React.useCallback<PopoverState['toggleOpen']>(\n e => {\n setOpen(e, !open);\n },\n [setOpen, open],\n );\n\n const positioningRefs = usePopoverRefs(initialState);\n\n const { targetDocument } = useFluent();\n useOnClickOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, false),\n refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n disabled: !open,\n });\n\n // only close on scroll for context, or when closeOnScroll is specified\n const closeOnScroll = initialState.openOnContext || initialState.closeOnScroll;\n useOnScrollOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, false),\n refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n disabled: !open || !closeOnScroll,\n });\n\n const { findFirstFocusable } = useFocusFinders();\n\n React.useEffect(() => {\n if (open && positioningRefs.contentRef.current) {\n const firstFocusable = findFirstFocusable(positioningRefs.contentRef.current);\n firstFocusable?.focus();\n }\n }, [findFirstFocusable, open, positioningRefs.contentRef]);\n\n return {\n ...initialState,\n ...positioningRefs,\n popoverTrigger,\n popoverSurface,\n open,\n setOpen,\n toggleOpen,\n setContextTarget,\n contextTarget,\n inline: props.inline ?? false,\n };\n};\n\n/**\n * Creates and manages the Popover open state\n */\nfunction useOpenState(\n state: Pick<PopoverState, 'setContextTarget' | 'onOpenChange'> & Pick<PopoverProps, 'open' | 'defaultOpen'>,\n) {\n const onOpenChange: PopoverState['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n const [open, setOpenState] = useControllableState({\n state: state.open,\n defaultState: state.defaultOpen,\n initialState: false,\n });\n state.open = open !== undefined ? open : state.open;\n const setContextTarget = state.setContextTarget;\n\n const setOpen = React.useCallback(\n (e: OpenPopoverEvents, shouldOpen: boolean) => {\n if (shouldOpen && e.type === 'contextmenu') {\n setContextTarget(e as React.MouseEvent);\n }\n\n if (!shouldOpen) {\n setContextTarget(undefined);\n }\n\n setOpenState(prevOpen => {\n // More than one event (mouse, focus, keyboard) can request the Popover to close\n // We assume the first event is the correct one\n if (prevOpen !== shouldOpen) {\n onOpenChange?.(e, { open: shouldOpen });\n }\n\n return shouldOpen;\n });\n },\n [setOpenState, onOpenChange, setContextTarget],\n );\n\n return [open, setOpen] as const;\n}\n\n/**\n * Creates and sets the necessary trigger, target and content refs used by Popover\n */\nfunction usePopoverRefs(\n state: Pick<PopoverState, 'size' | 'contextTarget'> &\n Pick<PopoverProps, 'positioning' | 'openOnContext' | 'withArrow'>,\n) {\n const positioningOptions = {\n position: 'above' as const,\n align: 'center' as const,\n target: state.openOnContext ? state.contextTarget : undefined,\n ...resolvePositioningShorthand(state.positioning),\n };\n\n // no reason to render arrow when covering the target\n if (positioningOptions.coverTarget) {\n state.withArrow = false;\n }\n\n if (state.withArrow) {\n positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeights[state.size]);\n }\n\n const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePositioning(positioningOptions);\n\n return {\n triggerRef,\n contentRef,\n arrowRef,\n } as const;\n}\n"],"sourceRoot":"../src/"}
|
|
@@ -29,12 +29,12 @@ const usePopoverTrigger_unstable = props => {
|
|
|
29
29
|
children
|
|
30
30
|
} = props;
|
|
31
31
|
const child = React.isValidElement(children) ? react_utilities_1.getTriggerChild(children) : undefined;
|
|
32
|
+
const open = popoverContext_1.usePopoverContext_unstable(context => context.open);
|
|
32
33
|
const setOpen = popoverContext_1.usePopoverContext_unstable(context => context.setOpen);
|
|
33
34
|
const toggleOpen = popoverContext_1.usePopoverContext_unstable(context => context.toggleOpen);
|
|
34
35
|
const triggerRef = popoverContext_1.usePopoverContext_unstable(context => context.triggerRef);
|
|
35
36
|
const openOnHover = popoverContext_1.usePopoverContext_unstable(context => context.openOnHover);
|
|
36
37
|
const openOnContext = popoverContext_1.usePopoverContext_unstable(context => context.openOnContext);
|
|
37
|
-
const trapFocus = popoverContext_1.usePopoverContext_unstable(context => context.trapFocus);
|
|
38
38
|
const {
|
|
39
39
|
triggerAttributes
|
|
40
40
|
} = react_tabster_1.useModalAttributes();
|
|
@@ -79,7 +79,7 @@ const usePopoverTrigger_unstable = props => {
|
|
|
79
79
|
|
|
80
80
|
return {
|
|
81
81
|
children: react_utilities_1.applyTriggerPropsToChildren(props.children, { ...triggerAttributes,
|
|
82
|
-
'aria-
|
|
82
|
+
'aria-expanded': `${open}`,
|
|
83
83
|
...(child === null || child === void 0 ? void 0 : child.props),
|
|
84
84
|
onClick: react_utilities_1.useMergedEventCallbacks((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onClick, onClick),
|
|
85
85
|
onMouseEnter: react_utilities_1.useMergedEventCallbacks((_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.onMouseEnter, onMouseEnter),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/PopoverTrigger/usePopoverTrigger.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAQA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;AAGA;;;;;;;AAOG;;;AACI,MAAM,0BAA0B,GAAI,KAAD,IAAoD;;;AAC5F,QAAM;AAAE,IAAA;AAAF,MAAe,KAArB;AACA,QAAM,KAAK,GAAG,KAAK,CAAC,cAAN,CAAqB,QAArB,IAAiC,iBAAA,CAAA,eAAA,CAAgB,QAAhB,CAAjC,GAA6D,SAA3E;AAEA,QAAM,
|
|
1
|
+
{"version":3,"sources":["components/PopoverTrigger/usePopoverTrigger.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n applyTriggerPropsToChildren,\n getTriggerChild,\n shouldPreventDefaultOnKeyDown,\n useMergedRefs,\n useMergedEventCallbacks,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext_unstable } from '../../popoverContext';\nimport type { PopoverTriggerChildProps, PopoverTriggerProps, PopoverTriggerState } from './PopoverTrigger.types';\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 } = props;\n const child = React.isValidElement(children) ? getTriggerChild(children) : undefined;\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 (shouldPreventDefaultOnKeyDown(e) && (e.key === ' ' || e.key === 'Enter')) {\n e.preventDefault();\n (e.target as HTMLElement)?.click();\n }\n\n if (e.key === 'Escape') {\n setOpen(e, false);\n }\n };\n\n const onMouseEnter = useEventCallback((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 return {\n children: applyTriggerPropsToChildren<PopoverTriggerChildProps>(props.children, {\n ...triggerAttributes,\n 'aria-expanded': `${open}`,\n ...child?.props,\n onClick: useMergedEventCallbacks(child?.props?.onClick, onClick),\n onMouseEnter: useMergedEventCallbacks(child?.props?.onMouseEnter, onMouseEnter),\n onKeyDown: useMergedEventCallbacks(child?.props?.onKeyDown, onKeyDown),\n onMouseLeave: useMergedEventCallbacks(child?.props?.onMouseLeave, onMouseLeave),\n onContextMenu: useMergedEventCallbacks(child?.props?.onContextMenu, onContextMenu),\n ref: useMergedRefs(triggerRef, child?.ref),\n }),\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -8,6 +8,7 @@ exports.usePopoverContext_unstable = exports.PopoverProvider = exports.PopoverCo
|
|
|
8
8
|
const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
|
|
9
9
|
|
|
10
10
|
exports.PopoverContext = /*#__PURE__*/react_context_selector_1.createContext({
|
|
11
|
+
open: false,
|
|
11
12
|
setOpen: () => null,
|
|
12
13
|
toggleOpen: () => null,
|
|
13
14
|
triggerRef: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["popoverContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAIa,OAAA,CAAA,cAAA,gBAA+C,wBAAA,CAAA,aAAA,CAAmC;AAC7F,EAAA,OAAO,EAAE,MAAM,
|
|
1
|
+
{"version":3,"sources":["popoverContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAIa,OAAA,CAAA,cAAA,gBAA+C,wBAAA,CAAA,aAAA,CAAmC;AAC7F,EAAA,IAAI,EAAE,KADuF;AAE7F,EAAA,OAAO,EAAE,MAAM,IAF8E;AAG7F,EAAA,UAAU,EAAE,MAAM,IAH2E;AAI7F,EAAA,UAAU,EAAE;AAAE,IAAA,OAAO,EAAE;AAAX,GAJiF;AAK7F,EAAA,UAAU,EAAE;AAAE,IAAA,OAAO,EAAE;AAAX,GALiF;AAM7F,EAAA,QAAQ,EAAE;AAAE,IAAA,OAAO,EAAE;AAAX,GANmF;AAO7F,EAAA,aAAa,EAAE,KAP8E;AAQ7F,EAAA,WAAW,EAAE,KARgF;AAS7F,EAAA,IAAI,EAAE,QATuF;AAU7F,EAAA,SAAS,EAAE,KAVkF;AAW7F,EAAA,MAAM,EAAE;AAXqF,CAAnC,CAA/C;AAcA,OAAA,CAAA,eAAA,GAAkB,OAAA,CAAA,cAAA,CAAe,QAAjC;;AAuBN,MAAM,0BAA0B,GAAO,QAAJ,IACxC,wBAAA,CAAA,kBAAA,CAAmB,OAAA,CAAA,cAAnB,EAAmC,QAAnC,CADK;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { PopoverState } from './components/Popover/index';\n\nexport const PopoverContext: Context<PopoverContextValue> = createContext<PopoverContextValue>({\n open: false,\n setOpen: () => null,\n toggleOpen: () => null,\n triggerRef: { current: null },\n contentRef: { current: null },\n arrowRef: { current: null },\n openOnContext: false,\n openOnHover: false,\n size: 'medium',\n trapFocus: false,\n inline: false,\n});\n\nexport const PopoverProvider = PopoverContext.Provider;\n\n/**\n * Context shared between Popover and its children components\n */\nexport type PopoverContextValue = Pick<\n PopoverState,\n | 'open'\n | 'toggleOpen'\n | 'setOpen'\n | 'triggerRef'\n | 'contentRef'\n | 'openOnHover'\n | 'openOnContext'\n | 'mountNode'\n | 'withArrow'\n | 'arrowRef'\n | 'size'\n | 'appearance'\n | 'trapFocus'\n | 'inline'\n>;\n\nexport const usePopoverContext_unstable = <T>(selector: ContextSelector<PopoverContextValue, T>): T =>\n useContextSelector(PopoverContext, selector);\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-popover",
|
|
3
|
-
"version": "9.0.0-rc.
|
|
3
|
+
"version": "9.0.0-rc.13",
|
|
4
4
|
"description": "Popover component for Fluent UI",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -29,18 +29,18 @@
|
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@fluentui/eslint-plugin": "*",
|
|
31
31
|
"@fluentui/react-conformance": "*",
|
|
32
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
|
32
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.8",
|
|
33
33
|
"@fluentui/scripts": "^1.0.0"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@fluentui/react-context-selector": "9.0.0-rc.
|
|
37
|
-
"@griffel/react": "1.0
|
|
38
|
-
"@fluentui/react-portal": "9.0.0-rc.
|
|
39
|
-
"@fluentui/react-positioning": "9.0.0-rc.
|
|
40
|
-
"@fluentui/react-shared-contexts": "9.0.0-rc.
|
|
41
|
-
"@fluentui/react-tabster": "9.0.0-rc.
|
|
36
|
+
"@fluentui/react-context-selector": "9.0.0-rc.10",
|
|
37
|
+
"@griffel/react": "1.1.0",
|
|
38
|
+
"@fluentui/react-portal": "9.0.0-rc.13",
|
|
39
|
+
"@fluentui/react-positioning": "9.0.0-rc.11",
|
|
40
|
+
"@fluentui/react-shared-contexts": "9.0.0-rc.10",
|
|
41
|
+
"@fluentui/react-tabster": "9.0.0-rc.13",
|
|
42
42
|
"@fluentui/react-theme": "9.0.0-rc.9",
|
|
43
|
-
"@fluentui/react-utilities": "9.0.0-rc.
|
|
43
|
+
"@fluentui/react-utilities": "9.0.0-rc.10",
|
|
44
44
|
"tslib": "^2.1.0"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|