@fluentui/react-positioning 9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 → 9.74.3-experimental.esm.20260709-49ee7a20cf.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (189) hide show
  1. package/CHANGELOG.md +71 -8
  2. package/dist/index.d.cts +409 -0
  3. package/dist/index.d.ts +64 -5
  4. package/lib/PositioningConfigurationContext.js +1 -1
  5. package/lib/constants.js +6 -0
  6. package/lib/constants.js.map +1 -1
  7. package/lib/createArrowStyles.js +5 -3
  8. package/lib/createArrowStyles.js.map +1 -1
  9. package/lib/createPositionManager.js +14 -7
  10. package/lib/createPositionManager.js.map +1 -1
  11. package/lib/createSlideStyles.js +5 -2
  12. package/lib/createSlideStyles.js.map +1 -1
  13. package/lib/hooks/useSafeZoneArea/SafeZoneArea.js +9 -9
  14. package/lib/hooks/useSafeZoneArea/SafeZoneArea.js.map +1 -1
  15. package/lib/hooks/useSafeZoneArea/SafeZoneArea.styles.js +4 -2
  16. package/lib/hooks/useSafeZoneArea/SafeZoneArea.styles.js.map +1 -1
  17. package/lib/hooks/useSafeZoneArea/SafeZoneArea.styles.raw.js +3 -2
  18. package/lib/hooks/useSafeZoneArea/SafeZoneArea.styles.raw.js.map +1 -1
  19. package/lib/hooks/useSafeZoneArea/useSafeZoneArea.js +6 -4
  20. package/lib/hooks/useSafeZoneArea/useSafeZoneArea.js.map +1 -1
  21. package/lib/index.js +11 -8
  22. package/lib/index.js.map +1 -1
  23. package/lib/middleware/coverTarget.js +1 -1
  24. package/lib/middleware/coverTarget.js.map +1 -1
  25. package/lib/middleware/flip.js +2 -2
  26. package/lib/middleware/flip.js.map +1 -1
  27. package/lib/middleware/index.js +7 -7
  28. package/lib/middleware/index.js.map +1 -1
  29. package/lib/middleware/intersecting.js +1 -1
  30. package/lib/middleware/maxSize.js +3 -3
  31. package/lib/middleware/maxSize.js.map +1 -1
  32. package/lib/middleware/offset.js +2 -2
  33. package/lib/middleware/offset.js.map +1 -1
  34. package/lib/middleware/shift.js +2 -2
  35. package/lib/middleware/shift.js.map +1 -1
  36. package/lib/types.js +1 -1
  37. package/lib/types.js.map +1 -1
  38. package/lib/usePositioning.js +10 -10
  39. package/lib/usePositioning.js.map +1 -1
  40. package/lib/usePositioningMouseTarget.js +3 -3
  41. package/lib/usePositioningMouseTarget.js.map +1 -1
  42. package/lib/usePositioningOptions.js +10 -10
  43. package/lib/usePositioningOptions.js.map +1 -1
  44. package/lib/usePositioningSlideDirection.js +78 -0
  45. package/lib/usePositioningSlideDirection.js.map +1 -0
  46. package/lib/utils/devtools.js +3 -3
  47. package/lib/utils/devtools.js.map +1 -1
  48. package/lib/utils/fromFloatingUIPlacement.js +1 -1
  49. package/lib/utils/fromFloatingUIPlacement.js.map +1 -1
  50. package/lib/utils/getBoundary.js +1 -1
  51. package/lib/utils/getBoundary.js.map +1 -1
  52. package/lib/utils/getFloatingUIOffset.js +1 -1
  53. package/lib/utils/getFloatingUIOffset.js.map +1 -1
  54. package/lib/utils/getReactFiberFromNode.js +0 -1
  55. package/lib/utils/getReactFiberFromNode.js.map +1 -1
  56. package/lib/utils/hasAutoFocusFilter.js +1 -1
  57. package/lib/utils/hasAutoFocusFilter.js.map +1 -1
  58. package/lib/utils/index.js +16 -16
  59. package/lib/utils/index.js.map +1 -1
  60. package/lib/utils/listScrollParents.js +1 -1
  61. package/lib/utils/listScrollParents.js.map +1 -1
  62. package/lib/utils/toFloatingUIPadding.js.map +1 -1
  63. package/lib/utils/toggleScrollListener.js +2 -2
  64. package/lib/utils/toggleScrollListener.js.map +1 -1
  65. package/lib/utils/useCallbackRef.js +2 -2
  66. package/lib/utils/writeArrowUpdates.js.map +1 -1
  67. package/lib/utils/writeContainerupdates.js +1 -1
  68. package/lib/utils/writeContainerupdates.js.map +1 -1
  69. package/lib-commonjs/{constants.js → constants.cjs} +8 -0
  70. package/lib-commonjs/constants.cjs.map +1 -0
  71. package/lib-commonjs/createArrowStyles.cjs.map +1 -0
  72. package/lib-commonjs/{createPositionManager.js → createPositionManager.cjs} +15 -8
  73. package/lib-commonjs/createPositionManager.cjs.map +1 -0
  74. package/lib-commonjs/{createSlideStyles.js → createSlideStyles.cjs} +1 -1
  75. package/lib-commonjs/createSlideStyles.cjs.map +1 -0
  76. package/lib-commonjs/hooks/useSafeZoneArea/{SafeZoneArea.js → SafeZoneArea.cjs} +5 -5
  77. package/lib-commonjs/hooks/useSafeZoneArea/{SafeZoneArea.js.map → SafeZoneArea.cjs.map} +1 -1
  78. package/lib-commonjs/hooks/useSafeZoneArea/{SafeZoneArea.styles.js → SafeZoneArea.styles.cjs} +1 -0
  79. package/lib-commonjs/hooks/useSafeZoneArea/SafeZoneArea.styles.cjs.map +1 -0
  80. package/lib-commonjs/hooks/useSafeZoneArea/{SafeZoneArea.styles.raw.js → SafeZoneArea.styles.raw.cjs} +1 -0
  81. package/lib-commonjs/hooks/useSafeZoneArea/SafeZoneArea.styles.raw.cjs.map +1 -0
  82. package/lib-commonjs/hooks/useSafeZoneArea/{useSafeZoneArea.js → useSafeZoneArea.cjs} +4 -2
  83. package/lib-commonjs/hooks/useSafeZoneArea/useSafeZoneArea.cjs.map +1 -0
  84. package/lib-commonjs/{index.js → index.cjs} +19 -8
  85. package/lib-commonjs/index.cjs.map +1 -0
  86. package/lib-commonjs/middleware/{coverTarget.js → coverTarget.cjs} +1 -1
  87. package/lib-commonjs/middleware/{coverTarget.js.map → coverTarget.cjs.map} +1 -1
  88. package/lib-commonjs/middleware/{flip.js → flip.cjs} +1 -1
  89. package/lib-commonjs/middleware/flip.cjs.map +1 -0
  90. package/lib-commonjs/middleware/{index.js → index.cjs} +7 -7
  91. package/lib-commonjs/middleware/{index.js.map → index.cjs.map} +1 -1
  92. package/lib-commonjs/middleware/{maxSize.js → maxSize.cjs} +3 -3
  93. package/lib-commonjs/middleware/{maxSize.js.map → maxSize.cjs.map} +1 -1
  94. package/lib-commonjs/middleware/{offset.js → offset.cjs} +1 -1
  95. package/lib-commonjs/middleware/offset.cjs.map +1 -0
  96. package/lib-commonjs/middleware/{shift.js → shift.cjs} +1 -1
  97. package/lib-commonjs/middleware/shift.cjs.map +1 -0
  98. package/lib-commonjs/types.cjs +4 -0
  99. package/lib-commonjs/types.cjs.map +1 -0
  100. package/lib-commonjs/{usePositioning.js → usePositioning.cjs} +10 -11
  101. package/lib-commonjs/usePositioning.cjs.map +1 -0
  102. package/lib-commonjs/{usePositioningMouseTarget.js → usePositioningMouseTarget.cjs} +1 -1
  103. package/lib-commonjs/usePositioningMouseTarget.cjs.map +1 -0
  104. package/lib-commonjs/{usePositioningOptions.js → usePositioningOptions.cjs} +17 -17
  105. package/lib-commonjs/{usePositioningOptions.js.map → usePositioningOptions.cjs.map} +1 -1
  106. package/lib-commonjs/usePositioningSlideDirection.cjs +86 -0
  107. package/lib-commonjs/usePositioningSlideDirection.cjs.map +1 -0
  108. package/lib-commonjs/utils/{devtools.js → devtools.cjs} +2 -2
  109. package/lib-commonjs/utils/{devtools.js.map → devtools.cjs.map} +1 -1
  110. package/lib-commonjs/utils/{fromFloatingUIPlacement.js → fromFloatingUIPlacement.cjs} +1 -1
  111. package/lib-commonjs/utils/{fromFloatingUIPlacement.js.map → fromFloatingUIPlacement.cjs.map} +1 -1
  112. package/lib-commonjs/utils/{getBoundary.js → getBoundary.cjs} +1 -1
  113. package/lib-commonjs/utils/{getBoundary.js.map → getBoundary.cjs.map} +1 -1
  114. package/lib-commonjs/utils/{getFloatingUIOffset.js → getFloatingUIOffset.cjs} +1 -1
  115. package/lib-commonjs/utils/{getFloatingUIOffset.js.map → getFloatingUIOffset.cjs.map} +1 -1
  116. package/lib-commonjs/utils/{getReactFiberFromNode.js → getReactFiberFromNode.cjs} +0 -2
  117. package/lib-commonjs/utils/getReactFiberFromNode.cjs.map +1 -0
  118. package/lib-commonjs/utils/{hasAutoFocusFilter.js → hasAutoFocusFilter.cjs} +1 -1
  119. package/lib-commonjs/utils/{hasAutoFocusFilter.js.map → hasAutoFocusFilter.cjs.map} +1 -1
  120. package/lib-commonjs/utils/{index.js → index.cjs} +16 -16
  121. package/lib-commonjs/utils/{index.js.map → index.cjs.map} +1 -1
  122. package/lib-commonjs/utils/{listScrollParents.js → listScrollParents.cjs} +1 -1
  123. package/lib-commonjs/utils/{listScrollParents.js.map → listScrollParents.cjs.map} +1 -1
  124. package/lib-commonjs/utils/toFloatingUIPadding.cjs.map +1 -0
  125. package/lib-commonjs/utils/{toggleScrollListener.js → toggleScrollListener.cjs} +1 -1
  126. package/lib-commonjs/utils/{toggleScrollListener.js.map → toggleScrollListener.cjs.map} +1 -1
  127. package/lib-commonjs/utils/writeArrowUpdates.cjs.map +1 -0
  128. package/lib-commonjs/utils/{writeContainerupdates.js → writeContainerupdates.cjs} +1 -1
  129. package/lib-commonjs/utils/{writeContainerupdates.js.map → writeContainerupdates.cjs.map} +1 -1
  130. package/package.json +16 -10
  131. package/lib-commonjs/constants.js.map +0 -1
  132. package/lib-commonjs/createArrowStyles.js.map +0 -1
  133. package/lib-commonjs/createPositionManager.js.map +0 -1
  134. package/lib-commonjs/createSlideStyles.js.map +0 -1
  135. package/lib-commonjs/hooks/useSafeZoneArea/SafeZoneArea.styles.js.map +0 -1
  136. package/lib-commonjs/hooks/useSafeZoneArea/SafeZoneArea.styles.raw.js.map +0 -1
  137. package/lib-commonjs/hooks/useSafeZoneArea/useSafeZoneArea.js.map +0 -1
  138. package/lib-commonjs/index.js.map +0 -1
  139. package/lib-commonjs/middleware/flip.js.map +0 -1
  140. package/lib-commonjs/middleware/offset.js.map +0 -1
  141. package/lib-commonjs/middleware/shift.js.map +0 -1
  142. package/lib-commonjs/types.js +0 -6
  143. package/lib-commonjs/types.js.map +0 -1
  144. package/lib-commonjs/usePositioning.js.map +0 -1
  145. package/lib-commonjs/usePositioningMouseTarget.js.map +0 -1
  146. package/lib-commonjs/utils/getReactFiberFromNode.js.map +0 -1
  147. package/lib-commonjs/utils/toFloatingUIPadding.js.map +0 -1
  148. package/lib-commonjs/utils/writeArrowUpdates.js.map +0 -1
  149. /package/lib-commonjs/{PositioningConfigurationContext.js → PositioningConfigurationContext.cjs} +0 -0
  150. /package/lib-commonjs/{PositioningConfigurationContext.js.map → PositioningConfigurationContext.cjs.map} +0 -0
  151. /package/lib-commonjs/{createArrowStyles.js → createArrowStyles.cjs} +0 -0
  152. /package/lib-commonjs/{createVirtualElementFromClick.js → createVirtualElementFromClick.cjs} +0 -0
  153. /package/lib-commonjs/{createVirtualElementFromClick.js.map → createVirtualElementFromClick.cjs.map} +0 -0
  154. /package/lib-commonjs/hooks/useSafeZoneArea/{computeOutsideClipPath.js → computeOutsideClipPath.cjs} +0 -0
  155. /package/lib-commonjs/hooks/useSafeZoneArea/{computeOutsideClipPath.js.map → computeOutsideClipPath.cjs.map} +0 -0
  156. /package/lib-commonjs/hooks/useSafeZoneArea/{createSafeZoneAreaStateStore.js → createSafeZoneAreaStateStore.cjs} +0 -0
  157. /package/lib-commonjs/hooks/useSafeZoneArea/{createSafeZoneAreaStateStore.js.map → createSafeZoneAreaStateStore.cjs.map} +0 -0
  158. /package/lib-commonjs/hooks/useSafeZoneArea/{getMouseAnchor.js → getMouseAnchor.cjs} +0 -0
  159. /package/lib-commonjs/hooks/useSafeZoneArea/{getMouseAnchor.js.map → getMouseAnchor.cjs.map} +0 -0
  160. /package/lib-commonjs/hooks/useSafeZoneArea/{getRectCorners.js → getRectCorners.cjs} +0 -0
  161. /package/lib-commonjs/hooks/useSafeZoneArea/{getRectCorners.js.map → getRectCorners.cjs.map} +0 -0
  162. /package/lib-commonjs/hooks/useSafeZoneArea/{pointsToSvgPath.js → pointsToSvgPath.cjs} +0 -0
  163. /package/lib-commonjs/hooks/useSafeZoneArea/{pointsToSvgPath.js.map → pointsToSvgPath.cjs.map} +0 -0
  164. /package/lib-commonjs/hooks/useSafeZoneArea/{types.js → types.cjs} +0 -0
  165. /package/lib-commonjs/hooks/useSafeZoneArea/{types.js.map → types.cjs.map} +0 -0
  166. /package/lib-commonjs/middleware/{intersecting.js → intersecting.cjs} +0 -0
  167. /package/lib-commonjs/middleware/{intersecting.js.map → intersecting.cjs.map} +0 -0
  168. /package/lib-commonjs/middleware/{matchTargetSize.js → matchTargetSize.cjs} +0 -0
  169. /package/lib-commonjs/middleware/{matchTargetSize.js.map → matchTargetSize.cjs.map} +0 -0
  170. /package/lib-commonjs/utils/{createResizeObserver.js → createResizeObserver.cjs} +0 -0
  171. /package/lib-commonjs/utils/{createResizeObserver.js.map → createResizeObserver.cjs.map} +0 -0
  172. /package/lib-commonjs/utils/{debounce.js → debounce.cjs} +0 -0
  173. /package/lib-commonjs/utils/{debounce.js.map → debounce.cjs.map} +0 -0
  174. /package/lib-commonjs/utils/{getScrollParent.js → getScrollParent.cjs} +0 -0
  175. /package/lib-commonjs/utils/{getScrollParent.js.map → getScrollParent.cjs.map} +0 -0
  176. /package/lib-commonjs/utils/{mergeArrowOffset.js → mergeArrowOffset.cjs} +0 -0
  177. /package/lib-commonjs/utils/{mergeArrowOffset.js.map → mergeArrowOffset.cjs.map} +0 -0
  178. /package/lib-commonjs/utils/{normalizeAutoSize.js → normalizeAutoSize.cjs} +0 -0
  179. /package/lib-commonjs/utils/{normalizeAutoSize.js.map → normalizeAutoSize.cjs.map} +0 -0
  180. /package/lib-commonjs/utils/{parseFloatingUIPlacement.js → parseFloatingUIPlacement.cjs} +0 -0
  181. /package/lib-commonjs/utils/{parseFloatingUIPlacement.js.map → parseFloatingUIPlacement.cjs.map} +0 -0
  182. /package/lib-commonjs/utils/{resolvePositioningShorthand.js → resolvePositioningShorthand.cjs} +0 -0
  183. /package/lib-commonjs/utils/{resolvePositioningShorthand.js.map → resolvePositioningShorthand.cjs.map} +0 -0
  184. /package/lib-commonjs/utils/{toFloatingUIPadding.js → toFloatingUIPadding.cjs} +0 -0
  185. /package/lib-commonjs/utils/{toFloatingUIPlacement.js → toFloatingUIPlacement.cjs} +0 -0
  186. /package/lib-commonjs/utils/{toFloatingUIPlacement.js.map → toFloatingUIPlacement.cjs.map} +0 -0
  187. /package/lib-commonjs/utils/{useCallbackRef.js → useCallbackRef.cjs} +0 -0
  188. /package/lib-commonjs/utils/{useCallbackRef.js.map → useCallbackRef.cjs.map} +0 -0
  189. /package/lib-commonjs/utils/{writeArrowUpdates.js → writeArrowUpdates.cjs} +0 -0
