@fluentui/react-popover 0.0.0-nightlyff78d1e27a20220217.1 → 0.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (95) hide show
  1. package/CHANGELOG.json +780 -20
  2. package/CHANGELOG.md +281 -82
  3. package/Spec.md +25 -5
  4. package/dist/{react-popover.d.ts → index.d.ts} +99 -53
  5. package/{lib → dist}/tsdoc-metadata.json +0 -0
  6. package/lib/components/Popover/Popover.js.map +1 -1
  7. package/lib/components/Popover/Popover.types.js.map +1 -1
  8. package/lib/components/Popover/constants.js +10 -0
  9. package/lib/components/Popover/constants.js.map +1 -0
  10. package/lib/components/Popover/renderPopover.js +23 -17
  11. package/lib/components/Popover/renderPopover.js.map +1 -1
  12. package/lib/components/Popover/usePopover.js +93 -18
  13. package/lib/components/Popover/usePopover.js.map +1 -1
  14. package/lib/components/PopoverSurface/PopoverSurface.js.map +1 -1
  15. package/lib/components/PopoverSurface/PopoverSurface.types.js.map +1 -1
  16. package/lib/components/PopoverSurface/renderPopoverSurface.js +9 -8
  17. package/lib/components/PopoverSurface/renderPopoverSurface.js.map +1 -1
  18. package/lib/components/PopoverSurface/usePopoverSurface.js +8 -16
  19. package/lib/components/PopoverSurface/usePopoverSurface.js.map +1 -1
  20. package/lib/components/PopoverSurface/usePopoverSurfaceStyles.js +24 -22
  21. package/lib/components/PopoverSurface/usePopoverSurfaceStyles.js.map +1 -1
  22. package/lib/components/PopoverTrigger/PopoverTrigger.js.map +1 -1
  23. package/lib/components/PopoverTrigger/PopoverTrigger.types.js.map +1 -1
  24. package/lib/components/PopoverTrigger/renderPopoverTrigger.js.map +1 -1
  25. package/lib/components/PopoverTrigger/usePopoverTrigger.js +4 -4
  26. package/lib/components/PopoverTrigger/usePopoverTrigger.js.map +1 -1
  27. package/lib/index.js +4 -4
  28. package/lib/index.js.map +1 -1
  29. package/lib/popoverContext.js +4 -1
  30. package/lib/popoverContext.js.map +1 -1
  31. package/lib-commonjs/components/Popover/Popover.js.map +1 -1
  32. package/lib-commonjs/components/Popover/constants.js +17 -0
  33. package/lib-commonjs/components/Popover/constants.js.map +1 -0
  34. package/lib-commonjs/components/Popover/renderPopover.js +23 -17
  35. package/lib-commonjs/components/Popover/renderPopover.js.map +1 -1
  36. package/lib-commonjs/components/Popover/usePopover.js +94 -17
  37. package/lib-commonjs/components/Popover/usePopover.js.map +1 -1
  38. package/lib-commonjs/components/PopoverSurface/PopoverSurface.js.map +1 -1
  39. package/lib-commonjs/components/PopoverSurface/renderPopoverSurface.js +9 -8
  40. package/lib-commonjs/components/PopoverSurface/renderPopoverSurface.js.map +1 -1
  41. package/lib-commonjs/components/PopoverSurface/usePopoverSurface.js +7 -16
  42. package/lib-commonjs/components/PopoverSurface/usePopoverSurface.js.map +1 -1
  43. package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.js +25 -23
  44. package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.js.map +1 -1
  45. package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.js.map +1 -1
  46. package/lib-commonjs/components/PopoverTrigger/renderPopoverTrigger.js.map +1 -1
  47. package/lib-commonjs/components/PopoverTrigger/usePopoverTrigger.js +4 -4
  48. package/lib-commonjs/components/PopoverTrigger/usePopoverTrigger.js.map +1 -1
  49. package/lib-commonjs/index.js +92 -5
  50. package/lib-commonjs/index.js.map +1 -1
  51. package/lib-commonjs/popoverContext.js +5 -2
  52. package/lib-commonjs/popoverContext.js.map +1 -1
  53. package/package.json +26 -28
  54. package/lib/Popover.d.ts +0 -1
  55. package/lib/PopoverSurface.d.ts +0 -1
  56. package/lib/PopoverTrigger.d.ts +0 -1
  57. package/lib/components/Popover/Popover.d.ts +0 -6
  58. package/lib/components/Popover/Popover.types.d.ts +0 -103
  59. package/lib/components/Popover/index.d.ts +0 -4
  60. package/lib/components/Popover/renderPopover.d.ts +0 -5
  61. package/lib/components/Popover/usePopover.d.ts +0 -10
  62. package/lib/components/PopoverSurface/PopoverSurface.d.ts +0 -6
  63. package/lib/components/PopoverSurface/PopoverSurface.types.d.ts +0 -21
  64. package/lib/components/PopoverSurface/index.d.ts +0 -5
  65. package/lib/components/PopoverSurface/renderPopoverSurface.d.ts +0 -5
  66. package/lib/components/PopoverSurface/usePopoverSurface.d.ts +0 -12
  67. package/lib/components/PopoverSurface/usePopoverSurfaceStyles.d.ts +0 -8
  68. package/lib/components/PopoverTrigger/PopoverTrigger.d.ts +0 -7
  69. package/lib/components/PopoverTrigger/PopoverTrigger.types.d.ts +0 -18
  70. package/lib/components/PopoverTrigger/index.d.ts +0 -4
  71. package/lib/components/PopoverTrigger/renderPopoverTrigger.d.ts +0 -5
  72. package/lib/components/PopoverTrigger/usePopoverTrigger.d.ts +0 -10
  73. package/lib/index.d.ts +0 -4
  74. package/lib/popoverContext.d.ts +0 -8
  75. package/lib-commonjs/Popover.d.ts +0 -1
  76. package/lib-commonjs/PopoverSurface.d.ts +0 -1
  77. package/lib-commonjs/PopoverTrigger.d.ts +0 -1
  78. package/lib-commonjs/components/Popover/Popover.d.ts +0 -6
  79. package/lib-commonjs/components/Popover/Popover.types.d.ts +0 -103
  80. package/lib-commonjs/components/Popover/index.d.ts +0 -4
  81. package/lib-commonjs/components/Popover/renderPopover.d.ts +0 -5
  82. package/lib-commonjs/components/Popover/usePopover.d.ts +0 -10
  83. package/lib-commonjs/components/PopoverSurface/PopoverSurface.d.ts +0 -6
  84. package/lib-commonjs/components/PopoverSurface/PopoverSurface.types.d.ts +0 -21
  85. package/lib-commonjs/components/PopoverSurface/index.d.ts +0 -5
  86. package/lib-commonjs/components/PopoverSurface/renderPopoverSurface.d.ts +0 -5
  87. package/lib-commonjs/components/PopoverSurface/usePopoverSurface.d.ts +0 -12
  88. package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.d.ts +0 -8
  89. package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.d.ts +0 -7
  90. package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.types.d.ts +0 -18
  91. package/lib-commonjs/components/PopoverTrigger/index.d.ts +0 -4
  92. package/lib-commonjs/components/PopoverTrigger/renderPopoverTrigger.d.ts +0 -5
  93. package/lib-commonjs/components/PopoverTrigger/usePopoverTrigger.d.ts +0 -10
  94. package/lib-commonjs/index.d.ts +0 -4
  95. package/lib-commonjs/popoverContext.d.ts +0 -8
