@fluentui/react-positioning 9.18.1 → 9.18.3

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 (52) hide show
  1. package/CHANGELOG.md +21 -2
  2. package/README.md +11 -9
  3. package/dist/index.d.ts +18 -18
  4. package/lib/hooks/useSafeZoneArea/SafeZoneArea.js +156 -0
  5. package/lib/hooks/useSafeZoneArea/SafeZoneArea.js.map +1 -0
  6. package/lib/{SafeZoneArea.styles.js → hooks/useSafeZoneArea/SafeZoneArea.styles.js} +2 -4
  7. package/lib/hooks/useSafeZoneArea/SafeZoneArea.styles.js.map +1 -0
  8. package/lib/hooks/useSafeZoneArea/computeOutsideClipPath.js +27 -0
  9. package/lib/hooks/useSafeZoneArea/computeOutsideClipPath.js.map +1 -0
  10. package/lib/hooks/useSafeZoneArea/createSafeZoneAreaStateStore.js +25 -0
  11. package/lib/hooks/useSafeZoneArea/createSafeZoneAreaStateStore.js.map +1 -0
  12. package/lib/hooks/useSafeZoneArea/getMouseAnchor.js +51 -0
  13. package/lib/hooks/useSafeZoneArea/getMouseAnchor.js.map +1 -0
  14. package/lib/hooks/useSafeZoneArea/getRectCorners.js +24 -0
  15. package/lib/hooks/useSafeZoneArea/getRectCorners.js.map +1 -0
  16. package/lib/hooks/useSafeZoneArea/pointsToSvgPath.js +7 -0
  17. package/lib/hooks/useSafeZoneArea/pointsToSvgPath.js.map +1 -0
  18. package/lib/hooks/useSafeZoneArea/types.js +5 -0
  19. package/lib/hooks/useSafeZoneArea/types.js.map +1 -0
  20. package/lib/{useSafeZoneArea.js → hooks/useSafeZoneArea/useSafeZoneArea.js} +6 -4
  21. package/lib/hooks/useSafeZoneArea/useSafeZoneArea.js.map +1 -0
  22. package/lib/index.js +1 -1
  23. package/lib/index.js.map +1 -1
  24. package/lib-commonjs/hooks/useSafeZoneArea/SafeZoneArea.js +168 -0
  25. package/lib-commonjs/hooks/useSafeZoneArea/SafeZoneArea.js.map +1 -0
  26. package/lib-commonjs/{SafeZoneArea.styles.js → hooks/useSafeZoneArea/SafeZoneArea.styles.js} +1 -5
  27. package/lib-commonjs/hooks/useSafeZoneArea/SafeZoneArea.styles.js.map +1 -0
  28. package/lib-commonjs/hooks/useSafeZoneArea/computeOutsideClipPath.js +33 -0
  29. package/lib-commonjs/hooks/useSafeZoneArea/computeOutsideClipPath.js.map +1 -0
  30. package/lib-commonjs/hooks/useSafeZoneArea/createSafeZoneAreaStateStore.js +35 -0
  31. package/lib-commonjs/hooks/useSafeZoneArea/createSafeZoneAreaStateStore.js.map +1 -0
  32. package/lib-commonjs/hooks/useSafeZoneArea/getMouseAnchor.js +62 -0
  33. package/lib-commonjs/hooks/useSafeZoneArea/getMouseAnchor.js.map +1 -0
  34. package/lib-commonjs/hooks/useSafeZoneArea/getRectCorners.js +34 -0
  35. package/lib-commonjs/hooks/useSafeZoneArea/getRectCorners.js.map +1 -0
  36. package/lib-commonjs/hooks/useSafeZoneArea/pointsToSvgPath.js +17 -0
  37. package/lib-commonjs/hooks/useSafeZoneArea/pointsToSvgPath.js.map +1 -0
  38. package/lib-commonjs/hooks/useSafeZoneArea/types.js +8 -0
  39. package/lib-commonjs/hooks/useSafeZoneArea/types.js.map +1 -0
  40. package/lib-commonjs/{useSafeZoneArea.js → hooks/useSafeZoneArea/useSafeZoneArea.js} +6 -4
  41. package/lib-commonjs/hooks/useSafeZoneArea/useSafeZoneArea.js.map +1 -0
  42. package/lib-commonjs/index.js +1 -1
  43. package/lib-commonjs/index.js.map +1 -1
  44. package/package.json +3 -3
  45. package/lib/SafeZoneArea.js +0 -309
  46. package/lib/SafeZoneArea.js.map +0 -1
  47. package/lib/SafeZoneArea.styles.js.map +0 -1
  48. package/lib/useSafeZoneArea.js.map +0 -1
  49. package/lib-commonjs/SafeZoneArea.js +0 -319
  50. package/lib-commonjs/SafeZoneArea.js.map +0 -1
  51. package/lib-commonjs/SafeZoneArea.styles.js.map +0 -1
  52. package/lib-commonjs/useSafeZoneArea.js.map +0 -1
