@fluentui/react-positioning 9.5.13 → 9.6.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (132) hide show
  1. package/CHANGELOG.json +45 -1
  2. package/CHANGELOG.md +25 -2
  3. package/dist/index.d.ts +6 -1
  4. package/lib/constants.js +0 -1
  5. package/lib/constants.js.map +1 -1
  6. package/lib/createArrowStyles.js +47 -55
  7. package/lib/createArrowStyles.js.map +1 -1
  8. package/lib/createPositionManager.js +95 -108
  9. package/lib/createPositionManager.js.map +1 -1
  10. package/lib/createVirtualElementFromClick.js +18 -19
  11. package/lib/createVirtualElementFromClick.js.map +1 -1
  12. package/lib/index.js +0 -1
  13. package/lib/index.js.map +1 -1
  14. package/lib/middleware/coverTarget.js +26 -32
  15. package/lib/middleware/coverTarget.js.map +1 -1
  16. package/lib/middleware/flip.js +22 -32
  17. package/lib/middleware/flip.js.map +1 -1
  18. package/lib/middleware/index.js +0 -1
  19. package/lib/middleware/index.js.map +1 -1
  20. package/lib/middleware/intersecting.js +16 -17
  21. package/lib/middleware/intersecting.js.map +1 -1
  22. package/lib/middleware/maxSize.js +25 -34
  23. package/lib/middleware/maxSize.js.map +1 -1
  24. package/lib/middleware/offset.js +3 -5
  25. package/lib/middleware/offset.js.map +1 -1
  26. package/lib/middleware/shift.js +21 -30
  27. package/lib/middleware/shift.js.map +1 -1
  28. package/lib/types.js +0 -1
  29. package/lib/types.js.map +1 -1
  30. package/lib/usePositioning.js +188 -154
  31. package/lib/usePositioning.js.map +1 -1
  32. package/lib/usePositioningMouseTarget.js +24 -23
  33. package/lib/usePositioningMouseTarget.js.map +1 -1
  34. package/lib/utils/debounce.js +13 -14
  35. package/lib/utils/debounce.js.map +1 -1
  36. package/lib/utils/fromFloatingUIPlacement.js +23 -28
  37. package/lib/utils/fromFloatingUIPlacement.js.map +1 -1
  38. package/lib/utils/getBoundary.js +14 -16
  39. package/lib/utils/getBoundary.js.map +1 -1
  40. package/lib/utils/getFloatingUIOffset.js +16 -27
  41. package/lib/utils/getFloatingUIOffset.js.map +1 -1
  42. package/lib/utils/getReactFiberFromNode.js +36 -37
  43. package/lib/utils/getReactFiberFromNode.js.map +1 -1
  44. package/lib/utils/getScrollParent.js +35 -42
  45. package/lib/utils/getScrollParent.js.map +1 -1
  46. package/lib/utils/hasAutoFocusFilter.js +9 -11
  47. package/lib/utils/hasAutoFocusFilter.js.map +1 -1
  48. package/lib/utils/index.js +0 -1
  49. package/lib/utils/index.js.map +1 -1
  50. package/lib/utils/mergeArrowOffset.js +24 -25
  51. package/lib/utils/mergeArrowOffset.js.map +1 -1
  52. package/lib/utils/parseFloatingUIPlacement.js +6 -7
  53. package/lib/utils/parseFloatingUIPlacement.js.map +1 -1
  54. package/lib/utils/resolvePositioningShorthand.js +55 -56
  55. package/lib/utils/resolvePositioningShorthand.js.map +1 -1
  56. package/lib/utils/toFloatingUIPadding.js +16 -21
  57. package/lib/utils/toFloatingUIPadding.js.map +1 -1
  58. package/lib/utils/toFloatingUIPlacement.js +25 -27
  59. package/lib/utils/toFloatingUIPlacement.js.map +1 -1
  60. package/lib/utils/toggleScrollListener.js +12 -14
  61. package/lib/utils/toggleScrollListener.js.map +1 -1
  62. package/lib/utils/useCallbackRef.js +30 -32
  63. package/lib/utils/useCallbackRef.js.map +1 -1
  64. package/lib/utils/writeArrowUpdates.js +10 -17
  65. package/lib/utils/writeArrowUpdates.js.map +1 -1
  66. package/lib/utils/writeContainerupdates.js +39 -39
  67. package/lib/utils/writeContainerupdates.js.map +1 -1
  68. package/lib-commonjs/constants.js +1 -3
  69. package/lib-commonjs/constants.js.map +1 -1
  70. package/lib-commonjs/createArrowStyles.js +1 -3
  71. package/lib-commonjs/createArrowStyles.js.map +1 -1
  72. package/lib-commonjs/createPositionManager.js +4 -5
  73. package/lib-commonjs/createPositionManager.js.map +1 -1
  74. package/lib-commonjs/createVirtualElementFromClick.js +1 -3
  75. package/lib-commonjs/createVirtualElementFromClick.js.map +1 -1
  76. package/lib-commonjs/index.js +0 -3
  77. package/lib-commonjs/index.js.map +1 -1
  78. package/lib-commonjs/middleware/coverTarget.js +1 -3
  79. package/lib-commonjs/middleware/coverTarget.js.map +1 -1
  80. package/lib-commonjs/middleware/flip.js +1 -3
  81. package/lib-commonjs/middleware/flip.js.map +1 -1
  82. package/lib-commonjs/middleware/index.js +0 -3
  83. package/lib-commonjs/middleware/index.js.map +1 -1
  84. package/lib-commonjs/middleware/intersecting.js +1 -3
  85. package/lib-commonjs/middleware/intersecting.js.map +1 -1
  86. package/lib-commonjs/middleware/maxSize.js +1 -3
  87. package/lib-commonjs/middleware/maxSize.js.map +1 -1
  88. package/lib-commonjs/middleware/offset.js +1 -3
  89. package/lib-commonjs/middleware/offset.js.map +1 -1
  90. package/lib-commonjs/middleware/shift.js +1 -3
  91. package/lib-commonjs/middleware/shift.js.map +1 -1
  92. package/lib-commonjs/types.js +0 -3
  93. package/lib-commonjs/types.js.map +1 -1
  94. package/lib-commonjs/usePositioning.js +6 -6
  95. package/lib-commonjs/usePositioning.js.map +1 -1
  96. package/lib-commonjs/usePositioningMouseTarget.js +1 -3
  97. package/lib-commonjs/usePositioningMouseTarget.js.map +1 -1
  98. package/lib-commonjs/utils/debounce.js +1 -3
  99. package/lib-commonjs/utils/debounce.js.map +1 -1
  100. package/lib-commonjs/utils/fromFloatingUIPlacement.js +1 -3
  101. package/lib-commonjs/utils/fromFloatingUIPlacement.js.map +1 -1
  102. package/lib-commonjs/utils/getBoundary.js +1 -3
  103. package/lib-commonjs/utils/getBoundary.js.map +1 -1
  104. package/lib-commonjs/utils/getFloatingUIOffset.js +1 -3
  105. package/lib-commonjs/utils/getFloatingUIOffset.js.map +1 -1
  106. package/lib-commonjs/utils/getReactFiberFromNode.js +1 -3
  107. package/lib-commonjs/utils/getReactFiberFromNode.js.map +1 -1
  108. package/lib-commonjs/utils/getScrollParent.js +1 -3
  109. package/lib-commonjs/utils/getScrollParent.js.map +1 -1
  110. package/lib-commonjs/utils/hasAutoFocusFilter.js +1 -3
  111. package/lib-commonjs/utils/hasAutoFocusFilter.js.map +1 -1
  112. package/lib-commonjs/utils/index.js +0 -3
  113. package/lib-commonjs/utils/index.js.map +1 -1
  114. package/lib-commonjs/utils/mergeArrowOffset.js +1 -3
  115. package/lib-commonjs/utils/mergeArrowOffset.js.map +1 -1
  116. package/lib-commonjs/utils/parseFloatingUIPlacement.js +1 -3
  117. package/lib-commonjs/utils/parseFloatingUIPlacement.js.map +1 -1
  118. package/lib-commonjs/utils/resolvePositioningShorthand.js +1 -3
  119. package/lib-commonjs/utils/resolvePositioningShorthand.js.map +1 -1
  120. package/lib-commonjs/utils/toFloatingUIPadding.js +1 -3
  121. package/lib-commonjs/utils/toFloatingUIPadding.js.map +1 -1
  122. package/lib-commonjs/utils/toFloatingUIPlacement.js +1 -3
  123. package/lib-commonjs/utils/toFloatingUIPlacement.js.map +1 -1
  124. package/lib-commonjs/utils/toggleScrollListener.js +1 -3
  125. package/lib-commonjs/utils/toggleScrollListener.js.map +1 -1
  126. package/lib-commonjs/utils/useCallbackRef.js +1 -3
  127. package/lib-commonjs/utils/useCallbackRef.js.map +1 -1
  128. package/lib-commonjs/utils/writeArrowUpdates.js +1 -3
  129. package/lib-commonjs/utils/writeArrowUpdates.js.map +1 -1
  130. package/lib-commonjs/utils/writeContainerupdates.js +12 -5
  131. package/lib-commonjs/utils/writeContainerupdates.js.map +1 -1
  132. package/package.json +3 -3