@@ -3,14 +3,101 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
+ exports.usePopoverTrigger_unstable = exports.renderPopoverTrigger_unstable = exports.PopoverTrigger = exports.usePopoverContext_unstable = exports.PopoverProvider = exports.usePopoverSurface_unstable = exports.usePopoverSurfaceStyles_unstable = exports.renderPopoverSurface_unstable = exports.popoverSurfaceClassNames = exports.arrowHeights = exports.PopoverSurface = exports.usePopover_unstable = exports.renderPopover_unstable = exports.Popover = void 0;
6
7
 
7
- const tslib_1 = /*#__PURE__*/require("tslib");
8
+ var Popover_1 = /*#__PURE__*/require("./Popover");
8
9
 
9
- tslib_1.__exportStar(require("./Popover"), exports);
10
+ Object.defineProperty(exports, "Popover", {
11
+ enumerable: true,
12
+ get: function () {
13
+ return Popover_1.Popover;
14
+ }
15
+ });
16
+ Object.defineProperty(exports, "renderPopover_unstable", {
17
+ enumerable: true,
18
+ get: function () {
19
+ return Popover_1.renderPopover_unstable;
20
+ }
21
+ });
22
+ Object.defineProperty(exports, "usePopover_unstable", {
23
+ enumerable: true,
24
+ get: function () {
25
+ return Popover_1.usePopover_unstable;
26
+ }
27
+ });
10
28
 
11
- tslib_1.__exportStar(require("./PopoverSurface"), exports);
29
+ var PopoverSurface_1 = /*#__PURE__*/require("./PopoverSurface");
12
30
 
