@fluentui/react-popover 9.0.0-alpha.8 → 9.0.0-nightly.f81b28ceb3.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (218) hide show
  1. package/CHANGELOG.json +1800 -1
  2. package/CHANGELOG.md +566 -2
  3. package/Spec.md +6 -6
  4. package/dist/react-popover.d.ts +59 -77
  5. package/lib/Popover.js.map +1 -1
  6. package/lib/PopoverSurface.js.map +1 -1
  7. package/lib/PopoverTrigger.js.map +1 -1
  8. package/lib/common/isConformant.d.ts +1 -1
  9. package/lib/common/isConformant.js +9 -5
  10. package/lib/common/isConformant.js.map +1 -1
  11. package/lib/common/mockUsePopoverContext.d.ts +1 -1
  12. package/lib/common/mockUsePopoverContext.js +28 -6
  13. package/lib/common/mockUsePopoverContext.js.map +1 -1
  14. package/lib/components/Popover/Popover.d.ts +2 -2
  15. package/lib/components/Popover/Popover.js +4 -3
  16. package/lib/components/Popover/Popover.js.map +1 -1
  17. package/lib/components/Popover/Popover.types.d.ts +24 -33
  18. package/lib/components/Popover/Popover.types.js.map +1 -1
  19. package/lib/components/Popover/index.js.map +1 -1
  20. package/lib/components/Popover/renderPopover.d.ts +1 -1
  21. package/lib/components/Popover/renderPopover.js +29 -17
  22. package/lib/components/Popover/renderPopover.js.map +1 -1
  23. package/lib/components/Popover/usePopover.d.ts +2 -3
  24. package/lib/components/Popover/usePopover.js +110 -88
  25. package/lib/components/Popover/usePopover.js.map +1 -1
  26. package/lib/components/PopoverSurface/PopoverSurface.d.ts +3 -3
  27. package/lib/components/PopoverSurface/PopoverSurface.js +5 -4
  28. package/lib/components/PopoverSurface/PopoverSurface.js.map +1 -1
  29. package/lib/components/PopoverSurface/PopoverSurface.types.d.ts +9 -18
  30. package/lib/components/PopoverSurface/PopoverSurface.types.js.map +1 -1
  31. package/lib/components/PopoverSurface/index.js.map +1 -1
  32. package/lib/components/PopoverSurface/renderPopoverSurface.d.ts +1 -1
  33. package/lib/components/PopoverSurface/renderPopoverSurface.js +18 -10
  34. package/lib/components/PopoverSurface/renderPopoverSurface.js.map +1 -1
  35. package/lib/components/PopoverSurface/usePopoverSurface.d.ts +4 -4
  36. package/lib/components/PopoverSurface/usePopoverSurface.js +94 -54
  37. package/lib/components/PopoverSurface/usePopoverSurface.js.map +1 -1
  38. package/lib/components/PopoverSurface/usePopoverSurfaceStyles.d.ts +2 -2
  39. package/lib/components/PopoverSurface/usePopoverSurfaceStyles.js +88 -64
  40. package/lib/components/PopoverSurface/usePopoverSurfaceStyles.js.map +1 -1
  41. package/lib/components/PopoverTrigger/PopoverTrigger.d.ts +2 -2
  42. package/lib/components/PopoverTrigger/PopoverTrigger.js +4 -3
  43. package/lib/components/PopoverTrigger/PopoverTrigger.js.map +1 -1
  44. package/lib/components/PopoverTrigger/PopoverTrigger.types.d.ts +3 -4
  45. package/lib/components/PopoverTrigger/PopoverTrigger.types.js.map +1 -1
  46. package/lib/components/PopoverTrigger/index.js.map +1 -1
  47. package/lib/components/PopoverTrigger/renderPopoverTrigger.d.ts +1 -1
  48. package/lib/components/PopoverTrigger/renderPopoverTrigger.js +1 -1
  49. package/lib/components/PopoverTrigger/renderPopoverTrigger.js.map +1 -1
  50. package/lib/components/PopoverTrigger/usePopoverTrigger.d.ts +2 -3
  51. package/lib/components/PopoverTrigger/usePopoverTrigger.js +83 -60
  52. package/lib/components/PopoverTrigger/usePopoverTrigger.js.map +1 -1
  53. package/lib/index.js.map +1 -1
  54. package/lib/popoverContext.d.ts +4 -5
  55. package/lib/popoverContext.js +19 -12
  56. package/lib/popoverContext.js.map +1 -1
  57. package/lib/tsdoc-metadata.json +1 -1
  58. package/lib-commonjs/Popover.js +7 -2
  59. package/lib-commonjs/Popover.js.map +1 -1
  60. package/lib-commonjs/PopoverSurface.js +7 -2
  61. package/lib-commonjs/PopoverSurface.js.map +1 -1
  62. package/lib-commonjs/PopoverTrigger.js +7 -2
  63. package/lib-commonjs/PopoverTrigger.js.map +1 -1
  64. package/lib-commonjs/common/isConformant.d.ts +1 -1
  65. package/lib-commonjs/common/isConformant.js +18 -7
  66. package/lib-commonjs/common/isConformant.js.map +1 -1
  67. package/lib-commonjs/common/mockUsePopoverContext.d.ts +1 -1
  68. package/lib-commonjs/common/mockUsePopoverContext.js +38 -9
  69. package/lib-commonjs/common/mockUsePopoverContext.js.map +1 -1
  70. package/lib-commonjs/components/Popover/Popover.d.ts +2 -2
  71. package/lib-commonjs/components/Popover/Popover.js +14 -6
  72. package/lib-commonjs/components/Popover/Popover.js.map +1 -1
  73. package/lib-commonjs/components/Popover/Popover.types.d.ts +24 -33
  74. package/lib-commonjs/components/Popover/Popover.types.js +4 -1
  75. package/lib-commonjs/components/Popover/Popover.types.js.map +1 -1
  76. package/lib-commonjs/components/Popover/index.js +10 -2
  77. package/lib-commonjs/components/Popover/index.js.map +1 -1
  78. package/lib-commonjs/components/Popover/renderPopover.d.ts +1 -1
  79. package/lib-commonjs/components/Popover/renderPopover.js +39 -20
  80. package/lib-commonjs/components/Popover/renderPopover.js.map +1 -1
  81. package/lib-commonjs/components/Popover/usePopover.d.ts +2 -3
  82. package/lib-commonjs/components/Popover/usePopover.js +127 -93
  83. package/lib-commonjs/components/Popover/usePopover.js.map +1 -1
  84. package/lib-commonjs/components/PopoverSurface/PopoverSurface.d.ts +3 -3
  85. package/lib-commonjs/components/PopoverSurface/PopoverSurface.js +18 -9
  86. package/lib-commonjs/components/PopoverSurface/PopoverSurface.js.map +1 -1
  87. package/lib-commonjs/components/PopoverSurface/PopoverSurface.types.d.ts +9 -18
  88. package/lib-commonjs/components/PopoverSurface/PopoverSurface.types.js +4 -1
  89. package/lib-commonjs/components/PopoverSurface/PopoverSurface.types.js.map +1 -1
  90. package/lib-commonjs/components/PopoverSurface/index.js +11 -2
  91. package/lib-commonjs/components/PopoverSurface/index.js.map +1 -1
  92. package/lib-commonjs/components/PopoverSurface/renderPopoverSurface.d.ts +1 -1
  93. package/lib-commonjs/components/PopoverSurface/renderPopoverSurface.js +32 -14
  94. package/lib-commonjs/components/PopoverSurface/renderPopoverSurface.js.map +1 -1
  95. package/lib-commonjs/components/PopoverSurface/usePopoverSurface.d.ts +4 -4
  96. package/lib-commonjs/components/PopoverSurface/usePopoverSurface.js +110 -60
  97. package/lib-commonjs/components/PopoverSurface/usePopoverSurface.js.map +1 -1
  98. package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.d.ts +2 -2
  99. package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.js +95 -65
  100. package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.js.map +1 -1
  101. package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.d.ts +2 -2
  102. package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.js +14 -6
  103. package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.js.map +1 -1
  104. package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.types.d.ts +3 -4
  105. package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.types.js +4 -1
  106. package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.types.js.map +1 -1
  107. package/lib-commonjs/components/PopoverTrigger/index.js +10 -2
  108. package/lib-commonjs/components/PopoverTrigger/index.js.map +1 -1
  109. package/lib-commonjs/components/PopoverTrigger/renderPopoverTrigger.d.ts +1 -1
  110. package/lib-commonjs/components/PopoverTrigger/renderPopoverTrigger.js +7 -2
  111. package/lib-commonjs/components/PopoverTrigger/renderPopoverTrigger.js.map +1 -1
  112. package/lib-commonjs/components/PopoverTrigger/usePopoverTrigger.d.ts +2 -3
  113. package/lib-commonjs/components/PopoverTrigger/usePopoverTrigger.js +98 -65
  114. package/lib-commonjs/components/PopoverTrigger/usePopoverTrigger.js.map +1 -1
  115. package/lib-commonjs/index.js +10 -2
  116. package/lib-commonjs/index.js.map +1 -1
  117. package/lib-commonjs/popoverContext.d.ts +4 -5
  118. package/lib-commonjs/popoverContext.js +28 -14
  119. package/lib-commonjs/popoverContext.js.map +1 -1
  120. package/package.json +18 -15
  121. package/.storybook/main.js +0 -11
  122. package/.storybook/preview.js +0 -4
  123. package/bundle-size/Popover.fixture.js +0 -7
  124. package/config/api-extractor.json +0 -3
  125. package/config/tests.js +0 -7
  126. package/e2e/Popover.e2e.ts +0 -139
  127. package/etc/react-popover.api.md +0 -135
  128. package/just.config.ts +0 -3
  129. package/lib/Popover.stories.d.ts +0 -62
  130. package/lib/Popover.stories.js +0 -114
  131. package/lib/Popover.stories.js.map +0 -1
  132. package/lib/components/Popover/getOffsetWithArrow.d.ts +0 -7
  133. package/lib/components/Popover/getOffsetWithArrow.js +0 -34
  134. package/lib/components/Popover/getOffsetWithArrow.js.map +0 -1
  135. package/lib-amd/Popover.d.ts +0 -1
  136. package/lib-amd/Popover.js +0 -6
  137. package/lib-amd/Popover.js.map +0 -1
  138. package/lib-amd/Popover.stories.d.ts +0 -62
  139. package/lib-amd/Popover.stories.js +0 -121
  140. package/lib-amd/Popover.stories.js.map +0 -1
  141. package/lib-amd/PopoverSurface.d.ts +0 -1
  142. package/lib-amd/PopoverSurface.js +0 -6
  143. package/lib-amd/PopoverSurface.js.map +0 -1
  144. package/lib-amd/PopoverTrigger.d.ts +0 -1
  145. package/lib-amd/PopoverTrigger.js +0 -6
  146. package/lib-amd/PopoverTrigger.js.map +0 -1
  147. package/lib-amd/common/isConformant.d.ts +0 -4
  148. package/lib-amd/common/isConformant.js +0 -14
  149. package/lib-amd/common/isConformant.js.map +0 -1
  150. package/lib-amd/common/mockUsePopoverContext.d.ts +0 -7
  151. package/lib-amd/common/mockUsePopoverContext.js +0 -20
  152. package/lib-amd/common/mockUsePopoverContext.js.map +0 -1
  153. package/lib-amd/components/Popover/Popover.d.ts +0 -6
  154. package/lib-amd/components/Popover/Popover.js +0 -15
  155. package/lib-amd/components/Popover/Popover.js.map +0 -1
  156. package/lib-amd/components/Popover/Popover.types.d.ts +0 -109
  157. package/lib-amd/components/Popover/Popover.types.js +0 -5
  158. package/lib-amd/components/Popover/Popover.types.js.map +0 -1
  159. package/lib-amd/components/Popover/getOffsetWithArrow.d.ts +0 -7
  160. package/lib-amd/components/Popover/getOffsetWithArrow.js +0 -40
  161. package/lib-amd/components/Popover/getOffsetWithArrow.js.map +0 -1
  162. package/lib-amd/components/Popover/index.d.ts +0 -4
  163. package/lib-amd/components/Popover/index.js +0 -9
  164. package/lib-amd/components/Popover/index.js.map +0 -1
  165. package/lib-amd/components/Popover/renderPopover.d.ts +0 -5
  166. package/lib-amd/components/Popover/renderPopover.js +0 -29
  167. package/lib-amd/components/Popover/renderPopover.js.map +0 -1
  168. package/lib-amd/components/Popover/usePopover.d.ts +0 -11
  169. package/lib-amd/components/Popover/usePopover.js +0 -112
  170. package/lib-amd/components/Popover/usePopover.js.map +0 -1
  171. package/lib-amd/components/PopoverSurface/PopoverSurface.d.ts +0 -6
  172. package/lib-amd/components/PopoverSurface/PopoverSurface.js +0 -15
  173. package/lib-amd/components/PopoverSurface/PopoverSurface.js.map +0 -1
  174. package/lib-amd/components/PopoverSurface/PopoverSurface.types.d.ts +0 -30
  175. package/lib-amd/components/PopoverSurface/PopoverSurface.types.js +0 -5
  176. package/lib-amd/components/PopoverSurface/PopoverSurface.types.js.map +0 -1
  177. package/lib-amd/components/PopoverSurface/index.d.ts +0 -5
  178. package/lib-amd/components/PopoverSurface/index.js +0 -10
  179. package/lib-amd/components/PopoverSurface/index.js.map +0 -1
  180. package/lib-amd/components/PopoverSurface/renderPopoverSurface.d.ts +0 -5
  181. package/lib-amd/components/PopoverSurface/renderPopoverSurface.js +0 -21
  182. package/lib-amd/components/PopoverSurface/renderPopoverSurface.js.map +0 -1
  183. package/lib-amd/components/PopoverSurface/usePopoverSurface.d.ts +0 -13
  184. package/lib-amd/components/PopoverSurface/usePopoverSurface.js +0 -69
  185. package/lib-amd/components/PopoverSurface/usePopoverSurface.js.map +0 -1
  186. package/lib-amd/components/PopoverSurface/usePopoverSurfaceStyles.d.ts +0 -7
  187. package/lib-amd/components/PopoverSurface/usePopoverSurfaceStyles.js +0 -81
  188. package/lib-amd/components/PopoverSurface/usePopoverSurfaceStyles.js.map +0 -1
  189. package/lib-amd/components/PopoverTrigger/PopoverTrigger.d.ts +0 -6
  190. package/lib-amd/components/PopoverTrigger/PopoverTrigger.js +0 -15
  191. package/lib-amd/components/PopoverTrigger/PopoverTrigger.js.map +0 -1
  192. package/lib-amd/components/PopoverTrigger/PopoverTrigger.types.d.ts +0 -12
  193. package/lib-amd/components/PopoverTrigger/PopoverTrigger.types.js +0 -5
  194. package/lib-amd/components/PopoverTrigger/PopoverTrigger.types.js.map +0 -1
  195. package/lib-amd/components/PopoverTrigger/index.d.ts +0 -4
  196. package/lib-amd/components/PopoverTrigger/index.js +0 -9
  197. package/lib-amd/components/PopoverTrigger/index.js.map +0 -1
  198. package/lib-amd/components/PopoverTrigger/renderPopoverTrigger.d.ts +0 -5
  199. package/lib-amd/components/PopoverTrigger/renderPopoverTrigger.js +0 -13
  200. package/lib-amd/components/PopoverTrigger/renderPopoverTrigger.js.map +0 -1
  201. package/lib-amd/components/PopoverTrigger/usePopoverTrigger.d.ts +0 -11
  202. package/lib-amd/components/PopoverTrigger/usePopoverTrigger.js +0 -75
  203. package/lib-amd/components/PopoverTrigger/usePopoverTrigger.js.map +0 -1
  204. package/lib-amd/index.d.ts +0 -4
  205. package/lib-amd/index.js +0 -9
  206. package/lib-amd/index.js.map +0 -1
  207. package/lib-amd/popoverContext.d.ts +0 -9
  208. package/lib-amd/popoverContext.js +0 -22
  209. package/lib-amd/popoverContext.js.map +0 -1
  210. package/lib-commonjs/Popover.stories.d.ts +0 -62
  211. package/lib-commonjs/Popover.stories.js +0 -122
  212. package/lib-commonjs/Popover.stories.js.map +0 -1
  213. package/lib-commonjs/components/Popover/getOffsetWithArrow.d.ts +0 -7
  214. package/lib-commonjs/components/Popover/getOffsetWithArrow.js +0 -38
  215. package/lib-commonjs/components/Popover/getOffsetWithArrow.js.map +0 -1
  216. package/src/components/Popover/Popover.types.ts +0 -124
  217. package/src/components/PopoverSurface/PopoverSurface.types.ts +0 -36
  218. package/src/components/PopoverTrigger/PopoverTrigger.types.ts +0 -13