@@ -0,0 +1,168 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ SafeZoneArea: function() {
13
+ return SafeZoneArea;
14
+ },
15
+ isSameCoordinates: function() {
16
+ return isSameCoordinates;
17
+ },
18
+ isSameRect: function() {
19
+ return isSameRect;
20
+ }
21
+ });
22
+ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
23
+ const _react = require("@griffel/react");
24
+ const _reactutilities = require("@fluentui/react-utilities");
25
+ const _react1 = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
26
+ const _shim = require("use-sync-external-store/shim");
27
+ const _getRectCorners = require("./getRectCorners");
28
+ const _getMouseAnchor = require("./getMouseAnchor");
29
+ const _pointsToSvgPath = require("./pointsToSvgPath");
30
+ const _SafeZoneAreastyles = require("./SafeZoneArea.styles");
31
+ const _computeOutsideClipPath = require("./computeOutsideClipPath");
32
+ // ---
33
+ const EMPTY_RECT = {
34
+ top: 0,
35
+ right: 0,
36
+ bottom: 0,
37
+ left: 0,
38
+ width: 0,
39
+ height: 0,
40
+ x: 0,
41
+ y: 0,
42
+ toJSON () {
43
+ return '';
44
+ }
45
+ };
46
+ function isSameRect(a, b) {
47
+ return a.top === b.top && a.right === b.right && a.bottom === b.bottom && a.left === b.left && a.width === b.width && a.height === b.height;
48
+ }
49
+ function isSameCoordinates(a, b) {
50
+ return a[0] === b[0] && a[1] === b[1];
51
+ }
52
+ const SafeZoneArea = /*#__PURE__*/ _react1.memo((props)=>{
53
+ const { debug, onMouseEnter, onMouseMove, onMouseLeave, stateStore } = props;
54
+ const clipPathId = (0, _reactutilities.useId)();
55
+ const styles = (0, _SafeZoneAreastyles.useStyles)();
56
+ const active = (0, _shim.useSyncExternalStore)(stateStore.subscribe, stateStore.isActive);
57
+ const svgRef = _react1.useRef(null);
58
+ const [state, setState] = _react1.useState(()=>({
59
+ containerRect: EMPTY_RECT,
60
+ targetRect: EMPTY_RECT,
61
+ mouseCoordinates: [
62
+ 0,
63
+ 0
64
+ ]
65
+ }));
66
+ _react1.useImperativeHandle(props.imperativeRef, ()=>({
67
+ updateSVG (newState) {
68
+ setState((prevState)=>{
69
+ // Heads up!
70
+ // A small optimization to avoid unnecessary re-renders
71
+ if (isSameRect(prevState.containerRect, newState.containerRect) && isSameRect(prevState.targetRect, newState.targetRect) && isSameCoordinates(prevState.mouseCoordinates, newState.mouseCoordinates)) {
72
+ return prevState;
73
+ }
74
+ return newState;
75
+ });
76
+ }
77
+ }), []);
78
+ const { containerRect, targetRect, mouseCoordinates } = state;
79
+ const topOffset = Math.min(targetRect.top, containerRect.top);
80
+ const leftOffset = Math.min(targetRect.left, containerRect.left);
81
+ const bottomOffset = Math.max(targetRect.bottom, containerRect.bottom);
82
+ const rightOffset = Math.max(targetRect.right, containerRect.right);
83
+ // ---
84
+ const containerCorners = (0, _getRectCorners.getRectCorners)(containerRect, [
85
+ leftOffset,
86
+ topOffset
87
+ ]);
88
+ const targetCorners = (0, _getRectCorners.getRectCorners)(targetRect, [
89
+ leftOffset,
90
+ topOffset
91
+ ]);
92
+ // Heads up!
93
+ // The SVG coordinate system starts at the top-left corner of the SVG element,
94
+ // so we need to adjust the mouse coordinates relative to the SVG's top-left corner.
95
+ const relativeMouseCoordinates = [
96
+ mouseCoordinates[0] - leftOffset,
97
+ mouseCoordinates[1] - topOffset
98
+ ];
99
+ const mouseAnchor = (0, _getMouseAnchor.getMouseAnchor)(containerCorners.topLeft, containerCorners.bottomRight, relativeMouseCoordinates);
100
+ const triangleA = [
101
+ mouseAnchor,
102
+ containerCorners.topLeft,
103
+ containerCorners.topRight
104
+ ];
105
+ const triangleB = [
106
+ mouseAnchor,
107
+ containerCorners.topRight,
108
+ containerCorners.bottomRight
109
+ ];
110
+ const triangleC = [
111
+ mouseAnchor,
112
+ containerCorners.bottomRight,
113
+ containerCorners.bottomLeft
114
+ ];
115
+ const triangleD = [
116
+ mouseAnchor,
117
+ containerCorners.bottomLeft,
118
+ containerCorners.topLeft
119
+ ];
120
+ const svgWidth = rightOffset - leftOffset;
121
+ const svgHeight = bottomOffset - topOffset;
122
+ const clipPath = (0, _computeOutsideClipPath.computeOutsideClipPath)(svgWidth, svgHeight, {
123
+ x: targetCorners.topLeft[0],
124
+ y: targetCorners.topLeft[1],
125
+ width: targetRect.width,
126
+ height: targetRect.height
127
+ }, {
128
+ x: containerCorners.topLeft[0],
129
+ y: containerCorners.topLeft[1],
130
+ width: containerRect.width,
131
+ height: containerRect.height
132
+ });
133
+ return /*#__PURE__*/ _react1.createElement("div", {
134
+ className: (0, _react.mergeClasses)(styles.wrapper, active && styles.wrapperActive),
135
+ "data-safe-zone": ""
136
+ }, active ? /*#__PURE__*/ _react1.createElement("svg", {
137
+ "aria-hidden": true,
138
+ className: styles.svg,
139
+ xmlns: "http://www.w3.org/2000/svg",
140
+ ref: svgRef,
141
+ style: {
142
+ width: `${svgWidth}px`,
143
+ height: `${svgHeight}px`,
144
+ transform: `translate(${leftOffset}px, ${topOffset}px)`
145
+ }
146
+ }, /*#__PURE__*/ _react1.createElement("g", {
147
+ className: (0, _react.mergeClasses)(styles.triangle, debug && styles.triangleDebug),
148
+ clipPath: `url(#${clipPathId})`,
149
+ onMouseEnter: onMouseEnter,
150
+ onMouseMove: onMouseMove,
151
+ onMouseLeave: onMouseLeave
152
+ }, /*#__PURE__*/ _react1.createElement("path", {
153
+ d: (0, _pointsToSvgPath.pointsToSvgPath)(triangleA)
154
+ }), /*#__PURE__*/ _react1.createElement("path", {
155
+ d: (0, _pointsToSvgPath.pointsToSvgPath)(triangleB)
156
+ }), /*#__PURE__*/ _react1.createElement("path", {
157
+ d: (0, _pointsToSvgPath.pointsToSvgPath)(triangleC)
158
+ }), /*#__PURE__*/ _react1.createElement("path", {
159
+ d: (0, _pointsToSvgPath.pointsToSvgPath)(triangleD)
160
+ })), /*#__PURE__*/ _react1.createElement("clipPath", {
161
+ id: clipPathId
162
+ }, /*#__PURE__*/ _react1.createElement("path", {
163
+ d: clipPath
164
+ })), debug && /*#__PURE__*/ _react1.createElement("path", {
165
+ className: styles.rectDebug,
166
+ d: clipPath
167
+ })) : null);
168
+ });
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/hooks/useSafeZoneArea/SafeZoneArea.tsx"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useId } 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) {\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) {\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) => {\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":["SafeZoneArea","isSameCoordinates","isSameRect","EMPTY_RECT","top","right","bottom","left","width","height","x","y","toJSON","a","b","React","memo","props","debug","onMouseEnter","onMouseMove","onMouseLeave","stateStore","clipPathId","useId","styles","useStyles","active","useSyncExternalStore","subscribe","isActive","svgRef","useRef","state","setState","useState","containerRect","targetRect","mouseCoordinates","useImperativeHandle","imperativeRef","updateSVG","newState","prevState","topOffset","Math","min","leftOffset","bottomOffset","max","rightOffset","containerCorners","getRectCorners","targetCorners","relativeMouseCoordinates","mouseAnchor","getMouseAnchor","topLeft","bottomRight","triangleA","topRight","triangleB","triangleC","bottomLeft","triangleD","svgWidth","svgHeight","clipPath","computeOutsideClipPath","createElement","div","className","mergeClasses","wrapper","wrapperActive","data-safe-zone","svg","aria-hidden","xmlns","ref","style","transform","g","triangle","triangleDebug","path","d","pointsToSvgPath","id","rectDebug"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
@@ -34,9 +34,7 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
34
34
  },