package/CHANGELOG.json CHANGED
@@ -2,7 +2,51 @@
2
2
  "name": "@fluentui/react-positioning",
3
3
  "entries": [
4
4
  {
5
- "date": "Wed, 24 May 2023 20:42:43 GMT",
5
+ "date": "Wed, 31 May 2023 06:43:00 GMT",
6
+ "tag": "@fluentui/react-positioning_v9.6.0",
7
+ "version": "9.6.0",
8
+ "comments": {
9
+ "minor": [
10
+ {
11
+ "author": "yiliu9@microsoft.com",
12
+ "package": "@fluentui/react-positioning",
13
+ "commit": "e1ca88c0a92d07dced9c668dd11585c0c4866919",
14
+ "comment": "Add new optional useTransform parameter to allow disabling transform for positioning"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-positioning",
19
+ "comment": "Bump @fluentui/react-utilities to v9.9.2",
20
+ "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
21
+ }
22
+ ],
23
+ "patch": [
24
+ {
25
+ "author": "seanmonahan@microsoft.com",
26
+ "package": "@fluentui/react-positioning",
27
+ "commit": "d640b972d7ac86bfb76ae6c6329f12cdd33b3b7c",
28
+ "comment": "chore: Update Griffel to v1.5.7."
29
+ }
30
+ ]
31
+ }
32
+ },
33
+ {
34
+ "date": "Thu, 25 May 2023 10:00:48 GMT",
35
+ "tag": "@fluentui/react-positioning_v9.5.14",
36
+ "version": "9.5.14",
37
+ "comments": {
38
+ "patch": [
39
+ {
40
+ "author": "beachball",
41
+ "package": "@fluentui/react-positioning",
42
+ "comment": "Bump @fluentui/react-utilities to v9.9.1",
43
+ "commit": "8f7c1b7591b3e665ae39e1b22ab0f0b28fb795c4"
44
+ }
45
+ ]
46
+ }
47
+ },
48
+ {
49
+ "date": "Wed, 24 May 2023 20:45:31 GMT",
6
50
  "tag": "@fluentui/react-positioning_v9.5.13",
7
51
  "version": "9.5.13",
8
52
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,35 @@
1
1
  # Change Log - @fluentui/react-positioning
2
2
 
3
- This log was last generated on Wed, 24 May 2023 20:42:43 GMT and should not be manually modified.
3
+ This log was last generated on Wed, 31 May 2023 06:43:00 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.6.0)
8
+
9
+ Wed, 31 May 2023 06:43:00 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.5.14..@fluentui/react-positioning_v9.6.0)
11
+
12
+ ### Minor changes
13
+
14
+ - Add new optional useTransform parameter to allow disabling transform for positioning ([PR #27929](https://github.com/microsoft/fluentui/pull/27929) by yiliu9@microsoft.com)
15
+ - Bump @fluentui/react-utilities to v9.9.2 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
16
+
17
+ ### Patches
18
+
19
+ - chore: Update Griffel to v1.5.7. ([PR #27925](https://github.com/microsoft/fluentui/pull/27925) by seanmonahan@microsoft.com)
20
+
21
+ ## [9.5.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.5.14)
22
+
23
+ Thu, 25 May 2023 10:00:48 GMT
24
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.5.13..@fluentui/react-positioning_v9.5.14)
25
+
26
+ ### Patches
27
+
28
+ - Bump @fluentui/react-utilities to v9.9.1 ([PR #27988](https://github.com/microsoft/fluentui/pull/27988) by beachball)
29
+
7
30
  ## [9.5.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.5.13)
8
31
 
9
- Wed, 24 May 2023 20:42:43 GMT
32
+ Wed, 24 May 2023 20:45:31 GMT
10
33
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.5.12..@fluentui/react-positioning_v9.5.13)
11
34
 
12
35
  ### Patches
package/dist/index.d.ts CHANGED
@@ -193,9 +193,14 @@ declare interface PositioningOptions {
193
193
  * its boundaries, use a specified fallback positions.
194
194
  */
195
195
  fallbackPositions?: PositioningShorthandValue[];
196
+ /**
197
+ * Modifies whether popover is positioned using transform.
198
+ * @default true
199
+ */
200
+ useTransform?: boolean;
196
201
  }
197
202
 
198
- export declare interface PositioningProps extends Pick<PositioningOptions, 'align' | 'flipBoundary' | 'overflowBoundary' | 'overflowBoundaryPadding' | 'position' | 'offset' | 'arrowPadding' | 'autoSize' | 'coverTarget' | 'pinned'> {
203
+ export declare interface PositioningProps extends Pick<PositioningOptions, 'align' | 'flipBoundary' | 'overflowBoundary' | 'overflowBoundaryPadding' | 'position' | 'offset' | 'arrowPadding' | 'autoSize' | 'coverTarget' | 'pinned' | 'useTransform'> {
199
204
  /** An imperative handle to Popper methods. */
200
205
  positioningRef?: React_2.Ref<PositioningImperativeRef>;
201
206
  /**
package/lib/constants.js CHANGED
@@ -2,4 +2,3 @@ export const DATA_POSITIONING_INTERSECTING = 'data-popper-is-intersecting';
2
2
  export const DATA_POSITIONING_ESCAPED = 'data-popper-escaped';
3
3
  export const DATA_POSITIONING_HIDDEN = 'data-popper-reference-hidden';
4
4
  export const DATA_POSITIONING_PLACEMENT = 'data-popper-placement';
5
- //# sourceMappingURL=constants.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["DATA_POSITIONING_INTERSECTING","DATA_POSITIONING_ESCAPED","DATA_POSITIONING_HIDDEN","DATA_POSITIONING_PLACEMENT"],"sources":["../src/constants.ts"],"sourcesContent":["export const DATA_POSITIONING_INTERSECTING = 'data-popper-is-intersecting';\nexport const DATA_POSITIONING_ESCAPED = 'data-popper-escaped';\nexport const DATA_POSITIONING_HIDDEN = 'data-popper-reference-hidden';\nexport const DATA_POSITIONING_PLACEMENT = 'data-popper-placement';\n"],"mappings":"AAAA,OAAO,MAAMA,6BAAA,GAAgC;AAC7C,OAAO,MAAMC,wBAAA,GAA2B;AACxC,OAAO,MAAMC,uBAAA,GAA0B;AACvC,OAAO,MAAMC,0BAAA,GAA6B"}
1
+ {"version":3,"sources":["constants.ts"],"sourcesContent":["export const DATA_POSITIONING_INTERSECTING = 'data-popper-is-intersecting';\nexport const DATA_POSITIONING_ESCAPED = 'data-popper-escaped';\nexport const DATA_POSITIONING_HIDDEN = 'data-popper-reference-hidden';\nexport const DATA_POSITIONING_PLACEMENT = 'data-popper-placement';\n"],"names":["DATA_POSITIONING_INTERSECTING","DATA_POSITIONING_ESCAPED","DATA_POSITIONING_HIDDEN","DATA_POSITIONING_PLACEMENT"],"mappings":"AAAA,OAAO,MAAMA,gCAAgC,8BAA8B;AAC3E,OAAO,MAAMC,2BAA2B,sBAAsB;AAC9D,OAAO,MAAMC,0BAA0B,+BAA+B;AACtE,OAAO,MAAMC,6BAA6B,wBAAwB"}
@@ -22,51 +22,45 @@ import { tokens } from '@fluentui/react-theme';
22
22
  * state.mediumArrow && styles.mediumArrow,
23
23
  * )
24
24
  * ```
25
- */
26
- export function createArrowStyles(options) {
27
- const {
28
- arrowHeight,
29
- borderWidth = '1px',
30
- borderStyle = 'solid',
31
- borderColor = tokens.colorTransparentStroke
32
- } = options;
33
- return {
34
- position: 'absolute',
35
- backgroundColor: 'inherit',
36
- visibility: 'hidden',
37
- zIndex: -1,
38
- ...(arrowHeight && createArrowHeightStyles(arrowHeight)),
39
- '::before': {
40
- content: '""',
41
- visibility: 'visible',
42
- position: 'absolute',
43
- boxSizing: 'border-box',
44
- width: 'inherit',
45
- height: 'inherit',
46
- backgroundColor: 'inherit',
47
- ...shorthands.borderRight(`${borderWidth} /* @noflip */`, `${borderStyle} /* @noflip */`, `${borderColor} /* @noflip */`),
48
- ...shorthands.borderBottom(borderWidth, borderStyle, borderColor),
49
- borderBottomRightRadius: tokens.borderRadiusSmall,
50
- transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)'
51
- },
52
- // Popper sets data-popper-placement on the root element, which is used to align the arrow
53
- ':global([data-popper-placement^="top"])': {
54
- bottom: `-${borderWidth}`,
55
- '--angle': '0'
56
- },
57
- ':global([data-popper-placement^="right"])': {
58
- left: `-${borderWidth} /* @noflip */`,
59
- '--angle': '90deg'
60
- },
61
- ':global([data-popper-placement^="bottom"])': {
62
- top: `-${borderWidth}`,
63
- '--angle': '180deg'
64
- },
65
- ':global([data-popper-placement^="left"])': {
66
- right: `-${borderWidth} /* @noflip */`,
67
- '--angle': '270deg'
68
- }
69
- };
25
+ */ export function createArrowStyles(options) {
26
+ const { arrowHeight , borderWidth ='1px' , borderStyle ='solid' , borderColor =tokens.colorTransparentStroke } = options;
27
+ return {
28
+ position: 'absolute',
29
+ backgroundColor: 'inherit',
30
+ visibility: 'hidden',
31
+ zIndex: -1,
32
+ ...arrowHeight && createArrowHeightStyles(arrowHeight),
33
+ '::before': {
34
+ content: '""',
35
+ visibility: 'visible',
36
+ position: 'absolute',
37
+ boxSizing: 'border-box',
38
+ width: 'inherit',
39
+ height: 'inherit',
40
+ backgroundColor: 'inherit',
41
+ ...shorthands.borderRight(`${borderWidth} /* @noflip */`, `${borderStyle} /* @noflip */`, `${borderColor} /* @noflip */`),
42
+ ...shorthands.borderBottom(borderWidth, borderStyle, borderColor),
43
+ borderBottomRightRadius: tokens.borderRadiusSmall,
44
+ transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)'
45
+ },
46
+ // Popper sets data-popper-placement on the root element, which is used to align the arrow
47
+ ':global([data-popper-placement^="top"])': {
48
+ bottom: `-${borderWidth}`,
49
+ '--angle': '0'
50
+ },
51
+ ':global([data-popper-placement^="right"])': {
52
+ left: `-${borderWidth} /* @noflip */`,
53
+ '--angle': '90deg'
54
+ },
55
+ ':global([data-popper-placement^="bottom"])': {
56
+ top: `-${borderWidth}`,
57
+ '--angle': '180deg'
58
+ },
59
+ ':global([data-popper-placement^="left"])': {
60
+ right: `-${borderWidth} /* @noflip */`,
61
+ '--angle': '270deg'
62
+ }
63
+ };
70
64
  }
71
65
  /**
72
66
  * @internal
@@ -74,14 +68,12 @@ export function createArrowStyles(options) {
74
68
  *
75
69
  * Use this when you need to create classes for several different arrow sizes. If you only need a
76
70
  * constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.
77
- */
78
- export function createArrowHeightStyles(arrowHeight) {
79
- // The arrow is a square rotated 45 degrees to have its bottom and right edges form a right triangle.
80
- // Multiply the triangle's height by sqrt(2) to get length of its edges.
81
- const edgeLength = `${1.414 * arrowHeight}px`;
82
- return {
83
- width: edgeLength,
84
- height: edgeLength
85
- };
71
+ */ export function createArrowHeightStyles(arrowHeight) {
72
+ // The arrow is a square rotated 45 degrees to have its bottom and right edges form a right triangle.
73
+ // Multiply the triangle's height by sqrt(2) to get length of its edges.
74
+ const edgeLength = `${1.414 * arrowHeight}px`;
75
+ return {
76
+ width: edgeLength,
77
+ height: edgeLength
78
+ };
86
79
  }
87
- //# sourceMappingURL=createArrowStyles.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["shorthands","tokens","createArrowStyles","options","arrowHeight","borderWidth","borderStyle","borderColor","colorTransparentStroke","position","backgroundColor","visibility","zIndex","createArrowHeightStyles","content","boxSizing","width","height","borderRight","borderBottom","borderBottomRightRadius","borderRadiusSmall","transform","bottom","left","top","right","edgeLength"],"sources":["../src/createArrowStyles.ts"],"sourcesContent":["import { shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { GriffelStyle } from '@griffel/react';\n\n/**\n * @internal\n * Options parameter for the createArrowStyles function\n */\nexport type CreateArrowStylesOptions = {\n /**\n * The height of the arrow from the base to the tip, in px. The base width of the arrow is always twice its height.\n *\n * This can be undefined to leave out the arrow size styles. You must then add styles created by\n * createArrowHeightStyles to set the arrow's size correctly. This can be useful if the arrow can be different sizes.\n */\n arrowHeight: number | undefined;\n\n /**\n * The borderWidth of the arrow. Should be the same borderWidth as the parent element.\n *\n * @defaultvalue 1px\n */\n borderWidth?: GriffelStyle['borderBottomWidth'];\n\n /**\n * The borderStyle for the arrow. Should be the same borderStyle as the parent element.\n *\n * @defaultvalue solid\n */\n borderStyle?: GriffelStyle['borderBottomStyle'];\n\n /**\n * The borderColor of the arrow. Should be the same borderColor as the parent element.\n *\n * @defaultvalue tokens.colorTransparentStroke\n */\n borderColor?: GriffelStyle['borderBottomColor'];\n};\n\n/**\n * @internal\n * Helper that creates a makeStyles rule for an arrow element.\n * For runtime arrow size toggling simply create extra classnames to apply to the arrow element\n *\n * ```ts\n * makeStyles({\n * arrowWithSize: createArrowStyles({ arrowHeight: 6 }),\n *\n * arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),\n * mediumArrow: createArrowHeightStyles(4),\n * smallArrow: createArrowHeightStyles(2),\n * })\n * ...\n *\n * state.arrowWithSize.className = styles.arrowWithSize;\n * state.arrowWithoutSize.className = mergeClasses(\n * styles.arrowWithoutSize,\n * state.smallArrow && styles.smallArrow,\n * state.mediumArrow && styles.mediumArrow,\n * )\n * ```\n */\nexport function createArrowStyles(options: CreateArrowStylesOptions): GriffelStyle {\n const {\n arrowHeight,\n borderWidth = '1px',\n borderStyle = 'solid',\n borderColor = tokens.colorTransparentStroke,\n } = options;\n\n return {\n position: 'absolute',\n backgroundColor: 'inherit',\n visibility: 'hidden',\n zIndex: -1,\n\n ...(arrowHeight && createArrowHeightStyles(arrowHeight)),\n\n '::before': {\n content: '\"\"',\n visibility: 'visible',\n position: 'absolute',\n boxSizing: 'border-box',\n width: 'inherit',\n height: 'inherit',\n backgroundColor: 'inherit',\n ...shorthands.borderRight(\n `${borderWidth} /* @noflip */`,\n `${borderStyle} /* @noflip */`,\n `${borderColor} /* @noflip */`,\n ),\n ...shorthands.borderBottom(borderWidth, borderStyle, borderColor),\n borderBottomRightRadius: tokens.borderRadiusSmall,\n transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)',\n },\n\n // Popper sets data-popper-placement on the root element, which is used to align the arrow\n ':global([data-popper-placement^=\"top\"])': {\n bottom: `-${borderWidth}`,\n '--angle': '0',\n },\n ':global([data-popper-placement^=\"right\"])': {\n left: `-${borderWidth} /* @noflip */`,\n '--angle': '90deg',\n },\n ':global([data-popper-placement^=\"bottom\"])': {\n top: `-${borderWidth}`,\n '--angle': '180deg',\n },\n ':global([data-popper-placement^=\"left\"])': {\n right: `-${borderWidth} /* @noflip */`,\n '--angle': '270deg',\n },\n };\n}\n\n/**\n * @internal\n * Creates CSS styles to size the arrow created by createArrowStyles to the given height.\n *\n * Use this when you need to create classes for several different arrow sizes. If you only need a\n * constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.\n */\nexport function createArrowHeightStyles(arrowHeight: number) {\n // The arrow is a square rotated 45 degrees to have its bottom and right edges form a right triangle.\n // Multiply the triangle's height by sqrt(2) to get length of its edges.\n const edgeLength = `${1.414 * arrowHeight}px`;\n return { width: edgeLength, height: edgeLength };\n}\n"],"mappings":"AAAA,SAASA,UAAU,QAAQ;AAC3B,SAASC,MAAM,QAAQ;AAsCvB;;;;;;;;;;;;;;;;;;;;;;;AAuBA,OAAO,SAASC,kBAAkBC,OAAiC,EAAgB;EACjF,MAAM;IACJC,WAAA;IACAC,WAAA,GAAc;IACdC,WAAA,GAAc;IACdC,WAAA,GAAcN,MAAA,CAAOO;EAAsB,CAC5C,GAAGL,OAAA;EAEJ,OAAO;IACLM,QAAA,EAAU;IACVC,eAAA,EAAiB;IACjBC,UAAA,EAAY;IACZC,MAAA,EAAQ,CAAC;IAET,IAAIR,WAAA,IAAeS,uBAAA,CAAwBT,WAAA,CAAY;IAEvD,YAAY;MACVU,OAAA,EAAS;MACTH,UAAA,EAAY;MACZF,QAAA,EAAU;MACVM,SAAA,EAAW;MACXC,KAAA,EAAO;MACPC,MAAA,EAAQ;MACRP,eAAA,EAAiB;MACjB,GAAGV,UAAA,CAAWkB,WAAW,CACtB,GAAEb,WAAY,gBAAe,EAC7B,GAAEC,WAAY,gBAAe,EAC7B,GAAEC,WAAY,gBAAe,CAC/B;MACD,GAAGP,UAAA,CAAWmB,YAAY,CAACd,WAAA,EAAaC,WAAA,EAAaC,WAAA,CAAY;MACjEa,uBAAA,EAAyBnB,MAAA,CAAOoB,iBAAiB;MACjDC,SAAA,EAAW;IACb;IAEA;IACA,2CAA2C;MACzCC,MAAA,EAAS,IAAGlB,WAAY,EAAC;MACzB,WAAW;IACb;IACA,6CAA6C;MAC3CmB,IAAA,EAAO,IAAGnB,WAAY,gBAAe;MACrC,WAAW;IACb;IACA,8CAA8C;MAC5CoB,GAAA,EAAM,IAAGpB,WAAY,EAAC;MACtB,WAAW;IACb;IACA,4CAA4C;MAC1CqB,KAAA,EAAQ,IAAGrB,WAAY,gBAAe;MACtC,WAAW;IACb;EACF;AACF;AAEA;;;;;;;AAOA,OAAO,SAASQ,wBAAwBT,WAAmB,EAAE;EAC3D;EACA;EACA,MAAMuB,UAAA,GAAc,GAAE,QAAQvB,WAAY,IAAG;EAC7C,OAAO;IAAEY,KAAA,EAAOW,UAAA;IAAYV,MAAA,EAAQU;EAAW;AACjD"}
1
+ {"version":3,"sources":["createArrowStyles.ts"],"sourcesContent":["import { shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { GriffelStyle } from '@griffel/react';\n\n/**\n * @internal\n * Options parameter for the createArrowStyles function\n */\nexport type CreateArrowStylesOptions = {\n /**\n * The height of the arrow from the base to the tip, in px. The base width of the arrow is always twice its height.\n *\n * This can be undefined to leave out the arrow size styles. You must then add styles created by\n * createArrowHeightStyles to set the arrow's size correctly. This can be useful if the arrow can be different sizes.\n */\n arrowHeight: number | undefined;\n\n /**\n * The borderWidth of the arrow. Should be the same borderWidth as the parent element.\n *\n * @defaultvalue 1px\n */\n borderWidth?: GriffelStyle['borderBottomWidth'];\n\n /**\n * The borderStyle for the arrow. Should be the same borderStyle as the parent element.\n *\n * @defaultvalue solid\n */\n borderStyle?: GriffelStyle['borderBottomStyle'];\n\n /**\n * The borderColor of the arrow. Should be the same borderColor as the parent element.\n *\n * @defaultvalue tokens.colorTransparentStroke\n */\n borderColor?: GriffelStyle['borderBottomColor'];\n};\n\n/**\n * @internal\n * Helper that creates a makeStyles rule for an arrow element.\n * For runtime arrow size toggling simply create extra classnames to apply to the arrow element\n *\n * ```ts\n * makeStyles({\n * arrowWithSize: createArrowStyles({ arrowHeight: 6 }),\n *\n * arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),\n * mediumArrow: createArrowHeightStyles(4),\n * smallArrow: createArrowHeightStyles(2),\n * })\n * ...\n *\n * state.arrowWithSize.className = styles.arrowWithSize;\n * state.arrowWithoutSize.className = mergeClasses(\n * styles.arrowWithoutSize,\n * state.smallArrow && styles.smallArrow,\n * state.mediumArrow && styles.mediumArrow,\n * )\n * ```\n */\nexport function createArrowStyles(options: CreateArrowStylesOptions): GriffelStyle {\n const {\n arrowHeight,\n borderWidth = '1px',\n borderStyle = 'solid',\n borderColor = tokens.colorTransparentStroke,\n } = options;\n\n return {\n position: 'absolute',\n backgroundColor: 'inherit',\n visibility: 'hidden',\n zIndex: -1,\n\n ...(arrowHeight && createArrowHeightStyles(arrowHeight)),\n\n '::before': {\n content: '\"\"',\n visibility: 'visible',\n position: 'absolute',\n boxSizing: 'border-box',\n width: 'inherit',\n height: 'inherit',\n backgroundColor: 'inherit',\n ...shorthands.borderRight(\n `${borderWidth} /* @noflip */`,\n `${borderStyle} /* @noflip */`,\n `${borderColor} /* @noflip */`,\n ),\n ...shorthands.borderBottom(borderWidth, borderStyle, borderColor),\n borderBottomRightRadius: tokens.borderRadiusSmall,\n transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)',\n },\n\n // Popper sets data-popper-placement on the root element, which is used to align the arrow\n ':global([data-popper-placement^=\"top\"])': {\n bottom: `-${borderWidth}`,\n '--angle': '0',\n },\n ':global([data-popper-placement^=\"right\"])': {\n left: `-${borderWidth} /* @noflip */`,\n '--angle': '90deg',\n },\n ':global([data-popper-placement^=\"bottom\"])': {\n top: `-${borderWidth}`,\n '--angle': '180deg',\n },\n ':global([data-popper-placement^=\"left\"])': {\n right: `-${borderWidth} /* @noflip */`,\n '--angle': '270deg',\n },\n };\n}\n\n/**\n * @internal\n * Creates CSS styles to size the arrow created by createArrowStyles to the given height.\n *\n * Use this when you need to create classes for several different arrow sizes. If you only need a\n * constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.\n */\nexport function createArrowHeightStyles(arrowHeight: number) {\n // The arrow is a square rotated 45 degrees to have its bottom and right edges form a right triangle.\n // Multiply the triangle's height by sqrt(2) to get length of its edges.\n const edgeLength = `${1.414 * arrowHeight}px`;\n return { width: edgeLength, height: edgeLength };\n}\n"],"names":["shorthands","tokens","createArrowStyles","options","arrowHeight","borderWidth","borderStyle","borderColor","colorTransparentStroke","position","backgroundColor","visibility","zIndex","createArrowHeightStyles","content","boxSizing","width","height","borderRight","borderBottom","borderBottomRightRadius","borderRadiusSmall","transform","bottom","left","top","right","edgeLength"],"mappings":"AAAA,SAASA,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,MAAM,QAAQ,wBAAwB;AAsC/C;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,SAASC,kBAAkBC,OAAiC,EAAgB;IACjF,MAAM,EACJC,YAAW,EACXC,aAAc,MAAK,EACnBC,aAAc,QAAO,EACrBC,aAAcN,OAAOO,sBAAsB,CAAA,EAC5C,GAAGL;IAEJ,OAAO;QACLM,UAAU;QACVC,iBAAiB;QACjBC,YAAY;QACZC,QAAQ,CAAC;QAET,GAAIR,eAAeS,wBAAwBT,YAAY;QAEvD,YAAY;YACVU,SAAS;YACTH,YAAY;YACZF,UAAU;YACVM,WAAW;YACXC,OAAO;YACPC,QAAQ;YACRP,iBAAiB;YACjB,GAAGV,WAAWkB,WAAW,CACvB,CAAC,EAAEb,YAAY,cAAc,CAAC,EAC9B,CAAC,EAAEC,YAAY,cAAc,CAAC,EAC9B,CAAC,EAAEC,YAAY,cAAc,CAAC,CAC/B;YACD,GAAGP,WAAWmB,YAAY,CAACd,aAAaC,aAAaC,YAAY;YACjEa,yBAAyBnB,OAAOoB,iBAAiB;YACjDC,WAAW;QACb;QAEA,0FAA0F;QAC1F,2CAA2C;YACzCC,QAAQ,CAAC,CAAC,EAAElB,YAAY,CAAC;YACzB,WAAW;QACb;QACA,6CAA6C;YAC3CmB,MAAM,CAAC,CAAC,EAAEnB,YAAY,cAAc,CAAC;YACrC,WAAW;QACb;QACA,8CAA8C;YAC5CoB,KAAK,CAAC,CAAC,EAAEpB,YAAY,CAAC;YACtB,WAAW;QACb;QACA,4CAA4C;YAC1CqB,OAAO,CAAC,CAAC,EAAErB,YAAY,cAAc,CAAC;YACtC,WAAW;QACb;IACF;AACF,CAAC;AAED;;;;;;CAMC,GACD,OAAO,SAASQ,wBAAwBT,WAAmB,EAAE;IAC3D,qGAAqG;IACrG,wEAAwE;IACxE,MAAMuB,aAAa,CAAC,EAAE,QAAQvB,YAAY,EAAE,CAAC;IAC7C,OAAO;QAAEY,OAAOW;QAAYV,QAAQU;IAAW;AACjD,CAAC"}
@@ -4,117 +4,104 @@ import { isHTMLElement } from '@fluentui/react-utilities';
4
4
  /**
5
5
  * @internal
6
6
  * @returns manager that handles positioning out of the react lifecycle
7
- */
8
- export function createPositionManager(options) {
9
- const {
10
- container,
11
- target,
12
- arrow,
13
- strategy,
14
- middleware,
15
- placement
16
- } = options;
17
- let isDestroyed = false;
18
- if (!target || !container) {
19
- return {
20
- updatePosition: () => undefined,
21
- dispose: () => undefined
22
- };
23
- }
24
- let isFirstUpdate = true;
25
- const scrollParents = new Set();
26
- const targetWindow = container.ownerDocument.defaultView;
27
- // When the container is first resolved, set position `fixed` to avoid scroll jumps.
28
- // Without this scroll jumps can occur when the element is rendered initially and receives focus
29
- Object.assign(container.style, {
30
- position: 'fixed',
31
- left: 0,
32
- top: 0,
33
- margin: 0
34
- });
35
- const forceUpdate = () => {
36
- // debounced update can still occur afterwards
37
- // early return to avoid memory leaks
38
- if (isDestroyed) {
39
- return;
40
- }
41
- if (isFirstUpdate) {
42
- scrollParents.add(getScrollParent(container));
43
- if (isHTMLElement(target)) {
44
- scrollParents.add(getScrollParent(target));
45
- }
46
- scrollParents.forEach(scrollParent => {
47
- scrollParent.addEventListener('scroll', updatePosition);
48
- });
49
- isFirstUpdate = false;
7
+ */ export function createPositionManager(options) {
8
+ const { container , target , arrow , strategy , middleware , placement , useTransform =true } = options;
9
+ let isDestroyed = false;
10
+ if (!target || !container) {
11
+ return {
12
+ updatePosition: ()=>undefined,
13
+ dispose: ()=>undefined
14
+ };
50
15
  }
16
+ let isFirstUpdate = true;
17
+ const scrollParents = new Set();
18
+ const targetWindow = container.ownerDocument.defaultView;
19
+ // When the container is first resolved, set position `fixed` to avoid scroll jumps.
20
+ // Without this scroll jumps can occur when the element is rendered initially and receives focus
51
21
  Object.assign(container.style, {
52
- position: strategy
22
+ position: 'fixed',
23
+ left: 0,
24
+ top: 0,
25
+ margin: 0
53
26
  });
54
- computePosition(target, container, {
55
- placement,
56
- middleware,
57
- strategy
58
- }).then(({
59
- x,
60
- y,
61
- middlewareData,
62
- placement: computedPlacement
63
- }) => {
64
- // Promise can still resolve after destruction
65
- // early return to avoid applying outdated position
66
- if (isDestroyed) {
67
- return;
68
- }
69
- writeArrowUpdates({
70
- arrow,
71
- middlewareData
72
- });
73
- writeContainerUpdates({
74
- container,
75
- middlewareData,
76
- placement: computedPlacement,
77
- coordinates: {
78
- x,
79
- y
80
- },
81
- lowPPI: ((targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.devicePixelRatio) || 1) <= 1,
82
- strategy
83
- });
84
- }).catch(err => {
85
- // https://github.com/floating-ui/floating-ui/issues/1845
86
- // FIXME for node > 14
87
- // node 15 introduces promise rejection which means that any components
88
- // tests need to be `it('', async () => {})` otherwise there can be race conditions with
89
- // JSDOM being torn down before this promise is resolved so globals like `window` and `document` don't exist
90
- // Unless all tests that ever use `usePositioning` are turned into async tests, any logging during testing
91
- // will actually be counter productive
92
- if (process.env.NODE_ENV === 'development') {
93
- // eslint-disable-next-line no-console
94
- console.error('[usePositioning]: Failed to calculate position', err);
95
- }
96
- });
97
- };
98
- const updatePosition = debounce(() => forceUpdate());
99
- const dispose = () => {
100
- isDestroyed = true;
27
+ const forceUpdate = ()=>{
28
+ // debounced update can still occur afterwards
29
+ // early return to avoid memory leaks
30
+ if (isDestroyed) {
31
+ return;
32
+ }
33
+ if (isFirstUpdate) {
34
+ scrollParents.add(getScrollParent(container));
35
+ if (isHTMLElement(target)) {
36
+ scrollParents.add(getScrollParent(target));
37
+ }
38
+ scrollParents.forEach((scrollParent)=>{
39
+ scrollParent.addEventListener('scroll', updatePosition);
40
+ });
41
+ isFirstUpdate = false;
42
+ }
43
+ Object.assign(container.style, {
44
+ position: strategy
45
+ });
46
+ computePosition(target, container, {
47
+ placement,
48
+ middleware,
49
+ strategy
50
+ }).then(({ x , y , middlewareData , placement: computedPlacement })=>{
51
+ // Promise can still resolve after destruction
52
+ // early return to avoid applying outdated position
53
+ if (isDestroyed) {
54
+ return;
55
+ }
56
+ writeArrowUpdates({
57
+ arrow,
58
+ middlewareData
59
+ });
60
+ writeContainerUpdates({
61
+ container,
62
+ middlewareData,
63
+ placement: computedPlacement,
64
+ coordinates: {
65
+ x,
66
+ y
67
+ },
68
+ lowPPI: ((targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.devicePixelRatio) || 1) <= 1,
69
+ strategy,
70
+ useTransform
71
+ });
72
+ }).catch((err)=>{
73
+ // https://github.com/floating-ui/floating-ui/issues/1845
74
+ // FIXME for node > 14
75
+ // node 15 introduces promise rejection which means that any components
76
+ // tests need to be `it('', async () => {})` otherwise there can be race conditions with
77
+ // JSDOM being torn down before this promise is resolved so globals like `window` and `document` don't exist
78
+ // Unless all tests that ever use `usePositioning` are turned into async tests, any logging during testing
79
+ // will actually be counter productive
80
+ if (process.env.NODE_ENV === 'development') {
81
+ // eslint-disable-next-line no-console
82
+ console.error('[usePositioning]: Failed to calculate position', err);
83
+ }
84
+ });
85
+ };
86
+ const updatePosition = debounce(()=>forceUpdate());
87
+ const dispose = ()=>{
88
+ isDestroyed = true;
89
+ if (targetWindow) {
90
+ targetWindow.removeEventListener('scroll', updatePosition);
91
+ targetWindow.removeEventListener('resize', updatePosition);
92
+ }
93
+ scrollParents.forEach((scrollParent)=>{
94
+ scrollParent.removeEventListener('scroll', updatePosition);
95
+ });
96
+ };
101
97
  if (targetWindow) {
102
- targetWindow.removeEventListener('scroll', updatePosition);
103
- targetWindow.removeEventListener('resize', updatePosition);
98
+ targetWindow.addEventListener('scroll', updatePosition);
99
+ targetWindow.addEventListener('resize', updatePosition);
104
100
  }
105
- scrollParents.forEach(scrollParent => {
106
- scrollParent.removeEventListener('scroll', updatePosition);
107
- });
108
- };
109
- if (targetWindow) {
110
- targetWindow.addEventListener('scroll', updatePosition);
111
- targetWindow.addEventListener('resize', updatePosition);
112
- }
113
- // Update the position on initialization
114
- updatePosition();
115
- return {
116
- updatePosition,
117
- dispose
118
- };
101
+ // Update the position on initialization
102
+ updatePosition();
103
+ return {
104
+ updatePosition,
105
+ dispose
106
+ };
119
107
  }
120
- //# sourceMappingURL=createPositionManager.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["computePosition","debounce","writeArrowUpdates","writeContainerUpdates","getScrollParent","isHTMLElement","createPositionManager","options","container","target","arrow","strategy","middleware","placement","isDestroyed","updatePosition","undefined","dispose","isFirstUpdate","scrollParents","Set","targetWindow","ownerDocument","defaultView","Object","assign","style","position","left","top","margin","forceUpdate","add","forEach","scrollParent","addEventListener","then","x","y","middlewareData","computedPlacement","coordinates","lowPPI","devicePixelRatio","catch","err","process","env","NODE_ENV","console","error","removeEventListener"],"sources":["../src/createPositionManager.ts"],"sourcesContent":["import { computePosition } from '@floating-ui/dom';\nimport type { Middleware, Placement, Strategy } from '@floating-ui/dom';\nimport type { PositionManager, TargetElement } from './types';\nimport { debounce, writeArrowUpdates, writeContainerUpdates, getScrollParent } from './utils';\nimport { isHTMLElement } from '@fluentui/react-utilities';\n\ninterface PositionManagerOptions {\n /**\n * The positioned element\n */\n container: HTMLElement;\n /**\n * Element that the container will be anchored to\n */\n target: TargetElement;\n /**\n * Arrow that points from the container to the target\n */\n arrow: HTMLElement | null;\n /**\n * The value of the css `position` property\n * @default absolute\n */\n strategy: Strategy;\n /**\n * [Floating UI middleware](https://floating-ui.com/docs/middleware)\n */\n middleware: Middleware[];\n /**\n * [Floating UI placement](https://floating-ui.com/docs/computePosition#placement)\n */\n placement?: Placement;\n}\n\n/**\n * @internal\n * @returns manager that handles positioning out of the react lifecycle\n */\nexport function createPositionManager(options: PositionManagerOptions): PositionManager {\n const { container, target, arrow, strategy, middleware, placement } = options;\n let isDestroyed = false;\n if (!target || !container) {\n return {\n updatePosition: () => undefined,\n dispose: () => undefined,\n };\n }\n\n let isFirstUpdate = true;\n const scrollParents: Set<HTMLElement> = new Set<HTMLElement>();\n const targetWindow = container.ownerDocument.defaultView;\n\n // When the container is first resolved, set position `fixed` to avoid scroll jumps.\n // Without this scroll jumps can occur when the element is rendered initially and receives focus\n Object.assign(container.style, { position: 'fixed', left: 0, top: 0, margin: 0 });\n\n const forceUpdate = () => {\n // debounced update can still occur afterwards\n // early return to avoid memory leaks\n if (isDestroyed) {\n return;\n }\n\n if (isFirstUpdate) {\n scrollParents.add(getScrollParent(container));\n if (isHTMLElement(target)) {\n scrollParents.add(getScrollParent(target));\n }\n\n scrollParents.forEach(scrollParent => {\n scrollParent.addEventListener('scroll', updatePosition);\n });\n\n isFirstUpdate = false;\n }\n\n Object.assign(container.style, { position: strategy });\n computePosition(target, container, { placement, middleware, strategy })\n .then(({ x, y, middlewareData, placement: computedPlacement }) => {\n // Promise can still resolve after destruction\n // early return to avoid applying outdated position\n if (isDestroyed) {\n return;\n }\n\n writeArrowUpdates({ arrow, middlewareData });\n writeContainerUpdates({\n container,\n middlewareData,\n placement: computedPlacement,\n coordinates: { x, y },\n lowPPI: (targetWindow?.devicePixelRatio || 1) <= 1,\n strategy,\n });\n })\n .catch(err => {\n // https://github.com/floating-ui/floating-ui/issues/1845\n // FIXME for node > 14\n // node 15 introduces promise rejection which means that any components\n // tests need to be `it('', async () => {})` otherwise there can be race conditions with\n // JSDOM being torn down before this promise is resolved so globals like `window` and `document` don't exist\n // Unless all tests that ever use `usePositioning` are turned into async tests, any logging during testing\n // will actually be counter productive\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.error('[usePositioning]: Failed to calculate position', err);\n }\n });\n };\n\n const updatePosition = debounce(() => forceUpdate());\n\n const dispose = () => {\n isDestroyed = true;\n\n if (targetWindow) {\n targetWindow.removeEventListener('scroll', updatePosition);\n targetWindow.removeEventListener('resize', updatePosition);\n }\n\n scrollParents.forEach(scrollParent => {\n scrollParent.removeEventListener('scroll', updatePosition);\n });\n };\n\n if (targetWindow) {\n targetWindow.addEventListener('scroll', updatePosition);\n targetWindow.addEventListener('resize', updatePosition);\n }\n\n // Update the position on initialization\n updatePosition();\n\n return {\n updatePosition,\n dispose,\n };\n}\n"],"mappings":"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"}
1
+ {"version":3,"sources":["createPositionManager.ts"],"sourcesContent":["import { computePosition } from '@floating-ui/dom';\nimport type { Middleware, Placement, Strategy } from '@floating-ui/dom';\nimport type { PositionManager, TargetElement } from './types';\nimport { debounce, writeArrowUpdates, writeContainerUpdates, getScrollParent } from './utils';\nimport { isHTMLElement } from '@fluentui/react-utilities';\n\ninterface PositionManagerOptions {\n /**\n * The positioned element\n */\n container: HTMLElement;\n /**\n * Element that the container will be anchored to\n */\n target: TargetElement;\n /**\n * Arrow that points from the container to the target\n */\n arrow: HTMLElement | null;\n /**\n * The value of the css `position` property\n * @default absolute\n */\n strategy: Strategy;\n /**\n * [Floating UI middleware](https://floating-ui.com/docs/middleware)\n */\n middleware: Middleware[];\n /**\n * [Floating UI placement](https://floating-ui.com/docs/computePosition#placement)\n */\n placement?: Placement;\n /**\n * Modifies whether popover is positioned using transform.\n * @default true\n */\n useTransform?: boolean;\n}\n\n/**\n * @internal\n * @returns manager that handles positioning out of the react lifecycle\n */\nexport function createPositionManager(options: PositionManagerOptions): PositionManager {\n const { container, target, arrow, strategy, middleware, placement, useTransform = true } = options;\n let isDestroyed = false;\n if (!target || !container) {\n return {\n updatePosition: () => undefined,\n dispose: () => undefined,\n };\n }\n\n let isFirstUpdate = true;\n const scrollParents: Set<HTMLElement> = new Set<HTMLElement>();\n const targetWindow = container.ownerDocument.defaultView;\n\n // When the container is first resolved, set position `fixed` to avoid scroll jumps.\n // Without this scroll jumps can occur when the element is rendered initially and receives focus\n Object.assign(container.style, { position: 'fixed', left: 0, top: 0, margin: 0 });\n\n const forceUpdate = () => {\n // debounced update can still occur afterwards\n // early return to avoid memory leaks\n if (isDestroyed) {\n return;\n }\n\n if (isFirstUpdate) {\n scrollParents.add(getScrollParent(container));\n if (isHTMLElement(target)) {\n scrollParents.add(getScrollParent(target));\n }\n\n scrollParents.forEach(scrollParent => {\n scrollParent.addEventListener('scroll', updatePosition);\n });\n\n isFirstUpdate = false;\n }\n\n Object.assign(container.style, { position: strategy });\n computePosition(target, container, { placement, middleware, strategy })\n .then(({ x, y, middlewareData, placement: computedPlacement }) => {\n // Promise can still resolve after destruction\n // early return to avoid applying outdated position\n if (isDestroyed) {\n return;\n }\n\n writeArrowUpdates({ arrow, middlewareData });\n writeContainerUpdates({\n container,\n middlewareData,\n placement: computedPlacement,\n coordinates: { x, y },\n lowPPI: (targetWindow?.devicePixelRatio || 1) <= 1,\n strategy,\n useTransform,\n });\n })\n .catch(err => {\n // https://github.com/floating-ui/floating-ui/issues/1845\n // FIXME for node > 14\n // node 15 introduces promise rejection which means that any components\n // tests need to be `it('', async () => {})` otherwise there can be race conditions with\n // JSDOM being torn down before this promise is resolved so globals like `window` and `document` don't exist\n // Unless all tests that ever use `usePositioning` are turned into async tests, any logging during testing\n // will actually be counter productive\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.error('[usePositioning]: Failed to calculate position', err);\n }\n });\n };\n\n const updatePosition = debounce(() => forceUpdate());\n\n const dispose = () => {\n isDestroyed = true;\n\n if (targetWindow) {\n targetWindow.removeEventListener('scroll', updatePosition);\n targetWindow.removeEventListener('resize', updatePosition);\n }\n\n scrollParents.forEach(scrollParent => {\n scrollParent.removeEventListener('scroll', updatePosition);\n });\n };\n\n if (targetWindow) {\n targetWindow.addEventListener('scroll', updatePosition);\n targetWindow.addEventListener('resize', updatePosition);\n }\n\n // Update the position on initialization\n updatePosition();\n\n return {\n updatePosition,\n dispose,\n };\n}\n"],"names":["computePosition","debounce","writeArrowUpdates","writeContainerUpdates","getScrollParent","isHTMLElement","createPositionManager","options","container","target","arrow","strategy","middleware","placement","useTransform","isDestroyed","updatePosition","undefined","dispose","isFirstUpdate","scrollParents","Set","targetWindow","ownerDocument","defaultView","Object","assign","style","position","left","top","margin","forceUpdate","add","forEach","scrollParent","addEventListener","then","x","y","middlewareData","computedPlacement","coordinates","lowPPI","devicePixelRatio","catch","err","process","env","NODE_ENV","console","error","removeEventListener"],"mappings":"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"}
@@ -1,25 +1,24 @@
1
1
  /**
2
2
  * Creates a virtual element based on the position of a click event
3
3
  * Can be used as a target for popper in scenarios such as context menus
4
- */export function createVirtualElementFromClick(nativeEvent) {
5
- const left = nativeEvent.clientX;
6
- const top = nativeEvent.clientY;
7
- const right = left + 1;
8
- const bottom = top + 1;
9
- function getBoundingClientRect() {
4
+ */ export function createVirtualElementFromClick(nativeEvent) {
5
+ const left = nativeEvent.clientX;
6
+ const top = nativeEvent.clientY;
7
+ const right = left + 1;
8
+ const bottom = top + 1;
9
+ function getBoundingClientRect() {
10
+ return {
11
+ left,
12
+ top,
13
+ right,
14
+ bottom,
15
+ x: left,
16
+ y: top,
17
+ height: 1,
18
+ width: 1
19
+ };
20
+ }
10
21
  return {
11
- left,
12
- top,
13
- right,
14
- bottom,
15
- x: left,
16
- y: top,
17
- height: 1,
18
- width: 1
22
+ getBoundingClientRect
19
23
  };
20
- }
21
- return {
22
- getBoundingClientRect
23
- };
24
24
  }
25
- //# sourceMappingURL=createVirtualElementFromClick.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["createVirtualElementFromClick","nativeEvent","left","clientX","top","clientY","right","bottom","getBoundingClientRect","x","y","height","width"],"sources":["../src/createVirtualElementFromClick.ts"],"sourcesContent":["import type { PositioningVirtualElement } from './types';\n\n/**\n * Creates a virtual element based on the position of a click event\n * Can be used as a target for popper in scenarios such as context menus\n */\nexport function createVirtualElementFromClick(nativeEvent: MouseEvent): PositioningVirtualElement {\n const left = nativeEvent.clientX;\n const top = nativeEvent.clientY;\n const right = left + 1;\n const bottom = top + 1;\n\n function getBoundingClientRect() {\n return {\n left,\n top,\n right,\n bottom,\n x: left,\n y: top,\n height: 1,\n width: 1,\n };\n }\n\n return {\n getBoundingClientRect,\n };\n}\n"],"mappings":"AAEA;;;GAIA,OAAO,SAASA,8BAA8BC,WAAuB,EAA6B;EAChG,MAAMC,IAAA,GAAOD,WAAA,CAAYE,OAAO;EAChC,MAAMC,GAAA,GAAMH,WAAA,CAAYI,OAAO;EAC/B,MAAMC,KAAA,GAAQJ,IAAA,GAAO;EACrB,MAAMK,MAAA,GAASH,GAAA,GAAM;EAErB,SAASI,sBAAA,EAAwB;IAC/B,OAAO;MACLN,IAAA;MACAE,GAAA;MACAE,KAAA;MACAC,MAAA;MACAE,CAAA,EAAGP,IAAA;MACHQ,CAAA,EAAGN,GAAA;MACHO,MAAA,EAAQ;MACRC,KAAA,EAAO;IACT;EACF;EAEA,OAAO;IACLJ;EACF;AACF"}
1
+ {"version":3,"sources":["createVirtualElementFromClick.ts"],"sourcesContent":["import type { PositioningVirtualElement } from './types';\n\n/**\n * Creates a virtual element based on the position of a click event\n * Can be used as a target for popper in scenarios such as context menus\n */\nexport function createVirtualElementFromClick(nativeEvent: MouseEvent): PositioningVirtualElement {\n const left = nativeEvent.clientX;\n const top = nativeEvent.clientY;\n const right = left + 1;\n const bottom = top + 1;\n\n function getBoundingClientRect() {\n return {\n left,\n top,\n right,\n bottom,\n x: left,\n y: top,\n height: 1,\n width: 1,\n };\n }\n\n return {\n getBoundingClientRect,\n };\n}\n"],"names":["createVirtualElementFromClick","nativeEvent","left","clientX","top","clientY","right","bottom","getBoundingClientRect","x","y","height","width"],"mappings":"AAEA;;;CAGC,GACD,OAAO,SAASA,8BAA8BC,WAAuB,EAA6B;IAChG,MAAMC,OAAOD,YAAYE,OAAO;IAChC,MAAMC,MAAMH,YAAYI,OAAO;IAC/B,MAAMC,QAAQJ,OAAO;IACrB,MAAMK,SAASH,MAAM;IAErB,SAASI,wBAAwB;QAC/B,OAAO;YACLN;YACAE;YACAE;YACAC;YACAE,GAAGP;YACHQ,GAAGN;YACHO,QAAQ;YACRC,OAAO;QACT;IACF;IAEA,OAAO;QACLJ;IACF;AACF,CAAC"}
package/lib/index.js CHANGED
@@ -3,4 +3,3 @@ export { createArrowHeightStyles, createArrowStyles } from './createArrowStyles'
3
3
  export { usePositioning } from './usePositioning';
4
4
  export { usePositioningMouseTarget } from './usePositioningMouseTarget';
5
5
  export { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';
6
- //# sourceMappingURL=index.js.map
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["createVirtualElementFromClick","createArrowHeightStyles","createArrowStyles","usePositioning","usePositioningMouseTarget","resolvePositioningShorthand","mergeArrowOffset"],"sources":["../src/index.ts"],"sourcesContent":["export { createVirtualElementFromClick } from './createVirtualElementFromClick';\nexport { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';\nexport type { CreateArrowStylesOptions } from './createArrowStyles';\nexport { usePositioning } from './usePositioning';\nexport { usePositioningMouseTarget } from './usePositioningMouseTarget';\nexport { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';\nexport type {\n Alignment,\n AutoSize,\n Boundary,\n Offset,\n OffsetFunction,\n OffsetFunctionParam,\n OffsetObject,\n OffsetShorthand,\n Position,\n PositioningImperativeRef,\n PositioningProps,\n PositioningShorthand,\n PositioningShorthandValue,\n PositioningVirtualElement,\n SetVirtualMouseTarget,\n} from './types';\n"],"mappings":"AAAA,SAASA,6BAA6B,QAAQ;AAC9C,SAASC,uBAAuB,EAAEC,iBAAiB,QAAQ;AAE3D,SAASC,cAAc,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,2BAA2B,EAAEC,gBAAgB,QAAQ"}
1
+ {"version":3,"sources":["index.ts"],"sourcesContent":["export { createVirtualElementFromClick } from './createVirtualElementFromClick';\nexport { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';\nexport type { CreateArrowStylesOptions } from './createArrowStyles';\nexport { usePositioning } from './usePositioning';\nexport { usePositioningMouseTarget } from './usePositioningMouseTarget';\nexport { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';\nexport type {\n Alignment,\n AutoSize,\n Boundary,\n Offset,\n OffsetFunction,\n OffsetFunctionParam,\n OffsetObject,\n OffsetShorthand,\n Position,\n PositioningImperativeRef,\n PositioningProps,\n PositioningShorthand,\n PositioningShorthandValue,\n PositioningVirtualElement,\n SetVirtualMouseTarget,\n} from './types';\n"],"names":["createVirtualElementFromClick","createArrowHeightStyles","createArrowStyles","usePositioning","usePositioningMouseTarget","resolvePositioningShorthand","mergeArrowOffset"],"mappings":"AAAA,SAASA,6BAA6B,QAAQ,kCAAkC;AAChF,SAASC,uBAAuB,EAAEC,iBAAiB,QAAQ,sBAAsB;AAEjF,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,2BAA2B,EAAEC,gBAAgB,QAAQ,gBAAgB"}