@@ -1,16 +1,16 @@
1
- export { parseFloatingUIPlacement } from './parseFloatingUIPlacement';
2
- export { getBoundary } from './getBoundary';
3
- export { getReactFiberFromNode } from './getReactFiberFromNode';
4
- export { getParentNode, getScrollParent, hasScrollParent } from './getScrollParent';
5
- export { mergeArrowOffset } from './mergeArrowOffset';
6
- export { toFloatingUIPadding } from './toFloatingUIPadding';
7
- export { toFloatingUIPlacement } from './toFloatingUIPlacement';
8
- export { fromFloatingUIPlacement } from './fromFloatingUIPlacement';
9
- export { resolvePositioningShorthand } from './resolvePositioningShorthand';
10
- export { useCallbackRef } from './useCallbackRef';
11
- export { debounce } from './debounce';
12
- export { toggleScrollListener } from './toggleScrollListener';
13
- export { hasAutofocusFilter } from './hasAutoFocusFilter';
14
- export { writeArrowUpdates } from './writeArrowUpdates';
15
- export { writeContainerUpdates } from './writeContainerupdates';
16
- export { normalizeAutoSize } from './normalizeAutoSize';
1
+ export { parseFloatingUIPlacement } from "./parseFloatingUIPlacement.js";
2
+ export { getBoundary } from "./getBoundary.js";
3
+ export { getReactFiberFromNode } from "./getReactFiberFromNode.js";
4
+ export { getParentNode, getScrollParent, hasScrollParent } from "./getScrollParent.js";
5
+ export { mergeArrowOffset } from "./mergeArrowOffset.js";
6
+ export { toFloatingUIPadding } from "./toFloatingUIPadding.js";
7
+ export { toFloatingUIPlacement } from "./toFloatingUIPlacement.js";
8
+ export { fromFloatingUIPlacement } from "./fromFloatingUIPlacement.js";
9
+ export { resolvePositioningShorthand } from "./resolvePositioningShorthand.js";
10
+ export { useCallbackRef } from "./useCallbackRef.js";
11
+ export { debounce } from "./debounce.js";
12
+ export { toggleScrollListener } from "./toggleScrollListener.js";
13
+ export { hasAutofocusFilter } from "./hasAutoFocusFilter.js";
14
+ export { writeArrowUpdates } from "./writeArrowUpdates.js";
15
+ export { writeContainerUpdates } from "./writeContainerupdates.js";
16
+ export { normalizeAutoSize } from "./normalizeAutoSize.js";
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/utils/index.ts"],"sourcesContent":["export { parseFloatingUIPlacement } from './parseFloatingUIPlacement';\nexport { getBoundary } from './getBoundary';\nexport type { Fiber, HookType } from './getReactFiberFromNode';\nexport { getReactFiberFromNode } from './getReactFiberFromNode';\nexport { getParentNode, getScrollParent, hasScrollParent } from './getScrollParent';\nexport { mergeArrowOffset } from './mergeArrowOffset';\nexport { toFloatingUIPadding } from './toFloatingUIPadding';\nexport { toFloatingUIPlacement } from './toFloatingUIPlacement';\nexport { fromFloatingUIPlacement } from './fromFloatingUIPlacement';\nexport { resolvePositioningShorthand } from './resolvePositioningShorthand';\nexport { useCallbackRef } from './useCallbackRef';\nexport { debounce } from './debounce';\nexport { toggleScrollListener } from './toggleScrollListener';\nexport { hasAutofocusFilter } from './hasAutoFocusFilter';\nexport { writeArrowUpdates } from './writeArrowUpdates';\nexport { writeContainerUpdates } from './writeContainerupdates';\nexport { normalizeAutoSize } from './normalizeAutoSize';\n"],"names":["parseFloatingUIPlacement","getBoundary","getReactFiberFromNode","getParentNode","getScrollParent","hasScrollParent","mergeArrowOffset","toFloatingUIPadding","toFloatingUIPlacement","fromFloatingUIPlacement","resolvePositioningShorthand","useCallbackRef","debounce","toggleScrollListener","hasAutofocusFilter","writeArrowUpdates","writeContainerUpdates","normalizeAutoSize"],"mappings":"AAAA,SAASA,wBAAwB,QAAQ,6BAA6B;AACtE,SAASC,WAAW,QAAQ,gBAAgB;AAE5C,SAASC,qBAAqB,QAAQ,0BAA0B;AAChE,SAASC,aAAa,EAAEC,eAAe,EAAEC,eAAe,QAAQ,oBAAoB;AACpF,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,qBAAqB,QAAQ,0BAA0B;AAChE,SAASC,uBAAuB,QAAQ,4BAA4B;AACpE,SAASC,2BAA2B,QAAQ,gCAAgC;AAC5E,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,QAAQ,QAAQ,aAAa;AACtC,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,qBAAqB,QAAQ,0BAA0B;AAChE,SAASC,iBAAiB,QAAQ,sBAAsB"}
1
+ {"version":3,"sources":["../src/utils/index.ts"],"sourcesContent":["export { parseFloatingUIPlacement } from './parseFloatingUIPlacement';\nexport { getBoundary } from './getBoundary';\nexport type { Fiber, HookType } from './getReactFiberFromNode';\nexport { getReactFiberFromNode } from './getReactFiberFromNode';\nexport { getParentNode, getScrollParent, hasScrollParent } from './getScrollParent';\nexport { mergeArrowOffset } from './mergeArrowOffset';\nexport { toFloatingUIPadding } from './toFloatingUIPadding';\nexport { toFloatingUIPlacement } from './toFloatingUIPlacement';\nexport { fromFloatingUIPlacement } from './fromFloatingUIPlacement';\nexport { resolvePositioningShorthand } from './resolvePositioningShorthand';\nexport { useCallbackRef } from './useCallbackRef';\nexport { debounce } from './debounce';\nexport { toggleScrollListener } from './toggleScrollListener';\nexport { hasAutofocusFilter } from './hasAutoFocusFilter';\nexport { writeArrowUpdates } from './writeArrowUpdates';\nexport { writeContainerUpdates } from './writeContainerupdates';\nexport { normalizeAutoSize } from './normalizeAutoSize';\n"],"names":["parseFloatingUIPlacement","getBoundary","getReactFiberFromNode","getParentNode","getScrollParent","hasScrollParent","mergeArrowOffset","toFloatingUIPadding","toFloatingUIPlacement","fromFloatingUIPlacement","resolvePositioningShorthand","useCallbackRef","debounce","toggleScrollListener","hasAutofocusFilter","writeArrowUpdates","writeContainerUpdates","normalizeAutoSize"],"mappings":"AAAA,SAASA,wBAAwB,QAAQ,gCAA6B;AACtE,SAASC,WAAW,QAAQ,mBAAgB;AAE5C,SAASC,qBAAqB,QAAQ,6BAA0B;AAChE,SAASC,aAAa,EAAEC,eAAe,EAAEC,eAAe,QAAQ,uBAAoB;AACpF,SAASC,gBAAgB,QAAQ,wBAAqB;AACtD,SAASC,mBAAmB,QAAQ,2BAAwB;AAC5D,SAASC,qBAAqB,QAAQ,6BAA0B;AAChE,SAASC,uBAAuB,QAAQ,+BAA4B;AACpE,SAASC,2BAA2B,QAAQ,mCAAgC;AAC5E,SAASC,cAAc,QAAQ,sBAAmB;AAClD,SAASC,QAAQ,QAAQ,gBAAa;AACtC,SAASC,oBAAoB,QAAQ,4BAAyB;AAC9D,SAASC,kBAAkB,QAAQ,0BAAuB;AAC1D,SAASC,iBAAiB,QAAQ,yBAAsB;AACxD,SAASC,qBAAqB,QAAQ,6BAA0B;AAChE,SAASC,iBAAiB,QAAQ,yBAAsB"}
@@ -1,4 +1,4 @@
1
- import { getScrollParent } from './getScrollParent';
1
+ import { getScrollParent } from "./getScrollParent.js";
2
2
  export function listScrollParents(node) {
3
3
  const scrollParents = [];
4
4
  let cur = node;
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/utils/listScrollParents.ts"],"sourcesContent":["import { getScrollParent } from './getScrollParent';\n\nexport function listScrollParents(node: HTMLElement): HTMLElement[] {\n const scrollParents: HTMLElement[] = [];\n\n let cur: HTMLElement | null = node;\n while (cur) {\n const scrollParent = getScrollParent(cur);\n\n if (node.ownerDocument.body === scrollParent) {\n scrollParents.push(scrollParent);\n break;\n }\n\n if (scrollParent.nodeName === 'BODY' && scrollParent !== node.ownerDocument.body) {\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.error(\n '@fluentui/react-positioning: You are comparing two different documents! This is an unexpected error, please report this as a bug to the Fluent UI team ',\n );\n }\n break;\n }\n\n scrollParents.push(scrollParent);\n cur = scrollParent;\n }\n\n return scrollParents;\n}\n"],"names":["getScrollParent","listScrollParents","node","scrollParents","cur","scrollParent","ownerDocument","body","push","nodeName","process","env","NODE_ENV","console","error"],"mappings":"AAAA,SAASA,eAAe,QAAQ,oBAAoB;AAEpD,OAAO,SAASC,kBAAkBC,IAAiB;IACjD,MAAMC,gBAA+B,EAAE;IAEvC,IAAIC,MAA0BF;IAC9B,MAAOE,IAAK;QACV,MAAMC,eAAeL,gBAAgBI;QAErC,IAAIF,KAAKI,aAAa,CAACC,IAAI,KAAKF,cAAc;YAC5CF,cAAcK,IAAI,CAACH;YACnB;QACF;QAEA,IAAIA,aAAaI,QAAQ,KAAK,UAAUJ,iBAAiBH,KAAKI,aAAa,CAACC,IAAI,EAAE;YAChF,IAAIG,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;gBACzC,sCAAsC;gBACtCC,QAAQC,KAAK,CACX;YAEJ;YACA;QACF;QAEAX,cAAcK,IAAI,CAACH;QACnBD,MAAMC;IACR;IAEA,OAAOF;AACT"}
1
+ {"version":3,"sources":["../src/utils/listScrollParents.ts"],"sourcesContent":["import { getScrollParent } from './getScrollParent';\n\nexport function listScrollParents(node: HTMLElement): HTMLElement[] {\n const scrollParents: HTMLElement[] = [];\n\n let cur: HTMLElement | null = node;\n while (cur) {\n const scrollParent = getScrollParent(cur);\n\n if (node.ownerDocument.body === scrollParent) {\n scrollParents.push(scrollParent);\n break;\n }\n\n if (scrollParent.nodeName === 'BODY' && scrollParent !== node.ownerDocument.body) {\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.error(\n '@fluentui/react-positioning: You are comparing two different documents! This is an unexpected error, please report this as a bug to the Fluent UI team ',\n );\n }\n break;\n }\n\n scrollParents.push(scrollParent);\n cur = scrollParent;\n }\n\n return scrollParents;\n}\n"],"names":["getScrollParent","listScrollParents","node","scrollParents","cur","scrollParent","ownerDocument","body","push","nodeName","process","env","NODE_ENV","console","error"],"mappings":"AAAA,SAASA,eAAe,QAAQ,uBAAoB;AAEpD,OAAO,SAASC,kBAAkBC,IAAiB;IACjD,MAAMC,gBAA+B,EAAE;IAEvC,IAAIC,MAA0BF;IAC9B,MAAOE,IAAK;QACV,MAAMC,eAAeL,gBAAgBI;QAErC,IAAIF,KAAKI,aAAa,CAACC,IAAI,KAAKF,cAAc;YAC5CF,cAAcK,IAAI,CAACH;YACnB;QACF;QAEA,IAAIA,aAAaI,QAAQ,KAAK,UAAUJ,iBAAiBH,KAAKI,aAAa,CAACC,IAAI,EAAE;YAChF,IAAIG,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;gBACzC,sCAAsC;gBACtCC,QAAQC,KAAK,CACX;YAEJ;YACA;QACF;QAEAX,cAAcK,IAAI,CAACH;QACnBD,MAAMC;IACR;IAEA,OAAOF;AACT"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/utils/toFloatingUIPadding.ts"],"sourcesContent":["import type { SideObject } from '@floating-ui/dom';\nimport { PositioningOptions } from '../types';\n\nexport function toFloatingUIPadding(\n padding: NonNullable<PositioningOptions['overflowBoundaryPadding']>,\n isRtl: boolean,\n): number | Partial<SideObject> {\n if (typeof padding === 'number') {\n return padding;\n }\n\n const { start, end, ...verticalPadding } = padding;\n\n const paddingObject: Partial<SideObject> = verticalPadding;\n\n const left = isRtl ? 'end' : 'start';\n const right = isRtl ? 'start' : 'end';\n\n // assign properties explicitly since undefined values are actually handled by floating UI\n // TODO create floating UI issue\n if (padding[left]) {\n paddingObject.left = padding[left];\n }\n\n if (padding[right]) {\n paddingObject.right = padding[right];\n }\n\n return paddingObject;\n}\n"],"names":["toFloatingUIPadding","padding","isRtl","start","end","verticalPadding","paddingObject","left","right"],"mappings":"AAGA,OAAO,SAASA,oBACdC,OAAmE,EACnEC,KAAc;IAEd,IAAI,OAAOD,YAAY,UAAU;QAC/B,OAAOA;IACT;IAEA,MAAM,EAAEE,KAAK,EAAEC,GAAG,EAAE,GAAGC,iBAAiB,GAAGJ;IAE3C,MAAMK,gBAAqCD;IAE3C,MAAME,OAAOL,QAAQ,QAAQ;IAC7B,MAAMM,QAAQN,QAAQ,UAAU;IAEhC,0FAA0F;IAC1F,gCAAgC;IAChC,IAAID,OAAO,CAACM,KAAK,EAAE;QACjBD,cAAcC,IAAI,GAAGN,OAAO,CAACM,KAAK;IACpC;IAEA,IAAIN,OAAO,CAACO,MAAM,EAAE;QAClBF,cAAcE,KAAK,GAAGP,OAAO,CAACO,MAAM;IACtC;IAEA,OAAOF;AACT"}
1
+ {"version":3,"sources":["../src/utils/toFloatingUIPadding.ts"],"sourcesContent":["import type { SideObject } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\n\nexport function toFloatingUIPadding(\n padding: NonNullable<PositioningOptions['overflowBoundaryPadding']>,\n isRtl: boolean,\n): number | Partial<SideObject> {\n if (typeof padding === 'number') {\n return padding;\n }\n\n const { start, end, ...verticalPadding } = padding;\n\n const paddingObject: Partial<SideObject> = verticalPadding;\n\n const left = isRtl ? 'end' : 'start';\n const right = isRtl ? 'start' : 'end';\n\n // assign properties explicitly since undefined values are actually handled by floating UI\n // TODO create floating UI issue\n if (padding[left]) {\n paddingObject.left = padding[left];\n }\n\n if (padding[right]) {\n paddingObject.right = padding[right];\n }\n\n return paddingObject;\n}\n"],"names":["toFloatingUIPadding","padding","isRtl","start","end","verticalPadding","paddingObject","left","right"],"mappings":"AAGA,OAAO,SAASA,oBACdC,OAAmE,EACnEC,KAAc;IAEd,IAAI,OAAOD,YAAY,UAAU;QAC/B,OAAOA;IACT;IAEA,MAAM,EAAEE,KAAK,EAAEC,GAAG,EAAE,GAAGC,iBAAiB,GAAGJ;IAE3C,MAAMK,gBAAqCD;IAE3C,MAAME,OAAOL,QAAQ,QAAQ;IAC7B,MAAMM,QAAQN,QAAQ,UAAU;IAEhC,0FAA0F;IAC1F,gCAAgC;IAChC,IAAID,OAAO,CAACM,KAAK,EAAE;QACjBD,cAAcC,IAAI,GAAGN,OAAO,CAACM,KAAK;IACpC;IAEA,IAAIN,OAAO,CAACO,MAAM,EAAE;QAClBF,cAAcE,KAAK,GAAGP,OAAO,CAACO,MAAM;IACtC;IAEA,OAAOF;AACT"}
@@ -1,5 +1,5 @@
1
- import { isHTMLElement } from '@fluentui/react-utilities';
2
- import { getScrollParent } from './getScrollParent';
1
+ import { isHTMLElement } from "@fluentui/react-utilities";
2
+ import { getScrollParent } from "./getScrollParent.js";
3
3
  /**
4
4
  * Toggles event listeners for scroll parent.
5
5
  * Cleans up the event listeners for the previous element and adds them for the new scroll parent.
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/utils/toggleScrollListener.ts"],"sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\nimport type { PositioningVirtualElement } from '../types';\nimport { getScrollParent } from './getScrollParent';\n\n/**\n * Toggles event listeners for scroll parent.\n * Cleans up the event listeners for the previous element and adds them for the new scroll parent.\n * @param next Next element\n * @param prev Previous element\n */\nexport function toggleScrollListener(\n next: HTMLElement | PositioningVirtualElement | null,\n prev: HTMLElement | PositioningVirtualElement | null,\n handler: EventListener,\n): void {\n if (next === prev) {\n return;\n }\n\n if (isHTMLElement(prev)) {\n const prevScrollParent = getScrollParent(prev);\n prevScrollParent.removeEventListener('scroll', handler);\n }\n if (isHTMLElement(next)) {\n const scrollParent = getScrollParent(next);\n scrollParent.addEventListener('scroll', handler);\n }\n}\n"],"names":["isHTMLElement","getScrollParent","toggleScrollListener","next","prev","handler","prevScrollParent","removeEventListener","scrollParent","addEventListener"],"mappings":"AAAA,SAASA,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,eAAe,QAAQ,oBAAoB;AAEpD;;;;;CAKC,GACD,OAAO,SAASC,qBACdC,IAAoD,EACpDC,IAAoD,EACpDC,OAAsB;IAEtB,IAAIF,SAASC,MAAM;QACjB;IACF;IAEA,IAAIJ,cAAcI,OAAO;QACvB,MAAME,mBAAmBL,gBAAgBG;QACzCE,iBAAiBC,mBAAmB,CAAC,UAAUF;IACjD;IACA,IAAIL,cAAcG,OAAO;QACvB,MAAMK,eAAeP,gBAAgBE;QACrCK,aAAaC,gBAAgB,CAAC,UAAUJ;IAC1C;AACF"}
1
+ {"version":3,"sources":["../src/utils/toggleScrollListener.ts"],"sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\nimport type { PositioningVirtualElement } from '../types';\nimport { getScrollParent } from './getScrollParent';\n\n/**\n * Toggles event listeners for scroll parent.\n * Cleans up the event listeners for the previous element and adds them for the new scroll parent.\n * @param next Next element\n * @param prev Previous element\n */\nexport function toggleScrollListener(\n next: HTMLElement | PositioningVirtualElement | null,\n prev: HTMLElement | PositioningVirtualElement | null,\n handler: EventListener,\n): void {\n if (next === prev) {\n return;\n }\n\n if (isHTMLElement(prev)) {\n const prevScrollParent = getScrollParent(prev);\n prevScrollParent.removeEventListener('scroll', handler);\n }\n if (isHTMLElement(next)) {\n const scrollParent = getScrollParent(next);\n scrollParent.addEventListener('scroll', handler);\n }\n}\n"],"names":["isHTMLElement","getScrollParent","toggleScrollListener","next","prev","handler","prevScrollParent","removeEventListener","scrollParent","addEventListener"],"mappings":"AAAA,SAASA,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,eAAe,QAAQ,uBAAoB;AAEpD;;;;;CAKC,GACD,OAAO,SAASC,qBACdC,IAAoD,EACpDC,IAAoD,EACpDC,OAAsB;IAEtB,IAAIF,SAASC,MAAM;QACjB;IACF;IAEA,IAAIJ,cAAcI,OAAO;QACvB,MAAME,mBAAmBL,gBAAgBG;QACzCE,iBAAiBC,mBAAmB,CAAC,UAAUF;IACjD;IACA,IAAIL,cAAcG,OAAO;QACvB,MAAMK,eAAeP,gBAAgBE;QACrCK,aAAaC,gBAAgB,CAAC,UAAUJ;IAC1C;AACF"}
@@ -1,6 +1,6 @@
1
1
  'use client';
2
- import * as React from 'react';
3
- import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
2
+ import * as React from "react";
3
+ import { useIsomorphicLayoutEffect } from "@fluentui/react-utilities";
4
4
  /**
5
5
  * Creates a MutableRef with ref change callback. Is useful as React.useRef() doesn't notify you when its content
6
6
  * changes and mutating the .current property doesn't cause a re-render. An opt-out will be use a callback ref via
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/utils/writeArrowUpdates.ts"],"sourcesContent":["import { MiddlewareData } from '@floating-ui/dom';\n\n/**\n * Writes all DOM element updates after position is computed\n */\nexport function writeArrowUpdates(options: { arrow: HTMLElement | null; middlewareData: MiddlewareData }): void {\n const { arrow, middlewareData } = options;\n if (!middlewareData.arrow || !arrow) {\n return;\n }\n\n const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n Object.assign(arrow.style, {\n left: arrowX !== null && arrowX !== undefined ? `${arrowX}px` : '',\n top: arrowY !== null && arrowY !== undefined ? `${arrowY}px` : '',\n });\n}\n"],"names":["writeArrowUpdates","options","arrow","middlewareData","x","arrowX","y","arrowY","Object","assign","style","left","undefined","top"],"mappings":"AAEA;;CAEC,GACD,OAAO,SAASA,kBAAkBC,OAAsE;IACtG,MAAM,EAAEC,KAAK,EAAEC,cAAc,EAAE,GAAGF;IAClC,IAAI,CAACE,eAAeD,KAAK,IAAI,CAACA,OAAO;QACnC;IACF;IAEA,MAAM,EAAEE,GAAGC,MAAM,EAAEC,GAAGC,MAAM,EAAE,GAAGJ,eAAeD,KAAK;IAErDM,OAAOC,MAAM,CAACP,MAAMQ,KAAK,EAAE;QACzBC,MAAMN,WAAW,QAAQA,WAAWO,YAAY,GAAGP,OAAO,EAAE,CAAC,GAAG;QAChEQ,KAAKN,WAAW,QAAQA,WAAWK,YAAY,GAAGL,OAAO,EAAE,CAAC,GAAG;IACjE;AACF"}
1
+ {"version":3,"sources":["../src/utils/writeArrowUpdates.ts"],"sourcesContent":["import type { MiddlewareData } from '@floating-ui/dom';\n\n/**\n * Writes all DOM element updates after position is computed\n */\nexport function writeArrowUpdates(options: { arrow: HTMLElement | null; middlewareData: MiddlewareData }): void {\n const { arrow, middlewareData } = options;\n if (!middlewareData.arrow || !arrow) {\n return;\n }\n\n const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n Object.assign(arrow.style, {\n left: arrowX !== null && arrowX !== undefined ? `${arrowX}px` : '',\n top: arrowY !== null && arrowY !== undefined ? `${arrowY}px` : '',\n });\n}\n"],"names":["writeArrowUpdates","options","arrow","middlewareData","x","arrowX","y","arrowY","Object","assign","style","left","undefined","top"],"mappings":"AAEA;;CAEC,GACD,OAAO,SAASA,kBAAkBC,OAAsE;IACtG,MAAM,EAAEC,KAAK,EAAEC,cAAc,EAAE,GAAGF;IAClC,IAAI,CAACE,eAAeD,KAAK,IAAI,CAACA,OAAO;QACnC;IACF;IAEA,MAAM,EAAEE,GAAGC,MAAM,EAAEC,GAAGC,MAAM,EAAE,GAAGJ,eAAeD,KAAK;IAErDM,OAAOC,MAAM,CAACP,MAAMQ,KAAK,EAAE;QACzBC,MAAMN,WAAW,QAAQA,WAAWO,YAAY,GAAGP,OAAO,EAAE,CAAC,GAAG;QAChEQ,KAAKN,WAAW,QAAQA,WAAWK,YAAY,GAAGL,OAAO,EAAE,CAAC,GAAG;IACjE;AACF"}
@@ -1,4 +1,4 @@
1
- import { DATA_POSITIONING_ESCAPED, DATA_POSITIONING_HIDDEN, DATA_POSITIONING_INTERSECTING, DATA_POSITIONING_PLACEMENT } from '../constants';
1
+ import { DATA_POSITIONING_ESCAPED, DATA_POSITIONING_HIDDEN, DATA_POSITIONING_INTERSECTING, DATA_POSITIONING_PLACEMENT } from "../constants.js";
2
2
  /**
3
3
  * Writes all container element position updates after the position is computed
4
4
  */ export function writeContainerUpdates(options) {
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/utils/writeContainerupdates.ts"],"sourcesContent":["import type { Placement, MiddlewareData, Strategy, Coords } from '@floating-ui/dom';\nimport {\n DATA_POSITIONING_ESCAPED,\n DATA_POSITIONING_HIDDEN,\n DATA_POSITIONING_INTERSECTING,\n DATA_POSITIONING_PLACEMENT,\n} from '../constants';\n\n/**\n * Writes all container element position updates after the position is computed\n */\nexport function writeContainerUpdates(options: {\n container: HTMLElement | null;\n placement: Placement;\n middlewareData: MiddlewareData;\n /**\n * Layer acceleration can disable subpixel rendering which causes slightly\n * blurry text on low PPI displays, so we want to use 2D transforms\n * instead\n */\n lowPPI: boolean;\n strategy: Strategy;\n coordinates: Coords;\n useTransform?: boolean;\n}): void {\n const { container, placement, middlewareData, strategy, lowPPI, coordinates, useTransform = true } = options;\n if (!container) {\n return;\n }\n container.setAttribute(DATA_POSITIONING_PLACEMENT, placement);\n container.removeAttribute(DATA_POSITIONING_INTERSECTING);\n if (middlewareData.intersectionObserver.intersecting) {\n container.setAttribute(DATA_POSITIONING_INTERSECTING, '');\n }\n\n container.removeAttribute(DATA_POSITIONING_ESCAPED);\n if (middlewareData.hide?.escaped) {\n container.setAttribute(DATA_POSITIONING_ESCAPED, '');\n }\n\n container.removeAttribute(DATA_POSITIONING_HIDDEN);\n if (middlewareData.hide?.referenceHidden) {\n container.setAttribute(DATA_POSITIONING_HIDDEN, '');\n }\n\n // Round so that the coordinates land on device pixels.\n // This prevents blurriness in cases where the browser doesn't apply pixel snapping, such as when other effects like\n // `backdrop-filter: blur()` are applied to the container, and the browser is zoomed in.\n // See https://github.com/microsoft/fluentui/issues/26764 for more info.\n const devicePixelRatio = container.ownerDocument.defaultView?.devicePixelRatio || 1;\n const x = Math.round(coordinates.x * devicePixelRatio) / devicePixelRatio;\n const y = Math.round(coordinates.y * devicePixelRatio) / devicePixelRatio;\n\n Object.assign(container.style, {\n position: strategy,\n });\n\n if (useTransform) {\n Object.assign(container.style, {\n transform: lowPPI ? `translate(${x}px, ${y}px)` : `translate3d(${x}px, ${y}px, 0)`,\n });\n return;\n }\n\n Object.assign(container.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n}\n"],"names":["DATA_POSITIONING_ESCAPED","DATA_POSITIONING_HIDDEN","DATA_POSITIONING_INTERSECTING","DATA_POSITIONING_PLACEMENT","writeContainerUpdates","options","middlewareData","container","placement","strategy","lowPPI","coordinates","useTransform","setAttribute","removeAttribute","intersectionObserver","intersecting","hide","escaped","referenceHidden","devicePixelRatio","ownerDocument","defaultView","x","Math","round","y","Object","assign","style","position","transform","left","top"],"mappings":"AACA,SACEA,wBAAwB,EACxBC,uBAAuB,EACvBC,6BAA6B,EAC7BC,0BAA0B,QACrB,eAAe;AAEtB;;CAEC,GACD,OAAO,SAASC,sBAAsBC,OAarC;QAYKC,sBAKAA,uBAQqBC;IAxBzB,MAAM,EAAEA,SAAS,EAAEC,SAAS,EAAEF,cAAc,EAAEG,QAAQ,EAAEC,MAAM,EAAEC,WAAW,EAAEC,eAAe,IAAI,EAAE,GAAGP;IACrG,IAAI,CAACE,WAAW;QACd;IACF;IACAA,UAAUM,YAAY,CAACV,4BAA4BK;IACnDD,UAAUO,eAAe,CAACZ;IAC1B,IAAII,eAAeS,oBAAoB,CAACC,YAAY,EAAE;QACpDT,UAAUM,YAAY,CAACX,+BAA+B;IACxD;IAEAK,UAAUO,eAAe,CAACd;IAC1B,KAAIM,uBAAAA,eAAeW,IAAI,cAAnBX,2CAAAA,qBAAqBY,OAAO,EAAE;QAChCX,UAAUM,YAAY,CAACb,0BAA0B;IACnD;IAEAO,UAAUO,eAAe,CAACb;IAC1B,KAAIK,wBAAAA,eAAeW,IAAI,cAAnBX,4CAAAA,sBAAqBa,eAAe,EAAE;QACxCZ,UAAUM,YAAY,CAACZ,yBAAyB;IAClD;IAEA,uDAAuD;IACvD,oHAAoH;IACpH,wFAAwF;IACxF,wEAAwE;IACxE,MAAMmB,mBAAmBb,EAAAA,uCAAAA,UAAUc,aAAa,CAACC,WAAW,cAAnCf,2DAAAA,qCAAqCa,gBAAgB,KAAI;IAClF,MAAMG,IAAIC,KAAKC,KAAK,CAACd,YAAYY,CAAC,GAAGH,oBAAoBA;IACzD,MAAMM,IAAIF,KAAKC,KAAK,CAACd,YAAYe,CAAC,GAAGN,oBAAoBA;IAEzDO,OAAOC,MAAM,CAACrB,UAAUsB,KAAK,EAAE;QAC7BC,UAAUrB;IACZ;IAEA,IAAIG,cAAc;QAChBe,OAAOC,MAAM,CAACrB,UAAUsB,KAAK,EAAE;YAC7BE,WAAWrB,SAAS,CAAC,UAAU,EAAEa,EAAE,IAAI,EAAEG,EAAE,GAAG,CAAC,GAAG,CAAC,YAAY,EAAEH,EAAE,IAAI,EAAEG,EAAE,MAAM,CAAC;QACpF;QACA;IACF;IAEAC,OAAOC,MAAM,CAACrB,UAAUsB,KAAK,EAAE;QAC7BG,MAAM,GAAGT,EAAE,EAAE,CAAC;QACdU,KAAK,GAAGP,EAAE,EAAE,CAAC;IACf;AACF"}
1
+ {"version":3,"sources":["../src/utils/writeContainerupdates.ts"],"sourcesContent":["import type { Placement, MiddlewareData, Strategy, Coords } from '@floating-ui/dom';\nimport {\n DATA_POSITIONING_ESCAPED,\n DATA_POSITIONING_HIDDEN,\n DATA_POSITIONING_INTERSECTING,\n DATA_POSITIONING_PLACEMENT,\n} from '../constants';\n\n/**\n * Writes all container element position updates after the position is computed\n */\nexport function writeContainerUpdates(options: {\n container: HTMLElement | null;\n placement: Placement;\n middlewareData: MiddlewareData;\n /**\n * Layer acceleration can disable subpixel rendering which causes slightly\n * blurry text on low PPI displays, so we want to use 2D transforms\n * instead\n */\n lowPPI: boolean;\n strategy: Strategy;\n coordinates: Coords;\n useTransform?: boolean;\n}): void {\n const { container, placement, middlewareData, strategy, lowPPI, coordinates, useTransform = true } = options;\n if (!container) {\n return;\n }\n container.setAttribute(DATA_POSITIONING_PLACEMENT, placement);\n container.removeAttribute(DATA_POSITIONING_INTERSECTING);\n if (middlewareData.intersectionObserver.intersecting) {\n container.setAttribute(DATA_POSITIONING_INTERSECTING, '');\n }\n\n container.removeAttribute(DATA_POSITIONING_ESCAPED);\n if (middlewareData.hide?.escaped) {\n container.setAttribute(DATA_POSITIONING_ESCAPED, '');\n }\n\n container.removeAttribute(DATA_POSITIONING_HIDDEN);\n if (middlewareData.hide?.referenceHidden) {\n container.setAttribute(DATA_POSITIONING_HIDDEN, '');\n }\n\n // Round so that the coordinates land on device pixels.\n // This prevents blurriness in cases where the browser doesn't apply pixel snapping, such as when other effects like\n // `backdrop-filter: blur()` are applied to the container, and the browser is zoomed in.\n // See https://github.com/microsoft/fluentui/issues/26764 for more info.\n const devicePixelRatio = container.ownerDocument.defaultView?.devicePixelRatio || 1;\n const x = Math.round(coordinates.x * devicePixelRatio) / devicePixelRatio;\n const y = Math.round(coordinates.y * devicePixelRatio) / devicePixelRatio;\n\n Object.assign(container.style, {\n position: strategy,\n });\n\n if (useTransform) {\n Object.assign(container.style, {\n transform: lowPPI ? `translate(${x}px, ${y}px)` : `translate3d(${x}px, ${y}px, 0)`,\n });\n return;\n }\n\n Object.assign(container.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n}\n"],"names":["DATA_POSITIONING_ESCAPED","DATA_POSITIONING_HIDDEN","DATA_POSITIONING_INTERSECTING","DATA_POSITIONING_PLACEMENT","writeContainerUpdates","options","middlewareData","container","placement","strategy","lowPPI","coordinates","useTransform","setAttribute","removeAttribute","intersectionObserver","intersecting","hide","escaped","referenceHidden","devicePixelRatio","ownerDocument","defaultView","x","Math","round","y","Object","assign","style","position","transform","left","top"],"mappings":"AACA,SACEA,wBAAwB,EACxBC,uBAAuB,EACvBC,6BAA6B,EAC7BC,0BAA0B,QACrB,kBAAe;AAEtB;;CAEC,GACD,OAAO,SAASC,sBAAsBC,OAarC;QAYKC,sBAKAA,uBAQqBC;IAxBzB,MAAM,EAAEA,SAAS,EAAEC,SAAS,EAAEF,cAAc,EAAEG,QAAQ,EAAEC,MAAM,EAAEC,WAAW,EAAEC,eAAe,IAAI,EAAE,GAAGP;IACrG,IAAI,CAACE,WAAW;QACd;IACF;IACAA,UAAUM,YAAY,CAACV,4BAA4BK;IACnDD,UAAUO,eAAe,CAACZ;IAC1B,IAAII,eAAeS,oBAAoB,CAACC,YAAY,EAAE;QACpDT,UAAUM,YAAY,CAACX,+BAA+B;IACxD;IAEAK,UAAUO,eAAe,CAACd;IAC1B,KAAIM,uBAAAA,eAAeW,IAAI,cAAnBX,2CAAAA,qBAAqBY,OAAO,EAAE;QAChCX,UAAUM,YAAY,CAACb,0BAA0B;IACnD;IAEAO,UAAUO,eAAe,CAACb;IAC1B,KAAIK,wBAAAA,eAAeW,IAAI,cAAnBX,4CAAAA,sBAAqBa,eAAe,EAAE;QACxCZ,UAAUM,YAAY,CAACZ,yBAAyB;IAClD;IAEA,uDAAuD;IACvD,oHAAoH;IACpH,wFAAwF;IACxF,wEAAwE;IACxE,MAAMmB,mBAAmBb,EAAAA,uCAAAA,UAAUc,aAAa,CAACC,WAAW,cAAnCf,2DAAAA,qCAAqCa,gBAAgB,KAAI;IAClF,MAAMG,IAAIC,KAAKC,KAAK,CAACd,YAAYY,CAAC,GAAGH,oBAAoBA;IACzD,MAAMM,IAAIF,KAAKC,KAAK,CAACd,YAAYe,CAAC,GAAGN,oBAAoBA;IAEzDO,OAAOC,MAAM,CAACrB,UAAUsB,KAAK,EAAE;QAC7BC,UAAUrB;IACZ;IAEA,IAAIG,cAAc;QAChBe,OAAOC,MAAM,CAACrB,UAAUsB,KAAK,EAAE;YAC7BE,WAAWrB,SAAS,CAAC,UAAU,EAAEa,EAAE,IAAI,EAAEG,EAAE,GAAG,CAAC,GAAG,CAAC,YAAY,EAAEH,EAAE,IAAI,EAAEG,EAAE,MAAM,CAAC;QACpF;QACA;IACF;IAEAC,OAAOC,MAAM,CAACrB,UAAUsB,KAAK,EAAE;QAC7BG,MAAM,GAAGT,EAAE,EAAE,CAAC;QACdU,KAAK,GAAGP,EAAE,EAAE,CAAC;IACf;AACF"}
@@ -23,6 +23,12 @@ _export(exports, {
23
23
  },
24
24
  POSITIONING_END_EVENT: function() {
25
25
  return POSITIONING_END_EVENT;
26
+ },
27
+ POSITIONING_SLIDE_DIRECTION_VAR_X: function() {
28
+ return POSITIONING_SLIDE_DIRECTION_VAR_X;
29
+ },
30
+ POSITIONING_SLIDE_DIRECTION_VAR_Y: function() {
31
+ return POSITIONING_SLIDE_DIRECTION_VAR_Y;
26
32
  }
27
33
  });
28
34
  const DATA_POSITIONING_INTERSECTING = 'data-popper-is-intersecting';
@@ -30,3 +36,5 @@ const DATA_POSITIONING_ESCAPED = 'data-popper-escaped';
30
36
  const DATA_POSITIONING_HIDDEN = 'data-popper-reference-hidden';
31
37
  const DATA_POSITIONING_PLACEMENT = 'data-popper-placement';
32
38
  const POSITIONING_END_EVENT = 'fui-positioningend';
39
+ const POSITIONING_SLIDE_DIRECTION_VAR_X = '--fui-positioning-slide-direction-x';
40
+ const POSITIONING_SLIDE_DIRECTION_VAR_Y = '--fui-positioning-slide-direction-y';
@@ -0,0 +1 @@
1
+ {"version":3,"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';\nexport const POSITIONING_END_EVENT = 'fui-positioningend';\n\n/**\n * CSS custom properties used to encode the slide direction for positioning-aware enter animations.\n * Set at runtime by `usePositioningSlideDirection` and registered via the CSS\n * `registerProperty()` API so browsers can interpolate them as `<length>` values.\n */\nexport const POSITIONING_SLIDE_DIRECTION_VAR_X = '--fui-positioning-slide-direction-x';\nexport const POSITIONING_SLIDE_DIRECTION_VAR_Y = '--fui-positioning-slide-direction-y';\n"],"names":["DATA_POSITIONING_INTERSECTING","DATA_POSITIONING_ESCAPED","DATA_POSITIONING_HIDDEN","DATA_POSITIONING_PLACEMENT","POSITIONING_END_EVENT","POSITIONING_SLIDE_DIRECTION_VAR_X","POSITIONING_SLIDE_DIRECTION_VAR_Y"],"mappings":";;;;;;;;;;;IACaC,wBAAAA;;;2BACAC;;;iCAFAF;;;8BAGAG;;;yBACAC;;;qCAOAC;;;qCACAC;;;;AAZN,MAAMN,gCAAgC,8BAA8B;AACpE,iCAAiC,sBAAsB;AACvD,MAAME,0BAA0B,+BAA+B;AAC/D,MAAMC,6BAA6B,wBAAwB;AAC3D,MAAMC,wBAAwB,qBAAqB;AAOnD,MAAMC,oCAAoC,sCAAsC;AAChF,MAAMC,oCAAoC,sCAAsC"}
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/createArrowStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport type { GriffelStyle } from '@griffel/react';\n\n/**\n * Options parameter for the createArrowStyles function\n *\n * @internal\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 * 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 *\n * @internal\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 boxSizing: 'border-box',\n position: 'absolute',\n zIndex: -1,\n\n ...(arrowHeight && createArrowHeightStyles(arrowHeight)),\n\n backgroundColor: 'inherit',\n backgroundClip: 'content-box',\n\n borderBottomLeftRadius: `${tokens.borderRadiusSmall} /* @noflip */`,\n transform: 'rotate(var(--fui-positioning-arrow-angle)) /* @noflip */',\n\n height: 'var(--fui-positioning-arrow-height)',\n width: 'var(--fui-positioning-arrow-height)',\n\n '::before': {\n content: '\"\"',\n\n display: 'block',\n backgroundColor: 'inherit',\n margin: `-${borderWidth}`,\n width: '100%',\n height: '100%',\n\n border: `${borderWidth} ${borderStyle} ${borderColor}`,\n borderBottomLeftRadius: `${tokens.borderRadiusSmall} /* @noflip */`,\n\n clipPath: 'polygon(0% 0%, 100% 100%, 0% 100%)',\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: 'var(--fui-positioning-arrow-offset)',\n '--fui-positioning-arrow-angle': '-45deg',\n },\n ':global([data-popper-placement^=\"right\"])': {\n left: `var(--fui-positioning-arrow-offset) /* @noflip */`,\n '--fui-positioning-arrow-angle': '45deg',\n },\n ':global([data-popper-placement^=\"bottom\"])': {\n top: 'var(--fui-positioning-arrow-offset)',\n '--fui-positioning-arrow-angle': '135deg',\n },\n ':global([data-popper-placement^=\"left\"])': {\n right: `var(--fui-positioning-arrow-offset) /* @noflip */`,\n '--fui-positioning-arrow-angle': '225deg',\n },\n };\n}\n\n/**\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 *\n * @internal\n */\nexport function createArrowHeightStyles(arrowHeight: number): GriffelStyle {\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;\n\n return {\n '--fui-positioning-arrow-height': `${edgeLength}px`,\n '--fui-positioning-arrow-offset': `${(edgeLength / 2) * -1}px`,\n };\n}\n"],"names":["tokens","createArrowStyles","options","arrowHeight","borderWidth","borderStyle","borderColor","colorTransparentStroke","boxSizing","position","zIndex","createArrowHeightStyles","backgroundColor","backgroundClip","borderBottomLeftRadius","borderRadiusSmall","transform","height","width","content","display","margin","border","clipPath","bottom","left","top","right","edgeLength"],"mappings":";;;;;;;;;;;2BAkIgBW;eAAAA;;IAnEAV,iBAAAA;;;;4BA/DO,wBAAwB;AA+DxC,2BAA2BC,OAAiC;IACjE,MAAM,EACJC,WAAW,EACXC,cAAc,KAAK,EACnBC,cAAc,OAAO,EACrBC,cAAcN,kBAAAA,CAAOO,sBAAsB,EAC5C,GAAGL;IAEJ,OAAO;QACLM,WAAW;QACXC,UAAU;QACVC,QAAQ,CAAC;QAET,GAAIP,eAAeQ,wBAAwBR,YAAY;QAEvDS,iBAAiB;QACjBC,gBAAgB;QAEhBC,wBAAwB,GAAGd,kBAAAA,CAAOe,iBAAiB,CAAC,cAAc,CAAC;QACnEC,WAAW;QAEXC,QAAQ;QACRC,OAAO;QAEP,YAAY;YACVC,SAAS;YAETC,SAAS;YACTR,iBAAiB;YACjBS,QAAQ,CAAC,CAAC,EAAEjB,aAAa;YACzBc,OAAO;YACPD,QAAQ;YAERK,QAAQ,GAAGlB,YAAY,CAAC,EAAEC,YAAY,CAAC,EAAEC,aAAa;YACtDQ,wBAAwB,GAAGd,kBAAAA,CAAOe,iBAAiB,CAAC,cAAc,CAAC;YAEnEQ,UAAU;QACZ;QAEA,0FAA0F;QAC1F,2CAA2C;YACzCC,QAAQ;YACR,iCAAiC;QACnC;QACA,6CAA6C;YAC3CC,MAAM,CAAC,iDAAiD,CAAC;YACzD,iCAAiC;QACnC;QACA,8CAA8C;YAC5CC,KAAK;YACL,iCAAiC;QACnC;QACA,4CAA4C;YAC1CC,OAAO,CAAC,iDAAiD,CAAC;YAC1D,iCAAiC;QACnC;IACF;AACF;AAUO,iCAAiCxB,WAAmB;IACzD,qGAAqG;IACrG,wEAAwE;IACxE,MAAMyB,aAAa,QAAQzB;IAE3B,OAAO;QACL,kCAAkC,GAAGyB,WAAW,EAAE,CAAC;QACnD,kCAAkC,GAAIA,aAAa,IAAK,CAAC,EAAE,EAAE,CAAC;IAChE;AACF"}
@@ -10,10 +10,10 @@ Object.defineProperty(exports, "createPositionManager", {
10
10
  });
11
11
  const _dom = require("@floating-ui/dom");
12
12
  const _reactutilities = require("@fluentui/react-utilities");
13
- const _utils = require("./utils");
14
- const _listScrollParents = require("./utils/listScrollParents");
15
- const _constants = require("./constants");
16
- const _createResizeObserver = require("./utils/createResizeObserver");
13
+ const _index = require("./utils/index.cjs");
14
+ const _listScrollParents = require("./utils/listScrollParents.cjs");
15
+ const _constants = require("./constants.cjs");
16
+ const _createResizeObserver = require("./utils/createResizeObserver.cjs");
17
17
  function createPositionManager(options) {
18
18
  let isDestroyed = false;
19
19
  const { container, target, arrow, strategy, middleware, placement, useTransform = true, disableUpdateOnResize = false } = options;
@@ -80,11 +80,11 @@ function createPositionManager(options) {
80
80
  if (isDestroyed) {
81
81
  return;
82
82
  }
83
- (0, _utils.writeArrowUpdates)({
83
+ (0, _index.writeArrowUpdates)({
84
84
  arrow,
85
85
  middlewareData
86
86
  });
87
- (0, _utils.writeContainerUpdates)({
87
+ (0, _index.writeContainerUpdates)({
88
88
  container,
89
89
  middlewareData,
90
90
  placement: computedPlacement,
@@ -96,7 +96,14 @@ function createPositionManager(options) {
96
96
  strategy,
97
97
  useTransform
98
98
  });
99
- container.dispatchEvent(new CustomEvent(_constants.POSITIONING_END_EVENT));
99
+ container.dispatchEvent(new CustomEvent(_constants.POSITIONING_END_EVENT, {
100
+ detail: {
101
+ // Cast from Floating UI's Placement to the Fluent-owned PositioningPlacement.
102
+ // These are equivalent string unions; the cast avoids leaking @floating-ui/dom
103
+ // types into the public API surface.
104
+ placement: computedPlacement
105
+ }
106
+ }));
100
107
  }).catch((err)=>{
101
108
  // https://github.com/floating-ui/floating-ui/issues/1845
102
109
  // FIXME for node > 14
@@ -111,7 +118,7 @@ function createPositionManager(options) {
111
118
  }
112
119
  });
113
120
  };
114
- const updatePosition = (0, _utils.debounce)(()=>forceUpdate());
121
+ const updatePosition = (0, _index.debounce)(()=>forceUpdate());
115
122
  const dispose = ()=>{
116
123
  isDestroyed = true;
117
124
  if (targetWindow) {
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/createPositionManager.ts"],"sourcesContent":["import { computePosition } from '@floating-ui/dom';\nimport type { Middleware, Placement, Strategy } from '@floating-ui/dom';\nimport { isHTMLElement } from '@fluentui/react-utilities';\nimport type { OnPositioningEndEventDetail, PositionManager, PositioningPlacement, TargetElement } from './types';\nimport { debounce, writeArrowUpdates, writeContainerUpdates } from './utils';\nimport { listScrollParents } from './utils/listScrollParents';\nimport { POSITIONING_END_EVENT } from './constants';\nimport { createResizeObserver } from './utils/createResizeObserver';\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 * Disables the resize observer that updates position on target or dimension change\n */\n disableUpdateOnResize?: 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 let isDestroyed = false;\n const {\n container,\n target,\n arrow,\n strategy,\n middleware,\n placement,\n useTransform = true,\n disableUpdateOnResize = false,\n } = options;\n const targetWindow = container.ownerDocument.defaultView;\n if (!target || !container || !targetWindow) {\n return {\n updatePosition: () => undefined,\n dispose: () => undefined,\n };\n }\n\n // When the dimensions of the target or the container change - trigger a position update\n const resizeObserver = disableUpdateOnResize\n ? null\n : createResizeObserver(targetWindow, entries => {\n // If content rect dimensions to go 0 -> very likely that `display: none` is being used to hide the element\n // In this case don't update and let users update imperatively\n const shouldUpdateOnResize = entries.every(entry => {\n return entry.contentRect.width > 0 && entry.contentRect.height > 0;\n });\n\n if (shouldUpdateOnResize) {\n updatePosition();\n }\n });\n\n let isFirstUpdate = true;\n const scrollParents: Set<HTMLElement> = new Set<HTMLElement>();\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 listScrollParents(container).forEach(scrollParent => scrollParents.add(scrollParent));\n if (isHTMLElement(target)) {\n listScrollParents(target).forEach(scrollParent => scrollParents.add(scrollParent));\n }\n\n scrollParents.forEach(scrollParent => {\n scrollParent.addEventListener('scroll', updatePosition, { passive: true });\n });\n\n resizeObserver?.observe(container);\n if (isHTMLElement(target)) {\n resizeObserver?.observe(target);\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 container.dispatchEvent(\n new CustomEvent<OnPositioningEndEventDetail>(POSITIONING_END_EVENT, {\n detail: {\n // Cast from Floating UI's Placement to the Fluent-owned PositioningPlacement.\n // These are equivalent string unions; the cast avoids leaking @floating-ui/dom\n // types into the public API surface.\n placement: computedPlacement satisfies PositioningPlacement,\n },\n }),\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 scrollParents.clear();\n\n resizeObserver?.disconnect();\n };\n\n if (targetWindow) {\n targetWindow.addEventListener('scroll', updatePosition, { passive: true });\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","isHTMLElement","debounce","writeArrowUpdates","writeContainerUpdates","listScrollParents","POSITIONING_END_EVENT","createResizeObserver","createPositionManager","options","isDestroyed","container","target","arrow","strategy","middleware","placement","useTransform","disableUpdateOnResize","targetWindow","ownerDocument","defaultView","updatePosition","undefined","dispose","resizeObserver","entries","shouldUpdateOnResize","every","entry","contentRect","width","height","isFirstUpdate","scrollParents","Set","Object","assign","style","position","left","top","margin","forceUpdate","forEach","scrollParent","add","addEventListener","passive","observe","then","x","y","middlewareData","computedPlacement","coordinates","lowPPI","devicePixelRatio","dispatchEvent","CustomEvent","detail","catch","err","process","env","NODE_ENV","console","error","removeEventListener","clear","disconnect"],"mappings":"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"}
@@ -9,7 +9,7 @@ Object.defineProperty(exports, "createSlideStyles", {
9
9
  }
10
10
  });
11
11
  const _reacttheme = require("@fluentui/react-theme");
12
- const _constants = require("./constants");
12
+ const _constants = require("./constants.cjs");
13
13
  function createSlideStyles(mainAxis) {
14
14
  // With 'accumulate' animation composition, these opacity keyframes are added onto the default opacity of 1.
15
15
  const fadeIn = {
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/createSlideStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport type { GriffelStyle } from '@griffel/react';\nimport { DATA_POSITIONING_PLACEMENT } from './constants';\n\n/**\n * Creates animation styles so that positioned elements slide in from the main axis\n * @param mainAxis - distance than the element sides for\n * @returns Griffel styles to spread to a slot\n *\n * @deprecated The popover-related components now use the Slide motion component,\n * which they inject using the `surfaceMotion` slot.\n */\nexport function createSlideStyles(mainAxis: number): GriffelStyle {\n // With 'accumulate' animation composition, these opacity keyframes are added onto the default opacity of 1.\n const fadeIn = {\n from: {\n opacity: -1, // becomes opacity: 0\n },\n to: {\n opacity: 0, // becomes opacity: 1\n },\n };\n\n const slideDistanceVarX = '--fui-positioning-slide-distance-x';\n const slideDistanceVarY = '--fui-positioning-slide-distance-y';\n\n return {\n // NOTE: there was a previous attempt to give fadeIn a separate composition mode:\n // animationComposition: 'replace, accumulate',\n // but somehow this was linked to a performance regression observed in Teams (bug #4255933)\n animationComposition: 'accumulate',\n animationDuration: tokens.durationSlower,\n animationTimingFunction: tokens.curveDecelerateMid,\n [slideDistanceVarX]: `0px`,\n [slideDistanceVarY]: `${mainAxis}px`,\n [`&[${DATA_POSITIONING_PLACEMENT}^=right]`]: {\n [slideDistanceVarX]: `-${mainAxis}px`,\n [slideDistanceVarY]: '0px',\n },\n\n [`&[${DATA_POSITIONING_PLACEMENT}^=bottom]`]: {\n [slideDistanceVarX]: '0px',\n [slideDistanceVarY]: `-${mainAxis}px`,\n },\n\n [`&[${DATA_POSITIONING_PLACEMENT}^=left]`]: {\n [slideDistanceVarX]: `${mainAxis}px`,\n [slideDistanceVarY]: '0px',\n },\n\n animationName: [\n fadeIn,\n {\n from: {\n transform: `translate(var(${slideDistanceVarX}), var(${slideDistanceVarY}))`,\n },\n to: {},\n },\n ],\n\n // Note: at-rules have more specificity in Griffel\n '@media(prefers-reduced-motion)': {\n [`&[${DATA_POSITIONING_PLACEMENT}]`]: {\n animationDuration: '1ms',\n animationName: fadeIn,\n },\n },\n\n // Tested in Firefox 79\n '@supports not (animation-composition: accumulate)': {\n [`&[${DATA_POSITIONING_PLACEMENT}]`]: {\n animationName: fadeIn,\n },\n },\n };\n}\n"],"names":["tokens","DATA_POSITIONING_PLACEMENT","createSlideStyles","mainAxis","fadeIn","from","opacity","to","slideDistanceVarX","slideDistanceVarY","animationComposition","animationDuration","durationSlower","animationTimingFunction","curveDecelerateMid","animationName","transform"],"mappings":";;;;+BAYgBE;;;;;;4BAZO,wBAAwB;2BAEJ,iBAAc;AAUlD,2BAA2BC,QAAgB;IAChD,4GAA4G;IAC5G,MAAMC,SAAS;QACbC,MAAM;YACJC,SAAS,CAAC;QACZ;QACAC,IAAI;YACFD,SAAS;QACX;IACF;IAEA,MAAME,oBAAoB;IAC1B,MAAMC,oBAAoB;IAE1B,OAAO;QACL,iFAAiF;QACjF,iDAAiD;QACjD,2FAA2F;QAC3FC,sBAAsB;QACtBC,mBAAmBX,kBAAAA,CAAOY,cAAc;QACxCC,yBAAyBb,kBAAAA,CAAOc,kBAAkB;QAClD,CAACN,kBAAkB,EAAE,CAAC,GAAG,CAAC;QAC1B,CAACC,kBAAkB,EAAE,GAAGN,SAAS,EAAE,CAAC;QACpC,CAAC,CAAC,EAAE,EAAEF,qCAAAA,CAA2B,QAAQ,CAAC,CAAC,EAAE;YAC3C,CAACO,kBAAkB,EAAE,CAAC,CAAC,EAAEL,SAAS,EAAE,CAAC;YACrC,CAACM,kBAAkB,EAAE;QACvB;QAEA,CAAC,CAAC,EAAE,EAAER,qCAAAA,CAA2B,SAAS,CAAC,CAAC,EAAE;YAC5C,CAACO,kBAAkB,EAAE;YACrB,CAACC,kBAAkB,EAAE,CAAC,CAAC,EAAEN,SAAS,EAAE,CAAC;QACvC;QAEA,CAAC,CAAC,EAAE,EAAEF,qCAAAA,CAA2B,OAAO,CAAC,CAAC,EAAE;YAC1C,CAACO,kBAAkB,EAAE,GAAGL,SAAS,EAAE,CAAC;YACpC,CAACM,kBAAkB,EAAE;QACvB;QAEAM,eAAe;YACbX;YACA;gBACEC,MAAM;oBACJW,WAAW,CAAC,cAAc,EAAER,kBAAkB,OAAO,EAAEC,kBAAkB,EAAE,CAAC;gBAC9E;gBACAF,IAAI,CAAC;YACP;SACD;QAED,kDAAkD;QAClD,kCAAkC;YAChC,CAAC,CAAC,EAAE,EAAEN,qCAAAA,CAA2B,CAAC,CAAC,CAAC,EAAE;gBACpCU,mBAAmB;gBACnBI,eAAeX;YACjB;QACF;QAEA,uBAAuB;QACvB,qDAAqD;YACnD,CAAC,CAAC,EAAE,EAAEH,qCAAAA,CAA2B,CAAC,CAAC,CAAC,EAAE;gBACpCc,eAAeX;YACjB;QACF;IACF;AACF"}
@@ -25,11 +25,11 @@ const _react = require("@griffel/react");
25
25
  const _reactutilities = require("@fluentui/react-utilities");
26
26
  const _react1 = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
27
27
  const _shim = require("use-sync-external-store/shim");
28
- const _getRectCorners = require("./getRectCorners");
29
- const _getMouseAnchor = require("./getMouseAnchor");
30
- const _pointsToSvgPath = require("./pointsToSvgPath");
31
- const _SafeZoneAreastyles = require("./SafeZoneArea.styles");
32
- const _computeOutsideClipPath = require("./computeOutsideClipPath");
28
+ const _getRectCorners = require("./getRectCorners.cjs");
29
+ const _getMouseAnchor = require("./getMouseAnchor.cjs");
30
+ const _pointsToSvgPath = require("./pointsToSvgPath.cjs");
31
+ const _SafeZoneAreastyles = require("./SafeZoneArea.styles.cjs");
32
+ const _computeOutsideClipPath = require("./computeOutsideClipPath.cjs");
33
33
  // ---
34
34
  const EMPTY_RECT = {
35
35
  top: 0,
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/hooks/useSafeZoneArea/SafeZoneArea.tsx"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@griffel/react';\nimport { useId } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useSyncExternalStore } from 'use-sync-external-store/shim';\n\nimport type { createSafeZoneAreaStateStore } from './createSafeZoneAreaStateStore';\nimport { getRectCorners } from './getRectCorners';\nimport { getMouseAnchor } from './getMouseAnchor';\nimport { pointsToSvgPath } from './pointsToSvgPath';\nimport { useStyles } from './SafeZoneArea.styles';\nimport type { Point } from './types';\nimport { computeOutsideClipPath } from './computeOutsideClipPath';\n\nexport type SafeZoneAreaImperativeHandle = {\n updateSVG: (options: { containerRect: DOMRect; targetRect: DOMRect; mouseCoordinates: Point }) => void;\n};\n\nexport type SafeZoneAreaProps = {\n /** Enables debug mode: makes drawn shapes visible. */\n debug: boolean;\n\n /** A reference to the SafeZoneArea imperative handle. */\n imperativeRef: React.Ref<SafeZoneAreaImperativeHandle>;\n\n // eslint-disable-next-line @nx/workspace-consistent-callback-type\n onMouseEnter: (e: React.MouseEvent) => void;\n // eslint-disable-next-line @nx/workspace-consistent-callback-type\n onMouseMove: (e: React.MouseEvent) => void;\n // eslint-disable-next-line @nx/workspace-consistent-callback-type\n onMouseLeave: (e: React.MouseEvent) => void;\n\n stateStore: ReturnType<typeof createSafeZoneAreaStateStore>;\n};\n\n/**\n * @internal\n */\ntype SafeZoneAreaState = {\n containerRect: DOMRect;\n targetRect: DOMRect;\n mouseCoordinates: Point;\n};\n\n// ---\n\nconst EMPTY_RECT: DOMRect = {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n width: 0,\n height: 0,\n x: 0,\n y: 0,\n toJSON() {\n return '';\n },\n};\n\nexport function isSameRect(a: DOMRect, b: DOMRect): boolean {\n return (\n a.top === b.top &&\n a.right === b.right &&\n a.bottom === b.bottom &&\n a.left === b.left &&\n a.width === b.width &&\n a.height === b.height\n );\n}\n\nexport function isSameCoordinates(a: Point, b: Point): boolean {\n return a[0] === b[0] && a[1] === b[1];\n}\n\n// ---\n\n/**\n * A component that renders a safe zone area with SVG shapes. Uses `useSyncExternalStore` to manage its active state\n * to avoid causing re-renders in `useSafeZoneArea()` as the hook might be used in host components like `Menu`.\n *\n * Draws two shapes:\n * - a triangle that points to the target element which is an actual safe zone\n * - a rectangle for a clip path that clips out the target element\n *\n * @internal\n */\nexport const SafeZoneArea = React.memo((props: SafeZoneAreaProps): JSXElement => {\n const { debug, onMouseEnter, onMouseMove, onMouseLeave, stateStore } = props;\n\n const clipPathId = useId();\n const styles = useStyles();\n\n const active = useSyncExternalStore(stateStore.subscribe, stateStore.isActive);\n const svgRef = React.useRef<SVGSVGElement>(null);\n\n const [state, setState] = React.useState<SafeZoneAreaState>(() => ({\n containerRect: EMPTY_RECT,\n targetRect: EMPTY_RECT,\n mouseCoordinates: [0, 0],\n }));\n\n React.useImperativeHandle(\n props.imperativeRef,\n () => ({\n updateSVG(newState) {\n setState(prevState => {\n // Heads up!\n // A small optimization to avoid unnecessary re-renders\n if (\n isSameRect(prevState.containerRect, newState.containerRect) &&\n isSameRect(prevState.targetRect, newState.targetRect) &&\n isSameCoordinates(prevState.mouseCoordinates, newState.mouseCoordinates)\n ) {\n return prevState;\n }\n\n return newState;\n });\n },\n }),\n [],\n );\n\n const { containerRect, targetRect, mouseCoordinates } = state;\n\n const topOffset = Math.min(targetRect.top, containerRect.top);\n const leftOffset = Math.min(targetRect.left, containerRect.left);\n const bottomOffset = Math.max(targetRect.bottom, containerRect.bottom);\n const rightOffset = Math.max(targetRect.right, containerRect.right);\n\n // ---\n\n const containerCorners = getRectCorners(containerRect, [leftOffset, topOffset]);\n const targetCorners = getRectCorners(targetRect, [leftOffset, topOffset]);\n\n // Heads up!\n // The SVG coordinate system starts at the top-left corner of the SVG element,\n // so we need to adjust the mouse coordinates relative to the SVG's top-left corner.\n const relativeMouseCoordinates: Point = [mouseCoordinates[0] - leftOffset, mouseCoordinates[1] - topOffset];\n const mouseAnchor = getMouseAnchor(containerCorners.topLeft, containerCorners.bottomRight, relativeMouseCoordinates);\n\n const triangleA = [mouseAnchor, containerCorners.topLeft, containerCorners.topRight];\n const triangleB = [mouseAnchor, containerCorners.topRight, containerCorners.bottomRight];\n const triangleC = [mouseAnchor, containerCorners.bottomRight, containerCorners.bottomLeft];\n const triangleD = [mouseAnchor, containerCorners.bottomLeft, containerCorners.topLeft];\n\n const svgWidth = rightOffset - leftOffset;\n const svgHeight = bottomOffset - topOffset;\n\n const clipPath = computeOutsideClipPath(\n svgWidth,\n svgHeight,\n {\n x: targetCorners.topLeft[0],\n y: targetCorners.topLeft[1],\n width: targetRect.width,\n height: targetRect.height,\n },\n {\n x: containerCorners.topLeft[0],\n y: containerCorners.topLeft[1],\n width: containerRect.width,\n height: containerRect.height,\n },\n );\n\n return (\n <div className={mergeClasses(styles.wrapper, active && styles.wrapperActive)} data-safe-zone=\"\">\n {active ? (\n <svg\n aria-hidden\n className={styles.svg}\n xmlns=\"http://www.w3.org/2000/svg\"\n ref={svgRef}\n style={{\n width: `${svgWidth}px`,\n height: `${svgHeight}px`,\n transform: `translate(${leftOffset}px, ${topOffset}px)`,\n }}\n >\n <g\n className={mergeClasses(styles.triangle, debug && styles.triangleDebug)}\n clipPath={`url(#${clipPathId})`}\n onMouseEnter={onMouseEnter}\n onMouseMove={onMouseMove}\n onMouseLeave={onMouseLeave}\n >\n <path d={pointsToSvgPath(triangleA)} />\n <path d={pointsToSvgPath(triangleB)} />\n <path d={pointsToSvgPath(triangleC)} />\n <path d={pointsToSvgPath(triangleD)} />\n </g>\n\n <clipPath id={clipPathId}>\n <path d={clipPath} />\n </clipPath>\n\n {debug && <path className={styles.rectDebug} d={clipPath} />}\n </svg>\n ) : null}\n </div>\n );\n});\n"],"names":["mergeClasses","useId","React","useSyncExternalStore","getRectCorners","getMouseAnchor","pointsToSvgPath","useStyles","computeOutsideClipPath","EMPTY_RECT","top","right","bottom","left","width","height","x","y","toJSON","isSameRect","a","b","isSameCoordinates","SafeZoneArea","memo","props","debug","onMouseEnter","onMouseMove","onMouseLeave","stateStore","clipPathId","styles","active","subscribe","isActive","svgRef","useRef","state","setState","useState","containerRect","targetRect","mouseCoordinates","useImperativeHandle","imperativeRef","updateSVG","newState","prevState","topOffset","Math","min","leftOffset","bottomOffset","max","rightOffset","containerCorners","targetCorners","relativeMouseCoordinates","mouseAnchor","topLeft","bottomRight","triangleA","topRight","triangleB","triangleC","bottomLeft","triangleD","svgWidth","svgHeight","clipPath","div","className","wrapper","wrapperActive","data-safe-zone","svg","aria-hidden","xmlns","ref","style","transform","g","triangle","triangleDebug","path","d","id","rectDebug"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/hooks/useSafeZoneArea/SafeZoneArea.tsx"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@griffel/react';\nimport { useId } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useSyncExternalStore } from 'use-sync-external-store/shim';\n\nimport type { createSafeZoneAreaStateStore } from './createSafeZoneAreaStateStore';\nimport { getRectCorners } from './getRectCorners';\nimport { getMouseAnchor } from './getMouseAnchor';\nimport { pointsToSvgPath } from './pointsToSvgPath';\nimport { useStyles } from './SafeZoneArea.styles';\nimport type { Point } from './types';\nimport { computeOutsideClipPath } from './computeOutsideClipPath';\n\nexport type SafeZoneAreaImperativeHandle = {\n updateSVG: (options: { containerRect: DOMRect; targetRect: DOMRect; mouseCoordinates: Point }) => void;\n};\n\nexport type SafeZoneAreaProps = {\n /** Enables debug mode: makes drawn shapes visible. */\n debug: boolean;\n\n /** A reference to the SafeZoneArea imperative handle. */\n imperativeRef: React.Ref<SafeZoneAreaImperativeHandle>;\n\n // eslint-disable-next-line @nx/workspace-consistent-callback-type\n onMouseEnter: (e: React.MouseEvent) => void;\n // eslint-disable-next-line @nx/workspace-consistent-callback-type\n onMouseMove: (e: React.MouseEvent) => void;\n // eslint-disable-next-line @nx/workspace-consistent-callback-type\n onMouseLeave: (e: React.MouseEvent) => void;\n\n stateStore: ReturnType<typeof createSafeZoneAreaStateStore>;\n};\n\n/**\n * @internal\n */\ntype SafeZoneAreaState = {\n containerRect: DOMRect;\n targetRect: DOMRect;\n mouseCoordinates: Point;\n};\n\n// ---\n\nconst EMPTY_RECT: DOMRect = {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n width: 0,\n height: 0,\n x: 0,\n y: 0,\n toJSON() {\n return '';\n },\n};\n\nexport function isSameRect(a: DOMRect, b: DOMRect): boolean {\n return (\n a.top === b.top &&\n a.right === b.right &&\n a.bottom === b.bottom &&\n a.left === b.left &&\n a.width === b.width &&\n a.height === b.height\n );\n}\n\nexport function isSameCoordinates(a: Point, b: Point): boolean {\n return a[0] === b[0] && a[1] === b[1];\n}\n\n// ---\n\n/**\n * A component that renders a safe zone area with SVG shapes. Uses `useSyncExternalStore` to manage its active state\n * to avoid causing re-renders in `useSafeZoneArea()` as the hook might be used in host components like `Menu`.\n *\n * Draws two shapes:\n * - a triangle that points to the target element which is an actual safe zone\n * - a rectangle for a clip path that clips out the target element\n *\n * @internal\n */\nexport const SafeZoneArea = React.memo((props: SafeZoneAreaProps): JSXElement => {\n const { debug, onMouseEnter, onMouseMove, onMouseLeave, stateStore } = props;\n\n const clipPathId = useId();\n const styles = useStyles();\n\n const active = useSyncExternalStore(stateStore.subscribe, stateStore.isActive);\n const svgRef = React.useRef<SVGSVGElement>(null);\n\n const [state, setState] = React.useState<SafeZoneAreaState>(() => ({\n containerRect: EMPTY_RECT,\n targetRect: EMPTY_RECT,\n mouseCoordinates: [0, 0],\n }));\n\n React.useImperativeHandle(\n props.imperativeRef,\n () => ({\n updateSVG(newState) {\n setState(prevState => {\n // Heads up!\n // A small optimization to avoid unnecessary re-renders\n if (\n isSameRect(prevState.containerRect, newState.containerRect) &&\n isSameRect(prevState.targetRect, newState.targetRect) &&\n isSameCoordinates(prevState.mouseCoordinates, newState.mouseCoordinates)\n ) {\n return prevState;\n }\n\n return newState;\n });\n },\n }),\n [],\n );\n\n const { containerRect, targetRect, mouseCoordinates } = state;\n\n const topOffset = Math.min(targetRect.top, containerRect.top);\n const leftOffset = Math.min(targetRect.left, containerRect.left);\n const bottomOffset = Math.max(targetRect.bottom, containerRect.bottom);\n const rightOffset = Math.max(targetRect.right, containerRect.right);\n\n // ---\n\n const containerCorners = getRectCorners(containerRect, [leftOffset, topOffset]);\n const targetCorners = getRectCorners(targetRect, [leftOffset, topOffset]);\n\n // Heads up!\n // The SVG coordinate system starts at the top-left corner of the SVG element,\n // so we need to adjust the mouse coordinates relative to the SVG's top-left corner.\n const relativeMouseCoordinates: Point = [mouseCoordinates[0] - leftOffset, mouseCoordinates[1] - topOffset];\n const mouseAnchor = getMouseAnchor(containerCorners.topLeft, containerCorners.bottomRight, relativeMouseCoordinates);\n\n const triangleA = [mouseAnchor, containerCorners.topLeft, containerCorners.topRight];\n const triangleB = [mouseAnchor, containerCorners.topRight, containerCorners.bottomRight];\n const triangleC = [mouseAnchor, containerCorners.bottomRight, containerCorners.bottomLeft];\n const triangleD = [mouseAnchor, containerCorners.bottomLeft, containerCorners.topLeft];\n\n const svgWidth = rightOffset - leftOffset;\n const svgHeight = bottomOffset - topOffset;\n\n const clipPath = computeOutsideClipPath(\n svgWidth,\n svgHeight,\n {\n x: targetCorners.topLeft[0],\n y: targetCorners.topLeft[1],\n width: targetRect.width,\n height: targetRect.height,\n },\n {\n x: containerCorners.topLeft[0],\n y: containerCorners.topLeft[1],\n width: containerRect.width,\n height: containerRect.height,\n },\n );\n\n return (\n <div className={mergeClasses(styles.wrapper, active && styles.wrapperActive)} data-safe-zone=\"\">\n {active ? (\n <svg\n aria-hidden\n className={styles.svg}\n xmlns=\"http://www.w3.org/2000/svg\"\n ref={svgRef}\n style={{\n width: `${svgWidth}px`,\n height: `${svgHeight}px`,\n transform: `translate(${leftOffset}px, ${topOffset}px)`,\n }}\n >\n <g\n className={mergeClasses(styles.triangle, debug && styles.triangleDebug)}\n clipPath={`url(#${clipPathId})`}\n onMouseEnter={onMouseEnter}\n onMouseMove={onMouseMove}\n onMouseLeave={onMouseLeave}\n >\n <path d={pointsToSvgPath(triangleA)} />\n <path d={pointsToSvgPath(triangleB)} />\n <path d={pointsToSvgPath(triangleC)} />\n <path d={pointsToSvgPath(triangleD)} />\n </g>\n\n <clipPath id={clipPathId}>\n <path d={clipPath} />\n </clipPath>\n\n {debug && <path className={styles.rectDebug} d={clipPath} />}\n </svg>\n ) : null}\n </div>\n );\n});\n"],"names":["mergeClasses","useId","React","useSyncExternalStore","getRectCorners","getMouseAnchor","pointsToSvgPath","useStyles","computeOutsideClipPath","EMPTY_RECT","top","right","bottom","left","width","height","x","y","toJSON","isSameRect","a","b","isSameCoordinates","SafeZoneArea","memo","props","debug","onMouseEnter","onMouseMove","onMouseLeave","stateStore","clipPathId","styles","active","subscribe","isActive","svgRef","useRef","state","setState","useState","containerRect","targetRect","mouseCoordinates","useImperativeHandle","imperativeRef","updateSVG","newState","prevState","topOffset","Math","min","leftOffset","bottomOffset","max","rightOffset","containerCorners","targetCorners","relativeMouseCoordinates","mouseAnchor","topLeft","bottomRight","triangleA","topRight","triangleB","triangleC","bottomLeft","triangleD","svgWidth","svgHeight","clipPath","div","className","wrapper","wrapperActive","data-safe-zone","svg","aria-hidden","xmlns","ref","style","transform","g","triangle","triangleDebug","path","d","id","rectDebug"],"mappings":"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"}
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  "use strict";
2
3
  Object.defineProperty(exports, "__esModule", {
3
4
  value: true
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["SafeZoneArea.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles } from \"@griffel/react\";\nimport { tokens } from \"@fluentui/react-theme\";\nexport const useStyles = makeStyles({\n wrapper: {\n display: 'none',\n height: 0,\n width: 0,\n pointerEvents: 'none'\n },\n wrapperActive: {\n display: 'block'\n },\n svg: {\n fill: 'transparent',\n pointerEvents: 'none',\n position: 'fixed',\n top: 0,\n left: 0\n },\n triangle: {\n pointerEvents: 'auto'\n },\n triangleDebug: {\n cursor: 'crosshair',\n fill: `color-mix(in srgb, ${tokens.colorPaletteGreenBackground3} 20%, transparent)`\n },\n rectDebug: {\n fill: `color-mix(in srgb, ${tokens.colorPaletteRedBackground3} 20%, transparent)`\n }\n});\n"],"names":["__styles","tokens","useStyles","wrapper","mc9l5x","Bqenvij","a9b677","Bkecrkj","wrapperActive","svg","Bkfmm31","qhf8xq","Bhzewxz","oyh7mz","triangle","triangleDebug","Bceei9c","rectDebug","d"],"mappings":"AAAA,YAAY;;;;;+BAGCE,SAAS;;;;;;uBAFK,gBAAgB;AAEpC,kBAAe,WAAA,OAAGF,eAAA,EAAA;IAAAG,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,aAAA,EAAA;QAAAJ,MAAA,EAAA;IAAA;IAAAK,GAAA,EAAA;QAAAC,OAAA,EAAA;QAAAH,OAAA,EAAA;QAAAI,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,QAAA,EAAA;QAAAP,OAAA,EAAA;IAAA;IAAAQ,aAAA,EAAA;QAAAC,OAAA,EAAA;QAAAN,OAAA,EAAA;IAAA;IAAAO,SAAA,EAAA;QAAAP,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAQ,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CA2BxB,CAAC"}
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  "use strict";
2
3
  Object.defineProperty(exports, "__esModule", {
3
4
  value: true
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/hooks/useSafeZoneArea/SafeZoneArea.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const useStyles = makeStyles({\n wrapper: {\n display: 'none',\n height: 0,\n width: 0,\n pointerEvents: 'none',\n },\n wrapperActive: {\n display: 'block',\n },\n svg: {\n fill: 'transparent',\n pointerEvents: 'none',\n position: 'fixed',\n top: 0,\n left: 0,\n },\n triangle: {\n pointerEvents: 'auto',\n },\n triangleDebug: {\n cursor: 'crosshair',\n fill: `color-mix(in srgb, ${tokens.colorPaletteGreenBackground3} 20%, transparent)`,\n },\n rectDebug: {\n fill: `color-mix(in srgb, ${tokens.colorPaletteRedBackground3} 20%, transparent)`,\n },\n});\n"],"names":["makeStyles","tokens","useStyles","wrapper","display","height","width","pointerEvents","wrapperActive","svg","fill","position","top","left","triangle","triangleDebug","cursor","colorPaletteGreenBackground3","rectDebug","colorPaletteRedBackground3"],"mappings":"AAAA;;;;;+BAKaE;;;;;;uBAHc,iBAAiB;4BACrB,wBAAwB;AAExC,sBAAkBF,iBAAAA,EAAW;IAClCG,SAAS;QACPC,SAAS;QACTC,QAAQ;QACRC,OAAO;QACPC,eAAe;IACjB;IACAC,eAAe;QACbJ,SAAS;IACX;IACAK,KAAK;QACHC,MAAM;QACNH,eAAe;QACfI,UAAU;QACVC,KAAK;QACLC,MAAM;IACR;IACAC,UAAU;QACRP,eAAe;IACjB;IACAQ,eAAe;QACbC,QAAQ;QACRN,MAAM,CAAC,mBAAmB,EAAET,kBAAAA,CAAOgB,4BAA4B,CAAC,kBAAkB,CAAC;IACrF;IACAC,WAAW;QACTR,MAAM,CAAC,mBAAmB,EAAET,kBAAAA,CAAOkB,0BAA0B,CAAC,kBAAkB,CAAC;IACnF;AACF,GAAG"}
@@ -12,8 +12,8 @@ Object.defineProperty(exports, "useSafeZoneArea", {
12
12
  const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
13
13
  const _reactutilities = require("@fluentui/react-utilities");
14
14
  const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
15
- const _createSafeZoneAreaStateStore = require("./createSafeZoneAreaStateStore");
16
- const _SafeZoneArea = require("./SafeZoneArea");
15
+ const _createSafeZoneAreaStateStore = require("./createSafeZoneAreaStateStore.cjs");
16
+ const _SafeZoneArea = require("./SafeZoneArea.cjs");
17
17
  /**
18
18
  * Time in milliseconds after which the safe zone area will be cleared if no mouse movement is detected.
19
19
  *
@@ -30,6 +30,7 @@ function useSafeZoneArea({ debug = false, disabled = false, onSafeZoneEnter, onS
30
30
  x: 0,
31
31
  y: 0
32
32
  });
33
+ // eslint-disable-next-line react-hooks/preserve-manual-memoization
33
34
  const containerListenerRef = _react.useMemo(()=>{
34
35
  if (disabled) {
35
36
  return ()=>{
@@ -53,6 +54,7 @@ function useSafeZoneArea({ debug = false, disabled = false, onSafeZoneEnter, onS
53
54
  disabled,
54
55
  stateStore
55
56
  ]);
57
+ // eslint-disable-next-line react-hooks/preserve-manual-memoization
56
58
  const targetListenerRef = _react.useMemo(()=>{
57
59
  if (disabled) {
58
60
  return ()=>{
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/hooks/useSafeZoneArea/useSafeZoneArea.tsx"],"sourcesContent":["'use client';\n\nimport { useAnimationFrame, useEventCallback, useMergedRefs, useTimeout } from '@fluentui/react-utilities';\nimport type { JSXElement, RefObjectFunction } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { createSafeZoneAreaStateStore } from './createSafeZoneAreaStateStore';\nimport { type SafeZoneAreaImperativeHandle, SafeZoneArea } from './SafeZoneArea';\n\nexport type UseSafeZoneOptions = {\n /** Enables debug mode: makes drawn shapes visible. */\n debug?: boolean;\n\n /** Disables the safe zone area. */\n disabled?: boolean;\n\n /** The time in milliseconds to wait before clearing the safe zone. */\n timeout?: number;\n\n /** Called when the mouse enters the safe zone. */\n onSafeZoneEnter?: (e: React.MouseEvent) => void;\n\n /** Called when the mouse moves within the safe zone. */\n onSafeZoneMove?: (e: React.MouseEvent) => void;\n\n /** Called when the mouse leaves the safe zone. */\n onSafeZoneLeave?: (e: React.MouseEvent) => void;\n\n /** Called when the safe zone times out, even if a cursor is still over a safe zone. */\n onSafeZoneTimeout?: () => void;\n};\n\n/**\n * Time in milliseconds after which the safe zone area will be cleared if no mouse movement is detected.\n *\n * Only affects the target element, not the safe zone area itself.\n */\nconst MOUSE_MOVE_TARGET_POLLING_TIMEOUT = 2000;\n\n// ---\n\nexport function useSafeZoneArea({\n debug = false,\n disabled = false,\n\n onSafeZoneEnter,\n onSafeZoneMove,\n onSafeZoneLeave,\n onSafeZoneTimeout,\n\n timeout = 1500,\n}: UseSafeZoneOptions = {}): {\n containerRef: RefObjectFunction<HTMLElement>;\n targetRef: RefObjectFunction<HTMLElement>;\n elementToRender: JSXElement | null;\n} {\n const [stateStore] = React.useState(createSafeZoneAreaStateStore);\n\n const safeZoneAreaRef = React.useRef<SafeZoneAreaImperativeHandle>(null);\n const containerRef = React.useRef<HTMLElement>(null);\n const targetRef = React.useRef<HTMLElement>(null);\n\n const [setSafeZoneCloseTimeout, clearSafeZoneCloseTimeout] = useTimeout();\n const [requestUpdateFrame, clearUpdateFrame] = useAnimationFrame();\n\n const mouseCoordinatesRef = React.useRef<{ x: number; y: number }>({ x: 0, y: 0 });\n\n // eslint-disable-next-line react-hooks/preserve-manual-memoization\n const containerListenerRef = React.useMemo(() => {\n if (disabled) {\n return () => {\n // do nothing\n };\n }\n\n let containerEl: HTMLElement | null = null;\n\n function onContainerMouseEnter() {\n clearSafeZoneCloseTimeout();\n stateStore.toggleActive(false);\n }\n\n return (el: HTMLElement | null) => {\n if (el === null) {\n containerEl?.removeEventListener('mouseenter', onContainerMouseEnter);\n }\n\n containerEl = el;\n el?.addEventListener('mouseenter', onContainerMouseEnter);\n };\n }, [clearSafeZoneCloseTimeout, disabled, stateStore]);\n\n // eslint-disable-next-line react-hooks/preserve-manual-memoization\n const targetListenerRef = React.useMemo(() => {\n if (disabled) {\n return () => {\n // do nothing\n };\n }\n\n let targetEl: HTMLElement | null = null;\n\n function onTargetMouseMove(e: MouseEvent) {\n mouseCoordinatesRef.current = { x: e.clientX, y: e.clientY };\n\n if (!stateStore.isActive()) {\n stateStore.toggleActive(true);\n }\n\n setSafeZoneCloseTimeout(() => {\n stateStore.toggleActive(false);\n }, MOUSE_MOVE_TARGET_POLLING_TIMEOUT);\n }\n\n return (el: HTMLElement | null) => {\n if (el === null) {\n clearUpdateFrame();\n clearSafeZoneCloseTimeout();\n\n targetEl?.removeEventListener('mousemove', onTargetMouseMove);\n }\n\n targetEl = el;\n el?.addEventListener('mousemove', onTargetMouseMove);\n };\n }, [clearUpdateFrame, clearSafeZoneCloseTimeout, disabled, stateStore, setSafeZoneCloseTimeout]);\n\n const onSvgMouseEnter = useEventCallback((e: React.MouseEvent) => {\n onSafeZoneEnter?.(e);\n\n setSafeZoneCloseTimeout(() => {\n stateStore.toggleActive(false);\n onSafeZoneTimeout?.();\n }, timeout);\n });\n\n const onSvgMouseMove = useEventCallback((e: React.MouseEvent) => {\n setSafeZoneCloseTimeout(() => {\n stateStore.toggleActive(false);\n onSafeZoneTimeout?.();\n }, timeout);\n onSafeZoneMove?.(e);\n });\n\n const onSvgMouseLeave = useEventCallback((e: React.MouseEvent) => {\n onSafeZoneLeave?.(e);\n });\n\n React.useEffect(() => {\n return stateStore.subscribe(isActive => {\n if (isActive) {\n function updateSVGs() {\n const containerEl = containerRef.current;\n const targetEl = targetRef.current;\n\n if (containerEl && targetEl) {\n safeZoneAreaRef.current?.updateSVG({\n containerRect: containerEl.getBoundingClientRect(),\n mouseCoordinates: [mouseCoordinatesRef.current.x, mouseCoordinatesRef.current.y],\n targetRect: targetEl.getBoundingClientRect(),\n });\n }\n\n requestUpdateFrame(updateSVGs);\n }\n\n updateSVGs();\n return;\n }\n\n clearUpdateFrame();\n });\n }, [clearUpdateFrame, requestUpdateFrame, stateStore]);\n\n return {\n containerRef: useMergedRefs(containerRef, containerListenerRef),\n targetRef: useMergedRefs(targetRef, targetListenerRef),\n\n elementToRender: React.useMemo(\n () =>\n disabled ? null : (\n <SafeZoneArea\n debug={debug}\n onMouseEnter={onSvgMouseEnter}\n onMouseMove={onSvgMouseMove}\n onMouseLeave={onSvgMouseLeave}\n imperativeRef={safeZoneAreaRef}\n stateStore={stateStore}\n />\n ),\n [disabled, debug, onSvgMouseEnter, onSvgMouseMove, onSvgMouseLeave, stateStore],\n ),\n };\n}\n"],"names":["useAnimationFrame","useEventCallback","useMergedRefs","useTimeout","React","createSafeZoneAreaStateStore","SafeZoneArea","MOUSE_MOVE_TARGET_POLLING_TIMEOUT","useSafeZoneArea","debug","disabled","onSafeZoneEnter","onSafeZoneMove","onSafeZoneLeave","onSafeZoneTimeout","timeout","stateStore","useState","safeZoneAreaRef","useRef","containerRef","targetRef","setSafeZoneCloseTimeout","clearSafeZoneCloseTimeout","requestUpdateFrame","clearUpdateFrame","mouseCoordinatesRef","x","y","containerListenerRef","useMemo","containerEl","onContainerMouseEnter","toggleActive","el","removeEventListener","addEventListener","targetListenerRef","targetEl","onTargetMouseMove","e","current","clientX","clientY","isActive","onSvgMouseEnter","onSvgMouseMove","onSvgMouseLeave","useEffect","subscribe","updateSVGs","updateSVG","containerRect","getBoundingClientRect","mouseCoordinates","targetRect","elementToRender","onMouseEnter","onMouseMove","onMouseLeave","imperativeRef"],"mappings":"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"}
@@ -9,6 +9,12 @@ function _export(target, all) {
9
9
  });
10
10
  }
11
11
  _export(exports, {
12
+ POSITIONING_SLIDE_DIRECTION_VAR_X: function() {
13
+ return _constants.POSITIONING_SLIDE_DIRECTION_VAR_X;
14
+ },
15
+ POSITIONING_SLIDE_DIRECTION_VAR_Y: function() {
16
+ return _constants.POSITIONING_SLIDE_DIRECTION_VAR_Y;
17
+ },
12
18
  PositioningConfigurationProvider: function() {
13
19
  return _PositioningConfigurationContext.PositioningConfigurationProvider;
14
20
  },
@@ -36,15 +42,20 @@ _export(exports, {
36
42
  usePositioningMouseTarget: function() {
37
43
  return _usePositioningMouseTarget.usePositioningMouseTarget;
38
44
  },
45
+ usePositioningSlideDirection: function() {
46
+ return _usePositioningSlideDirection.usePositioningSlideDirection;
47
+ },
39
48
  useSafeZoneArea: function() {
40
49
  return _useSafeZoneArea.useSafeZoneArea;
41
50
  }
42
51
  });
43
- const _createVirtualElementFromClick = require("./createVirtualElementFromClick");
44
- const _createArrowStyles = require("./createArrowStyles");
45
- const _createSlideStyles = require("./createSlideStyles");
46
- const _PositioningConfigurationContext = require("./PositioningConfigurationContext");
47
- const _usePositioning = require("./usePositioning");
48
- const _usePositioningMouseTarget = require("./usePositioningMouseTarget");
49
- const _useSafeZoneArea = require("./hooks/useSafeZoneArea/useSafeZoneArea");
50
- const _index = require("./utils/index");
52
+ const _createVirtualElementFromClick = require("./createVirtualElementFromClick.cjs");
53
+ const _usePositioningSlideDirection = require("./usePositioningSlideDirection.cjs");
54
+ const _constants = require("./constants.cjs");
55
+ const _createArrowStyles = require("./createArrowStyles.cjs");
56
+ const _createSlideStyles = require("./createSlideStyles.cjs");
57
+ const _PositioningConfigurationContext = require("./PositioningConfigurationContext.cjs");
58
+ const _usePositioning = require("./usePositioning.cjs");
59
+ const _usePositioningMouseTarget = require("./usePositioningMouseTarget.cjs");
60
+ const _useSafeZoneArea = require("./hooks/useSafeZoneArea/useSafeZoneArea.cjs");
61
+ const _index = require("./utils/index.cjs");
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { createVirtualElementFromClick } from './createVirtualElementFromClick';\nexport { usePositioningSlideDirection } from './usePositioningSlideDirection';\nexport { POSITIONING_SLIDE_DIRECTION_VAR_X, POSITIONING_SLIDE_DIRECTION_VAR_Y } from './constants';\nexport { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport { createSlideStyles } from './createSlideStyles';\nexport type { CreateArrowStylesOptions } from './createArrowStyles';\n\nexport { PositioningConfigurationProvider } from './PositioningConfigurationContext';\n\nexport { usePositioning } from './usePositioning';\nexport { usePositioningMouseTarget } from './usePositioningMouseTarget';\nexport { useSafeZoneArea } from './hooks/useSafeZoneArea/useSafeZoneArea';\nexport type { UseSafeZoneOptions } from './hooks/useSafeZoneArea/useSafeZoneArea';\nexport { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';\n\nexport type {\n Alignment,\n AutoSize,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n Boundary,\n Offset,\n OffsetFunction,\n OffsetFunctionParam,\n OffsetObject,\n OffsetShorthand,\n Position,\n PositioningBoundary,\n PositioningImperativeRef,\n PositioningProps,\n PositioningRect,\n PositioningShorthand,\n PositioningShorthandValue,\n PositioningVirtualElement,\n SetVirtualMouseTarget,\n PositioningConfigurationFn,\n PositioningConfigurationFnOptions,\n} from './types';\n"],"names":["createVirtualElementFromClick","usePositioningSlideDirection","POSITIONING_SLIDE_DIRECTION_VAR_X","POSITIONING_SLIDE_DIRECTION_VAR_Y","createArrowHeightStyles","createArrowStyles","createSlideStyles","PositioningConfigurationProvider","usePositioning","usePositioningMouseTarget","useSafeZoneArea","resolvePositioningShorthand","mergeArrowOffset"],"mappings":";;;;;;;;;;;IAESE,iCAAiC;;;;eAAEC,4CAAiC;;;eAMpEI,iEAAgC;;IALhCH;yDAAuB;;;eAAEC,oCAAiB;;;eAE1CC,oCAAiB;;iCALY;eAA7BN;;;eAc6BY,uBAAgB;;+BAAlB;eAA3BD;;;eAJAH,8BAAc;;IACdC;mEAAyB;;;eAVzBR,0DAA4B;;;eAW5BS,gCAAe;;;+CAZsB,qCAAkC;8CACnC,oCAAiC;2BACO,iBAAc;mCACxC,yBAAsB;mCAE/C,yBAAsB;iDAGP,uCAAoC;gCAEtD,sBAAmB;2CACR,iCAA8B;iCACxC,6CAA0C;uBAEZ,mBAAgB"}
@@ -8,7 +8,7 @@ Object.defineProperty(exports, "coverTarget", {
8
8
  return coverTarget;
9
9
  }
10
10
  });
11
- const _index = require("../utils/index");
11
+ const _index = require("../utils/index.cjs");
12
12
  function coverTarget() {
13
13
  return {
14
14
  name: 'coverTarget',
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/middleware/coverTarget.ts"],"sourcesContent":["import type { Middleware } from '@floating-ui/dom';\nimport { parseFloatingUIPlacement } from '../utils/index';\n\nexport function coverTarget(): Middleware {\n return {\n name: 'coverTarget',\n fn: middlewareArguments => {\n const { placement, rects, x, y } = middlewareArguments;\n const basePlacement = parseFloatingUIPlacement(placement).side;\n const newCoords = { x, y };\n\n switch (basePlacement) {\n case 'bottom':\n newCoords.y -= rects.reference.height;\n break;\n case 'top':\n newCoords.y += rects.reference.height;\n break;\n case 'left':\n newCoords.x += rects.reference.width;\n break;\n case 'right':\n newCoords.x -= rects.reference.width;\n break;\n }\n\n return newCoords;\n },\n };\n}\n"],"names":["parseFloatingUIPlacement","coverTarget","name","fn","middlewareArguments","placement","rects","x","y","basePlacement","side","newCoords","reference","height","width"],"mappings":";;;;+BAGgBC;;;;;;uBAFyB,iBAAiB;AAEnD;IACL,OAAO;QACLC,MAAM;QACNC,IAAIC,CAAAA;YACF,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAEC,CAAC,EAAEC,CAAC,EAAE,GAAGJ;YACnC,MAAMK,gBAAgBT,mCAAAA,EAAyBK,WAAWK,IAAI;YAC9D,MAAMC,YAAY;gBAAEJ;gBAAGC;YAAE;YAEzB,OAAQC;gBACN,KAAK;oBACHE,UAAUH,CAAC,IAAIF,MAAMM,SAAS,CAACC,MAAM;oBACrC;gBACF,KAAK;oBACHF,UAAUH,CAAC,IAAIF,MAAMM,SAAS,CAACC,MAAM;oBACrC;gBACF,KAAK;oBACHF,UAAUJ,CAAC,IAAID,MAAMM,SAAS,CAACE,KAAK;oBACpC;gBACF,KAAK;oBACHH,UAAUJ,CAAC,IAAID,MAAMM,SAAS,CAACE,KAAK;oBACpC;YACJ;YAEA,OAAOH;QACT;IACF;AACF"}
1
+ {"version":3,"sources":["../src/middleware/coverTarget.ts"],"sourcesContent":["import type { Middleware } from '@floating-ui/dom';\nimport { parseFloatingUIPlacement } from '../utils/index';\n\nexport function coverTarget(): Middleware {\n return {\n name: 'coverTarget',\n fn: middlewareArguments => {\n const { placement, rects, x, y } = middlewareArguments;\n const basePlacement = parseFloatingUIPlacement(placement).side;\n const newCoords = { x, y };\n\n switch (basePlacement) {\n case 'bottom':\n newCoords.y -= rects.reference.height;\n break;\n case 'top':\n newCoords.y += rects.reference.height;\n break;\n case 'left':\n newCoords.x += rects.reference.width;\n break;\n case 'right':\n newCoords.x -= rects.reference.width;\n break;\n }\n\n return newCoords;\n },\n };\n}\n"],"names":["parseFloatingUIPlacement","coverTarget","name","fn","middlewareArguments","placement","rects","x","y","basePlacement","side","newCoords","reference","height","width"],"mappings":";;;;+BAGgBC;;;;;;uBAFyB,oBAAiB;AAEnD;IACL,OAAO;QACLC,MAAM;QACNC,IAAIC,CAAAA;YACF,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAEC,CAAC,EAAEC,CAAC,EAAE,GAAGJ;YACnC,MAAMK,gBAAgBT,mCAAAA,EAAyBK,WAAWK,IAAI;YAC9D,MAAMC,YAAY;gBAAEJ;gBAAGC;YAAE;YAEzB,OAAQC;gBACN,KAAK;oBACHE,UAAUH,CAAC,IAAIF,MAAMM,SAAS,CAACC,MAAM;oBACrC;gBACF,KAAK;oBACHF,UAAUH,CAAC,IAAIF,MAAMM,SAAS,CAACC,MAAM;oBACrC;gBACF,KAAK;oBACHF,UAAUJ,CAAC,IAAID,MAAMM,SAAS,CAACE,KAAK;oBACpC;gBACF,KAAK;oBACHH,UAAUJ,CAAC,IAAID,MAAMM,SAAS,CAACE,KAAK;oBACpC;YACJ;YAEA,OAAOH;QACT;IACF;AACF"}
@@ -9,7 +9,7 @@ Object.defineProperty(exports, "flip", {
9
9
  }
10
10
  });
11
11
  const _dom = require("@floating-ui/dom");
12
- const _index = require("../utils/index");
12
+ const _index = require("../utils/index.cjs");
13
13
  function flip(options) {
14
14
  const { hasScrollableElement, flipBoundary, container, fallbackPositions = [], isRtl } = options;
15
15
  const fallbackPlacements = fallbackPositions.reduce((acc, shorthand)=>{
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/middleware/flip.ts"],"sourcesContent":["import type { Placement, Middleware } from '@floating-ui/dom';\nimport { flip as baseFlip } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\nimport { getBoundary, resolvePositioningShorthand, toFloatingUIPlacement } from '../utils/index';\n\nexport interface FlipMiddlewareOptions extends Pick<PositioningOptions, 'flipBoundary' | 'fallbackPositions'> {\n hasScrollableElement?: boolean;\n container: HTMLElement | null;\n isRtl?: boolean;\n}\n\nexport function flip(options: FlipMiddlewareOptions): Middleware {\n const { hasScrollableElement, flipBoundary, container, fallbackPositions = [], isRtl } = options;\n\n const fallbackPlacements = fallbackPositions.reduce<Placement[]>((acc, shorthand) => {\n const { position, align } = resolvePositioningShorthand(shorthand);\n const placement = toFloatingUIPlacement(align, position, isRtl);\n if (placement) {\n acc.push(placement);\n }\n return acc;\n }, []);\n\n return baseFlip({\n ...(hasScrollableElement && { boundary: 'clippingAncestors' }),\n ...(flipBoundary && { altBoundary: true, boundary: getBoundary(container, flipBoundary) }),\n fallbackStrategy: 'bestFit',\n ...(fallbackPlacements.length && { fallbackPlacements }),\n });\n}\n"],"names":["flip","baseFlip","getBoundary","resolvePositioningShorthand","toFloatingUIPlacement","options","hasScrollableElement","flipBoundary","container","fallbackPositions","isRtl","fallbackPlacements","reduce","acc","shorthand","position","align","placement","push","boundary","altBoundary","fallbackStrategy","length"],"mappings":";;;;+BAWgBA;;;;;;qBAViB,mBAAmB;uBAE4B,oBAAiB;AAQ1F,cAAcK,OAA8B;IACjD,MAAM,EAAEC,oBAAoB,EAAEC,YAAY,EAAEC,SAAS,EAAEC,oBAAoB,EAAE,EAAEC,KAAK,EAAE,GAAGL;IAEzF,MAAMM,qBAAqBF,kBAAkBG,MAAM,CAAc,CAACC,KAAKC;QACrE,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,OAAGb,kCAAAA,EAA4BW;QACxD,MAAMG,gBAAYb,4BAAAA,EAAsBY,OAAOD,UAAUL;QACzD,IAAIO,WAAW;YACbJ,IAAIK,IAAI,CAACD;QACX;QACA,OAAOJ;IACT,GAAG,EAAE;IAEL,WAAOZ,SAAAA,EAAS;QACd,GAAIK,wBAAwB;YAAEa,UAAU;QAAoB,CAAC;QAC7D,GAAIZ,gBAAgB;YAAEa,aAAa;YAAMD,cAAUjB,kBAAAA,EAAYM,WAAWD;QAAc,CAAC;QACzFc,kBAAkB;QAClB,GAAIV,mBAAmBW,MAAM,IAAI;YAAEX;QAAmB,CAAC;IACzD;AACF"}
@@ -37,10 +37,10 @@ _export(exports, {
37
37
  return _shift.shift;
38
38
  }
39
39
  });
40
- const _coverTarget = require("./coverTarget");
41
- const _flip = require("./flip");
42
- const _intersecting = require("./intersecting");
43
- const _maxSize = require("./maxSize");
44
- const _offset = require("./offset");
45
- const _shift = require("./shift");
46
- const _matchTargetSize = require("./matchTargetSize");
40
+ const _coverTarget = require("./coverTarget.cjs");
41
+ const _flip = require("./flip.cjs");
42
+ const _intersecting = require("./intersecting.cjs");
43
+ const _maxSize = require("./maxSize.cjs");
44
+ const _offset = require("./offset.cjs");
45
+ const _shift = require("./shift.cjs");
46
+ const _matchTargetSize = require("./matchTargetSize.cjs");
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/middleware/index.ts"],"sourcesContent":["export { coverTarget } from './coverTarget';\nexport type { FlipMiddlewareOptions } from './flip';\nexport { flip } from './flip';\nexport { intersecting } from './intersecting';\nexport type { MaxSizeMiddlewareOptions } from './maxSize';\nexport { maxSize, resetMaxSize } from './maxSize';\nexport { offset } from './offset';\nexport type { ShiftMiddlewareOptions } from './shift';\nexport { shift } from './shift';\nexport { matchTargetSize, matchTargetSizeCssVar } from './matchTargetSize';\n"],"names":["coverTarget","flip","intersecting","maxSize","resetMaxSize","offset","shift","matchTargetSize","matchTargetSizeCssVar"],"mappings":";;;;;;;;;;;IAASA;uCAAW;;;eAEXC,UAAI;;;eACJC,0BAAY;;;eAMZK,gCAAe;;;eAAEC,sCAAqB;;;eAJtCL,gBAAO;;;eACPE,cAAM;;;eADGD,qBAAY;;;eAGrBE,YAAK;;;6BARc,gBAAgB;sBAEvB,SAAS;8BACD,iBAAiB;yBAER,YAAY;wBAC3B,WAAW;uBAEZ,UAAU;iCACuB,oBAAoB"}
1
+ {"version":3,"sources":["../src/middleware/index.ts"],"sourcesContent":["export { coverTarget } from './coverTarget';\nexport type { FlipMiddlewareOptions } from './flip';\nexport { flip } from './flip';\nexport { intersecting } from './intersecting';\nexport type { MaxSizeMiddlewareOptions } from './maxSize';\nexport { maxSize, resetMaxSize } from './maxSize';\nexport { offset } from './offset';\nexport type { ShiftMiddlewareOptions } from './shift';\nexport { shift } from './shift';\nexport { matchTargetSize, matchTargetSizeCssVar } from './matchTargetSize';\n"],"names":["coverTarget","flip","intersecting","maxSize","resetMaxSize","offset","shift","matchTargetSize","matchTargetSizeCssVar"],"mappings":";;;;;;;;;;;IAASA;uCAAW;;;eAEXC,UAAI;;;eACJC,0BAAY;;;eAMZK,gCAAe;;;eAAEC,sCAAqB;;;eAJtCL,gBAAO;;;eACPE,cAAM;;;eADGD,qBAAY;;;eAGrBE,YAAK;;;6BARc,mBAAgB;sBAEvB,YAAS;8BACD,oBAAiB;yBAER,eAAY;wBAC3B,cAAW;uBAEZ,aAAU;iCACuB,uBAAoB"}