@fluentui/react-positioning 9.0.0-nightly.f81b28ceb3.1 → 9.0.0-rc.4
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 +235 -10
- package/CHANGELOG.md +72 -7
- package/dist/react-positioning.d.ts +113 -35
- package/lib/createArrowStyles.d.ts +64 -0
- package/lib/createArrowStyles.js +87 -0
- package/lib/createArrowStyles.js.map +1 -0
- package/lib/createVirtualElementFromClick.js +17 -15
- package/lib/createVirtualElementFromClick.js.map +1 -1
- package/lib/index.d.ts +2 -1
- package/lib/index.js +2 -1
- package/lib/index.js.map +1 -1
- package/lib/isIntersectingModifier.d.ts +4 -0
- package/lib/isIntersectingModifier.js +26 -0
- package/lib/isIntersectingModifier.js.map +1 -0
- package/lib/types.d.ts +28 -7
- package/lib/types.js.map +1 -1
- package/lib/usePopper.d.ts +2 -14
- package/lib/usePopper.js +369 -319
- package/lib/usePopper.js.map +1 -1
- package/lib/usePopperMouseTarget.js +28 -22
- package/lib/usePopperMouseTarget.js.map +1 -1
- package/lib/utils/getBasePlacement.js +1 -1
- package/lib/utils/getBasePlacement.js.map +1 -1
- package/lib/utils/getBoundary.js +15 -10
- package/lib/utils/getBoundary.js.map +1 -1
- package/lib/utils/getReactFiberFromNode.d.ts +0 -1
- package/lib/utils/getReactFiberFromNode.js +39 -35
- package/lib/utils/getReactFiberFromNode.js.map +1 -1
- package/lib/utils/getScrollParent.js +46 -32
- package/lib/utils/getScrollParent.js.map +1 -1
- package/lib/utils/index.js.map +1 -1
- package/lib/utils/mergeArrowOffset.js +30 -25
- package/lib/utils/mergeArrowOffset.js.map +1 -1
- package/lib/utils/positioningHelper.d.ts +2 -2
- package/lib/utils/positioningHelper.js +42 -34
- package/lib/utils/positioningHelper.js.map +1 -1
- package/lib/utils/resolvePositioningShorthand.js +58 -20
- package/lib/utils/resolvePositioningShorthand.js.map +1 -1
- package/lib/utils/useCallbackRef.js +35 -29
- package/lib/utils/useCallbackRef.js.map +1 -1
- package/lib-commonjs/createArrowStyles.d.ts +64 -0
- package/lib-commonjs/createArrowStyles.js +100 -0
- package/lib-commonjs/createArrowStyles.js.map +1 -0
- package/lib-commonjs/createVirtualElementFromClick.js +23 -16
- package/lib-commonjs/createVirtualElementFromClick.js.map +1 -1
- package/lib-commonjs/index.d.ts +2 -1
- package/lib-commonjs/index.js +28 -6
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/isIntersectingModifier.d.ts +4 -0
- package/lib-commonjs/isIntersectingModifier.js +34 -0
- package/lib-commonjs/isIntersectingModifier.js.map +1 -0
- package/lib-commonjs/types.d.ts +28 -7
- package/lib-commonjs/types.js +4 -1
- package/lib-commonjs/types.js.map +1 -1
- package/lib-commonjs/usePopper.d.ts +2 -14
- package/lib-commonjs/usePopper.js +385 -324
- package/lib-commonjs/usePopper.js.map +1 -1
- package/lib-commonjs/usePopperMouseTarget.js +38 -25
- package/lib-commonjs/usePopperMouseTarget.js.map +1 -1
- package/lib-commonjs/utils/getBasePlacement.js +7 -2
- package/lib-commonjs/utils/getBasePlacement.js.map +1 -1
- package/lib-commonjs/utils/getBoundary.js +23 -12
- package/lib-commonjs/utils/getBoundary.js.map +1 -1
- package/lib-commonjs/utils/getReactFiberFromNode.d.ts +0 -1
- package/lib-commonjs/utils/getReactFiberFromNode.js +44 -36
- package/lib-commonjs/utils/getReactFiberFromNode.js.map +1 -1
- package/lib-commonjs/utils/getScrollParent.js +53 -33
- package/lib-commonjs/utils/getScrollParent.js.map +1 -1
- package/lib-commonjs/utils/index.js +14 -2
- package/lib-commonjs/utils/index.js.map +1 -1
- package/lib-commonjs/utils/mergeArrowOffset.js +36 -26
- package/lib-commonjs/utils/mergeArrowOffset.js.map +1 -1
- package/lib-commonjs/utils/positioningHelper.d.ts +2 -2
- package/lib-commonjs/utils/positioningHelper.js +50 -35
- package/lib-commonjs/utils/positioningHelper.js.map +1 -1
- package/lib-commonjs/utils/resolvePositioningShorthand.js +66 -23
- package/lib-commonjs/utils/resolvePositioningShorthand.js.map +1 -1
- package/lib-commonjs/utils/useCallbackRef.js +45 -32
- package/lib-commonjs/utils/useCallbackRef.js.map +1 -1
- package/package.json +8 -8
@@ -1,5 +1,8 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
3
6
|
exports.mergeArrowOffset = void 0;
|
4
7
|
/**
|
5
8
|
* Generally when adding an arrow to popper, it's necessary to offset the position of the popper by the
|
@@ -9,33 +12,40 @@ exports.mergeArrowOffset = void 0;
|
|
9
12
|
* @param arrowHeight - The height of the arrow in px
|
10
13
|
* @returns User offset augmented with arrow height
|
11
14
|
*/
|
15
|
+
|
12
16
|
function mergeArrowOffset(userOffset, arrowHeight) {
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
17
|
+
let offsetWithArrow = userOffset;
|
18
|
+
|
19
|
+
if (!userOffset) {
|
20
|
+
return [0, arrowHeight];
|
21
|
+
}
|
22
|
+
|
23
|
+
if (Array.isArray(offsetWithArrow)) {
|
24
|
+
setArrowOffset(offsetWithArrow, arrowHeight);
|
25
|
+
return offsetWithArrow;
|
26
|
+
}
|
27
|
+
|
28
|
+
if (typeof offsetWithArrow === 'function') {
|
29
|
+
const userOffsetFn = offsetWithArrow;
|
30
|
+
|
31
|
+
offsetWithArrow = offsetParams => {
|
32
|
+
const offset = userOffsetFn(offsetParams);
|
33
|
+
setArrowOffset(offset, arrowHeight);
|
34
|
+
return offset;
|
35
|
+
};
|
36
|
+
} // This should never happen
|
37
|
+
|
38
|
+
|
39
|
+
return [0, 0];
|
31
40
|
}
|
41
|
+
|
32
42
|
exports.mergeArrowOffset = mergeArrowOffset;
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
43
|
+
|
44
|
+
const setArrowOffset = (offset, arrowHeight) => {
|
45
|
+
if (offset[1] !== null && offset[1] !== undefined) {
|
46
|
+
offset[1] += arrowHeight;
|
47
|
+
} else {
|
48
|
+
offset[1] = arrowHeight;
|
49
|
+
}
|
40
50
|
};
|
41
51
|
//# sourceMappingURL=mergeArrowOffset.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["utils/mergeArrowOffset.ts"],"names":[],"mappings":";;;;;;AAEA;;;;;;;AAOG;;AACH,SAAgB,gBAAhB,CAAiC,UAAjC,EAAwE,WAAxE,EAA2F;AACzF,MAAI,eAAe,GAAG,UAAtB;;AACA,MAAI,CAAC,UAAL,EAAiB;AACf,WAAO,CAAC,CAAD,EAAI,WAAJ,CAAP;AACD;;AAED,MAAI,KAAK,CAAC,OAAN,CAAc,eAAd,CAAJ,EAAoC;AAClC,IAAA,cAAc,CAAC,eAAD,EAAkB,WAAlB,CAAd;AACA,WAAO,eAAP;AACD;;AAED,MAAI,OAAO,eAAP,KAA2B,UAA/B,EAA2C;AACzC,UAAM,YAAY,GAAG,eAArB;;AACA,IAAA,eAAe,GAAG,YAAY,IAAG;AAC/B,YAAM,MAAM,GAAG,YAAY,CAAC,YAAD,CAA3B;AACA,MAAA,cAAc,CAAC,MAAD,EAAS,WAAT,CAAd;AACA,aAAO,MAAP;AACD,KAJD;AAKD,GAlBwF,CAoBzF;;;AACA,SAAO,CAAC,CAAD,EAAI,CAAJ,CAAP;AACD;;AAtBD,OAAA,CAAA,gBAAA,GAAA,gBAAA;;AAwBA,MAAM,cAAc,GAAG,CAAC,MAAD,EAAiE,WAAjE,KAAwF;AAC7G,MAAI,MAAM,CAAC,CAAD,CAAN,KAAc,IAAd,IAAsB,MAAM,CAAC,CAAD,CAAN,KAAc,SAAxC,EAAmD;AACjD,IAAA,MAAM,CAAC,CAAD,CAAN,IAAa,WAAb;AACD,GAFD,MAEO;AACL,IAAA,MAAM,CAAC,CAAD,CAAN,GAAY,WAAZ;AACD;AACF,CAND","sourcesContent":["import type { Offset } from '../types';\n\n/**\n * Generally when adding an arrow to popper, it's necessary to offset the position of the popper by the\n * height of the arrow. A simple utility to merge a provided offset with an arrow height to return the final offset\n *\n * @param userOffset - The offset provided by the user\n * @param arrowHeight - The height of the arrow in px\n * @returns User offset augmented with arrow height\n */\nexport function mergeArrowOffset(userOffset: Offset | undefined | null, arrowHeight: number): Offset {\n let offsetWithArrow = userOffset;\n if (!userOffset) {\n return [0, arrowHeight];\n }\n\n if (Array.isArray(offsetWithArrow)) {\n setArrowOffset(offsetWithArrow, arrowHeight);\n return offsetWithArrow;\n }\n\n if (typeof offsetWithArrow === 'function') {\n const userOffsetFn = offsetWithArrow;\n offsetWithArrow = offsetParams => {\n const offset = userOffsetFn(offsetParams);\n setArrowOffset(offset, arrowHeight);\n return offset;\n };\n }\n\n // This should never happen\n return [0, 0] as never;\n}\n\nconst setArrowOffset = (offset: [number | null | undefined, number | null | undefined], arrowHeight: number) => {\n if (offset[1] !== null && offset[1] !== undefined) {\n offset[1] += arrowHeight;\n } else {\n offset[1] = arrowHeight;\n }\n};\n"],"sourceRoot":"../src/"}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import * as PopperJs from '@popperjs/core';
|
2
|
-
import type { Offset } from '../types';
|
2
|
+
import type { Alignment, Offset, Position } from '../types';
|
3
3
|
/**
|
4
4
|
* @see positioninHelper.test.ts for expected placement values
|
5
5
|
*/
|
6
|
-
export declare const getPlacement: (align?:
|
6
|
+
export declare const getPlacement: (align?: Alignment | undefined, position?: Position | undefined, rtl?: boolean | undefined) => PopperJs.Placement;
|
7
7
|
export declare const applyRtlToOffset: (offset: Offset | undefined) => Offset | undefined;
|
@@ -1,46 +1,61 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
3
6
|
exports.applyRtlToOffset = exports.getPlacement = void 0;
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
7
|
+
|
8
|
+
const getPositionMap = rtl => ({
|
9
|
+
above: 'top',
|
10
|
+
below: 'bottom',
|
11
|
+
before: rtl ? 'right' : 'left',
|
12
|
+
after: rtl ? 'left' : 'right'
|
13
|
+
});
|
14
|
+
|
15
|
+
const getAlignmentMap = rtl => ({
|
16
|
+
start: rtl ? 'end' : 'start',
|
17
|
+
end: rtl ? 'start' : 'end',
|
18
|
+
top: 'start',
|
19
|
+
bottom: 'end',
|
20
|
+
center: ''
|
21
|
+
});
|
22
|
+
|
23
|
+
const shouldAlignToCenter = (p, a) => {
|
24
|
+
const positionedVertically = p === 'above' || p === 'below';
|
25
|
+
const alignedVertically = a === 'top' || a === 'bottom';
|
26
|
+
return positionedVertically && alignedVertically || !positionedVertically && !alignedVertically;
|
21
27
|
};
|
22
28
|
/**
|
23
29
|
* @see positioninHelper.test.ts for expected placement values
|
24
30
|
*/
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
31
|
+
|
32
|
+
|
33
|
+
const getPlacement = (align, position, rtl) => {
|
34
|
+
const alignment = shouldAlignToCenter(position, align) ? 'center' : align;
|
35
|
+
const computedPosition = position && getPositionMap(rtl)[position];
|
36
|
+
const computedAlignmnent = alignment && getAlignmentMap(rtl)[alignment];
|
37
|
+
|
38
|
+
if (computedPosition && computedAlignmnent) {
|
39
|
+
return `${computedPosition}-${computedAlignmnent}`;
|
40
|
+
}
|
41
|
+
|
42
|
+
return computedPosition || 'auto';
|
33
43
|
};
|
44
|
+
|
34
45
|
exports.getPlacement = getPlacement;
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
return
|
46
|
+
|
47
|
+
const applyRtlToOffset = offset => {
|
48
|
+
if (typeof offset === 'undefined') {
|
49
|
+
return undefined;
|
50
|
+
}
|
51
|
+
|
52
|
+
if (Array.isArray(offset)) {
|
53
|
+
offset[0] = offset[0] * -1;
|
54
|
+
return offset;
|
55
|
+
}
|
56
|
+
|
57
|
+
return param => exports.applyRtlToOffset(offset(param));
|
44
58
|
};
|
59
|
+
|
45
60
|
exports.applyRtlToOffset = applyRtlToOffset;
|
46
61
|
//# sourceMappingURL=positioningHelper.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["utils/positioningHelper.ts"],"names":[],"mappings":";;;;;;;AAMA,MAAM,cAAc,GAAI,GAAD,KAAyD;AAC9E,EAAA,KAAK,EAAE,KADuE;AAE9E,EAAA,KAAK,EAAE,QAFuE;AAG9E,EAAA,MAAM,EAAE,GAAG,GAAG,OAAH,GAAa,MAHsD;AAI9E,EAAA,KAAK,EAAE,GAAG,GAAG,MAAH,GAAY;AAJwD,CAAzD,CAAvB;;AAOA,MAAM,eAAe,GAAI,GAAD,KAAuD;AAC7E,EAAA,KAAK,EAAE,GAAG,GAAG,KAAH,GAAW,OADwD;AAE7E,EAAA,GAAG,EAAE,GAAG,GAAG,OAAH,GAAa,KAFwD;AAG7E,EAAA,GAAG,EAAE,OAHwE;AAI7E,EAAA,MAAM,EAAE,KAJqE;AAK7E,EAAA,MAAM,EAAE;AALqE,CAAvD,CAAxB;;AAQA,MAAM,mBAAmB,GAAG,CAAC,CAAD,EAAe,CAAf,KAAyC;AACnE,QAAM,oBAAoB,GAAG,CAAC,KAAK,OAAN,IAAiB,CAAC,KAAK,OAApD;AACA,QAAM,iBAAiB,GAAG,CAAC,KAAK,KAAN,IAAe,CAAC,KAAK,QAA/C;AAEA,SAAQ,oBAAoB,IAAI,iBAAzB,IAAgD,CAAC,oBAAD,IAAyB,CAAC,iBAAjF;AACD,CALD;AAOA;;AAEG;;;AACI,MAAM,YAAY,GAAG,CAAC,KAAD,EAAoB,QAApB,EAAyC,GAAzC,KAA8E;AACxG,QAAM,SAAS,GAAG,mBAAmB,CAAC,QAAD,EAAW,KAAX,CAAnB,GAAuC,QAAvC,GAAkD,KAApE;AAEA,QAAM,gBAAgB,GAAG,QAAQ,IAAI,cAAc,CAAC,GAAD,CAAd,CAAoB,QAApB,CAArC;AACA,QAAM,kBAAkB,GAAG,SAAS,IAAI,eAAe,CAAC,GAAD,CAAf,CAAqB,SAArB,CAAxC;;AAEA,MAAI,gBAAgB,IAAI,kBAAxB,EAA4C;AAC1C,WAAO,GAAG,gBAAgB,IAAI,kBAAkB,EAAhD;AACD;;AAED,SAAO,gBAAgB,IAAK,MAA5B;AACD,CAXM;;AAAM,OAAA,CAAA,YAAA,GAAY,YAAZ;;AAaN,MAAM,gBAAgB,GAAI,MAAD,IAAmD;AACjF,MAAI,OAAO,MAAP,KAAkB,WAAtB,EAAmC;AACjC,WAAO,SAAP;AACD;;AAED,MAAI,KAAK,CAAC,OAAN,CAAc,MAAd,CAAJ,EAA2B;AACzB,IAAA,MAAM,CAAC,CAAD,CAAN,GAAY,MAAM,CAAC,CAAD,CAAN,GAAa,CAAC,CAA1B;AAEA,WAAO,MAAP;AACD;;AAED,SAAS,KAAD,IAAgC,OAAA,CAAA,gBAAA,CAAiB,MAAM,CAAC,KAAD,CAAvB,CAAxC;AACD,CAZM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourcesContent":["import * as PopperJs from '@popperjs/core';\nimport type { Alignment, Offset, OffsetFunction, OffsetFunctionParam, Position } from '../types';\n\ntype PlacementPosition = 'top' | 'bottom' | 'left' | 'right';\ntype PlacementAlign = 'start' | 'end' | ''; // '' represents center\n\nconst getPositionMap = (rtl?: boolean): Record<Position, PlacementPosition> => ({\n above: 'top',\n below: 'bottom',\n before: rtl ? 'right' : 'left',\n after: rtl ? 'left' : 'right',\n});\n\nconst getAlignmentMap = (rtl?: boolean): Record<Alignment, PlacementAlign> => ({\n start: rtl ? 'end' : 'start',\n end: rtl ? 'start' : 'end',\n top: 'start',\n bottom: 'end',\n center: '',\n});\n\nconst shouldAlignToCenter = (p?: Position, a?: Alignment): boolean => {\n const positionedVertically = p === 'above' || p === 'below';\n const alignedVertically = a === 'top' || a === 'bottom';\n\n return (positionedVertically && alignedVertically) || (!positionedVertically && !alignedVertically);\n};\n\n/**\n * @see positioninHelper.test.ts for expected placement values\n */\nexport const getPlacement = (align?: Alignment, position?: Position, rtl?: boolean): PopperJs.Placement => {\n const alignment = shouldAlignToCenter(position, align) ? 'center' : align;\n\n const computedPosition = position && getPositionMap(rtl)[position];\n const computedAlignmnent = alignment && getAlignmentMap(rtl)[alignment];\n\n if (computedPosition && computedAlignmnent) {\n return `${computedPosition}-${computedAlignmnent}` as PopperJs.Placement;\n }\n\n return computedPosition || ('auto' as PopperJs.Placement);\n};\n\nexport const applyRtlToOffset = (offset: Offset | undefined): Offset | undefined => {\n if (typeof offset === 'undefined') {\n return undefined;\n }\n\n if (Array.isArray(offset)) {\n offset[0] = offset[0]! * -1;\n\n return offset;\n }\n\n return ((param: OffsetFunctionParam) => applyRtlToOffset(offset(param))) as OffsetFunction;\n};\n"],"sourceRoot":"../src/"}
|
@@ -1,29 +1,72 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
|
-
exports
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.resolvePositioningShorthand = void 0; // Look up table for shorthand to avoid parsing strings
|
7
|
+
|
8
|
+
const shorthandLookup = {
|
9
|
+
above: {
|
10
|
+
position: 'above',
|
11
|
+
align: 'center'
|
12
|
+
},
|
13
|
+
'above-start': {
|
14
|
+
position: 'above',
|
15
|
+
align: 'start'
|
16
|
+
},
|
17
|
+
'above-end': {
|
18
|
+
position: 'above',
|
19
|
+
align: 'end'
|
20
|
+
},
|
21
|
+
below: {
|
22
|
+
position: 'below',
|
23
|
+
align: 'center'
|
24
|
+
},
|
25
|
+
'below-start': {
|
26
|
+
position: 'below',
|
27
|
+
align: 'start'
|
28
|
+
},
|
29
|
+
'below-end': {
|
30
|
+
position: 'below',
|
31
|
+
align: 'end'
|
32
|
+
},
|
33
|
+
before: {
|
34
|
+
position: 'before',
|
35
|
+
align: 'center'
|
36
|
+
},
|
37
|
+
'before-top': {
|
38
|
+
position: 'before',
|
39
|
+
align: 'top'
|
40
|
+
},
|
41
|
+
'before-bottom': {
|
42
|
+
position: 'before',
|
43
|
+
align: 'bottom'
|
44
|
+
},
|
45
|
+
after: {
|
46
|
+
position: 'after',
|
47
|
+
align: 'center'
|
48
|
+
},
|
49
|
+
'after-top': {
|
50
|
+
position: 'after',
|
51
|
+
align: 'top'
|
52
|
+
},
|
53
|
+
'after-bottom': {
|
54
|
+
position: 'after',
|
55
|
+
align: 'bottom'
|
56
|
+
}
|
18
57
|
};
|
58
|
+
|
19
59
|
function resolvePositioningShorthand(shorthand) {
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
60
|
+
if (shorthand === undefined || shorthand === null) {
|
61
|
+
return {};
|
62
|
+
}
|
63
|
+
|
64
|
+
if (typeof shorthand === 'string') {
|
65
|
+
return shorthandLookup[shorthand];
|
66
|
+
}
|
67
|
+
|
68
|
+
return shorthand;
|
27
69
|
}
|
70
|
+
|
28
71
|
exports.resolvePositioningShorthand = resolvePositioningShorthand;
|
29
72
|
//# sourceMappingURL=resolvePositioningShorthand.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["utils/resolvePositioningShorthand.ts"],"names":[],"mappings":";;;;;8CAEA;;AACA,MAAM,eAAe,GAAoF;AACvG,EAAA,KAAK,EAAE;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GADgG;AAEvG,iBAAe;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GAFwF;AAGvG,eAAa;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GAH0F;AAIvG,EAAA,KAAK,EAAE;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GAJgG;AAKvG,iBAAe;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GALwF;AAMvG,eAAa;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GAN0F;AAOvG,EAAA,MAAM,EAAE;AAAE,IAAA,QAAQ,EAAE,QAAZ;AAAsB,IAAA,KAAK,EAAE;AAA7B,GAP+F;AAQvG,gBAAc;AAAE,IAAA,QAAQ,EAAE,QAAZ;AAAsB,IAAA,KAAK,EAAE;AAA7B,GARyF;AASvG,mBAAiB;AAAE,IAAA,QAAQ,EAAE,QAAZ;AAAsB,IAAA,KAAK,EAAE;AAA7B,GATsF;AAUvG,EAAA,KAAK,EAAE;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GAVgG;AAWvG,eAAa;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GAX0F;AAYvG,kBAAgB;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B;AAZuF,CAAzG;;AAeA,SAAgB,2BAAhB,CACE,SADF,EACoD;AAElD,MAAI,SAAS,KAAK,SAAd,IAA2B,SAAS,KAAK,IAA7C,EAAmD;AACjD,WAAO,EAAP;AACD;;AAED,MAAI,OAAO,SAAP,KAAqB,QAAzB,EAAmC;AACjC,WAAO,eAAe,CAAC,SAAD,CAAtB;AACD;;AAED,SAAO,SAAP;AACD;;AAZD,OAAA,CAAA,2BAAA,GAAA,2BAAA","sourcesContent":["import type { PositioningShorthand, PositioningShorthandValue, PositioningProps } from '../types';\n\n// Look up table for shorthand to avoid parsing strings\nconst shorthandLookup: Record<PositioningShorthandValue, Pick<PositioningProps, 'position' | 'align'>> = {\n above: { position: 'above', align: 'center' },\n 'above-start': { position: 'above', align: 'start' },\n 'above-end': { position: 'above', align: 'end' },\n below: { position: 'below', align: 'center' },\n 'below-start': { position: 'below', align: 'start' },\n 'below-end': { position: 'below', align: 'end' },\n before: { position: 'before', align: 'center' },\n 'before-top': { position: 'before', align: 'top' },\n 'before-bottom': { position: 'before', align: 'bottom' },\n after: { position: 'after', align: 'center' },\n 'after-top': { position: 'after', align: 'top' },\n 'after-bottom': { position: 'after', align: 'bottom' },\n};\n\nexport function resolvePositioningShorthand(\n shorthand: PositioningShorthand | undefined | null,\n): Readonly<PositioningProps> {\n if (shorthand === undefined || shorthand === null) {\n return {};\n }\n\n if (typeof shorthand === 'string') {\n return shorthandLookup[shorthand];\n }\n\n return shorthand as Readonly<PositioningProps>;\n}\n"],"sourceRoot":"../src/"}
|
@@ -1,8 +1,13 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
3
6
|
exports.useCallbackRef = void 0;
|
4
|
-
|
5
|
-
|
7
|
+
|
8
|
+
const React = /*#__PURE__*/require("react");
|
9
|
+
|
10
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
6
11
|
/**
|
7
12
|
* Creates a MutableRef with ref change callback. Is useful as React.useRef() doesn't notify you when its content
|
8
13
|
* changes and mutating the .current property doesn't cause a re-render. An opt-out will be use a callback ref via
|
@@ -20,36 +25,44 @@ var react_utilities_1 = require("@fluentui/react-utilities");
|
|
20
25
|
* ref.current = 1;
|
21
26
|
* // prints 0 -> 1
|
22
27
|
*/
|
28
|
+
|
29
|
+
|
23
30
|
function useCallbackRef(initialValue, callback, skipInitialResolve) {
|
24
|
-
|
25
|
-
|
26
|
-
|
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
|
-
|
31
|
+
const isFirst = React.useRef(true);
|
32
|
+
const [ref] = React.useState(() => ({
|
33
|
+
// value
|
34
|
+
value: initialValue,
|
35
|
+
// last callback
|
36
|
+
callback,
|
37
|
+
// "memoized" public interface
|
38
|
+
facade: {
|
39
|
+
get current() {
|
40
|
+
return ref.value;
|
41
|
+
},
|
42
|
+
|
43
|
+
set current(value) {
|
44
|
+
const last = ref.value;
|
45
|
+
|
46
|
+
if (last !== value) {
|
47
|
+
ref.value = value;
|
48
|
+
|
49
|
+
if (skipInitialResolve && isFirst.current) {
|
50
|
+
return;
|
51
|
+
}
|
52
|
+
|
53
|
+
ref.callback(value, last);
|
54
|
+
}
|
55
|
+
}
|
56
|
+
|
57
|
+
}
|
58
|
+
}));
|
59
|
+
react_utilities_1.useIsomorphicLayoutEffect(() => {
|
60
|
+
isFirst.current = false;
|
61
|
+
}, []); // update callback
|
62
|
+
|
63
|
+
ref.callback = callback;
|
64
|
+
return ref.facade;
|
53
65
|
}
|
66
|
+
|
54
67
|
exports.useCallbackRef = useCallbackRef;
|
55
68
|
//# sourceMappingURL=useCallbackRef.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["utils/useCallbackRef.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;;;;;;;;;;;;;;;AAgBG;;;AACH,SAAgB,cAAhB,CACE,YADF,EAEE,QAFF,EAGE,kBAHF,EAG8B;AAE5B,QAAM,OAAO,GAAG,KAAK,CAAC,MAAN,CAAa,IAAb,CAAhB;AACA,QAAM,CAAC,GAAD,IAAQ,KAAK,CAAC,QAAN,CAAe,OAAO;AAClC;AACA,IAAA,KAAK,EAAE,YAF2B;AAGlC;AACA,IAAA,QAJkC;AAKlC;AACA,IAAA,MAAM,EAAE;AACN,UAAI,OAAJ,GAAW;AACT,eAAO,GAAG,CAAC,KAAX;AACD,OAHK;;AAIN,UAAI,OAAJ,CAAY,KAAZ,EAAiB;AACf,cAAM,IAAI,GAAG,GAAG,CAAC,KAAjB;;AAEA,YAAI,IAAI,KAAK,KAAb,EAAoB;AAClB,UAAA,GAAG,CAAC,KAAJ,GAAY,KAAZ;;AAEA,cAAI,kBAAkB,IAAI,OAAO,CAAC,OAAlC,EAA2C;AACzC;AACD;;AAED,UAAA,GAAG,CAAC,QAAJ,CAAa,KAAb,EAAoB,IAApB;AACD;AACF;;AAhBK;AAN0B,GAAP,CAAf,CAAd;AA0BA,EAAA,iBAAA,CAAA,yBAAA,CAA0B,MAAK;AAC7B,IAAA,OAAO,CAAC,OAAR,GAAkB,KAAlB;AACD,GAFD,EAEG,EAFH,EA7B4B,CAiC5B;;AACA,EAAA,GAAG,CAAC,QAAJ,GAAe,QAAf;AAEA,SAAO,GAAG,CAAC,MAAX;AACD;;AAxCD,OAAA,CAAA,cAAA,GAAA,cAAA","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"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-positioning",
|
3
|
-
"version": "9.0.0-
|
3
|
+
"version": "9.0.0-rc.4",
|
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",
|
@@ -18,11 +18,10 @@
|
|
18
18
|
"code-style": "just-scripts code-style",
|
19
19
|
"just": "just-scripts",
|
20
20
|
"lint": "just-scripts lint",
|
21
|
-
"test": "jest",
|
21
|
+
"test": "jest --passWithNoTests",
|
22
22
|
"docs": "api-extractor run --config=config/api-extractor.local.json --local",
|
23
|
-
"build:local": "tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-positioning/src && yarn docs",
|
24
|
-
"
|
25
|
-
"start": "yarn storybook"
|
23
|
+
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-positioning/src && yarn docs",
|
24
|
+
"type-check": "tsc -b tsconfig.json"
|
26
25
|
},
|
27
26
|
"devDependencies": {
|
28
27
|
"@fluentui/eslint-plugin": "*",
|
@@ -33,8 +32,10 @@
|
|
33
32
|
"react-dom": "16.8.6"
|
34
33
|
},
|
35
34
|
"dependencies": {
|
36
|
-
"@
|
37
|
-
"@fluentui/react-
|
35
|
+
"@griffel/react": "1.0.0",
|
36
|
+
"@fluentui/react-shared-contexts": "9.0.0-rc.3",
|
37
|
+
"@fluentui/react-theme": "9.0.0-rc.3",
|
38
|
+
"@fluentui/react-utilities": "9.0.0-rc.4",
|
38
39
|
"@popperjs/core": "~2.4.3",
|
39
40
|
"tslib": "^2.1.0"
|
40
41
|
},
|
@@ -45,7 +46,6 @@
|
|
45
46
|
"react-dom": ">=16.8.0 <18.0.0"
|
46
47
|
},
|
47
48
|
"beachball": {
|
48
|
-
"tag": "beta",
|
49
49
|
"disallowedChangeTypes": [
|
50
50
|
"major",
|
51
51
|
"minor",
|