@fluentui/react-positioning 0.0.0-nightly-20230317-1454.1 → 0.0.0-nightly-20230321-0440.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +9 -9
- package/CHANGELOG.md +7 -7
- package/lib/constants.js +4 -4
- package/lib/constants.js.map +1 -1
- package/lib/createArrowStyles.js +19 -19
- package/lib/createArrowStyles.js.map +1 -1
- package/lib/createPositionManager.js +13 -13
- package/lib/createPositionManager.js.map +1 -1
- package/lib/createVirtualElementFromClick.js +2 -1
- package/lib/createVirtualElementFromClick.js.map +1 -1
- package/lib/index.js +5 -5
- package/lib/index.js.map +1 -1
- package/lib/middleware/coverTarget.js +6 -6
- package/lib/middleware/coverTarget.js.map +1 -1
- package/lib/middleware/flip.js +4 -4
- package/lib/middleware/flip.js.map +1 -1
- package/lib/middleware/index.js +6 -6
- package/lib/middleware/index.js.map +1 -1
- package/lib/middleware/intersecting.js +2 -2
- package/lib/middleware/intersecting.js.map +1 -1
- package/lib/middleware/maxSize.js +8 -8
- package/lib/middleware/maxSize.js.map +1 -1
- package/lib/middleware/offset.js +2 -2
- package/lib/middleware/offset.js.map +1 -1
- package/lib/middleware/shift.js +5 -5
- 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 +26 -20
- package/lib/usePositioning.js.map +1 -1
- package/lib/usePositioningMouseTarget.js +4 -4
- package/lib/usePositioningMouseTarget.js.map +1 -1
- package/lib/utils/debounce.js +2 -1
- package/lib/utils/debounce.js.map +1 -1
- package/lib/utils/fromFloatingUIPlacement.js +10 -10
- package/lib/utils/fromFloatingUIPlacement.js.map +1 -1
- package/lib/utils/getBoundary.js +8 -8
- package/lib/utils/getBoundary.js.map +1 -1
- package/lib/utils/getFloatingUIOffset.js +2 -2
- package/lib/utils/getFloatingUIOffset.js.map +1 -1
- package/lib/utils/getReactFiberFromNode.js +2 -3
- package/lib/utils/getReactFiberFromNode.js.map +1 -1
- package/lib/utils/getScrollParent.js +10 -7
- package/lib/utils/getScrollParent.js.map +1 -1
- package/lib/utils/hasAutoFocusFilter.js +4 -3
- package/lib/utils/hasAutoFocusFilter.js.map +1 -1
- package/lib/utils/index.js +15 -15
- package/lib/utils/index.js.map +1 -1
- package/lib/utils/mergeArrowOffset.js +8 -6
- package/lib/utils/mergeArrowOffset.js.map +1 -1
- package/lib/utils/parseFloatingUIPlacement.js +3 -2
- package/lib/utils/parseFloatingUIPlacement.js.map +1 -1
- package/lib/utils/resolvePositioningShorthand.js +33 -33
- package/lib/utils/resolvePositioningShorthand.js.map +1 -1
- package/lib/utils/toFloatingUIPadding.js +3 -3
- package/lib/utils/toFloatingUIPadding.js.map +1 -1
- package/lib/utils/toFloatingUIPlacement.js +11 -11
- package/lib/utils/toFloatingUIPlacement.js.map +1 -1
- package/lib/utils/toggleScrollListener.js +4 -4
- package/lib/utils/toggleScrollListener.js.map +1 -1
- package/lib/utils/useCallbackRef.js +2 -2
- package/lib/utils/useCallbackRef.js.map +1 -1
- package/lib/utils/writeArrowUpdates.js +2 -1
- package/lib/utils/writeArrowUpdates.js.map +1 -1
- package/lib/utils/writeContainerupdates.js +8 -7
- package/lib/utils/writeContainerupdates.js.map +1 -1
- package/lib-commonjs/constants.js +7 -18
- package/lib-commonjs/constants.js.map +1 -1
- package/lib-commonjs/createArrowStyles.js +88 -60
- package/lib-commonjs/createArrowStyles.js.map +1 -1
- package/lib-commonjs/createPositionManager.js +117 -103
- package/lib-commonjs/createPositionManager.js.map +1 -1
- package/lib-commonjs/createVirtualElementFromClick.js +26 -27
- package/lib-commonjs/createVirtualElementFromClick.js.map +1 -1
- package/lib-commonjs/index.js +51 -24
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/middleware/coverTarget.js +37 -34
- package/lib-commonjs/middleware/coverTarget.js.map +1 -1
- package/lib-commonjs/middleware/flip.js +38 -31
- package/lib-commonjs/middleware/flip.js.map +1 -1
- package/lib-commonjs/middleware/index.js +9 -10
- package/lib-commonjs/middleware/index.js.map +1 -1
- package/lib-commonjs/middleware/intersecting.js +22 -24
- package/lib-commonjs/middleware/intersecting.js.map +1 -1
- package/lib-commonjs/middleware/maxSize.js +40 -34
- package/lib-commonjs/middleware/maxSize.js.map +1 -1
- package/lib-commonjs/middleware/offset.js +12 -11
- package/lib-commonjs/middleware/offset.js.map +1 -1
- package/lib-commonjs/middleware/shift.js +37 -29
- package/lib-commonjs/middleware/shift.js.map +1 -1
- package/lib-commonjs/types.js +2 -5
- package/lib-commonjs/types.js.map +1 -1
- package/lib-commonjs/usePositioning.js +164 -192
- package/lib-commonjs/usePositioning.js.map +1 -1
- package/lib-commonjs/usePositioningMouseTarget.js +37 -34
- package/lib-commonjs/usePositioningMouseTarget.js.map +1 -1
- package/lib-commonjs/utils/debounce.js +21 -22
- package/lib-commonjs/utils/debounce.js.map +1 -1
- package/lib-commonjs/utils/fromFloatingUIPlacement.js +35 -30
- package/lib-commonjs/utils/fromFloatingUIPlacement.js.map +1 -1
- package/lib-commonjs/utils/getBoundary.js +22 -21
- package/lib-commonjs/utils/getBoundary.js.map +1 -1
- package/lib-commonjs/utils/getFloatingUIOffset.js +35 -23
- package/lib-commonjs/utils/getFloatingUIOffset.js.map +1 -1
- package/lib-commonjs/utils/getReactFiberFromNode.js +41 -45
- package/lib-commonjs/utils/getReactFiberFromNode.js.map +1 -1
- package/lib-commonjs/utils/getScrollParent.js +56 -50
- package/lib-commonjs/utils/getScrollParent.js.map +1 -1
- package/lib-commonjs/utils/hasAutoFocusFilter.js +17 -17
- package/lib-commonjs/utils/hasAutoFocusFilter.js.map +1 -1
- package/lib-commonjs/utils/index.js +18 -19
- package/lib-commonjs/utils/index.js.map +1 -1
- package/lib-commonjs/utils/mergeArrowOffset.js +32 -32
- package/lib-commonjs/utils/mergeArrowOffset.js.map +1 -1
- package/lib-commonjs/utils/parseFloatingUIPlacement.js +14 -15
- package/lib-commonjs/utils/parseFloatingUIPlacement.js.map +1 -1
- package/lib-commonjs/utils/resolvePositioningShorthand.js +61 -63
- package/lib-commonjs/utils/resolvePositioningShorthand.js.map +1 -1
- package/lib-commonjs/utils/toFloatingUIPadding.js +25 -23
- package/lib-commonjs/utils/toFloatingUIPadding.js.map +1 -1
- package/lib-commonjs/utils/toFloatingUIPlacement.js +33 -31
- package/lib-commonjs/utils/toFloatingUIPlacement.js.map +1 -1
- package/lib-commonjs/utils/toggleScrollListener.js +24 -20
- package/lib-commonjs/utils/toggleScrollListener.js.map +1 -1
- package/lib-commonjs/utils/useCallbackRef.js +53 -39
- package/lib-commonjs/utils/useCallbackRef.js.map +1 -1
- package/lib-commonjs/utils/writeArrowUpdates.js +24 -19
- package/lib-commonjs/utils/writeArrowUpdates.js.map +1 -1
- package/lib-commonjs/utils/writeContainerupdates.js +45 -36
- package/lib-commonjs/utils/writeContainerupdates.js.map +1 -1
- package/package.json +7 -6
- package/.swcrc +0 -39
|
@@ -1,44 +1,58 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
|
|
2
3
|
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
|
|
4
|
-
});
|
|
5
|
-
Object.defineProperty(exports, "useCallbackRef", {
|
|
6
|
-
enumerable: true,
|
|
7
|
-
get: ()=>useCallbackRef
|
|
4
|
+
value: true
|
|
8
5
|
});
|
|
9
|
-
|
|
10
|
-
const
|
|
11
|
-
const
|
|
6
|
+
exports.useCallbackRef = void 0;
|
|
7
|
+
const React = /*#__PURE__*/require("react");
|
|
8
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
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
|
+
*/
|
|
12
26
|
function useCallbackRef(initialValue, callback, skipInitialResolve) {
|
|
13
|
-
|
|
14
|
-
|
|
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
|
-
|
|
27
|
+
const isFirst = React.useRef(true);
|
|
28
|
+
const [ref] = React.useState(() => ({
|
|
29
|
+
// value
|
|
30
|
+
value: initialValue,
|
|
31
|
+
// last callback
|
|
32
|
+
callback,
|
|
33
|
+
// "memoized" public interface
|
|
34
|
+
facade: {
|
|
35
|
+
get current() {
|
|
36
|
+
return ref.value;
|
|
37
|
+
},
|
|
38
|
+
set current(value) {
|
|
39
|
+
const last = ref.value;
|
|
40
|
+
if (last !== value) {
|
|
41
|
+
ref.value = value;
|
|
42
|
+
if (skipInitialResolve && isFirst.current) {
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
ref.callback(value, last);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}));
|
|
50
|
+
react_utilities_1.useIsomorphicLayoutEffect(() => {
|
|
51
|
+
isFirst.current = false;
|
|
52
|
+
}, []);
|
|
53
|
+
// update callback
|
|
54
|
+
ref.callback = callback;
|
|
55
|
+
return ref.facade;
|
|
56
|
+
}
|
|
57
|
+
exports.useCallbackRef = useCallbackRef;
|
|
44
58
|
//# sourceMappingURL=useCallbackRef.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"names":["React","require","react_utilities_1","useCallbackRef","initialValue","callback","skipInitialResolve","isFirst","useRef","ref","useState","value","facade","current","last","useIsomorphicLayoutEffect","exports"],"sources":["../../../../../../../../packages/react-components/react-positioning/src/utils/useCallbackRef.ts"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\n\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<T>(\n initialValue: T | null,\n callback: (newValue: T | null, lastValue: T | null) => void,\n skipInitialResolve?: boolean,\n): React.MutableRefObject<T | null> {\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\n if (last !== value) {\n ref.value = value;\n\n if (skipInitialResolve && isFirst.current) {\n return;\n }\n\n ref.callback(value, last);\n }\n },\n },\n }));\n\n useIsomorphicLayoutEffect(() => {\n isFirst.current = false;\n }, []);\n\n // update callback\n ref.callback = callback;\n\n return ref.facade;\n}\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,iBAAA,gBAAAD,OAAA;AAEA;;;;;;;;;;;;;;;;;AAiBA,SAAgBE,cAAcA,CAC5BC,YAAsB,EACtBC,QAA2D,EAC3DC,kBAA4B;EAE5B,MAAMC,OAAO,GAAGP,KAAK,CAACQ,MAAM,CAAC,IAAI,CAAC;EAClC,MAAM,CAACC,GAAG,CAAC,GAAGT,KAAK,CAACU,QAAQ,CAAC,OAAO;IAClC;IACAC,KAAK,EAAEP,YAAY;IACnB;IACAC,QAAQ;IACR;IACAO,MAAM,EAAE;MACN,IAAIC,OAAOA,CAAA;QACT,OAAOJ,GAAG,CAACE,KAAK;MAClB,CAAC;MACD,IAAIE,OAAOA,CAACF,KAAK;QACf,MAAMG,IAAI,GAAGL,GAAG,CAACE,KAAK;QAEtB,IAAIG,IAAI,KAAKH,KAAK,EAAE;UAClBF,GAAG,CAACE,KAAK,GAAGA,KAAK;UAEjB,IAAIL,kBAAkB,IAAIC,OAAO,CAACM,OAAO,EAAE;YACzC;;UAGFJ,GAAG,CAACJ,QAAQ,CAACM,KAAK,EAAEG,IAAI,CAAC;;MAE7B;;GAEH,CAAC,CAAC;EAEHZ,iBAAA,CAAAa,yBAAyB,CAAC,MAAK;IAC7BR,OAAO,CAACM,OAAO,GAAG,KAAK;EACzB,CAAC,EAAE,EAAE,CAAC;EAEN;EACAJ,GAAG,CAACJ,QAAQ,GAAGA,QAAQ;EAEvB,OAAOI,GAAG,CAACG,MAAM;AACnB;AAxCAI,OAAA,CAAAb,cAAA,GAAAA,cAAA"}
|
|
@@ -1,23 +1,28 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
*/ "use strict";
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
|
|
6
|
-
});
|
|
7
|
-
Object.defineProperty(exports, "writeArrowUpdates", {
|
|
8
|
-
enumerable: true,
|
|
9
|
-
get: ()=>writeArrowUpdates
|
|
4
|
+
value: true
|
|
10
5
|
});
|
|
6
|
+
exports.writeArrowUpdates = void 0;
|
|
7
|
+
/**
|
|
8
|
+
* Writes all DOM element updates after position is computed
|
|
9
|
+
*/
|
|
11
10
|
function writeArrowUpdates(options) {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
11
|
+
const {
|
|
12
|
+
arrow,
|
|
13
|
+
middlewareData
|
|
14
|
+
} = options;
|
|
15
|
+
if (!middlewareData.arrow || !arrow) {
|
|
16
|
+
return;
|
|
17
|
+
}
|
|
18
|
+
const {
|
|
19
|
+
x: arrowX,
|
|
20
|
+
y: arrowY
|
|
21
|
+
} = middlewareData.arrow;
|
|
22
|
+
Object.assign(arrow.style, {
|
|
23
|
+
left: `${arrowX}px`,
|
|
24
|
+
top: `${arrowY}px`
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
exports.writeArrowUpdates = writeArrowUpdates;
|
|
23
28
|
//# sourceMappingURL=writeArrowUpdates.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"names":["writeArrowUpdates","options","arrow","middlewareData","x","arrowX","y","arrowY","Object","assign","style","left","top","exports"],"sources":["../../../../../../../../packages/react-components/react-positioning/src/utils/writeArrowUpdates.ts"],"sourcesContent":["import { MiddlewareData } from '@floating-ui/dom';\n\n/**\n * Writes all DOM element updates after position is computed\n */\nexport function writeArrowUpdates(options: { arrow: HTMLElement | null; middlewareData: MiddlewareData }) {\n const { arrow, middlewareData } = options;\n if (!middlewareData.arrow || !arrow) {\n return;\n }\n\n const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n Object.assign(arrow.style, {\n left: `${arrowX}px`,\n top: `${arrowY}px`,\n });\n}\n"],"mappings":";;;;;;AAEA;;;AAGA,SAAgBA,iBAAiBA,CAACC,OAAsE;EACtG,MAAM;IAAEC,KAAK;IAAEC;EAAc,CAAE,GAAGF,OAAO;EACzC,IAAI,CAACE,cAAc,CAACD,KAAK,IAAI,CAACA,KAAK,EAAE;IACnC;;EAGF,MAAM;IAAEE,CAAC,EAAEC,MAAM;IAAEC,CAAC,EAAEC;EAAM,CAAE,GAAGJ,cAAc,CAACD,KAAK;EAErDM,MAAM,CAACC,MAAM,CAACP,KAAK,CAACQ,KAAK,EAAE;IACzBC,IAAI,EAAE,GAAGN,MAAM,IAAI;IACnBO,GAAG,EAAE,GAAGL,MAAM;GACf,CAAC;AACJ;AAZAM,OAAA,CAAAb,iBAAA,GAAAA,iBAAA"}
|
|
@@ -1,41 +1,50 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
|
|
2
3
|
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
|
|
4
|
-
});
|
|
5
|
-
Object.defineProperty(exports, "writeContainerUpdates", {
|
|
6
|
-
enumerable: true,
|
|
7
|
-
get: ()=>writeContainerUpdates
|
|
4
|
+
value: true
|
|
8
5
|
});
|
|
9
|
-
|
|
6
|
+
exports.writeContainerUpdates = void 0;
|
|
7
|
+
const constants_1 = /*#__PURE__*/require("../constants");
|
|
8
|
+
/**
|
|
9
|
+
* Writes all container element position updates after the position is computed
|
|
10
|
+
*/
|
|
10
11
|
function writeContainerUpdates(options) {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
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
|
-
|
|
12
|
+
var _a, _b, _c;
|
|
13
|
+
const {
|
|
14
|
+
container,
|
|
15
|
+
placement,
|
|
16
|
+
middlewareData,
|
|
17
|
+
strategy,
|
|
18
|
+
lowPPI,
|
|
19
|
+
coordinates
|
|
20
|
+
} = options;
|
|
21
|
+
if (!container) {
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
container.setAttribute(constants_1.DATA_POSITIONING_PLACEMENT, placement);
|
|
25
|
+
container.removeAttribute(constants_1.DATA_POSITIONING_INTERSECTING);
|
|
26
|
+
if (middlewareData.intersectionObserver.intersecting) {
|
|
27
|
+
container.setAttribute(constants_1.DATA_POSITIONING_INTERSECTING, '');
|
|
28
|
+
}
|
|
29
|
+
container.removeAttribute(constants_1.DATA_POSITIONING_ESCAPED);
|
|
30
|
+
if ((_a = middlewareData.hide) === null || _a === void 0 ? void 0 : _a.escaped) {
|
|
31
|
+
container.setAttribute(constants_1.DATA_POSITIONING_ESCAPED, '');
|
|
32
|
+
}
|
|
33
|
+
container.removeAttribute(constants_1.DATA_POSITIONING_HIDDEN);
|
|
34
|
+
if ((_b = middlewareData.hide) === null || _b === void 0 ? void 0 : _b.referenceHidden) {
|
|
35
|
+
container.setAttribute(constants_1.DATA_POSITIONING_HIDDEN, '');
|
|
36
|
+
}
|
|
37
|
+
// Round so that the coordinates land on device pixels.
|
|
38
|
+
// This prevents blurriness in cases where the browser doesn't apply pixel snapping, such as when other effects like
|
|
39
|
+
// `backdrop-filter: blur()` are applied to the container, and the browser is zoomed in.
|
|
40
|
+
// See https://github.com/microsoft/fluentui/issues/26764 for more info.
|
|
41
|
+
const devicePixelRatio = ((_c = container.ownerDocument.defaultView) === null || _c === void 0 ? void 0 : _c.devicePixelRatio) || 1;
|
|
42
|
+
const x = Math.round(coordinates.x * devicePixelRatio) / devicePixelRatio;
|
|
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;
|
|
41
50
|
//# sourceMappingURL=writeContainerupdates.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"names":["constants_1","require","writeContainerUpdates","options","container","placement","middlewareData","strategy","lowPPI","coordinates","setAttribute","DATA_POSITIONING_PLACEMENT","removeAttribute","DATA_POSITIONING_INTERSECTING","intersectionObserver","intersecting","DATA_POSITIONING_ESCAPED","_a","hide","escaped","DATA_POSITIONING_HIDDEN","_b","referenceHidden","devicePixelRatio","_c","ownerDocument","defaultView","x","Math","round","y","Object","assign","style","transform","position","exports"],"sources":["../../../../../../../../packages/react-components/react-positioning/src/utils/writeContainerupdates.ts"],"sourcesContent":["import type { Placement, MiddlewareData, Strategy, Coords } from '@floating-ui/dom';\nimport {\n DATA_POSITIONING_ESCAPED,\n DATA_POSITIONING_HIDDEN,\n DATA_POSITIONING_INTERSECTING,\n DATA_POSITIONING_PLACEMENT,\n} from '../constants';\n\n/**\n * Writes all container element position updates after the position is computed\n */\nexport function writeContainerUpdates(options: {\n container: HTMLElement | null;\n placement: Placement;\n middlewareData: MiddlewareData;\n /**\n * Layer acceleration can disable subpixel rendering which causes slightly\n * blurry text on low PPI displays, so we want to use 2D transforms\n * instead\n */\n lowPPI: boolean;\n strategy: Strategy;\n coordinates: Coords;\n}) {\n const { container, placement, middlewareData, strategy, lowPPI, coordinates } = options;\n if (!container) {\n return;\n }\n container.setAttribute(DATA_POSITIONING_PLACEMENT, placement);\n container.removeAttribute(DATA_POSITIONING_INTERSECTING);\n if (middlewareData.intersectionObserver.intersecting) {\n container.setAttribute(DATA_POSITIONING_INTERSECTING, '');\n }\n\n container.removeAttribute(DATA_POSITIONING_ESCAPED);\n if (middlewareData.hide?.escaped) {\n container.setAttribute(DATA_POSITIONING_ESCAPED, '');\n }\n\n container.removeAttribute(DATA_POSITIONING_HIDDEN);\n if (middlewareData.hide?.referenceHidden) {\n container.setAttribute(DATA_POSITIONING_HIDDEN, '');\n }\n\n // Round so that the coordinates land on device pixels.\n // This prevents blurriness in cases where the browser doesn't apply pixel snapping, such as when other effects like\n // `backdrop-filter: blur()` are applied to the container, and the browser is zoomed in.\n // See https://github.com/microsoft/fluentui/issues/26764 for more info.\n const devicePixelRatio = container.ownerDocument.defaultView?.devicePixelRatio || 1;\n const x = Math.round(coordinates.x * devicePixelRatio) / devicePixelRatio;\n const y = Math.round(coordinates.y * devicePixelRatio) / devicePixelRatio;\n\n Object.assign(container.style, {\n transform: lowPPI ? `translate(${x}px, ${y}px)` : `translate3d(${x}px, ${y}px, 0)`,\n position: strategy,\n });\n}\n"],"mappings":";;;;;;AACA,MAAAA,WAAA,gBAAAC,OAAA;AAOA;;;AAGA,SAAgBC,qBAAqBA,CAACC,OAYrC;;EACC,MAAM;IAAEC,SAAS;IAAEC,SAAS;IAAEC,cAAc;IAAEC,QAAQ;IAAEC,MAAM;IAAEC;EAAW,CAAE,GAAGN,OAAO;EACvF,IAAI,CAACC,SAAS,EAAE;IACd;;EAEFA,SAAS,CAACM,YAAY,CAACV,WAAA,CAAAW,0BAA0B,EAAEN,SAAS,CAAC;EAC7DD,SAAS,CAACQ,eAAe,CAACZ,WAAA,CAAAa,6BAA6B,CAAC;EACxD,IAAIP,cAAc,CAACQ,oBAAoB,CAACC,YAAY,EAAE;IACpDX,SAAS,CAACM,YAAY,CAACV,WAAA,CAAAa,6BAA6B,EAAE,EAAE,CAAC;;EAG3DT,SAAS,CAACQ,eAAe,CAACZ,WAAA,CAAAgB,wBAAwB,CAAC;EACnD,IAAI,CAAAC,EAAA,GAAAX,cAAc,CAACY,IAAI,cAAAD,EAAA,uBAAAA,EAAA,CAAEE,OAAO,EAAE;IAChCf,SAAS,CAACM,YAAY,CAACV,WAAA,CAAAgB,wBAAwB,EAAE,EAAE,CAAC;;EAGtDZ,SAAS,CAACQ,eAAe,CAACZ,WAAA,CAAAoB,uBAAuB,CAAC;EAClD,IAAI,CAAAC,EAAA,GAAAf,cAAc,CAACY,IAAI,cAAAG,EAAA,uBAAAA,EAAA,CAAEC,eAAe,EAAE;IACxClB,SAAS,CAACM,YAAY,CAACV,WAAA,CAAAoB,uBAAuB,EAAE,EAAE,CAAC;;EAGrD;EACA;EACA;EACA;EACA,MAAMG,gBAAgB,GAAG,EAAAC,EAAA,GAAApB,SAAS,CAACqB,aAAa,CAACC,WAAW,cAAAF,EAAA,uBAAAA,EAAA,CAAED,gBAAgB,KAAI,CAAC;EACnF,MAAMI,CAAC,GAAGC,IAAI,CAACC,KAAK,CAACpB,WAAW,CAACkB,CAAC,GAAGJ,gBAAgB,CAAC,GAAGA,gBAAgB;EACzE,MAAMO,CAAC,GAAGF,IAAI,CAACC,KAAK,CAACpB,WAAW,CAACqB,CAAC,GAAGP,gBAAgB,CAAC,GAAGA,gBAAgB;EAEzEQ,MAAM,CAACC,MAAM,CAAC5B,SAAS,CAAC6B,KAAK,EAAE;IAC7BC,SAAS,EAAE1B,MAAM,GAAG,aAAamB,CAAC,OAAOG,CAAC,KAAK,GAAG,eAAeH,CAAC,OAAOG,CAAC,QAAQ;IAClFK,QAAQ,EAAE5B;GACX,CAAC;AACJ;AA7CA6B,OAAA,CAAAlC,qBAAA,GAAAA,qBAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-positioning",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20230321-0440.1",
|
|
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": "just-scripts
|
|
23
|
+
"generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
|
|
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": "0.0.0-nightly-
|
|
33
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
34
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
32
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly-20230321-0440.1",
|
|
33
|
+
"@fluentui/react-theme": "0.0.0-nightly-20230321-0440.1",
|
|
34
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20230321-0440.1",
|
|
35
35
|
"@griffel/react": "^1.5.2",
|
|
36
|
-
"
|
|
36
|
+
"tslib": "^2.1.0"
|
|
37
37
|
},
|
|
38
38
|
"peerDependencies": {
|
|
39
39
|
"@types/react": ">=16.8.0 <19.0.0",
|
|
@@ -45,6 +45,7 @@
|
|
|
45
45
|
"exports": {
|
|
46
46
|
".": {
|
|
47
47
|
"types": "./dist/index.d.ts",
|
|
48
|
+
"node": "./lib-commonjs/index.js",
|
|
48
49
|
"import": "./lib/index.js",
|
|
49
50
|
"require": "./lib-commonjs/index.js"
|
|
50
51
|
},
|
package/.swcrc
DELETED
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"$schema": "https://json.schemastore.org/swcrc",
|
|
3
|
-
"env": {
|
|
4
|
-
"targets": {
|
|
5
|
-
"chrome": "84",
|
|
6
|
-
"edge": "84",
|
|
7
|
-
"firefox": "75",
|
|
8
|
-
"opera": "73",
|
|
9
|
-
"safari": "14.1"
|
|
10
|
-
},
|
|
11
|
-
"bugfixes": true
|
|
12
|
-
},
|
|
13
|
-
"exclude": [
|
|
14
|
-
"/testing",
|
|
15
|
-
"/**/*.cy.ts",
|
|
16
|
-
"/**/*.cy.tsx",
|
|
17
|
-
"/**/*.spec.ts",
|
|
18
|
-
"/**/*.spec.tsx",
|
|
19
|
-
"/**/*.test.ts",
|
|
20
|
-
"/**/*.test.tsx"
|
|
21
|
-
],
|
|
22
|
-
"jsc": {
|
|
23
|
-
"parser": {
|
|
24
|
-
"syntax": "typescript",
|
|
25
|
-
"tsx": true,
|
|
26
|
-
"decorators": false,
|
|
27
|
-
"dynamicImport": false
|
|
28
|
-
},
|
|
29
|
-
"externalHelpers": true,
|
|
30
|
-
"transform": {
|
|
31
|
-
"react": {
|
|
32
|
-
"runtime": "classic",
|
|
33
|
-
"useSpread": true
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
},
|
|
37
|
-
"minify": false,
|
|
38
|
-
"sourceMaps": true
|
|
39
|
-
}
|