@fluentui/react-positioning 9.23.0 → 9.23.1

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 (161) hide show
  1. package/CHANGELOG.md +14 -2
  2. package/dist/index.d.cts +419 -0
  3. package/lib/PositioningConfigurationContext.js +1 -1
  4. package/lib/createArrowStyles.js +1 -1
  5. package/lib/createPositionManager.js +6 -6
  6. package/lib/createPositionManager.js.map +1 -1
  7. package/lib/createSlideStyles.js +2 -2
  8. package/lib/createSlideStyles.js.map +1 -1
  9. package/lib/hooks/useSafeZoneArea/SafeZoneArea.js +9 -9
  10. package/lib/hooks/useSafeZoneArea/SafeZoneArea.js.map +1 -1
  11. package/lib/hooks/useSafeZoneArea/SafeZoneArea.styles.js +2 -2
  12. package/lib/hooks/useSafeZoneArea/SafeZoneArea.styles.js.map +1 -1
  13. package/lib/hooks/useSafeZoneArea/SafeZoneArea.styles.raw.js +2 -2
  14. package/lib/hooks/useSafeZoneArea/useSafeZoneArea.js +4 -4
  15. package/lib/hooks/useSafeZoneArea/useSafeZoneArea.js.map +1 -1
  16. package/lib/index.js +10 -10
  17. package/lib/index.js.map +1 -1
  18. package/lib/middleware/coverTarget.js +1 -1
  19. package/lib/middleware/coverTarget.js.map +1 -1
  20. package/lib/middleware/flip.js +2 -2
  21. package/lib/middleware/flip.js.map +1 -1
  22. package/lib/middleware/index.js +7 -7
  23. package/lib/middleware/index.js.map +1 -1
  24. package/lib/middleware/intersecting.js +1 -1
  25. package/lib/middleware/maxSize.js +3 -3
  26. package/lib/middleware/maxSize.js.map +1 -1
  27. package/lib/middleware/offset.js +2 -2
  28. package/lib/middleware/offset.js.map +1 -1
  29. package/lib/middleware/shift.js +2 -2
  30. package/lib/middleware/shift.js.map +1 -1
  31. package/lib/usePositioning.js +6 -6
  32. package/lib/usePositioning.js.map +1 -1
  33. package/lib/usePositioningMouseTarget.js +2 -2
  34. package/lib/usePositioningMouseTarget.js.map +1 -1
  35. package/lib/usePositioningOptions.js +8 -8
  36. package/lib/usePositioningOptions.js.map +1 -1
  37. package/lib/usePositioningSlideDirection.js +3 -3
  38. package/lib/usePositioningSlideDirection.js.map +1 -1
  39. package/lib/utils/devtools.js +3 -3
  40. package/lib/utils/devtools.js.map +1 -1
  41. package/lib/utils/fromFloatingUIPlacement.js +1 -1
  42. package/lib/utils/fromFloatingUIPlacement.js.map +1 -1
  43. package/lib/utils/getBoundary.js +1 -1
  44. package/lib/utils/getBoundary.js.map +1 -1
  45. package/lib/utils/getFloatingUIOffset.js +1 -1
  46. package/lib/utils/getFloatingUIOffset.js.map +1 -1
  47. package/lib/utils/hasAutoFocusFilter.js +1 -1
  48. package/lib/utils/hasAutoFocusFilter.js.map +1 -1
  49. package/lib/utils/index.js +16 -16
  50. package/lib/utils/index.js.map +1 -1
  51. package/lib/utils/listScrollParents.js +1 -1
  52. package/lib/utils/listScrollParents.js.map +1 -1
  53. package/lib/utils/toggleScrollListener.js +2 -2
  54. package/lib/utils/toggleScrollListener.js.map +1 -1
  55. package/lib/utils/useCallbackRef.js +2 -2
  56. package/lib/utils/writeContainerupdates.js +1 -1
  57. package/lib/utils/writeContainerupdates.js.map +1 -1
  58. package/lib-commonjs/{createPositionManager.js → createPositionManager.cjs} +7 -7
  59. package/lib-commonjs/{createPositionManager.js.map → createPositionManager.cjs.map} +1 -1
  60. package/lib-commonjs/{createSlideStyles.js → createSlideStyles.cjs} +1 -1
  61. package/lib-commonjs/{createSlideStyles.js.map → createSlideStyles.cjs.map} +1 -1
  62. package/lib-commonjs/hooks/useSafeZoneArea/{SafeZoneArea.js → SafeZoneArea.cjs} +5 -5
  63. package/lib-commonjs/hooks/useSafeZoneArea/{SafeZoneArea.js.map → SafeZoneArea.cjs.map} +1 -1
  64. package/lib-commonjs/hooks/useSafeZoneArea/SafeZoneArea.styles.cjs.map +1 -0
  65. package/lib-commonjs/hooks/useSafeZoneArea/{useSafeZoneArea.js → useSafeZoneArea.cjs} +2 -2
  66. package/lib-commonjs/hooks/useSafeZoneArea/{useSafeZoneArea.js.map → useSafeZoneArea.cjs.map} +1 -1
  67. package/lib-commonjs/{index.js → index.cjs} +10 -10
  68. package/lib-commonjs/{index.js.map → index.cjs.map} +1 -1
  69. package/lib-commonjs/middleware/{coverTarget.js → coverTarget.cjs} +1 -1
  70. package/lib-commonjs/middleware/{coverTarget.js.map → coverTarget.cjs.map} +1 -1
  71. package/lib-commonjs/middleware/{flip.js → flip.cjs} +1 -1
  72. package/lib-commonjs/middleware/{flip.js.map → flip.cjs.map} +1 -1
  73. package/lib-commonjs/middleware/{index.js → index.cjs} +7 -7
  74. package/lib-commonjs/middleware/{index.js.map → index.cjs.map} +1 -1
  75. package/lib-commonjs/middleware/{maxSize.js → maxSize.cjs} +3 -3
  76. package/lib-commonjs/middleware/{maxSize.js.map → maxSize.cjs.map} +1 -1
  77. package/lib-commonjs/middleware/{offset.js → offset.cjs} +1 -1
  78. package/lib-commonjs/middleware/{offset.js.map → offset.cjs.map} +1 -1
  79. package/lib-commonjs/middleware/{shift.js → shift.cjs} +1 -1
  80. package/lib-commonjs/middleware/{shift.js.map → shift.cjs.map} +1 -1
  81. package/lib-commonjs/{usePositioning.js → usePositioning.cjs} +8 -8
  82. package/lib-commonjs/{usePositioning.js.map → usePositioning.cjs.map} +1 -1
  83. package/lib-commonjs/{usePositioningMouseTarget.js → usePositioningMouseTarget.cjs} +1 -1
  84. package/lib-commonjs/{usePositioningMouseTarget.js.map → usePositioningMouseTarget.cjs.map} +1 -1
  85. package/lib-commonjs/{usePositioningOptions.js → usePositioningOptions.cjs} +15 -15
  86. package/lib-commonjs/{usePositioningOptions.js.map → usePositioningOptions.cjs.map} +1 -1
  87. package/lib-commonjs/{usePositioningSlideDirection.js → usePositioningSlideDirection.cjs} +1 -1
  88. package/lib-commonjs/{usePositioningSlideDirection.js.map → usePositioningSlideDirection.cjs.map} +1 -1
  89. package/lib-commonjs/utils/{devtools.js → devtools.cjs} +2 -2
  90. package/lib-commonjs/utils/{devtools.js.map → devtools.cjs.map} +1 -1
  91. package/lib-commonjs/utils/{fromFloatingUIPlacement.js → fromFloatingUIPlacement.cjs} +1 -1
  92. package/lib-commonjs/utils/{fromFloatingUIPlacement.js.map → fromFloatingUIPlacement.cjs.map} +1 -1
  93. package/lib-commonjs/utils/{getBoundary.js → getBoundary.cjs} +1 -1
  94. package/lib-commonjs/utils/{getBoundary.js.map → getBoundary.cjs.map} +1 -1
  95. package/lib-commonjs/utils/{getFloatingUIOffset.js → getFloatingUIOffset.cjs} +1 -1
  96. package/lib-commonjs/utils/{getFloatingUIOffset.js.map → getFloatingUIOffset.cjs.map} +1 -1
  97. package/lib-commonjs/utils/{hasAutoFocusFilter.js → hasAutoFocusFilter.cjs} +1 -1
  98. package/lib-commonjs/utils/{hasAutoFocusFilter.js.map → hasAutoFocusFilter.cjs.map} +1 -1
  99. package/lib-commonjs/utils/{index.js → index.cjs} +16 -16
  100. package/lib-commonjs/utils/{index.js.map → index.cjs.map} +1 -1
  101. package/lib-commonjs/utils/{listScrollParents.js → listScrollParents.cjs} +1 -1
  102. package/lib-commonjs/utils/{listScrollParents.js.map → listScrollParents.cjs.map} +1 -1
  103. package/lib-commonjs/utils/{toggleScrollListener.js → toggleScrollListener.cjs} +1 -1
  104. package/lib-commonjs/utils/{toggleScrollListener.js.map → toggleScrollListener.cjs.map} +1 -1
  105. package/lib-commonjs/utils/{writeContainerupdates.js → writeContainerupdates.cjs} +1 -1
  106. package/lib-commonjs/utils/{writeContainerupdates.js.map → writeContainerupdates.cjs.map} +1 -1
  107. package/package.json +16 -10
  108. package/lib-commonjs/hooks/useSafeZoneArea/SafeZoneArea.styles.js.map +0 -1
  109. /package/lib-commonjs/{PositioningConfigurationContext.js → PositioningConfigurationContext.cjs} +0 -0
  110. /package/lib-commonjs/{PositioningConfigurationContext.js.map → PositioningConfigurationContext.cjs.map} +0 -0
  111. /package/lib-commonjs/{constants.js → constants.cjs} +0 -0
  112. /package/lib-commonjs/{constants.js.map → constants.cjs.map} +0 -0
  113. /package/lib-commonjs/{createArrowStyles.js → createArrowStyles.cjs} +0 -0
  114. /package/lib-commonjs/{createArrowStyles.js.map → createArrowStyles.cjs.map} +0 -0
  115. /package/lib-commonjs/{createVirtualElementFromClick.js → createVirtualElementFromClick.cjs} +0 -0
  116. /package/lib-commonjs/{createVirtualElementFromClick.js.map → createVirtualElementFromClick.cjs.map} +0 -0
  117. /package/lib-commonjs/hooks/useSafeZoneArea/{SafeZoneArea.styles.js → SafeZoneArea.styles.cjs} +0 -0
  118. /package/lib-commonjs/hooks/useSafeZoneArea/{SafeZoneArea.styles.raw.js → SafeZoneArea.styles.raw.cjs} +0 -0
  119. /package/lib-commonjs/hooks/useSafeZoneArea/{SafeZoneArea.styles.raw.js.map → SafeZoneArea.styles.raw.cjs.map} +0 -0
  120. /package/lib-commonjs/hooks/useSafeZoneArea/{computeOutsideClipPath.js → computeOutsideClipPath.cjs} +0 -0
  121. /package/lib-commonjs/hooks/useSafeZoneArea/{computeOutsideClipPath.js.map → computeOutsideClipPath.cjs.map} +0 -0
  122. /package/lib-commonjs/hooks/useSafeZoneArea/{createSafeZoneAreaStateStore.js → createSafeZoneAreaStateStore.cjs} +0 -0
  123. /package/lib-commonjs/hooks/useSafeZoneArea/{createSafeZoneAreaStateStore.js.map → createSafeZoneAreaStateStore.cjs.map} +0 -0
  124. /package/lib-commonjs/hooks/useSafeZoneArea/{getMouseAnchor.js → getMouseAnchor.cjs} +0 -0
  125. /package/lib-commonjs/hooks/useSafeZoneArea/{getMouseAnchor.js.map → getMouseAnchor.cjs.map} +0 -0
  126. /package/lib-commonjs/hooks/useSafeZoneArea/{getRectCorners.js → getRectCorners.cjs} +0 -0
  127. /package/lib-commonjs/hooks/useSafeZoneArea/{getRectCorners.js.map → getRectCorners.cjs.map} +0 -0
  128. /package/lib-commonjs/hooks/useSafeZoneArea/{pointsToSvgPath.js → pointsToSvgPath.cjs} +0 -0
  129. /package/lib-commonjs/hooks/useSafeZoneArea/{pointsToSvgPath.js.map → pointsToSvgPath.cjs.map} +0 -0
  130. /package/lib-commonjs/hooks/useSafeZoneArea/{types.js → types.cjs} +0 -0
  131. /package/lib-commonjs/hooks/useSafeZoneArea/{types.js.map → types.cjs.map} +0 -0
  132. /package/lib-commonjs/middleware/{intersecting.js → intersecting.cjs} +0 -0
  133. /package/lib-commonjs/middleware/{intersecting.js.map → intersecting.cjs.map} +0 -0
  134. /package/lib-commonjs/middleware/{matchTargetSize.js → matchTargetSize.cjs} +0 -0
  135. /package/lib-commonjs/middleware/{matchTargetSize.js.map → matchTargetSize.cjs.map} +0 -0
  136. /package/lib-commonjs/{types.js → types.cjs} +0 -0
  137. /package/lib-commonjs/{types.js.map → types.cjs.map} +0 -0
  138. /package/lib-commonjs/utils/{createResizeObserver.js → createResizeObserver.cjs} +0 -0
  139. /package/lib-commonjs/utils/{createResizeObserver.js.map → createResizeObserver.cjs.map} +0 -0
  140. /package/lib-commonjs/utils/{debounce.js → debounce.cjs} +0 -0
  141. /package/lib-commonjs/utils/{debounce.js.map → debounce.cjs.map} +0 -0
  142. /package/lib-commonjs/utils/{getReactFiberFromNode.js → getReactFiberFromNode.cjs} +0 -0
  143. /package/lib-commonjs/utils/{getReactFiberFromNode.js.map → getReactFiberFromNode.cjs.map} +0 -0
  144. /package/lib-commonjs/utils/{getScrollParent.js → getScrollParent.cjs} +0 -0
  145. /package/lib-commonjs/utils/{getScrollParent.js.map → getScrollParent.cjs.map} +0 -0
  146. /package/lib-commonjs/utils/{mergeArrowOffset.js → mergeArrowOffset.cjs} +0 -0
  147. /package/lib-commonjs/utils/{mergeArrowOffset.js.map → mergeArrowOffset.cjs.map} +0 -0
  148. /package/lib-commonjs/utils/{normalizeAutoSize.js → normalizeAutoSize.cjs} +0 -0
  149. /package/lib-commonjs/utils/{normalizeAutoSize.js.map → normalizeAutoSize.cjs.map} +0 -0
  150. /package/lib-commonjs/utils/{parseFloatingUIPlacement.js → parseFloatingUIPlacement.cjs} +0 -0
  151. /package/lib-commonjs/utils/{parseFloatingUIPlacement.js.map → parseFloatingUIPlacement.cjs.map} +0 -0
  152. /package/lib-commonjs/utils/{resolvePositioningShorthand.js → resolvePositioningShorthand.cjs} +0 -0
  153. /package/lib-commonjs/utils/{resolvePositioningShorthand.js.map → resolvePositioningShorthand.cjs.map} +0 -0
  154. /package/lib-commonjs/utils/{toFloatingUIPadding.js → toFloatingUIPadding.cjs} +0 -0
  155. /package/lib-commonjs/utils/{toFloatingUIPadding.js.map → toFloatingUIPadding.cjs.map} +0 -0
  156. /package/lib-commonjs/utils/{toFloatingUIPlacement.js → toFloatingUIPlacement.cjs} +0 -0
  157. /package/lib-commonjs/utils/{toFloatingUIPlacement.js.map → toFloatingUIPlacement.cjs.map} +0 -0
  158. /package/lib-commonjs/utils/{useCallbackRef.js → useCallbackRef.cjs} +0 -0
  159. /package/lib-commonjs/utils/{useCallbackRef.js.map → useCallbackRef.cjs.map} +0 -0
  160. /package/lib-commonjs/utils/{writeArrowUpdates.js → writeArrowUpdates.cjs} +0 -0
  161. /package/lib-commonjs/utils/{writeArrowUpdates.js.map → writeArrowUpdates.cjs.map} +0 -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,7 +1,7 @@
