@x-plat/design-system 0.14.11 → 0.14.12
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/components/Dropdown/index.cjs +15 -6
- package/dist/components/Dropdown/index.js +15 -6
- package/dist/components/PopOver/index.cjs +15 -6
- package/dist/components/PopOver/index.js +15 -6
- package/dist/components/Select/index.cjs +15 -6
- package/dist/components/Select/index.css +6 -4
- package/dist/components/Select/index.js +15 -6
- package/dist/components/TimePicker/index.cjs +15 -6
- package/dist/components/TimePicker/index.js +15 -6
- package/dist/components/index.cjs +15 -6
- package/dist/components/index.css +6 -4
- package/dist/components/index.js +15 -6
- package/dist/index.cjs +15 -6
- package/dist/index.css +6 -4
- package/dist/index.js +15 -6
- package/package.json +1 -1
|
@@ -60,6 +60,7 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
|
|
|
60
60
|
const roomAbove = triggerRect.top - clip.top;
|
|
61
61
|
let direction;
|
|
62
62
|
let top;
|
|
63
|
+
let maxHeight = null;
|
|
63
64
|
if (popH <= roomBelow) {
|
|
64
65
|
direction = "bottom";
|
|
65
66
|
top = triggerRect.bottom;
|
|
@@ -67,24 +68,31 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
|
|
|
67
68
|
direction = "top";
|
|
68
69
|
top = triggerRect.top - popH;
|
|
69
70
|
} else {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
71
|
+
const room = Math.max(roomBelow, roomAbove, 0);
|
|
72
|
+
if (roomBelow >= roomAbove) {
|
|
73
|
+
direction = "bottom";
|
|
74
|
+
top = triggerRect.bottom;
|
|
75
|
+
} else {
|
|
76
|
+
direction = "top";
|
|
77
|
+
top = triggerRect.top - room;
|
|
78
|
+
}
|
|
79
|
+
maxHeight = room;
|
|
74
80
|
}
|
|
75
81
|
let left = triggerRect.left;
|
|
76
82
|
if (left + popW > clip.right - 8) {
|
|
77
83
|
left = triggerRect.right - popW;
|
|
78
84
|
}
|
|
79
85
|
if (left < clip.left + 8) left = clip.left + 8;
|
|
86
|
+
const drawnH = maxHeight === null ? popH : Math.min(popH, maxHeight);
|
|
80
87
|
return {
|
|
81
88
|
direction,
|
|
82
89
|
top,
|
|
83
90
|
left,
|
|
91
|
+
maxHeight,
|
|
84
92
|
over: {
|
|
85
93
|
top: Math.max(0, clip.top - top),
|
|
86
94
|
right: Math.max(0, left + popW - clip.right),
|
|
87
|
-
bottom: Math.max(0, top +
|
|
95
|
+
bottom: Math.max(0, top + drawnH - clip.bottom),
|
|
88
96
|
left: Math.max(0, clip.left - left)
|
|
89
97
|
}
|
|
90
98
|
};
|
|
@@ -113,7 +121,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
|
113
121
|
left: Math.max(parentRect?.left ?? 0, 0),
|
|
114
122
|
right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
|
|
115
123
|
};
|
|
116
|
-
const { direction: next, top, left, over } = computePlacement(
|
|
124
|
+
const { direction: next, top, left, over, maxHeight } = computePlacement(
|
|
117
125
|
triggerRect,
|
|
118
126
|
popW,
|
|
119
127
|
popH,
|
|
@@ -121,6 +129,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
|
121
129
|
);
|
|
122
130
|
pop.style.top = `${top + window.scrollY}px`;
|
|
123
131
|
pop.style.left = `${left + window.scrollX}px`;
|
|
132
|
+
pop.style.maxHeight = maxHeight === null ? "" : `${maxHeight}px`;
|
|
124
133
|
pop.style.clipPath = over.top || over.right || over.bottom || over.left ? `inset(${over.top}px ${over.right}px ${over.bottom}px ${over.left}px)` : "none";
|
|
125
134
|
if (next !== directionRef.current) {
|
|
126
135
|
directionRef.current = next;
|
|
@@ -24,6 +24,7 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
|
|
|
24
24
|
const roomAbove = triggerRect.top - clip.top;
|
|
25
25
|
let direction;
|
|
26
26
|
let top;
|
|
27
|
+
let maxHeight = null;
|
|
27
28
|
if (popH <= roomBelow) {
|
|
28
29
|
direction = "bottom";
|
|
29
30
|
top = triggerRect.bottom;
|
|
@@ -31,24 +32,31 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
|
|
|
31
32
|
direction = "top";
|
|
32
33
|
top = triggerRect.top - popH;
|
|
33
34
|
} else {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
35
|
+
const room = Math.max(roomBelow, roomAbove, 0);
|
|
36
|
+
if (roomBelow >= roomAbove) {
|
|
37
|
+
direction = "bottom";
|
|
38
|
+
top = triggerRect.bottom;
|
|
39
|
+
} else {
|
|
40
|
+
direction = "top";
|
|
41
|
+
top = triggerRect.top - room;
|
|
42
|
+
}
|
|
43
|
+
maxHeight = room;
|
|
38
44
|
}
|
|
39
45
|
let left = triggerRect.left;
|
|
40
46
|
if (left + popW > clip.right - 8) {
|
|
41
47
|
left = triggerRect.right - popW;
|
|
42
48
|
}
|
|
43
49
|
if (left < clip.left + 8) left = clip.left + 8;
|
|
50
|
+
const drawnH = maxHeight === null ? popH : Math.min(popH, maxHeight);
|
|
44
51
|
return {
|
|
45
52
|
direction,
|
|
46
53
|
top,
|
|
47
54
|
left,
|
|
55
|
+
maxHeight,
|
|
48
56
|
over: {
|
|
49
57
|
top: Math.max(0, clip.top - top),
|
|
50
58
|
right: Math.max(0, left + popW - clip.right),
|
|
51
|
-
bottom: Math.max(0, top +
|
|
59
|
+
bottom: Math.max(0, top + drawnH - clip.bottom),
|
|
52
60
|
left: Math.max(0, clip.left - left)
|
|
53
61
|
}
|
|
54
62
|
};
|
|
@@ -77,7 +85,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
|
77
85
|
left: Math.max(parentRect?.left ?? 0, 0),
|
|
78
86
|
right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
|
|
79
87
|
};
|
|
80
|
-
const { direction: next, top, left, over } = computePlacement(
|
|
88
|
+
const { direction: next, top, left, over, maxHeight } = computePlacement(
|
|
81
89
|
triggerRect,
|
|
82
90
|
popW,
|
|
83
91
|
popH,
|
|
@@ -85,6 +93,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
|
85
93
|
);
|
|
86
94
|
pop.style.top = `${top + window.scrollY}px`;
|
|
87
95
|
pop.style.left = `${left + window.scrollX}px`;
|
|
96
|
+
pop.style.maxHeight = maxHeight === null ? "" : `${maxHeight}px`;
|
|
88
97
|
pop.style.clipPath = over.top || over.right || over.bottom || over.left ? `inset(${over.top}px ${over.right}px ${over.bottom}px ${over.left}px)` : "none";
|
|
89
98
|
if (next !== directionRef.current) {
|
|
90
99
|
directionRef.current = next;
|
|
@@ -60,6 +60,7 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
|
|
|
60
60
|
const roomAbove = triggerRect.top - clip.top;
|
|
61
61
|
let direction;
|
|
62
62
|
let top;
|
|
63
|
+
let maxHeight = null;
|
|
63
64
|
if (popH <= roomBelow) {
|
|
64
65
|
direction = "bottom";
|
|
65
66
|
top = triggerRect.bottom;
|
|
@@ -67,24 +68,31 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
|
|
|
67
68
|
direction = "top";
|
|
68
69
|
top = triggerRect.top - popH;
|
|
69
70
|
} else {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
71
|
+
const room = Math.max(roomBelow, roomAbove, 0);
|
|
72
|
+
if (roomBelow >= roomAbove) {
|
|
73
|
+
direction = "bottom";
|
|
74
|
+
top = triggerRect.bottom;
|
|
75
|
+
} else {
|
|
76
|
+
direction = "top";
|
|
77
|
+
top = triggerRect.top - room;
|
|
78
|
+
}
|
|
79
|
+
maxHeight = room;
|
|
74
80
|
}
|
|
75
81
|
let left = triggerRect.left;
|
|
76
82
|
if (left + popW > clip.right - 8) {
|
|
77
83
|
left = triggerRect.right - popW;
|
|
78
84
|
}
|
|
79
85
|
if (left < clip.left + 8) left = clip.left + 8;
|
|
86
|
+
const drawnH = maxHeight === null ? popH : Math.min(popH, maxHeight);
|
|
80
87
|
return {
|
|
81
88
|
direction,
|
|
82
89
|
top,
|
|
83
90
|
left,
|
|
91
|
+
maxHeight,
|
|
84
92
|
over: {
|
|
85
93
|
top: Math.max(0, clip.top - top),
|
|
86
94
|
right: Math.max(0, left + popW - clip.right),
|
|
87
|
-
bottom: Math.max(0, top +
|
|
95
|
+
bottom: Math.max(0, top + drawnH - clip.bottom),
|
|
88
96
|
left: Math.max(0, clip.left - left)
|
|
89
97
|
}
|
|
90
98
|
};
|
|
@@ -113,7 +121,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
|
113
121
|
left: Math.max(parentRect?.left ?? 0, 0),
|
|
114
122
|
right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
|
|
115
123
|
};
|
|
116
|
-
const { direction: next, top, left, over } = computePlacement(
|
|
124
|
+
const { direction: next, top, left, over, maxHeight } = computePlacement(
|
|
117
125
|
triggerRect,
|
|
118
126
|
popW,
|
|
119
127
|
popH,
|
|
@@ -121,6 +129,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
|
121
129
|
);
|
|
122
130
|
pop.style.top = `${top + window.scrollY}px`;
|
|
123
131
|
pop.style.left = `${left + window.scrollX}px`;
|
|
132
|
+
pop.style.maxHeight = maxHeight === null ? "" : `${maxHeight}px`;
|
|
124
133
|
pop.style.clipPath = over.top || over.right || over.bottom || over.left ? `inset(${over.top}px ${over.right}px ${over.bottom}px ${over.left}px)` : "none";
|
|
125
134
|
if (next !== directionRef.current) {
|
|
126
135
|
directionRef.current = next;
|
|
@@ -24,6 +24,7 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
|
|
|
24
24
|
const roomAbove = triggerRect.top - clip.top;
|
|
25
25
|
let direction;
|
|
26
26
|
let top;
|
|
27
|
+
let maxHeight = null;
|
|
27
28
|
if (popH <= roomBelow) {
|
|
28
29
|
direction = "bottom";
|
|
29
30
|
top = triggerRect.bottom;
|
|
@@ -31,24 +32,31 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
|
|
|
31
32
|
direction = "top";
|
|
32
33
|
top = triggerRect.top - popH;
|
|
33
34
|
} else {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
35
|
+
const room = Math.max(roomBelow, roomAbove, 0);
|
|
36
|
+
if (roomBelow >= roomAbove) {
|
|
37
|
+
direction = "bottom";
|
|
38
|
+
top = triggerRect.bottom;
|
|
39
|
+
} else {
|
|
40
|
+
direction = "top";
|
|
41
|
+
top = triggerRect.top - room;
|
|
42
|
+
}
|
|
43
|
+
maxHeight = room;
|
|
38
44
|
}
|
|
39
45
|
let left = triggerRect.left;
|
|
40
46
|
if (left + popW > clip.right - 8) {
|
|
41
47
|
left = triggerRect.right - popW;
|
|
42
48
|
}
|
|
43
49
|
if (left < clip.left + 8) left = clip.left + 8;
|
|
50
|
+
const drawnH = maxHeight === null ? popH : Math.min(popH, maxHeight);
|
|
44
51
|
return {
|
|
45
52
|
direction,
|
|
46
53
|
top,
|
|
47
54
|
left,
|
|
55
|
+
maxHeight,
|
|
48
56
|
over: {
|
|
49
57
|
top: Math.max(0, clip.top - top),
|
|
50
58
|
right: Math.max(0, left + popW - clip.right),
|
|
51
|
-
bottom: Math.max(0, top +
|
|
59
|
+
bottom: Math.max(0, top + drawnH - clip.bottom),
|
|
52
60
|
left: Math.max(0, clip.left - left)
|
|
53
61
|
}
|
|
54
62
|
};
|
|
@@ -77,7 +85,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
|
77
85
|
left: Math.max(parentRect?.left ?? 0, 0),
|
|
78
86
|
right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
|
|
79
87
|
};
|
|
80
|
-
const { direction: next, top, left, over } = computePlacement(
|
|
88
|
+
const { direction: next, top, left, over, maxHeight } = computePlacement(
|
|
81
89
|
triggerRect,
|
|
82
90
|
popW,
|
|
83
91
|
popH,
|
|
@@ -85,6 +93,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
|
85
93
|
);
|
|
86
94
|
pop.style.top = `${top + window.scrollY}px`;
|
|
87
95
|
pop.style.left = `${left + window.scrollX}px`;
|
|
96
|
+
pop.style.maxHeight = maxHeight === null ? "" : `${maxHeight}px`;
|
|
88
97
|
pop.style.clipPath = over.top || over.right || over.bottom || over.left ? `inset(${over.top}px ${over.right}px ${over.bottom}px ${over.left}px)` : "none";
|
|
89
98
|
if (next !== directionRef.current) {
|
|
90
99
|
directionRef.current = next;
|
|
@@ -61,6 +61,7 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
|
|
|
61
61
|
const roomAbove = triggerRect.top - clip.top;
|
|
62
62
|
let direction;
|
|
63
63
|
let top;
|
|
64
|
+
let maxHeight = null;
|
|
64
65
|
if (popH <= roomBelow) {
|
|
65
66
|
direction = "bottom";
|
|
66
67
|
top = triggerRect.bottom;
|
|
@@ -68,24 +69,31 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
|
|
|
68
69
|
direction = "top";
|
|
69
70
|
top = triggerRect.top - popH;
|
|
70
71
|
} else {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
72
|
+
const room = Math.max(roomBelow, roomAbove, 0);
|
|
73
|
+
if (roomBelow >= roomAbove) {
|
|
74
|
+
direction = "bottom";
|
|
75
|
+
top = triggerRect.bottom;
|
|
76
|
+
} else {
|
|
77
|
+
direction = "top";
|
|
78
|
+
top = triggerRect.top - room;
|
|
79
|
+
}
|
|
80
|
+
maxHeight = room;
|
|
75
81
|
}
|
|
76
82
|
let left = triggerRect.left;
|
|
77
83
|
if (left + popW > clip.right - 8) {
|
|
78
84
|
left = triggerRect.right - popW;
|
|
79
85
|
}
|
|
80
86
|
if (left < clip.left + 8) left = clip.left + 8;
|
|
87
|
+
const drawnH = maxHeight === null ? popH : Math.min(popH, maxHeight);
|
|
81
88
|
return {
|
|
82
89
|
direction,
|
|
83
90
|
top,
|
|
84
91
|
left,
|
|
92
|
+
maxHeight,
|
|
85
93
|
over: {
|
|
86
94
|
top: Math.max(0, clip.top - top),
|
|
87
95
|
right: Math.max(0, left + popW - clip.right),
|
|
88
|
-
bottom: Math.max(0, top +
|
|
96
|
+
bottom: Math.max(0, top + drawnH - clip.bottom),
|
|
89
97
|
left: Math.max(0, clip.left - left)
|
|
90
98
|
}
|
|
91
99
|
};
|
|
@@ -114,7 +122,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
|
114
122
|
left: Math.max(parentRect?.left ?? 0, 0),
|
|
115
123
|
right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
|
|
116
124
|
};
|
|
117
|
-
const { direction: next, top, left, over } = computePlacement(
|
|
125
|
+
const { direction: next, top, left, over, maxHeight } = computePlacement(
|
|
118
126
|
triggerRect,
|
|
119
127
|
popW,
|
|
120
128
|
popH,
|
|
@@ -122,6 +130,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
|
122
130
|
);
|
|
123
131
|
pop.style.top = `${top + window.scrollY}px`;
|
|
124
132
|
pop.style.left = `${left + window.scrollX}px`;
|
|
133
|
+
pop.style.maxHeight = maxHeight === null ? "" : `${maxHeight}px`;
|
|
125
134
|
pop.style.clipPath = over.top || over.right || over.bottom || over.left ? `inset(${over.top}px ${over.right}px ${over.bottom}px ${over.left}px)` : "none";
|
|
126
135
|
if (next !== directionRef.current) {
|
|
127
136
|
directionRef.current = next;
|
|
@@ -212,7 +212,7 @@
|
|
|
212
212
|
transition: transform 0.2s ease, opacity 0.2s ease;
|
|
213
213
|
}
|
|
214
214
|
.lib-xplat-select-content.bottom {
|
|
215
|
-
transform: translateY(
|
|
215
|
+
transform: translateY(8px);
|
|
216
216
|
}
|
|
217
217
|
.lib-xplat-select-content.bottom.visible {
|
|
218
218
|
opacity: 1;
|
|
@@ -220,10 +220,12 @@
|
|
|
220
220
|
}
|
|
221
221
|
.lib-xplat-select-content.bottom.exit {
|
|
222
222
|
opacity: 0;
|
|
223
|
-
transform: translateY(
|
|
223
|
+
transform: translateY(8px);
|
|
224
|
+
}
|
|
225
|
+
.lib-xplat-select-content {
|
|
224
226
|
}
|
|
225
227
|
.lib-xplat-select-content.top {
|
|
226
|
-
transform: translateY(8px);
|
|
228
|
+
transform: translateY(-8px);
|
|
227
229
|
}
|
|
228
230
|
.lib-xplat-select-content.top.visible {
|
|
229
231
|
opacity: 1;
|
|
@@ -231,7 +233,7 @@
|
|
|
231
233
|
}
|
|
232
234
|
.lib-xplat-select-content.top.exit {
|
|
233
235
|
opacity: 0;
|
|
234
|
-
transform: translateY(8px);
|
|
236
|
+
transform: translateY(-8px);
|
|
235
237
|
}
|
|
236
238
|
.lib-xplat-select-content.sm .select-item {
|
|
237
239
|
padding: var(--spacing-space-2) var(--spacing-space-2);
|
|
@@ -24,6 +24,7 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
|
|
|
24
24
|
const roomAbove = triggerRect.top - clip.top;
|
|
25
25
|
let direction;
|
|
26
26
|
let top;
|
|
27
|
+
let maxHeight = null;
|
|
27
28
|
if (popH <= roomBelow) {
|
|
28
29
|
direction = "bottom";
|
|
29
30
|
top = triggerRect.bottom;
|
|
@@ -31,24 +32,31 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
|
|
|
31
32
|
direction = "top";
|
|
32
33
|
top = triggerRect.top - popH;
|
|
33
34
|
} else {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
35
|
+
const room = Math.max(roomBelow, roomAbove, 0);
|
|
36
|
+
if (roomBelow >= roomAbove) {
|
|
37
|
+
direction = "bottom";
|
|
38
|
+
top = triggerRect.bottom;
|
|
39
|
+
} else {
|
|
40
|
+
direction = "top";
|
|
41
|
+
top = triggerRect.top - room;
|
|
42
|
+
}
|
|
43
|
+
maxHeight = room;
|
|
38
44
|
}
|
|
39
45
|
let left = triggerRect.left;
|
|
40
46
|
if (left + popW > clip.right - 8) {
|
|
41
47
|
left = triggerRect.right - popW;
|
|
42
48
|
}
|
|
43
49
|
if (left < clip.left + 8) left = clip.left + 8;
|
|
50
|
+
const drawnH = maxHeight === null ? popH : Math.min(popH, maxHeight);
|
|
44
51
|
return {
|
|
45
52
|
direction,
|
|
46
53
|
top,
|
|
47
54
|
left,
|
|
55
|
+
maxHeight,
|
|
48
56
|
over: {
|
|
49
57
|
top: Math.max(0, clip.top - top),
|
|
50
58
|
right: Math.max(0, left + popW - clip.right),
|
|
51
|
-
bottom: Math.max(0, top +
|
|
59
|
+
bottom: Math.max(0, top + drawnH - clip.bottom),
|
|
52
60
|
left: Math.max(0, clip.left - left)
|
|
53
61
|
}
|
|
54
62
|
};
|
|
@@ -77,7 +85,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
|
77
85
|
left: Math.max(parentRect?.left ?? 0, 0),
|
|
78
86
|
right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
|
|
79
87
|
};
|
|
80
|
-
const { direction: next, top, left, over } = computePlacement(
|
|
88
|
+
const { direction: next, top, left, over, maxHeight } = computePlacement(
|
|
81
89
|
triggerRect,
|
|
82
90
|
popW,
|
|
83
91
|
popH,
|
|
@@ -85,6 +93,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
|
85
93
|
);
|
|
86
94
|
pop.style.top = `${top + window.scrollY}px`;
|
|
87
95
|
pop.style.left = `${left + window.scrollX}px`;
|
|
96
|
+
pop.style.maxHeight = maxHeight === null ? "" : `${maxHeight}px`;
|
|
88
97
|
pop.style.clipPath = over.top || over.right || over.bottom || over.left ? `inset(${over.top}px ${over.right}px ${over.bottom}px ${over.left}px)` : "none";
|
|
89
98
|
if (next !== directionRef.current) {
|
|
90
99
|
directionRef.current = next;
|
|
@@ -60,6 +60,7 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
|
|
|
60
60
|
const roomAbove = triggerRect.top - clip.top;
|
|
61
61
|
let direction;
|
|
62
62
|
let top;
|
|
63
|
+
let maxHeight = null;
|
|
63
64
|
if (popH <= roomBelow) {
|
|
64
65
|
direction = "bottom";
|
|
65
66
|
top = triggerRect.bottom;
|
|
@@ -67,24 +68,31 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
|
|
|
67
68
|
direction = "top";
|
|
68
69
|
top = triggerRect.top - popH;
|
|
69
70
|
} else {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
71
|
+
const room = Math.max(roomBelow, roomAbove, 0);
|
|
72
|
+
if (roomBelow >= roomAbove) {
|
|
73
|
+
direction = "bottom";
|
|
74
|
+
top = triggerRect.bottom;
|
|
75
|
+
} else {
|
|
76
|
+
direction = "top";
|
|
77
|
+
top = triggerRect.top - room;
|
|
78
|
+
}
|
|
79
|
+
maxHeight = room;
|
|
74
80
|
}
|
|
75
81
|
let left = triggerRect.left;
|
|
76
82
|
if (left + popW > clip.right - 8) {
|
|
77
83
|
left = triggerRect.right - popW;
|
|
78
84
|
}
|
|
79
85
|
if (left < clip.left + 8) left = clip.left + 8;
|
|
86
|
+
const drawnH = maxHeight === null ? popH : Math.min(popH, maxHeight);
|
|
80
87
|
return {
|
|
81
88
|
direction,
|
|
82
89
|
top,
|
|
83
90
|
left,
|
|
91
|
+
maxHeight,
|
|
84
92
|
over: {
|
|
85
93
|
top: Math.max(0, clip.top - top),
|
|
86
94
|
right: Math.max(0, left + popW - clip.right),
|
|
87
|
-
bottom: Math.max(0, top +
|
|
95
|
+
bottom: Math.max(0, top + drawnH - clip.bottom),
|
|
88
96
|
left: Math.max(0, clip.left - left)
|
|
89
97
|
}
|
|
90
98
|
};
|
|
@@ -113,7 +121,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
|
113
121
|
left: Math.max(parentRect?.left ?? 0, 0),
|
|
114
122
|
right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
|
|
115
123
|
};
|
|
116
|
-
const { direction: next, top, left, over } = computePlacement(
|
|
124
|
+
const { direction: next, top, left, over, maxHeight } = computePlacement(
|
|
117
125
|
triggerRect,
|
|
118
126
|
popW,
|
|
119
127
|
popH,
|
|
@@ -121,6 +129,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
|
121
129
|
);
|
|
122
130
|
pop.style.top = `${top + window.scrollY}px`;
|
|
123
131
|
pop.style.left = `${left + window.scrollX}px`;
|
|
132
|
+
pop.style.maxHeight = maxHeight === null ? "" : `${maxHeight}px`;
|
|
124
133
|
pop.style.clipPath = over.top || over.right || over.bottom || over.left ? `inset(${over.top}px ${over.right}px ${over.bottom}px ${over.left}px)` : "none";
|
|
125
134
|
if (next !== directionRef.current) {
|
|
126
135
|
directionRef.current = next;
|
|
@@ -24,6 +24,7 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
|
|
|
24
24
|
const roomAbove = triggerRect.top - clip.top;
|
|
25
25
|
let direction;
|
|
26
26
|
let top;
|
|
27
|
+
let maxHeight = null;
|
|
27
28
|
if (popH <= roomBelow) {
|
|
28
29
|
direction = "bottom";
|
|
29
30
|
top = triggerRect.bottom;
|
|
@@ -31,24 +32,31 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
|
|
|
31
32
|
direction = "top";
|
|
32
33
|
top = triggerRect.top - popH;
|
|
33
34
|
} else {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
35
|
+
const room = Math.max(roomBelow, roomAbove, 0);
|
|
36
|
+
if (roomBelow >= roomAbove) {
|
|
37
|
+
direction = "bottom";
|
|
38
|
+
top = triggerRect.bottom;
|
|
39
|
+
} else {
|
|
40
|
+
direction = "top";
|
|
41
|
+
top = triggerRect.top - room;
|
|
42
|
+
}
|
|
43
|
+
maxHeight = room;
|
|
38
44
|
}
|
|
39
45
|
let left = triggerRect.left;
|
|
40
46
|
if (left + popW > clip.right - 8) {
|
|
41
47
|
left = triggerRect.right - popW;
|
|
42
48
|
}
|
|
43
49
|
if (left < clip.left + 8) left = clip.left + 8;
|
|
50
|
+
const drawnH = maxHeight === null ? popH : Math.min(popH, maxHeight);
|
|
44
51
|
return {
|
|
45
52
|
direction,
|
|
46
53
|
top,
|
|
47
54
|
left,
|
|
55
|
+
maxHeight,
|
|
48
56
|
over: {
|
|
49
57
|
top: Math.max(0, clip.top - top),
|
|
50
58
|
right: Math.max(0, left + popW - clip.right),
|
|
51
|
-
bottom: Math.max(0, top +
|
|
59
|
+
bottom: Math.max(0, top + drawnH - clip.bottom),
|
|
52
60
|
left: Math.max(0, clip.left - left)
|
|
53
61
|
}
|
|
54
62
|
};
|
|
@@ -77,7 +85,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
|
77
85
|
left: Math.max(parentRect?.left ?? 0, 0),
|
|
78
86
|
right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
|
|
79
87
|
};
|
|
80
|
-
const { direction: next, top, left, over } = computePlacement(
|
|
88
|
+
const { direction: next, top, left, over, maxHeight } = computePlacement(
|
|
81
89
|
triggerRect,
|
|
82
90
|
popW,
|
|
83
91
|
popH,
|
|
@@ -85,6 +93,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
|
85
93
|
);
|
|
86
94
|
pop.style.top = `${top + window.scrollY}px`;
|
|
87
95
|
pop.style.left = `${left + window.scrollX}px`;
|
|
96
|
+
pop.style.maxHeight = maxHeight === null ? "" : `${maxHeight}px`;
|
|
88
97
|
pop.style.clipPath = over.top || over.right || over.bottom || over.left ? `inset(${over.top}px ${over.right}px ${over.bottom}px ${over.left}px)` : "none";
|
|
89
98
|
if (next !== directionRef.current) {
|
|
90
99
|
directionRef.current = next;
|
|
@@ -4004,6 +4004,7 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
|
|
|
4004
4004
|
const roomAbove = triggerRect.top - clip.top;
|
|
4005
4005
|
let direction;
|
|
4006
4006
|
let top;
|
|
4007
|
+
let maxHeight = null;
|
|
4007
4008
|
if (popH <= roomBelow) {
|
|
4008
4009
|
direction = "bottom";
|
|
4009
4010
|
top = triggerRect.bottom;
|
|
@@ -4011,24 +4012,31 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
|
|
|
4011
4012
|
direction = "top";
|
|
4012
4013
|
top = triggerRect.top - popH;
|
|
4013
4014
|
} else {
|
|
4014
|
-
|
|
4015
|
-
|
|
4016
|
-
|
|
4017
|
-
|
|
4015
|
+
const room = Math.max(roomBelow, roomAbove, 0);
|
|
4016
|
+
if (roomBelow >= roomAbove) {
|
|
4017
|
+
direction = "bottom";
|
|
4018
|
+
top = triggerRect.bottom;
|
|
4019
|
+
} else {
|
|
4020
|
+
direction = "top";
|
|
4021
|
+
top = triggerRect.top - room;
|
|
4022
|
+
}
|
|
4023
|
+
maxHeight = room;
|
|
4018
4024
|
}
|
|
4019
4025
|
let left = triggerRect.left;
|
|
4020
4026
|
if (left + popW > clip.right - 8) {
|
|
4021
4027
|
left = triggerRect.right - popW;
|
|
4022
4028
|
}
|
|
4023
4029
|
if (left < clip.left + 8) left = clip.left + 8;
|
|
4030
|
+
const drawnH = maxHeight === null ? popH : Math.min(popH, maxHeight);
|
|
4024
4031
|
return {
|
|
4025
4032
|
direction,
|
|
4026
4033
|
top,
|
|
4027
4034
|
left,
|
|
4035
|
+
maxHeight,
|
|
4028
4036
|
over: {
|
|
4029
4037
|
top: Math.max(0, clip.top - top),
|
|
4030
4038
|
right: Math.max(0, left + popW - clip.right),
|
|
4031
|
-
bottom: Math.max(0, top +
|
|
4039
|
+
bottom: Math.max(0, top + drawnH - clip.bottom),
|
|
4032
4040
|
left: Math.max(0, clip.left - left)
|
|
4033
4041
|
}
|
|
4034
4042
|
};
|
|
@@ -4057,7 +4065,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
|
4057
4065
|
left: Math.max(parentRect?.left ?? 0, 0),
|
|
4058
4066
|
right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
|
|
4059
4067
|
};
|
|
4060
|
-
const { direction: next, top, left, over } = computePlacement(
|
|
4068
|
+
const { direction: next, top, left, over, maxHeight } = computePlacement(
|
|
4061
4069
|
triggerRect,
|
|
4062
4070
|
popW,
|
|
4063
4071
|
popH,
|
|
@@ -4065,6 +4073,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
|
4065
4073
|
);
|
|
4066
4074
|
pop.style.top = `${top + window.scrollY}px`;
|
|
4067
4075
|
pop.style.left = `${left + window.scrollX}px`;
|
|
4076
|
+
pop.style.maxHeight = maxHeight === null ? "" : `${maxHeight}px`;
|
|
4068
4077
|
pop.style.clipPath = over.top || over.right || over.bottom || over.left ? `inset(${over.top}px ${over.right}px ${over.bottom}px ${over.left}px)` : "none";
|
|
4069
4078
|
if (next !== directionRef.current) {
|
|
4070
4079
|
directionRef.current = next;
|
|
@@ -4513,7 +4513,7 @@
|
|
|
4513
4513
|
transition: transform 0.2s ease, opacity 0.2s ease;
|
|
4514
4514
|
}
|
|
4515
4515
|
.lib-xplat-select-content.bottom {
|
|
4516
|
-
transform: translateY(
|
|
4516
|
+
transform: translateY(8px);
|
|
4517
4517
|
}
|
|
4518
4518
|
.lib-xplat-select-content.bottom.visible {
|
|
4519
4519
|
opacity: 1;
|
|
@@ -4521,10 +4521,12 @@
|
|
|
4521
4521
|
}
|
|
4522
4522
|
.lib-xplat-select-content.bottom.exit {
|
|
4523
4523
|
opacity: 0;
|
|
4524
|
-
transform: translateY(
|
|
4524
|
+
transform: translateY(8px);
|
|
4525
|
+
}
|
|
4526
|
+
.lib-xplat-select-content {
|
|
4525
4527
|
}
|
|
4526
4528
|
.lib-xplat-select-content.top {
|
|
4527
|
-
transform: translateY(8px);
|
|
4529
|
+
transform: translateY(-8px);
|
|
4528
4530
|
}
|
|
4529
4531
|
.lib-xplat-select-content.top.visible {
|
|
4530
4532
|
opacity: 1;
|
|
@@ -4532,7 +4534,7 @@
|
|
|
4532
4534
|
}
|
|
4533
4535
|
.lib-xplat-select-content.top.exit {
|
|
4534
4536
|
opacity: 0;
|
|
4535
|
-
transform: translateY(8px);
|
|
4537
|
+
transform: translateY(-8px);
|
|
4536
4538
|
}
|
|
4537
4539
|
.lib-xplat-select-content.sm .select-item {
|
|
4538
4540
|
padding: var(--spacing-space-2) var(--spacing-space-2);
|
package/dist/components/index.js
CHANGED
|
@@ -3902,6 +3902,7 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
|
|
|
3902
3902
|
const roomAbove = triggerRect.top - clip.top;
|
|
3903
3903
|
let direction;
|
|
3904
3904
|
let top;
|
|
3905
|
+
let maxHeight = null;
|
|
3905
3906
|
if (popH <= roomBelow) {
|
|
3906
3907
|
direction = "bottom";
|
|
3907
3908
|
top = triggerRect.bottom;
|
|
@@ -3909,24 +3910,31 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
|
|
|
3909
3910
|
direction = "top";
|
|
3910
3911
|
top = triggerRect.top - popH;
|
|
3911
3912
|
} else {
|
|
3912
|
-
|
|
3913
|
-
|
|
3914
|
-
|
|
3915
|
-
|
|
3913
|
+
const room = Math.max(roomBelow, roomAbove, 0);
|
|
3914
|
+
if (roomBelow >= roomAbove) {
|
|
3915
|
+
direction = "bottom";
|
|
3916
|
+
top = triggerRect.bottom;
|
|
3917
|
+
} else {
|
|
3918
|
+
direction = "top";
|
|
3919
|
+
top = triggerRect.top - room;
|
|
3920
|
+
}
|
|
3921
|
+
maxHeight = room;
|
|
3916
3922
|
}
|
|
3917
3923
|
let left = triggerRect.left;
|
|
3918
3924
|
if (left + popW > clip.right - 8) {
|
|
3919
3925
|
left = triggerRect.right - popW;
|
|
3920
3926
|
}
|
|
3921
3927
|
if (left < clip.left + 8) left = clip.left + 8;
|
|
3928
|
+
const drawnH = maxHeight === null ? popH : Math.min(popH, maxHeight);
|
|
3922
3929
|
return {
|
|
3923
3930
|
direction,
|
|
3924
3931
|
top,
|
|
3925
3932
|
left,
|
|
3933
|
+
maxHeight,
|
|
3926
3934
|
over: {
|
|
3927
3935
|
top: Math.max(0, clip.top - top),
|
|
3928
3936
|
right: Math.max(0, left + popW - clip.right),
|
|
3929
|
-
bottom: Math.max(0, top +
|
|
3937
|
+
bottom: Math.max(0, top + drawnH - clip.bottom),
|
|
3930
3938
|
left: Math.max(0, clip.left - left)
|
|
3931
3939
|
}
|
|
3932
3940
|
};
|
|
@@ -3955,7 +3963,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
|
3955
3963
|
left: Math.max(parentRect?.left ?? 0, 0),
|
|
3956
3964
|
right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
|
|
3957
3965
|
};
|
|
3958
|
-
const { direction: next, top, left, over } = computePlacement(
|
|
3966
|
+
const { direction: next, top, left, over, maxHeight } = computePlacement(
|
|
3959
3967
|
triggerRect,
|
|
3960
3968
|
popW,
|
|
3961
3969
|
popH,
|
|
@@ -3963,6 +3971,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
|
3963
3971
|
);
|
|
3964
3972
|
pop.style.top = `${top + window.scrollY}px`;
|
|
3965
3973
|
pop.style.left = `${left + window.scrollX}px`;
|
|
3974
|
+
pop.style.maxHeight = maxHeight === null ? "" : `${maxHeight}px`;
|
|
3966
3975
|
pop.style.clipPath = over.top || over.right || over.bottom || over.left ? `inset(${over.top}px ${over.right}px ${over.bottom}px ${over.left}px)` : "none";
|
|
3967
3976
|
if (next !== directionRef.current) {
|
|
3968
3977
|
directionRef.current = next;
|
package/dist/index.cjs
CHANGED
|
@@ -8416,6 +8416,7 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
|
|
|
8416
8416
|
const roomAbove = triggerRect.top - clip.top;
|
|
8417
8417
|
let direction;
|
|
8418
8418
|
let top;
|
|
8419
|
+
let maxHeight = null;
|
|
8419
8420
|
if (popH <= roomBelow) {
|
|
8420
8421
|
direction = "bottom";
|
|
8421
8422
|
top = triggerRect.bottom;
|
|
@@ -8423,24 +8424,31 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
|
|
|
8423
8424
|
direction = "top";
|
|
8424
8425
|
top = triggerRect.top - popH;
|
|
8425
8426
|
} else {
|
|
8426
|
-
|
|
8427
|
-
|
|
8428
|
-
|
|
8429
|
-
|
|
8427
|
+
const room = Math.max(roomBelow, roomAbove, 0);
|
|
8428
|
+
if (roomBelow >= roomAbove) {
|
|
8429
|
+
direction = "bottom";
|
|
8430
|
+
top = triggerRect.bottom;
|
|
8431
|
+
} else {
|
|
8432
|
+
direction = "top";
|
|
8433
|
+
top = triggerRect.top - room;
|
|
8434
|
+
}
|
|
8435
|
+
maxHeight = room;
|
|
8430
8436
|
}
|
|
8431
8437
|
let left = triggerRect.left;
|
|
8432
8438
|
if (left + popW > clip.right - 8) {
|
|
8433
8439
|
left = triggerRect.right - popW;
|
|
8434
8440
|
}
|
|
8435
8441
|
if (left < clip.left + 8) left = clip.left + 8;
|
|
8442
|
+
const drawnH = maxHeight === null ? popH : Math.min(popH, maxHeight);
|
|
8436
8443
|
return {
|
|
8437
8444
|
direction,
|
|
8438
8445
|
top,
|
|
8439
8446
|
left,
|
|
8447
|
+
maxHeight,
|
|
8440
8448
|
over: {
|
|
8441
8449
|
top: Math.max(0, clip.top - top),
|
|
8442
8450
|
right: Math.max(0, left + popW - clip.right),
|
|
8443
|
-
bottom: Math.max(0, top +
|
|
8451
|
+
bottom: Math.max(0, top + drawnH - clip.bottom),
|
|
8444
8452
|
left: Math.max(0, clip.left - left)
|
|
8445
8453
|
}
|
|
8446
8454
|
};
|
|
@@ -8469,7 +8477,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
|
8469
8477
|
left: Math.max(parentRect?.left ?? 0, 0),
|
|
8470
8478
|
right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
|
|
8471
8479
|
};
|
|
8472
|
-
const { direction: next, top, left, over } = computePlacement(
|
|
8480
|
+
const { direction: next, top, left, over, maxHeight } = computePlacement(
|
|
8473
8481
|
triggerRect,
|
|
8474
8482
|
popW,
|
|
8475
8483
|
popH,
|
|
@@ -8477,6 +8485,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
|
8477
8485
|
);
|
|
8478
8486
|
pop.style.top = `${top + window.scrollY}px`;
|
|
8479
8487
|
pop.style.left = `${left + window.scrollX}px`;
|
|
8488
|
+
pop.style.maxHeight = maxHeight === null ? "" : `${maxHeight}px`;
|
|
8480
8489
|
pop.style.clipPath = over.top || over.right || over.bottom || over.left ? `inset(${over.top}px ${over.right}px ${over.bottom}px ${over.left}px)` : "none";
|
|
8481
8490
|
if (next !== directionRef.current) {
|
|
8482
8491
|
directionRef.current = next;
|
package/dist/index.css
CHANGED
|
@@ -4513,7 +4513,7 @@
|
|
|
4513
4513
|
transition: transform 0.2s ease, opacity 0.2s ease;
|
|
4514
4514
|
}
|
|
4515
4515
|
.lib-xplat-select-content.bottom {
|
|
4516
|
-
transform: translateY(
|
|
4516
|
+
transform: translateY(8px);
|
|
4517
4517
|
}
|
|
4518
4518
|
.lib-xplat-select-content.bottom.visible {
|
|
4519
4519
|
opacity: 1;
|
|
@@ -4521,10 +4521,12 @@
|
|
|
4521
4521
|
}
|
|
4522
4522
|
.lib-xplat-select-content.bottom.exit {
|
|
4523
4523
|
opacity: 0;
|
|
4524
|
-
transform: translateY(
|
|
4524
|
+
transform: translateY(8px);
|
|
4525
|
+
}
|
|
4526
|
+
.lib-xplat-select-content {
|
|
4525
4527
|
}
|
|
4526
4528
|
.lib-xplat-select-content.top {
|
|
4527
|
-
transform: translateY(8px);
|
|
4529
|
+
transform: translateY(-8px);
|
|
4528
4530
|
}
|
|
4529
4531
|
.lib-xplat-select-content.top.visible {
|
|
4530
4532
|
opacity: 1;
|
|
@@ -4532,7 +4534,7 @@
|
|
|
4532
4534
|
}
|
|
4533
4535
|
.lib-xplat-select-content.top.exit {
|
|
4534
4536
|
opacity: 0;
|
|
4535
|
-
transform: translateY(8px);
|
|
4537
|
+
transform: translateY(-8px);
|
|
4536
4538
|
}
|
|
4537
4539
|
.lib-xplat-select-content.sm .select-item {
|
|
4538
4540
|
padding: var(--spacing-space-2) var(--spacing-space-2);
|
package/dist/index.js
CHANGED
|
@@ -8005,6 +8005,7 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
|
|
|
8005
8005
|
const roomAbove = triggerRect.top - clip.top;
|
|
8006
8006
|
let direction;
|
|
8007
8007
|
let top;
|
|
8008
|
+
let maxHeight = null;
|
|
8008
8009
|
if (popH <= roomBelow) {
|
|
8009
8010
|
direction = "bottom";
|
|
8010
8011
|
top = triggerRect.bottom;
|
|
@@ -8012,24 +8013,31 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
|
|
|
8012
8013
|
direction = "top";
|
|
8013
8014
|
top = triggerRect.top - popH;
|
|
8014
8015
|
} else {
|
|
8015
|
-
|
|
8016
|
-
|
|
8017
|
-
|
|
8018
|
-
|
|
8016
|
+
const room = Math.max(roomBelow, roomAbove, 0);
|
|
8017
|
+
if (roomBelow >= roomAbove) {
|
|
8018
|
+
direction = "bottom";
|
|
8019
|
+
top = triggerRect.bottom;
|
|
8020
|
+
} else {
|
|
8021
|
+
direction = "top";
|
|
8022
|
+
top = triggerRect.top - room;
|
|
8023
|
+
}
|
|
8024
|
+
maxHeight = room;
|
|
8019
8025
|
}
|
|
8020
8026
|
let left = triggerRect.left;
|
|
8021
8027
|
if (left + popW > clip.right - 8) {
|
|
8022
8028
|
left = triggerRect.right - popW;
|
|
8023
8029
|
}
|
|
8024
8030
|
if (left < clip.left + 8) left = clip.left + 8;
|
|
8031
|
+
const drawnH = maxHeight === null ? popH : Math.min(popH, maxHeight);
|
|
8025
8032
|
return {
|
|
8026
8033
|
direction,
|
|
8027
8034
|
top,
|
|
8028
8035
|
left,
|
|
8036
|
+
maxHeight,
|
|
8029
8037
|
over: {
|
|
8030
8038
|
top: Math.max(0, clip.top - top),
|
|
8031
8039
|
right: Math.max(0, left + popW - clip.right),
|
|
8032
|
-
bottom: Math.max(0, top +
|
|
8040
|
+
bottom: Math.max(0, top + drawnH - clip.bottom),
|
|
8033
8041
|
left: Math.max(0, clip.left - left)
|
|
8034
8042
|
}
|
|
8035
8043
|
};
|
|
@@ -8058,7 +8066,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
|
8058
8066
|
left: Math.max(parentRect?.left ?? 0, 0),
|
|
8059
8067
|
right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
|
|
8060
8068
|
};
|
|
8061
|
-
const { direction: next, top, left, over } = computePlacement(
|
|
8069
|
+
const { direction: next, top, left, over, maxHeight } = computePlacement(
|
|
8062
8070
|
triggerRect,
|
|
8063
8071
|
popW,
|
|
8064
8072
|
popH,
|
|
@@ -8066,6 +8074,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
|
|
|
8066
8074
|
);
|
|
8067
8075
|
pop.style.top = `${top + window.scrollY}px`;
|
|
8068
8076
|
pop.style.left = `${left + window.scrollX}px`;
|
|
8077
|
+
pop.style.maxHeight = maxHeight === null ? "" : `${maxHeight}px`;
|
|
8069
8078
|
pop.style.clipPath = over.top || over.right || over.bottom || over.left ? `inset(${over.top}px ${over.right}px ${over.bottom}px ${over.left}px)` : "none";
|
|
8070
8079
|
if (next !== directionRef.current) {
|
|
8071
8080
|
directionRef.current = next;
|