13
- tslib_1.__exportStar(require("./popoverContext"), exports);
31
+ Object.defineProperty(exports, "PopoverSurface", {
32
+ enumerable: true,
33
+ get: function () {
34
+ return PopoverSurface_1.PopoverSurface;
35
+ }
36
+ });
37
+ Object.defineProperty(exports, "arrowHeights", {
38
+ enumerable: true,
39
+ get: function () {
40
+ return PopoverSurface_1.arrowHeights;
41
+ }
42
+ });
43
+ Object.defineProperty(exports, "popoverSurfaceClassNames", {
44
+ enumerable: true,
45
+ get: function () {
46
+ return PopoverSurface_1.popoverSurfaceClassNames;
47
+ }
48
+ });
49
+ Object.defineProperty(exports, "renderPopoverSurface_unstable", {
50
+ enumerable: true,
51
+ get: function () {
52
+ return PopoverSurface_1.renderPopoverSurface_unstable;
53
+ }
54
+ });
55
+ Object.defineProperty(exports, "usePopoverSurfaceStyles_unstable", {
56
+ enumerable: true,
57
+ get: function () {
58
+ return PopoverSurface_1.usePopoverSurfaceStyles_unstable;
59
+ }
60
+ });
61
+ Object.defineProperty(exports, "usePopoverSurface_unstable", {
62
+ enumerable: true,
63
+ get: function () {
64
+ return PopoverSurface_1.usePopoverSurface_unstable;
65
+ }
66
+ });
14
67
 
15
- tslib_1.__exportStar(require("./PopoverTrigger"), exports);
68
+ var popoverContext_1 = /*#__PURE__*/require("./popoverContext");
69
+
70
+ Object.defineProperty(exports, "PopoverProvider", {
71
+ enumerable: true,
72
+ get: function () {
73
+ return popoverContext_1.PopoverProvider;
74
+ }
75
+ });
76
+ Object.defineProperty(exports, "usePopoverContext_unstable", {
77
+ enumerable: true,
78
+ get: function () {
79
+ return popoverContext_1.usePopoverContext_unstable;
80
+ }
81
+ });
82
+
83
+ var PopoverTrigger_1 = /*#__PURE__*/require("./PopoverTrigger");
84
+
85
+ Object.defineProperty(exports, "PopoverTrigger", {
86
+ enumerable: true,
87
+ get: function () {
88
+ return PopoverTrigger_1.PopoverTrigger;
89
+ }
90
+ });
91
+ Object.defineProperty(exports, "renderPopoverTrigger_unstable", {
92
+ enumerable: true,
93
+ get: function () {
94
+ return PopoverTrigger_1.renderPopoverTrigger_unstable;
95
+ }
96
+ });
97
+ Object.defineProperty(exports, "usePopoverTrigger_unstable", {
98
+ enumerable: true,
99
+ get: function () {
100
+ return PopoverTrigger_1.usePopoverTrigger_unstable;
101
+ }
102
+ });
16
103
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Popover';\nexport * from './PopoverSurface';\nexport * from './popoverContext';\nexport * from './PopoverTrigger';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,SAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,OAAA;EAAO;AAAP,CAAA;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,sBAAA;EAAsB;AAAtB,CAAA;AAAwB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,qBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,mBAAA;EAAmB;AAAnB,CAAA;;AAE1C,IAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,cAAA;EAAc;AAAd,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,cAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,YAAA;EAAY;AAAZ,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,wBAAA;EAAwB;AAAxB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,+BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,6BAAA;EAA6B;AAA7B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kCAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,gCAAA;EAAgC;AAAhC,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,4BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,0BAAA;EAA0B;AAA1B,CAAA;;AAGF,IAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,eAAA;EAAe;AAAf,CAAA;AAAiB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,4BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,0BAAA;EAA0B;AAA1B,CAAA;;AAE1B,IAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,cAAA;EAAc;AAAd,CAAA;AAAgB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,+BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,6BAAA;EAA6B;AAA7B,CAAA;AAA+B,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,4BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,0BAAA;EAA0B;AAA1B,CAAA","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"],"sourceRoot":"../src/"}
@@ -3,13 +3,14 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.usePopoverContext_unstable = exports.PopoverContext = void 0;
6
+ exports.usePopoverContext_unstable = exports.PopoverProvider = exports.PopoverContext = void 0;
7
7
 
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
11
  open: false,
12
12
  setOpen: () => null,
13
+ toggleOpen: () => null,
13
14
  triggerRef: {
14
15
  current: null
15
16
  },
@@ -22,8 +23,10 @@ exports.PopoverContext = /*#__PURE__*/react_context_selector_1.createContext({
22
23
  openOnContext: false,
23
24
  openOnHover: false,
24
25
  size: 'medium',
25
- trapFocus: false
26
+ trapFocus: false,
27
+ inline: false
26
28
  });