35
35
  triangleDebug: {
36
36
  Bceei9c: "f7116n6",
37
- Bkfmm31: "f1xab38x",
38
- ojy3ng: "f1wle4v7",
39
- Be5yapy: "f1t0ei4n"
37
+ Bkfmm31: "f1xab38x"
40
38
  },
41
39
  rectDebug: {
42
40
  Bkfmm31: "fyegryc"
@@ -56,8 +54,6 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
56
54
  ".f1cguypg{pointer-events:auto;}",
57
55
  ".f7116n6{cursor:crosshair;}",
58
56
  ".f1xab38x{fill:color-mix(in srgb, var(--colorPaletteGreenBackground3) 20%, transparent);}",
59
- ".f1wle4v7{stroke:color-mix(in srgb, var(--colorPaletteGreenBackground3) 60%, transparent);}",
60
- ".f1t0ei4n{stroke-width:2px;}",
61
57
  ".fyegryc{fill:color-mix(in srgb, var(--colorPaletteRedBackground3) 20%, transparent);}"
62
58
  ]
63
59
  });
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["SafeZoneArea.styles.js"],"sourcesContent":["import { makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const useStyles = makeStyles({\n wrapper: {\n display: 'none',\n height: 0,\n width: 0,\n pointerEvents: 'none'\n },\n wrapperActive: {\n display: 'block'\n },\n svg: {\n fill: 'transparent',\n pointerEvents: 'none',\n position: 'fixed',\n top: 0,\n left: 0\n },\n triangle: {\n pointerEvents: 'auto'\n },\n triangleDebug: {\n cursor: 'crosshair',\n fill: `color-mix(in srgb, ${tokens.colorPaletteGreenBackground3} 20%, transparent)`\n },\n rectDebug: {\n fill: `color-mix(in srgb, ${tokens.colorPaletteRedBackground3} 20%, transparent)`\n }\n});\n"],"names":["useStyles","__styles","wrapper","mc9l5x","Bqenvij","a9b677","Bkecrkj","wrapperActive","svg","Bkfmm31","qhf8xq","Bhzewxz","oyh7mz","triangle","triangleDebug","Bceei9c","rectDebug","d"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAEaA;;;eAAAA;;;uBAFc;AAEpB,MAAMA,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;IAAAC,eAAA;QAAAJ,QAAA;IAAA;IAAAK,KAAA;QAAAC,SAAA;QAAAH,SAAA;QAAAI,QAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,UAAA;QAAAP,SAAA;IAAA;IAAAQ,eAAA;QAAAC,SAAA;QAAAN,SAAA;IAAA;IAAAO,WAAA;QAAAP,SAAA;IAAA;AAAA,GAAA;IAAAQ,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA"}
@@ -0,0 +1,33 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "computeOutsideClipPath", {
6
+ enumerable: true,
7
+ get: function() {
8
+ return computeOutsideClipPath;
9
+ }
10
+ });
11
+ function drawRectangle(rect) {
12
+ if (rect.width <= 0 || rect.height <= 0) {
13
+ return '';
14
+ }
15
+ let pathData = '';
16
+ // Creates a subpath moving in counterclockwise direction to create a hole
17
+ pathData += `M ${rect.x},${rect.y} `;
18
+ pathData += `V ${rect.y + rect.height} `; // Down to bottom-left
19
+ pathData += `H ${rect.x + rect.width} `; // Right to bottom-right
20
+ pathData += `V ${rect.y} `; // Up to top-right
21
+ pathData += `H ${rect.x} `; // Left to top-left (closing)
22
+ pathData += `Z `; // Close path
23
+ return pathData;
24
+ }
25
+ function computeOutsideClipPath(svgWidth, svgHeight, targetRect, containerRect) {
26
+ let pathData = `M 0,0 H ${svgWidth} V ${svgHeight} H 0 Z `;
27
+ // For each rectangle, add a subpath that "cuts out" the rectangle
28
+ // The trick is to draw each rectangle in the counterclockwise direction
29
+ // which creates a "hole" in the main path
30
+ pathData += drawRectangle(targetRect);
31
+ pathData += drawRectangle(containerRect);
32
+ return pathData;
33
+ }
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/hooks/useSafeZoneArea/computeOutsideClipPath.ts"],"sourcesContent":["function drawRectangle(rect: { x: number; y: number; width: number; height: number }): string {\n if (rect.width <= 0 || rect.height <= 0) {\n return '';\n }\n\n let pathData = '';\n\n // Creates a subpath moving in counterclockwise direction to create a hole\n\n pathData += `M ${rect.x},${rect.y} `;\n pathData += `V ${rect.y + rect.height} `; // Down to bottom-left\n pathData += `H ${rect.x + rect.width} `; // Right to bottom-right\n pathData += `V ${rect.y} `; // Up to top-right\n pathData += `H ${rect.x} `; // Left to top-left (closing)\n pathData += `Z `; // Close path\n\n return pathData;\n}\n\n/**\n * Computes a clip path that covers the area outside multiple rectangles.\n *\n * @internal\n */\nexport function computeOutsideClipPath(\n svgWidth: number,\n svgHeight: number,\n targetRect: { x: number; y: number; width: number; height: number },\n containerRect: { x: number; y: number; width: number; height: number },\n) {\n let pathData = `M 0,0 H ${svgWidth} V ${svgHeight} H 0 Z `;\n\n // For each rectangle, add a subpath that \"cuts out\" the rectangle\n // The trick is to draw each rectangle in the counterclockwise direction\n // which creates a \"hole\" in the main path\n\n pathData += drawRectangle(targetRect);\n pathData += drawRectangle(containerRect);\n\n return pathData;\n}\n"],"names":["computeOutsideClipPath","drawRectangle","rect","width","height","pathData","x","y","svgWidth","svgHeight","targetRect","containerRect"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAwBgBA;;;eAAAA;;;AAxBhB,SAASC,cAAcC,IAA6D;IAClF,IAAIA,KAAKC,KAAK,IAAI,KAAKD,KAAKE,MAAM,IAAI,GAAG;QACvC,OAAO;IACT;IAEA,IAAIC,WAAW;IAEf,0EAA0E;IAE1EA,YAAY,CAAC,EAAE,EAAEH,KAAKI,CAAC,CAAC,CAAC,EAAEJ,KAAKK,CAAC,CAAC,CAAC,CAAC;IACpCF,YAAY,CAAC,EAAE,EAAEH,KAAKK,CAAC,GAAGL,KAAKE,MAAM,CAAC,CAAC,CAAC,EAAE,sBAAsB;IAChEC,YAAY,CAAC,EAAE,EAAEH,KAAKI,CAAC,GAAGJ,KAAKC,KAAK,CAAC,CAAC,CAAC,EAAE,wBAAwB;IACjEE,YAAY,CAAC,EAAE,EAAEH,KAAKK,CAAC,CAAC,CAAC,CAAC,EAAE,kBAAkB;IAC9CF,YAAY,CAAC,EAAE,EAAEH,KAAKI,CAAC,CAAC,CAAC,CAAC,EAAE,6BAA6B;IACzDD,YAAY,CAAC,EAAE,CAAC,EAAE,aAAa;IAE/B,OAAOA;AACT;AAOO,SAASL,uBACdQ,QAAgB,EAChBC,SAAiB,EACjBC,UAAmE,EACnEC,aAAsE;IAEtE,IAAIN,WAAW,CAAC,QAAQ,EAAEG,SAAS,GAAG,EAAEC,UAAU,OAAO,CAAC;IAE1D,kEAAkE;IAClE,wEAAwE;IACxE,0CAA0C;IAE1CJ,YAAYJ,cAAcS;IAC1BL,YAAYJ,cAAcU;IAE1B,OAAON;AACT"}
@@ -0,0 +1,35 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "createSafeZoneAreaStateStore", {
6
+ enumerable: true,
7
+ get: function() {
8
+ return createSafeZoneAreaStateStore;
9
+ }
10
+ });
11
+ function createSafeZoneAreaStateStore() {
12
+ let isActive = false;
13
+ const listeners = [];
14
+ return {
15
+ isActive () {
16
+ return isActive;
17
+ },
18
+ toggleActive (newIsActive) {
19
+ if (isActive === newIsActive) {
20
+ return;
21
+ }
22
+ isActive = newIsActive;
23
+ listeners.forEach((listener)=>listener(isActive));
24
+ },
25
+ subscribe (listener) {
26
+ listeners.push(listener);
27
+ return ()=>{
28
+ const index = listeners.indexOf(listener);
29
+ if (index > -1) {
30
+ listeners.splice(index, 1);
31
+ }
32
+ };
33
+ }
34
+ };
35
+ }
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/hooks/useSafeZoneArea/createSafeZoneAreaStateStore.ts"],"sourcesContent":["export function createSafeZoneAreaStateStore() {\n let isActive = false;\n const listeners: ((value: boolean) => void)[] = [];\n\n return {\n isActive() {\n return isActive;\n },\n toggleActive(newIsActive: boolean) {\n if (isActive === newIsActive) {\n return;\n }\n\n isActive = newIsActive;\n listeners.forEach(listener => listener(isActive));\n },\n\n subscribe(listener: (value: boolean) => void) {\n listeners.push(listener);\n\n return () => {\n const index = listeners.indexOf(listener);\n\n if (index > -1) {\n listeners.splice(index, 1);\n }\n };\n },\n };\n}\n"],"names":["createSafeZoneAreaStateStore","isActive","listeners","toggleActive","newIsActive","forEach","listener","subscribe","push","index","indexOf","splice"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAAgBA;;;eAAAA;;;AAAT,SAASA;IACd,IAAIC,WAAW;IACf,MAAMC,YAA0C,EAAE;IAElD,OAAO;QACLD;YACE,OAAOA;QACT;QACAE,cAAaC,WAAoB;YAC/B,IAAIH,aAAaG,aAAa;gBAC5B;YACF;YAEAH,WAAWG;YACXF,UAAUG,OAAO,CAACC,CAAAA,WAAYA,SAASL;QACzC;QAEAM,WAAUD,QAAkC;YAC1CJ,UAAUM,IAAI,CAACF;YAEf,OAAO;gBACL,MAAMG,QAAQP,UAAUQ,OAAO,CAACJ;gBAEhC,IAAIG,QAAQ,CAAC,GAAG;oBACdP,UAAUS,MAAM,CAACF,OAAO;gBAC1B;YACF;QACF;IACF;AACF"}
@@ -0,0 +1,62 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ getMouseAnchor: function() {
13
+ return getMouseAnchor;
14
+ },
15
+ getUnitVector: function() {
16
+ return getUnitVector;
17
+ },
18
+ measureDistance: function() {
19
+ return measureDistance;
20
+ }
21
+ });
22
+ const OFFSET_DISTANCE = 20;
23
+ function measureDistance(a, b) {
24
+ return Math.sqrt((a[0] - b[0]) ** 2 + (a[1] - b[1]) ** 2);
25
+ }
26
+ function getUnitVector(a, b) {
27
+ const distance = measureDistance(a, b);
28
+ if (distance === 0) {
29
+ return [
30
+ 0,
31
+ 0
32
+ ];
33
+ }
34
+ return [
35
+ (a[0] - b[0]) / distance,
36
+ (a[1] - b[1]) / distance
37
+ ];
38
+ }
39
+ function getMouseAnchor(topLeftCorner, bottomRightCorner, mouseCoordinates) {
40
+ const containerCenter = [
41
+ (topLeftCorner[0] + bottomRightCorner[0]) / 2,
42
+ (topLeftCorner[1] + bottomRightCorner[1]) / 2
43
+ ];
44
+ const unitVector = getUnitVector([
45
+ mouseCoordinates[0],
46
+ mouseCoordinates[1]
47
+ ], [
48
+ containerCenter[0],
49
+ containerCenter[1]
50
+ ]);
51
+ const distance = measureDistance([
52
+ containerCenter[0],
53
+ containerCenter[1]
54
+ ], [
55
+ mouseCoordinates[0],
56
+ mouseCoordinates[1]
57
+ ]);
58
+ return [
59
+ containerCenter[0] + unitVector[0] * (distance + OFFSET_DISTANCE),
60
+ containerCenter[1] + unitVector[1] * (distance + OFFSET_DISTANCE)
61
+ ];
62
+ }
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/hooks/useSafeZoneArea/getMouseAnchor.ts"],"sourcesContent":["import type { Point } from './types';\n\nconst OFFSET_DISTANCE = 20;\n\n/**\n * Measures the distance between two points in a 2D space.\n */\nexport function measureDistance(a: Point, b: Point) {\n return Math.sqrt((a[0] - b[0]) ** 2 + (a[1] - b[1]) ** 2);\n}\n\n/**\n * Returns a unit vector pointing from point `b` to point `a`.\n * If the distance is zero, returns a zero vector.\n */\nexport function getUnitVector(a: Point, b: Point): Point {\n const distance = measureDistance(a, b);\n\n if (distance === 0) {\n return [0, 0];\n }\n\n return [(a[0] - b[0]) / distance, (a[1] - b[1]) / distance];\n}\n\n/**\n * Calculates the anchor point for a mouse position within a container defined by its top-left and bottom-right corners.\n * The anchor point is calculated as an offset from the center of the container in the direction of the mouse position.\n *\n * @internal\n */\nexport function getMouseAnchor(topLeftCorner: Point, bottomRightCorner: Point, mouseCoordinates: Point): Point {\n const containerCenter: Point = [\n (topLeftCorner[0] + bottomRightCorner[0]) / 2,\n (topLeftCorner[1] + bottomRightCorner[1]) / 2,\n ];\n\n const unitVector = getUnitVector(\n [mouseCoordinates[0], mouseCoordinates[1]],\n [containerCenter[0], containerCenter[1]],\n );\n const distance = measureDistance(\n [containerCenter[0], containerCenter[1]],\n [mouseCoordinates[0], mouseCoordinates[1]],\n );\n\n return [\n containerCenter[0] + unitVector[0] * (distance + OFFSET_DISTANCE),\n containerCenter[1] + unitVector[1] * (distance + OFFSET_DISTANCE),\n ];\n}\n"],"names":["getMouseAnchor","getUnitVector","measureDistance","OFFSET_DISTANCE","a","b","Math","sqrt","distance","topLeftCorner","bottomRightCorner","mouseCoordinates","containerCenter","unitVector"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA+BgBA,cAAAA;eAAAA;;IAhBAC,aAAAA;eAAAA;;IARAC,eAAAA;eAAAA;;;AALhB,MAAMC,kBAAkB;AAKjB,SAASD,gBAAgBE,CAAQ,EAAEC,CAAQ;IAChD,OAAOC,KAAKC,IAAI,CAAC,AAACH,CAAAA,CAAC,CAAC,EAAE,GAAGC,CAAC,CAAC,EAAE,AAAF,KAAO,IAAI,AAACD,CAAAA,CAAC,CAAC,EAAE,GAAGC,CAAC,CAAC,EAAE,AAAF,KAAO;AACzD;AAMO,SAASJ,cAAcG,CAAQ,EAAEC,CAAQ;IAC9C,MAAMG,WAAWN,gBAAgBE,GAAGC;IAEpC,IAAIG,aAAa,GAAG;QAClB,OAAO;YAAC;YAAG;SAAE;IACf;IAEA,OAAO;QAAEJ,CAAAA,CAAC,CAAC,EAAE,GAAGC,CAAC,CAAC,EAAE,AAAF,IAAMG;QAAWJ,CAAAA,CAAC,CAAC,EAAE,GAAGC,CAAC,CAAC,EAAE,AAAF,IAAMG;KAAS;AAC7D;AAQO,SAASR,eAAeS,aAAoB,EAAEC,iBAAwB,EAAEC,gBAAuB;IACpG,MAAMC,kBAAyB;QAC5BH,CAAAA,aAAa,CAAC,EAAE,GAAGC,iBAAiB,CAAC,EAAE,AAAF,IAAM;QAC3CD,CAAAA,aAAa,CAAC,EAAE,GAAGC,iBAAiB,CAAC,EAAE,AAAF,IAAM;KAC7C;IAED,MAAMG,aAAaZ,cACjB;QAACU,gBAAgB,CAAC,EAAE;QAAEA,gBAAgB,CAAC,EAAE;KAAC,EAC1C;QAACC,eAAe,CAAC,EAAE;QAAEA,eAAe,CAAC,EAAE;KAAC;IAE1C,MAAMJ,WAAWN,gBACf;QAACU,eAAe,CAAC,EAAE;QAAEA,eAAe,CAAC,EAAE;KAAC,EACxC;QAACD,gBAAgB,CAAC,EAAE;QAAEA,gBAAgB,CAAC,EAAE;KAAC;IAG5C,OAAO;QACLC,eAAe,CAAC,EAAE,GAAGC,UAAU,CAAC,EAAE,GAAIL,CAAAA,WAAWL,eAAAA;QACjDS,eAAe,CAAC,EAAE,GAAGC,UAAU,CAAC,EAAE,GAAIL,CAAAA,WAAWL,eAAAA;KAClD;AACH"}
@@ -0,0 +1,34 @@
1
+ /**
2
+ * Calculates the corners of a rectangle based on its DOMRect and an offset.
3
+ *
4
+ * @internal
5
+ */ "use strict";
6
+ Object.defineProperty(exports, "__esModule", {
7
+ value: true
8
+ });
9
+ Object.defineProperty(exports, "getRectCorners", {
10
+ enumerable: true,
11
+ get: function() {
12
+ return getRectCorners;
13
+ }
14
+ });
15
+ function getRectCorners(rect, offset) {
16
+ return {
17
+ topLeft: [
18
+ rect.left - offset[0],
19
+ rect.top - offset[1]
20
+ ],
21
+ topRight: [
22
+ rect.right - offset[0],
23
+ rect.top - offset[1]
24
+ ],
25
+ bottomRight: [
26
+ rect.right - offset[0],
27
+ rect.bottom - offset[1]
28
+ ],
29
+ bottomLeft: [
30
+ rect.left - offset[0],
31
+ rect.bottom - offset[1]
32
+ ]
33
+ };
34
+ }
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/hooks/useSafeZoneArea/getRectCorners.ts"],"sourcesContent":["import type { Point } from './types';\n\n/**\n * Calculates the corners of a rectangle based on its DOMRect and an offset.\n *\n * @internal\n */\nexport function getRectCorners(\n rect: DOMRect,\n offset: Point,\n): Record<'topLeft' | 'topRight' | 'bottomRight' | 'bottomLeft', Point> {\n return {\n topLeft: [rect.left - offset[0], rect.top - offset[1]],\n topRight: [rect.right - offset[0], rect.top - offset[1]],\n bottomRight: [rect.right - offset[0], rect.bottom - offset[1]],\n bottomLeft: [rect.left - offset[0], rect.bottom - offset[1]],\n };\n}\n"],"names":["getRectCorners","rect","offset","topLeft","left","top","topRight","right","bottomRight","bottom","bottomLeft"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAEA;;;;CAIC;;;;+BACeA;;;eAAAA;;;AAAT,SAASA,eACdC,IAAa,EACbC,MAAa;IAEb,OAAO;QACLC,SAAS;YAACF,KAAKG,IAAI,GAAGF,MAAM,CAAC,EAAE;YAAED,KAAKI,GAAG,GAAGH,MAAM,CAAC,EAAE;SAAC;QACtDI,UAAU;YAACL,KAAKM,KAAK,GAAGL,MAAM,CAAC,EAAE;YAAED,KAAKI,GAAG,GAAGH,MAAM,CAAC,EAAE;SAAC;QACxDM,aAAa;YAACP,KAAKM,KAAK,GAAGL,MAAM,CAAC,EAAE;YAAED,KAAKQ,MAAM,GAAGP,MAAM,CAAC,EAAE;SAAC;QAC9DQ,YAAY;YAACT,KAAKG,IAAI,GAAGF,MAAM,CAAC,EAAE;YAAED,KAAKQ,MAAM,GAAGP,MAAM,CAAC,EAAE;SAAC;IAC9D;AACF"}
@@ -0,0 +1,17 @@
1
+ /**
2
+ * Calculates the corners of a rectangle based on its DOMRect and an offset.
3
+ *
4
+ * @internal
5
+ */ "use strict";
6
+ Object.defineProperty(exports, "__esModule", {
7
+ value: true
8
+ });
9
+ Object.defineProperty(exports, "pointsToSvgPath", {
10
+ enumerable: true,
11
+ get: function() {
12
+ return pointsToSvgPath;
13
+ }
14
+ });
15
+ function pointsToSvgPath(points) {
16
+ return `M ${points} z`;
17
+ }
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/hooks/useSafeZoneArea/pointsToSvgPath.ts"],"sourcesContent":["import type { Point } from './types';\n\n/**\n * Calculates the corners of a rectangle based on its DOMRect and an offset.\n *\n * @internal\n */\nexport function pointsToSvgPath(points: Point[]) {\n return `M ${points} z`;\n}\n"],"names":["pointsToSvgPath","points"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":"AAEA;;;;CAIC;;;;+BACeA;;;eAAAA;;;AAAT,SAASA,gBAAgBC,MAAe;IAC7C,OAAO,CAAC,EAAE,EAAEA,OAAO,EAAE,CAAC;AACxB"}
@@ -0,0 +1,8 @@
1
+ /**
2
+ * A type representing a point in a 2D space as an array of two numbers (x & y coordinates).
3
+ *
4
+ * @internal
5
+ */ "use strict";
6
+ Object.defineProperty(exports, "__esModule", {
7
+ value: true
8
+ });
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/hooks/useSafeZoneArea/types.ts"],"sourcesContent":["/**\n * A type representing a point in a 2D space as an array of two numbers (x & y coordinates).\n *\n * @internal\n */\nexport type Point = [number, number];\n"],"names":[],"rangeMappings":";;;;","mappings":"AAAA;;;;CAIC"}
@@ -12,10 +12,10 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
12
12
  const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
