@fluentui/react-positioning 0.0.0-nightly9edaf68d4420211116.1 → 0.0.0-nightlya0aef7969220220228.1
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +189 -8
- package/CHANGELOG.md +53 -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 +368 -311
- 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.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 +29 -24
- package/lib/utils/mergeArrowOffset.js.map +1 -1
- package/lib/utils/positioningHelper.d.ts +2 -2
- package/lib/utils/positioningHelper.js +38 -30
- package/lib/utils/positioningHelper.js.map +1 -1
- package/lib/utils/resolvePositioningShorthand.js +57 -19
- 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 +384 -316
- 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.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 +35 -25
- package/lib-commonjs/utils/mergeArrowOffset.js.map +1 -1
- package/lib-commonjs/utils/positioningHelper.d.ts +2 -2
- package/lib-commonjs/utils/positioningHelper.js +46 -31
- package/lib-commonjs/utils/positioningHelper.js.map +1 -1
- package/lib-commonjs/utils/resolvePositioningShorthand.js +65 -22
- 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 -7
@@ -1,41 +1,49 @@
|
|
1
|
-
const getPositionMap =
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
1
|
+
const getPositionMap = rtl => ({
|
2
|
+
above: 'top',
|
3
|
+
below: 'bottom',
|
4
|
+
before: rtl ? 'right' : 'left',
|
5
|
+
after: rtl ? 'left' : 'right'
|
6
6
|
});
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
7
|
+
|
8
|
+
const getAlignmentMap = rtl => ({
|
9
|
+
start: rtl ? 'end' : 'start',
|
10
|
+
end: rtl ? 'start' : 'end',
|
11
|
+
top: 'start',
|
12
|
+
bottom: 'end',
|
13
|
+
center: ''
|
13
14
|
});
|
15
|
+
|
14
16
|
const shouldAlignToCenter = (p, a) => {
|
15
|
-
|
16
|
-
|
17
|
-
|
17
|
+
const positionedVertically = p === 'above' || p === 'below';
|
18
|
+
const alignedVertically = a === 'top' || a === 'bottom';
|
19
|
+
return positionedVertically && alignedVertically || !positionedVertically && !alignedVertically;
|
18
20
|
};
|
19
21
|
/**
|
20
22
|
* @see positioninHelper.test.ts for expected placement values
|
21
23
|
*/
|
24
|
+
|
25
|
+
|
22
26
|
export const getPlacement = (align, position, rtl) => {
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
}
|
29
|
-
|
27
|
+
const alignment = shouldAlignToCenter(position, align) ? 'center' : align;
|
28
|
+
const computedPosition = position && getPositionMap(rtl)[position];
|
29
|
+
const computedAlignmnent = alignment && getAlignmentMap(rtl)[alignment];
|
30
|
+
|
31
|
+
if (computedPosition && computedAlignmnent) {
|
32
|
+
return `${computedPosition}-${computedAlignmnent}`;
|
33
|
+
}
|
34
|
+
|
35
|
+
return computedPosition || 'auto';
|
30
36
|
};
|
31
|
-
export const applyRtlToOffset =
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
37
|
+
export const applyRtlToOffset = offset => {
|
38
|
+
if (typeof offset === 'undefined') {
|
39
|
+
return undefined;
|
40
|
+
}
|
41
|
+
|
42
|
+
if (Array.isArray(offset)) {
|
43
|
+
offset[0] = offset[0] * -1;
|
44
|
+
return offset;
|
45
|
+
}
|
46
|
+
|
47
|
+
return param => applyRtlToOffset(offset(param));
|
40
48
|
};
|
41
49
|
//# 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;;;AACH,OAAO,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;AAaP,OAAO,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,gBAAgB,CAAC,MAAM,CAAC,KAAD,CAAP,CAAxD;AACD,CAZM","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,25 +1,63 @@
|
|
1
1
|
// Look up table for shorthand to avoid parsing strings
|
2
2
|
const shorthandLookup = {
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
3
|
+
above: {
|
4
|
+
position: 'above',
|
5
|
+
align: 'center'
|
6
|
+
},
|
7
|
+
'above-start': {
|
8
|
+
position: 'above',
|
9
|
+
align: 'start'
|
10
|
+
},
|
11
|
+
'above-end': {
|
12
|
+
position: 'above',
|
13
|
+
align: 'end'
|
14
|
+
},
|
15
|
+
below: {
|
16
|
+
position: 'below',
|
17
|
+
align: 'center'
|
18
|
+
},
|
19
|
+
'below-start': {
|
20
|
+
position: 'below',
|
21
|
+
align: 'start'
|
22
|
+
},
|
23
|
+
'below-end': {
|
24
|
+
position: 'below',
|
25
|
+
align: 'end'
|
26
|
+
},
|
27
|
+
before: {
|
28
|
+
position: 'before',
|
29
|
+
align: 'center'
|
30
|
+
},
|
31
|
+
'before-top': {
|
32
|
+
position: 'before',
|
33
|
+
align: 'top'
|
34
|
+
},
|
35
|
+
'before-bottom': {
|
36
|
+
position: 'before',
|
37
|
+
align: 'bottom'
|
38
|
+
},
|
39
|
+
after: {
|
40
|
+
position: 'after',
|
41
|
+
align: 'center'
|
42
|
+
},
|
43
|
+
'after-top': {
|
44
|
+
position: 'after',
|
45
|
+
align: 'top'
|
46
|
+
},
|
47
|
+
'after-bottom': {
|
48
|
+
position: 'after',
|
49
|
+
align: 'bottom'
|
50
|
+
}
|
15
51
|
};
|
16
52
|
export function resolvePositioningShorthand(shorthand) {
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
53
|
+
if (shorthand === undefined || shorthand === null) {
|
54
|
+
return {};
|
55
|
+
}
|
56
|
+
|
57
|
+
if (typeof shorthand === 'string') {
|
58
|
+
return shorthandLookup[shorthand];
|
59
|
+
}
|
60
|
+
|
61
|
+
return shorthand;
|
24
62
|
}
|
25
63
|
//# sourceMappingURL=resolvePositioningShorthand.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["utils/resolvePositioningShorthand.ts"],"names":[],"mappings":"AAEA;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,OAAM,SAAU,2BAAV,CACJ,SADI,EAC8C;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","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/"}
|
@@ -17,35 +17,41 @@ import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
|
|
17
17
|
* ref.current = 1;
|
18
18
|
* // prints 0 -> 1
|
19
19
|
*/
|
20
|
+
|
20
21
|
export function useCallbackRef(initialValue, callback, skipInitialResolve) {
|
21
|
-
|
22
|
-
|
23
|
-
|
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
|
-
|
22
|
+
const isFirst = React.useRef(true);
|
23
|
+
const [ref] = React.useState(() => ({
|
24
|
+
// value
|
25
|
+
value: initialValue,
|
26
|
+
// last callback
|
27
|
+
callback,
|
28
|
+
// "memoized" public interface
|
29
|
+
facade: {
|
30
|
+
get current() {
|
31
|
+
return ref.value;
|
32
|
+
},
|
33
|
+
|
34
|
+
set current(value) {
|
35
|
+
const last = ref.value;
|
36
|
+
|
37
|
+
if (last !== value) {
|
38
|
+
ref.value = value;
|
39
|
+
|
40
|
+
if (skipInitialResolve && isFirst.current) {
|
41
|
+
return;
|
42
|
+
}
|
43
|
+
|
44
|
+
ref.callback(value, last);
|
45
|
+
}
|
46
|
+
}
|
47
|
+
|
48
|
+
}
|
49
|
+
}));
|
50
|
+
useIsomorphicLayoutEffect(() => {
|
51
|
+
isFirst.current = false;
|
52
|
+
}, []); // update callback
|
53
|
+
|
54
|
+
ref.callback = callback;
|
55
|
+
return ref.facade;
|
50
56
|
}
|
51
57
|
//# sourceMappingURL=useCallbackRef.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["utils/useCallbackRef.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,QAA0C,2BAA1C;AAEA;;;;;;;;;;;;;;;;AAgBG;;AACH,OAAM,SAAU,cAAV,CACJ,YADI,EAEJ,QAFI,EAGJ,kBAHI,EAGwB;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,yBAAyB,CAAC,MAAK;AAC7B,IAAA,OAAO,CAAC,OAAR,GAAkB,KAAlB;AACD,GAFwB,EAEtB,EAFsB,CAAzB,CA7B4B,CAiC5B;;AACA,EAAA,GAAG,CAAC,QAAJ,GAAe,QAAf;AAEA,SAAO,GAAG,CAAC,MAAX;AACD","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/"}
|
@@ -0,0 +1,64 @@
|
|
1
|
+
import type { GriffelStyle } from '@griffel/react';
|
2
|
+
/**
|
3
|
+
* Options parameter for the createArrowStyles function
|
4
|
+
*/
|
5
|
+
export declare type CreateArrowStylesOptions = {
|
6
|
+
/**
|
7
|
+
* The height of the arrow from the base to the tip, in px. The base width of the arrow is always twice its height.
|
8
|
+
*
|
9
|
+
* This can be undefined to leave out the arrow size styles. You must then add styles created by
|
10
|
+
* createArrowHeightStyles to set the arrow's size correctly. This can be useful if the arrow can be different sizes.
|
11
|
+
*/
|
12
|
+
arrowHeight: number | undefined;
|
13
|
+
/**
|
14
|
+
* The borderWidth of the arrow. Should be the same borderWidth as the parent element.
|
15
|
+
*
|
16
|
+
* @defaultvalue 1px
|
17
|
+
*/
|
18
|
+
borderWidth?: GriffelStyle['borderBottomWidth'];
|
19
|
+
/**
|
20
|
+
* The borderStyle for the arrow. Should be the same borderStyle as the parent element.
|
21
|
+
*
|
22
|
+
* @defaultvalue solid
|
23
|
+
*/
|
24
|
+
borderStyle?: GriffelStyle['borderBottomStyle'];
|
25
|
+
/**
|
26
|
+
* The borderColor of the arrow. Should be the same borderColor as the parent element.
|
27
|
+
*
|
28
|
+
* @defaultvalue tokens.colorTransparentStroke
|
29
|
+
*/
|
30
|
+
borderColor?: GriffelStyle['borderBottomColor'];
|
31
|
+
};
|
32
|
+
/**
|
33
|
+
* Helper that creates a makeStyles rule for an arrow element.
|
34
|
+
* For runtime arrow size toggling simply create extra classnames to apply to the arrow element
|
35
|
+
*
|
36
|
+
* ```ts
|
37
|
+
* makeStyles({
|
38
|
+
* arrowWithSize: createArrowStyles({ arrowHeight: 6 }),
|
39
|
+
*
|
40
|
+
* arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),
|
41
|
+
* mediumArrow: createArrowHeightStyles(4),
|
42
|
+
* smallArrow: createArrowHeightStyles(2),
|
43
|
+
* })
|
44
|
+
* ...
|
45
|
+
*
|
46
|
+
* state.arrowWithSize.className = styles.arrowWithSize;
|
47
|
+
* state.arrowWithoutSize.className = mergeClasses(
|
48
|
+
* styles.arrowWithoutSize,
|
49
|
+
* state.smallArrow && styles.smallArrow,
|
50
|
+
* state.mediumArrow && styles.mediumArrow,
|
51
|
+
* )
|
52
|
+
* ```
|
53
|
+
*/
|
54
|
+
export declare function createArrowStyles(options: CreateArrowStylesOptions): GriffelStyle;
|
55
|
+
/**
|
56
|
+
* Creates CSS styles to size the arrow created by createArrowStyles to the given height.
|
57
|
+
*
|
58
|
+
* Use this when you need to create classes for several different arrow sizes. If you only need a
|
59
|
+
* constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.
|
60
|
+
*/
|
61
|
+
export declare function createArrowHeightStyles(arrowHeight: number): {
|
62
|
+
width: string;
|
63
|
+
height: string;
|
64
|
+
};
|
@@ -0,0 +1,100 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.createArrowHeightStyles = exports.createArrowStyles = void 0;
|
7
|
+
|
8
|
+
const react_1 = /*#__PURE__*/require("@griffel/react");
|
9
|
+
|
10
|
+
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
11
|
+
/**
|
12
|
+
* Helper that creates a makeStyles rule for an arrow element.
|
13
|
+
* For runtime arrow size toggling simply create extra classnames to apply to the arrow element
|
14
|
+
*
|
15
|
+
* ```ts
|
16
|
+
* makeStyles({
|
17
|
+
* arrowWithSize: createArrowStyles({ arrowHeight: 6 }),
|
18
|
+
*
|
19
|
+
* arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),
|
20
|
+
* mediumArrow: createArrowHeightStyles(4),
|
21
|
+
* smallArrow: createArrowHeightStyles(2),
|
22
|
+
* })
|
23
|
+
* ...
|
24
|
+
*
|
25
|
+
* state.arrowWithSize.className = styles.arrowWithSize;
|
26
|
+
* state.arrowWithoutSize.className = mergeClasses(
|
27
|
+
* styles.arrowWithoutSize,
|
28
|
+
* state.smallArrow && styles.smallArrow,
|
29
|
+
* state.mediumArrow && styles.mediumArrow,
|
30
|
+
* )
|
31
|
+
* ```
|
32
|
+
*/
|
33
|
+
|
34
|
+
|
35
|
+
function createArrowStyles(options) {
|
36
|
+
const {
|
37
|
+
arrowHeight,
|
38
|
+
borderWidth = '1px',
|
39
|
+
borderStyle = 'solid',
|
40
|
+
borderColor = react_theme_1.tokens.colorTransparentStroke
|
41
|
+
} = options;
|
42
|
+
return {
|
43
|
+
position: 'absolute',
|
44
|
+
backgroundColor: 'inherit',
|
45
|
+
visibility: 'hidden',
|
46
|
+
zIndex: -1,
|
47
|
+
...(arrowHeight && createArrowHeightStyles(arrowHeight)),
|
48
|
+
':before': {
|
49
|
+
content: '""',
|
50
|
+
visibility: 'visible',
|
51
|
+
position: 'absolute',
|
52
|
+
boxSizing: 'border-box',
|
53
|
+
width: 'inherit',
|
54
|
+
height: 'inherit',
|
55
|
+
backgroundColor: 'inherit',
|
56
|
+
...react_1.shorthands.borderRight(`${borderWidth} /* @noflip */`, `${borderStyle} /* @noflip */`, `${borderColor} /* @noflip */`),
|
57
|
+
...react_1.shorthands.borderBottom(borderWidth, borderStyle, borderColor),
|
58
|
+
borderBottomRightRadius: react_theme_1.tokens.borderRadiusSmall,
|
59
|
+
transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)'
|
60
|
+
},
|
61
|
+
// Popper sets data-popper-placement on the root element, which is used to align the arrow
|
62
|
+
':global([data-popper-placement^="top"])': {
|
63
|
+
bottom: `-${borderWidth}`,
|
64
|
+
'--angle': '0'
|
65
|
+
},
|
66
|
+
':global([data-popper-placement^="right"])': {
|
67
|
+
left: `-${borderWidth} /* @noflip */`,
|
68
|
+
'--angle': '90deg'
|
69
|
+
},
|
70
|
+
':global([data-popper-placement^="bottom"])': {
|
71
|
+
top: `-${borderWidth}`,
|
72
|
+
'--angle': '180deg'
|
73
|
+
},
|
74
|
+
':global([data-popper-placement^="left"])': {
|
75
|
+
right: `-${borderWidth} /* @noflip */`,
|
76
|
+
'--angle': '270deg'
|
77
|
+
}
|
78
|
+
};
|
79
|
+
}
|
80
|
+
|
81
|
+
exports.createArrowStyles = createArrowStyles;
|
82
|
+
/**
|
83
|
+
* Creates CSS styles to size the arrow created by createArrowStyles to the given height.
|
84
|
+
*
|
85
|
+
* Use this when you need to create classes for several different arrow sizes. If you only need a
|
86
|
+
* constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.
|
87
|
+
*/
|
88
|
+
|
89
|
+
function createArrowHeightStyles(arrowHeight) {
|
90
|
+
// The arrow is a square rotated 45 degrees to have its bottom and right edges form a right triangle.
|
91
|
+
// Multiply the triangle's height by sqrt(2) to get length of its edges.
|
92
|
+
const edgeLength = `${1.414 * arrowHeight}px`;
|
93
|
+
return {
|
94
|
+
width: edgeLength,
|
95
|
+
height: edgeLength
|
96
|
+
};
|
97
|
+
}
|
98
|
+
|
99
|
+
exports.createArrowHeightStyles = createArrowHeightStyles;
|
100
|
+
//# sourceMappingURL=createArrowStyles.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["createArrowStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAqCA;;;;;;;;;;;;;;;;;;;;;AAqBG;;;AACH,SAAgB,iBAAhB,CAAkC,OAAlC,EAAmE;AACjE,QAAM;AACJ,IAAA,WADI;AAEJ,IAAA,WAAW,GAAG,KAFV;AAGJ,IAAA,WAAW,GAAG,OAHV;AAIJ,IAAA,WAAW,GAAG,aAAA,CAAA,MAAA,CAAO;AAJjB,MAKF,OALJ;AAOA,SAAO;AACL,IAAA,QAAQ,EAAE,UADL;AAEL,IAAA,eAAe,EAAE,SAFZ;AAGL,IAAA,UAAU,EAAE,QAHP;AAIL,IAAA,MAAM,EAAE,CAAC,CAJJ;AAML,QAAI,WAAW,IAAI,uBAAuB,CAAC,WAAD,CAA1C,CANK;AAQL,eAAW;AACT,MAAA,OAAO,EAAE,IADA;AAET,MAAA,UAAU,EAAE,SAFH;AAGT,MAAA,QAAQ,EAAE,UAHD;AAIT,MAAA,SAAS,EAAE,YAJF;AAKT,MAAA,KAAK,EAAE,SALE;AAMT,MAAA,MAAM,EAAE,SANC;AAOT,MAAA,eAAe,EAAE,SAPR;AAQT,SAAG,OAAA,CAAA,UAAA,CAAW,WAAX,CACD,GAAG,WAAW,gBADb,EAED,GAAG,WAAW,gBAFb,EAGD,GAAG,WAAW,gBAHb,CARM;AAaT,SAAG,OAAA,CAAA,UAAA,CAAW,YAAX,CAAwB,WAAxB,EAAqC,WAArC,EAAkD,WAAlD,CAbM;AAcT,MAAA,uBAAuB,EAAE,aAAA,CAAA,MAAA,CAAO,iBAdvB;AAeT,MAAA,SAAS,EAAE;AAfF,KARN;AA0BL;AACA,+CAA2C;AACzC,MAAA,MAAM,EAAE,IAAI,WAAW,EADkB;AAEzC,iBAAW;AAF8B,KA3BtC;AA+BL,iDAA6C;AAC3C,MAAA,IAAI,EAAE,IAAI,WAAW,gBADsB;AAE3C,iBAAW;AAFgC,KA/BxC;AAmCL,kDAA8C;AAC5C,MAAA,GAAG,EAAE,IAAI,WAAW,EADwB;AAE5C,iBAAW;AAFiC,KAnCzC;AAuCL,gDAA4C;AAC1C,MAAA,KAAK,EAAE,IAAI,WAAW,gBADoB;AAE1C,iBAAW;AAF+B;AAvCvC,GAAP;AA4CD;;AApDD,OAAA,CAAA,iBAAA,GAAA,iBAAA;AAsDA;;;;;AAKG;;AACH,SAAgB,uBAAhB,CAAwC,WAAxC,EAA2D;AACzD;AACA;AACA,QAAM,UAAU,GAAG,GAAG,QAAQ,WAAW,IAAzC;AACA,SAAO;AAAE,IAAA,KAAK,EAAE,UAAT;AAAqB,IAAA,MAAM,EAAE;AAA7B,GAAP;AACD;;AALD,OAAA,CAAA,uBAAA,GAAA,uBAAA","sourcesContent":["import { shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { GriffelStyle } from '@griffel/react';\n\n/**\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 * 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 * 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"],"sourceRoot":"../src/"}
|
@@ -1,28 +1,35 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
3
6
|
exports.createVirtualElementFromClick = void 0;
|
4
7
|
/**
|
5
8
|
* Creates a virtual element based on the position of a click event
|
6
9
|
* Can be used as a target for popper in scenarios such as context menus
|
7
10
|
*/
|
11
|
+
|
8
12
|
function createVirtualElementFromClick(nativeEvent) {
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
left,
|
16
|
-
top,
|
17
|
-
right,
|
18
|
-
bottom,
|
19
|
-
height: 1,
|
20
|
-
width: 1,
|
21
|
-
};
|
22
|
-
}
|
13
|
+
const left = nativeEvent.clientX;
|
14
|
+
const top = nativeEvent.clientY;
|
15
|
+
const right = left + 1;
|
16
|
+
const bottom = top + 1;
|
17
|
+
|
18
|
+
function getBoundingClientRect() {
|
23
19
|
return {
|
24
|
-
|
20
|
+
left,
|
21
|
+
top,
|
22
|
+
right,
|
23
|
+
bottom,
|
24
|
+
height: 1,
|
25
|
+
width: 1
|
25
26
|
};
|
27
|
+
}
|
28
|
+
|
29
|
+
return {
|
30
|
+
getBoundingClientRect
|
31
|
+
};
|
26
32
|
}
|
33
|
+
|
27
34
|
exports.createVirtualElementFromClick = createVirtualElementFromClick;
|
28
35
|
//# sourceMappingURL=createVirtualElementFromClick.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["createVirtualElementFromClick.ts"],"names":[],"mappings":";;;;;;AAEA;;;AAGG;;AACH,SAAgB,6BAAhB,CAA8C,WAA9C,EAAqE;AACnE,QAAM,IAAI,GAAG,WAAW,CAAC,OAAzB;AACA,QAAM,GAAG,GAAG,WAAW,CAAC,OAAxB;AACA,QAAM,KAAK,GAAG,IAAI,GAAG,CAArB;AACA,QAAM,MAAM,GAAG,GAAG,GAAG,CAArB;;AAEA,WAAS,qBAAT,GAA8B;AAC5B,WAAO;AACL,MAAA,IADK;AAEL,MAAA,GAFK;AAGL,MAAA,KAHK;AAIL,MAAA,MAJK;AAML,MAAA,MAAM,EAAE,CANH;AAOL,MAAA,KAAK,EAAE;AAPF,KAAP;AASD;;AAED,SAAO;AACL,IAAA;AADK,GAAP;AAGD;;AArBD,OAAA,CAAA,6BAAA,GAAA,6BAAA","sourcesContent":["import type { PopperVirtualElement } 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): PopperVirtualElement {\n const left = nativeEvent.clientX;\n const top = nativeEvent.clientY;\n const right = left + 1;\n const bottom = top + 1;\n\n function getBoundingClientRect(): ClientRect {\n return {\n left,\n top,\n right,\n bottom,\n\n height: 1,\n width: 1,\n };\n }\n\n return {\n getBoundingClientRect,\n };\n}\n"],"sourceRoot":"../src/"}
|
package/lib-commonjs/index.d.ts
CHANGED
@@ -1,5 +1,6 @@
|
|
1
|
-
export * from './usePopper';
|
2
1
|
export * from './createVirtualElementFromClick';
|
2
|
+
export * from './createArrowStyles';
|
3
|
+
export * from './usePopper';
|
3
4
|
export * from './usePopperMouseTarget';
|
4
5
|
export { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';
|
5
6
|
export * from './types';
|
package/lib-commonjs/index.js
CHANGED
@@ -1,12 +1,34 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
3
6
|
exports.mergeArrowOffset = exports.resolvePositioningShorthand = void 0;
|
4
|
-
|
5
|
-
tslib_1
|
7
|
+
|
8
|
+
const tslib_1 = /*#__PURE__*/require("tslib");
|
9
|
+
|
6
10
|
tslib_1.__exportStar(require("./createVirtualElementFromClick"), exports);
|
11
|
+
|
12
|
+
tslib_1.__exportStar(require("./createArrowStyles"), exports);
|
13
|
+
|
14
|
+
tslib_1.__exportStar(require("./usePopper"), exports);
|
15
|
+
|
7
16
|
tslib_1.__exportStar(require("./usePopperMouseTarget"), exports);
|
8
|
-
|
9
|
-
|
10
|
-
|
17
|
+
|
18
|
+
var index_1 = /*#__PURE__*/require("./utils/index");
|
19
|
+
|
20
|
+
Object.defineProperty(exports, "resolvePositioningShorthand", {
|
21
|
+
enumerable: true,
|
22
|
+
get: function () {
|
23
|
+
return index_1.resolvePositioningShorthand;
|
24
|
+
}
|
25
|
+
});
|
26
|
+
Object.defineProperty(exports, "mergeArrowOffset", {
|
27
|
+
enumerable: true,
|
28
|
+
get: function () {
|
29
|
+
return index_1.mergeArrowOffset;
|
30
|
+
}
|
31
|
+
});
|
32
|
+
|
11
33
|
tslib_1.__exportStar(require("./types"), exports);
|
12
34
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iCAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,IAAA,OAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,6BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,2BAAA;AAA2B;AAA3B,CAAA;AAA6B,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,gBAAA;AAAgB;AAAhB,CAAA;;AACtC,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './createVirtualElementFromClick';\nexport * from './createArrowStyles';\nexport * from './usePopper';\nexport * from './usePopperMouseTarget';\nexport { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';\nexport * from './types';\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1,34 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.isIntersectingModifier = void 0;
|
7
|
+
|
8
|
+
const core_1 = /*#__PURE__*/require("@popperjs/core");
|
9
|
+
|
10
|
+
exports.isIntersectingModifier = {
|
11
|
+
name: 'is-intersecting-modifier',
|
12
|
+
enabled: true,
|
13
|
+
phase: 'main',
|
14
|
+
requires: ['preventOverflow'],
|
15
|
+
fn: ({
|
16
|
+
state,
|
17
|
+
name
|
18
|
+
}) => {
|
19
|
+
const popperRect = state.rects.popper;
|
20
|
+
const popperAltOverflow = core_1.detectOverflow(state, {
|
21
|
+
altBoundary: true
|
22
|
+
});
|
23
|
+
const isIntersectingTop = popperAltOverflow.top < popperRect.height && popperAltOverflow.top > 0;
|
24
|
+
const isIntersectingBottom = popperAltOverflow.bottom < popperRect.height && popperAltOverflow.bottom > 0;
|
25
|
+
const isIntersecting = isIntersectingTop || isIntersectingBottom;
|
26
|
+
state.modifiersData[name] = {
|
27
|
+
isIntersecting
|
28
|
+
};
|
29
|
+
state.attributes.popper = { ...state.attributes.popper,
|
30
|
+
'data-popper-is-intersecting': isIntersecting
|
31
|
+
};
|
32
|
+
}
|
33
|
+
};
|
34
|
+
//# sourceMappingURL=isIntersectingModifier.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["isIntersectingModifier.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,MAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAEa,OAAA,CAAA,sBAAA,GAAiD;AAC5D,EAAA,IAAI,EAAE,0BADsD;AAE5D,EAAA,OAAO,EAAE,IAFmD;AAG5D,EAAA,KAAK,EAAE,MAHqD;AAI5D,EAAA,QAAQ,EAAE,CAAC,iBAAD,CAJkD;AAK5D,EAAA,EAAE,EAAE,CAAC;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,GAAD,KAAoB;AACtB,UAAM,UAAU,GAAG,KAAK,CAAC,KAAN,CAAY,MAA/B;AACA,UAAM,iBAAiB,GAAG,MAAA,CAAA,cAAA,CAAe,KAAf,EAAsB;AAAE,MAAA,WAAW,EAAE;AAAf,KAAtB,CAA1B;AAEA,UAAM,iBAAiB,GAAG,iBAAiB,CAAC,GAAlB,GAAwB,UAAU,CAAC,MAAnC,IAA6C,iBAAiB,CAAC,GAAlB,GAAwB,CAA/F;AACA,UAAM,oBAAoB,GAAG,iBAAiB,CAAC,MAAlB,GAA2B,UAAU,CAAC,MAAtC,IAAgD,iBAAiB,CAAC,MAAlB,GAA2B,CAAxG;AAEA,UAAM,cAAc,GAAG,iBAAiB,IAAI,oBAA5C;AAEA,IAAA,KAAK,CAAC,aAAN,CAAoB,IAApB,IAA4B;AAC1B,MAAA;AAD0B,KAA5B;AAGA,IAAA,KAAK,CAAC,UAAN,CAAiB,MAAjB,GAA0B,EACxB,GAAG,KAAK,CAAC,UAAN,CAAiB,MADI;AAExB,qCAA+B;AAFP,KAA1B;AAID;AArB2D,CAAjD","sourcesContent":["import { detectOverflow, Modifier } from '@popperjs/core';\n\nexport const isIntersectingModifier: IsIntersectingModifier = {\n name: 'is-intersecting-modifier',\n enabled: true,\n phase: 'main',\n requires: ['preventOverflow'],\n fn: ({ state, name }) => {\n const popperRect = state.rects.popper;\n const popperAltOverflow = detectOverflow(state, { altBoundary: true });\n\n const isIntersectingTop = popperAltOverflow.top < popperRect.height && popperAltOverflow.top > 0;\n const isIntersectingBottom = popperAltOverflow.bottom < popperRect.height && popperAltOverflow.bottom > 0;\n\n const isIntersecting = isIntersectingTop || isIntersectingBottom;\n\n state.modifiersData[name] = {\n isIntersecting,\n };\n state.attributes.popper = {\n ...state.attributes.popper,\n 'data-popper-is-intersecting': isIntersecting,\n };\n },\n};\n\ntype IsIntersectingModifier = Modifier<'is-intersecting-modifier', never>;\n"],"sourceRoot":"../src/"}
|