@teamturing/react-kit 2.12.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.
@@ -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 };