13
13
  const _reactutilities = require("@fluentui/react-utilities");
14
14
  const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
15
+ const _createSafeZoneAreaStateStore = require("./createSafeZoneAreaStateStore");
15
16
  const _SafeZoneArea = require("./SafeZoneArea");
16
- const _utils = require("./utils");
17
17
  function useSafeZoneArea({ debug = false, disabled = false, onSafeZoneEnter, onSafeZoneMove, onSafeZoneLeave, onSafeZoneTimeout, timeout = 1500 } = {}) {
18
- const [stateStore] = _react.useState(_SafeZoneArea.createSafeZoneAreaStateStore);
18
+ const [stateStore] = _react.useState(_createSafeZoneAreaStateStore.createSafeZoneAreaStateStore);
19
19
  const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
20
20
  const safeZoneAreaRef = _react.useRef(null);
21
21
  const containerRef = _react.useRef(null);
@@ -133,9 +133,11 @@ function useSafeZoneArea({ debug = false, disabled = false, onSafeZoneEnter, onS
133
133
  if (containerEl && targetEl) {
134
134
  var _safeZoneAreaRef_current;
135
135
  (_safeZoneAreaRef_current = safeZoneAreaRef.current) === null || _safeZoneAreaRef_current === void 0 ? void 0 : _safeZoneAreaRef_current.updateSVG({
136
- containerPlacementSide: (0, _utils.parseFloatingUIPlacement)(containerEl.dataset.popperPlacement).side,
137
136
  containerRect: containerEl.getBoundingClientRect(),
138
- mouseCoordinates: mouseCoordinatesRef.current,
137
+ mouseCoordinates: [
138
+ mouseCoordinatesRef.current.x,
139
+ mouseCoordinatesRef.current.y
140
+ ],
139
141
  targetRect: targetEl.getBoundingClientRect()
140
142
  });
141
143
  }
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/hooks/useSafeZoneArea/useSafeZoneArea.tsx"],"sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useEventCallback, useMergedRefs } 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\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 const [stateStore] = React.useState(createSafeZoneAreaStateStore);\n const { targetDocument } = useFluent_unstable();\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 timeoutIdRef = React.useRef<number | null>(null);\n const mouseMoveIdRef = React.useRef<number | null>(null);\n\n const mouseCoordinatesRef = React.useRef<{ x: number; y: number }>({ x: 0, y: 0 });\n\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 const targetWindow = targetDocument?.defaultView;\n\n if (!targetWindow) {\n return;\n }\n\n if (timeoutIdRef.current) {\n targetWindow.clearTimeout(timeoutIdRef.current);\n timeoutIdRef.current = null;\n }\n\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 }, [disabled, stateStore, targetDocument]);\n\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 (timeoutIdRef.current) {\n targetDocument?.defaultView?.clearTimeout(timeoutIdRef.current);\n timeoutIdRef.current = null;\n }\n\n if (!stateStore.isActive()) {\n stateStore.toggleActive(true);\n }\n }\n\n return (el: HTMLElement | null) => {\n if (el === null) {\n const targetWindow = targetDocument?.defaultView;\n\n if (targetWindow) {\n if (mouseMoveIdRef.current) {\n targetWindow.cancelAnimationFrame(mouseMoveIdRef.current);\n mouseMoveIdRef.current = null;\n }\n\n if (timeoutIdRef.current) {\n targetWindow.clearTimeout(timeoutIdRef.current);\n timeoutIdRef.current = null;\n }\n }\n\n targetEl?.removeEventListener('mousemove', onTargetMouseMove);\n }\n\n targetEl = el;\n el?.addEventListener('mousemove', onTargetMouseMove);\n };\n }, [disabled, stateStore, targetDocument]);\n\n const onSvgMouseEnter = useEventCallback((e: React.MouseEvent) => {\n onSafeZoneEnter?.(e);\n\n const targetWindow = targetDocument?.defaultView;\n\n if (!targetWindow) {\n return;\n }\n\n if (timeoutIdRef.current) {\n targetWindow.clearTimeout(timeoutIdRef.current);\n timeoutIdRef.current = null;\n }\n\n // React 17 still uses pooled synthetic events\n e.persist();\n\n timeoutIdRef.current = targetWindow.setTimeout(() => {\n stateStore.toggleActive(false);\n onSafeZoneTimeout?.();\n }, timeout);\n });\n\n const onSvgMouseMove = useEventCallback((e: React.MouseEvent) => {\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 const targetWindow = targetDocument?.defaultView;\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 if (targetWindow) {\n mouseMoveIdRef.current = targetWindow.requestAnimationFrame(updateSVGs);\n }\n }\n\n updateSVGs();\n return;\n }\n\n if (mouseMoveIdRef.current) {\n targetDocument?.defaultView?.cancelAnimationFrame(mouseMoveIdRef.current);\n mouseMoveIdRef.current = null;\n }\n });\n }, [stateStore, targetDocument]);\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":["useSafeZoneArea","debug","disabled","onSafeZoneEnter","onSafeZoneMove","onSafeZoneLeave","onSafeZoneTimeout","timeout","stateStore","React","useState","createSafeZoneAreaStateStore","targetDocument","useFluent_unstable","safeZoneAreaRef","useRef","containerRef","targetRef","timeoutIdRef","mouseMoveIdRef","mouseCoordinatesRef","x","y","containerListenerRef","useMemo","containerEl","onContainerMouseEnter","targetWindow","defaultView","current","clearTimeout","toggleActive","el","removeEventListener","addEventListener","targetListenerRef","targetEl","onTargetMouseMove","e","clientX","clientY","isActive","cancelAnimationFrame","onSvgMouseEnter","useEventCallback","persist","setTimeout","onSvgMouseMove","onSvgMouseLeave","useEffect","subscribe","updateSVGs","updateSVG","containerRect","getBoundingClientRect","mouseCoordinates","targetRect","requestAnimationFrame","useMergedRefs","elementToRender","createElement","SafeZoneArea","onMouseEnter","onMouseMove","onMouseLeave","imperativeRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA8BgBA;;;eAAAA;;;;qCA9BmB;gCACa;iEACzB;8CAEsB;8BACmB;AAyBzD,SAASA,gBAAgB,EAC9BC,QAAQ,KAAK,EACbC,WAAW,KAAK,EAEhBC,eAAe,EACfC,cAAc,EACdC,eAAe,EACfC,iBAAiB,EAEjBC,UAAU,IAAI,EACK,GAAG,CAAC,CAAC;IACxB,MAAM,CAACC,WAAW,GAAGC,OAAMC,QAAQ,CAACC,0DAAAA;IACpC,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAAA;IAE3B,MAAMC,kBAAkBL,OAAMM,MAAM,CAA+B;IACnE,MAAMC,eAAeP,OAAMM,MAAM,CAAc;IAC/C,MAAME,YAAYR,OAAMM,MAAM,CAAc;IAE5C,MAAMG,eAAeT,OAAMM,MAAM,CAAgB;IACjD,MAAMI,iBAAiBV,OAAMM,MAAM,CAAgB;IAEnD,MAAMK,sBAAsBX,OAAMM,MAAM,CAA2B;QAAEM,GAAG;QAAGC,GAAG;IAAE;IAEhF,MAAMC,uBAAuBd,OAAMe,OAAO,CAAC;QACzC,IAAItB,UAAU;YACZ,OAAO;YACL,aAAa;YACf;QACF;QAEA,IAAIuB,cAAkC;QAEtC,SAASC;YACP,MAAMC,eAAef,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBgB,WAAW;YAEhD,IAAI,CAACD,cAAc;gBACjB;YACF;YAEA,IAAIT,aAAaW,OAAO,EAAE;gBACxBF,aAAaG,YAAY,CAACZ,aAAaW,OAAO;gBAC9CX,aAAaW,OAAO,GAAG;YACzB;YAEArB,WAAWuB,YAAY,CAAC;QAC1B;QAEA,OAAO,CAACC;YACN,IAAIA,OAAO,MAAM;gBACfP,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAaQ,mBAAmB,CAAC,cAAcP;YACjD;YAEAD,cAAcO;YACdA,OAAAA,QAAAA,OAAAA,KAAAA,IAAAA,KAAAA,IAAAA,GAAIE,gBAAgB,CAAC,cAAcR;QACrC;IACF,GAAG;QAACxB;QAAUM;QAAYI;KAAe;IAEzC,MAAMuB,oBAAoB1B,OAAMe,OAAO,CAAC;QACtC,IAAItB,UAAU;YACZ,OAAO;YACL,aAAa;YACf;QACF;QAEA,IAAIkC,WAA+B;QAEnC,SAASC,kBAAkBC,CAAa;YACtClB,oBAAoBS,OAAO,GAAG;gBAAER,GAAGiB,EAAEC,OAAO;gBAAEjB,GAAGgB,EAAEE,OAAO;YAAC;YAE3D,IAAItB,aAAaW,OAAO,EAAE;oBACxBjB;gBAAAA,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,CAAAA,8BAAAA,eAAgBgB,WAAW,AAAXA,MAAW,QAA3BhB,gCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,4BAA6BkB,YAAY,CAACZ,aAAaW,OAAO;gBAC9DX,aAAaW,OAAO,GAAG;YACzB;YAEA,IAAI,CAACrB,WAAWiC,QAAQ,IAAI;gBAC1BjC,WAAWuB,YAAY,CAAC;YAC1B;QACF;QAEA,OAAO,CAACC;YACN,IAAIA,OAAO,MAAM;gBACf,MAAML,eAAef,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBgB,WAAW;gBAEhD,IAAID,cAAc;oBAChB,IAAIR,eAAeU,OAAO,EAAE;wBAC1BF,aAAae,oBAAoB,CAACvB,eAAeU,OAAO;wBACxDV,eAAeU,OAAO,GAAG;oBAC3B;oBAEA,IAAIX,aAAaW,OAAO,EAAE;wBACxBF,aAAaG,YAAY,CAACZ,aAAaW,OAAO;wBAC9CX,aAAaW,OAAO,GAAG;oBACzB;gBACF;gBAEAO,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAUH,mBAAmB,CAAC,aAAaI;YAC7C;YAEAD,WAAWJ;YACXA,OAAAA,QAAAA,OAAAA,KAAAA,IAAAA,KAAAA,IAAAA,GAAIE,gBAAgB,CAAC,aAAaG;QACpC;IACF,GAAG;QAACnC;QAAUM;QAAYI;KAAe;IAEzC,MAAM+B,kBAAkBC,IAAAA,gCAAAA,EAAiB,CAACN;QACxCnC,oBAAAA,QAAAA,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAkBmC;QAElB,MAAMX,eAAef,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBgB,WAAW;QAEhD,IAAI,CAACD,cAAc;YACjB;QACF;QAEA,IAAIT,aAAaW,OAAO,EAAE;YACxBF,aAAaG,YAAY,CAACZ,aAAaW,OAAO;YAC9CX,aAAaW,OAAO,GAAG;QACzB;QAEA,8CAA8C;QAC9CS,EAAEO,OAAO;QAET3B,aAAaW,OAAO,GAAGF,aAAamB,UAAU,CAAC;YAC7CtC,WAAWuB,YAAY,CAAC;YACxBzB,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA;QACF,GAAGC;IACL;IAEA,MAAMwC,iBAAiBH,IAAAA,gCAAAA,EAAiB,CAACN;QACvClC,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAiBkC;IACnB;IAEA,MAAMU,kBAAkBJ,IAAAA,gCAAAA,EAAiB,CAACN;QACxCjC,oBAAAA,QAAAA,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAkBiC;IACpB;IAEA7B,OAAMwC,SAAS,CAAC;QACd,OAAOzC,WAAW0C,SAAS,CAACT,CAAAA;YAC1B,IAAIA,UAAU;gBACZ,SAASU;oBACP,MAAM1B,cAAcT,aAAaa,OAAO;oBACxC,MAAMO,WAAWnB,UAAUY,OAAO;oBAClC,MAAMF,eAAef,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBgB,WAAW;oBAEhD,IAAIH,eAAeW,UAAU;4BAC3BtB;wBAAAA,CAAAA,2BAAAA,gBAAgBe,OAAO,AAAPA,MAAO,QAAvBf,6BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,yBAAyBsC,SAAS,CAAC;4BACjCC,eAAe5B,YAAY6B,qBAAqB;4BAChDC,kBAAkB;gCAACnC,oBAAoBS,OAAO,CAACR,CAAC;gCAAED,oBAAoBS,OAAO,CAACP,CAAC;6BAAC;4BAChFkC,YAAYpB,SAASkB,qBAAqB;wBAC5C;oBACF;oBAEA,IAAI3B,cAAc;wBAChBR,eAAeU,OAAO,GAAGF,aAAa8B,qBAAqB,CAACN;oBAC9D;gBACF;gBAEAA;gBACA;YACF;YAEA,IAAIhC,eAAeU,OAAO,EAAE;oBAC1BjB;gBAAAA,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,CAAAA,8BAAAA,eAAgBgB,WAAW,AAAXA,MAAW,QAA3BhB,gCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,4BAA6B8B,oBAAoB,CAACvB,eAAeU,OAAO;gBACxEV,eAAeU,OAAO,GAAG;YAC3B;QACF;IACF,GAAG;QAACrB;QAAYI;KAAe;IAE/B,OAAO;QACLI,cAAc0C,IAAAA,6BAAAA,EAAc1C,cAAcO;QAC1CN,WAAWyC,IAAAA,6BAAAA,EAAczC,WAAWkB;QAEpCwB,iBAAiBlD,OAAMe,OAAO,CAC5B,IACEtB,WAAW,OAAA,WAAA,GACTO,OAAAmD,aAAA,CAACC,0BAAAA,EAAAA;gBACC5D,OAAOA;gBACP6D,cAAcnB;gBACdoB,aAAahB;gBACbiB,cAAchB;gBACdiB,eAAenD;gBACfN,YAAYA;gBAGlB;YAACN;YAAUD;YAAO0C;YAAiBI;YAAgBC;YAAiBxC;SAAW;IAEnF;AACF"}
@@ -46,5 +46,5 @@ const _createSlideStyles = require("./createSlideStyles");
46
46
  const _PositioningConfigurationContext = require("./PositioningConfigurationContext");
47
47
  const _usePositioning = require("./usePositioning");
48
48
  const _usePositioningMouseTarget = require("./usePositioningMouseTarget");
49
- const _useSafeZoneArea = require("./useSafeZoneArea");
49
+ const _useSafeZoneArea = require("./hooks/useSafeZoneArea/useSafeZoneArea");
50
50
  const _index = require("./utils/index");
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { createVirtualElementFromClick } from './createVirtualElementFromClick';\nexport { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';\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 './useSafeZoneArea';\nexport type { SafeBufferAreaOptions } from './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":["PositioningConfigurationProvider","createArrowHeightStyles","createArrowStyles","createSlideStyles","createVirtualElementFromClick","mergeArrowOffset","resolvePositioningShorthand","usePositioning","usePositioningMouseTarget","useSafeZoneArea"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKSA,gCAAgC;eAAhCA,iEAAgC;;IAJhCC,uBAAuB;eAAvBA,0CAAuB;;IAAEC,iBAAiB;eAAjBA,oCAAiB;;IAC1CC,iBAAiB;eAAjBA,oCAAiB;;IAFjBC,6BAA6B;eAA7BA,4DAA6B;;IAWAC,gBAAgB;eAAhBA,uBAAgB;;IAA7CC,2BAA2B;eAA3BA,kCAA2B;;IAJ3BC,cAAc;eAAdA,8BAAc;;IACdC,yBAAyB;eAAzBA,oDAAyB;;IACzBC,eAAe;eAAfA,gCAAe;;;+CATsB;mCACa;mCACzB;iDAGe;gCAElB;2CACW;iCACV;uBAE8B"}
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { createVirtualElementFromClick } from './createVirtualElementFromClick';\nexport { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';\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":["PositioningConfigurationProvider","createArrowHeightStyles","createArrowStyles","createSlideStyles","createVirtualElementFromClick","mergeArrowOffset","resolvePositioningShorthand","usePositioning","usePositioningMouseTarget","useSafeZoneArea"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKSA,gCAAgC;eAAhCA,iEAAgC;;IAJhCC,uBAAuB;eAAvBA,0CAAuB;;IAAEC,iBAAiB;eAAjBA,oCAAiB;;IAC1CC,iBAAiB;eAAjBA,oCAAiB;;IAFjBC,6BAA6B;eAA7BA,4DAA6B;;IAWAC,gBAAgB;eAAhBA,uBAAgB;;IAA7CC,2BAA2B;eAA3BA,kCAA2B;;IAJ3BC,cAAc;eAAdA,8BAAc;;IACdC,yBAAyB;eAAzBA,oDAAyB;;IACzBC,eAAe;eAAfA,gCAAe;;;+CATsB;mCACa;mCACzB;iDAGe;gCAElB;2CACW;iCACV;uBAE8B"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-positioning",
3
- "version": "9.18.1",
3
+ "version": "9.18.3",
4
4
  "description": "A react wrapper around Popper.js for Fluent UI",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -19,9 +19,9 @@
19
19
  "dependencies": {
20
20
  "@floating-ui/dom": "^1.6.12",
21
21
  "@floating-ui/devtools": "0.2.1",
22
- "@fluentui/react-shared-contexts": "^9.23.1",
22
+ "@fluentui/react-shared-contexts": "^9.24.0",
23
23
  "@fluentui/react-theme": "^9.1.24",
24
- "@fluentui/react-utilities": "^9.21.0",
24
+ "@fluentui/react-utilities": "^9.21.1",
25
25
  "@griffel/react": "^1.5.22",
26
26
  "@swc/helpers": "^0.5.1",
27
27
  "use-sync-external-store": "^1.2.0"