@@ -1 +0,0 @@
1
- {"version":3,"file":"isConformant.js","sourceRoot":"../src/","sources":["common/isConformant.ts"],"names":[],"mappings":";;;;IAEA,SAAgB,YAAY,CAC1B,QAAyF;QAEzF,IAAM,cAAc,GAAyC;YAC3D,gBAAgB,EAAE,IAAI;YACtB,aAAa,EAAE,MAAO,CAAC,MAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;SAC7D,CAAC;QAEF,gCAAgB,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;IAC7C,CAAC;IATD,oCASC","sourcesContent":["import { isConformant as baseIsConformant, IsConformantOptions } from '@fluentui/react-conformance';\n\nexport function isConformant<TProps = {}>(\n testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },\n) {\n const defaultOptions: Partial<IsConformantOptions<TProps>> = {\n asPropHandlesRef: true,\n componentPath: module!.parent!.filename.replace('.test', ''),\n };\n\n baseIsConformant(defaultOptions, testInfo);\n}\n"]}
@@ -1,7 +0,0 @@
1
- import { PopoverContextValue } from '../popoverContext';
2
- /**
3
- * A test utility to mock the usePopoverContext hook that relies on context selector
4
- * Don't forget to call `jest.mock(**\/popupContext.ts)` while using this
5
- * @param options Popover context values to set for testing
6
- */
7
- export declare const mockPopoverContext: (options?: Partial<PopoverContextValue>) => void;
@@ -1,20 +0,0 @@
1
- define(["require", "exports", "tslib", "../popoverContext"], function (require, exports, tslib_1, popoverContext_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.mockPopoverContext = void 0;
5
- /**
6
- * A test utility to mock the usePopoverContext hook that relies on context selector
7
- * Don't forget to call `jest.mock(**\/popupContext.ts)` while using this
8
- * @param options Popover context values to set for testing
9
- */
10
- var mockPopoverContext = function (options) {
11
- if (options === void 0) { options = {}; }
12
- var mockContext = tslib_1.__assign({ open: false, setOpen: function () { return null; }, triggerRef: { current: null }, contentRef: { current: null }, arrowRef: { current: null }, target: undefined, openOnContext: false, openOnHover: false, size: 'medium' }, options);
13
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
14
- popoverContext_1.usePopoverContext.mockImplementation(function (selector) {
15
- return selector(mockContext);
16
- });
17
- };
18
- exports.mockPopoverContext = mockPopoverContext;
19
- });
20
- //# sourceMappingURL=mockUsePopoverContext.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"mockUsePopoverContext.js","sourceRoot":"../src/","sources":["common/mockUsePopoverContext.ts"],"names":[],"mappings":";;;;IAEA;;;;OAIG;IACI,IAAM,kBAAkB,GAAG,UAAC,OAA0C;QAA1C,wBAAA,EAAA,YAA0C;QAC3E,IAAM,WAAW,sBACf,IAAI,EAAE,KAAK,EACX,OAAO,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI,EACnB,UAAU,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAC7B,UAAU,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAC7B,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAC3B,MAAM,EAAE,SAAS,EACjB,aAAa,EAAE,KAAK,EACpB,WAAW,EAAE,KAAK,EAClB,IAAI,EAAE,QAAQ,IACX,OAAO,CACX,CAAC;QACF,8DAA8D;QAC7D,kCAA+B,CAAC,kBAAkB,CAAC,UAAC,QAA+C;YAClG,OAAO,QAAQ,CAAC,WAAW,CAAC,CAAC;QAC/B,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAjBW,QAAA,kBAAkB,sBAiB7B","sourcesContent":["import { PopoverContextValue, usePopoverContext } from '../popoverContext';\n\n/**\n * A test utility to mock the usePopoverContext hook that relies on context selector\n * Don't forget to call `jest.mock(**\\/popupContext.ts)` while using this\n * @param options Popover context values to set for testing\n */\nexport const mockPopoverContext = (options: Partial<PopoverContextValue> = {}) => {\n const mockContext: PopoverContextValue = {\n open: false,\n setOpen: () => null,\n triggerRef: { current: null },\n contentRef: { current: null },\n arrowRef: { current: null },\n target: undefined,\n openOnContext: false,\n openOnHover: false,\n size: 'medium',\n ...options,\n };\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (usePopoverContext as jest.Mock).mockImplementation((selector: (context: PopoverContextValue) => any) => {\n return selector(mockContext);\n });\n};\n"]}
@@ -1,6 +0,0 @@
1
- import * as React from 'react';
2
- import { PopoverProps } from './Popover.types';
3
- /**
4
- * Popover component
5
- */
6
- export declare const Popover: React.FC<PopoverProps>;
@@ -1,15 +0,0 @@
1
- define(["require", "exports", "./usePopover", "./renderPopover"], function (require, exports, usePopover_1, renderPopover_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.Popover = void 0;
5
- /**
6
- * Popover component
7
- */
8
- var Popover = function (props) {
9
- var state = usePopover_1.usePopover(props);
10
- return renderPopover_1.renderPopover(state);
11
- };
12
- exports.Popover = Popover;
13
- exports.Popover.displayName = 'Popover';
14
- });
15
- //# sourceMappingURL=Popover.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Popover.js","sourceRoot":"../src/","sources":["components/Popover/Popover.tsx"],"names":[],"mappings":";;;;IAKA;;OAEG;IACI,IAAM,OAAO,GAA2B,UAAA,KAAK;QAClD,IAAM,KAAK,GAAG,uBAAU,CAAC,KAAK,CAAC,CAAC;QAEhC,OAAO,6BAAa,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC,CAAC;IAJW,QAAA,OAAO,WAIlB;IAEF,eAAO,CAAC,WAAW,GAAG,SAAS,CAAC","sourcesContent":["import * as React from 'react';\nimport { usePopover } from './usePopover';\nimport { PopoverProps } from './Popover.types';\nimport { renderPopover } from './renderPopover';\n\n/**\n * Popover component\n */\nexport const Popover: React.FC<PopoverProps> = props => {\n const state = usePopover(props);\n\n return renderPopover(state);\n};\n\nPopover.displayName = 'Popover';\n"]}
@@ -1,109 +0,0 @@
1
- import * as React from 'react';
2
- import { PopperOptions, PopperVirtualElement } from '@fluentui/react-positioning';
3
- import { PortalProps } from '@fluentui/react-portal';
4
- import { ComponentState } from '@fluentui/react-utilities';
5
- /**
6
- * Determines popover padding and arrow size
7
- */
8
- export declare type PopoverSize = 'small' | 'medium' | 'large';
9
- /**
10
- * Popover Props
11
- */
12
- export interface PopoverProps extends Pick<PopperOptions, 'position' | 'align' | 'offset' | 'coverTarget' | 'target'>, Pick<PortalProps, 'mountNode'> {
13
- children: React.ReactNode;
14
- /**
15
- * Controls the opening of the Popover
16
- */
17
- open?: boolean;
18
- /**
19
- * Used to set the initial open state of the Popover in uncontrolled mode
20
- */
21
- defaultOpen?: boolean;
22
- /**
23
- * Call back when the component requests to change value
24
- * The `open` value is used as a hint when directly controlling the component
25
- */
26
- onOpenChange?: (e: OpenPopoverEvents, data: OnOpenChangeData) => void;
27
- /**
28
- * Flag to open the Popover by hovering the trigger
29
- */
30
- openOnHover?: boolean;
31
- /**
32
- * Flag to open the Popover as a context menu. Disables all other interactions
33
- */
34
- openOnContext?: boolean;
35
- /**
36
- * Do not display the arrow
37
- */
38
- noArrow?: boolean;
39
- /**
40
- * Determines popover padding and arrow size
41
- * @default medium
42
- */
43
- size?: PopoverSize;
44
- /**
45
- * Uses brand colour as background
46
- * Mutually exclusive with `inverted`
47
- */
48
- brand?: boolean;
49
- /**
50
- * Inverts the foreground/background colour of the popover
51
- * Mutually exclusive with `brand`
52
- */
53
- inverted?: boolean;
54
- /**
55
- * Should trap focus
56
- */
57
- trapFocus?: boolean;
58
- }
59
- /**
60
- * Names of the shorthand properties in PopoverProps
61
- */
62
- export declare type PopoverShorthandProps = never;
63
- /**
64
- * Names of PopoverProps that have a default value in usePopover
65
- */
66
- export declare type PopoverDefaultedProps = never;
67
- /**
68
- * Popover State
69
- */
70
- export interface PopoverState extends ComponentState<PopoverProps, PopoverShorthandProps, PopoverDefaultedProps> {
71
- /**
72
- * Open state of the Popover
73
- */
74
- open: boolean;
75
- /**
76
- * Callback to open/close the Popover
77
- */
78
- setOpen: (e: OpenPopoverEvents, open: boolean) => void;
79
- /**
80
- * Ref of the PopoverTrigger
81
- */
82
- triggerRef: React.MutableRefObject<HTMLElement | null>;
83
- /**
84
- * Ref of the PopoverSurface
85
- */
86
- contentRef: React.MutableRefObject<HTMLElement | null>;
87
- /**
88
- * Ref of the pointing arrow
89
- */
90
- arrowRef: React.MutableRefObject<HTMLDivElement | null>;
91
- /**
92
- * Anchors the popper to the mouse click for context events
93
- */
94
- contextTarget: PopperVirtualElement | undefined;
95
- /**
96
- * A callback to set the target of the popper to the mouse click for context events
97
- */
98
- setContextTarget: React.Dispatch<PopperVirtualElement | undefined>;
99
- size: NonNullable<PopoverProps['size']>;
100
- }
101
- /**
102
- * Data attached to open/close events
103
- */
104
- export interface OnOpenChangeData extends Pick<PopoverState, 'open'> {
105
- }
106
- /**
107
- * The supported events that will trigger open/close of the menu
108
- */
109
- export declare type OpenPopoverEvents = MouseEvent | TouchEvent | React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement> | React.FocusEvent<HTMLElement>;
@@ -1,5 +0,0 @@
1
- define(["require", "exports"], function (require, exports) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- });
5
- //# sourceMappingURL=Popover.types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Popover.types.js","sourceRoot":"../src/","sources":["components/Popover/Popover.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { PopperOptions, PopperVirtualElement } from '@fluentui/react-positioning';\nimport { PortalProps } from '@fluentui/react-portal';\nimport { ComponentState } from '@fluentui/react-utilities';\n\n/**\n * Determines popover padding and arrow size\n */\nexport type PopoverSize = 'small' | 'medium' | 'large';\n\n/**\n * Popover Props\n */\nexport interface PopoverProps\n extends Pick<PopperOptions, 'position' | 'align' | 'offset' | 'coverTarget' | 'target'>,\n Pick<PortalProps, 'mountNode'> {\n children: React.ReactNode;\n /**\n * Controls the opening of the Popover\n */\n open?: boolean;\n /**\n * Used to set the initial open state of the Popover in uncontrolled mode\n */\n defaultOpen?: boolean;\n /**\n * Call back when the component requests to change value\n * The `open` value is used as a hint when directly controlling the component\n */\n onOpenChange?: (e: OpenPopoverEvents, data: OnOpenChangeData) => void;\n /**\n * Flag to open the Popover by hovering the trigger\n */\n openOnHover?: boolean;\n /**\n * Flag to open the Popover as a context menu. Disables all other interactions\n */\n openOnContext?: boolean;\n /**\n * Do not display the arrow\n */\n noArrow?: boolean;\n /**\n * Determines popover padding and arrow size\n * @default medium\n */\n size?: PopoverSize;\n /**\n * Uses brand colour as background\n * Mutually exclusive with `inverted`\n */\n brand?: boolean;\n /**\n * Inverts the foreground/background colour of the popover\n * Mutually exclusive with `brand`\n */\n inverted?: boolean;\n\n /**\n * Should trap focus\n */\n trapFocus?: boolean;\n}\n\n/**\n * Names of the shorthand properties in PopoverProps\n */\nexport type PopoverShorthandProps = never;\n\n/**\n * Names of PopoverProps that have a default value in usePopover\n */\nexport type PopoverDefaultedProps = never;\n\n/**\n * Popover State\n */\nexport interface PopoverState extends ComponentState<PopoverProps, PopoverShorthandProps, PopoverDefaultedProps> {\n /**\n * Open state of the Popover\n */\n open: boolean;\n /**\n * Callback to open/close the Popover\n */\n setOpen: (e: OpenPopoverEvents, open: boolean) => void;\n /**\n * Ref of the PopoverTrigger\n */\n triggerRef: React.MutableRefObject<HTMLElement | null>;\n /**\n * Ref of the PopoverSurface\n */\n contentRef: React.MutableRefObject<HTMLElement | null>;\n /**\n * Ref of the pointing arrow\n */\n arrowRef: React.MutableRefObject<HTMLDivElement | null>;\n /**\n * Anchors the popper to the mouse click for context events\n */\n contextTarget: PopperVirtualElement | undefined;\n /**\n * A callback to set the target of the popper to the mouse click for context events\n */\n setContextTarget: React.Dispatch<PopperVirtualElement | undefined>;\n\n size: NonNullable<PopoverProps['size']>;\n}\n\n/**\n * Data attached to open/close events\n */\nexport interface OnOpenChangeData extends Pick<PopoverState, 'open'> {}\n\n/**\n * The supported events that will trigger open/close of the menu\n */\nexport type OpenPopoverEvents =\n | MouseEvent\n | TouchEvent\n | React.MouseEvent<HTMLElement>\n | React.KeyboardEvent<HTMLElement>\n | React.FocusEvent<HTMLElement>;\n"]}
@@ -1,7 +0,0 @@
1
- import { Offset } from '@fluentui/react-positioning';
2
- /**
3
- * @param userOffset - The offset provided by the user
4
- * @param arrowHeight - The height of the arrow in px
5
- * @returns User offset augmented with arrow height
6
- */
7
- export declare function getOffsetWithArrow(userOffset: Offset | undefined | null, arrowHeight: number): Offset;
@@ -1,40 +0,0 @@
1
- define(["require", "exports"], function (require, exports) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.getOffsetWithArrow = void 0;
5
- /**
6
- * @param userOffset - The offset provided by the user
7
- * @param arrowHeight - The height of the arrow in px
8
- * @returns User offset augmented with arrow height
9
- */
10
- function getOffsetWithArrow(userOffset, arrowHeight) {
11
- var offsetWithArrow = userOffset;
12
- if (!userOffset) {
13
- return [0, arrowHeight];
14
- }
15
- if (Array.isArray(offsetWithArrow)) {
16
- setArrowOffset(offsetWithArrow, arrowHeight);
17
- return offsetWithArrow;
18
- }
19
- if (typeof offsetWithArrow === 'function') {
20
- var userOffsetFn_1 = offsetWithArrow;
21
- offsetWithArrow = function (offsetParams) {
22
- var offset = userOffsetFn_1(offsetParams);
23
- setArrowOffset(offset, arrowHeight);
24
- return offset;
25
- };
26
- }
27
- // This should never happen
28
- return [0, 0];
29
- }
30
- exports.getOffsetWithArrow = getOffsetWithArrow;
31
- var setArrowOffset = function (offset, arrowHeight) {
32
- if (offset[1] !== null && offset[1] !== undefined) {
33
- offset[1] += arrowHeight;
34
- }
35
- else {
36
- offset[1] = arrowHeight;
37
- }
38
- };
39
- });
40
- //# sourceMappingURL=getOffsetWithArrow.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"getOffsetWithArrow.js","sourceRoot":"../src/","sources":["components/Popover/getOffsetWithArrow.ts"],"names":[],"mappings":";;;;IAEA;;;;OAIG;IACH,SAAgB,kBAAkB,CAAC,UAAqC,EAAE,WAAmB;QAC3F,IAAI,eAAe,GAAG,UAAU,CAAC;QACjC,IAAI,CAAC,UAAU,EAAE;YACf,OAAO,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC;SACzB;QAED,IAAI,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE;YAClC,cAAc,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC;YAC7C,OAAO,eAAe,CAAC;SACxB;QAED,IAAI,OAAO,eAAe,KAAK,UAAU,EAAE;YACzC,IAAM,cAAY,GAAG,eAAe,CAAC;YACrC,eAAe,GAAG,UAAA,YAAY;gBAC5B,IAAM,MAAM,GAAG,cAAY,CAAC,YAAY,CAAC,CAAC;gBAC1C,cAAc,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;gBACpC,OAAO,MAAM,CAAC;YAChB,CAAC,CAAC;SACH;QAED,2BAA2B;QAC3B,OAAO,CAAC,CAAC,EAAE,CAAC,CAAU,CAAC;IACzB,CAAC;IAtBD,gDAsBC;IAED,IAAM,cAAc,GAAG,UAAC,MAA8D,EAAE,WAAmB;QACzG,IAAI,MAAM,CAAC,CAAC,CAAC,KAAK,IAAI,IAAI,MAAM,CAAC,CAAC,CAAC,KAAK,SAAS,EAAE;YACjD,MAAM,CAAC,CAAC,CAAC,IAAI,WAAW,CAAC;SAC1B;aAAM;YACL,MAAM,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC;SACzB;IACH,CAAC,CAAC","sourcesContent":["import { Offset } from '@fluentui/react-positioning';\n\n/**\n * @param userOffset - The offset provided by the user\n * @param arrowHeight - The height of the arrow in px\n * @returns User offset augmented with arrow height\n */\nexport function getOffsetWithArrow(userOffset: Offset | undefined | null, arrowHeight: number): Offset {\n let offsetWithArrow = userOffset;\n if (!userOffset) {\n return [0, arrowHeight];\n }\n\n if (Array.isArray(offsetWithArrow)) {\n setArrowOffset(offsetWithArrow, arrowHeight);\n return offsetWithArrow;\n }\n\n if (typeof offsetWithArrow === 'function') {\n const userOffsetFn = offsetWithArrow;\n offsetWithArrow = offsetParams => {\n const offset = userOffsetFn(offsetParams);\n setArrowOffset(offset, arrowHeight);\n return offset;\n };\n }\n\n // This should never happen\n return [0, 0] as never;\n}\n\nconst setArrowOffset = (offset: [number | null | undefined, number | null | undefined], arrowHeight: number) => {\n if (offset[1] !== null && offset[1] !== undefined) {\n offset[1] += arrowHeight;\n } else {\n offset[1] = arrowHeight;\n }\n};\n"]}
@@ -1,4 +0,0 @@
1
- export * from './Popover';
2
- export * from './Popover.types';
3
- export * from './renderPopover';
4
- export * from './usePopover';
@@ -1,9 +0,0 @@
1
- define(["require", "exports", "tslib", "./Popover", "./Popover.types", "./renderPopover", "./usePopover"], function (require, exports, tslib_1, Popover_1, Popover_types_1, renderPopover_1, usePopover_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- tslib_1.__exportStar(Popover_1, exports);
5
- tslib_1.__exportStar(Popover_types_1, exports);
6
- tslib_1.__exportStar(renderPopover_1, exports);
7
- tslib_1.__exportStar(usePopover_1, exports);
8
- });
9
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Popover/index.ts"],"names":[],"mappings":";;;IAAA,yCAA0B;IAC1B,+CAAgC;IAChC,+CAAgC;IAChC,4CAA6B","sourcesContent":["export * from './Popover';\nexport * from './Popover.types';\nexport * from './renderPopover';\nexport * from './usePopover';\n"]}
@@ -1,5 +0,0 @@
1
- import { PopoverState } from './Popover.types';
2
- /**
3
- * Render the final JSX of Popover
4
- */
5
- export declare const renderPopover: (state: PopoverState) => JSX.Element;
@@ -1,29 +0,0 @@
1
- define(["require", "exports", "react", "../../popoverContext"], function (require, exports, React, popoverContext_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.renderPopover = void 0;
5
- /**
6
- * Render the final JSX of Popover
7
- */
8
- var renderPopover = function (state) {
9
- var open = state.open, setOpen = state.setOpen, triggerRef = state.triggerRef, contentRef = state.contentRef, target = state.target, openOnContext = state.openOnContext, openOnHover = state.openOnHover, mountNode = state.mountNode, arrowRef = state.arrowRef, size = state.size, noArrow = state.noArrow, brand = state.brand, inverted = state.inverted, trapFocus = state.trapFocus;
10
- return (React.createElement(popoverContext_1.PopoverContext.Provider, { value: {
11
- open: open,
12
- setOpen: setOpen,
13
- triggerRef: triggerRef,
14
- contentRef: contentRef,
15
- target: target,
16
- openOnHover: openOnHover,
17
- openOnContext: openOnContext,
18
- mountNode: mountNode,
19
- arrowRef: arrowRef,
20
- size: size,
21
- noArrow: noArrow,
22
- brand: brand,
23
- inverted: inverted,
24
- trapFocus: trapFocus,
25
- } }, state.children));
26
- };
27
- exports.renderPopover = renderPopover;
28
- });
29
- //# sourceMappingURL=renderPopover.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"renderPopover.js","sourceRoot":"../src/","sources":["components/Popover/renderPopover.tsx"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,aAAa,GAAG,UAAC,KAAmB;QAE7C,IAAA,IAAI,GAcF,KAAK,KAdH,EACJ,OAAO,GAaL,KAAK,QAbA,EACP,UAAU,GAYR,KAAK,WAZG,EACV,UAAU,GAWR,KAAK,WAXG,EACV,MAAM,GAUJ,KAAK,OAVD,EACN,aAAa,GASX,KAAK,cATM,EACb,WAAW,GAQT,KAAK,YARI,EACX,SAAS,GAOP,KAAK,UAPE,EACT,QAAQ,GAMN,KAAK,SANC,EACR,IAAI,GAKF,KAAK,KALH,EACJ,OAAO,GAIL,KAAK,QAJA,EACP,KAAK,GAGH,KAAK,MAHF,EACL,QAAQ,GAEN,KAAK,SAFC,EACR,SAAS,GACP,KAAK,UADE,CACD;QAEV,OAAO,CACL,oBAAC,+BAAc,CAAC,QAAQ,IACtB,KAAK,EAAE;gBACL,IAAI,MAAA;gBACJ,OAAO,SAAA;gBACP,UAAU,YAAA;gBACV,UAAU,YAAA;gBACV,MAAM,QAAA;gBACN,WAAW,aAAA;gBACX,aAAa,eAAA;gBACb,SAAS,WAAA;gBACT,QAAQ,UAAA;gBACR,IAAI,MAAA;gBACJ,OAAO,SAAA;gBACP,KAAK,OAAA;gBACL,QAAQ,UAAA;gBACR,SAAS,WAAA;aACV,IAEA,KAAK,CAAC,QAAQ,CACS,CAC3B,CAAC;IACJ,CAAC,CAAC;IAxCW,QAAA,aAAa,iBAwCxB","sourcesContent":["import * as React from 'react';\nimport { PopoverContext } from '../../popoverContext';\nimport { PopoverState } from './Popover.types';\n\n/**\n * Render the final JSX of Popover\n */\nexport const renderPopover = (state: PopoverState) => {\n const {\n open,\n setOpen,\n triggerRef,\n contentRef,\n target,\n openOnContext,\n openOnHover,\n mountNode,\n arrowRef,\n size,\n noArrow,\n brand,\n inverted,\n trapFocus,\n } = state;\n\n return (\n <PopoverContext.Provider\n value={{\n open,\n setOpen,\n triggerRef,\n contentRef,\n target,\n openOnHover,\n openOnContext,\n mountNode,\n arrowRef,\n size,\n noArrow,\n brand,\n inverted,\n trapFocus,\n }}\n >\n {state.children}\n </PopoverContext.Provider>\n );\n};\n"]}
@@ -1,11 +0,0 @@
1
- import { 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.
7
- *
8
- * @param props - props from this instance of Popover
9
- * @param defaultProps - (optional) default prop values provided by the implementing type
10
- */
11
- export declare const usePopover: (props: PopoverProps, defaultProps?: PopoverProps | undefined) => PopoverState;
@@ -1,112 +0,0 @@
1
- define(["require", "exports", "react", "@fluentui/react-utilities", "@fluentui/react-shared-contexts", "@fluentui/react-positioning", "@fluentui/react-portal", "../PopoverSurface/index", "./getOffsetWithArrow"], function (require, exports, React, react_utilities_1, react_shared_contexts_1, react_positioning_1, react_portal_1, index_1, getOffsetWithArrow_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.usePopover = void 0;
5
- /**
6
- * Names of the shorthand properties in PopoverProps
7
- */
8
- var mergeProps = react_utilities_1.makeMergeProps({});
9
- /**
10
- * Create the state required to render Popover.
11
- *
12
- * The returned state can be modified with hooks such as usePopoverStyles,
13
- * before being passed to renderPopover.
14
- *
15
- * @param props - props from this instance of Popover
16
- * @param defaultProps - (optional) default prop values provided by the implementing type
17
- */
18
- var usePopover = function (props, defaultProps) {
19
- var state = mergeProps({
20
- size: 'medium',
21
- open: undefined,
22
- setOpen: function () { return null; },
23
- triggerRef: { current: null },
24
- contentRef: { current: null },
25
- arrowRef: { current: null },
26
- children: null,
27
- position: 'above',
28
- align: 'center',
29
- setContextTarget: function () { return null; },
30
- contextTarget: undefined,
31
- }, defaultProps, props);
32
- // no reason to render arrow when covering the target
33
- if (state.coverTarget) {
34
- state.noArrow = true;
35
- }
36
- var _a = React.useState(), contextTarget = _a[0], setContextTarget = _a[1];
37
- state.setContextTarget = setContextTarget;
38
- state.contextTarget = contextTarget;
39
- useOpenState(state);
40
- usePopoverRefs(state);
41
- var targetDocument = react_shared_contexts_1.useFluent().targetDocument;
42
- react_utilities_1.useOnClickOutside({
43
- contains: react_portal_1.elementContains,
44
- element: targetDocument,
45
- callback: function (ev) { return state.setOpen(ev, false); },
46
- refs: [state.triggerRef, state.contentRef],
47
- disabled: !state.open,
48
- });
49
- react_utilities_1.useOnScrollOutside({
50
- contains: react_portal_1.elementContains,
51
- element: targetDocument,
52
- callback: function (ev) { return state.setOpen(ev, false); },
53
- refs: [state.triggerRef, state.contentRef],
54
- disabled: !state.open || !state.openOnContext,
55
- });
56
- return state;
57
- };
58
- exports.usePopover = usePopover;
59
- /**
60
- * Creates and manages the Popover open state
61
- * @param state Popover state
62
- */
63
- function useOpenState(state) {
64
- var onOpenChange = react_utilities_1.useEventCallback(function (e, data) { var _a; return (_a = state.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(state, e, data); });
65
- var _a = react_utilities_1.useControllableValue(state.open, state.defaultOpen), open = _a[0], setOpen = _a[1];
66
- state.open = open !== undefined ? open : state.open;
67
- var setContextTarget = state.setContextTarget;
68
- state.setOpen = React.useCallback(function (e, shouldOpen) {
69
- if (shouldOpen && e.type === 'contextmenu') {
70
- var virtualElement = react_positioning_1.createVirtualElementFromClick(e.nativeEvent);
71
- setContextTarget(virtualElement);
72
- }
73
- if (!shouldOpen) {
74
- setContextTarget(undefined);
75
- }
76
- setOpen(function (prevOpen) {
77
- // More than one event (mouse, focus, keyboard) can request the Popover to close
78
- // We assume the first event is the correct one
79
- if (prevOpen !== shouldOpen) {
80
- onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(e, { open: shouldOpen });
81
- }
82
- return shouldOpen;
83
- });
84
- }, [setOpen, onOpenChange, setContextTarget]);
85
- return state;
86
- }
87
- /**
88
- * Creates and sets the necessary trigger, target and content refs used by Popover
89
- * @param state Popover state
90
- */
91
- function usePopoverRefs(state) {
92
- if (!state.noArrow) {
93
- state.offset = getOffsetWithArrow_1.getOffsetWithArrow(state.offset, index_1.arrowHeights[state.size]);
94
- }
95
- if (!state.target && state.openOnContext && state.contextTarget) {
96
- state.target = state.contextTarget;
97
- }
98
- var _a = react_positioning_1.usePopper({
99
- align: state.align,
100
- position: state.position,
101
- target: state.target,
102
- coverTarget: state.coverTarget,
103
- offset: state.offset,
104
- arrowPadding: index_1.arrowHeights[state.size],
105
- }), triggerRef = _a.targetRef, contentRef = _a.containerRef, arrowRef = _a.arrowRef;
106
- state.contentRef = contentRef;
107
- state.triggerRef = triggerRef;
108
- state.arrowRef = arrowRef;
109
- return state;
110
- }
111
- });
112
- //# sourceMappingURL=usePopover.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"usePopover.js","sourceRoot":"../src/","sources":["components/Popover/usePopover.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n makeMergeProps,\n useControllableValue,\n useEventCallback,\n useOnClickOutside,\n useOnScrollOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport { usePopper, PopperVirtualElement, createVirtualElementFromClick } from '@fluentui/react-positioning';\nimport { elementContains } from '@fluentui/react-portal';\nimport { PopoverProps, PopoverState } from './Popover.types';\nimport { arrowHeights } from '../PopoverSurface/index';\nimport { getOffsetWithArrow } from './getOffsetWithArrow';\n\n/**\n * Names of the shorthand properties in PopoverProps\n */\nconst mergeProps = makeMergeProps<PopoverState>({});\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.\n *\n * @param props - props from this instance of Popover\n * @param defaultProps - (optional) default prop values provided by the implementing type\n */\nexport const usePopover = (props: PopoverProps, defaultProps?: PopoverProps): PopoverState => {\n const state = mergeProps(\n {\n size: 'medium',\n open: (undefined as unknown) as boolean, // mergeProps typings require this\n setOpen: () => null,\n triggerRef: { current: null },\n contentRef: { current: null },\n arrowRef: { current: null },\n children: null,\n position: 'above',\n align: 'center',\n setContextTarget: () => null,\n contextTarget: undefined,\n },\n defaultProps,\n props,\n );\n\n // no reason to render arrow when covering the target\n if (state.coverTarget) {\n state.noArrow = true;\n }\n\n const [contextTarget, setContextTarget] = React.useState<PopperVirtualElement>();\n state.setContextTarget = setContextTarget;\n state.contextTarget = contextTarget;\n\n useOpenState(state);\n usePopoverRefs(state);\n\n const { targetDocument } = useFluent();\n useOnClickOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => state.setOpen(ev, false),\n refs: [state.triggerRef, state.contentRef],\n disabled: !state.open,\n });\n useOnScrollOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => state.setOpen(ev, false),\n refs: [state.triggerRef, state.contentRef],\n disabled: !state.open || !state.openOnContext,\n });\n\n return state;\n};\n\n/**\n * Creates and manages the Popover open state\n * @param state Popover state\n */\nfunction useOpenState(state: PopoverState): PopoverState {\n const onOpenChange: PopoverState['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n const [open, setOpen] = useControllableValue(state.open, state.defaultOpen);\n state.open = open !== undefined ? open : state.open;\n const setContextTarget = state.setContextTarget;\n\n state.setOpen = React.useCallback(\n (e, shouldOpen) => {\n if (shouldOpen && e.type === 'contextmenu') {\n const virtualElement = createVirtualElementFromClick((e as React.MouseEvent).nativeEvent);\n setContextTarget(virtualElement);\n }\n\n if (!shouldOpen) {\n setContextTarget(undefined);\n }\n\n setOpen(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 [setOpen, onOpenChange, setContextTarget],\n );\n\n return state;\n}\n\n/**\n * Creates and sets the necessary trigger, target and content refs used by Popover\n * @param state Popover state\n */\nfunction usePopoverRefs(state: PopoverState): PopoverState {\n if (!state.noArrow) {\n state.offset = getOffsetWithArrow(state.offset, arrowHeights[state.size]);\n }\n\n if (!state.target && state.openOnContext && state.contextTarget) {\n state.target = state.contextTarget;\n }\n\n const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePopper({\n align: state.align,\n position: state.position,\n target: state.target,\n coverTarget: state.coverTarget,\n offset: state.offset,\n arrowPadding: arrowHeights[state.size],\n });\n\n state.contentRef = contentRef;\n state.triggerRef = triggerRef;\n state.arrowRef = arrowRef;\n\n return state;\n}\n"]}
@@ -1,6 +0,0 @@
1
- import * as React from 'react';
2
- import { PopoverSurfaceProps } from './PopoverSurface.types';
3
- /**
4
- * PopoverSurface component renders react children in a positioned box
5
- */
6
- export declare const PopoverSurface: React.ForwardRefExoticComponent<PopoverSurfaceProps & React.RefAttributes<HTMLElement>>;
@@ -1,15 +0,0 @@
1
- define(["require", "exports", "react", "./usePopoverSurface", "./renderPopoverSurface", "./usePopoverSurfaceStyles"], function (require, exports, React, usePopoverSurface_1, renderPopoverSurface_1, usePopoverSurfaceStyles_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.PopoverSurface = void 0;
5
- /**
6
- * PopoverSurface component renders react children in a positioned box
7
- */
8
- exports.PopoverSurface = React.forwardRef(function (props, ref) {
9
- var state = usePopoverSurface_1.usePopoverSurface(props, ref);
10
- usePopoverSurfaceStyles_1.usePopoverSurfaceStyles(state);
11
- return renderPopoverSurface_1.renderPopoverSurface(state);
12
- });
13
- exports.PopoverSurface.displayName = 'PopoverSurface';
14
- });
15
- //# sourceMappingURL=PopoverSurface.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"PopoverSurface.js","sourceRoot":"../src/","sources":["components/PopoverSurface/PopoverSurface.tsx"],"names":[],"mappings":";;;;IAMA;;OAEG;IACU,QAAA,cAAc,GAAG,KAAK,CAAC,UAAU,CAAmC,UAAC,KAAK,EAAE,GAAG;QAC1F,IAAM,KAAK,GAAG,qCAAiB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAE5C,iDAAuB,CAAC,KAAK,CAAC,CAAC;QAC/B,OAAO,2CAAoB,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,sBAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["import * as React from 'react';\nimport { usePopoverSurface } from './usePopoverSurface';\nimport { PopoverSurfaceProps } from './PopoverSurface.types';\nimport { renderPopoverSurface } from './renderPopoverSurface';\nimport { usePopoverSurfaceStyles } from './usePopoverSurfaceStyles';\n\n/**\n * PopoverSurface component renders react children in a positioned box\n */\nexport const PopoverSurface = React.forwardRef<HTMLElement, PopoverSurfaceProps>((props, ref) => {\n const state = usePopoverSurface(props, ref);\n\n usePopoverSurfaceStyles(state);\n return renderPopoverSurface(state);\n});\n\nPopoverSurface.displayName = 'PopoverSurface';\n"]}
@@ -1,30 +0,0 @@
1
- import * as React from 'react';
2
- import { ComponentProps, ComponentState } from '@fluentui/react-utilities';
3
- import { PopoverContextValue } from '../../popoverContext';
4
- /**
5
- * PopoverSurface Props
6
- */
7
- export interface PopoverSurfaceProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {
8
- }
9
- /**
10
- * Names of the shorthand properties in PopoverSurfaceProps
11
- */
12
- export declare type PopoverSurfaceShorthandProps = never;
13
- /**
14
- * Names of PopoverSurfaceProps that have a default value in usePopoverSurface
15
- */
16
- export declare type PopoverSurfaceDefaultedProps = never;
17
- /**
18
- * PopoverSurface State
19
- */
20
- export interface PopoverSurfaceState extends ComponentState<PopoverSurfaceProps, PopoverSurfaceShorthandProps, PopoverSurfaceDefaultedProps>, Pick<PopoverContextValue, 'open' | 'mountNode' | 'noArrow' | 'size' | 'brand' | 'inverted'> {
21
- ref: React.Ref<HTMLElement>;
22
- /**
23
- * Ref to the arrow element
24
- */
25
- arrowRef?: React.Ref<HTMLDivElement>;
26
- /**
27
- * CSS class for the arrow element
28
- */
29
- arrowClassName?: string;
30
- }
@@ -1,5 +0,0 @@
1
- define(["require", "exports"], function (require, exports) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- });
5
- //# sourceMappingURL=PopoverSurface.types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"PopoverSurface.types.js","sourceRoot":"../src/","sources":["components/PopoverSurface/PopoverSurface.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport { PopoverContextValue } from '../../popoverContext';\n\n/**\n * PopoverSurface Props\n */\nexport interface PopoverSurfaceProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {}\n\n/**\n * Names of the shorthand properties in PopoverSurfaceProps\n */\nexport type PopoverSurfaceShorthandProps = never;\n\n/**\n * Names of PopoverSurfaceProps that have a default value in usePopoverSurface\n */\nexport type PopoverSurfaceDefaultedProps = never;\n\n/**\n * PopoverSurface State\n */\nexport interface PopoverSurfaceState\n extends ComponentState<PopoverSurfaceProps, PopoverSurfaceShorthandProps, PopoverSurfaceDefaultedProps>,\n Pick<PopoverContextValue, 'open' | 'mountNode' | 'noArrow' | 'size' | 'brand' | 'inverted'> {\n ref: React.Ref<HTMLElement>;\n /**\n * Ref to the arrow element\n */\n arrowRef?: React.Ref<HTMLDivElement>;\n\n /**\n * CSS class for the arrow element\n */\n arrowClassName?: string;\n}\n"]}
@@ -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,10 +0,0 @@
1
- define(["require", "exports", "tslib", "./PopoverSurface", "./PopoverSurface.types", "./renderPopoverSurface", "./usePopoverSurface", "./usePopoverSurfaceStyles"], function (require, exports, tslib_1, PopoverSurface_1, PopoverSurface_types_1, renderPopoverSurface_1, usePopoverSurface_1, usePopoverSurfaceStyles_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- tslib_1.__exportStar(PopoverSurface_1, exports);
5
- tslib_1.__exportStar(PopoverSurface_types_1, exports);
6
- tslib_1.__exportStar(renderPopoverSurface_1, exports);
7
- tslib_1.__exportStar(usePopoverSurface_1, exports);
8
- tslib_1.__exportStar(usePopoverSurfaceStyles_1, exports);
9
- });
10
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/PopoverSurface/index.ts"],"names":[],"mappings":";;;IAAA,gDAAiC;IACjC,sDAAuC;IACvC,sDAAuC;IACvC,mDAAoC;IACpC,yDAA0C","sourcesContent":["export * from './PopoverSurface';\nexport * from './PopoverSurface.types';\nexport * from './renderPopoverSurface';\nexport * from './usePopoverSurface';\nexport * from './usePopoverSurfaceStyles';\n"]}
@@ -1,5 +0,0 @@
1
- import { PopoverSurfaceState } from './PopoverSurface.types';
2
- /**
3
- * Render the final JSX of PopoverSurface
4
- */
5
- export declare const renderPopoverSurface: (state: PopoverSurfaceState) => JSX.Element | null;
@@ -1,21 +0,0 @@
1
- define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@fluentui/react-portal"], function (require, exports, tslib_1, React, react_utilities_1, react_portal_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.renderPopoverSurface = void 0;
5
- /**
6
- * Render the final JSX of PopoverSurface
7
- */
8
- var renderPopoverSurface = function (state) {
9
- var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
10
- // TODO should hidden Popovers be supported ?
11
- if (!state.open) {
12
- return null;
13
- }
14
- return (React.createElement(react_portal_1.Portal, { mountNode: state.mountNode },
15
- React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
16
- !state.noArrow && React.createElement("div", { ref: state.arrowRef, className: state.arrowClassName }),
17
- state.children)));
18
- };
19
- exports.renderPopoverSurface = renderPopoverSurface;
20
- });
21
- //# sourceMappingURL=renderPopoverSurface.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"renderPopoverSurface.js","sourceRoot":"../src/","sources":["components/PopoverSurface/renderPopoverSurface.tsx"],"names":[],"mappings":";;;;IAKA;;OAEG;IACI,IAAM,oBAAoB,GAAG,UAAC,KAA0B;QACvD,IAAA,KAAuB,0BAAQ,CAAC,KAAK,CAAC,EAApC,KAAK,WAAA,EAAE,SAAS,eAAoB,CAAC;QAE7C,6CAA6C;QAC7C,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;YACf,OAAO,IAAI,CAAC;SACb;QAED,OAAO,CACL,oBAAC,qBAAM,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS;YAChC,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;gBAC3B,CAAC,KAAK,CAAC,OAAO,IAAI,6BAAK,GAAG,EAAE,KAAK,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,CAAC,cAAc,GAAI;gBAC/E,KAAK,CAAC,QAAQ,CACJ,CACN,CACV,CAAC;IACJ,CAAC,CAAC;IAhBW,QAAA,oBAAoB,wBAgB/B","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { Portal } from '@fluentui/react-portal';\nimport { PopoverSurfaceState } from './PopoverSurface.types';\n\n/**\n * Render the final JSX of PopoverSurface\n */\nexport const renderPopoverSurface = (state: PopoverSurfaceState) => {\n const { slots, slotProps } = getSlots(state);\n\n // TODO should hidden Popovers be supported ?\n if (!state.open) {\n return null;\n }\n\n return (\n <Portal mountNode={state.mountNode}>\n <slots.root {...slotProps.root}>\n {!state.noArrow && <div ref={state.arrowRef} className={state.arrowClassName} />}\n {state.children}\n </slots.root>\n </Portal>\n );\n};\n"]}
@@ -1,13 +0,0 @@
1
- import * as React from 'react';
2
- import { 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,
7
- * before being passed to renderPopoverSurface.
8
- *
9
- * @param props - props from this instance of PopoverSurface
10
- * @param ref - reference to root HTMLElement of PopoverSurface
11
- * @param defaultProps - (optional) default prop values provided by the implementing type
12
- */
13
- export declare const usePopoverSurface: (props: PopoverSurfaceProps, ref: React.Ref<HTMLElement>, defaultProps?: PopoverSurfaceProps | undefined) => PopoverSurfaceState;