@fluentui/react-positioning 9.5.14 → 9.6.0
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +30 -1
- package/CHANGELOG.md +16 -2
- package/dist/index.d.ts +6 -1
- package/lib/constants.js +0 -1
- package/lib/constants.js.map +1 -1
- package/lib/createArrowStyles.js +47 -55
- package/lib/createArrowStyles.js.map +1 -1
- package/lib/createPositionManager.js +95 -108
- package/lib/createPositionManager.js.map +1 -1
- package/lib/createVirtualElementFromClick.js +18 -19
- package/lib/createVirtualElementFromClick.js.map +1 -1
- package/lib/index.js +0 -1
- package/lib/index.js.map +1 -1
- package/lib/middleware/coverTarget.js +26 -32
- package/lib/middleware/coverTarget.js.map +1 -1
- package/lib/middleware/flip.js +22 -32
- package/lib/middleware/flip.js.map +1 -1
- package/lib/middleware/index.js +0 -1
- package/lib/middleware/index.js.map +1 -1
- package/lib/middleware/intersecting.js +16 -17
- package/lib/middleware/intersecting.js.map +1 -1
- package/lib/middleware/maxSize.js +25 -34
- package/lib/middleware/maxSize.js.map +1 -1
- package/lib/middleware/offset.js +3 -5
- package/lib/middleware/offset.js.map +1 -1
- package/lib/middleware/shift.js +21 -30
- package/lib/middleware/shift.js.map +1 -1
- package/lib/types.js +0 -1
- package/lib/types.js.map +1 -1
- package/lib/usePositioning.js +188 -154
- package/lib/usePositioning.js.map +1 -1
- package/lib/usePositioningMouseTarget.js +24 -23
- package/lib/usePositioningMouseTarget.js.map +1 -1
- package/lib/utils/debounce.js +13 -14
- package/lib/utils/debounce.js.map +1 -1
- package/lib/utils/fromFloatingUIPlacement.js +23 -28
- package/lib/utils/fromFloatingUIPlacement.js.map +1 -1
- package/lib/utils/getBoundary.js +14 -16
- package/lib/utils/getBoundary.js.map +1 -1
- package/lib/utils/getFloatingUIOffset.js +16 -27
- package/lib/utils/getFloatingUIOffset.js.map +1 -1
- package/lib/utils/getReactFiberFromNode.js +36 -37
- package/lib/utils/getReactFiberFromNode.js.map +1 -1
- package/lib/utils/getScrollParent.js +35 -42
- package/lib/utils/getScrollParent.js.map +1 -1
- package/lib/utils/hasAutoFocusFilter.js +9 -11
- package/lib/utils/hasAutoFocusFilter.js.map +1 -1
- package/lib/utils/index.js +0 -1
- package/lib/utils/index.js.map +1 -1
- package/lib/utils/mergeArrowOffset.js +24 -25
- package/lib/utils/mergeArrowOffset.js.map +1 -1
- package/lib/utils/parseFloatingUIPlacement.js +6 -7
- package/lib/utils/parseFloatingUIPlacement.js.map +1 -1
- package/lib/utils/resolvePositioningShorthand.js +55 -56
- package/lib/utils/resolvePositioningShorthand.js.map +1 -1
- package/lib/utils/toFloatingUIPadding.js +16 -21
- package/lib/utils/toFloatingUIPadding.js.map +1 -1
- package/lib/utils/toFloatingUIPlacement.js +25 -27
- package/lib/utils/toFloatingUIPlacement.js.map +1 -1
- package/lib/utils/toggleScrollListener.js +12 -14
- package/lib/utils/toggleScrollListener.js.map +1 -1
- package/lib/utils/useCallbackRef.js +30 -32
- package/lib/utils/useCallbackRef.js.map +1 -1
- package/lib/utils/writeArrowUpdates.js +10 -17
- package/lib/utils/writeArrowUpdates.js.map +1 -1
- package/lib/utils/writeContainerupdates.js +39 -39
- package/lib/utils/writeContainerupdates.js.map +1 -1
- package/lib-commonjs/constants.js +1 -3
- package/lib-commonjs/constants.js.map +1 -1
- package/lib-commonjs/createArrowStyles.js +1 -3
- package/lib-commonjs/createArrowStyles.js.map +1 -1
- package/lib-commonjs/createPositionManager.js +4 -5
- package/lib-commonjs/createPositionManager.js.map +1 -1
- package/lib-commonjs/createVirtualElementFromClick.js +1 -3
- package/lib-commonjs/createVirtualElementFromClick.js.map +1 -1
- package/lib-commonjs/index.js +0 -3
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/middleware/coverTarget.js +1 -3
- package/lib-commonjs/middleware/coverTarget.js.map +1 -1
- package/lib-commonjs/middleware/flip.js +1 -3
- package/lib-commonjs/middleware/flip.js.map +1 -1
- package/lib-commonjs/middleware/index.js +0 -3
- package/lib-commonjs/middleware/index.js.map +1 -1
- package/lib-commonjs/middleware/intersecting.js +1 -3
- package/lib-commonjs/middleware/intersecting.js.map +1 -1
- package/lib-commonjs/middleware/maxSize.js +1 -3
- package/lib-commonjs/middleware/maxSize.js.map +1 -1
- package/lib-commonjs/middleware/offset.js +1 -3
- package/lib-commonjs/middleware/offset.js.map +1 -1
- package/lib-commonjs/middleware/shift.js +1 -3
- package/lib-commonjs/middleware/shift.js.map +1 -1
- package/lib-commonjs/types.js +0 -3
- package/lib-commonjs/types.js.map +1 -1
- package/lib-commonjs/usePositioning.js +6 -6
- package/lib-commonjs/usePositioning.js.map +1 -1
- package/lib-commonjs/usePositioningMouseTarget.js +1 -3
- package/lib-commonjs/usePositioningMouseTarget.js.map +1 -1
- package/lib-commonjs/utils/debounce.js +1 -3
- package/lib-commonjs/utils/debounce.js.map +1 -1
- package/lib-commonjs/utils/fromFloatingUIPlacement.js +1 -3
- package/lib-commonjs/utils/fromFloatingUIPlacement.js.map +1 -1
- package/lib-commonjs/utils/getBoundary.js +1 -3
- package/lib-commonjs/utils/getBoundary.js.map +1 -1
- package/lib-commonjs/utils/getFloatingUIOffset.js +1 -3
- package/lib-commonjs/utils/getFloatingUIOffset.js.map +1 -1
- package/lib-commonjs/utils/getReactFiberFromNode.js +1 -3
- package/lib-commonjs/utils/getReactFiberFromNode.js.map +1 -1
- package/lib-commonjs/utils/getScrollParent.js +1 -3
- package/lib-commonjs/utils/getScrollParent.js.map +1 -1
- package/lib-commonjs/utils/hasAutoFocusFilter.js +1 -3
- package/lib-commonjs/utils/hasAutoFocusFilter.js.map +1 -1
- package/lib-commonjs/utils/index.js +0 -3
- package/lib-commonjs/utils/index.js.map +1 -1
- package/lib-commonjs/utils/mergeArrowOffset.js +1 -3
- package/lib-commonjs/utils/mergeArrowOffset.js.map +1 -1
- package/lib-commonjs/utils/parseFloatingUIPlacement.js +1 -3
- package/lib-commonjs/utils/parseFloatingUIPlacement.js.map +1 -1
- package/lib-commonjs/utils/resolvePositioningShorthand.js +1 -3
- package/lib-commonjs/utils/resolvePositioningShorthand.js.map +1 -1
- package/lib-commonjs/utils/toFloatingUIPadding.js +1 -3
- package/lib-commonjs/utils/toFloatingUIPadding.js.map +1 -1
- package/lib-commonjs/utils/toFloatingUIPlacement.js +1 -3
- package/lib-commonjs/utils/toFloatingUIPlacement.js.map +1 -1
- package/lib-commonjs/utils/toggleScrollListener.js +1 -3
- package/lib-commonjs/utils/toggleScrollListener.js.map +1 -1
- package/lib-commonjs/utils/useCallbackRef.js +1 -3
- package/lib-commonjs/utils/useCallbackRef.js.map +1 -1
- package/lib-commonjs/utils/writeArrowUpdates.js +1 -3
- package/lib-commonjs/utils/writeArrowUpdates.js.map +1 -1
- package/lib-commonjs/utils/writeContainerupdates.js +12 -5
- package/lib-commonjs/utils/writeContainerupdates.js.map +1 -1
- package/package.json +3 -3
@@ -1,35 +1,29 @@
|
|
1
1
|
import { parseFloatingUIPlacement } from '../utils/index';
|
2
2
|
export function coverTarget() {
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
break;
|
30
|
-
}
|
31
|
-
return newCoords;
|
32
|
-
}
|
33
|
-
};
|
3
|
+
return {
|
4
|
+
name: 'coverTarget',
|
5
|
+
fn: (middlewareArguments)=>{
|
6
|
+
const { placement , rects , x , y } = middlewareArguments;
|
7
|
+
const basePlacement = parseFloatingUIPlacement(placement).side;
|
8
|
+
const newCoords = {
|
9
|
+
x,
|
10
|
+
y
|
11
|
+
};
|
12
|
+
switch(basePlacement){
|
13
|
+
case 'bottom':
|
14
|
+
newCoords.y -= rects.reference.height;
|
15
|
+
break;
|
16
|
+
case 'top':
|
17
|
+
newCoords.y += rects.reference.height;
|
18
|
+
break;
|
19
|
+
case 'left':
|
20
|
+
newCoords.x += rects.reference.width;
|
21
|
+
break;
|
22
|
+
case 'right':
|
23
|
+
newCoords.x -= rects.reference.width;
|
24
|
+
break;
|
25
|
+
}
|
26
|
+
return newCoords;
|
27
|
+
}
|
28
|
+
};
|
34
29
|
}
|
35
|
-
//# sourceMappingURL=coverTarget.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["coverTarget.ts"],"sourcesContent":["import type { Middleware } from '@floating-ui/dom';\nimport { parseFloatingUIPlacement } from '../utils/index';\n\nexport function coverTarget(): Middleware {\n return {\n name: 'coverTarget',\n fn: middlewareArguments => {\n const { placement, rects, x, y } = middlewareArguments;\n const basePlacement = parseFloatingUIPlacement(placement).side;\n const newCoords = { x, y };\n\n switch (basePlacement) {\n case 'bottom':\n newCoords.y -= rects.reference.height;\n break;\n case 'top':\n newCoords.y += rects.reference.height;\n break;\n case 'left':\n newCoords.x += rects.reference.width;\n break;\n case 'right':\n newCoords.x -= rects.reference.width;\n break;\n }\n\n return newCoords;\n },\n };\n}\n"],"names":["parseFloatingUIPlacement","coverTarget","name","fn","middlewareArguments","placement","rects","x","y","basePlacement","side","newCoords","reference","height","width"],"mappings":"AACA,SAASA,wBAAwB,QAAQ,iBAAiB;AAE1D,OAAO,SAASC,cAA0B;IACxC,OAAO;QACLC,MAAM;QACNC,IAAIC,CAAAA,sBAAuB;YACzB,MAAM,EAAEC,UAAS,EAAEC,MAAK,EAAEC,EAAC,EAAEC,EAAC,EAAE,GAAGJ;YACnC,MAAMK,gBAAgBT,yBAAyBK,WAAWK,IAAI;YAC9D,MAAMC,YAAY;gBAAEJ;gBAAGC;YAAE;YAEzB,OAAQC;gBACN,KAAK;oBACHE,UAAUH,CAAC,IAAIF,MAAMM,SAAS,CAACC,MAAM;oBACrC,KAAM;gBACR,KAAK;oBACHF,UAAUH,CAAC,IAAIF,MAAMM,SAAS,CAACC,MAAM;oBACrC,KAAM;gBACR,KAAK;oBACHF,UAAUJ,CAAC,IAAID,MAAMM,SAAS,CAACE,KAAK;oBACpC,KAAM;gBACR,KAAK;oBACHH,UAAUJ,CAAC,IAAID,MAAMM,SAAS,CAACE,KAAK;oBACpC,KAAM;YACV;YAEA,OAAOH;QACT;IACF;AACF,CAAC"}
|
package/lib/middleware/flip.js
CHANGED
@@ -1,36 +1,26 @@
|
|
1
1
|
import { flip as baseFlip } from '@floating-ui/dom';
|
2
2
|
import { getBoundary, resolvePositioningShorthand, toFloatingUIPlacement } from '../utils/index';
|
3
3
|
export function flip(options) {
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
})
|
26
|
-
...(flipBoundary && {
|
27
|
-
altBoundary: true,
|
28
|
-
boundary: getBoundary(container, flipBoundary)
|
29
|
-
}),
|
30
|
-
fallbackStrategy: 'bestFit',
|
31
|
-
...(fallbackPlacements.length && {
|
32
|
-
fallbackPlacements
|
33
|
-
})
|
34
|
-
});
|
4
|
+
const { hasScrollableElement , flipBoundary , container , fallbackPositions =[] , isRtl } = options;
|
5
|
+
const fallbackPlacements = fallbackPositions.reduce((acc, shorthand)=>{
|
6
|
+
const { position , align } = resolvePositioningShorthand(shorthand);
|
7
|
+
const placement = toFloatingUIPlacement(align, position, isRtl);
|
8
|
+
if (placement) {
|
9
|
+
acc.push(placement);
|
10
|
+
}
|
11
|
+
return acc;
|
12
|
+
}, []);
|
13
|
+
return baseFlip({
|
14
|
+
...hasScrollableElement && {
|
15
|
+
boundary: 'clippingAncestors'
|
16
|
+
},
|
17
|
+
...flipBoundary && {
|
18
|
+
altBoundary: true,
|
19
|
+
boundary: getBoundary(container, flipBoundary)
|
20
|
+
},
|
21
|
+
fallbackStrategy: 'bestFit',
|
22
|
+
...fallbackPlacements.length && {
|
23
|
+
fallbackPlacements
|
24
|
+
}
|
25
|
+
});
|
35
26
|
}
|
36
|
-
//# sourceMappingURL=flip.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["flip.ts"],"sourcesContent":["import { flip as baseFlip, Placement } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\nimport { getBoundary, resolvePositioningShorthand, toFloatingUIPlacement } from '../utils/index';\n\nexport interface FlipMiddlewareOptions extends Pick<PositioningOptions, 'flipBoundary' | 'fallbackPositions'> {\n hasScrollableElement?: boolean;\n container: HTMLElement | null;\n isRtl?: boolean;\n}\n\nexport function flip(options: FlipMiddlewareOptions) {\n const { hasScrollableElement, flipBoundary, container, fallbackPositions = [], isRtl } = options;\n\n const fallbackPlacements = fallbackPositions.reduce<Placement[]>((acc, shorthand) => {\n const { position, align } = resolvePositioningShorthand(shorthand);\n const placement = toFloatingUIPlacement(align, position, isRtl);\n if (placement) {\n acc.push(placement);\n }\n return acc;\n }, []);\n\n return baseFlip({\n ...(hasScrollableElement && { boundary: 'clippingAncestors' }),\n ...(flipBoundary && { altBoundary: true, boundary: getBoundary(container, flipBoundary) }),\n fallbackStrategy: 'bestFit',\n ...(fallbackPlacements.length && { fallbackPlacements }),\n });\n}\n"],"names":["flip","baseFlip","getBoundary","resolvePositioningShorthand","toFloatingUIPlacement","options","hasScrollableElement","flipBoundary","container","fallbackPositions","isRtl","fallbackPlacements","reduce","acc","shorthand","position","align","placement","push","boundary","altBoundary","fallbackStrategy","length"],"mappings":"AAAA,SAASA,QAAQC,QAAQ,QAAmB,mBAAmB;AAE/D,SAASC,WAAW,EAAEC,2BAA2B,EAAEC,qBAAqB,QAAQ,iBAAiB;AAQjG,OAAO,SAASJ,KAAKK,OAA8B,EAAE;IACnD,MAAM,EAAEC,qBAAoB,EAAEC,aAAY,EAAEC,UAAS,EAAEC,mBAAoB,EAAE,CAAA,EAAEC,MAAK,EAAE,GAAGL;IAEzF,MAAMM,qBAAqBF,kBAAkBG,MAAM,CAAc,CAACC,KAAKC,YAAc;QACnF,MAAM,EAAEC,SAAQ,EAAEC,MAAK,EAAE,GAAGb,4BAA4BW;QACxD,MAAMG,YAAYb,sBAAsBY,OAAOD,UAAUL;QACzD,IAAIO,WAAW;YACbJ,IAAIK,IAAI,CAACD;QACX,CAAC;QACD,OAAOJ;IACT,GAAG,EAAE;IAEL,OAAOZ,SAAS;QACd,GAAIK,wBAAwB;YAAEa,UAAU;QAAoB,CAAC;QAC7D,GAAIZ,gBAAgB;YAAEa,aAAa,IAAI;YAAED,UAAUjB,YAAYM,WAAWD;QAAc,CAAC;QACzFc,kBAAkB;QAClB,GAAIV,mBAAmBW,MAAM,IAAI;YAAEX;QAAmB,CAAC;IACzD;AACF,CAAC"}
|
package/lib/middleware/index.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './coverTarget';\nexport * from './flip';\nexport * from './intersecting';\nexport * from './maxSize';\nexport * from './offset';\nexport * from './shift';\n"],"names":[],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,SAAS;AACvB,cAAc,iBAAiB;AAC/B,cAAc,YAAY;AAC1B,cAAc,WAAW;AACzB,cAAc,UAAU"}
|
@@ -1,21 +1,20 @@
|
|
1
1
|
import { detectOverflow } from '@floating-ui/dom';
|
2
2
|
export function intersecting() {
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
3
|
+
return {
|
4
|
+
name: 'intersectionObserver',
|
5
|
+
fn: async (middlewareArguments)=>{
|
6
|
+
const floatingRect = middlewareArguments.rects.floating;
|
7
|
+
const altOverflow = await detectOverflow(middlewareArguments, {
|
8
|
+
altBoundary: true
|
9
|
+
});
|
10
|
+
const isIntersectingTop = altOverflow.top < floatingRect.height && altOverflow.top > 0;
|
11
|
+
const isIntersectingBottom = altOverflow.bottom < floatingRect.height && altOverflow.bottom > 0;
|
12
|
+
const isIntersecting = isIntersectingTop || isIntersectingBottom;
|
13
|
+
return {
|
14
|
+
data: {
|
15
|
+
intersecting: isIntersecting
|
16
|
+
}
|
17
|
+
};
|
16
18
|
}
|
17
|
-
|
18
|
-
}
|
19
|
-
};
|
19
|
+
};
|
20
20
|
}
|
21
|
-
//# sourceMappingURL=intersecting.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["intersecting.ts"],"sourcesContent":["import type { Middleware } from '@floating-ui/dom';\nimport { detectOverflow } from '@floating-ui/dom';\n\nexport function intersecting(): Middleware {\n return {\n name: 'intersectionObserver',\n fn: async middlewareArguments => {\n const floatingRect = middlewareArguments.rects.floating;\n const altOverflow = await detectOverflow(middlewareArguments, { altBoundary: true });\n\n const isIntersectingTop = altOverflow.top < floatingRect.height && altOverflow.top > 0;\n const isIntersectingBottom = altOverflow.bottom < floatingRect.height && altOverflow.bottom > 0;\n\n const isIntersecting = isIntersectingTop || isIntersectingBottom;\n\n return {\n data: {\n intersecting: isIntersecting,\n },\n };\n },\n };\n}\n"],"names":["detectOverflow","intersecting","name","fn","middlewareArguments","floatingRect","rects","floating","altOverflow","altBoundary","isIntersectingTop","top","height","isIntersectingBottom","bottom","isIntersecting","data"],"mappings":"AACA,SAASA,cAAc,QAAQ,mBAAmB;AAElD,OAAO,SAASC,eAA2B;IACzC,OAAO;QACLC,MAAM;QACNC,IAAI,OAAMC,sBAAuB;YAC/B,MAAMC,eAAeD,oBAAoBE,KAAK,CAACC,QAAQ;YACvD,MAAMC,cAAc,MAAMR,eAAeI,qBAAqB;gBAAEK,aAAa,IAAI;YAAC;YAElF,MAAMC,oBAAoBF,YAAYG,GAAG,GAAGN,aAAaO,MAAM,IAAIJ,YAAYG,GAAG,GAAG;YACrF,MAAME,uBAAuBL,YAAYM,MAAM,GAAGT,aAAaO,MAAM,IAAIJ,YAAYM,MAAM,GAAG;YAE9F,MAAMC,iBAAiBL,qBAAqBG;YAE5C,OAAO;gBACLG,MAAM;oBACJf,cAAcc;gBAChB;YACF;QACF;IACF;AACF,CAAC"}
|
@@ -1,38 +1,29 @@
|
|
1
1
|
import { size } from '@floating-ui/dom';
|
2
2
|
import { getBoundary } from '../utils/getBoundary';
|
3
3
|
export function maxSize(autoSize, options) {
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
Object.assign(elements.floating.style, {
|
30
|
-
maxWidth: `${availableWidth}px`,
|
31
|
-
boxSizing: 'border-box',
|
32
|
-
overflowX: 'auto'
|
33
|
-
});
|
34
|
-
}
|
35
|
-
}
|
36
|
-
});
|
4
|
+
const { container , overflowBoundary } = options;
|
5
|
+
return size({
|
6
|
+
...overflowBoundary && {
|
7
|
+
altBoundary: true,
|
8
|
+
boundary: getBoundary(container, overflowBoundary)
|
9
|
+
},
|
10
|
+
apply ({ availableHeight , availableWidth , elements , rects }) {
|
11
|
+
const applyMaxWidth = autoSize === 'always' || autoSize === 'width-always' || rects.floating.width > availableWidth && (autoSize === true || autoSize === 'width');
|
12
|
+
const applyMaxHeight = autoSize === 'always' || autoSize === 'height-always' || rects.floating.height > availableHeight && (autoSize === true || autoSize === 'height');
|
13
|
+
if (applyMaxHeight) {
|
14
|
+
Object.assign(elements.floating.style, {
|
15
|
+
maxHeight: `${availableHeight}px`,
|
16
|
+
boxSizing: 'border-box',
|
17
|
+
overflowY: 'auto'
|
18
|
+
});
|
19
|
+
}
|
20
|
+
if (applyMaxWidth) {
|
21
|
+
Object.assign(elements.floating.style, {
|
22
|
+
maxWidth: `${availableWidth}px`,
|
23
|
+
boxSizing: 'border-box',
|
24
|
+
overflowX: 'auto'
|
25
|
+
});
|
26
|
+
}
|
27
|
+
}
|
28
|
+
});
|
37
29
|
}
|
38
|
-
//# sourceMappingURL=maxSize.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["maxSize.ts"],"sourcesContent":["import { size } from '@floating-ui/dom';\nimport type { Middleware } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\nimport { getBoundary } from '../utils/getBoundary';\nexport interface MaxSizeMiddlewareOptions extends Pick<PositioningOptions, 'overflowBoundary'> {\n container: HTMLElement | null;\n}\n\nexport function maxSize(autoSize: PositioningOptions['autoSize'], options: MaxSizeMiddlewareOptions): Middleware {\n const { container, overflowBoundary } = options;\n return size({\n ...(overflowBoundary && { altBoundary: true, boundary: getBoundary(container, overflowBoundary) }),\n apply({ availableHeight, availableWidth, elements, rects }) {\n const applyMaxWidth =\n autoSize === 'always' ||\n autoSize === 'width-always' ||\n (rects.floating.width > availableWidth && (autoSize === true || autoSize === 'width'));\n\n const applyMaxHeight =\n autoSize === 'always' ||\n autoSize === 'height-always' ||\n (rects.floating.height > availableHeight && (autoSize === true || autoSize === 'height'));\n\n if (applyMaxHeight) {\n Object.assign<CSSStyleDeclaration, Partial<CSSStyleDeclaration>>(elements.floating.style, {\n maxHeight: `${availableHeight}px`,\n boxSizing: 'border-box',\n overflowY: 'auto',\n });\n }\n\n if (applyMaxWidth) {\n Object.assign<CSSStyleDeclaration, Partial<CSSStyleDeclaration>>(elements.floating.style, {\n maxWidth: `${availableWidth}px`,\n boxSizing: 'border-box',\n overflowX: 'auto',\n });\n }\n },\n });\n}\n"],"names":["size","getBoundary","maxSize","autoSize","options","container","overflowBoundary","altBoundary","boundary","apply","availableHeight","availableWidth","elements","rects","applyMaxWidth","floating","width","applyMaxHeight","height","Object","assign","style","maxHeight","boxSizing","overflowY","maxWidth","overflowX"],"mappings":"AAAA,SAASA,IAAI,QAAQ,mBAAmB;AAGxC,SAASC,WAAW,QAAQ,uBAAuB;AAKnD,OAAO,SAASC,QAAQC,QAAwC,EAAEC,OAAiC,EAAc;IAC/G,MAAM,EAAEC,UAAS,EAAEC,iBAAgB,EAAE,GAAGF;IACxC,OAAOJ,KAAK;QACV,GAAIM,oBAAoB;YAAEC,aAAa,IAAI;YAAEC,UAAUP,YAAYI,WAAWC;QAAkB,CAAC;QACjGG,OAAM,EAAEC,gBAAe,EAAEC,eAAc,EAAEC,SAAQ,EAAEC,MAAK,EAAE,EAAE;YAC1D,MAAMC,gBACJX,aAAa,YACbA,aAAa,kBACZU,MAAME,QAAQ,CAACC,KAAK,GAAGL,kBAAmBR,CAAAA,aAAa,IAAI,IAAIA,aAAa,OAAM;YAErF,MAAMc,iBACJd,aAAa,YACbA,aAAa,mBACZU,MAAME,QAAQ,CAACG,MAAM,GAAGR,mBAAoBP,CAAAA,aAAa,IAAI,IAAIA,aAAa,QAAO;YAExF,IAAIc,gBAAgB;gBAClBE,OAAOC,MAAM,CAAoDR,SAASG,QAAQ,CAACM,KAAK,EAAE;oBACxFC,WAAW,CAAC,EAAEZ,gBAAgB,EAAE,CAAC;oBACjCa,WAAW;oBACXC,WAAW;gBACb;YACF,CAAC;YAED,IAAIV,eAAe;gBACjBK,OAAOC,MAAM,CAAoDR,SAASG,QAAQ,CAACM,KAAK,EAAE;oBACxFI,UAAU,CAAC,EAAEd,eAAe,EAAE,CAAC;oBAC/BY,WAAW;oBACXG,WAAW;gBACb;YACF,CAAC;QACH;IACF;AACF,CAAC"}
|
package/lib/middleware/offset.js
CHANGED
@@ -2,9 +2,7 @@ import { offset as baseOffset } from '@floating-ui/dom';
|
|
2
2
|
import { getFloatingUIOffset } from '../utils/getFloatingUIOffset';
|
3
3
|
/**
|
4
4
|
* Wraps floating UI offset middleware to to transform offset value
|
5
|
-
*/
|
6
|
-
|
7
|
-
|
8
|
-
return baseOffset(floatingUIOffset);
|
5
|
+
*/ export function offset(offsetValue) {
|
6
|
+
const floatingUIOffset = getFloatingUIOffset(offsetValue);
|
7
|
+
return baseOffset(floatingUIOffset);
|
9
8
|
}
|
10
|
-
//# sourceMappingURL=offset.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["offset.ts"],"sourcesContent":["import { offset as baseOffset } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\nimport { getFloatingUIOffset } from '../utils/getFloatingUIOffset';\n\n/**\n * Wraps floating UI offset middleware to to transform offset value\n */\nexport function offset(offsetValue: PositioningOptions['offset']) {\n const floatingUIOffset = getFloatingUIOffset(offsetValue);\n return baseOffset(floatingUIOffset);\n}\n"],"names":["offset","baseOffset","getFloatingUIOffset","offsetValue","floatingUIOffset"],"mappings":"AAAA,SAASA,UAAUC,UAAU,QAAQ,mBAAmB;AAExD,SAASC,mBAAmB,QAAQ,+BAA+B;AAEnE;;CAEC,GACD,OAAO,SAASF,OAAOG,WAAyC,EAAE;IAChE,MAAMC,mBAAmBF,oBAAoBC;IAC7C,OAAOF,WAAWG;AACpB,CAAC"}
|
package/lib/middleware/shift.js
CHANGED
@@ -2,34 +2,25 @@ import { shift as baseShift, limitShift } from '@floating-ui/dom';
|
|
2
2
|
import { getBoundary, toFloatingUIPadding } from '../utils/index';
|
3
3
|
/**
|
4
4
|
* Wraps the floating UI shift middleware for easier usage of our options
|
5
|
-
*/
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
})
|
26
|
-
...(overflowBoundaryPadding && {
|
27
|
-
padding: toFloatingUIPadding(overflowBoundaryPadding, isRtl)
|
28
|
-
}),
|
29
|
-
...(overflowBoundary && {
|
30
|
-
altBoundary: true,
|
31
|
-
boundary: getBoundary(container, overflowBoundary)
|
32
|
-
})
|
33
|
-
});
|
5
|
+
*/ export function shift(options) {
|
6
|
+
const { hasScrollableElement , disableTether , overflowBoundary , container , overflowBoundaryPadding , isRtl } = options;
|
7
|
+
return baseShift({
|
8
|
+
...hasScrollableElement && {
|
9
|
+
boundary: 'clippingAncestors'
|
10
|
+
},
|
11
|
+
...disableTether && {
|
12
|
+
crossAxis: disableTether === 'all',
|
13
|
+
limiter: limitShift({
|
14
|
+
crossAxis: disableTether !== 'all',
|
15
|
+
mainAxis: false
|
16
|
+
})
|
17
|
+
},
|
18
|
+
...overflowBoundaryPadding && {
|
19
|
+
padding: toFloatingUIPadding(overflowBoundaryPadding, isRtl)
|
20
|
+
},
|
21
|
+
...overflowBoundary && {
|
22
|
+
altBoundary: true,
|
23
|
+
boundary: getBoundary(container, overflowBoundary)
|
24
|
+
}
|
25
|
+
});
|
34
26
|
}
|
35
|
-
//# sourceMappingURL=shift.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["shift.ts"],"sourcesContent":["import { shift as baseShift, limitShift } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\nimport { getBoundary, toFloatingUIPadding } from '../utils/index';\n\nexport interface ShiftMiddlewareOptions\n extends Pick<PositioningOptions, 'overflowBoundary' | 'overflowBoundaryPadding'> {\n hasScrollableElement?: boolean;\n disableTether?: PositioningOptions['unstable_disableTether'];\n container: HTMLElement | null;\n isRtl: boolean;\n}\n\n/**\n * Wraps the floating UI shift middleware for easier usage of our options\n */\nexport function shift(options: ShiftMiddlewareOptions) {\n const { hasScrollableElement, disableTether, overflowBoundary, container, overflowBoundaryPadding, isRtl } = options;\n\n return baseShift({\n ...(hasScrollableElement && { boundary: 'clippingAncestors' }),\n ...(disableTether && {\n crossAxis: disableTether === 'all',\n limiter: limitShift({ crossAxis: disableTether !== 'all', mainAxis: false }),\n }),\n ...(overflowBoundaryPadding && { padding: toFloatingUIPadding(overflowBoundaryPadding, isRtl) }),\n ...(overflowBoundary && { altBoundary: true, boundary: getBoundary(container, overflowBoundary) }),\n });\n}\n"],"names":["shift","baseShift","limitShift","getBoundary","toFloatingUIPadding","options","hasScrollableElement","disableTether","overflowBoundary","container","overflowBoundaryPadding","isRtl","boundary","crossAxis","limiter","mainAxis","padding","altBoundary"],"mappings":"AAAA,SAASA,SAASC,SAAS,EAAEC,UAAU,QAAQ,mBAAmB;AAElE,SAASC,WAAW,EAAEC,mBAAmB,QAAQ,iBAAiB;AAUlE;;CAEC,GACD,OAAO,SAASJ,MAAMK,OAA+B,EAAE;IACrD,MAAM,EAAEC,qBAAoB,EAAEC,cAAa,EAAEC,iBAAgB,EAAEC,UAAS,EAAEC,wBAAuB,EAAEC,MAAK,EAAE,GAAGN;IAE7G,OAAOJ,UAAU;QACf,GAAIK,wBAAwB;YAAEM,UAAU;QAAoB,CAAC;QAC7D,GAAIL,iBAAiB;YACnBM,WAAWN,kBAAkB;YAC7BO,SAASZ,WAAW;gBAAEW,WAAWN,kBAAkB;gBAAOQ,UAAU,KAAK;YAAC;QAC5E,CAAC;QACD,GAAIL,2BAA2B;YAAEM,SAASZ,oBAAoBM,yBAAyBC;QAAO,CAAC;QAC/F,GAAIH,oBAAoB;YAAES,aAAa,IAAI;YAAEL,UAAUT,YAAYM,WAAWD;QAAkB,CAAC;IACnG;AACF,CAAC"}
|
package/lib/types.js
CHANGED
package/lib/types.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["types.ts"],"sourcesContent":["import * as React from 'react';\n\ntype Rect = {\n width: number;\n height: number;\n x: number;\n y: number;\n};\n\nexport type OffsetFunctionParam = {\n positionedRect: Rect;\n targetRect: Rect;\n position: Position;\n alignment?: Alignment;\n};\n\nexport type TargetElement = HTMLElement | PositioningVirtualElement;\n\n/**\n * @internal\n */\nexport interface UsePositioningOptions extends PositioningProps {\n /**\n * If false, does not position anything\n */\n enabled?: boolean;\n}\n\n/**\n * @internal\n */\nexport interface PositionManager {\n updatePosition: () => void;\n dispose: () => void;\n}\n\nexport interface UsePositioningReturn {\n // React refs are supposed to be contravariant\n // (allows a more general type to be passed rather than a more specific one)\n // However, Typescript currently can't infer that fact for refs\n // See https://github.com/microsoft/TypeScript/issues/30748 for more information\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n targetRef: React.MutableRefObject<any>;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n containerRef: React.MutableRefObject<any>;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n arrowRef: React.MutableRefObject<any>;\n}\n\nexport type OffsetObject = { crossAxis?: number; mainAxis: number };\n\nexport type OffsetShorthand = number;\n\nexport type OffsetFunction = (param: OffsetFunctionParam) => OffsetObject | OffsetShorthand;\n\nexport type Offset = OffsetFunction | OffsetObject | OffsetShorthand;\n\nexport type Position = 'above' | 'below' | 'before' | 'after';\nexport type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';\n\nexport type AutoSize = 'height' | 'height-always' | 'width' | 'width-always' | 'always' | boolean;\n\nexport type Boundary = HTMLElement | Array<HTMLElement> | 'clippingParents' | 'scrollParent' | 'window';\n\nexport type PositioningImperativeRef = {\n /**\n * Updates the position imperatively.\n * Useful when the position of the target changes from other factors than scrolling of window resize.\n */\n updatePosition: () => void;\n\n /**\n * Sets the target and updates positioning imperatively.\n * Useful for avoiding double renders with the target option.\n */\n setTarget: (target: TargetElement) => void;\n};\n\nexport type PositioningVirtualElement = {\n getBoundingClientRect: () => {\n x: number;\n y: number;\n top: number;\n left: number;\n bottom: number;\n right: number;\n width: number;\n height: number;\n };\n contextElement?: Element;\n};\n\nexport type SetVirtualMouseTarget = (event: React.MouseEvent | MouseEvent | undefined | null) => void;\n\nexport interface PositioningOptions {\n /** Alignment for the component. Only has an effect if used with the @see position option */\n align?: Alignment;\n\n /** The element which will define the boundaries of the positioned element for the flip behavior. */\n flipBoundary?: Boundary | null;\n\n /** The element which will define the boundaries of the positioned element for the overflow behavior. */\n overflowBoundary?: Boundary | null;\n\n /**\n * Applies a padding to the overflow bounadry, so that overflow is detected earlier before the\n * positioned surface hits the overflow boundary.\n */\n overflowBoundaryPadding?: number | Partial<{ top: number; end: number; bottom: number; start: number }>;\n\n /**\n * Position for the component. Position has higher priority than align. If position is vertical ('above' | 'below')\n * and align is also vertical ('top' | 'bottom') or if both position and align are horizontal ('before' | 'after'\n * and 'start' | 'end' respectively),\n * then provided value for 'align' will be ignored and 'center' will be used instead.\n */\n position?: Position;\n\n /**\n * Enables the position element to be positioned with 'fixed' (default value is position: 'absolute')\n * @default false\n */\n positionFixed?: boolean;\n\n /**\n * Lets you displace a positioned element from its reference element.\n * This can be useful if you need to apply some margin between them or if you need to fine tune the\n * position according to some custom logic.\n */\n offset?: Offset;\n\n /**\n * Defines padding between the corner of the popup element and the arrow.\n * Use to prevent the arrow from overlapping a rounded corner, for example.\n */\n arrowPadding?: number;\n\n /**\n * Applies max-height and max-width on the positioned element to fit it within the available space in viewport.\n * true enables this for both width and height when overflow happens.\n * 'always' applies `max-height`/`max-width` regardless of overflow.\n * 'height' applies `max-height` when overflow happens, and 'width' for `max-width`\n * `height-always` applies `max-height` regardless of overflow, and 'width-always' for always applying `max-width`\n */\n autoSize?: AutoSize;\n\n /**\n * Modifies position and alignment to cover the target\n */\n coverTarget?: boolean;\n\n /**\n * Disables automatic repositioning of the component; it will always be placed according to the values of `align` and\n * `position` props, regardless of the size of the component, the reference element or the viewport.\n */\n pinned?: boolean;\n\n /**\n * When the reference element or the viewport is outside viewport allows a positioned element to be fully in viewport.\n * \"all\" enables this behavior for all axis.\n */\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_disableTether?: boolean | 'all';\n\n /**\n * If flip fails to stop the positioned element from overflowing\n * its boundaries, use a specified fallback positions.\n */\n fallbackPositions?: PositioningShorthandValue[];\n\n /**\n * Modifies whether popover is positioned using transform.\n * @default true\n */\n useTransform?: boolean;\n}\n\nexport interface PositioningProps\n extends Pick<\n PositioningOptions,\n | 'align'\n | 'flipBoundary'\n | 'overflowBoundary'\n | 'overflowBoundaryPadding'\n | 'position'\n | 'offset'\n | 'arrowPadding'\n | 'autoSize'\n | 'coverTarget'\n | 'pinned'\n | 'useTransform'\n > {\n /** An imperative handle to Popper methods. */\n positioningRef?: React.Ref<PositioningImperativeRef>;\n\n /**\n * Manual override for the target element. Useful for scenarios where a component accepts user prop to override target\n */\n target?: TargetElement | null;\n}\n\nexport type PositioningShorthandValue =\n | 'above'\n | 'above-start'\n | 'above-end'\n | 'below'\n | 'below-start'\n | 'below-end'\n | 'before'\n | 'before-top'\n | 'before-bottom'\n | 'after'\n | 'after-top'\n | 'after-bottom';\n\nexport type PositioningShorthand = PositioningProps | PositioningShorthandValue;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
|