29
+ exports.PopoverProvider = exports.PopoverContext.Provider;
27
30
 
28
31
  const usePopoverContext_unstable = selector => react_context_selector_1.useContextSelector(exports.PopoverContext, selector);
29
32
 
@@ -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,IAAI,EAAE,KADuF;AAE7F,EAAA,OAAO,EAAE,MAAM,IAF8E;AAG7F,EAAA,UAAU,EAAE;AAAE,IAAA,OAAO,EAAE;AAAX,GAHiF;AAI7F,EAAA,UAAU,EAAE;AAAE,IAAA,OAAO,EAAE;AAAX,GAJiF;AAK7F,EAAA,QAAQ,EAAE;AAAE,IAAA,OAAO,EAAE;AAAX,GALmF;AAM7F,EAAA,aAAa,EAAE,KAN8E;AAO7F,EAAA,WAAW,EAAE,KAPgF;AAQ7F,EAAA,IAAI,EAAE,QARuF;AAS7F,EAAA,SAAS,EAAE;AATkF,CAAnC,CAA/C;;AA+BN,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 triggerRef: { current: null },\n contentRef: { current: null },\n arrowRef: { current: null },\n openOnContext: false,\n openOnHover: false,\n size: 'medium',\n trapFocus: false,\n});\n\n/**\n * Context shared between Popover and its children components\n */\nexport type PopoverContextValue = Pick<\n PopoverState,\n | 'open'\n | 'setOpen'\n | 'triggerRef'\n | 'contentRef'\n | 'openOnHover'\n | 'openOnContext'\n | 'mountNode'\n | 'noArrow'\n | 'arrowRef'\n | 'size'\n | 'appearance'\n | 'trapFocus'\n>;\n\nexport const usePopoverContext_unstable = <T>(selector: ContextSelector<PopoverContextValue, T>): T =>\n useContextSelector(PopoverContext, selector);\n"],"sourceRoot":"../src/"}
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;EAC7F,IAAI,EAAE,KADuF;EAE7F,OAAO,EAAE,MAAM,IAF8E;EAG7F,UAAU,EAAE,MAAM,IAH2E;EAI7F,UAAU,EAAE;IAAE,OAAO,EAAE;EAAX,CAJiF;EAK7F,UAAU,EAAE;IAAE,OAAO,EAAE;EAAX,CALiF;EAM7F,QAAQ,EAAE;IAAE,OAAO,EAAE;EAAX,CANmF;EAO7F,aAAa,EAAE,KAP8E;EAQ7F,WAAW,EAAE,KARgF;EAS7F,IAAI,EAAE,QATuF;EAU7F,SAAS,EAAE,KAVkF;EAW7F,MAAM,EAAE;AAXqF,CAAnC,CAA/C;AAcA,OAAA,CAAA,eAAA,GAAkB,OAAA,CAAA,cAAA,CAAe,QAAjC;;AAwBN,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 | 'legacyTrapFocus'\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,10 +1,10 @@
1
1
  {
2
2
  "name": "@fluentui/react-popover",
3
- "version": "0.0.0-nightlyff78d1e27a20220217.1",
3
+ "version": "0.0.0",
4
4
  "description": "Popover component for Fluent UI",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
7
- "typings": "lib/index.d.ts",
7
+ "typings": "dist/index.d.ts",
8
8
  "sideEffects": false,
9
9
  "repository": {
10
10
  "type": "git",
@@ -19,50 +19,48 @@
19
19
  "just": "just-scripts",
20
20
  "lint": "just-scripts lint",
21
21
  "start": "yarn storybook",
22
- "e2e": "e2e",
23
- "storybook": "node ../../scripts/storybook/runner",
22
+ "e2e": "yarn cypress run --component",
23
+ "e2e:local": "yarn cypress open --component",
24
+ "storybook": "node ../../../scripts/storybook/runner",
24
25
  "test": "jest --passWithNoTests",
25
26
  "docs": "api-extractor run --config=config/api-extractor.local.json --local",
26
- "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-popover/src && yarn docs",
27
+ "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-popover/src && yarn docs",
27
28
  "type-check": "tsc -b tsconfig.json"
28
29
  },
29
30
  "devDependencies": {
30
31
  "@fluentui/eslint-plugin": "*",
31
32
  "@fluentui/react-conformance": "*",
32
- "@fluentui/react-conformance-griffel": "0.0.0-nightlyff78d1e27a20220217.1",
33
- "@fluentui/scripts": "^1.0.0",
34
- "@types/enzyme": "3.10.3",
35
- "@types/enzyme-adapter-react-16": "1.0.3",
36
- "@types/react": "16.9.42",
37
- "@types/react-dom": "16.9.10",
38
- "@types/react-test-renderer": "^16.0.0",
39
- "enzyme": "~3.10.0",
40
- "enzyme-adapter-react-16": "^1.15.0",
41
- "react": "16.8.6",
42
- "react-dom": "16.8.6",
43
- "react-test-renderer": "^16.3.0"
33
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220628-0417.1",
34
+ "@fluentui/scripts": "^1.0.0"
44
35
  },
45
36
  "dependencies": {
46
- "@fluentui/react-context-selector": "0.0.0-nightlyff78d1e27a20220217.1",
47
- "@griffel/react": "1.0.0",
48
- "@fluentui/react-portal": "0.0.0-nightlyff78d1e27a20220217.1",
49
- "@fluentui/react-positioning": "0.0.0-nightlyff78d1e27a20220217.1",
50
- "@fluentui/react-shared-contexts": "0.0.0-nightlyff78d1e27a20220217.1",
51
- "@fluentui/react-tabster": "0.0.0-nightlyff78d1e27a20220217.1",
52
- "@fluentui/react-utilities": "0.0.0-nightlyff78d1e27a20220217.1",
37
+ "@fluentui/react-context-selector": "^0.0.0",
38
+ "@fluentui/react-portal": "^0.0.0",
39
+ "@fluentui/react-positioning": "^0.0.0",
40
+ "@fluentui/react-shared-contexts": "^0.0.0",
41
+ "@fluentui/react-tabster": "^0.0.0",
42
+ "@fluentui/react-theme": "^0.0.0",
43
+ "@fluentui/react-utilities": "^0.0.0",
44
+ "@griffel/react": "1.2.0",
53
45
  "tslib": "^2.1.0"
54
46
  },
55
47
  "peerDependencies": {
56
48
  "@types/react": ">=16.8.0 <18.0.0",
57
49
  "@types/react-dom": ">=16.8.0 <18.0.0",
58
50
  "react": ">=16.8.0 <18.0.0",
59
- "react-dom": ">=16.8.0 <18.0.0"
51
+ "react-dom": ">=16.8.0 <18.0.0",
52
+ "scheduler": "^0.19.0 || ^0.20.0"
60
53
  },
61
54
  "beachball": {
62
55
  "disallowedChangeTypes": [
63
- "major",
64
- "minor",
65
- "patch"
56
+ "major"
66
57
  ]
58
+ },
59
+ "exports": {
60
+ ".": {
61
+ "types": "./lib/index.d.ts",
62
+ "import": "./lib/index.js",
63
+ "require": "./lib-commonjs/index.js"
64
+ }
67
65
  }
68
66
  }
