@fluentui/react-positioning 9.3.5 → 9.3.7
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +69 -1
- package/CHANGELOG.md +24 -2
- package/lib/createArrowStyles.js +0 -2
- package/lib/createArrowStyles.js.map +1 -1
- package/lib/createPositionManager.js +8 -17
- package/lib/createPositionManager.js.map +1 -1
- package/lib/createVirtualElementFromClick.js +0 -2
- package/lib/createVirtualElementFromClick.js.map +1 -1
- package/lib/middleware/coverTarget.js +0 -5
- package/lib/middleware/coverTarget.js.map +1 -1
- package/lib/middleware/flip.js +2 -1
- package/lib/middleware/flip.js.map +1 -1
- package/lib/middleware/intersecting.js.map +1 -1
- package/lib/middleware/maxSize.js +31 -38
- package/lib/middleware/maxSize.js.map +1 -1
- package/lib/middleware/offset.js +0 -1
- package/lib/middleware/offset.js.map +1 -1
- package/lib/middleware/shift.js +2 -2
- package/lib/middleware/shift.js.map +1 -1
- package/lib/usePositioning.js +19 -28
- package/lib/usePositioning.js.map +1 -1
- package/lib/usePositioningMouseTarget.js +0 -7
- package/lib/usePositioningMouseTarget.js.map +1 -1
- package/lib/utils/debounce.js +0 -1
- package/lib/utils/debounce.js.map +1 -1
- package/lib/utils/fromFloatingUIPlacement.js +2 -7
- package/lib/utils/fromFloatingUIPlacement.js.map +1 -1
- package/lib/utils/getBoundary.js +0 -6
- package/lib/utils/getBoundary.js.map +1 -1
- package/lib/utils/getFloatingUIOffset.js +0 -3
- package/lib/utils/getFloatingUIOffset.js.map +1 -1
- package/lib/utils/getReactFiberFromNode.js +0 -4
- package/lib/utils/getReactFiberFromNode.js.map +1 -1
- package/lib/utils/getScrollParent.js +6 -18
- package/lib/utils/getScrollParent.js.map +1 -1
- package/lib/utils/hasAutoFocusFilter.js +2 -7
- package/lib/utils/hasAutoFocusFilter.js.map +1 -1
- package/lib/utils/mergeArrowOffset.js +2 -7
- package/lib/utils/mergeArrowOffset.js.map +1 -1
- package/lib/utils/parseFloatingUIPlacement.js.map +1 -1
- package/lib/utils/resolvePositioningShorthand.js +0 -2
- package/lib/utils/resolvePositioningShorthand.js.map +1 -1
- package/lib/utils/toFloatingUIPlacement.js +2 -8
- package/lib/utils/toFloatingUIPlacement.js.map +1 -1
- package/lib/utils/toggleScrollListener.js +0 -3
- package/lib/utils/toggleScrollListener.js.map +1 -1
- package/lib/utils/useCallbackRef.js +2 -8
- package/lib/utils/useCallbackRef.js.map +1 -1
- package/lib/utils/writeArrowUpdates.js +0 -2
- package/lib/utils/writeArrowUpdates.js.map +1 -1
- package/lib/utils/writeContainerupdates.js +0 -10
- package/lib/utils/writeContainerupdates.js.map +1 -1
- package/lib-amd/createPositionManager.js +3 -0
- package/lib-amd/createPositionManager.js.map +1 -1
- package/lib-amd/middleware/maxSize.js +24 -36
- package/lib-amd/middleware/maxSize.js.map +1 -1
- package/lib-amd/usePositioning.js +3 -3
- package/lib-amd/usePositioning.js.map +1 -1
- package/lib-commonjs/constants.js.map +1 -1
- package/lib-commonjs/createArrowStyles.js +0 -7
- package/lib-commonjs/createArrowStyles.js.map +1 -1
- package/lib-commonjs/createPositionManager.js +8 -21
- package/lib-commonjs/createPositionManager.js.map +1 -1
- package/lib-commonjs/createVirtualElementFromClick.js +0 -4
- package/lib-commonjs/createVirtualElementFromClick.js.map +1 -1
- package/lib-commonjs/index.js +0 -10
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/middleware/coverTarget.js +0 -8
- package/lib-commonjs/middleware/coverTarget.js.map +1 -1
- package/lib-commonjs/middleware/flip.js +2 -5
- package/lib-commonjs/middleware/flip.js.map +1 -1
- package/lib-commonjs/middleware/index.js +0 -7
- package/lib-commonjs/middleware/index.js.map +1 -1
- package/lib-commonjs/middleware/intersecting.js +0 -3
- package/lib-commonjs/middleware/intersecting.js.map +1 -1
- package/lib-commonjs/middleware/maxSize.js +30 -41
- package/lib-commonjs/middleware/maxSize.js.map +1 -1
- package/lib-commonjs/middleware/offset.js +0 -5
- package/lib-commonjs/middleware/offset.js.map +1 -1
- package/lib-commonjs/middleware/shift.js +2 -6
- package/lib-commonjs/middleware/shift.js.map +1 -1
- package/lib-commonjs/types.js.map +1 -1
- package/lib-commonjs/usePositioning.js +18 -36
- package/lib-commonjs/usePositioning.js.map +1 -1
- package/lib-commonjs/usePositioningMouseTarget.js +0 -11
- package/lib-commonjs/usePositioningMouseTarget.js.map +1 -1
- package/lib-commonjs/utils/debounce.js +0 -3
- package/lib-commonjs/utils/debounce.js.map +1 -1
- package/lib-commonjs/utils/fromFloatingUIPlacement.js +2 -9
- package/lib-commonjs/utils/fromFloatingUIPlacement.js.map +1 -1
- package/lib-commonjs/utils/getBoundary.js +0 -9
- package/lib-commonjs/utils/getBoundary.js.map +1 -1
- package/lib-commonjs/utils/getFloatingUIOffset.js +0 -6
- package/lib-commonjs/utils/getFloatingUIOffset.js.map +1 -1
- package/lib-commonjs/utils/getReactFiberFromNode.js +0 -5
- package/lib-commonjs/utils/getReactFiberFromNode.js.map +1 -1
- package/lib-commonjs/utils/getScrollParent.js +6 -23
- package/lib-commonjs/utils/getScrollParent.js.map +1 -1
- package/lib-commonjs/utils/hasAutoFocusFilter.js +5 -12
- package/lib-commonjs/utils/hasAutoFocusFilter.js.map +1 -1
- package/lib-commonjs/utils/index.js +0 -15
- package/lib-commonjs/utils/index.js.map +1 -1
- package/lib-commonjs/utils/mergeArrowOffset.js +2 -9
- package/lib-commonjs/utils/mergeArrowOffset.js.map +1 -1
- package/lib-commonjs/utils/parseFloatingUIPlacement.js +0 -2
- package/lib-commonjs/utils/parseFloatingUIPlacement.js.map +1 -1
- package/lib-commonjs/utils/resolvePositioningShorthand.js +2 -6
- package/lib-commonjs/utils/resolvePositioningShorthand.js.map +1 -1
- package/lib-commonjs/utils/toFloatingUIPlacement.js +2 -10
- package/lib-commonjs/utils/toFloatingUIPlacement.js.map +1 -1
- package/lib-commonjs/utils/toggleScrollListener.js +0 -6
- package/lib-commonjs/utils/toggleScrollListener.js.map +1 -1
- package/lib-commonjs/utils/useCallbackRef.js +2 -12
- package/lib-commonjs/utils/useCallbackRef.js.map +1 -1
- package/lib-commonjs/utils/writeArrowUpdates.js +0 -4
- package/lib-commonjs/utils/writeArrowUpdates.js.map +1 -1
- package/lib-commonjs/utils/writeContainerupdates.js +0 -13
- package/lib-commonjs/utils/writeContainerupdates.js.map +1 -1
- package/package.json +4 -4
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.createArrowHeightStyles = exports.createArrowStyles = void 0;
|
7
|
-
|
8
7
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
9
|
-
|
10
8
|
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
11
9
|
/**
|
12
10
|
* @internal
|
@@ -31,8 +29,6 @@ const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
|
31
29
|
* )
|
32
30
|
* ```
|
33
31
|
*/
|
34
|
-
|
35
|
-
|
36
32
|
function createArrowStyles(options) {
|
37
33
|
const {
|
38
34
|
arrowHeight,
|
@@ -78,7 +74,6 @@ function createArrowStyles(options) {
|
|
78
74
|
}
|
79
75
|
};
|
80
76
|
}
|
81
|
-
|
82
77
|
exports.createArrowStyles = createArrowStyles;
|
83
78
|
/**
|
84
79
|
* @internal
|
@@ -87,7 +82,6 @@ exports.createArrowStyles = createArrowStyles;
|
|
87
82
|
* Use this when you need to create classes for several different arrow sizes. If you only need a
|
88
83
|
* constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.
|
89
84
|
*/
|
90
|
-
|
91
85
|
function createArrowHeightStyles(arrowHeight) {
|
92
86
|
// The arrow is a square rotated 45 degrees to have its bottom and right edges form a right triangle.
|
93
87
|
// Multiply the triangle's height by sqrt(2) to get length of its edges.
|
@@ -97,6 +91,5 @@ function createArrowHeightStyles(arrowHeight) {
|
|
97
91
|
height: edgeLength
|
98
92
|
};
|
99
93
|
}
|
100
|
-
|
101
94
|
exports.createArrowHeightStyles = createArrowHeightStyles;
|
102
95
|
//# sourceMappingURL=createArrowStyles.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AAsCA;;;;;;;;;;;;;;;;;;;;;;;AAuBA,SAAgBA,iBAAiB,CAACC,OAAiC;EACjE,MAAM;IACJC,WAAW;IACXC,WAAW,GAAG,KAAK;IACnBC,WAAW,GAAG,OAAO;IACrBC,WAAW,GAAGC,oBAAM,CAACC;EAAsB,CAC5C,GAAGN,OAAO;EAEX,OAAO;IACLO,QAAQ,EAAE,UAAU;IACpBC,eAAe,EAAE,SAAS;IAC1BC,UAAU,EAAE,QAAQ;IACpBC,MAAM,EAAE,CAAC,CAAC;IAEV,IAAIT,WAAW,IAAIU,uBAAuB,CAACV,WAAW,CAAC,CAAC;IAExD,UAAU,EAAE;MACVW,OAAO,EAAE,IAAI;MACbH,UAAU,EAAE,SAAS;MACrBF,QAAQ,EAAE,UAAU;MACpBM,SAAS,EAAE,YAAY;MACvBC,KAAK,EAAE,SAAS;MAChBC,MAAM,EAAE,SAAS;MACjBP,eAAe,EAAE,SAAS;MAC1B,GAAGQ,kBAAU,CAACC,WAAW,CACvB,GAAGf,WAAW,gBAAgB,EAC9B,GAAGC,WAAW,gBAAgB,EAC9B,GAAGC,WAAW,gBAAgB,CAC/B;MACD,GAAGY,kBAAU,CAACE,YAAY,CAAChB,WAAW,EAAEC,WAAW,EAAEC,WAAW,CAAC;MACjEe,uBAAuB,EAAEd,oBAAM,CAACe,iBAAiB;MACjDC,SAAS,EAAE;KACZ;IAED;IACA,yCAAyC,EAAE;MACzCC,MAAM,EAAE,IAAIpB,WAAW,EAAE;MACzB,SAAS,EAAE;KACZ;IACD,2CAA2C,EAAE;MAC3CqB,IAAI,EAAE,IAAIrB,WAAW,gBAAgB;MACrC,SAAS,EAAE;KACZ;IACD,4CAA4C,EAAE;MAC5CsB,GAAG,EAAE,IAAItB,WAAW,EAAE;MACtB,SAAS,EAAE;KACZ;IACD,0CAA0C,EAAE;MAC1CuB,KAAK,EAAE,IAAIvB,WAAW,gBAAgB;MACtC,SAAS,EAAE;;GAEd;AACH;AApDAwB;AAsDA;;;;;;;AAOA,SAAgBf,uBAAuB,CAACV,WAAmB;EACzD;EACA;EACA,MAAM0B,UAAU,GAAG,GAAG,KAAK,GAAG1B,WAAW,IAAI;EAC7C,OAAO;IAAEa,KAAK,EAAEa,UAAU;IAAEZ,MAAM,EAAEY;EAAU,CAAE;AAClD;AALAD","names":["createArrowStyles","options","arrowHeight","borderWidth","borderStyle","borderColor","react_theme_1","colorTransparentStroke","position","backgroundColor","visibility","zIndex","createArrowHeightStyles","content","boxSizing","width","height","react_1","borderRight","borderBottom","borderBottomRightRadius","borderRadiusSmall","transform","bottom","left","top","right","exports","edgeLength"],"sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/createArrowStyles.ts"],"sourcesContent":["import { shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { GriffelStyle } from '@griffel/react';\n\n/**\n * @internal\n * Options parameter for the createArrowStyles function\n */\nexport type CreateArrowStylesOptions = {\n /**\n * The height of the arrow from the base to the tip, in px. The base width of the arrow is always twice its height.\n *\n * This can be undefined to leave out the arrow size styles. You must then add styles created by\n * createArrowHeightStyles to set the arrow's size correctly. This can be useful if the arrow can be different sizes.\n */\n arrowHeight: number | undefined;\n\n /**\n * The borderWidth of the arrow. Should be the same borderWidth as the parent element.\n *\n * @defaultvalue 1px\n */\n borderWidth?: GriffelStyle['borderBottomWidth'];\n\n /**\n * The borderStyle for the arrow. Should be the same borderStyle as the parent element.\n *\n * @defaultvalue solid\n */\n borderStyle?: GriffelStyle['borderBottomStyle'];\n\n /**\n * The borderColor of the arrow. Should be the same borderColor as the parent element.\n *\n * @defaultvalue tokens.colorTransparentStroke\n */\n borderColor?: GriffelStyle['borderBottomColor'];\n};\n\n/**\n * @internal\n * Helper that creates a makeStyles rule for an arrow element.\n * For runtime arrow size toggling simply create extra classnames to apply to the arrow element\n *\n * ```ts\n * makeStyles({\n * arrowWithSize: createArrowStyles({ arrowHeight: 6 }),\n *\n * arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),\n * mediumArrow: createArrowHeightStyles(4),\n * smallArrow: createArrowHeightStyles(2),\n * })\n * ...\n *\n * state.arrowWithSize.className = styles.arrowWithSize;\n * state.arrowWithoutSize.className = mergeClasses(\n * styles.arrowWithoutSize,\n * state.smallArrow && styles.smallArrow,\n * state.mediumArrow && styles.mediumArrow,\n * )\n * ```\n */\nexport function createArrowStyles(options: CreateArrowStylesOptions): GriffelStyle {\n const {\n arrowHeight,\n borderWidth = '1px',\n borderStyle = 'solid',\n borderColor = tokens.colorTransparentStroke,\n } = options;\n\n return {\n position: 'absolute',\n backgroundColor: 'inherit',\n visibility: 'hidden',\n zIndex: -1,\n\n ...(arrowHeight && createArrowHeightStyles(arrowHeight)),\n\n '::before': {\n content: '\"\"',\n visibility: 'visible',\n position: 'absolute',\n boxSizing: 'border-box',\n width: 'inherit',\n height: 'inherit',\n backgroundColor: 'inherit',\n ...shorthands.borderRight(\n `${borderWidth} /* @noflip */`,\n `${borderStyle} /* @noflip */`,\n `${borderColor} /* @noflip */`,\n ),\n ...shorthands.borderBottom(borderWidth, borderStyle, borderColor),\n borderBottomRightRadius: tokens.borderRadiusSmall,\n transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)',\n },\n\n // Popper sets data-popper-placement on the root element, which is used to align the arrow\n ':global([data-popper-placement^=\"top\"])': {\n bottom: `-${borderWidth}`,\n '--angle': '0',\n },\n ':global([data-popper-placement^=\"right\"])': {\n left: `-${borderWidth} /* @noflip */`,\n '--angle': '90deg',\n },\n ':global([data-popper-placement^=\"bottom\"])': {\n top: `-${borderWidth}`,\n '--angle': '180deg',\n },\n ':global([data-popper-placement^=\"left\"])': {\n right: `-${borderWidth} /* @noflip */`,\n '--angle': '270deg',\n },\n };\n}\n\n/**\n * @internal\n * Creates CSS styles to size the arrow created by createArrowStyles to the given height.\n *\n * Use this when you need to create classes for several different arrow sizes. If you only need a\n * constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.\n */\nexport function createArrowHeightStyles(arrowHeight: number) {\n // The arrow is a square rotated 45 degrees to have its bottom and right edges form a right triangle.\n // Multiply the triangle's height by sqrt(2) to get length of its edges.\n const edgeLength = `${1.414 * arrowHeight}px`;\n return { width: edgeLength, height: edgeLength };\n}\n"]}
|
@@ -4,16 +4,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.createPositionManager = void 0;
|
7
|
-
|
8
7
|
const dom_1 = /*#__PURE__*/require("@floating-ui/dom");
|
9
|
-
|
10
8
|
const utils_1 = /*#__PURE__*/require("./utils");
|
11
9
|
/**
|
12
10
|
* @internal
|
13
11
|
* @returns manager that handles positioning out of the react lifecycle
|
14
12
|
*/
|
15
|
-
|
16
|
-
|
17
13
|
function createPositionManager(options) {
|
18
14
|
const {
|
19
15
|
container,
|
@@ -23,40 +19,34 @@ function createPositionManager(options) {
|
|
23
19
|
middleware,
|
24
20
|
placement
|
25
21
|
} = options;
|
26
|
-
|
27
22
|
if (!target || !container) {
|
28
23
|
return {
|
29
24
|
updatePosition: () => undefined,
|
30
25
|
dispose: () => undefined
|
31
26
|
};
|
32
27
|
}
|
33
|
-
|
34
28
|
let isFirstUpdate = true;
|
35
29
|
const scrollParents = new Set();
|
36
|
-
const targetWindow = container.ownerDocument.defaultView;
|
30
|
+
const targetWindow = container.ownerDocument.defaultView;
|
31
|
+
// When the container is first resolved, set position `fixed` to avoid scroll jumps.
|
37
32
|
// Without this scroll jumps can occur when the element is rendered initially and receives focus
|
38
|
-
|
39
33
|
Object.assign(container.style, {
|
40
34
|
position: 'fixed',
|
41
35
|
left: 0,
|
42
36
|
top: 0,
|
43
37
|
margin: 0
|
44
38
|
});
|
45
|
-
|
46
|
-
const forceUpdate = () => {
|
39
|
+
let forceUpdate = () => {
|
47
40
|
if (isFirstUpdate) {
|
48
41
|
scrollParents.add(utils_1.getScrollParent(container));
|
49
|
-
|
50
42
|
if (target instanceof HTMLElement) {
|
51
43
|
scrollParents.add(utils_1.getScrollParent(target));
|
52
44
|
}
|
53
|
-
|
54
45
|
scrollParents.forEach(scrollParent => {
|
55
46
|
scrollParent.addEventListener('scroll', updatePosition);
|
56
47
|
});
|
57
48
|
isFirstUpdate = false;
|
58
49
|
}
|
59
|
-
|
60
50
|
Object.assign(container.style, {
|
61
51
|
position: strategy
|
62
52
|
});
|
@@ -99,32 +89,29 @@ function createPositionManager(options) {
|
|
99
89
|
}
|
100
90
|
});
|
101
91
|
};
|
102
|
-
|
103
92
|
const updatePosition = utils_1.debounce(() => forceUpdate());
|
104
|
-
|
105
93
|
const dispose = () => {
|
94
|
+
// debounced update can still occur afterwards
|
95
|
+
// so destroy the reference to forceUpdate
|
96
|
+
forceUpdate = () => null;
|
106
97
|
if (targetWindow) {
|
107
98
|
targetWindow.removeEventListener('scroll', updatePosition);
|
108
99
|
targetWindow.removeEventListener('resize', updatePosition);
|
109
100
|
}
|
110
|
-
|
111
101
|
scrollParents.forEach(scrollParent => {
|
112
102
|
scrollParent.removeEventListener('scroll', updatePosition);
|
113
103
|
});
|
114
104
|
};
|
115
|
-
|
116
105
|
if (targetWindow) {
|
117
106
|
targetWindow.addEventListener('scroll', updatePosition);
|
118
107
|
targetWindow.addEventListener('resize', updatePosition);
|
119
|
-
}
|
120
|
-
|
121
|
-
|
108
|
+
}
|
109
|
+
// Update the position on initialization
|
122
110
|
updatePosition();
|
123
111
|
return {
|
124
112
|
updatePosition,
|
125
113
|
dispose
|
126
114
|
};
|
127
115
|
}
|
128
|
-
|
129
116
|
exports.createPositionManager = createPositionManager;
|
130
117
|
//# sourceMappingURL=createPositionManager.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"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","names":["createPositionManager","options","container","target","arrow","strategy","middleware","placement","updatePosition","undefined","dispose","isFirstUpdate","scrollParents","Set","targetWindow","ownerDocument","defaultView","Object","assign","style","position","left","top","margin","forceUpdate","add","utils_1","HTMLElement","forEach","scrollParent","addEventListener","dom_1","then","x","y","middlewareData","computedPlacement","coordinates","lowPPI","devicePixelRatio","catch","err","process","env","NODE_ENV","console","error","removeEventListener","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/createPositionManager.ts"],"sourcesContent":["import { computePosition } from '@floating-ui/dom';\nimport type { Middleware, Placement, Strategy } from '@floating-ui/dom';\nimport type { PositionManager, TargetElement } from './types';\nimport { debounce, writeArrowUpdates, writeContainerUpdates, getScrollParent } from './utils';\n\ninterface PositionManagerOptions {\n /**\n * The positioned element\n */\n container: HTMLElement;\n /**\n * Element that the container will be anchored to\n */\n target: TargetElement;\n /**\n * Arrow that points from the container to the target\n */\n arrow: HTMLElement | null;\n /**\n * The value of the css `position` property\n * @default absolute\n */\n strategy: Strategy;\n /**\n * [Floating UI middleware](https://floating-ui.com/docs/middleware)\n */\n middleware: Middleware[];\n /**\n * [Floating UI placement](https://floating-ui.com/docs/computePosition#placement)\n */\n placement?: Placement;\n}\n\n/**\n * @internal\n * @returns manager that handles positioning out of the react lifecycle\n */\nexport function createPositionManager(options: PositionManagerOptions): PositionManager {\n const { container, target, arrow, strategy, middleware, placement } = options;\n if (!target || !container) {\n return {\n updatePosition: () => undefined,\n dispose: () => undefined,\n };\n }\n\n let isFirstUpdate = true;\n const scrollParents: Set<HTMLElement> = new Set<HTMLElement>();\n const targetWindow = container.ownerDocument.defaultView;\n\n // When the container is first resolved, set position `fixed` to avoid scroll jumps.\n // Without this scroll jumps can occur when the element is rendered initially and receives focus\n Object.assign(container.style, { position: 'fixed', left: 0, top: 0, margin: 0 });\n\n let forceUpdate = () => {\n if (isFirstUpdate) {\n scrollParents.add(getScrollParent(container));\n if (target instanceof HTMLElement) {\n scrollParents.add(getScrollParent(target));\n }\n\n scrollParents.forEach(scrollParent => {\n scrollParent.addEventListener('scroll', updatePosition);\n });\n\n isFirstUpdate = false;\n }\n\n Object.assign(container.style, { position: strategy });\n computePosition(target, container, { placement, middleware, strategy })\n .then(({ x, y, middlewareData, placement: computedPlacement }) => {\n writeArrowUpdates({ arrow, middlewareData });\n writeContainerUpdates({\n container,\n middlewareData,\n placement: computedPlacement,\n coordinates: { x, y },\n lowPPI: (targetWindow?.devicePixelRatio || 1) <= 1,\n strategy,\n });\n })\n .catch(err => {\n // https://github.com/floating-ui/floating-ui/issues/1845\n // FIXME for node > 14\n // node 15 introduces promise rejection which means that any components\n // tests need to be `it('', async () => {})` otherwise there can be race conditions with\n // JSDOM being torn down before this promise is resolved so globals like `window` and `document` don't exist\n // Unless all tests that ever use `usePositioning` are turned into async tests, any logging during testing\n // will actually be counter productive\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.error('[usePositioning]: Failed to calculate position', err);\n }\n });\n };\n\n const updatePosition = debounce(() => forceUpdate());\n\n const dispose = () => {\n // debounced update can still occur afterwards\n // so destroy the reference to forceUpdate\n forceUpdate = () => null;\n\n if (targetWindow) {\n targetWindow.removeEventListener('scroll', updatePosition);\n targetWindow.removeEventListener('resize', updatePosition);\n }\n\n scrollParents.forEach(scrollParent => {\n scrollParent.removeEventListener('scroll', updatePosition);\n });\n };\n\n if (targetWindow) {\n targetWindow.addEventListener('scroll', updatePosition);\n targetWindow.addEventListener('resize', updatePosition);\n }\n\n // Update the position on initialization\n updatePosition();\n\n return {\n updatePosition,\n dispose,\n };\n}\n"]}
|
@@ -8,13 +8,11 @@ exports.createVirtualElementFromClick = void 0;
|
|
8
8
|
* Creates a virtual element based on the position of a click event
|
9
9
|
* Can be used as a target for popper in scenarios such as context menus
|
10
10
|
*/
|
11
|
-
|
12
11
|
function createVirtualElementFromClick(nativeEvent) {
|
13
12
|
const left = nativeEvent.clientX;
|
14
13
|
const top = nativeEvent.clientY;
|
15
14
|
const right = left + 1;
|
16
15
|
const bottom = top + 1;
|
17
|
-
|
18
16
|
function getBoundingClientRect() {
|
19
17
|
return {
|
20
18
|
left,
|
@@ -27,11 +25,9 @@ function createVirtualElementFromClick(nativeEvent) {
|
|
27
25
|
width: 1
|
28
26
|
};
|
29
27
|
}
|
30
|
-
|
31
28
|
return {
|
32
29
|
getBoundingClientRect
|
33
30
|
};
|
34
31
|
}
|
35
|
-
|
36
32
|
exports.createVirtualElementFromClick = createVirtualElementFromClick;
|
37
33
|
//# sourceMappingURL=createVirtualElementFromClick.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":";;;;;;AAEA;;;;AAIA,SAAgBA,6BAA6B,CAACC,WAAuB;EACnE,MAAMC,IAAI,GAAGD,WAAW,CAACE,OAAO;EAChC,MAAMC,GAAG,GAAGH,WAAW,CAACI,OAAO;EAC/B,MAAMC,KAAK,GAAGJ,IAAI,GAAG,CAAC;EACtB,MAAMK,MAAM,GAAGH,GAAG,GAAG,CAAC;EAEtB,SAASI,qBAAqB;IAC5B,OAAO;MACLN,IAAI;MACJE,GAAG;MACHE,KAAK;MACLC,MAAM;MACNE,CAAC,EAAEP,IAAI;MACPQ,CAAC,EAAEN,GAAG;MACNO,MAAM,EAAE,CAAC;MACTC,KAAK,EAAE;KACR;EACH;EAEA,OAAO;IACLJ;GACD;AACH;AAtBAK","names":["createVirtualElementFromClick","nativeEvent","left","clientX","top","clientY","right","bottom","getBoundingClientRect","x","y","height","width","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/createVirtualElementFromClick.ts"],"sourcesContent":["import type { PositioningVirtualElement } from './types';\n\n/**\n * Creates a virtual element based on the position of a click event\n * Can be used as a target for popper in scenarios such as context menus\n */\nexport function createVirtualElementFromClick(nativeEvent: MouseEvent): PositioningVirtualElement {\n const left = nativeEvent.clientX;\n const top = nativeEvent.clientY;\n const right = left + 1;\n const bottom = top + 1;\n\n function getBoundingClientRect() {\n return {\n left,\n top,\n right,\n bottom,\n x: left,\n y: top,\n height: 1,\n width: 1,\n };\n }\n\n return {\n getBoundingClientRect,\n };\n}\n"]}
|
package/lib-commonjs/index.js
CHANGED
@@ -4,18 +4,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.mergeArrowOffset = exports.resolvePositioningShorthand = exports.usePositioningMouseTarget = exports.usePositioning = exports.createArrowStyles = exports.createArrowHeightStyles = exports.createVirtualElementFromClick = void 0;
|
7
|
-
|
8
7
|
var createVirtualElementFromClick_1 = /*#__PURE__*/require("./createVirtualElementFromClick");
|
9
|
-
|
10
8
|
Object.defineProperty(exports, "createVirtualElementFromClick", {
|
11
9
|
enumerable: true,
|
12
10
|
get: function () {
|
13
11
|
return createVirtualElementFromClick_1.createVirtualElementFromClick;
|
14
12
|
}
|
15
13
|
});
|
16
|
-
|
17
14
|
var createArrowStyles_1 = /*#__PURE__*/require("./createArrowStyles");
|
18
|
-
|
19
15
|
Object.defineProperty(exports, "createArrowHeightStyles", {
|
20
16
|
enumerable: true,
|
21
17
|
get: function () {
|
@@ -28,27 +24,21 @@ Object.defineProperty(exports, "createArrowStyles", {
|
|
28
24
|
return createArrowStyles_1.createArrowStyles;
|
29
25
|
}
|
30
26
|
});
|
31
|
-
|
32
27
|
var usePositioning_1 = /*#__PURE__*/require("./usePositioning");
|
33
|
-
|
34
28
|
Object.defineProperty(exports, "usePositioning", {
|
35
29
|
enumerable: true,
|
36
30
|
get: function () {
|
37
31
|
return usePositioning_1.usePositioning;
|
38
32
|
}
|
39
33
|
});
|
40
|
-
|
41
34
|
var usePositioningMouseTarget_1 = /*#__PURE__*/require("./usePositioningMouseTarget");
|
42
|
-
|
43
35
|
Object.defineProperty(exports, "usePositioningMouseTarget", {
|
44
36
|
enumerable: true,
|
45
37
|
get: function () {
|
46
38
|
return usePositioningMouseTarget_1.usePositioningMouseTarget;
|
47
39
|
}
|
48
40
|
});
|
49
|
-
|
50
41
|
var index_1 = /*#__PURE__*/require("./utils/index");
|
51
|
-
|
52
42
|
Object.defineProperty(exports, "resolvePositioningShorthand", {
|
53
43
|
enumerable: true,
|
54
44
|
get: function () {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AAASA;EAAAC;EAAAC;IAAA,oEAA6B;EAAA;AAAA;AACtC;AAASF;EAAAC;EAAAC;IAAA,kDAAuB;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,4CAAiB;EAAA;AAAA;AAEnD;AAASF;EAAAC;EAAAC;IAAA,sCAAc;EAAA;AAAA;AACvB;AAASF;EAAAC;EAAAC;IAAA,4DAAyB;EAAA;AAAA;AAClC;AAASF;EAAAC;EAAAC;IAAA,0CAA2B;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,+BAAgB;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/index.ts"],"sourcesContent":["export { createVirtualElementFromClick } from './createVirtualElementFromClick';\nexport { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';\nexport type { CreateArrowStylesOptions } from './createArrowStyles';\nexport { usePositioning } from './usePositioning';\nexport { usePositioningMouseTarget } from './usePositioningMouseTarget';\nexport { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';\nexport type {\n Alignment,\n AutoSize,\n Boundary,\n Offset,\n OffsetFunction,\n OffsetFunctionParam,\n OffsetObject,\n OffsetShorthand,\n Position,\n PositioningImperativeRef,\n PositioningProps,\n PositioningShorthand,\n PositioningShorthandValue,\n PositioningVirtualElement,\n SetVirtualMouseTarget,\n} from './types';\n"]}
|
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.coverTarget = void 0;
|
7
|
-
|
8
7
|
const index_1 = /*#__PURE__*/require("../utils/index");
|
9
|
-
|
10
8
|
function coverTarget() {
|
11
9
|
return {
|
12
10
|
name: 'coverTarget',
|
@@ -22,29 +20,23 @@ function coverTarget() {
|
|
22
20
|
x,
|
23
21
|
y
|
24
22
|
};
|
25
|
-
|
26
23
|
switch (basePlacement) {
|
27
24
|
case 'bottom':
|
28
25
|
newCoords.y -= rects.reference.height;
|
29
26
|
break;
|
30
|
-
|
31
27
|
case 'top':
|
32
28
|
newCoords.y += rects.reference.height;
|
33
29
|
break;
|
34
|
-
|
35
30
|
case 'left':
|
36
31
|
newCoords.x += rects.reference.width;
|
37
32
|
break;
|
38
|
-
|
39
33
|
case 'right':
|
40
34
|
newCoords.x -= rects.reference.width;
|
41
35
|
break;
|
42
36
|
}
|
43
|
-
|
44
37
|
return newCoords;
|
45
38
|
}
|
46
39
|
};
|
47
40
|
}
|
48
|
-
|
49
41
|
exports.coverTarget = coverTarget;
|
50
42
|
//# sourceMappingURL=coverTarget.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":";;;;;;AACA;AAEA,SAAgBA,WAAW;EACzB,OAAO;IACLC,IAAI,EAAE,aAAa;IACnBC,EAAE,EAAEC,mBAAmB,IAAG;MACxB,MAAM;QAAEC,SAAS;QAAEC,KAAK;QAAEC,CAAC;QAAEC;MAAC,CAAE,GAAGJ,mBAAmB;MACtD,MAAMK,aAAa,GAAGC,gCAAwB,CAACL,SAAS,CAAC,CAACM,IAAI;MAC9D,MAAMC,SAAS,GAAG;QAAEL,CAAC;QAAEC;MAAC,CAAE;MAE1B,QAAQC,aAAa;QACnB,KAAK,QAAQ;UACXG,SAAS,CAACJ,CAAC,IAAIF,KAAK,CAACO,SAAS,CAACC,MAAM;UACrC;QACF,KAAK,KAAK;UACRF,SAAS,CAACJ,CAAC,IAAIF,KAAK,CAACO,SAAS,CAACC,MAAM;UACrC;QACF,KAAK,MAAM;UACTF,SAAS,CAACL,CAAC,IAAID,KAAK,CAACO,SAAS,CAACE,KAAK;UACpC;QACF,KAAK,OAAO;UACVH,SAAS,CAACL,CAAC,IAAID,KAAK,CAACO,SAAS,CAACE,KAAK;UACpC;MAAM;MAGV,OAAOH,SAAS;IAClB;GACD;AACH;AA1BAI","names":["coverTarget","name","fn","middlewareArguments","placement","rects","x","y","basePlacement","index_1","side","newCoords","reference","height","width","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/middleware/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"]}
|
@@ -4,18 +4,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.flip = void 0;
|
7
|
-
|
8
7
|
const dom_1 = /*#__PURE__*/require("@floating-ui/dom");
|
9
|
-
|
10
8
|
const index_1 = /*#__PURE__*/require("../utils/index");
|
11
|
-
|
12
9
|
function flip(options) {
|
13
10
|
const {
|
14
11
|
hasScrollableElement,
|
15
12
|
flipBoundary,
|
16
13
|
container
|
17
14
|
} = options;
|
18
|
-
return dom_1.flip({
|
15
|
+
return dom_1.flip({
|
16
|
+
...(hasScrollableElement && {
|
19
17
|
boundary: 'clippingAncestors'
|
20
18
|
}),
|
21
19
|
...(flipBoundary && {
|
@@ -25,6 +23,5 @@ function flip(options) {
|
|
25
23
|
fallbackStrategy: 'bestFit'
|
26
24
|
});
|
27
25
|
}
|
28
|
-
|
29
26
|
exports.flip = flip;
|
30
27
|
//# sourceMappingURL=flip.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AAEA;AAOA,SAAgBA,IAAI,CAACC,OAA8B;EACjD,MAAM;IAAEC,oBAAoB;IAAEC,YAAY;IAAEC;EAAS,CAAE,GAAGH,OAAO;EAEjE,OAAOI,UAAQ,CAAC;IACd,IAAIH,oBAAoB,IAAI;MAAEI,QAAQ,EAAE;IAAmB,CAAE,CAAC;IAC9D,IAAIH,YAAY,IAAI;MAAEI,WAAW,EAAE,IAAI;MAAED,QAAQ,EAAEE,mBAAW,CAACJ,SAAS,EAAED,YAAY;IAAC,CAAE,CAAC;IAC1FM,gBAAgB,EAAE;GACnB,CAAC;AACJ;AARAC","names":["flip","options","hasScrollableElement","flipBoundary","container","dom_1","boundary","altBoundary","index_1","fallbackStrategy","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/middleware/flip.ts"],"sourcesContent":["import { flip as baseFlip } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\nimport { getBoundary } from '../utils/index';\n\nexport interface FlipMiddlewareOptions extends Pick<PositioningOptions, 'flipBoundary'> {\n hasScrollableElement?: boolean;\n container: HTMLElement | null;\n}\n\nexport function flip(options: FlipMiddlewareOptions) {\n const { hasScrollableElement, flipBoundary, container } = options;\n\n return baseFlip({\n ...(hasScrollableElement && { boundary: 'clippingAncestors' }),\n ...(flipBoundary && { altBoundary: true, boundary: getBoundary(container, flipBoundary) }),\n fallbackStrategy: 'bestFit',\n });\n}\n"]}
|
@@ -3,18 +3,11 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
|
7
6
|
const tslib_1 = /*#__PURE__*/require("tslib");
|
8
|
-
|
9
7
|
tslib_1.__exportStar(require("./coverTarget"), exports);
|
10
|
-
|
11
8
|
tslib_1.__exportStar(require("./flip"), exports);
|
12
|
-
|
13
9
|
tslib_1.__exportStar(require("./intersecting"), exports);
|
14
|
-
|
15
10
|
tslib_1.__exportStar(require("./maxSize"), exports);
|
16
|
-
|
17
11
|
tslib_1.__exportStar(require("./offset"), exports);
|
18
|
-
|
19
12
|
tslib_1.__exportStar(require("./shift"), exports);
|
20
13
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-positioning/src/middleware/index.ts"],"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/middleware/index.ts"],"sourcesContent":["export * from './coverTarget';\nexport * from './flip';\nexport * from './intersecting';\nexport * from './maxSize';\nexport * from './offset';\nexport * from './shift';\n"]}
|
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.intersecting = void 0;
|
7
|
-
|
8
7
|
const dom_1 = /*#__PURE__*/require("@floating-ui/dom");
|
9
|
-
|
10
8
|
function intersecting() {
|
11
9
|
return {
|
12
10
|
name: 'intersectionObserver',
|
@@ -26,6 +24,5 @@ function intersecting() {
|
|
26
24
|
}
|
27
25
|
};
|
28
26
|
}
|
29
|
-
|
30
27
|
exports.intersecting = intersecting;
|
31
28
|
//# sourceMappingURL=intersecting.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":";;;;;;AACA;AAEA,SAAgBA,YAAY;EAC1B,OAAO;IACLC,IAAI,EAAE,sBAAsB;IAC5BC,EAAE,EAAE,MAAMC,mBAAmB,IAAG;MAC9B,MAAMC,YAAY,GAAGD,mBAAmB,CAACE,KAAK,CAACC,QAAQ;MACvD,MAAMC,WAAW,GAAG,MAAMC,oBAAc,CAACL,mBAAmB,EAAE;QAAEM,WAAW,EAAE;MAAI,CAAE,CAAC;MAEpF,MAAMC,iBAAiB,GAAGH,WAAW,CAACI,GAAG,GAAGP,YAAY,CAACQ,MAAM,IAAIL,WAAW,CAACI,GAAG,GAAG,CAAC;MACtF,MAAME,oBAAoB,GAAGN,WAAW,CAACO,MAAM,GAAGV,YAAY,CAACQ,MAAM,IAAIL,WAAW,CAACO,MAAM,GAAG,CAAC;MAE/F,MAAMC,cAAc,GAAGL,iBAAiB,IAAIG,oBAAoB;MAEhE,OAAO;QACLG,IAAI,EAAE;UACJhB,YAAY,EAAEe;;OAEjB;IACH;GACD;AACH;AAnBAE","names":["intersecting","name","fn","middlewareArguments","floatingRect","rects","floating","altOverflow","dom_1","altBoundary","isIntersectingTop","top","height","isIntersectingBottom","bottom","isIntersecting","data","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/middleware/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"]}
|
@@ -4,51 +4,40 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.maxSize = void 0;
|
7
|
-
|
8
7
|
const dom_1 = /*#__PURE__*/require("@floating-ui/dom");
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
x: 0,
|
29
|
-
y: 0
|
30
|
-
};
|
31
|
-
const {
|
32
|
-
width,
|
33
|
-
height
|
34
|
-
} = rects.floating;
|
35
|
-
const widthProp = basePlacement === 'left' ? 'left' : 'right';
|
36
|
-
const heightProp = basePlacement === 'top' ? 'top' : 'bottom';
|
37
|
-
const applyMaxWidth = autoSize === 'always' || autoSize === 'width-always' || overflow[widthProp] > 0 && (autoSize === true || autoSize === 'width');
|
38
|
-
const applyMaxHeight = autoSize === 'always' || autoSize === 'height-always' || overflow[heightProp] > 0 && (autoSize === true || autoSize === 'height');
|
39
|
-
|
40
|
-
if (applyMaxWidth) {
|
41
|
-
elements.floating.style.maxWidth = `${width - overflow[widthProp] - x}px`;
|
42
|
-
}
|
43
|
-
|
8
|
+
const getBoundary_1 = /*#__PURE__*/require("../utils/getBoundary");
|
9
|
+
function maxSize(autoSize, options) {
|
10
|
+
const {
|
11
|
+
container,
|
12
|
+
overflowBoundary
|
13
|
+
} = options;
|
14
|
+
return dom_1.size({
|
15
|
+
...(overflowBoundary && {
|
16
|
+
altBoundary: true,
|
17
|
+
boundary: getBoundary_1.getBoundary(container, overflowBoundary)
|
18
|
+
}),
|
19
|
+
apply({
|
20
|
+
availableHeight,
|
21
|
+
availableWidth,
|
22
|
+
elements,
|
23
|
+
rects
|
24
|
+
}) {
|
25
|
+
const applyMaxWidth = autoSize === 'always' || autoSize === 'width-always' || rects.floating.width > availableWidth && (autoSize === true || autoSize === 'width');
|
26
|
+
const applyMaxHeight = autoSize === 'always' || autoSize === 'height-always' || rects.floating.height > availableHeight && (autoSize === true || autoSize === 'height');
|
44
27
|
if (applyMaxHeight) {
|
45
|
-
elements.floating.style
|
28
|
+
Object.assign(elements.floating.style, {
|
29
|
+
maxHeight: `${availableHeight}px`,
|
30
|
+
boxSizing: 'border-box'
|
31
|
+
});
|
32
|
+
}
|
33
|
+
if (applyMaxWidth) {
|
34
|
+
Object.assign(elements.floating.style, {
|
35
|
+
maxWidth: `${availableWidth}px`,
|
36
|
+
boxSizing: 'border-box'
|
37
|
+
});
|
46
38
|
}
|
47
|
-
|
48
|
-
return {};
|
49
39
|
}
|
50
|
-
};
|
40
|
+
});
|
51
41
|
}
|
52
|
-
|
53
42
|
exports.maxSize = maxSize;
|
54
43
|
//# sourceMappingURL=maxSize.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AAGA;AAKA,SAAgBA,OAAO,CAACC,QAAwC,EAAEC,OAAiC;EACjG,MAAM;IAAEC,SAAS;IAAEC;EAAgB,CAAE,GAAGF,OAAO;EAC/C,OAAOG,UAAI,CAAC;IACV,IAAID,gBAAgB,IAAI;MAAEE,WAAW,EAAE,IAAI;MAAEC,QAAQ,EAAEC,yBAAW,CAACL,SAAS,EAAEC,gBAAgB;IAAC,CAAE,CAAC;IAClGK,KAAK,CAAC;MAAEC,eAAe;MAAEC,cAAc;MAAEC,QAAQ;MAAEC;IAAK,CAAE;MACxD,MAAMC,aAAa,GACjBb,QAAQ,KAAK,QAAQ,IACrBA,QAAQ,KAAK,cAAc,IAC1BY,KAAK,CAACE,QAAQ,CAACC,KAAK,GAAGL,cAAc,KAAKV,QAAQ,KAAK,IAAI,IAAIA,QAAQ,KAAK,OAAO,CAAE;MAExF,MAAMgB,cAAc,GAClBhB,QAAQ,KAAK,QAAQ,IACrBA,QAAQ,KAAK,eAAe,IAC3BY,KAAK,CAACE,QAAQ,CAACG,MAAM,GAAGR,eAAe,KAAKT,QAAQ,KAAK,IAAI,IAAIA,QAAQ,KAAK,QAAQ,CAAE;MAE3F,IAAIgB,cAAc,EAAE;QAClBE,MAAM,CAACC,MAAM,CAACR,QAAQ,CAACG,QAAQ,CAACM,KAAK,EAAE;UACrCC,SAAS,EAAE,GAAGZ,eAAe,IAAI;UACjCa,SAAS,EAAE;SACZ,CAAC;;MAGJ,IAAIT,aAAa,EAAE;QACjBK,MAAM,CAACC,MAAM,CAACR,QAAQ,CAACG,QAAQ,CAACM,KAAK,EAAE;UACrCG,QAAQ,EAAE,GAAGb,cAAc,IAAI;UAC/BY,SAAS,EAAE;SACZ,CAAC;;IAEN;GACD,CAAC;AACJ;AA9BAE","names":["maxSize","autoSize","options","container","overflowBoundary","dom_1","altBoundary","boundary","getBoundary_1","apply","availableHeight","availableWidth","elements","rects","applyMaxWidth","floating","width","applyMaxHeight","height","Object","assign","style","maxHeight","boxSizing","maxWidth","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/middleware/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(elements.floating.style, {\n maxHeight: `${availableHeight}px`,\n boxSizing: 'border-box',\n });\n }\n\n if (applyMaxWidth) {\n Object.assign(elements.floating.style, {\n maxWidth: `${availableWidth}px`,\n boxSizing: 'border-box',\n });\n }\n },\n });\n}\n"]}
|
@@ -4,19 +4,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.offset = void 0;
|
7
|
-
|
8
7
|
const dom_1 = /*#__PURE__*/require("@floating-ui/dom");
|
9
|
-
|
10
8
|
const getFloatingUIOffset_1 = /*#__PURE__*/require("../utils/getFloatingUIOffset");
|
11
9
|
/**
|
12
10
|
* Wraps floating UI offset middleware to to transform offset value
|
13
11
|
*/
|
14
|
-
|
15
|
-
|
16
12
|
function offset(offsetValue) {
|
17
13
|
const floatingUIOffset = getFloatingUIOffset_1.getFloatingUIOffset(offsetValue);
|
18
14
|
return dom_1.offset(floatingUIOffset);
|
19
15
|
}
|
20
|
-
|
21
16
|
exports.offset = offset;
|
22
17
|
//# sourceMappingURL=offset.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AAEA;AAEA;;;AAGA,SAAgBA,MAAM,CAACC,WAAyC;EAC9D,MAAMC,gBAAgB,GAAGC,yCAAmB,CAACF,WAAW,CAAC;EACzD,OAAOG,YAAU,CAACF,gBAAgB,CAAC;AACrC;AAHAG","names":["offset","offsetValue","floatingUIOffset","getFloatingUIOffset_1","dom_1","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/middleware/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"]}
|