@fluentui/react-positioning 9.5.5 → 9.5.6
Sign up to get free protection for your applications and to get access to all the features.
- package/.swcrc +30 -0
- package/CHANGELOG.json +40 -1
- package/CHANGELOG.md +15 -2
- package/lib/constants.js.map +1 -1
- package/lib/createArrowStyles.js.map +1 -1
- package/lib/createPositionManager.js.map +1 -1
- package/lib/createVirtualElementFromClick.js +1 -2
- package/lib/createVirtualElementFromClick.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib/middleware/coverTarget.js.map +1 -1
- package/lib/middleware/flip.js.map +1 -1
- package/lib/middleware/index.js.map +1 -1
- package/lib/middleware/intersecting.js.map +1 -1
- package/lib/middleware/maxSize.js.map +1 -1
- package/lib/middleware/offset.js.map +1 -1
- package/lib/middleware/shift.js.map +1 -1
- package/lib/types.js +1 -1
- package/lib/types.js.map +1 -1
- package/lib/usePositioning.js +23 -21
- package/lib/usePositioning.js.map +1 -1
- package/lib/usePositioningMouseTarget.js.map +1 -1
- package/lib/utils/debounce.js +1 -2
- package/lib/utils/debounce.js.map +1 -1
- package/lib/utils/fromFloatingUIPlacement.js.map +1 -1
- package/lib/utils/getBoundary.js.map +1 -1
- package/lib/utils/getFloatingUIOffset.js.map +1 -1
- package/lib/utils/getReactFiberFromNode.js +1 -0
- package/lib/utils/getReactFiberFromNode.js.map +1 -1
- package/lib/utils/getScrollParent.js +5 -6
- package/lib/utils/getScrollParent.js.map +1 -1
- package/lib/utils/hasAutoFocusFilter.js +2 -2
- package/lib/utils/hasAutoFocusFilter.js.map +1 -1
- package/lib/utils/index.js.map +1 -1
- package/lib/utils/mergeArrowOffset.js +3 -4
- package/lib/utils/mergeArrowOffset.js.map +1 -1
- package/lib/utils/parseFloatingUIPlacement.js +1 -2
- package/lib/utils/parseFloatingUIPlacement.js.map +1 -1
- package/lib/utils/resolvePositioningShorthand.js.map +1 -1
- package/lib/utils/toFloatingUIPadding.js.map +1 -1
- package/lib/utils/toFloatingUIPlacement.js.map +1 -1
- package/lib/utils/toggleScrollListener.js.map +1 -1
- package/lib/utils/useCallbackRef.js.map +1 -1
- package/lib/utils/writeArrowUpdates.js +1 -2
- package/lib/utils/writeArrowUpdates.js.map +1 -1
- package/lib/utils/writeContainerupdates.js +4 -4
- package/lib/utils/writeContainerupdates.js.map +1 -1
- package/lib-commonjs/constants.js +18 -7
- package/lib-commonjs/constants.js.map +1 -1
- package/lib-commonjs/createArrowStyles.js +60 -88
- package/lib-commonjs/createArrowStyles.js.map +1 -1
- package/lib-commonjs/createPositionManager.js +103 -117
- package/lib-commonjs/createPositionManager.js.map +1 -1
- package/lib-commonjs/createVirtualElementFromClick.js +27 -26
- package/lib-commonjs/createVirtualElementFromClick.js.map +1 -1
- package/lib-commonjs/index.js +24 -51
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/middleware/coverTarget.js +34 -37
- package/lib-commonjs/middleware/coverTarget.js.map +1 -1
- package/lib-commonjs/middleware/flip.js +31 -38
- package/lib-commonjs/middleware/flip.js.map +1 -1
- package/lib-commonjs/middleware/index.js +10 -9
- package/lib-commonjs/middleware/index.js.map +1 -1
- package/lib-commonjs/middleware/intersecting.js +24 -22
- package/lib-commonjs/middleware/intersecting.js.map +1 -1
- package/lib-commonjs/middleware/maxSize.js +34 -40
- package/lib-commonjs/middleware/maxSize.js.map +1 -1
- package/lib-commonjs/middleware/offset.js +11 -12
- package/lib-commonjs/middleware/offset.js.map +1 -1
- package/lib-commonjs/middleware/shift.js +29 -37
- package/lib-commonjs/middleware/shift.js.map +1 -1
- package/lib-commonjs/types.js +5 -2
- package/lib-commonjs/types.js.map +1 -1
- package/lib-commonjs/usePositioning.js +200 -164
- package/lib-commonjs/usePositioning.js.map +1 -1
- package/lib-commonjs/usePositioningMouseTarget.js +34 -37
- package/lib-commonjs/usePositioningMouseTarget.js.map +1 -1
- package/lib-commonjs/utils/debounce.js +22 -21
- package/lib-commonjs/utils/debounce.js.map +1 -1
- package/lib-commonjs/utils/fromFloatingUIPlacement.js +30 -35
- package/lib-commonjs/utils/fromFloatingUIPlacement.js.map +1 -1
- package/lib-commonjs/utils/getBoundary.js +21 -22
- package/lib-commonjs/utils/getBoundary.js.map +1 -1
- package/lib-commonjs/utils/getFloatingUIOffset.js +23 -35
- package/lib-commonjs/utils/getFloatingUIOffset.js.map +1 -1
- package/lib-commonjs/utils/getReactFiberFromNode.js +45 -41
- package/lib-commonjs/utils/getReactFiberFromNode.js.map +1 -1
- package/lib-commonjs/utils/getScrollParent.js +52 -56
- package/lib-commonjs/utils/getScrollParent.js.map +1 -1
- package/lib-commonjs/utils/hasAutoFocusFilter.js +18 -17
- package/lib-commonjs/utils/hasAutoFocusFilter.js.map +1 -1
- package/lib-commonjs/utils/index.js +19 -18
- package/lib-commonjs/utils/index.js.map +1 -1
- package/lib-commonjs/utils/mergeArrowOffset.js +33 -32
- package/lib-commonjs/utils/mergeArrowOffset.js.map +1 -1
- package/lib-commonjs/utils/parseFloatingUIPlacement.js +15 -14
- package/lib-commonjs/utils/parseFloatingUIPlacement.js.map +1 -1
- package/lib-commonjs/utils/resolvePositioningShorthand.js +63 -61
- package/lib-commonjs/utils/resolvePositioningShorthand.js.map +1 -1
- package/lib-commonjs/utils/toFloatingUIPadding.js +23 -25
- package/lib-commonjs/utils/toFloatingUIPadding.js.map +1 -1
- package/lib-commonjs/utils/toFloatingUIPlacement.js +31 -33
- package/lib-commonjs/utils/toFloatingUIPlacement.js.map +1 -1
- package/lib-commonjs/utils/toggleScrollListener.js +20 -24
- package/lib-commonjs/utils/toggleScrollListener.js.map +1 -1
- package/lib-commonjs/utils/useCallbackRef.js +39 -53
- package/lib-commonjs/utils/useCallbackRef.js.map +1 -1
- package/lib-commonjs/utils/writeArrowUpdates.js +19 -24
- package/lib-commonjs/utils/writeArrowUpdates.js.map +1 -1
- package/lib-commonjs/utils/writeContainerupdates.js +37 -45
- package/lib-commonjs/utils/writeContainerupdates.js.map +1 -1
- package/package.json +7 -6
- package/lib-amd/constants.js +0 -10
- package/lib-amd/constants.js.map +0 -1
- package/lib-amd/createArrowStyles.js +0 -62
- package/lib-amd/createArrowStyles.js.map +0 -1
- package/lib-amd/createPositionManager.js +0 -97
- package/lib-amd/createPositionManager.js.map +0 -1
- package/lib-amd/createVirtualElementFromClick.js +0 -32
- package/lib-amd/createVirtualElementFromClick.js.map +0 -1
- package/lib-amd/index.js +0 -13
- package/lib-amd/index.js.map +0 -1
- package/lib-amd/middleware/coverTarget.js +0 -32
- package/lib-amd/middleware/coverTarget.js.map +0 -1
- package/lib-amd/middleware/flip.js +0 -19
- package/lib-amd/middleware/flip.js.map +0 -1
- package/lib-amd/middleware/index.js +0 -11
- package/lib-amd/middleware/index.js.map +0 -1
- package/lib-amd/middleware/intersecting.js +0 -33
- package/lib-amd/middleware/intersecting.js.map +0 -1
- package/lib-amd/middleware/maxSize.js +0 -33
- package/lib-amd/middleware/maxSize.js.map +0 -1
- package/lib-amd/middleware/offset.js +0 -14
- package/lib-amd/middleware/offset.js.map +0 -1
- package/lib-amd/middleware/shift.js +0 -17
- package/lib-amd/middleware/shift.js.map +0 -1
- package/lib-amd/types.js +0 -5
- package/lib-amd/types.js.map +0 -1
- package/lib-amd/usePositioning.js +0 -161
- package/lib-amd/usePositioning.js.map +0 -1
- package/lib-amd/usePositioningMouseTarget.js +0 -39
- package/lib-amd/usePositioningMouseTarget.js.map +0 -1
- package/lib-amd/utils/debounce.js +0 -27
- package/lib-amd/utils/debounce.js.map +0 -1
- package/lib-amd/utils/fromFloatingUIPlacement.js +0 -37
- package/lib-amd/utils/fromFloatingUIPlacement.js.map +0 -1
- package/lib-amd/utils/getBoundary.js +0 -26
- package/lib-amd/utils/getBoundary.js.map +0 -1
- package/lib-amd/utils/getFloatingUIOffset.js +0 -25
- package/lib-amd/utils/getFloatingUIOffset.js.map +0 -1
- package/lib-amd/utils/getReactFiberFromNode.js +0 -48
- package/lib-amd/utils/getReactFiberFromNode.js.map +0 -1
- package/lib-amd/utils/getScrollParent.js +0 -64
- package/lib-amd/utils/getScrollParent.js.map +0 -1
- package/lib-amd/utils/hasAutoFocusFilter.js +0 -31
- package/lib-amd/utils/hasAutoFocusFilter.js.map +0 -1
- package/lib-amd/utils/index.js +0 -20
- package/lib-amd/utils/index.js.map +0 -1
- package/lib-amd/utils/mergeArrowOffset.js +0 -38
- package/lib-amd/utils/mergeArrowOffset.js.map +0 -1
- package/lib-amd/utils/parseFloatingUIPlacement.js +0 -20
- package/lib-amd/utils/parseFloatingUIPlacement.js.map +0 -1
- package/lib-amd/utils/resolvePositioningShorthand.js +0 -31
- package/lib-amd/utils/resolvePositioningShorthand.js.map +0 -1
- package/lib-amd/utils/toFloatingUIPadding.js +0 -25
- package/lib-amd/utils/toFloatingUIPadding.js.map +0 -1
- package/lib-amd/utils/toFloatingUIPlacement.js +0 -40
- package/lib-amd/utils/toFloatingUIPlacement.js.map +0 -1
- package/lib-amd/utils/toggleScrollListener.js +0 -26
- package/lib-amd/utils/toggleScrollListener.js.map +0 -1
- package/lib-amd/utils/useCallbackRef.js +0 -55
- package/lib-amd/utils/useCallbackRef.js.map +0 -1
- package/lib-amd/utils/writeArrowUpdates.js +0 -21
- package/lib-amd/utils/writeArrowUpdates.js.map +0 -1
- package/lib-amd/utils/writeContainerupdates.js +0 -41
- package/lib-amd/utils/writeContainerupdates.js.map +0 -1
@@ -1,58 +1,44 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
Object.defineProperty(exports, "useCallbackRef", {
|
6
|
+
enumerable: true,
|
7
|
+
get: ()=>useCallbackRef
|
5
8
|
});
|
6
|
-
|
7
|
-
const
|
8
|
-
const
|
9
|
-
/**
|
10
|
-
* Creates a MutableRef with ref change callback. Is useful as React.useRef() doesn't notify you when its content
|
11
|
-
* changes and mutating the .current property doesn't cause a re-render. An opt-out will be use a callback ref via
|
12
|
-
* React.useState(), but it will cause re-renders always.
|
13
|
-
*
|
14
|
-
* https://reactjs.org/docs/hooks-reference.html#useref
|
15
|
-
* https://github.com/theKashey/use-callback-ref#usecallbackref---to-replace-reactuseref
|
16
|
-
*
|
17
|
-
* @param initialValue - initial ref value
|
18
|
-
* @param callback - a callback to run when value changes
|
19
|
-
* @param skipInitialResolve - a flag to skip an initial ref report
|
20
|
-
*
|
21
|
-
* @example
|
22
|
-
* const ref = useCallbackRef(0, (newValue, oldValue) => console.log(oldValue, '->', newValue);
|
23
|
-
* ref.current = 1;
|
24
|
-
* // prints 0 -> 1
|
25
|
-
*/
|
9
|
+
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
10
|
+
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
11
|
+
const _reactUtilities = require("@fluentui/react-utilities");
|
26
12
|
function useCallbackRef(initialValue, callback, skipInitialResolve) {
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
}
|
57
|
-
|
13
|
+
const isFirst = _react.useRef(true);
|
14
|
+
const [ref] = _react.useState(()=>({
|
15
|
+
// value
|
16
|
+
value: initialValue,
|
17
|
+
// last callback
|
18
|
+
callback,
|
19
|
+
// "memoized" public interface
|
20
|
+
facade: {
|
21
|
+
get current () {
|
22
|
+
return ref.value;
|
23
|
+
},
|
24
|
+
set current (value){
|
25
|
+
const last = ref.value;
|
26
|
+
if (last !== value) {
|
27
|
+
ref.value = value;
|
28
|
+
if (skipInitialResolve && isFirst.current) {
|
29
|
+
return;
|
30
|
+
}
|
31
|
+
ref.callback(value, last);
|
32
|
+
}
|
33
|
+
}
|
34
|
+
}
|
35
|
+
}));
|
36
|
+
(0, _reactUtilities.useIsomorphicLayoutEffect)(()=>{
|
37
|
+
isFirst.current = false;
|
38
|
+
}, []);
|
39
|
+
// update callback
|
40
|
+
ref.callback = callback;
|
41
|
+
return ref.facade;
|
42
|
+
} //# sourceMappingURL=useCallbackRef.js.map
|
43
|
+
|
58
44
|
//# sourceMappingURL=useCallbackRef.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../lib/utils/useCallbackRef.js"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\n/**\n * Creates a MutableRef with ref change callback. Is useful as React.useRef() doesn't notify you when its content\n * changes and mutating the .current property doesn't cause a re-render. An opt-out will be use a callback ref via\n * React.useState(), but it will cause re-renders always.\n *\n * https://reactjs.org/docs/hooks-reference.html#useref\n * https://github.com/theKashey/use-callback-ref#usecallbackref---to-replace-reactuseref\n *\n * @param initialValue - initial ref value\n * @param callback - a callback to run when value changes\n * @param skipInitialResolve - a flag to skip an initial ref report\n *\n * @example\n * const ref = useCallbackRef(0, (newValue, oldValue) => console.log(oldValue, '->', newValue);\n * ref.current = 1;\n * // prints 0 -> 1\n */\nexport function useCallbackRef(initialValue, callback, skipInitialResolve) {\n const isFirst = React.useRef(true);\n const [ref] = React.useState(() => ({\n // value\n value: initialValue,\n // last callback\n callback,\n // \"memoized\" public interface\n facade: {\n get current() {\n return ref.value;\n },\n set current(value) {\n const last = ref.value;\n if (last !== value) {\n ref.value = value;\n if (skipInitialResolve && isFirst.current) {\n return;\n }\n ref.callback(value, last);\n }\n }\n }\n }));\n useIsomorphicLayoutEffect(() => {\n isFirst.current = false;\n }, []);\n // update callback\n ref.callback = callback;\n return ref.facade;\n}\n//# sourceMappingURL=useCallbackRef.js.map"],"names":["useCallbackRef","initialValue","callback","skipInitialResolve","isFirst","React","useRef","ref","useState","value","facade","current","last","useIsomorphicLayoutEffect"],"mappings":";;;;+BAmBgBA;;aAAAA;;;6DAnBO;gCACmB;AAkBnC,SAASA,eAAeC,YAAY,EAAEC,QAAQ,EAAEC,kBAAkB,EAAE;IACzE,MAAMC,UAAUC,OAAMC,MAAM,CAAC,IAAI;IACjC,MAAM,CAACC,IAAI,GAAGF,OAAMG,QAAQ,CAAC,IAAO,CAAA;YAClC,QAAQ;YACRC,OAAOR;YACP,gBAAgB;YAChBC;YACA,8BAA8B;YAC9BQ,QAAQ;gBACN,IAAIC,WAAU;oBACZ,OAAOJ,IAAIE,KAAK;gBAClB;gBACA,IAAIE,SAAQF,MAAO;oBACjB,MAAMG,OAAOL,IAAIE,KAAK;oBACtB,IAAIG,SAASH,OAAO;wBAClBF,IAAIE,KAAK,GAAGA;wBACZ,IAAIN,sBAAsBC,QAAQO,OAAO,EAAE;4BACzC;wBACF,CAAC;wBACDJ,IAAIL,QAAQ,CAACO,OAAOG;oBACtB,CAAC;gBACH;YACF;QACF,CAAA;IACAC,IAAAA,yCAAyB,EAAC,IAAM;QAC9BT,QAAQO,OAAO,GAAG,KAAK;IACzB,GAAG,EAAE;IACL,kBAAkB;IAClBJ,IAAIL,QAAQ,GAAGA;IACf,OAAOK,IAAIG,MAAM;AACnB,EACA,0CAA0C"}
|
@@ -1,28 +1,23 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.writeArrowUpdates = void 0;
|
7
1
|
/**
|
8
2
|
* Writes all DOM element updates after position is computed
|
9
|
-
*/
|
3
|
+
*/ "use strict";
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
5
|
+
value: true
|
6
|
+
});
|
7
|
+
Object.defineProperty(exports, "writeArrowUpdates", {
|
8
|
+
enumerable: true,
|
9
|
+
get: ()=>writeArrowUpdates
|
10
|
+
});
|
10
11
|
function writeArrowUpdates(options) {
|
11
|
-
|
12
|
-
arrow
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
Object.assign(arrow.style, {
|
23
|
-
left: `${arrowX}px`,
|
24
|
-
top: `${arrowY}px`
|
25
|
-
});
|
26
|
-
}
|
27
|
-
exports.writeArrowUpdates = writeArrowUpdates;
|
12
|
+
const { arrow , middlewareData } = options;
|
13
|
+
if (!middlewareData.arrow || !arrow) {
|
14
|
+
return;
|
15
|
+
}
|
16
|
+
const { x: arrowX , y: arrowY } = middlewareData.arrow;
|
17
|
+
Object.assign(arrow.style, {
|
18
|
+
left: `${arrowX}px`,
|
19
|
+
top: `${arrowY}px`
|
20
|
+
});
|
21
|
+
} //# sourceMappingURL=writeArrowUpdates.js.map
|
22
|
+
|
28
23
|
//# sourceMappingURL=writeArrowUpdates.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../lib/utils/writeArrowUpdates.js"],"sourcesContent":["/**\n * Writes all DOM element updates after position is computed\n */export function writeArrowUpdates(options) {\n const {\n arrow,\n middlewareData\n } = options;\n if (!middlewareData.arrow || !arrow) {\n return;\n }\n const {\n x: arrowX,\n y: arrowY\n } = middlewareData.arrow;\n Object.assign(arrow.style, {\n left: `${arrowX}px`,\n top: `${arrowY}px`\n });\n}\n//# sourceMappingURL=writeArrowUpdates.js.map"],"names":["writeArrowUpdates","options","arrow","middlewareData","x","arrowX","y","arrowY","Object","assign","style","left","top"],"mappings":"AAAA;;CAEC;;;;+BAAkBA;;aAAAA;;AAAT,SAASA,kBAAkBC,OAAO,EAAE;IAC5C,MAAM,EACJC,MAAK,EACLC,eAAc,EACf,GAAGF;IACJ,IAAI,CAACE,eAAeD,KAAK,IAAI,CAACA,OAAO;QACnC;IACF,CAAC;IACD,MAAM,EACJE,GAAGC,OAAM,EACTC,GAAGC,OAAM,EACV,GAAGJ,eAAeD,KAAK;IACxBM,OAAOC,MAAM,CAACP,MAAMQ,KAAK,EAAE;QACzBC,MAAM,CAAC,EAAEN,OAAO,EAAE,CAAC;QACnBO,KAAK,CAAC,EAAEL,OAAO,EAAE,CAAC;IACpB;AACF,EACA,6CAA6C"}
|
@@ -1,50 +1,42 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
Object.defineProperty(exports, "writeContainerUpdates", {
|
6
|
+
enumerable: true,
|
7
|
+
get: ()=>writeContainerUpdates
|
5
8
|
});
|
6
|
-
|
7
|
-
const constants_1 = /*#__PURE__*/require("../constants");
|
8
|
-
/**
|
9
|
-
* Writes all container element position updates after the position is computed
|
10
|
-
*/
|
9
|
+
const _constants = require("../constants");
|
11
10
|
function writeContainerUpdates(options) {
|
12
|
-
|
13
|
-
|
14
|
-
container
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
const y = Math.round(coordinates.y * devicePixelRatio) / devicePixelRatio;
|
44
|
-
Object.assign(container.style, {
|
45
|
-
transform: lowPPI ? `translate(${x}px, ${y}px)` : `translate3d(${x}px, ${y}px, 0)`,
|
46
|
-
position: strategy
|
47
|
-
});
|
48
|
-
}
|
49
|
-
exports.writeContainerUpdates = writeContainerUpdates;
|
11
|
+
var _middlewareData_hide, _middlewareData_hide1, _container_ownerDocument_defaultView;
|
12
|
+
const { container , placement , middlewareData , strategy , lowPPI , coordinates } = options;
|
13
|
+
if (!container) {
|
14
|
+
return;
|
15
|
+
}
|
16
|
+
container.setAttribute(_constants.DATA_POSITIONING_PLACEMENT, placement);
|
17
|
+
container.removeAttribute(_constants.DATA_POSITIONING_INTERSECTING);
|
18
|
+
if (middlewareData.intersectionObserver.intersecting) {
|
19
|
+
container.setAttribute(_constants.DATA_POSITIONING_INTERSECTING, '');
|
20
|
+
}
|
21
|
+
container.removeAttribute(_constants.DATA_POSITIONING_ESCAPED);
|
22
|
+
if ((_middlewareData_hide = middlewareData.hide) === null || _middlewareData_hide === void 0 ? void 0 : _middlewareData_hide.escaped) {
|
23
|
+
container.setAttribute(_constants.DATA_POSITIONING_ESCAPED, '');
|
24
|
+
}
|
25
|
+
container.removeAttribute(_constants.DATA_POSITIONING_HIDDEN);
|
26
|
+
if ((_middlewareData_hide1 = middlewareData.hide) === null || _middlewareData_hide1 === void 0 ? void 0 : _middlewareData_hide1.referenceHidden) {
|
27
|
+
container.setAttribute(_constants.DATA_POSITIONING_HIDDEN, '');
|
28
|
+
}
|
29
|
+
// Round so that the coordinates land on device pixels.
|
30
|
+
// This prevents blurriness in cases where the browser doesn't apply pixel snapping, such as when other effects like
|
31
|
+
// `backdrop-filter: blur()` are applied to the container, and the browser is zoomed in.
|
32
|
+
// See https://github.com/microsoft/fluentui/issues/26764 for more info.
|
33
|
+
const devicePixelRatio = ((_container_ownerDocument_defaultView = container.ownerDocument.defaultView) === null || _container_ownerDocument_defaultView === void 0 ? void 0 : _container_ownerDocument_defaultView.devicePixelRatio) || 1;
|
34
|
+
const x = Math.round(coordinates.x * devicePixelRatio) / devicePixelRatio;
|
35
|
+
const y = Math.round(coordinates.y * devicePixelRatio) / devicePixelRatio;
|
36
|
+
Object.assign(container.style, {
|
37
|
+
transform: lowPPI ? `translate(${x}px, ${y}px)` : `translate3d(${x}px, ${y}px, 0)`,
|
38
|
+
position: strategy
|
39
|
+
});
|
40
|
+
} //# sourceMappingURL=writeContainerupdates.js.map
|
41
|
+
|
50
42
|
//# sourceMappingURL=writeContainerupdates.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../lib/utils/writeContainerupdates.js"],"sourcesContent":["import { DATA_POSITIONING_ESCAPED, DATA_POSITIONING_HIDDEN, DATA_POSITIONING_INTERSECTING, DATA_POSITIONING_PLACEMENT } from '../constants';\n/**\n * Writes all container element position updates after the position is computed\n */\nexport function writeContainerUpdates(options) {\n var _middlewareData_hide, _middlewareData_hide1, _container_ownerDocument_defaultView;\n const {\n container,\n placement,\n middlewareData,\n strategy,\n lowPPI,\n coordinates\n } = options;\n if (!container) {\n return;\n }\n container.setAttribute(DATA_POSITIONING_PLACEMENT, placement);\n container.removeAttribute(DATA_POSITIONING_INTERSECTING);\n if (middlewareData.intersectionObserver.intersecting) {\n container.setAttribute(DATA_POSITIONING_INTERSECTING, '');\n }\n container.removeAttribute(DATA_POSITIONING_ESCAPED);\n if ((_middlewareData_hide = middlewareData.hide) === null || _middlewareData_hide === void 0 ? void 0 : _middlewareData_hide.escaped) {\n container.setAttribute(DATA_POSITIONING_ESCAPED, '');\n }\n container.removeAttribute(DATA_POSITIONING_HIDDEN);\n if ((_middlewareData_hide1 = middlewareData.hide) === null || _middlewareData_hide1 === void 0 ? void 0 : _middlewareData_hide1.referenceHidden) {\n container.setAttribute(DATA_POSITIONING_HIDDEN, '');\n }\n // Round so that the coordinates land on device pixels.\n // This prevents blurriness in cases where the browser doesn't apply pixel snapping, such as when other effects like\n // `backdrop-filter: blur()` are applied to the container, and the browser is zoomed in.\n // See https://github.com/microsoft/fluentui/issues/26764 for more info.\n const devicePixelRatio = ((_container_ownerDocument_defaultView = container.ownerDocument.defaultView) === null || _container_ownerDocument_defaultView === void 0 ? void 0 : _container_ownerDocument_defaultView.devicePixelRatio) || 1;\n const x = Math.round(coordinates.x * devicePixelRatio) / devicePixelRatio;\n const y = Math.round(coordinates.y * devicePixelRatio) / devicePixelRatio;\n Object.assign(container.style, {\n transform: lowPPI ? `translate(${x}px, ${y}px)` : `translate3d(${x}px, ${y}px, 0)`,\n position: strategy\n });\n}\n//# sourceMappingURL=writeContainerupdates.js.map"],"names":["writeContainerUpdates","options","_middlewareData_hide","_middlewareData_hide1","_container_ownerDocument_defaultView","container","placement","middlewareData","strategy","lowPPI","coordinates","setAttribute","DATA_POSITIONING_PLACEMENT","removeAttribute","DATA_POSITIONING_INTERSECTING","intersectionObserver","intersecting","DATA_POSITIONING_ESCAPED","hide","escaped","DATA_POSITIONING_HIDDEN","referenceHidden","devicePixelRatio","ownerDocument","defaultView","x","Math","round","y","Object","assign","style","transform","position"],"mappings":";;;;+BAIgBA;;aAAAA;;2BAJ6G;AAItH,SAASA,sBAAsBC,OAAO,EAAE;IAC7C,IAAIC,sBAAsBC,uBAAuBC;IACjD,MAAM,EACJC,UAAS,EACTC,UAAS,EACTC,eAAc,EACdC,SAAQ,EACRC,OAAM,EACNC,YAAW,EACZ,GAAGT;IACJ,IAAI,CAACI,WAAW;QACd;IACF,CAAC;IACDA,UAAUM,YAAY,CAACC,qCAA0B,EAAEN;IACnDD,UAAUQ,eAAe,CAACC,wCAA6B;IACvD,IAAIP,eAAeQ,oBAAoB,CAACC,YAAY,EAAE;QACpDX,UAAUM,YAAY,CAACG,wCAA6B,EAAE;IACxD,CAAC;IACDT,UAAUQ,eAAe,CAACI,mCAAwB;IAClD,IAAI,AAACf,CAAAA,uBAAuBK,eAAeW,IAAI,AAAD,MAAO,IAAI,IAAIhB,yBAAyB,KAAK,IAAI,KAAK,IAAIA,qBAAqBiB,OAAO,EAAE;QACpId,UAAUM,YAAY,CAACM,mCAAwB,EAAE;IACnD,CAAC;IACDZ,UAAUQ,eAAe,CAACO,kCAAuB;IACjD,IAAI,AAACjB,CAAAA,wBAAwBI,eAAeW,IAAI,AAAD,MAAO,IAAI,IAAIf,0BAA0B,KAAK,IAAI,KAAK,IAAIA,sBAAsBkB,eAAe,EAAE;QAC/IhB,UAAUM,YAAY,CAACS,kCAAuB,EAAE;IAClD,CAAC;IACD,uDAAuD;IACvD,oHAAoH;IACpH,wFAAwF;IACxF,wEAAwE;IACxE,MAAME,mBAAmB,AAAC,CAAA,AAAClB,CAAAA,uCAAuCC,UAAUkB,aAAa,CAACC,WAAW,AAAD,MAAO,IAAI,IAAIpB,yCAAyC,KAAK,IAAI,KAAK,IAAIA,qCAAqCkB,gBAAgB,AAAD,KAAM;IACxO,MAAMG,IAAIC,KAAKC,KAAK,CAACjB,YAAYe,CAAC,GAAGH,oBAAoBA;IACzD,MAAMM,IAAIF,KAAKC,KAAK,CAACjB,YAAYkB,CAAC,GAAGN,oBAAoBA;IACzDO,OAAOC,MAAM,CAACzB,UAAU0B,KAAK,EAAE;QAC7BC,WAAWvB,SAAS,CAAC,UAAU,EAAEgB,EAAE,IAAI,EAAEG,EAAE,GAAG,CAAC,GAAG,CAAC,YAAY,EAAEH,EAAE,IAAI,EAAEG,EAAE,MAAM,CAAC;QAClFK,UAAUzB;IACZ;AACF,EACA,iDAAiD"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-positioning",
|
3
|
-
"version": "9.5.
|
3
|
+
"version": "9.5.6",
|
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",
|
@@ -20,7 +20,7 @@
|
|
20
20
|
"lint": "just-scripts lint",
|
21
21
|
"test": "jest --passWithNoTests",
|
22
22
|
"type-check": "tsc -b tsconfig.json",
|
23
|
-
"generate-api": "
|
23
|
+
"generate-api": "just-scripts generate-api"
|
24
24
|
},
|
25
25
|
"devDependencies": {
|
26
26
|
"@fluentui/eslint-plugin": "*",
|
@@ -29,11 +29,11 @@
|
|
29
29
|
},
|
30
30
|
"dependencies": {
|
31
31
|
"@floating-ui/dom": "^1.2.0",
|
32
|
-
"@fluentui/react-shared-contexts": "^9.3.
|
33
|
-
"@fluentui/react-theme": "^9.1.
|
34
|
-
"@fluentui/react-utilities": "^9.7.
|
32
|
+
"@fluentui/react-shared-contexts": "^9.3.2",
|
33
|
+
"@fluentui/react-theme": "^9.1.7",
|
34
|
+
"@fluentui/react-utilities": "^9.7.2",
|
35
35
|
"@griffel/react": "^1.5.2",
|
36
|
-
"
|
36
|
+
"@swc/helpers": "^0.4.14"
|
37
37
|
},
|
38
38
|
"peerDependencies": {
|
39
39
|
"@types/react": ">=16.8.0 <19.0.0",
|
@@ -49,6 +49,7 @@
|
|
49
49
|
"exports": {
|
50
50
|
".": {
|
51
51
|
"types": "./dist/index.d.ts",
|
52
|
+
"node": "./lib-commonjs/index.js",
|
52
53
|
"import": "./lib/index.js",
|
53
54
|
"require": "./lib-commonjs/index.js"
|
54
55
|
},
|
package/lib-amd/constants.js
DELETED
@@ -1,10 +0,0 @@
|
|
1
|
-
define(["require", "exports"], function (require, exports) {
|
2
|
-
"use strict";
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
exports.DATA_POSITIONING_PLACEMENT = exports.DATA_POSITIONING_HIDDEN = exports.DATA_POSITIONING_ESCAPED = exports.DATA_POSITIONING_INTERSECTING = void 0;
|
5
|
-
exports.DATA_POSITIONING_INTERSECTING = 'data-popper-is-intersecting';
|
6
|
-
exports.DATA_POSITIONING_ESCAPED = 'data-popper-escaped';
|
7
|
-
exports.DATA_POSITIONING_HIDDEN = 'data-popper-reference-hidden';
|
8
|
-
exports.DATA_POSITIONING_PLACEMENT = 'data-popper-placement';
|
9
|
-
});
|
10
|
-
//# sourceMappingURL=constants.js.map
|
package/lib-amd/constants.js.map
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-positioning/src/constants.ts"],"names":[],"mappings":";;;;IAAa,QAAA,6BAA6B,GAAG,6BAA6B,CAAC;IAC9D,QAAA,wBAAwB,GAAG,qBAAqB,CAAC;IACjD,QAAA,uBAAuB,GAAG,8BAA8B,CAAC;IACzD,QAAA,0BAA0B,GAAG,uBAAuB,CAAC","sourcesContent":["export const DATA_POSITIONING_INTERSECTING = 'data-popper-is-intersecting';\nexport const DATA_POSITIONING_ESCAPED = 'data-popper-escaped';\nexport const DATA_POSITIONING_HIDDEN = 'data-popper-reference-hidden';\nexport const DATA_POSITIONING_PLACEMENT = 'data-popper-placement';\n"]}
|
@@ -1,62 +0,0 @@
|
|
1
|
-
define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"], function (require, exports, tslib_1, react_1, react_theme_1) {
|
2
|
-
"use strict";
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
exports.createArrowHeightStyles = exports.createArrowStyles = void 0;
|
5
|
-
/**
|
6
|
-
* @internal
|
7
|
-
* Helper that creates a makeStyles rule for an arrow element.
|
8
|
-
* For runtime arrow size toggling simply create extra classnames to apply to the arrow element
|
9
|
-
*
|
10
|
-
* ```ts
|
11
|
-
* makeStyles({
|
12
|
-
* arrowWithSize: createArrowStyles({ arrowHeight: 6 }),
|
13
|
-
*
|
14
|
-
* arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),
|
15
|
-
* mediumArrow: createArrowHeightStyles(4),
|
16
|
-
* smallArrow: createArrowHeightStyles(2),
|
17
|
-
* })
|
18
|
-
* ...
|
19
|
-
*
|
20
|
-
* state.arrowWithSize.className = styles.arrowWithSize;
|
21
|
-
* state.arrowWithoutSize.className = mergeClasses(
|
22
|
-
* styles.arrowWithoutSize,
|
23
|
-
* state.smallArrow && styles.smallArrow,
|
24
|
-
* state.mediumArrow && styles.mediumArrow,
|
25
|
-
* )
|
26
|
-
* ```
|
27
|
-
*/
|
28
|
-
function createArrowStyles(options) {
|
29
|
-
var arrowHeight = options.arrowHeight, _a = options.borderWidth, borderWidth = _a === void 0 ? '1px' : _a, _b = options.borderStyle, borderStyle = _b === void 0 ? 'solid' : _b, _c = options.borderColor, borderColor = _c === void 0 ? react_theme_1.tokens.colorTransparentStroke : _c;
|
30
|
-
return tslib_1.__assign(tslib_1.__assign({ position: 'absolute', backgroundColor: 'inherit', visibility: 'hidden', zIndex: -1 }, (arrowHeight && createArrowHeightStyles(arrowHeight))), { '::before': tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ content: '""', visibility: 'visible', position: 'absolute', boxSizing: 'border-box', width: 'inherit', height: 'inherit', backgroundColor: 'inherit' }, react_1.shorthands.borderRight(borderWidth + " /* @noflip */", borderStyle + " /* @noflip */", borderColor + " /* @noflip */")), react_1.shorthands.borderBottom(borderWidth, borderStyle, borderColor)), { borderBottomRightRadius: react_theme_1.tokens.borderRadiusSmall, transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)' }),
|
31
|
-
// Popper sets data-popper-placement on the root element, which is used to align the arrow
|
32
|
-
':global([data-popper-placement^="top"])': {
|
33
|
-
bottom: "-" + borderWidth,
|
34
|
-
'--angle': '0',
|
35
|
-
}, ':global([data-popper-placement^="right"])': {
|
36
|
-
left: "-" + borderWidth + " /* @noflip */",
|
37
|
-
'--angle': '90deg',
|
38
|
-
}, ':global([data-popper-placement^="bottom"])': {
|
39
|
-
top: "-" + borderWidth,
|
40
|
-
'--angle': '180deg',
|
41
|
-
}, ':global([data-popper-placement^="left"])': {
|
42
|
-
right: "-" + borderWidth + " /* @noflip */",
|
43
|
-
'--angle': '270deg',
|
44
|
-
} });
|
45
|
-
}
|
46
|
-
exports.createArrowStyles = createArrowStyles;
|
47
|
-
/**
|
48
|
-
* @internal
|
49
|
-
* Creates CSS styles to size the arrow created by createArrowStyles to the given height.
|
50
|
-
*
|
51
|
-
* Use this when you need to create classes for several different arrow sizes. If you only need a
|
52
|
-
* constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.
|
53
|
-
*/
|
54
|
-
function createArrowHeightStyles(arrowHeight) {
|
55
|
-
// The arrow is a square rotated 45 degrees to have its bottom and right edges form a right triangle.
|
56
|
-
// Multiply the triangle's height by sqrt(2) to get length of its edges.
|
57
|
-
var edgeLength = 1.414 * arrowHeight + "px";
|
58
|
-
return { width: edgeLength, height: edgeLength };
|
59
|
-
}
|
60
|
-
exports.createArrowHeightStyles = createArrowHeightStyles;
|
61
|
-
});
|
62
|
-
//# sourceMappingURL=createArrowStyles.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"createArrowStyles.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-positioning/src/createArrowStyles.ts"],"names":[],"mappings":";;;;IAuCA;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,SAAgB,iBAAiB,CAAC,OAAiC;QAE/D,IAAA,WAAW,GAIT,OAAO,YAJE,EACX,KAGE,OAAO,YAHU,EAAnB,WAAW,mBAAG,KAAK,KAAA,EACnB,KAEE,OAAO,YAFY,EAArB,WAAW,mBAAG,OAAO,KAAA,EACrB,KACE,OAAO,YADkC,EAA3C,WAAW,mBAAG,oBAAM,CAAC,sBAAsB,KAAA,CACjC;QAEZ,2CACE,QAAQ,EAAE,UAAU,EACpB,eAAe,EAAE,SAAS,EAC1B,UAAU,EAAE,QAAQ,EACpB,MAAM,EAAE,CAAC,CAAC,IAEP,CAAC,WAAW,IAAI,uBAAuB,CAAC,WAAW,CAAC,CAAC,KAExD,UAAU,uDACR,OAAO,EAAE,IAAI,EACb,UAAU,EAAE,SAAS,EACrB,QAAQ,EAAE,UAAU,EACpB,SAAS,EAAE,YAAY,EACvB,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,SAAS,EACjB,eAAe,EAAE,SAAS,IACvB,kBAAU,CAAC,WAAW,CACpB,WAAW,mBAAgB,EAC3B,WAAW,mBAAgB,EAC3B,WAAW,mBAAgB,CAC/B,GACE,kBAAU,CAAC,YAAY,CAAC,WAAW,EAAE,WAAW,EAAE,WAAW,CAAC,KACjE,uBAAuB,EAAE,oBAAM,CAAC,iBAAiB,EACjD,SAAS,EAAE,sDAAsD;YAGnE,0FAA0F;YAC1F,yCAAyC,EAAE;gBACzC,MAAM,EAAE,MAAI,WAAa;gBACzB,SAAS,EAAE,GAAG;aACf,EACD,2CAA2C,EAAE;gBAC3C,IAAI,EAAE,MAAI,WAAW,mBAAgB;gBACrC,SAAS,EAAE,OAAO;aACnB,EACD,4CAA4C,EAAE;gBAC5C,GAAG,EAAE,MAAI,WAAa;gBACtB,SAAS,EAAE,QAAQ;aACpB,EACD,0CAA0C,EAAE;gBAC1C,KAAK,EAAE,MAAI,WAAW,mBAAgB;gBACtC,SAAS,EAAE,QAAQ;aACpB,IACD;IACJ,CAAC;IApDD,8CAoDC;IAED;;;;;;OAMG;IACH,SAAgB,uBAAuB,CAAC,WAAmB;QACzD,qGAAqG;QACrG,wEAAwE;QACxE,IAAM,UAAU,GAAM,KAAK,GAAG,WAAW,OAAI,CAAC;QAC9C,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC;IACnD,CAAC;IALD,0DAKC","sourcesContent":["import { shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { GriffelStyle } from '@griffel/react';\n\n/**\n * @internal\n * Options parameter for the createArrowStyles function\n */\nexport type CreateArrowStylesOptions = {\n /**\n * The height of the arrow from the base to the tip, in px. The base width of the arrow is always twice its height.\n *\n * This can be undefined to leave out the arrow size styles. You must then add styles created by\n * createArrowHeightStyles to set the arrow's size correctly. This can be useful if the arrow can be different sizes.\n */\n arrowHeight: number | undefined;\n\n /**\n * The borderWidth of the arrow. Should be the same borderWidth as the parent element.\n *\n * @defaultvalue 1px\n */\n borderWidth?: GriffelStyle['borderBottomWidth'];\n\n /**\n * The borderStyle for the arrow. Should be the same borderStyle as the parent element.\n *\n * @defaultvalue solid\n */\n borderStyle?: GriffelStyle['borderBottomStyle'];\n\n /**\n * The borderColor of the arrow. Should be the same borderColor as the parent element.\n *\n * @defaultvalue tokens.colorTransparentStroke\n */\n borderColor?: GriffelStyle['borderBottomColor'];\n};\n\n/**\n * @internal\n * Helper that creates a makeStyles rule for an arrow element.\n * For runtime arrow size toggling simply create extra classnames to apply to the arrow element\n *\n * ```ts\n * makeStyles({\n * arrowWithSize: createArrowStyles({ arrowHeight: 6 }),\n *\n * arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),\n * mediumArrow: createArrowHeightStyles(4),\n * smallArrow: createArrowHeightStyles(2),\n * })\n * ...\n *\n * state.arrowWithSize.className = styles.arrowWithSize;\n * state.arrowWithoutSize.className = mergeClasses(\n * styles.arrowWithoutSize,\n * state.smallArrow && styles.smallArrow,\n * state.mediumArrow && styles.mediumArrow,\n * )\n * ```\n */\nexport function createArrowStyles(options: CreateArrowStylesOptions): GriffelStyle {\n const {\n arrowHeight,\n borderWidth = '1px',\n borderStyle = 'solid',\n borderColor = tokens.colorTransparentStroke,\n } = options;\n\n return {\n position: 'absolute',\n backgroundColor: 'inherit',\n visibility: 'hidden',\n zIndex: -1,\n\n ...(arrowHeight && createArrowHeightStyles(arrowHeight)),\n\n '::before': {\n content: '\"\"',\n visibility: 'visible',\n position: 'absolute',\n boxSizing: 'border-box',\n width: 'inherit',\n height: 'inherit',\n backgroundColor: 'inherit',\n ...shorthands.borderRight(\n `${borderWidth} /* @noflip */`,\n `${borderStyle} /* @noflip */`,\n `${borderColor} /* @noflip */`,\n ),\n ...shorthands.borderBottom(borderWidth, borderStyle, borderColor),\n borderBottomRightRadius: tokens.borderRadiusSmall,\n transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)',\n },\n\n // Popper sets data-popper-placement on the root element, which is used to align the arrow\n ':global([data-popper-placement^=\"top\"])': {\n bottom: `-${borderWidth}`,\n '--angle': '0',\n },\n ':global([data-popper-placement^=\"right\"])': {\n left: `-${borderWidth} /* @noflip */`,\n '--angle': '90deg',\n },\n ':global([data-popper-placement^=\"bottom\"])': {\n top: `-${borderWidth}`,\n '--angle': '180deg',\n },\n ':global([data-popper-placement^=\"left\"])': {\n right: `-${borderWidth} /* @noflip */`,\n '--angle': '270deg',\n },\n };\n}\n\n/**\n * @internal\n * Creates CSS styles to size the arrow created by createArrowStyles to the given height.\n *\n * Use this when you need to create classes for several different arrow sizes. If you only need a\n * constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.\n */\nexport function createArrowHeightStyles(arrowHeight: number) {\n // The arrow is a square rotated 45 degrees to have its bottom and right edges form a right triangle.\n // Multiply the triangle's height by sqrt(2) to get length of its edges.\n const edgeLength = `${1.414 * arrowHeight}px`;\n return { width: edgeLength, height: edgeLength };\n}\n"]}
|
@@ -1,97 +0,0 @@
|
|
1
|
-
define(["require", "exports", "@floating-ui/dom", "./utils", "@fluentui/react-utilities"], function (require, exports, dom_1, utils_1, react_utilities_1) {
|
2
|
-
"use strict";
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
exports.createPositionManager = void 0;
|
5
|
-
/**
|
6
|
-
* @internal
|
7
|
-
* @returns manager that handles positioning out of the react lifecycle
|
8
|
-
*/
|
9
|
-
function createPositionManager(options) {
|
10
|
-
var container = options.container, target = options.target, arrow = options.arrow, strategy = options.strategy, middleware = options.middleware, placement = options.placement;
|
11
|
-
var isDestroyed = false;
|
12
|
-
if (!target || !container) {
|
13
|
-
return {
|
14
|
-
updatePosition: function () { return undefined; },
|
15
|
-
dispose: function () { return undefined; },
|
16
|
-
};
|
17
|
-
}
|
18
|
-
var isFirstUpdate = true;
|
19
|
-
var scrollParents = new Set();
|
20
|
-
var targetWindow = container.ownerDocument.defaultView;
|
21
|
-
// When the container is first resolved, set position `fixed` to avoid scroll jumps.
|
22
|
-
// Without this scroll jumps can occur when the element is rendered initially and receives focus
|
23
|
-
Object.assign(container.style, { position: 'fixed', left: 0, top: 0, margin: 0 });
|
24
|
-
var forceUpdate = function () {
|
25
|
-
// debounced update can still occur afterwards
|
26
|
-
// early return to avoid memory leaks
|
27
|
-
if (isDestroyed) {
|
28
|
-
return;
|
29
|
-
}
|
30
|
-
if (isFirstUpdate) {
|
31
|
-
scrollParents.add(utils_1.getScrollParent(container));
|
32
|
-
if (react_utilities_1.isHTMLElement(target)) {
|
33
|
-
scrollParents.add(utils_1.getScrollParent(target));
|
34
|
-
}
|
35
|
-
scrollParents.forEach(function (scrollParent) {
|
36
|
-
scrollParent.addEventListener('scroll', updatePosition);
|
37
|
-
});
|
38
|
-
isFirstUpdate = false;
|
39
|
-
}
|
40
|
-
Object.assign(container.style, { position: strategy });
|
41
|
-
dom_1.computePosition(target, container, { placement: placement, middleware: middleware, strategy: strategy })
|
42
|
-
.then(function (_a) {
|
43
|
-
var x = _a.x, y = _a.y, middlewareData = _a.middlewareData, computedPlacement = _a.placement;
|
44
|
-
// Promise can still resolve after destruction
|
45
|
-
// early return to avoid applying outdated position
|
46
|
-
if (isDestroyed) {
|
47
|
-
return;
|
48
|
-
}
|
49
|
-
utils_1.writeArrowUpdates({ arrow: arrow, middlewareData: middlewareData });
|
50
|
-
utils_1.writeContainerUpdates({
|
51
|
-
container: container,
|
52
|
-
middlewareData: middlewareData,
|
53
|
-
placement: computedPlacement,
|
54
|
-
coordinates: { x: x, y: y },
|
55
|
-
lowPPI: ((targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.devicePixelRatio) || 1) <= 1,
|
56
|
-
strategy: strategy,
|
57
|
-
});
|
58
|
-
})
|
59
|
-
.catch(function (err) {
|
60
|
-
// https://github.com/floating-ui/floating-ui/issues/1845
|
61
|
-
// FIXME for node > 14
|
62
|
-
// node 15 introduces promise rejection which means that any components
|
63
|
-
// tests need to be `it('', async () => {})` otherwise there can be race conditions with
|
64
|
-
// JSDOM being torn down before this promise is resolved so globals like `window` and `document` don't exist
|
65
|
-
// Unless all tests that ever use `usePositioning` are turned into async tests, any logging during testing
|
66
|
-
// will actually be counter productive
|
67
|
-
if (process.env.NODE_ENV === 'development') {
|
68
|
-
// eslint-disable-next-line no-console
|
69
|
-
console.error('[usePositioning]: Failed to calculate position', err);
|
70
|
-
}
|
71
|
-
});
|
72
|
-
};
|
73
|
-
var updatePosition = utils_1.debounce(function () { return forceUpdate(); });
|
74
|
-
var dispose = function () {
|
75
|
-
isDestroyed = true;
|
76
|
-
if (targetWindow) {
|
77
|
-
targetWindow.removeEventListener('scroll', updatePosition);
|
78
|
-
targetWindow.removeEventListener('resize', updatePosition);
|
79
|
-
}
|
80
|
-
scrollParents.forEach(function (scrollParent) {
|
81
|
-
scrollParent.removeEventListener('scroll', updatePosition);
|
82
|
-
});
|
83
|
-
};
|
84
|
-
if (targetWindow) {
|
85
|
-
targetWindow.addEventListener('scroll', updatePosition);
|
86
|
-
targetWindow.addEventListener('resize', updatePosition);
|
87
|
-
}
|
88
|
-
// Update the position on initialization
|
89
|
-
updatePosition();
|
90
|
-
return {
|
91
|
-
updatePosition: updatePosition,
|
92
|
-
dispose: dispose,
|
93
|
-
};
|
94
|
-
}
|
95
|
-
exports.createPositionManager = createPositionManager;
|
96
|
-
});
|
97
|
-
//# sourceMappingURL=createPositionManager.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"createPositionManager.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-positioning/src/createPositionManager.ts"],"names":[],"mappings":"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","sourcesContent":["import { computePosition } from '@floating-ui/dom';\nimport type { Middleware, Placement, Strategy } from '@floating-ui/dom';\nimport type { PositionManager, TargetElement } from './types';\nimport { debounce, writeArrowUpdates, writeContainerUpdates, getScrollParent } from './utils';\nimport { isHTMLElement } from '@fluentui/react-utilities';\n\ninterface PositionManagerOptions {\n /**\n * The positioned element\n */\n container: HTMLElement;\n /**\n * Element that the container will be anchored to\n */\n target: TargetElement;\n /**\n * Arrow that points from the container to the target\n */\n arrow: HTMLElement | null;\n /**\n * The value of the css `position` property\n * @default absolute\n */\n strategy: Strategy;\n /**\n * [Floating UI middleware](https://floating-ui.com/docs/middleware)\n */\n middleware: Middleware[];\n /**\n * [Floating UI placement](https://floating-ui.com/docs/computePosition#placement)\n */\n placement?: Placement;\n}\n\n/**\n * @internal\n * @returns manager that handles positioning out of the react lifecycle\n */\nexport function createPositionManager(options: PositionManagerOptions): PositionManager {\n const { container, target, arrow, strategy, middleware, placement } = options;\n let isDestroyed = false;\n if (!target || !container) {\n return {\n updatePosition: () => undefined,\n dispose: () => undefined,\n };\n }\n\n let isFirstUpdate = true;\n const scrollParents: Set<HTMLElement> = new Set<HTMLElement>();\n const targetWindow = container.ownerDocument.defaultView;\n\n // When the container is first resolved, set position `fixed` to avoid scroll jumps.\n // Without this scroll jumps can occur when the element is rendered initially and receives focus\n Object.assign(container.style, { position: 'fixed', left: 0, top: 0, margin: 0 });\n\n const forceUpdate = () => {\n // debounced update can still occur afterwards\n // early return to avoid memory leaks\n if (isDestroyed) {\n return;\n }\n\n if (isFirstUpdate) {\n scrollParents.add(getScrollParent(container));\n if (isHTMLElement(target)) {\n scrollParents.add(getScrollParent(target));\n }\n\n scrollParents.forEach(scrollParent => {\n scrollParent.addEventListener('scroll', updatePosition);\n });\n\n isFirstUpdate = false;\n }\n\n Object.assign(container.style, { position: strategy });\n computePosition(target, container, { placement, middleware, strategy })\n .then(({ x, y, middlewareData, placement: computedPlacement }) => {\n // Promise can still resolve after destruction\n // early return to avoid applying outdated position\n if (isDestroyed) {\n return;\n }\n\n writeArrowUpdates({ arrow, middlewareData });\n writeContainerUpdates({\n container,\n middlewareData,\n placement: computedPlacement,\n coordinates: { x, y },\n lowPPI: (targetWindow?.devicePixelRatio || 1) <= 1,\n strategy,\n });\n })\n .catch(err => {\n // https://github.com/floating-ui/floating-ui/issues/1845\n // FIXME for node > 14\n // node 15 introduces promise rejection which means that any components\n // tests need to be `it('', async () => {})` otherwise there can be race conditions with\n // JSDOM being torn down before this promise is resolved so globals like `window` and `document` don't exist\n // Unless all tests that ever use `usePositioning` are turned into async tests, any logging during testing\n // will actually be counter productive\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.error('[usePositioning]: Failed to calculate position', err);\n }\n });\n };\n\n const updatePosition = debounce(() => forceUpdate());\n\n const dispose = () => {\n isDestroyed = true;\n\n if (targetWindow) {\n targetWindow.removeEventListener('scroll', updatePosition);\n targetWindow.removeEventListener('resize', updatePosition);\n }\n\n scrollParents.forEach(scrollParent => {\n scrollParent.removeEventListener('scroll', updatePosition);\n });\n };\n\n if (targetWindow) {\n targetWindow.addEventListener('scroll', updatePosition);\n targetWindow.addEventListener('resize', updatePosition);\n }\n\n // Update the position on initialization\n updatePosition();\n\n return {\n updatePosition,\n dispose,\n };\n}\n"]}
|
@@ -1,32 +0,0 @@
|
|
1
|
-
define(["require", "exports"], function (require, exports) {
|
2
|
-
"use strict";
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
exports.createVirtualElementFromClick = void 0;
|
5
|
-
/**
|
6
|
-
* Creates a virtual element based on the position of a click event
|
7
|
-
* Can be used as a target for popper in scenarios such as context menus
|
8
|
-
*/
|
9
|
-
function createVirtualElementFromClick(nativeEvent) {
|
10
|
-
var left = nativeEvent.clientX;
|
11
|
-
var top = nativeEvent.clientY;
|
12
|
-
var right = left + 1;
|
13
|
-
var bottom = top + 1;
|
14
|
-
function getBoundingClientRect() {
|
15
|
-
return {
|
16
|
-
left: left,
|
17
|
-
top: top,
|
18
|
-
right: right,
|
19
|
-
bottom: bottom,
|
20
|
-
x: left,
|
21
|
-
y: top,
|
22
|
-
height: 1,
|
23
|
-
width: 1,
|
24
|
-
};
|
25
|
-
}
|
26
|
-
return {
|
27
|
-
getBoundingClientRect: getBoundingClientRect,
|
28
|
-
};
|
29
|
-
}
|
30
|
-
exports.createVirtualElementFromClick = createVirtualElementFromClick;
|
31
|
-
});
|
32
|
-
//# sourceMappingURL=createVirtualElementFromClick.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"createVirtualElementFromClick.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-positioning/src/createVirtualElementFromClick.ts"],"names":[],"mappings":";;;;IAEA;;;OAGG;IACH,SAAgB,6BAA6B,CAAC,WAAuB;QACnE,IAAM,IAAI,GAAG,WAAW,CAAC,OAAO,CAAC;QACjC,IAAM,GAAG,GAAG,WAAW,CAAC,OAAO,CAAC;QAChC,IAAM,KAAK,GAAG,IAAI,GAAG,CAAC,CAAC;QACvB,IAAM,MAAM,GAAG,GAAG,GAAG,CAAC,CAAC;QAEvB,SAAS,qBAAqB;YAC5B,OAAO;gBACL,IAAI,MAAA;gBACJ,GAAG,KAAA;gBACH,KAAK,OAAA;gBACL,MAAM,QAAA;gBACN,CAAC,EAAE,IAAI;gBACP,CAAC,EAAE,GAAG;gBACN,MAAM,EAAE,CAAC;gBACT,KAAK,EAAE,CAAC;aACT,CAAC;QACJ,CAAC;QAED,OAAO;YACL,qBAAqB,uBAAA;SACtB,CAAC;IACJ,CAAC;IAtBD,sEAsBC","sourcesContent":["import type { PositioningVirtualElement } from './types';\n\n/**\n * Creates a virtual element based on the position of a click event\n * Can be used as a target for popper in scenarios such as context menus\n */\nexport function createVirtualElementFromClick(nativeEvent: MouseEvent): PositioningVirtualElement {\n const left = nativeEvent.clientX;\n const top = nativeEvent.clientY;\n const right = left + 1;\n const bottom = top + 1;\n\n function getBoundingClientRect() {\n return {\n left,\n top,\n right,\n bottom,\n x: left,\n y: top,\n height: 1,\n width: 1,\n };\n }\n\n return {\n getBoundingClientRect,\n };\n}\n"]}
|
package/lib-amd/index.js
DELETED
@@ -1,13 +0,0 @@
|
|
1
|
-
define(["require", "exports", "./createVirtualElementFromClick", "./createArrowStyles", "./usePositioning", "./usePositioningMouseTarget", "./utils/index"], function (require, exports, createVirtualElementFromClick_1, createArrowStyles_1, usePositioning_1, usePositioningMouseTarget_1, index_1) {
|
2
|
-
"use strict";
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
exports.mergeArrowOffset = exports.resolvePositioningShorthand = exports.usePositioningMouseTarget = exports.usePositioning = exports.createArrowStyles = exports.createArrowHeightStyles = exports.createVirtualElementFromClick = void 0;
|
5
|
-
Object.defineProperty(exports, "createVirtualElementFromClick", { enumerable: true, get: function () { return createVirtualElementFromClick_1.createVirtualElementFromClick; } });
|
6
|
-
Object.defineProperty(exports, "createArrowHeightStyles", { enumerable: true, get: function () { return createArrowStyles_1.createArrowHeightStyles; } });
|
7
|
-
Object.defineProperty(exports, "createArrowStyles", { enumerable: true, get: function () { return createArrowStyles_1.createArrowStyles; } });
|
8
|
-
Object.defineProperty(exports, "usePositioning", { enumerable: true, get: function () { return usePositioning_1.usePositioning; } });
|
9
|
-
Object.defineProperty(exports, "usePositioningMouseTarget", { enumerable: true, get: function () { return usePositioningMouseTarget_1.usePositioningMouseTarget; } });
|
10
|
-
Object.defineProperty(exports, "resolvePositioningShorthand", { enumerable: true, get: function () { return index_1.resolvePositioningShorthand; } });
|
11
|
-
Object.defineProperty(exports, "mergeArrowOffset", { enumerable: true, get: function () { return index_1.mergeArrowOffset; } });
|
12
|
-
});
|
13
|
-
//# sourceMappingURL=index.js.map
|
package/lib-amd/index.js.map
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-positioning/src/index.ts"],"names":[],"mappings":";;;;IAAS,8IAAA,6BAA6B,OAAA;IAC7B,4HAAA,uBAAuB,OAAA;IAAE,sHAAA,iBAAiB,OAAA;IAE1C,gHAAA,cAAc,OAAA;IACd,sIAAA,yBAAyB,OAAA;IACzB,oHAAA,2BAA2B,OAAA;IAAE,yGAAA,gBAAgB,OAAA","sourcesContent":["export { createVirtualElementFromClick } from './createVirtualElementFromClick';\nexport { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';\nexport type { CreateArrowStylesOptions } from './createArrowStyles';\nexport { usePositioning } from './usePositioning';\nexport { usePositioningMouseTarget } from './usePositioningMouseTarget';\nexport { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';\nexport type {\n Alignment,\n AutoSize,\n Boundary,\n Offset,\n OffsetFunction,\n OffsetFunctionParam,\n OffsetObject,\n OffsetShorthand,\n Position,\n PositioningImperativeRef,\n PositioningProps,\n PositioningShorthand,\n PositioningShorthandValue,\n PositioningVirtualElement,\n SetVirtualMouseTarget,\n} from './types';\n"]}
|