@teamturing/react-kit 2.11.0 → 2.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/core/Button/index.d.ts +2 -2
- package/dist/core/IconButton/index.d.ts +2 -2
- package/dist/core/Overlay/index.d.ts +18 -0
- package/dist/core/OverlayPopper/index.d.ts +16 -0
- package/dist/hook/useFocusTrap.d.ts +13 -0
- package/dist/hook/useFocusZone.d.ts +15 -0
- package/dist/index.d.ts +8 -0
- package/dist/index.js +2523 -164
- package/esm/core/Button/index.js +2 -2
- package/esm/core/Dialog/index.js +8 -36
- package/esm/core/IconButton/index.js +1 -1
- package/esm/core/Overlay/index.js +92 -0
- package/esm/core/OverlayPopper/index.js +69 -0
- package/esm/hook/useFocusTrap.js +39 -0
- package/esm/hook/useFocusZone.js +35 -0
- package/esm/index.js +6 -0
- package/esm/node_modules/@floating-ui/core/dist/floating-ui.core.js +475 -0
- package/esm/node_modules/@floating-ui/dom/dist/floating-ui.dom.js +599 -0
- package/esm/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js +229 -0
- package/esm/node_modules/@floating-ui/utils/dist/floating-ui.utils.js +121 -0
- package/esm/node_modules/@floating-ui/utils/dom/dist/floating-ui.utils.dom.js +128 -0
- package/esm/node_modules/@primer/behaviors/dist/esm/focus-trap.js +105 -0
- package/esm/node_modules/@primer/behaviors/dist/esm/focus-zone.js +436 -0
- package/esm/node_modules/@primer/behaviors/dist/esm/polyfills/event-listener-signal.js +38 -0
- package/esm/node_modules/@primer/behaviors/dist/esm/utils/iterate-focusable-elements.js +65 -0
- package/esm/node_modules/@primer/behaviors/dist/esm/utils/unique-id.js +6 -0
- package/esm/node_modules/@primer/behaviors/dist/esm/utils/user-agent.js +9 -0
- package/package.json +5 -2
|
@@ -0,0 +1,475 @@
|
|
|
1
|
+
import { evaluate, getSide, getOppositePlacement, getExpandedPlacements, getOppositeAxisPlacements, getAlignmentSides, getSideAxis, clamp, getPaddingObject, rectToClientRect, getAlignment, getOppositeAxis, getAlignmentAxis, getAxisLength } from '../../utils/dist/floating-ui.utils.js';
|
|
2
|
+
|
|
3
|
+
function computeCoordsFromPlacement(_ref, placement, rtl) {
|
|
4
|
+
let {
|
|
5
|
+
reference,
|
|
6
|
+
floating
|
|
7
|
+
} = _ref;
|
|
8
|
+
const sideAxis = getSideAxis(placement);
|
|
9
|
+
const alignmentAxis = getAlignmentAxis(placement);
|
|
10
|
+
const alignLength = getAxisLength(alignmentAxis);
|
|
11
|
+
const side = getSide(placement);
|
|
12
|
+
const isVertical = sideAxis === 'y';
|
|
13
|
+
const commonX = reference.x + reference.width / 2 - floating.width / 2;
|
|
14
|
+
const commonY = reference.y + reference.height / 2 - floating.height / 2;
|
|
15
|
+
const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
|
|
16
|
+
let coords;
|
|
17
|
+
switch (side) {
|
|
18
|
+
case 'top':
|
|
19
|
+
coords = {
|
|
20
|
+
x: commonX,
|
|
21
|
+
y: reference.y - floating.height
|
|
22
|
+
};
|
|
23
|
+
break;
|
|
24
|
+
case 'bottom':
|
|
25
|
+
coords = {
|
|
26
|
+
x: commonX,
|
|
27
|
+
y: reference.y + reference.height
|
|
28
|
+
};
|
|
29
|
+
break;
|
|
30
|
+
case 'right':
|
|
31
|
+
coords = {
|
|
32
|
+
x: reference.x + reference.width,
|
|
33
|
+
y: commonY
|
|
34
|
+
};
|
|
35
|
+
break;
|
|
36
|
+
case 'left':
|
|
37
|
+
coords = {
|
|
38
|
+
x: reference.x - floating.width,
|
|
39
|
+
y: commonY
|
|
40
|
+
};
|
|
41
|
+
break;
|
|
42
|
+
default:
|
|
43
|
+
coords = {
|
|
44
|
+
x: reference.x,
|
|
45
|
+
y: reference.y
|
|
46
|
+
};
|
|
47
|
+
}
|
|
48
|
+
switch (getAlignment(placement)) {
|
|
49
|
+
case 'start':
|
|
50
|
+
coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
|
|
51
|
+
break;
|
|
52
|
+
case 'end':
|
|
53
|
+
coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
|
|
54
|
+
break;
|
|
55
|
+
}
|
|
56
|
+
return coords;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* Computes the `x` and `y` coordinates that will place the floating element
|
|
61
|
+
* next to a reference element when it is given a certain positioning strategy.
|
|
62
|
+
*
|
|
63
|
+
* This export does not have any `platform` interface logic. You will need to
|
|
64
|
+
* write one for the platform you are using Floating UI with.
|
|
65
|
+
*/
|
|
66
|
+
const computePosition = async (reference, floating, config) => {
|
|
67
|
+
const {
|
|
68
|
+
placement = 'bottom',
|
|
69
|
+
strategy = 'absolute',
|
|
70
|
+
middleware = [],
|
|
71
|
+
platform
|
|
72
|
+
} = config;
|
|
73
|
+
const validMiddleware = middleware.filter(Boolean);
|
|
74
|
+
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
|
|
75
|
+
let rects = await platform.getElementRects({
|
|
76
|
+
reference,
|
|
77
|
+
floating,
|
|
78
|
+
strategy
|
|
79
|
+
});
|
|
80
|
+
let {
|
|
81
|
+
x,
|
|
82
|
+
y
|
|
83
|
+
} = computeCoordsFromPlacement(rects, placement, rtl);
|
|
84
|
+
let statefulPlacement = placement;
|
|
85
|
+
let middlewareData = {};
|
|
86
|
+
let resetCount = 0;
|
|
87
|
+
for (let i = 0; i < validMiddleware.length; i++) {
|
|
88
|
+
const {
|
|
89
|
+
name,
|
|
90
|
+
fn
|
|
91
|
+
} = validMiddleware[i];
|
|
92
|
+
const {
|
|
93
|
+
x: nextX,
|
|
94
|
+
y: nextY,
|
|
95
|
+
data,
|
|
96
|
+
reset
|
|
97
|
+
} = await fn({
|
|
98
|
+
x,
|
|
99
|
+
y,
|
|
100
|
+
initialPlacement: placement,
|
|
101
|
+
placement: statefulPlacement,
|
|
102
|
+
strategy,
|
|
103
|
+
middlewareData,
|
|
104
|
+
rects,
|
|
105
|
+
platform,
|
|
106
|
+
elements: {
|
|
107
|
+
reference,
|
|
108
|
+
floating
|
|
109
|
+
}
|
|
110
|
+
});
|
|
111
|
+
x = nextX != null ? nextX : x;
|
|
112
|
+
y = nextY != null ? nextY : y;
|
|
113
|
+
middlewareData = {
|
|
114
|
+
...middlewareData,
|
|
115
|
+
[name]: {
|
|
116
|
+
...middlewareData[name],
|
|
117
|
+
...data
|
|
118
|
+
}
|
|
119
|
+
};
|
|
120
|
+
if (reset && resetCount <= 50) {
|
|
121
|
+
resetCount++;
|
|
122
|
+
if (typeof reset === 'object') {
|
|
123
|
+
if (reset.placement) {
|
|
124
|
+
statefulPlacement = reset.placement;
|
|
125
|
+
}
|
|
126
|
+
if (reset.rects) {
|
|
127
|
+
rects = reset.rects === true ? await platform.getElementRects({
|
|
128
|
+
reference,
|
|
129
|
+
floating,
|
|
130
|
+
strategy
|
|
131
|
+
}) : reset.rects;
|
|
132
|
+
}
|
|
133
|
+
({
|
|
134
|
+
x,
|
|
135
|
+
y
|
|
136
|
+
} = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
|
|
137
|
+
}
|
|
138
|
+
i = -1;
|
|
139
|
+
continue;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
return {
|
|
143
|
+
x,
|
|
144
|
+
y,
|
|
145
|
+
placement: statefulPlacement,
|
|
146
|
+
strategy,
|
|
147
|
+
middlewareData
|
|
148
|
+
};
|
|
149
|
+
};
|
|
150
|
+
|
|
151
|
+
/**
|
|
152
|
+
* Resolves with an object of overflow side offsets that determine how much the
|
|
153
|
+
* element is overflowing a given clipping boundary on each side.
|
|
154
|
+
* - positive = overflowing the boundary by that number of pixels
|
|
155
|
+
* - negative = how many pixels left before it will overflow
|
|
156
|
+
* - 0 = lies flush with the boundary
|
|
157
|
+
* @see https://floating-ui.com/docs/detectOverflow
|
|
158
|
+
*/
|
|
159
|
+
async function detectOverflow(state, options) {
|
|
160
|
+
var _await$platform$isEle;
|
|
161
|
+
if (options === void 0) {
|
|
162
|
+
options = {};
|
|
163
|
+
}
|
|
164
|
+
const {
|
|
165
|
+
x,
|
|
166
|
+
y,
|
|
167
|
+
platform,
|
|
168
|
+
rects,
|
|
169
|
+
elements,
|
|
170
|
+
strategy
|
|
171
|
+
} = state;
|
|
172
|
+
const {
|
|
173
|
+
boundary = 'clippingAncestors',
|
|
174
|
+
rootBoundary = 'viewport',
|
|
175
|
+
elementContext = 'floating',
|
|
176
|
+
altBoundary = false,
|
|
177
|
+
padding = 0
|
|
178
|
+
} = evaluate(options, state);
|
|
179
|
+
const paddingObject = getPaddingObject(padding);
|
|
180
|
+
const altContext = elementContext === 'floating' ? 'reference' : 'floating';
|
|
181
|
+
const element = elements[altBoundary ? altContext : elementContext];
|
|
182
|
+
const clippingClientRect = rectToClientRect(await platform.getClippingRect({
|
|
183
|
+
element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
|
|
184
|
+
boundary,
|
|
185
|
+
rootBoundary,
|
|
186
|
+
strategy
|
|
187
|
+
}));
|
|
188
|
+
const rect = elementContext === 'floating' ? {
|
|
189
|
+
...rects.floating,
|
|
190
|
+
x,
|
|
191
|
+
y
|
|
192
|
+
} : rects.reference;
|
|
193
|
+
const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
|
|
194
|
+
const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
|
|
195
|
+
x: 1,
|
|
196
|
+
y: 1
|
|
197
|
+
} : {
|
|
198
|
+
x: 1,
|
|
199
|
+
y: 1
|
|
200
|
+
};
|
|
201
|
+
const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
|
|
202
|
+
rect,
|
|
203
|
+
offsetParent,
|
|
204
|
+
strategy
|
|
205
|
+
}) : rect);
|
|
206
|
+
return {
|
|
207
|
+
top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
|
|
208
|
+
bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
|
|
209
|
+
left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
|
|
210
|
+
right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
|
|
211
|
+
};
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
/**
|
|
215
|
+
* Optimizes the visibility of the floating element by flipping the `placement`
|
|
216
|
+
* in order to keep it in view when the preferred placement(s) will overflow the
|
|
217
|
+
* clipping boundary. Alternative to `autoPlacement`.
|
|
218
|
+
* @see https://floating-ui.com/docs/flip
|
|
219
|
+
*/
|
|
220
|
+
const flip = function (options) {
|
|
221
|
+
if (options === void 0) {
|
|
222
|
+
options = {};
|
|
223
|
+
}
|
|
224
|
+
return {
|
|
225
|
+
name: 'flip',
|
|
226
|
+
options,
|
|
227
|
+
async fn(state) {
|
|
228
|
+
var _middlewareData$arrow, _middlewareData$flip;
|
|
229
|
+
const {
|
|
230
|
+
placement,
|
|
231
|
+
middlewareData,
|
|
232
|
+
rects,
|
|
233
|
+
initialPlacement,
|
|
234
|
+
platform,
|
|
235
|
+
elements
|
|
236
|
+
} = state;
|
|
237
|
+
const {
|
|
238
|
+
mainAxis: checkMainAxis = true,
|
|
239
|
+
crossAxis: checkCrossAxis = true,
|
|
240
|
+
fallbackPlacements: specifiedFallbackPlacements,
|
|
241
|
+
fallbackStrategy = 'bestFit',
|
|
242
|
+
fallbackAxisSideDirection = 'none',
|
|
243
|
+
flipAlignment = true,
|
|
244
|
+
...detectOverflowOptions
|
|
245
|
+
} = evaluate(options, state);
|
|
246
|
+
|
|
247
|
+
// If a reset by the arrow was caused due to an alignment offset being
|
|
248
|
+
// added, we should skip any logic now since `flip()` has already done its
|
|
249
|
+
// work.
|
|
250
|
+
// https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
|
|
251
|
+
if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
|
|
252
|
+
return {};
|
|
253
|
+
}
|
|
254
|
+
const side = getSide(placement);
|
|
255
|
+
const isBasePlacement = getSide(initialPlacement) === initialPlacement;
|
|
256
|
+
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
|
|
257
|
+
const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
|
|
258
|
+
if (!specifiedFallbackPlacements && fallbackAxisSideDirection !== 'none') {
|
|
259
|
+
fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
|
|
260
|
+
}
|
|
261
|
+
const placements = [initialPlacement, ...fallbackPlacements];
|
|
262
|
+
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
263
|
+
const overflows = [];
|
|
264
|
+
let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
|
|
265
|
+
if (checkMainAxis) {
|
|
266
|
+
overflows.push(overflow[side]);
|
|
267
|
+
}
|
|
268
|
+
if (checkCrossAxis) {
|
|
269
|
+
const sides = getAlignmentSides(placement, rects, rtl);
|
|
270
|
+
overflows.push(overflow[sides[0]], overflow[sides[1]]);
|
|
271
|
+
}
|
|
272
|
+
overflowsData = [...overflowsData, {
|
|
273
|
+
placement,
|
|
274
|
+
overflows
|
|
275
|
+
}];
|
|
276
|
+
|
|
277
|
+
// One or more sides is overflowing.
|
|
278
|
+
if (!overflows.every(side => side <= 0)) {
|
|
279
|
+
var _middlewareData$flip2, _overflowsData$filter;
|
|
280
|
+
const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
|
|
281
|
+
const nextPlacement = placements[nextIndex];
|
|
282
|
+
if (nextPlacement) {
|
|
283
|
+
// Try next placement and re-run the lifecycle.
|
|
284
|
+
return {
|
|
285
|
+
data: {
|
|
286
|
+
index: nextIndex,
|
|
287
|
+
overflows: overflowsData
|
|
288
|
+
},
|
|
289
|
+
reset: {
|
|
290
|
+
placement: nextPlacement
|
|
291
|
+
}
|
|
292
|
+
};
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
// First, find the candidates that fit on the mainAxis side of overflow,
|
|
296
|
+
// then find the placement that fits the best on the main crossAxis side.
|
|
297
|
+
let resetPlacement = (_overflowsData$filter = overflowsData.filter(d => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
|
|
298
|
+
|
|
299
|
+
// Otherwise fallback.
|
|
300
|
+
if (!resetPlacement) {
|
|
301
|
+
switch (fallbackStrategy) {
|
|
302
|
+
case 'bestFit':
|
|
303
|
+
{
|
|
304
|
+
var _overflowsData$map$so;
|
|
305
|
+
const placement = (_overflowsData$map$so = overflowsData.map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$map$so[0];
|
|
306
|
+
if (placement) {
|
|
307
|
+
resetPlacement = placement;
|
|
308
|
+
}
|
|
309
|
+
break;
|
|
310
|
+
}
|
|
311
|
+
case 'initialPlacement':
|
|
312
|
+
resetPlacement = initialPlacement;
|
|
313
|
+
break;
|
|
314
|
+
}
|
|
315
|
+
}
|
|
316
|
+
if (placement !== resetPlacement) {
|
|
317
|
+
return {
|
|
318
|
+
reset: {
|
|
319
|
+
placement: resetPlacement
|
|
320
|
+
}
|
|
321
|
+
};
|
|
322
|
+
}
|
|
323
|
+
}
|
|
324
|
+
return {};
|
|
325
|
+
}
|
|
326
|
+
};
|
|
327
|
+
};
|
|
328
|
+
|
|
329
|
+
// For type backwards-compatibility, the `OffsetOptions` type was also
|
|
330
|
+
// Derivable.
|
|
331
|
+
async function convertValueToCoords(state, options) {
|
|
332
|
+
const {
|
|
333
|
+
placement,
|
|
334
|
+
platform,
|
|
335
|
+
elements
|
|
336
|
+
} = state;
|
|
337
|
+
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
|
|
338
|
+
const side = getSide(placement);
|
|
339
|
+
const alignment = getAlignment(placement);
|
|
340
|
+
const isVertical = getSideAxis(placement) === 'y';
|
|
341
|
+
const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
|
|
342
|
+
const crossAxisMulti = rtl && isVertical ? -1 : 1;
|
|
343
|
+
const rawValue = evaluate(options, state);
|
|
344
|
+
|
|
345
|
+
// eslint-disable-next-line prefer-const
|
|
346
|
+
let {
|
|
347
|
+
mainAxis,
|
|
348
|
+
crossAxis,
|
|
349
|
+
alignmentAxis
|
|
350
|
+
} = typeof rawValue === 'number' ? {
|
|
351
|
+
mainAxis: rawValue,
|
|
352
|
+
crossAxis: 0,
|
|
353
|
+
alignmentAxis: null
|
|
354
|
+
} : {
|
|
355
|
+
mainAxis: 0,
|
|
356
|
+
crossAxis: 0,
|
|
357
|
+
alignmentAxis: null,
|
|
358
|
+
...rawValue
|
|
359
|
+
};
|
|
360
|
+
if (alignment && typeof alignmentAxis === 'number') {
|
|
361
|
+
crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
|
|
362
|
+
}
|
|
363
|
+
return isVertical ? {
|
|
364
|
+
x: crossAxis * crossAxisMulti,
|
|
365
|
+
y: mainAxis * mainAxisMulti
|
|
366
|
+
} : {
|
|
367
|
+
x: mainAxis * mainAxisMulti,
|
|
368
|
+
y: crossAxis * crossAxisMulti
|
|
369
|
+
};
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
/**
|
|
373
|
+
* Modifies the placement by translating the floating element along the
|
|
374
|
+
* specified axes.
|
|
375
|
+
* A number (shorthand for `mainAxis` or distance), or an axes configuration
|
|
376
|
+
* object may be passed.
|
|
377
|
+
* @see https://floating-ui.com/docs/offset
|
|
378
|
+
*/
|
|
379
|
+
const offset = function (options) {
|
|
380
|
+
if (options === void 0) {
|
|
381
|
+
options = 0;
|
|
382
|
+
}
|
|
383
|
+
return {
|
|
384
|
+
name: 'offset',
|
|
385
|
+
options,
|
|
386
|
+
async fn(state) {
|
|
387
|
+
const {
|
|
388
|
+
x,
|
|
389
|
+
y
|
|
390
|
+
} = state;
|
|
391
|
+
const diffCoords = await convertValueToCoords(state, options);
|
|
392
|
+
return {
|
|
393
|
+
x: x + diffCoords.x,
|
|
394
|
+
y: y + diffCoords.y,
|
|
395
|
+
data: diffCoords
|
|
396
|
+
};
|
|
397
|
+
}
|
|
398
|
+
};
|
|
399
|
+
};
|
|
400
|
+
|
|
401
|
+
/**
|
|
402
|
+
* Optimizes the visibility of the floating element by shifting it in order to
|
|
403
|
+
* keep it in view when it will overflow the clipping boundary.
|
|
404
|
+
* @see https://floating-ui.com/docs/shift
|
|
405
|
+
*/
|
|
406
|
+
const shift = function (options) {
|
|
407
|
+
if (options === void 0) {
|
|
408
|
+
options = {};
|
|
409
|
+
}
|
|
410
|
+
return {
|
|
411
|
+
name: 'shift',
|
|
412
|
+
options,
|
|
413
|
+
async fn(state) {
|
|
414
|
+
const {
|
|
415
|
+
x,
|
|
416
|
+
y,
|
|
417
|
+
placement
|
|
418
|
+
} = state;
|
|
419
|
+
const {
|
|
420
|
+
mainAxis: checkMainAxis = true,
|
|
421
|
+
crossAxis: checkCrossAxis = false,
|
|
422
|
+
limiter = {
|
|
423
|
+
fn: _ref => {
|
|
424
|
+
let {
|
|
425
|
+
x,
|
|
426
|
+
y
|
|
427
|
+
} = _ref;
|
|
428
|
+
return {
|
|
429
|
+
x,
|
|
430
|
+
y
|
|
431
|
+
};
|
|
432
|
+
}
|
|
433
|
+
},
|
|
434
|
+
...detectOverflowOptions
|
|
435
|
+
} = evaluate(options, state);
|
|
436
|
+
const coords = {
|
|
437
|
+
x,
|
|
438
|
+
y
|
|
439
|
+
};
|
|
440
|
+
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
441
|
+
const crossAxis = getSideAxis(getSide(placement));
|
|
442
|
+
const mainAxis = getOppositeAxis(crossAxis);
|
|
443
|
+
let mainAxisCoord = coords[mainAxis];
|
|
444
|
+
let crossAxisCoord = coords[crossAxis];
|
|
445
|
+
if (checkMainAxis) {
|
|
446
|
+
const minSide = mainAxis === 'y' ? 'top' : 'left';
|
|
447
|
+
const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
|
|
448
|
+
const min = mainAxisCoord + overflow[minSide];
|
|
449
|
+
const max = mainAxisCoord - overflow[maxSide];
|
|
450
|
+
mainAxisCoord = clamp(min, mainAxisCoord, max);
|
|
451
|
+
}
|
|
452
|
+
if (checkCrossAxis) {
|
|
453
|
+
const minSide = crossAxis === 'y' ? 'top' : 'left';
|
|
454
|
+
const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
|
|
455
|
+
const min = crossAxisCoord + overflow[minSide];
|
|
456
|
+
const max = crossAxisCoord - overflow[maxSide];
|
|
457
|
+
crossAxisCoord = clamp(min, crossAxisCoord, max);
|
|
458
|
+
}
|
|
459
|
+
const limitedCoords = limiter.fn({
|
|
460
|
+
...state,
|
|
461
|
+
[mainAxis]: mainAxisCoord,
|
|
462
|
+
[crossAxis]: crossAxisCoord
|
|
463
|
+
});
|
|
464
|
+
return {
|
|
465
|
+
...limitedCoords,
|
|
466
|
+
data: {
|
|
467
|
+
x: limitedCoords.x - x,
|
|
468
|
+
y: limitedCoords.y - y
|
|
469
|
+
}
|
|
470
|
+
};
|
|
471
|
+
}
|
|
472
|
+
};
|
|
473
|
+
};
|
|
474
|
+
|
|
475
|
+
export { computePosition, detectOverflow, flip, offset, rectToClientRect, shift };
|