1
1
  'use client';
2
2
 
3
- import { __styles } from '@griffel/react';
4
- import { tokens } from '@fluentui/react-theme';
3
+ import { __styles } from "@griffel/react";
4
+ import { tokens } from "@fluentui/react-theme";
5
5
  export const useStyles = /*#__PURE__*/__styles({
6
6
  wrapper: {
7
7
  mc9l5x: "fjseox",
@@ -1 +1 @@
1
- {"version":3,"names":["__styles","tokens","useStyles","wrapper","mc9l5x","Bqenvij","a9b677","Bkecrkj","wrapperActive","svg","Bkfmm31","qhf8xq","Bhzewxz","oyh7mz","triangle","triangleDebug","Bceei9c","rectDebug","d"],"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"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,QAA2B,gBAAgB;AAC3C,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,SAAS,gBAAGF,QAAA;EAAAG,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,aAAA;IAAAJ,MAAA;EAAA;EAAAK,GAAA;IAAAC,OAAA;IAAAH,OAAA;IAAAI,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAP,OAAA;EAAA;EAAAQ,aAAA;IAAAC,OAAA;IAAAN,OAAA;EAAA;EAAAO,SAAA;IAAAP,OAAA;EAAA;AAAA;EAAAQ,CAAA;AAAA,CA2BxB,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["__styles","tokens","useStyles","wrapper","mc9l5x","Bqenvij","a9b677","Bkecrkj","wrapperActive","svg","Bkfmm31","qhf8xq","Bhzewxz","oyh7mz","triangle","triangleDebug","Bceei9c","rectDebug","d"],"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"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,QAA2B,gBAAgB;AAC3C,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,SAAS,gBAAGF,QAAA;EAAAG,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,aAAA;IAAAJ,MAAA;EAAA;EAAAK,GAAA;IAAAC,OAAA;IAAAH,OAAA;IAAAI,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAP,OAAA;EAAA;EAAAQ,aAAA;IAAAC,OAAA;IAAAN,OAAA;EAAA;EAAAO,SAAA;IAAAP,OAAA;EAAA;AAAA;EAAAQ,CAAA;AAAA,CA2BxB,CAAC","ignoreList":[]}
@@ -1,6 +1,6 @@
1
1
  'use client';
2
- import { makeStyles } from '@griffel/react';
3
- import { tokens } from '@fluentui/react-theme';
2
+ import { makeStyles } from "@griffel/react";
3
+ import { tokens } from "@fluentui/react-theme";
4
4
  export const useStyles = makeStyles({
5
5
  wrapper: {
6
6
  display: 'none',
@@ -1,8 +1,8 @@
1
1
  'use client';
2
- import { useAnimationFrame, useEventCallback, useMergedRefs, useTimeout } from '@fluentui/react-utilities';
3
- import * as React from 'react';
4
- import { createSafeZoneAreaStateStore } from './createSafeZoneAreaStateStore';
5
- import { SafeZoneArea } from './SafeZoneArea';
2
+ import { useAnimationFrame, useEventCallback, useMergedRefs, useTimeout } from "@fluentui/react-utilities";
3
+ import * as React from "react";
4
+ import { createSafeZoneAreaStateStore } from "./createSafeZoneAreaStateStore.js";
5
+ import { SafeZoneArea } from "./SafeZoneArea.js";
6
6
  /**
7
7
  * Time in milliseconds after which the safe zone area will be cleared if no mouse movement is detected.
8
8
  *
@@ -1 +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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"}
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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"}
package/lib/index.js CHANGED
@@ -1,11 +1,11 @@
1
- export { createVirtualElementFromClick } from './createVirtualElementFromClick';
2
- export { usePositioningSlideDirection } from './usePositioningSlideDirection';
3
- export { POSITIONING_SLIDE_DIRECTION_VAR_X, POSITIONING_SLIDE_DIRECTION_VAR_Y } from './constants';
4
- export { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';
1
+ export { createVirtualElementFromClick } from "./createVirtualElementFromClick.js";
2
+ export { usePositioningSlideDirection } from "./usePositioningSlideDirection.js";
3
+ export { POSITIONING_SLIDE_DIRECTION_VAR_X, POSITIONING_SLIDE_DIRECTION_VAR_Y } from "./constants.js";
4
+ export { createArrowHeightStyles, createArrowStyles } from "./createArrowStyles.js";
5
5
  // eslint-disable-next-line @typescript-eslint/no-deprecated
6
- export { createSlideStyles } from './createSlideStyles';
7
- export { PositioningConfigurationProvider } from './PositioningConfigurationContext';
8
- export { usePositioning } from './usePositioning';
9
- export { usePositioningMouseTarget } from './usePositioningMouseTarget';
10
- export { useSafeZoneArea } from './hooks/useSafeZoneArea/useSafeZoneArea';
11
- export { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';
6
+ export { createSlideStyles } from "./createSlideStyles.js";
7
+ export { PositioningConfigurationProvider } from "./PositioningConfigurationContext.js";
8
+ export { usePositioning } from "./usePositioning.js";
9
+ export { usePositioningMouseTarget } from "./usePositioningMouseTarget.js";
10
+ export { useSafeZoneArea } from "./hooks/useSafeZoneArea/useSafeZoneArea.js";
11
+ export { resolvePositioningShorthand, mergeArrowOffset } from "./utils/index.js";
package/lib/index.js.map CHANGED
@@ -1 +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":"AAAA,SAASA,6BAA6B,QAAQ,kCAAkC;AAChF,SAASC,4BAA4B,QAAQ,iCAAiC;AAC9E,SAASC,iCAAiC,EAAEC,iCAAiC,QAAQ,cAAc;AACnG,SAASC,uBAAuB,EAAEC,iBAAiB,QAAQ,sBAAsB;AACjF,4DAA4D;AAC5D,SAASC,iBAAiB,QAAQ,sBAAsB;AAGxD,SAASC,gCAAgC,QAAQ,oCAAoC;AAErF,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,eAAe,QAAQ,0CAA0C;AAE1E,SAASC,2BAA2B,EAAEC,gBAAgB,QAAQ,gBAAgB"}
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":"AAAA,SAASA,6BAA6B,QAAQ,qCAAkC;AAChF,SAASC,4BAA4B,QAAQ,oCAAiC;AAC9E,SAASC,iCAAiC,EAAEC,iCAAiC,QAAQ,iBAAc;AACnG,SAASC,uBAAuB,EAAEC,iBAAiB,QAAQ,yBAAsB;AACjF,4DAA4D;AAC5D,SAASC,iBAAiB,QAAQ,yBAAsB;AAGxD,SAASC,gCAAgC,QAAQ,uCAAoC;AAErF,SAASC,cAAc,QAAQ,sBAAmB;AAClD,SAASC,yBAAyB,QAAQ,iCAA8B;AACxE,SAASC,eAAe,QAAQ,6CAA0C;AAE1E,SAASC,2BAA2B,EAAEC,gBAAgB,QAAQ,mBAAgB"}
@@ -1,4 +1,4 @@
1
- import { parseFloatingUIPlacement } from '../utils/index';
1
+ import { parseFloatingUIPlacement } from "../utils/index.js";
2
2
  export function coverTarget() {
3
3
  return {
4
4
  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":"AACA,SAASA,wBAAwB,QAAQ,iBAAiB;AAE1D,OAAO,SAASC;IACd,OAAO;QACLC,MAAM;QACNC,IAAIC,CAAAA;YACF,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAEC,CAAC,EAAEC,CAAC,EAAE,GAAGJ;YACnC,MAAMK,gBAAgBT,yBAAyBK,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":"AACA,SAASA,wBAAwB,QAAQ,oBAAiB;AAE1D,OAAO,SAASC;IACd,OAAO;QACLC,MAAM;QACNC,IAAIC,CAAAA;YACF,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAEC,CAAC,EAAEC,CAAC,EAAE,GAAGJ;YACnC,MAAMK,gBAAgBT,yBAAyBK,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,5 +1,5 @@
1
- import { flip as baseFlip } from '@floating-ui/dom';
2
- import { getBoundary, resolvePositioningShorthand, toFloatingUIPlacement } from '../utils/index';
1
+ import { flip as baseFlip } from "@floating-ui/dom";
2
+ import { getBoundary, resolvePositioningShorthand, toFloatingUIPlacement } from "../utils/index.js";
3
3
  export function flip(options) {
4
4
  const { hasScrollableElement, flipBoundary, container, fallbackPositions = [], isRtl } = options;
5
5
  const fallbackPlacements = fallbackPositions.reduce((acc, shorthand)=>{
@@ -1 +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":"AACA,SAASA,QAAQC,QAAQ,QAAQ,mBAAmB;AAEpD,SAASC,WAAW,EAAEC,2BAA2B,EAAEC,qBAAqB,QAAQ,iBAAiB;AAQjG,OAAO,SAASJ,KAAKK,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,GAAGb,4BAA4BW;QACxD,MAAMG,YAAYb,sBAAsBY,OAAOD,UAAUL;QACzD,IAAIO,WAAW;YACbJ,IAAIK,IAAI,CAACD;QACX;QACA,OAAOJ;IACT,GAAG,EAAE;IAEL,OAAOZ,SAAS;QACd,GAAIK,wBAAwB;YAAEa,UAAU;QAAoB,CAAC;QAC7D,GAAIZ,gBAAgB;YAAEa,aAAa;YAAMD,UAAUjB,YAAYM,WAAWD;QAAc,CAAC;QACzFc,kBAAkB;QAClB,GAAIV,mBAAmBW,MAAM,IAAI;YAAEX;QAAmB,CAAC;IACzD;AACF"}
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":"AACA,SAASA,QAAQC,QAAQ,QAAQ,mBAAmB;AAEpD,SAASC,WAAW,EAAEC,2BAA2B,EAAEC,qBAAqB,QAAQ,oBAAiB;AAQjG,OAAO,SAASJ,KAAKK,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,GAAGb,4BAA4BW;QACxD,MAAMG,YAAYb,sBAAsBY,OAAOD,UAAUL;QACzD,IAAIO,WAAW;YACbJ,IAAIK,IAAI,CAACD;QACX;QACA,OAAOJ;IACT,GAAG,EAAE;IAEL,OAAOZ,SAAS;QACd,GAAIK,wBAAwB;YAAEa,UAAU;QAAoB,CAAC;QAC7D,GAAIZ,gBAAgB;YAAEa,aAAa;YAAMD,UAAUjB,YAAYM,WAAWD;QAAc,CAAC;QACzFc,kBAAkB;QAClB,GAAIV,mBAAmBW,MAAM,IAAI;YAAEX;QAAmB,CAAC;IACzD;AACF"}
@@ -1,7 +1,7 @@
1
- export { coverTarget } from './coverTarget';
2
- export { flip } from './flip';
3
- export { intersecting } from './intersecting';
4
- export { maxSize, resetMaxSize } from './maxSize';
5
- export { offset } from './offset';
6
- export { shift } from './shift';
7
- export { matchTargetSize, matchTargetSizeCssVar } from './matchTargetSize';
1
+ export { coverTarget } from "./coverTarget.js";
2
+ export { flip } from "./flip.js";
3
+ export { intersecting } from "./intersecting.js";
4
+ export { maxSize, resetMaxSize } from "./maxSize.js";
5
+ export { offset } from "./offset.js";
6
+ export { shift } from "./shift.js";
7
+ export { matchTargetSize, matchTargetSizeCssVar } from "./matchTargetSize.js";
@@ -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":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;AAE5C,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,YAAY,QAAQ,iBAAiB;AAE9C,SAASC,OAAO,EAAEC,YAAY,QAAQ,YAAY;AAClD,SAASC,MAAM,QAAQ,WAAW;AAElC,SAASC,KAAK,QAAQ,UAAU;AAChC,SAASC,eAAe,EAAEC,qBAAqB,QAAQ,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":"AAAA,SAASA,WAAW,QAAQ,mBAAgB;AAE5C,SAASC,IAAI,QAAQ,YAAS;AAC9B,SAASC,YAAY,QAAQ,oBAAiB;AAE9C,SAASC,OAAO,EAAEC,YAAY,QAAQ,eAAY;AAClD,SAASC,MAAM,QAAQ,cAAW;AAElC,SAASC,KAAK,QAAQ,aAAU;AAChC,SAASC,eAAe,EAAEC,qBAAqB,QAAQ,uBAAoB"}
@@ -1,4 +1,4 @@
1
- import { detectOverflow } from '@floating-ui/dom';
1
+ import { detectOverflow } from "@floating-ui/dom";
2
2
  export function intersecting() {
3
3
  return {
4
4
  name: 'intersectionObserver',
@@ -1,6 +1,6 @@
1
- import { size } from '@floating-ui/dom';
2
- import { getBoundary } from '../utils/getBoundary';
3
- import { toFloatingUIPadding } from '../utils';
1
+ import { size } from "@floating-ui/dom";
2
+ import { getBoundary } from "../utils/getBoundary.js";
3
+ import { toFloatingUIPadding } from "../utils/index.js";
4
4
  /**
5
5
  * floating-ui `size` middleware uses floating element's height/width to calculate available height/width.
6
6
  * This middleware only runs once per lifecycle, resetting styles applied by maxSize from previous lifecycle.
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/middleware/maxSize.ts"],"sourcesContent":["import { size } from '@floating-ui/dom';\nimport type { Middleware } from '@floating-ui/dom';\nimport type { NormalizedAutoSize, PositioningOptions } from '../types';\nimport { getBoundary } from '../utils/getBoundary';\nimport { toFloatingUIPadding } from '../utils';\nexport interface MaxSizeMiddlewareOptions\n extends Pick<PositioningOptions, 'overflowBoundary' | 'overflowBoundaryPadding'> {\n container: HTMLElement | null;\n isRtl: boolean;\n}\n\n/**\n * floating-ui `size` middleware uses floating element's height/width to calculate available height/width.\n * This middleware only runs once per lifecycle, resetting styles applied by maxSize from previous lifecycle.\n * Then floating element's original size is restored and `size` middleware can calculate available height/width correctly.\n */\nexport const resetMaxSize = (autoSize: NormalizedAutoSize): Middleware => ({\n name: 'resetMaxSize',\n fn({ middlewareData, elements }) {\n if (middlewareData.resetMaxSize?.maxSizeAlreadyReset) {\n return {};\n }\n\n const { applyMaxWidth, applyMaxHeight } = autoSize;\n if (applyMaxWidth) {\n elements.floating.style.removeProperty('box-sizing');\n elements.floating.style.removeProperty('max-width');\n elements.floating.style.removeProperty('width');\n }\n if (applyMaxHeight) {\n elements.floating.style.removeProperty('box-sizing');\n elements.floating.style.removeProperty('max-height');\n elements.floating.style.removeProperty('height');\n }\n\n return {\n data: { maxSizeAlreadyReset: true },\n reset: { rects: true },\n };\n },\n});\n\nexport function maxSize(autoSize: NormalizedAutoSize, options: MaxSizeMiddlewareOptions): Middleware {\n const { container, overflowBoundary, overflowBoundaryPadding, isRtl } = options;\n return size({\n ...(overflowBoundaryPadding && { padding: toFloatingUIPadding(overflowBoundaryPadding, isRtl) }),\n ...(overflowBoundary && { altBoundary: true, boundary: getBoundary(container, overflowBoundary) }),\n apply({ availableHeight, availableWidth, elements, rects }) {\n const applyMaxSizeStyles = (apply: boolean, dimension: 'width' | 'height', availableSize: number) => {\n if (!apply) {\n return;\n }\n\n elements.floating.style.setProperty('box-sizing', 'border-box');\n elements.floating.style.setProperty(`max-${dimension}`, `${availableSize}px`);\n\n if (rects.floating[dimension] > availableSize) {\n elements.floating.style.setProperty(dimension, `${availableSize}px`);\n\n const axis = dimension === 'width' ? 'x' : 'y';\n if (!elements.floating.style.getPropertyValue(`overflow-${axis}`)) {\n elements.floating.style.setProperty(`overflow-${axis}`, 'auto');\n }\n }\n };\n\n const { applyMaxWidth, applyMaxHeight } = autoSize;\n applyMaxSizeStyles(applyMaxWidth, 'width', availableWidth);\n applyMaxSizeStyles(applyMaxHeight, 'height', availableHeight);\n },\n });\n}\n"],"names":["size","getBoundary","toFloatingUIPadding","resetMaxSize","autoSize","name","fn","middlewareData","elements","maxSizeAlreadyReset","applyMaxWidth","applyMaxHeight","floating","style","removeProperty","data","reset","rects","maxSize","options","container","overflowBoundary","overflowBoundaryPadding","isRtl","padding","altBoundary","boundary","apply","availableHeight","availableWidth","applyMaxSizeStyles","dimension","availableSize","setProperty","axis","getPropertyValue"],"mappings":"AAAA,SAASA,IAAI,QAAQ,mBAAmB;AAGxC,SAASC,WAAW,QAAQ,uBAAuB;AACnD,SAASC,mBAAmB,QAAQ,WAAW;AAO/C;;;;CAIC,GACD,OAAO,MAAMC,eAAe,CAACC,WAA8C,CAAA;QACzEC,MAAM;QACNC,IAAG,EAAEC,cAAc,EAAEC,QAAQ,EAAE;gBACzBD;YAAJ,KAAIA,+BAAAA,eAAeJ,YAAY,cAA3BI,mDAAAA,6BAA6BE,mBAAmB,EAAE;gBACpD,OAAO,CAAC;YACV;YAEA,MAAM,EAAEC,aAAa,EAAEC,cAAc,EAAE,GAAGP;YAC1C,IAAIM,eAAe;gBACjBF,SAASI,QAAQ,CAACC,KAAK,CAACC,cAAc,CAAC;gBACvCN,SAASI,QAAQ,CAACC,KAAK,CAACC,cAAc,CAAC;gBACvCN,SAASI,QAAQ,CAACC,KAAK,CAACC,cAAc,CAAC;YACzC;YACA,IAAIH,gBAAgB;gBAClBH,SAASI,QAAQ,CAACC,KAAK,CAACC,cAAc,CAAC;gBACvCN,SAASI,QAAQ,CAACC,KAAK,CAACC,cAAc,CAAC;gBACvCN,SAASI,QAAQ,CAACC,KAAK,CAACC,cAAc,CAAC;YACzC;YAEA,OAAO;gBACLC,MAAM;oBAAEN,qBAAqB;gBAAK;gBAClCO,OAAO;oBAAEC,OAAO;gBAAK;YACvB;QACF;IACF,CAAA,EAAG;AAEH,OAAO,SAASC,QAAQd,QAA4B,EAAEe,OAAiC;IACrF,MAAM,EAAEC,SAAS,EAAEC,gBAAgB,EAAEC,uBAAuB,EAAEC,KAAK,EAAE,GAAGJ;IACxE,OAAOnB,KAAK;QACV,GAAIsB,2BAA2B;YAAEE,SAAStB,oBAAoBoB,yBAAyBC;QAAO,CAAC;QAC/F,GAAIF,oBAAoB;YAAEI,aAAa;YAAMC,UAAUzB,YAAYmB,WAAWC;QAAkB,CAAC;QACjGM,OAAM,EAAEC,eAAe,EAAEC,cAAc,EAAErB,QAAQ,EAAES,KAAK,EAAE;YACxD,MAAMa,qBAAqB,CAACH,OAAgBI,WAA+BC;gBACzE,IAAI,CAACL,OAAO;oBACV;gBACF;gBAEAnB,SAASI,QAAQ,CAACC,KAAK,CAACoB,WAAW,CAAC,cAAc;gBAClDzB,SAASI,QAAQ,CAACC,KAAK,CAACoB,WAAW,CAAC,CAAC,IAAI,EAAEF,WAAW,EAAE,GAAGC,cAAc,EAAE,CAAC;gBAE5E,IAAIf,MAAML,QAAQ,CAACmB,UAAU,GAAGC,eAAe;oBAC7CxB,SAASI,QAAQ,CAACC,KAAK,CAACoB,WAAW,CAACF,WAAW,GAAGC,cAAc,EAAE,CAAC;oBAEnE,MAAME,OAAOH,cAAc,UAAU,MAAM;oBAC3C,IAAI,CAACvB,SAASI,QAAQ,CAACC,KAAK,CAACsB,gBAAgB,CAAC,CAAC,SAAS,EAAED,MAAM,GAAG;wBACjE1B,SAASI,QAAQ,CAACC,KAAK,CAACoB,WAAW,CAAC,CAAC,SAAS,EAAEC,MAAM,EAAE;oBAC1D;gBACF;YACF;YAEA,MAAM,EAAExB,aAAa,EAAEC,cAAc,EAAE,GAAGP;YAC1C0B,mBAAmBpB,eAAe,SAASmB;YAC3CC,mBAAmBnB,gBAAgB,UAAUiB;QAC/C;IACF;AACF"}
1
+ {"version":3,"sources":["../src/middleware/maxSize.ts"],"sourcesContent":["import { size } from '@floating-ui/dom';\nimport type { Middleware } from '@floating-ui/dom';\nimport type { NormalizedAutoSize, PositioningOptions } from '../types';\nimport { getBoundary } from '../utils/getBoundary';\nimport { toFloatingUIPadding } from '../utils';\nexport interface MaxSizeMiddlewareOptions\n extends Pick<PositioningOptions, 'overflowBoundary' | 'overflowBoundaryPadding'> {\n container: HTMLElement | null;\n isRtl: boolean;\n}\n\n/**\n * floating-ui `size` middleware uses floating element's height/width to calculate available height/width.\n * This middleware only runs once per lifecycle, resetting styles applied by maxSize from previous lifecycle.\n * Then floating element's original size is restored and `size` middleware can calculate available height/width correctly.\n */\nexport const resetMaxSize = (autoSize: NormalizedAutoSize): Middleware => ({\n name: 'resetMaxSize',\n fn({ middlewareData, elements }) {\n if (middlewareData.resetMaxSize?.maxSizeAlreadyReset) {\n return {};\n }\n\n const { applyMaxWidth, applyMaxHeight } = autoSize;\n if (applyMaxWidth) {\n elements.floating.style.removeProperty('box-sizing');\n elements.floating.style.removeProperty('max-width');\n elements.floating.style.removeProperty('width');\n }\n if (applyMaxHeight) {\n elements.floating.style.removeProperty('box-sizing');\n elements.floating.style.removeProperty('max-height');\n elements.floating.style.removeProperty('height');\n }\n\n return {\n data: { maxSizeAlreadyReset: true },\n reset: { rects: true },\n };\n },\n});\n\nexport function maxSize(autoSize: NormalizedAutoSize, options: MaxSizeMiddlewareOptions): Middleware {\n const { container, overflowBoundary, overflowBoundaryPadding, isRtl } = options;\n return size({\n ...(overflowBoundaryPadding && { padding: toFloatingUIPadding(overflowBoundaryPadding, isRtl) }),\n ...(overflowBoundary && { altBoundary: true, boundary: getBoundary(container, overflowBoundary) }),\n apply({ availableHeight, availableWidth, elements, rects }) {\n const applyMaxSizeStyles = (apply: boolean, dimension: 'width' | 'height', availableSize: number) => {\n if (!apply) {\n return;\n }\n\n elements.floating.style.setProperty('box-sizing', 'border-box');\n elements.floating.style.setProperty(`max-${dimension}`, `${availableSize}px`);\n\n if (rects.floating[dimension] > availableSize) {\n elements.floating.style.setProperty(dimension, `${availableSize}px`);\n\n const axis = dimension === 'width' ? 'x' : 'y';\n if (!elements.floating.style.getPropertyValue(`overflow-${axis}`)) {\n elements.floating.style.setProperty(`overflow-${axis}`, 'auto');\n }\n }\n };\n\n const { applyMaxWidth, applyMaxHeight } = autoSize;\n applyMaxSizeStyles(applyMaxWidth, 'width', availableWidth);\n applyMaxSizeStyles(applyMaxHeight, 'height', availableHeight);\n },\n });\n}\n"],"names":["size","getBoundary","toFloatingUIPadding","resetMaxSize","autoSize","name","fn","middlewareData","elements","maxSizeAlreadyReset","applyMaxWidth","applyMaxHeight","floating","style","removeProperty","data","reset","rects","maxSize","options","container","overflowBoundary","overflowBoundaryPadding","isRtl","padding","altBoundary","boundary","apply","availableHeight","availableWidth","applyMaxSizeStyles","dimension","availableSize","setProperty","axis","getPropertyValue"],"mappings":"AAAA,SAASA,IAAI,QAAQ,mBAAmB;AAGxC,SAASC,WAAW,QAAQ,0BAAuB;AACnD,SAASC,mBAAmB,QAAQ,oBAAW;AAO/C;;;;CAIC,GACD,OAAO,MAAMC,eAAe,CAACC,WAA8C,CAAA;QACzEC,MAAM;QACNC,IAAG,EAAEC,cAAc,EAAEC,QAAQ,EAAE;gBACzBD;YAAJ,KAAIA,+BAAAA,eAAeJ,YAAY,cAA3BI,mDAAAA,6BAA6BE,mBAAmB,EAAE;gBACpD,OAAO,CAAC;YACV;YAEA,MAAM,EAAEC,aAAa,EAAEC,cAAc,EAAE,GAAGP;YAC1C,IAAIM,eAAe;gBACjBF,SAASI,QAAQ,CAACC,KAAK,CAACC,cAAc,CAAC;gBACvCN,SAASI,QAAQ,CAACC,KAAK,CAACC,cAAc,CAAC;gBACvCN,SAASI,QAAQ,CAACC,KAAK,CAACC,cAAc,CAAC;YACzC;YACA,IAAIH,gBAAgB;gBAClBH,SAASI,QAAQ,CAACC,KAAK,CAACC,cAAc,CAAC;gBACvCN,SAASI,QAAQ,CAACC,KAAK,CAACC,cAAc,CAAC;gBACvCN,SAASI,QAAQ,CAACC,KAAK,CAACC,cAAc,CAAC;YACzC;YAEA,OAAO;gBACLC,MAAM;oBAAEN,qBAAqB;gBAAK;gBAClCO,OAAO;oBAAEC,OAAO;gBAAK;YACvB;QACF;IACF,CAAA,EAAG;AAEH,OAAO,SAASC,QAAQd,QAA4B,EAAEe,OAAiC;IACrF,MAAM,EAAEC,SAAS,EAAEC,gBAAgB,EAAEC,uBAAuB,EAAEC,KAAK,EAAE,GAAGJ;IACxE,OAAOnB,KAAK;QACV,GAAIsB,2BAA2B;YAAEE,SAAStB,oBAAoBoB,yBAAyBC;QAAO,CAAC;QAC/F,GAAIF,oBAAoB;YAAEI,aAAa;YAAMC,UAAUzB,YAAYmB,WAAWC;QAAkB,CAAC;QACjGM,OAAM,EAAEC,eAAe,EAAEC,cAAc,EAAErB,QAAQ,EAAES,KAAK,EAAE;YACxD,MAAMa,qBAAqB,CAACH,OAAgBI,WAA+BC;gBACzE,IAAI,CAACL,OAAO;oBACV;gBACF;gBAEAnB,SAASI,QAAQ,CAACC,KAAK,CAACoB,WAAW,CAAC,cAAc;gBAClDzB,SAASI,QAAQ,CAACC,KAAK,CAACoB,WAAW,CAAC,CAAC,IAAI,EAAEF,WAAW,EAAE,GAAGC,cAAc,EAAE,CAAC;gBAE5E,IAAIf,MAAML,QAAQ,CAACmB,UAAU,GAAGC,eAAe;oBAC7CxB,SAASI,QAAQ,CAACC,KAAK,CAACoB,WAAW,CAACF,WAAW,GAAGC,cAAc,EAAE,CAAC;oBAEnE,MAAME,OAAOH,cAAc,UAAU,MAAM;oBAC3C,IAAI,CAACvB,SAASI,QAAQ,CAACC,KAAK,CAACsB,gBAAgB,CAAC,CAAC,SAAS,EAAED,MAAM,GAAG;wBACjE1B,SAASI,QAAQ,CAACC,KAAK,CAACoB,WAAW,CAAC,CAAC,SAAS,EAAEC,MAAM,EAAE;oBAC1D;gBACF;YACF;YAEA,MAAM,EAAExB,aAAa,EAAEC,cAAc,EAAE,GAAGP;YAC1C0B,mBAAmBpB,eAAe,SAASmB;YAC3CC,mBAAmBnB,gBAAgB,UAAUiB;QAC/C;IACF;AACF"}
@@ -1,5 +1,5 @@
1
- import { offset as baseOffset } from '@floating-ui/dom';
2
- import { getFloatingUIOffset } from '../utils/getFloatingUIOffset';
1
+ import { offset as baseOffset } from "@floating-ui/dom";
2
+ import { getFloatingUIOffset } from "../utils/getFloatingUIOffset.js";
3
3
  /**
4
4
  * Wraps floating UI offset middleware to transform offset value.
5
5
  */ export function offset(offsetValue) {
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/middleware/offset.ts"],"sourcesContent":["import type { Middleware } from '@floating-ui/dom';\nimport { offset as baseOffset } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\nimport { getFloatingUIOffset } from '../utils/getFloatingUIOffset';\n\n/**\n * Wraps floating UI offset middleware to transform offset value.\n */\nexport function offset(offsetValue: PositioningOptions['offset']): Middleware {\n const floatingUIOffset = getFloatingUIOffset(offsetValue);\n return baseOffset(floatingUIOffset);\n}\n"],"names":["offset","baseOffset","getFloatingUIOffset","offsetValue","floatingUIOffset"],"mappings":"AACA,SAASA,UAAUC,UAAU,QAAQ,mBAAmB;AAExD,SAASC,mBAAmB,QAAQ,+BAA+B;AAEnE;;CAEC,GACD,OAAO,SAASF,OAAOG,WAAyC;IAC9D,MAAMC,mBAAmBF,oBAAoBC;IAC7C,OAAOF,WAAWG;AACpB"}
1
+ {"version":3,"sources":["../src/middleware/offset.ts"],"sourcesContent":["import type { Middleware } from '@floating-ui/dom';\nimport { offset as baseOffset } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\nimport { getFloatingUIOffset } from '../utils/getFloatingUIOffset';\n\n/**\n * Wraps floating UI offset middleware to transform offset value.\n */\nexport function offset(offsetValue: PositioningOptions['offset']): Middleware {\n const floatingUIOffset = getFloatingUIOffset(offsetValue);\n return baseOffset(floatingUIOffset);\n}\n"],"names":["offset","baseOffset","getFloatingUIOffset","offsetValue","floatingUIOffset"],"mappings":"AACA,SAASA,UAAUC,UAAU,QAAQ,mBAAmB;AAExD,SAASC,mBAAmB,QAAQ,kCAA+B;AAEnE;;CAEC,GACD,OAAO,SAASF,OAAOG,WAAyC;IAC9D,MAAMC,mBAAmBF,oBAAoBC;IAC7C,OAAOF,WAAWG;AACpB"}
@@ -1,5 +1,5 @@
1
- import { shift as baseShift, limitShift } from '@floating-ui/dom';
2
- import { getBoundary, toFloatingUIPadding } from '../utils/index';
1
+ import { shift as baseShift, limitShift } from "@floating-ui/dom";
2
+ import { getBoundary, toFloatingUIPadding } from "../utils/index.js";
3
3
  /**
4
4
  * Wraps the floating UI shift middleware for easier usage of our options
5
5
  */ export function shift(options) {
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/middleware/shift.ts"],"sourcesContent":["import type { Middleware } from '@floating-ui/dom';\nimport { shift as baseShift, limitShift } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\nimport { getBoundary, toFloatingUIPadding } from '../utils/index';\n\nexport interface ShiftMiddlewareOptions\n extends Pick<PositioningOptions, 'overflowBoundary' | 'overflowBoundaryPadding' | 'shiftToCoverTarget'> {\n hasScrollableElement?: boolean;\n disableTether?: PositioningOptions['unstable_disableTether'];\n container: HTMLElement | null;\n isRtl: boolean;\n}\n\n/**\n * Wraps the floating UI shift middleware for easier usage of our options\n */\nexport function shift(options: ShiftMiddlewareOptions): Middleware {\n const {\n hasScrollableElement,\n shiftToCoverTarget,\n disableTether,\n overflowBoundary,\n container,\n overflowBoundaryPadding,\n isRtl,\n } = options;\n\n return baseShift({\n ...(hasScrollableElement && { boundary: 'clippingAncestors' }),\n ...(shiftToCoverTarget && {\n crossAxis: true,\n limiter: limitShift({ crossAxis: true, mainAxis: false }),\n }),\n ...(disableTether && {\n crossAxis: disableTether === 'all',\n limiter: limitShift({ crossAxis: disableTether !== 'all', mainAxis: false }),\n }),\n ...(overflowBoundaryPadding && { padding: toFloatingUIPadding(overflowBoundaryPadding, isRtl) }),\n ...(overflowBoundary && { altBoundary: true, boundary: getBoundary(container, overflowBoundary) }),\n });\n}\n"],"names":["shift","baseShift","limitShift","getBoundary","toFloatingUIPadding","options","hasScrollableElement","shiftToCoverTarget","disableTether","overflowBoundary","container","overflowBoundaryPadding","isRtl","boundary","crossAxis","limiter","mainAxis","padding","altBoundary"],"mappings":"AACA,SAASA,SAASC,SAAS,EAAEC,UAAU,QAAQ,mBAAmB;AAElE,SAASC,WAAW,EAAEC,mBAAmB,QAAQ,iBAAiB;AAUlE;;CAEC,GACD,OAAO,SAASJ,MAAMK,OAA+B;IACnD,MAAM,EACJC,oBAAoB,EACpBC,kBAAkB,EAClBC,aAAa,EACbC,gBAAgB,EAChBC,SAAS,EACTC,uBAAuB,EACvBC,KAAK,EACN,GAAGP;IAEJ,OAAOJ,UAAU;QACf,GAAIK,wBAAwB;YAAEO,UAAU;QAAoB,CAAC;QAC7D,GAAIN,sBAAsB;YACxBO,WAAW;YACXC,SAASb,WAAW;gBAAEY,WAAW;gBAAME,UAAU;YAAM;QACzD,CAAC;QACD,GAAIR,iBAAiB;YACnBM,WAAWN,kBAAkB;YAC7BO,SAASb,WAAW;gBAAEY,WAAWN,kBAAkB;gBAAOQ,UAAU;YAAM;QAC5E,CAAC;QACD,GAAIL,2BAA2B;YAAEM,SAASb,oBAAoBO,yBAAyBC;QAAO,CAAC;QAC/F,GAAIH,oBAAoB;YAAES,aAAa;YAAML,UAAUV,YAAYO,WAAWD;QAAkB,CAAC;IACnG;AACF"}
1
+ {"version":3,"sources":["../src/middleware/shift.ts"],"sourcesContent":["import type { Middleware } from '@floating-ui/dom';\nimport { shift as baseShift, limitShift } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\nimport { getBoundary, toFloatingUIPadding } from '../utils/index';\n\nexport interface ShiftMiddlewareOptions\n extends Pick<PositioningOptions, 'overflowBoundary' | 'overflowBoundaryPadding' | 'shiftToCoverTarget'> {\n hasScrollableElement?: boolean;\n disableTether?: PositioningOptions['unstable_disableTether'];\n container: HTMLElement | null;\n isRtl: boolean;\n}\n\n/**\n * Wraps the floating UI shift middleware for easier usage of our options\n */\nexport function shift(options: ShiftMiddlewareOptions): Middleware {\n const {\n hasScrollableElement,\n shiftToCoverTarget,\n disableTether,\n overflowBoundary,\n container,\n overflowBoundaryPadding,\n isRtl,\n } = options;\n\n return baseShift({\n ...(hasScrollableElement && { boundary: 'clippingAncestors' }),\n ...(shiftToCoverTarget && {\n crossAxis: true,\n limiter: limitShift({ crossAxis: true, mainAxis: false }),\n }),\n ...(disableTether && {\n crossAxis: disableTether === 'all',\n limiter: limitShift({ crossAxis: disableTether !== 'all', mainAxis: false }),\n }),\n ...(overflowBoundaryPadding && { padding: toFloatingUIPadding(overflowBoundaryPadding, isRtl) }),\n ...(overflowBoundary && { altBoundary: true, boundary: getBoundary(container, overflowBoundary) }),\n });\n}\n"],"names":["shift","baseShift","limitShift","getBoundary","toFloatingUIPadding","options","hasScrollableElement","shiftToCoverTarget","disableTether","overflowBoundary","container","overflowBoundaryPadding","isRtl","boundary","crossAxis","limiter","mainAxis","padding","altBoundary"],"mappings":"AACA,SAASA,SAASC,SAAS,EAAEC,UAAU,QAAQ,mBAAmB;AAElE,SAASC,WAAW,EAAEC,mBAAmB,QAAQ,oBAAiB;AAUlE;;CAEC,GACD,OAAO,SAASJ,MAAMK,OAA+B;IACnD,MAAM,EACJC,oBAAoB,EACpBC,kBAAkB,EAClBC,aAAa,EACbC,gBAAgB,EAChBC,SAAS,EACTC,uBAAuB,EACvBC,KAAK,EACN,GAAGP;IAEJ,OAAOJ,UAAU;QACf,GAAIK,wBAAwB;YAAEO,UAAU;QAAoB,CAAC;QAC7D,GAAIN,sBAAsB;YACxBO,WAAW;YACXC,SAASb,WAAW;gBAAEY,WAAW;gBAAME,UAAU;YAAM;QACzD,CAAC;QACD,GAAIR,iBAAiB;YACnBM,WAAWN,kBAAkB;YAC7BO,SAASb,WAAW;gBAAEY,WAAWN,kBAAkB;gBAAOQ,UAAU;YAAM;QAC5E,CAAC;QACD,GAAIL,2BAA2B;YAAEM,SAASb,oBAAoBO,yBAAyBC;QAAO,CAAC;QAC/F,GAAIH,oBAAoB;YAAES,aAAa;YAAML,UAAUV,YAAYO,WAAWD;QAAkB,CAAC;IACnG;AACF"}
@@ -1,10 +1,10 @@
1
1
  'use client';
2
- import { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
3
- import * as React from 'react';
4
- import { POSITIONING_END_EVENT } from './constants';
5
- import { createPositionManager } from './createPositionManager';
6
- import { usePositioningOptions } from './usePositioningOptions';
7
- import { useCallbackRef, hasAutofocusFilter } from './utils';
2
+ import { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from "@fluentui/react-utilities";
3
+ import * as React from "react";
4
+ import { POSITIONING_END_EVENT } from "./constants.js";
5
+ import { createPositionManager } from "./createPositionManager.js";
6
+ import { usePositioningOptions } from "./usePositioningOptions.js";
7
+ import { useCallbackRef, hasAutofocusFilter } from "./utils/index.js";
8
8
  /**
9
9
  * @internal
10
10
  */ export function usePositioning(options) {
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/usePositioning.ts"],"sourcesContent":["'use client';\n\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { POSITIONING_END_EVENT } from './constants';\nimport { createPositionManager } from './createPositionManager';\nimport type {\n OnPositioningEndEvent,\n PositioningOptions,\n PositioningProps,\n PositionManager,\n TargetElement,\n UsePositioningReturn,\n} from './types';\nimport { usePositioningOptions } from './usePositioningOptions';\nimport { useCallbackRef, hasAutofocusFilter } from './utils';\n\n/**\n * @internal\n */\nexport function usePositioning(options: PositioningProps & PositioningOptions): UsePositioningReturn {\n const managerRef = React.useRef<PositionManager | null>(null);\n const targetRef = React.useRef<TargetElement | null>(null);\n const overrideTargetRef = React.useRef<TargetElement | null>(null);\n const containerRef = React.useRef<HTMLElement | null>(null);\n const arrowRef = React.useRef<HTMLElement | null>(null);\n\n const { enabled = true } = options;\n const resolvePositioningOptions = usePositioningOptions(options);\n const updatePositionManager = React.useCallback(() => {\n if (managerRef.current) {\n managerRef.current.dispose();\n }\n managerRef.current = null;\n\n const target = overrideTargetRef.current ?? targetRef.current;\n\n if (enabled && canUseDOM() && target && containerRef.current) {\n managerRef.current = createPositionManager({\n container: containerRef.current,\n target,\n arrow: arrowRef.current,\n ...resolvePositioningOptions(containerRef.current, arrowRef.current),\n });\n }\n }, [enabled, resolvePositioningOptions]);\n\n const setOverrideTarget = useEventCallback((target: TargetElement | null) => {\n overrideTargetRef.current = target;\n updatePositionManager();\n });\n\n React.useImperativeHandle(\n options.positioningRef,\n () => ({\n updatePosition: () => managerRef.current?.updatePosition(),\n setTarget: (target: TargetElement | null) => {\n if (options.target && process.env.NODE_ENV !== 'production') {\n const err = new Error();\n // eslint-disable-next-line no-console\n console.warn('Imperative setTarget should not be used at the same time as target option');\n // eslint-disable-next-line no-console\n console.warn(err.stack);\n }\n\n setOverrideTarget(target);\n },\n }),\n [options.target, setOverrideTarget],\n );\n\n useIsomorphicLayoutEffect(() => {\n setOverrideTarget(options.target ?? null);\n }, [options.target, setOverrideTarget]);\n\n useIsomorphicLayoutEffect(() => {\n updatePositionManager();\n }, [updatePositionManager]);\n\n if (process.env.NODE_ENV !== 'production') {\n // This checked should run only in development mode\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (containerRef.current) {\n const contentNode = containerRef.current;\n const treeWalker = contentNode.ownerDocument?.createTreeWalker(contentNode, NodeFilter.SHOW_ELEMENT, {\n acceptNode: hasAutofocusFilter,\n });\n\n while (treeWalker.nextNode()) {\n const node = treeWalker.currentNode;\n // eslint-disable-next-line no-console\n console.warn('usePositioning():', node);\n // eslint-disable-next-line no-console\n console.warn(\n [\n 'usePositioning(): ^ this node contains \"autoFocus\" prop on a React element. This can break the initial',\n 'positioning of an element and cause a window jump effect. This issue occurs because React polyfills',\n '\"autoFocus\" behavior to solve inconsistencies between different browsers:',\n 'https://github.com/facebook/react/issues/11851#issuecomment-351787078',\n '\\n',\n 'However, \".focus()\" in this case occurs before any other React effects will be executed',\n '(React.useEffect(), componentDidMount(), etc.) and we can not prevent this behavior. If you really',\n 'want to use \"autoFocus\" please add \"position: fixed\" to styles of the element that is wrapped by',\n '\"Popper\".',\n `In general, it's not recommended to use \"autoFocus\" as it may break accessibility aspects:`,\n 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md',\n '\\n',\n 'We suggest to use the \"trapFocus\" prop on Fluent components or a catch \"ref\" and then use',\n '\"ref.current.focus\" in React.useEffect():',\n 'https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element',\n ].join(' '),\n );\n }\n }\n // We run this check once, no need to add deps here\n // TODO: Should be rework to handle options.enabled and contentRef updates\n }, []);\n }\n\n const setTarget = useCallbackRef<TargetElement>(null, target => {\n if (targetRef.current !== target) {\n targetRef.current = target;\n updatePositionManager();\n }\n });\n\n const onPositioningEnd = useEventCallback((e: OnPositioningEndEvent) => options.onPositioningEnd?.(e));\n const setContainer = useCallbackRef<HTMLElement | null>(null, container => {\n if (containerRef.current !== container) {\n // Cast because CustomEvent<OnPositioningEndEventDetail> is not assignable to EventListener\n containerRef.current?.removeEventListener(POSITIONING_END_EVENT, onPositioningEnd as EventListener);\n container?.addEventListener(POSITIONING_END_EVENT, onPositioningEnd as EventListener);\n containerRef.current = container;\n updatePositionManager();\n }\n });\n\n const setArrow = useCallbackRef<HTMLElement | null>(null, arrow => {\n if (arrowRef.current !== arrow) {\n arrowRef.current = arrow;\n updatePositionManager();\n }\n });\n\n // Let users use callback refs so they feel like 'normal' DOM refs\n return { targetRef: setTarget, containerRef: setContainer, arrowRef: setArrow };\n}\n"],"names":["canUseDOM","useEventCallback","useIsomorphicLayoutEffect","React","POSITIONING_END_EVENT","createPositionManager","usePositioningOptions","useCallbackRef","hasAutofocusFilter","usePositioning","options","managerRef","useRef","targetRef","overrideTargetRef","containerRef","arrowRef","enabled","resolvePositioningOptions","updatePositionManager","useCallback","current","dispose","target","container","arrow","setOverrideTarget","useImperativeHandle","positioningRef","updatePosition","setTarget","process","env","NODE_ENV","err","Error","console","warn","stack","useEffect","contentNode","treeWalker","ownerDocument","createTreeWalker","NodeFilter","SHOW_ELEMENT","acceptNode","nextNode","node","currentNode","join","onPositioningEnd","e","setContainer","removeEventListener","addEventListener","setArrow"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/usePositioning.ts"],"sourcesContent":["'use client';\n\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { POSITIONING_END_EVENT } from './constants';\nimport { createPositionManager } from './createPositionManager';\nimport type {\n OnPositioningEndEvent,\n PositioningOptions,\n PositioningProps,\n PositionManager,\n TargetElement,\n UsePositioningReturn,\n} from './types';\nimport { usePositioningOptions } from './usePositioningOptions';\nimport { useCallbackRef, hasAutofocusFilter } from './utils';\n\n/**\n * @internal\n */\nexport function usePositioning(options: PositioningProps & PositioningOptions): UsePositioningReturn {\n const managerRef = React.useRef<PositionManager | null>(null);\n const targetRef = React.useRef<TargetElement | null>(null);\n const overrideTargetRef = React.useRef<TargetElement | null>(null);\n const containerRef = React.useRef<HTMLElement | null>(null);\n const arrowRef = React.useRef<HTMLElement | null>(null);\n\n const { enabled = true } = options;\n const resolvePositioningOptions = usePositioningOptions(options);\n const updatePositionManager = React.useCallback(() => {\n if (managerRef.current) {\n managerRef.current.dispose();\n }\n managerRef.current = null;\n\n const target = overrideTargetRef.current ?? targetRef.current;\n\n if (enabled && canUseDOM() && target && containerRef.current) {\n managerRef.current = createPositionManager({\n container: containerRef.current,\n target,\n arrow: arrowRef.current,\n ...resolvePositioningOptions(containerRef.current, arrowRef.current),\n });\n }\n }, [enabled, resolvePositioningOptions]);\n\n const setOverrideTarget = useEventCallback((target: TargetElement | null) => {\n overrideTargetRef.current = target;\n updatePositionManager();\n });\n\n React.useImperativeHandle(\n options.positioningRef,\n () => ({\n updatePosition: () => managerRef.current?.updatePosition(),\n setTarget: (target: TargetElement | null) => {\n if (options.target && process.env.NODE_ENV !== 'production') {\n const err = new Error();\n // eslint-disable-next-line no-console\n console.warn('Imperative setTarget should not be used at the same time as target option');\n // eslint-disable-next-line no-console\n console.warn(err.stack);\n }\n\n setOverrideTarget(target);\n },\n }),\n [options.target, setOverrideTarget],\n );\n\n useIsomorphicLayoutEffect(() => {\n setOverrideTarget(options.target ?? null);\n }, [options.target, setOverrideTarget]);\n\n useIsomorphicLayoutEffect(() => {\n updatePositionManager();\n }, [updatePositionManager]);\n\n if (process.env.NODE_ENV !== 'production') {\n // This checked should run only in development mode\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (containerRef.current) {\n const contentNode = containerRef.current;\n const treeWalker = contentNode.ownerDocument?.createTreeWalker(contentNode, NodeFilter.SHOW_ELEMENT, {\n acceptNode: hasAutofocusFilter,\n });\n\n while (treeWalker.nextNode()) {\n const node = treeWalker.currentNode;\n // eslint-disable-next-line no-console\n console.warn('usePositioning():', node);\n // eslint-disable-next-line no-console\n console.warn(\n [\n 'usePositioning(): ^ this node contains \"autoFocus\" prop on a React element. This can break the initial',\n 'positioning of an element and cause a window jump effect. This issue occurs because React polyfills',\n '\"autoFocus\" behavior to solve inconsistencies between different browsers:',\n 'https://github.com/facebook/react/issues/11851#issuecomment-351787078',\n '\\n',\n 'However, \".focus()\" in this case occurs before any other React effects will be executed',\n '(React.useEffect(), componentDidMount(), etc.) and we can not prevent this behavior. If you really',\n 'want to use \"autoFocus\" please add \"position: fixed\" to styles of the element that is wrapped by',\n '\"Popper\".',\n `In general, it's not recommended to use \"autoFocus\" as it may break accessibility aspects:`,\n 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md',\n '\\n',\n 'We suggest to use the \"trapFocus\" prop on Fluent components or a catch \"ref\" and then use',\n '\"ref.current.focus\" in React.useEffect():',\n 'https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element',\n ].join(' '),\n );\n }\n }\n // We run this check once, no need to add deps here\n // TODO: Should be rework to handle options.enabled and contentRef updates\n }, []);\n }\n\n const setTarget = useCallbackRef<TargetElement>(null, target => {\n if (targetRef.current !== target) {\n targetRef.current = target;\n updatePositionManager();\n }\n });\n\n const onPositioningEnd = useEventCallback((e: OnPositioningEndEvent) => options.onPositioningEnd?.(e));\n const setContainer = useCallbackRef<HTMLElement | null>(null, container => {\n if (containerRef.current !== container) {\n // Cast because CustomEvent<OnPositioningEndEventDetail> is not assignable to EventListener\n containerRef.current?.removeEventListener(POSITIONING_END_EVENT, onPositioningEnd as EventListener);\n container?.addEventListener(POSITIONING_END_EVENT, onPositioningEnd as EventListener);\n containerRef.current = container;\n updatePositionManager();\n }\n });\n\n const setArrow = useCallbackRef<HTMLElement | null>(null, arrow => {\n if (arrowRef.current !== arrow) {\n arrowRef.current = arrow;\n updatePositionManager();\n }\n });\n\n // Let users use callback refs so they feel like 'normal' DOM refs\n return { targetRef: setTarget, containerRef: setContainer, arrowRef: setArrow };\n}\n"],"names":["canUseDOM","useEventCallback","useIsomorphicLayoutEffect","React","POSITIONING_END_EVENT","createPositionManager","usePositioningOptions","useCallbackRef","hasAutofocusFilter","usePositioning","options","managerRef","useRef","targetRef","overrideTargetRef","containerRef","arrowRef","enabled","resolvePositioningOptions","updatePositionManager","useCallback","current","dispose","target","container","arrow","setOverrideTarget","useImperativeHandle","positioningRef","updatePosition","setTarget","process","env","NODE_ENV","err","Error","console","warn","stack","useEffect","contentNode","treeWalker","ownerDocument","createTreeWalker","NodeFilter","SHOW_ELEMENT","acceptNode","nextNode","node","currentNode","join","onPositioningEnd","e","setContainer","removeEventListener","addEventListener","setArrow"],"mappings":"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"}
@@ -1,6 +1,6 @@
1
1
  'use client';
2
- import * as React from 'react';
3
- import { createVirtualElementFromClick } from './createVirtualElementFromClick';
2
+ import * as React from "react";
3
+ import { createVirtualElementFromClick } from "./createVirtualElementFromClick.js";
4
4
  /**
5
5
  * A state hook that manages a popper virtual element from mouseevents.
6
6
  * Useful for scenarios where a component needs to be positioned by mouse click (e.g. contextmenu)
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/usePositioningMouseTarget.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { createVirtualElementFromClick } from './createVirtualElementFromClick';\nimport type { PositioningVirtualElement, SetVirtualMouseTarget } from './types';\n\n/**\n * A state hook that manages a popper virtual element from mouseevents.\n * Useful for scenarios where a component needs to be positioned by mouse click (e.g. contextmenu)\n * React synthetic events are not persisted by this hook\n *\n * @internal\n * @param initialState - initializes a user provided state similare to useState\n * @returns state and dispatcher for a Popper virtual element that uses native/synthetic mouse events\n */\nexport const usePositioningMouseTarget = (\n initialState?: PositioningVirtualElement | (() => PositioningVirtualElement),\n): readonly [PositioningVirtualElement | undefined, SetVirtualMouseTarget] => {\n const [virtualElement, setVirtualElement] = React.useState<PositioningVirtualElement | undefined>(initialState);\n\n const setVirtualMouseTarget: SetVirtualMouseTarget = event => {\n if (event === undefined || event === null) {\n setVirtualElement(undefined);\n return;\n }\n\n let mouseevent: MouseEvent;\n if (!(event instanceof MouseEvent)) {\n mouseevent = event.nativeEvent;\n } else {\n mouseevent = event;\n }\n\n if (!(mouseevent instanceof MouseEvent) && process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.error('usePositioningMouseTarget should only be used with MouseEvent');\n }\n\n const contextTarget = createVirtualElementFromClick(mouseevent);\n setVirtualElement(contextTarget);\n };\n\n return [virtualElement, setVirtualMouseTarget] as const;\n};\n"],"names":["React","createVirtualElementFromClick","usePositioningMouseTarget","initialState","virtualElement","setVirtualElement","useState","setVirtualMouseTarget","event","undefined","mouseevent","MouseEvent","nativeEvent","process","env","NODE_ENV","console","error","contextTarget"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,kCAAkC;AAGhF;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC;IAEA,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGL,MAAMM,QAAQ,CAAwCH;IAElG,MAAMI,wBAA+CC,CAAAA;QACnD,IAAIA,UAAUC,aAAaD,UAAU,MAAM;YACzCH,kBAAkBI;YAClB;QACF;QAEA,IAAIC;QACJ,IAAI,CAAEF,CAAAA,iBAAiBG,UAAS,GAAI;YAClCD,aAAaF,MAAMI,WAAW;QAChC,OAAO;YACLF,aAAaF;QACf;QAEA,IAAI,CAAEE,CAAAA,sBAAsBC,UAAS,KAAME,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YAChF,sCAAsC;YACtCC,QAAQC,KAAK,CAAC;QAChB;QAEA,MAAMC,gBAAgBjB,8BAA8BS;QACpDL,kBAAkBa;IACpB;IAEA,OAAO;QAACd;QAAgBG;KAAsB;AAChD,EAAE"}
1
+ {"version":3,"sources":["../src/usePositioningMouseTarget.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { createVirtualElementFromClick } from './createVirtualElementFromClick';\nimport type { PositioningVirtualElement, SetVirtualMouseTarget } from './types';\n\n/**\n * A state hook that manages a popper virtual element from mouseevents.\n * Useful for scenarios where a component needs to be positioned by mouse click (e.g. contextmenu)\n * React synthetic events are not persisted by this hook\n *\n * @internal\n * @param initialState - initializes a user provided state similare to useState\n * @returns state and dispatcher for a Popper virtual element that uses native/synthetic mouse events\n */\nexport const usePositioningMouseTarget = (\n initialState?: PositioningVirtualElement | (() => PositioningVirtualElement),\n): readonly [PositioningVirtualElement | undefined, SetVirtualMouseTarget] => {\n const [virtualElement, setVirtualElement] = React.useState<PositioningVirtualElement | undefined>(initialState);\n\n const setVirtualMouseTarget: SetVirtualMouseTarget = event => {\n if (event === undefined || event === null) {\n setVirtualElement(undefined);\n return;\n }\n\n let mouseevent: MouseEvent;\n if (!(event instanceof MouseEvent)) {\n mouseevent = event.nativeEvent;\n } else {\n mouseevent = event;\n }\n\n if (!(mouseevent instanceof MouseEvent) && process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.error('usePositioningMouseTarget should only be used with MouseEvent');\n }\n\n const contextTarget = createVirtualElementFromClick(mouseevent);\n setVirtualElement(contextTarget);\n };\n\n return [virtualElement, setVirtualMouseTarget] as const;\n};\n"],"names":["React","createVirtualElementFromClick","usePositioningMouseTarget","initialState","virtualElement","setVirtualElement","useState","setVirtualMouseTarget","event","undefined","mouseevent","MouseEvent","nativeEvent","process","env","NODE_ENV","console","error","contextTarget"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,qCAAkC;AAGhF;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC;IAEA,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGL,MAAMM,QAAQ,CAAwCH;IAElG,MAAMI,wBAA+CC,CAAAA;QACnD,IAAIA,UAAUC,aAAaD,UAAU,MAAM;YACzCH,kBAAkBI;YAClB;QACF;QAEA,IAAIC;QACJ,IAAI,CAAEF,CAAAA,iBAAiBG,UAAS,GAAI;YAClCD,aAAaF,MAAMI,WAAW;QAChC,OAAO;YACLF,aAAaF;QACf;QAEA,IAAI,CAAEE,CAAAA,sBAAsBC,UAAS,KAAME,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YAChF,sCAAsC;YACtCC,QAAQC,KAAK,CAAC;QAChB;QAEA,MAAMC,gBAAgBjB,8BAA8BS;QACpDL,kBAAkBa;IACpB;IAEA,OAAO;QAACd;QAAgBG;KAAsB;AAChD,EAAE"}
@@ -1,12 +1,12 @@
1
1
  'use client';
2
- import { devtools } from '@floating-ui/devtools';
3
- import { hide as hideMiddleware, arrow as arrowMiddleware } from '@floating-ui/dom';
4
- import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
5
- import * as React from 'react';
6
- import { shift as shiftMiddleware, flip as flipMiddleware, coverTarget as coverTargetMiddleware, maxSize as maxSizeMiddleware, resetMaxSize as resetMaxSizeMiddleware, offset as offsetMiddleware, intersecting as intersectingMiddleware, matchTargetSize as matchTargetSizeMiddleware } from './middleware';
7
- import { toFloatingUIPlacement, hasScrollParent, normalizeAutoSize } from './utils';
8
- import { devtoolsCallback } from './utils/devtools';
9
- import { usePositioningConfiguration } from './PositioningConfigurationContext';
2
+ import { devtools } from "@floating-ui/devtools";
3
+ import { hide as hideMiddleware, arrow as arrowMiddleware } from "@floating-ui/dom";
4
+ import { useFluent_unstable as useFluent } from "@fluentui/react-shared-contexts";
5
+ import * as React from "react";
6
+ import { shift as shiftMiddleware, flip as flipMiddleware, coverTarget as coverTargetMiddleware, maxSize as maxSizeMiddleware, resetMaxSize as resetMaxSizeMiddleware, offset as offsetMiddleware, intersecting as intersectingMiddleware, matchTargetSize as matchTargetSizeMiddleware } from "./middleware/index.js";
7
+ import { toFloatingUIPlacement, hasScrollParent, normalizeAutoSize } from "./utils/index.js";
8
+ import { devtoolsCallback } from "./utils/devtools.js";
9
+ import { usePositioningConfiguration } from "./PositioningConfigurationContext.js";
10
10
  /**
11
11
  * This is redundant and exists only to manage React dependencies properly & avoid leaking individual options to the
12
12
  * scope of `usePositioningOptions`.
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/usePositioningOptions.ts"],"sourcesContent":["'use client';\n\nimport { devtools } from '@floating-ui/devtools';\nimport { hide as hideMiddleware, arrow as arrowMiddleware } from '@floating-ui/dom';\nimport type { Middleware, Placement, Strategy } from '@floating-ui/dom';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport * as React from 'react';\n\nimport {\n shift as shiftMiddleware,\n flip as flipMiddleware,\n coverTarget as coverTargetMiddleware,\n maxSize as maxSizeMiddleware,\n resetMaxSize as resetMaxSizeMiddleware,\n offset as offsetMiddleware,\n intersecting as intersectingMiddleware,\n matchTargetSize as matchTargetSizeMiddleware,\n} from './middleware';\nimport type { PositioningConfigurationFn, PositioningConfigurationFnOptions, PositioningOptions } from './types';\nimport { toFloatingUIPlacement, hasScrollParent, normalizeAutoSize } from './utils';\nimport { devtoolsCallback } from './utils/devtools';\nimport { usePositioningConfiguration } from './PositioningConfigurationContext';\n\n/**\n * This is redundant and exists only to manage React dependencies properly & avoid leaking individual options to the\n * scope of `usePositioningOptions`.\n *\n * @internal\n */\nfunction usePositioningConfigFn(\n configFn: PositioningConfigurationFn,\n options: PositioningOptions,\n): (container: HTMLElement, arrow: HTMLElement | null) => PositioningConfigurationFnOptions {\n const {\n align,\n arrowPadding,\n autoSize,\n coverTarget,\n disableUpdateOnResize,\n flipBoundary,\n offset,\n overflowBoundary,\n pinned,\n position,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_disableTether,\n strategy,\n overflowBoundaryPadding,\n fallbackPositions,\n useTransform,\n matchTargetSize,\n shiftToCoverTarget,\n } = options;\n\n return React.useCallback(\n (container: HTMLElement, arrow: HTMLElement | null) => {\n return configFn({\n container,\n arrow,\n options: {\n autoSize,\n disableUpdateOnResize,\n matchTargetSize,\n offset,\n strategy,\n coverTarget,\n flipBoundary,\n overflowBoundary,\n useTransform,\n overflowBoundaryPadding,\n pinned,\n arrowPadding,\n align,\n fallbackPositions,\n shiftToCoverTarget,\n position,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_disableTether,\n },\n });\n },\n [\n autoSize,\n disableUpdateOnResize,\n matchTargetSize,\n offset,\n strategy,\n coverTarget,\n flipBoundary,\n overflowBoundary,\n useTransform,\n overflowBoundaryPadding,\n pinned,\n arrowPadding,\n align,\n fallbackPositions,\n shiftToCoverTarget,\n position,\n unstable_disableTether,\n configFn,\n ],\n );\n}\n\n/**\n * @internal\n */\nexport function usePositioningOptions(options: PositioningOptions): (\n container: HTMLElement,\n arrow: HTMLElement | null,\n) => {\n placement: Placement | undefined;\n middleware: Middleware[];\n strategy: Strategy;\n disableUpdateOnResize?: boolean;\n useTransform?: boolean;\n} {\n const { dir, targetDocument } = useFluent();\n const isRtl = dir === 'rtl';\n\n const configFn = usePositioningConfigFn(usePositioningConfiguration(), options);\n const {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n positionFixed,\n } = options;\n\n return React.useCallback(\n (container: HTMLElement, arrow: HTMLElement | null) => {\n const hasScrollableElement = hasScrollParent(container);\n\n const optionsAfterEnhancement = configFn(container, arrow);\n const {\n autoSize,\n disableUpdateOnResize,\n matchTargetSize,\n offset,\n coverTarget,\n flipBoundary,\n overflowBoundary,\n useTransform,\n overflowBoundaryPadding,\n pinned,\n position,\n arrowPadding,\n strategy,\n align,\n fallbackPositions,\n shiftToCoverTarget,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_disableTether,\n } = optionsAfterEnhancement;\n const normalizedAutoSize = normalizeAutoSize(autoSize);\n\n const middleware = [\n normalizedAutoSize && resetMaxSizeMiddleware(normalizedAutoSize),\n matchTargetSize && matchTargetSizeMiddleware(),\n offset && offsetMiddleware(offset),\n coverTarget && coverTargetMiddleware(),\n !pinned && flipMiddleware({ container, flipBoundary, hasScrollableElement, isRtl, fallbackPositions }),\n shiftMiddleware({\n container,\n hasScrollableElement,\n overflowBoundary,\n disableTether: unstable_disableTether,\n overflowBoundaryPadding,\n isRtl,\n shiftToCoverTarget,\n }),\n normalizedAutoSize &&\n maxSizeMiddleware(normalizedAutoSize, { container, overflowBoundary, overflowBoundaryPadding, isRtl }),\n intersectingMiddleware(),\n arrow && arrowMiddleware({ element: arrow, padding: arrowPadding }),\n hideMiddleware({ strategy: 'referenceHidden' }),\n hideMiddleware({ strategy: 'escaped' }),\n process.env.NODE_ENV !== 'production' &&\n targetDocument &&\n devtools(targetDocument, devtoolsCallback(optionsAfterEnhancement)),\n ].filter(Boolean) as Middleware[];\n\n const placement = toFloatingUIPlacement(align, position, isRtl);\n\n return {\n placement,\n middleware,\n strategy: strategy ?? positionFixed ? ('fixed' as const) : ('absolute' as const),\n\n disableUpdateOnResize,\n useTransform,\n };\n },\n [configFn, isRtl, targetDocument, positionFixed],\n );\n}\n"],"names":["devtools","hide","hideMiddleware","arrow","arrowMiddleware","useFluent_unstable","useFluent","React","shift","shiftMiddleware","flip","flipMiddleware","coverTarget","coverTargetMiddleware","maxSize","maxSizeMiddleware","resetMaxSize","resetMaxSizeMiddleware","offset","offsetMiddleware","intersecting","intersectingMiddleware","matchTargetSize","matchTargetSizeMiddleware","toFloatingUIPlacement","hasScrollParent","normalizeAutoSize","devtoolsCallback","usePositioningConfiguration","usePositioningConfigFn","configFn","options","align","arrowPadding","autoSize","disableUpdateOnResize","flipBoundary","overflowBoundary","pinned","position","unstable_disableTether","strategy","overflowBoundaryPadding","fallbackPositions","useTransform","shiftToCoverTarget","useCallback","container","usePositioningOptions","dir","targetDocument","isRtl","positionFixed","hasScrollableElement","optionsAfterEnhancement","normalizedAutoSize","middleware","disableTether","element","padding","process","env","NODE_ENV","filter","Boolean","placement"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/usePositioningOptions.ts"],"sourcesContent":["'use client';\n\nimport { devtools } from '@floating-ui/devtools';\nimport { hide as hideMiddleware, arrow as arrowMiddleware } from '@floating-ui/dom';\nimport type { Middleware, Placement, Strategy } from '@floating-ui/dom';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport * as React from 'react';\n\nimport {\n shift as shiftMiddleware,\n flip as flipMiddleware,\n coverTarget as coverTargetMiddleware,\n maxSize as maxSizeMiddleware,\n resetMaxSize as resetMaxSizeMiddleware,\n offset as offsetMiddleware,\n intersecting as intersectingMiddleware,\n matchTargetSize as matchTargetSizeMiddleware,\n} from './middleware';\nimport type { PositioningConfigurationFn, PositioningConfigurationFnOptions, PositioningOptions } from './types';\nimport { toFloatingUIPlacement, hasScrollParent, normalizeAutoSize } from './utils';\nimport { devtoolsCallback } from './utils/devtools';\nimport { usePositioningConfiguration } from './PositioningConfigurationContext';\n\n/**\n * This is redundant and exists only to manage React dependencies properly & avoid leaking individual options to the\n * scope of `usePositioningOptions`.\n *\n * @internal\n */\nfunction usePositioningConfigFn(\n configFn: PositioningConfigurationFn,\n options: PositioningOptions,\n): (container: HTMLElement, arrow: HTMLElement | null) => PositioningConfigurationFnOptions {\n const {\n align,\n arrowPadding,\n autoSize,\n coverTarget,\n disableUpdateOnResize,\n flipBoundary,\n offset,\n overflowBoundary,\n pinned,\n position,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_disableTether,\n strategy,\n overflowBoundaryPadding,\n fallbackPositions,\n useTransform,\n matchTargetSize,\n shiftToCoverTarget,\n } = options;\n\n return React.useCallback(\n (container: HTMLElement, arrow: HTMLElement | null) => {\n return configFn({\n container,\n arrow,\n options: {\n autoSize,\n disableUpdateOnResize,\n matchTargetSize,\n offset,\n strategy,\n coverTarget,\n flipBoundary,\n overflowBoundary,\n useTransform,\n overflowBoundaryPadding,\n pinned,\n arrowPadding,\n align,\n fallbackPositions,\n shiftToCoverTarget,\n position,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_disableTether,\n },\n });\n },\n [\n autoSize,\n disableUpdateOnResize,\n matchTargetSize,\n offset,\n strategy,\n coverTarget,\n flipBoundary,\n overflowBoundary,\n useTransform,\n overflowBoundaryPadding,\n pinned,\n arrowPadding,\n align,\n fallbackPositions,\n shiftToCoverTarget,\n position,\n unstable_disableTether,\n configFn,\n ],\n );\n}\n\n/**\n * @internal\n */\nexport function usePositioningOptions(options: PositioningOptions): (\n container: HTMLElement,\n arrow: HTMLElement | null,\n) => {\n placement: Placement | undefined;\n middleware: Middleware[];\n strategy: Strategy;\n disableUpdateOnResize?: boolean;\n useTransform?: boolean;\n} {\n const { dir, targetDocument } = useFluent();\n const isRtl = dir === 'rtl';\n\n const configFn = usePositioningConfigFn(usePositioningConfiguration(), options);\n const {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n positionFixed,\n } = options;\n\n return React.useCallback(\n (container: HTMLElement, arrow: HTMLElement | null) => {\n const hasScrollableElement = hasScrollParent(container);\n\n const optionsAfterEnhancement = configFn(container, arrow);\n const {\n autoSize,\n disableUpdateOnResize,\n matchTargetSize,\n offset,\n coverTarget,\n flipBoundary,\n overflowBoundary,\n useTransform,\n overflowBoundaryPadding,\n pinned,\n position,\n arrowPadding,\n strategy,\n align,\n fallbackPositions,\n shiftToCoverTarget,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_disableTether,\n } = optionsAfterEnhancement;\n const normalizedAutoSize = normalizeAutoSize(autoSize);\n\n const middleware = [\n normalizedAutoSize && resetMaxSizeMiddleware(normalizedAutoSize),\n matchTargetSize && matchTargetSizeMiddleware(),\n offset && offsetMiddleware(offset),\n coverTarget && coverTargetMiddleware(),\n !pinned && flipMiddleware({ container, flipBoundary, hasScrollableElement, isRtl, fallbackPositions }),\n shiftMiddleware({\n container,\n hasScrollableElement,\n overflowBoundary,\n disableTether: unstable_disableTether,\n overflowBoundaryPadding,\n isRtl,\n shiftToCoverTarget,\n }),\n normalizedAutoSize &&\n maxSizeMiddleware(normalizedAutoSize, { container, overflowBoundary, overflowBoundaryPadding, isRtl }),\n intersectingMiddleware(),\n arrow && arrowMiddleware({ element: arrow, padding: arrowPadding }),\n hideMiddleware({ strategy: 'referenceHidden' }),\n hideMiddleware({ strategy: 'escaped' }),\n process.env.NODE_ENV !== 'production' &&\n targetDocument &&\n devtools(targetDocument, devtoolsCallback(optionsAfterEnhancement)),\n ].filter(Boolean) as Middleware[];\n\n const placement = toFloatingUIPlacement(align, position, isRtl);\n\n return {\n placement,\n middleware,\n strategy: strategy ?? positionFixed ? ('fixed' as const) : ('absolute' as const),\n\n disableUpdateOnResize,\n useTransform,\n };\n },\n [configFn, isRtl, targetDocument, positionFixed],\n );\n}\n"],"names":["devtools","hide","hideMiddleware","arrow","arrowMiddleware","useFluent_unstable","useFluent","React","shift","shiftMiddleware","flip","flipMiddleware","coverTarget","coverTargetMiddleware","maxSize","maxSizeMiddleware","resetMaxSize","resetMaxSizeMiddleware","offset","offsetMiddleware","intersecting","intersectingMiddleware","matchTargetSize","matchTargetSizeMiddleware","toFloatingUIPlacement","hasScrollParent","normalizeAutoSize","devtoolsCallback","usePositioningConfiguration","usePositioningConfigFn","configFn","options","align","arrowPadding","autoSize","disableUpdateOnResize","flipBoundary","overflowBoundary","pinned","position","unstable_disableTether","strategy","overflowBoundaryPadding","fallbackPositions","useTransform","shiftToCoverTarget","useCallback","container","usePositioningOptions","dir","targetDocument","isRtl","positionFixed","hasScrollableElement","optionsAfterEnhancement","normalizedAutoSize","middleware","disableTether","element","padding","process","env","NODE_ENV","filter","Boolean","placement"],"mappings":"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"}
@@ -1,7 +1,7 @@
1
1
  'use client';
2
- import * as React from 'react';
3
- import { useEventCallback, isHTMLElement } from '@fluentui/react-utilities';
4
- import { POSITIONING_SLIDE_DIRECTION_VAR_X, POSITIONING_SLIDE_DIRECTION_VAR_Y } from './constants';
2
+ import * as React from "react";
3
+ import { useEventCallback, isHTMLElement } from "@fluentui/react-utilities";
4
+ import { POSITIONING_SLIDE_DIRECTION_VAR_X, POSITIONING_SLIDE_DIRECTION_VAR_Y } from "./constants.js";
5
5
  /**
6
6
  * Returns the slide direction unit vectors for a given Floating UI placement.
7
7
  * Values are -1, 0, or 1, representing the direction the element slides in from.