package/lib/Popover.d.ts DELETED
@@ -1 +0,0 @@
1
- export * from './components/Popover/index';
@@ -1 +0,0 @@
1
- export * from './components/PopoverSurface/index';
@@ -1 +0,0 @@
1
- export * from './components/PopoverTrigger/index';
@@ -1,6 +0,0 @@
1
- import * as React from 'react';
2
- import type { PopoverProps } from './Popover.types';
3
- /**
4
- * Wrapper component that manages state for a PopoverTrigger and a PopoverSurface components.
5
- */
6
- export declare const Popover: React.FC<PopoverProps>;
@@ -1,103 +0,0 @@
1
- import * as React from 'react';
2
- import type { PopperVirtualElement, PositioningShorthand, usePopperMouseTarget } from '@fluentui/react-positioning';
3
- import type { PortalProps } from '@fluentui/react-portal';
4
- /**
5
- * Determines popover padding and arrow size
6
- */
7
- export declare type PopoverSize = 'small' | 'medium' | 'large';
8
- declare type PopoverCommons = Pick<PortalProps, 'mountNode'> & {
9
- /**
10
- * Controls the opening of the Popover
11
- */
12
- open: boolean;
13
- /**
14
- * Used to set the initial open state of the Popover in uncontrolled mode
15
- */
16
- defaultOpen?: boolean;
17
- /**
18
- * Call back when the component requests to change value
19
- * The `open` value is used as a hint when directly controlling the component
20
- */
21
- onOpenChange?: (e: OpenPopoverEvents, data: OnOpenChangeData) => void;
22
- /**
23
- * Flag to open the Popover by hovering the trigger
24
- */
25
- openOnHover?: boolean;
26
- /**
27
- * Flag to open the Popover as a context menu. Disables all other interactions
28
- */
29
- openOnContext?: boolean;
30
- /**
31
- * Do not display the arrow
32
- */
33
- noArrow?: boolean;
34
- /**
35
- * Determines popover padding and arrow size
36
- * @default medium
37
- */
38
- size?: PopoverSize;
39
- /**
40
- * A popover can appear styled with brand or inverted.
41
- * When not specified, the default style is used.
42
- */
43
- appearance?: 'brand' | 'inverted';
44
- /**
45
- * Should trap focus
46
- */
47
- trapFocus?: boolean;
48
- /**
49
- * Configures the position of the Popover
50
- */
51
- positioning?: PositioningShorthand;
52
- };
53
- /**
54
- * Popover Props
55
- */
56
- export declare type PopoverProps = Partial<PopoverCommons> & {
57
- /**
58
- * Can contain two children including {@link PopoverTrigger} and {@link PopoverSurface}.
59
- * Alternatively can only contain {@link PopoverSurface} if using a custom `target`.
60
- */
61
- children: [JSX.Element, JSX.Element] | JSX.Element;
62
- };
63
- /**
64
- * Popover State
65
- */
66
- export declare type PopoverState = PopoverCommons & Pick<PopoverProps, 'children'> & {
67
- /**
68
- * Callback to open/close the Popover
69
- */
70
- setOpen: (e: OpenPopoverEvents, open: boolean) => void;
71
- /**
72
- * Ref of the PopoverTrigger
73
- */
74
- triggerRef: React.MutableRefObject<HTMLElement | null>;
75
- /**
76
- * Ref of the PopoverSurface
77
- */
78
- contentRef: React.MutableRefObject<HTMLElement | null>;
79
- /**
80
- * Ref of the pointing arrow
81
- */
82
- arrowRef: React.MutableRefObject<HTMLDivElement | null>;
83
- /**
84
- * Anchors the popper to the mouse click for context events
85
- */
86
- contextTarget: PopperVirtualElement | undefined;
87
- /**
88
- * A callback to set the target of the popper to the mouse click for context events
89
- */
90
- setContextTarget: ReturnType<typeof usePopperMouseTarget>[1];
91
- size: NonNullable<PopoverProps['size']>;
92
- };
93
- /**
94
- * Data attached to open/close events
95
- */
96
- export declare type OnOpenChangeData = {
97
- open: boolean;
98
- };
99
- /**
100
- * The supported events that will trigger open/close of the menu
101
- */
102
- export declare type OpenPopoverEvents = MouseEvent | TouchEvent | React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement> | React.FocusEvent<HTMLElement>;
103
- export {};
@@ -1,4 +0,0 @@
1
- export * from './Popover';
2
- export * from './Popover.types';
3
- export * from './renderPopover';
4
- export * from './usePopover';
@@ -1,5 +0,0 @@
1
- import type { PopoverState } from './Popover.types';
2
- /**
3
- * Render the final JSX of Popover
4
- */
5
- export declare const renderPopover_unstable: (state: PopoverState) => JSX.Element;
@@ -1,10 +0,0 @@
1
- import type { PopoverProps, PopoverState } from './Popover.types';
2
- /**
3
- * Create the state required to render Popover.
4
- *
5
- * The returned state can be modified with hooks such as usePopoverStyles,
6
- * before being passed to renderPopover_unstable.
7
- *
8
- * @param props - props from this instance of Popover
9
- */
10
- export declare const usePopover_unstable: (props: PopoverProps) => PopoverState;
@@ -1,6 +0,0 @@
1
- import type { PopoverSurfaceProps } from './PopoverSurface.types';
2
- import type { ForwardRefComponent } from '@fluentui/react-utilities';
3
- /**
4
- * PopoverSurface component renders react children in a positioned box
5
- */
6
- export declare const PopoverSurface: ForwardRefComponent<PopoverSurfaceProps>;
@@ -1,21 +0,0 @@
1
- import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
2
- import type { PopoverContextValue } from '../../popoverContext';
3
- /**
4
- * PopoverSurface Props
5
- */
6
- export declare type PopoverSurfaceProps = ComponentProps<PopoverSurfaceSlots>;
7
- /**
8
- * Names of the slots in PopoverSurfaceProps
9
- */
10
- export declare type PopoverSurfaceSlots = {
11
- root: Slot<'div'>;
12
- };
13
- /**
14
- * PopoverSurface State
15
- */
16
- export declare type PopoverSurfaceState = ComponentState<PopoverSurfaceSlots> & Pick<PopoverContextValue, 'open' | 'mountNode' | 'noArrow' | 'size' | 'appearance' | 'arrowRef'> & {
17
- /**
18
- * CSS class for the arrow element
19
- */
20
- arrowClassName?: string;
21
- };
@@ -1,5 +0,0 @@
1
- export * from './PopoverSurface';
2
- export * from './PopoverSurface.types';
3
- export * from './renderPopoverSurface';
4
- export * from './usePopoverSurface';
5
- export * from './usePopoverSurfaceStyles';
@@ -1,5 +0,0 @@
1
- import type { PopoverSurfaceState } from './PopoverSurface.types';
2
- /**
3
- * Render the final JSX of PopoverSurface
4
- */
5
- export declare const renderPopoverSurface_unstable: (state: PopoverSurfaceState) => JSX.Element | null;
@@ -1,12 +0,0 @@
1
- import * as React from 'react';
2
- import type { PopoverSurfaceProps, PopoverSurfaceState } from './PopoverSurface.types';
3
- /**
4
- * Create the state required to render PopoverSurface.
5
- *
6
- * The returned state can be modified with hooks such as usePopoverSurfaceStyles_unstable,
7
- * before being passed to renderPopoverSurface_unstable.
8
- *
9
- * @param props - props from this instance of PopoverSurface
10
- * @param ref - reference to root HTMLDivElement of PopoverSurface
11
- */
12
- export declare const usePopoverSurface_unstable: (props: PopoverSurfaceProps, ref: React.Ref<HTMLDivElement>) => PopoverSurfaceState;
@@ -1,8 +0,0 @@
1
- import type { PopoverSize } from '../Popover/Popover.types';
2
- import type { PopoverSurfaceState } from './PopoverSurface.types';
3
- export declare const popoverSurfaceClassName = "fui-PopoverSurface";
4
- export declare const arrowHeights: Record<PopoverSize, number>;
5
- /**
6
- * Apply styling to the PopoverSurface slots based on the state
7
- */
8
- export declare const usePopoverSurfaceStyles_unstable: (state: PopoverSurfaceState) => PopoverSurfaceState;
@@ -1,7 +0,0 @@
1
- import * as React from 'react';
2
- import type { FluentTriggerComponent } from '@fluentui/react-utilities';
3
- import type { PopoverTriggerProps } from './PopoverTrigger.types';
4
- /**
5
- * Wraps a trigger element as an only child and adds the necessary event handling to open a popover.
6
- */
7
- export declare const PopoverTrigger: React.FC<PopoverTriggerProps> & FluentTriggerComponent;
@@ -1,18 +0,0 @@
1
- import * as React from 'react';
2
- /**
3
- * PopoverTrigger Props
4
- */
5
- export declare type PopoverTriggerProps = {
6
- children: (React.ReactElement & {
7
- ref?: React.Ref<unknown>;
8
- }) | ((props: PopoverTriggerChildProps) => React.ReactElement | null);
9
- };
10
- /**
11
- * PopoverTrigger State
12
- */
13
- export declare type PopoverTriggerState = {
14
- children: React.ReactElement | null;
15
- };
16
- export declare type PopoverTriggerChildProps = {
17
- ref?: React.Ref<never>;
18
- } & Pick<React.HTMLAttributes<HTMLElement>, 'aria-haspopup' | 'onClick' | 'onMouseEnter' | 'onKeyDown' | 'onMouseLeave' | 'onContextMenu'>;
@@ -1,4 +0,0 @@
1
- export * from './PopoverTrigger';
2
- export * from './PopoverTrigger.types';
3
- export * from './renderPopoverTrigger';
4
- export * from './usePopoverTrigger';
@@ -1,5 +0,0 @@
1
- import type { PopoverTriggerState } from './PopoverTrigger.types';
2
- /**
3
- * Render the final JSX of PopoverTrigger
4
- */
5
- export declare const renderPopoverTrigger_unstable: (state: PopoverTriggerState) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
@@ -1,10 +0,0 @@
1
- import type { PopoverTriggerProps, PopoverTriggerState } from './PopoverTrigger.types';
2
- /**
3
- * Create the state required to render PopoverTrigger.
4
- *
5
- * The returned state can be modified with hooks such as usePopoverTriggerStyles,
6
- * before being passed to renderPopoverTrigger_unstable.
7
- *
8
- * @param props - props from this instance of PopoverTrigger
9
- */
10
- export declare const usePopoverTrigger_unstable: (props: PopoverTriggerProps) => PopoverTriggerState;
package/lib/index.d.ts DELETED
@@ -1,4 +0,0 @@
1
- export * from './Popover';
2
- export * from './PopoverSurface';
3
- export * from './popoverContext';
4
- export * from './PopoverTrigger';
@@ -1,8 +0,0 @@
1
- import type { ContextSelector, Context } from '@fluentui/react-context-selector';
2
- import type { PopoverState } from './components/Popover/index';
3
- export declare const PopoverContext: Context<PopoverContextValue>;
4
- /**
5
- * Context shared between Popover and its children components
6
- */
7
- export declare type PopoverContextValue = Pick<PopoverState, 'open' | 'setOpen' | 'triggerRef' | 'contentRef' | 'openOnHover' | 'openOnContext' | 'mountNode' | 'noArrow' | 'arrowRef' | 'size' | 'appearance' | 'trapFocus'>;
8
- export declare const usePopoverContext_unstable: <T>(selector: ContextSelector<PopoverContextValue, T>) => T;
@@ -1 +0,0 @@
1
- export * from './components/Popover/index';
@@ -1 +0,0 @@
1
- export * from './components/PopoverSurface/index';
@@ -1 +0,0 @@
1
- export * from './components/PopoverTrigger/index';
@@ -1,6 +0,0 @@
1
- import * as React from 'react';
2
- import type { PopoverProps } from './Popover.types';
3
- /**
4
- * Wrapper component that manages state for a PopoverTrigger and a PopoverSurface components.
5
- */
6
- export declare const Popover: React.FC<PopoverProps>;
@@ -1,103 +0,0 @@
1
- import * as React from 'react';
2
- import type { PopperVirtualElement, PositioningShorthand, usePopperMouseTarget } from '@fluentui/react-positioning';
3
- import type { PortalProps } from '@fluentui/react-portal';
4
- /**
5
- * Determines popover padding and arrow size
6
- */
7
- export declare type PopoverSize = 'small' | 'medium' | 'large';
8
- declare type PopoverCommons = Pick<PortalProps, 'mountNode'> & {
9
- /**
10
- * Controls the opening of the Popover
11
- */
12
- open: boolean;
13
- /**
14
- * Used to set the initial open state of the Popover in uncontrolled mode
15
- */
16
- defaultOpen?: boolean;
17
- /**
18
- * Call back when the component requests to change value
19
- * The `open` value is used as a hint when directly controlling the component
20
- */
21
- onOpenChange?: (e: OpenPopoverEvents, data: OnOpenChangeData) => void;
22
- /**
23
- * Flag to open the Popover by hovering the trigger
24
- */
25
- openOnHover?: boolean;
26
- /**
27
- * Flag to open the Popover as a context menu. Disables all other interactions
28
- */
29
- openOnContext?: boolean;
30
- /**
31
- * Do not display the arrow
32
- */
33
- noArrow?: boolean;
34
- /**
35
- * Determines popover padding and arrow size
36
- * @default medium
37
- */
38
- size?: PopoverSize;
39
- /**
40
- * A popover can appear styled with brand or inverted.
41
- * When not specified, the default style is used.
42
- */
43
- appearance?: 'brand' | 'inverted';
44
- /**
45
- * Should trap focus
46
- */
47
- trapFocus?: boolean;
48
- /**
49
- * Configures the position of the Popover
50
- */
51
- positioning?: PositioningShorthand;
52
- };
53
- /**
54
- * Popover Props
55
- */
56
- export declare type PopoverProps = Partial<PopoverCommons> & {
57
- /**
58
- * Can contain two children including {@link PopoverTrigger} and {@link PopoverSurface}.
59
- * Alternatively can only contain {@link PopoverSurface} if using a custom `target`.
60
- */
61
- children: [JSX.Element, JSX.Element] | JSX.Element;
62
- };
63
- /**
64
- * Popover State
65
- */
66
- export declare type PopoverState = PopoverCommons & Pick<PopoverProps, 'children'> & {
67
- /**
68
- * Callback to open/close the Popover
69
- */
70
- setOpen: (e: OpenPopoverEvents, open: boolean) => void;
71
- /**
72
- * Ref of the PopoverTrigger
73
- */
74
- triggerRef: React.MutableRefObject<HTMLElement | null>;
75
- /**
76
- * Ref of the PopoverSurface
77
- */
78
- contentRef: React.MutableRefObject<HTMLElement | null>;
79
- /**
80
- * Ref of the pointing arrow
81
- */
82
- arrowRef: React.MutableRefObject<HTMLDivElement | null>;
83
- /**
84
- * Anchors the popper to the mouse click for context events
85
- */
86
- contextTarget: PopperVirtualElement | undefined;
87
- /**
88
- * A callback to set the target of the popper to the mouse click for context events
89
- */
90
- setContextTarget: ReturnType<typeof usePopperMouseTarget>[1];
91
- size: NonNullable<PopoverProps['size']>;
92
- };
93
- /**
94
- * Data attached to open/close events
95
- */
96
- export declare type OnOpenChangeData = {
97
- open: boolean;
98
- };
99
- /**
100
- * The supported events that will trigger open/close of the menu
101
- */
102
- export declare type OpenPopoverEvents = MouseEvent | TouchEvent | React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement> | React.FocusEvent<HTMLElement>;
103
- export {};