@x-plat/design-system 0.14.10 → 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.
Files changed (16) hide show
  1. package/dist/components/Dropdown/index.cjs +49 -27
  2. package/dist/components/Dropdown/index.js +49 -27
  3. package/dist/components/PopOver/index.cjs +49 -27
  4. package/dist/components/PopOver/index.js +49 -27
  5. package/dist/components/Select/index.cjs +49 -27
  6. package/dist/components/Select/index.css +6 -4
  7. package/dist/components/Select/index.js +49 -27
  8. package/dist/components/TimePicker/index.cjs +49 -27
  9. package/dist/components/TimePicker/index.js +49 -27
  10. package/dist/components/index.cjs +49 -27
  11. package/dist/components/index.css +6 -4
  12. package/dist/components/index.js +49 -27
  13. package/dist/index.cjs +49 -27
  14. package/dist/index.css +6 -4
  15. package/dist/index.js +49 -27
  16. package/package.json +1 -1
package/dist/components/Dropdown/index.cjs CHANGED
@@ -55,6 +55,48 @@ var findScrollParent = (el) => {
55
55
  }
56
56
  return null;
57
57
  };
58
+ var computePlacement = (triggerRect, popW, popH, clip) => {
59
+ const roomBelow = clip.bottom - triggerRect.bottom;
60
+ const roomAbove = triggerRect.top - clip.top;
61
+ let direction;
62
+ let top;
63
+ let maxHeight = null;
64
+ if (popH <= roomBelow) {
65
+ direction = "bottom";
66
+ top = triggerRect.bottom;
67
+ } else if (popH <= roomAbove) {
68
+ direction = "top";
69
+ top = triggerRect.top - popH;
70
+ } else {
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;
80
+ }
81
+ let left = triggerRect.left;
82
+ if (left + popW > clip.right - 8) {
83
+ left = triggerRect.right - popW;
84
+ }
85
+ if (left < clip.left + 8) left = clip.left + 8;
86
+ const drawnH = maxHeight === null ? popH : Math.min(popH, maxHeight);
87
+ return {
88
+ direction,
89
+ top,
90
+ left,
91
+ maxHeight,
92
+ over: {
93
+ top: Math.max(0, clip.top - top),
94
+ right: Math.max(0, left + popW - clip.right),
95
+ bottom: Math.max(0, top + drawnH - clip.bottom),
96
+ left: Math.max(0, clip.left - left)
97
+ }
98
+ };
99
+ };
58
100
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
59
101
  const [direction, setDirection] = import_react.default.useState("bottom");
60
102
  const directionRef = import_react.default.useRef("bottom");
@@ -79,35 +121,15 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
79
121
  left: Math.max(parentRect?.left ?? 0, 0),
80
122
  right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
81
123
  };
82
- const roomBelow = clip.bottom - triggerRect.bottom;
83
- const roomAbove = triggerRect.top - clip.top;
84
- let next;
85
- let top;
86
- if (popH <= roomBelow) {
87
- next = "bottom";
88
- top = triggerRect.bottom;
89
- } else if (popH <= roomAbove) {
90
- next = "top";
91
- top = triggerRect.top - popH;
92
- } else {
93
- next = roomBelow >= roomAbove ? "bottom" : "top";
94
- top = next === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
95
- top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
96
- top = Math.max(top, clip.top);
97
- }
98
- let left = triggerRect.left;
99
- if (left + popW > clip.right - 8) {
100
- left = triggerRect.right - popW;
101
- }
102
- if (left < clip.left + 8) left = clip.left + 8;
124
+ const { direction: next, top, left, over, maxHeight } = computePlacement(
125
+ triggerRect,
126
+ popW,
127
+ popH,
128
+ clip
129
+ );
103
130
  pop.style.top = `${top + window.scrollY}px`;
104
131
  pop.style.left = `${left + window.scrollX}px`;
105
- const over = {
106
- top: Math.max(0, clip.top - top),
107
- right: Math.max(0, left + popW - clip.right),
108
- bottom: Math.max(0, top + popH - clip.bottom),
109
- left: Math.max(0, clip.left - left)
110
- };
132
+ pop.style.maxHeight = maxHeight === null ? "" : `${maxHeight}px`;
111
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";
112
134
  if (next !== directionRef.current) {
113
135
  directionRef.current = next;
package/dist/components/Dropdown/index.js CHANGED
@@ -19,6 +19,48 @@ var findScrollParent = (el) => {
19
19
  }
20
20
  return null;
21
21
  };
22
+ var computePlacement = (triggerRect, popW, popH, clip) => {
23
+ const roomBelow = clip.bottom - triggerRect.bottom;
24
+ const roomAbove = triggerRect.top - clip.top;
25
+ let direction;
26
+ let top;
27
+ let maxHeight = null;
28
+ if (popH <= roomBelow) {
29
+ direction = "bottom";
30
+ top = triggerRect.bottom;
31
+ } else if (popH <= roomAbove) {
32
+ direction = "top";
33
+ top = triggerRect.top - popH;
34
+ } else {
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;
44
+ }
45
+ let left = triggerRect.left;
46
+ if (left + popW > clip.right - 8) {
47
+ left = triggerRect.right - popW;
48
+ }
49
+ if (left < clip.left + 8) left = clip.left + 8;
50
+ const drawnH = maxHeight === null ? popH : Math.min(popH, maxHeight);
51
+ return {
52
+ direction,
53
+ top,
54
+ left,
55
+ maxHeight,
56
+ over: {
57
+ top: Math.max(0, clip.top - top),
58
+ right: Math.max(0, left + popW - clip.right),
59
+ bottom: Math.max(0, top + drawnH - clip.bottom),
60
+ left: Math.max(0, clip.left - left)
61
+ }
62
+ };
63
+ };
22
64
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
23
65
  const [direction, setDirection] = React.useState("bottom");
24
66
  const directionRef = React.useRef("bottom");
@@ -43,35 +85,15 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
43
85
  left: Math.max(parentRect?.left ?? 0, 0),
44
86
  right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
45
87
  };
46
- const roomBelow = clip.bottom - triggerRect.bottom;
47
- const roomAbove = triggerRect.top - clip.top;
48
- let next;
49
- let top;
50
- if (popH <= roomBelow) {
51
- next = "bottom";
52
- top = triggerRect.bottom;
53
- } else if (popH <= roomAbove) {
54
- next = "top";
55
- top = triggerRect.top - popH;
56
- } else {
57
- next = roomBelow >= roomAbove ? "bottom" : "top";
58
- top = next === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
59
- top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
60
- top = Math.max(top, clip.top);
61
- }
62
- let left = triggerRect.left;
63
- if (left + popW > clip.right - 8) {
64
- left = triggerRect.right - popW;
65
- }
66
- if (left < clip.left + 8) left = clip.left + 8;
88
+ const { direction: next, top, left, over, maxHeight } = computePlacement(
89
+ triggerRect,
90
+ popW,
91
+ popH,
92
+ clip
93
+ );
67
94
  pop.style.top = `${top + window.scrollY}px`;
68
95
  pop.style.left = `${left + window.scrollX}px`;
69
- const over = {
70
- top: Math.max(0, clip.top - top),
71
- right: Math.max(0, left + popW - clip.right),
72
- bottom: Math.max(0, top + popH - clip.bottom),
73
- left: Math.max(0, clip.left - left)
74
- };
96
+ pop.style.maxHeight = maxHeight === null ? "" : `${maxHeight}px`;
75
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";
76
98
  if (next !== directionRef.current) {
77
99
  directionRef.current = next;
package/dist/components/PopOver/index.cjs CHANGED
@@ -55,6 +55,48 @@ var findScrollParent = (el) => {
55
55
  }
56
56
  return null;
57
57
  };
58
+ var computePlacement = (triggerRect, popW, popH, clip) => {
59
+ const roomBelow = clip.bottom - triggerRect.bottom;
60
+ const roomAbove = triggerRect.top - clip.top;
61
+ let direction;
62
+ let top;
63
+ let maxHeight = null;
64
+ if (popH <= roomBelow) {
65
+ direction = "bottom";
66
+ top = triggerRect.bottom;
67
+ } else if (popH <= roomAbove) {
68
+ direction = "top";
69
+ top = triggerRect.top - popH;
70
+ } else {
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;
80
+ }
81
+ let left = triggerRect.left;
82
+ if (left + popW > clip.right - 8) {
83
+ left = triggerRect.right - popW;
84
+ }
85
+ if (left < clip.left + 8) left = clip.left + 8;
86
+ const drawnH = maxHeight === null ? popH : Math.min(popH, maxHeight);
87
+ return {
88
+ direction,
89
+ top,
90
+ left,
91
+ maxHeight,
92
+ over: {
93
+ top: Math.max(0, clip.top - top),
94
+ right: Math.max(0, left + popW - clip.right),
95
+ bottom: Math.max(0, top + drawnH - clip.bottom),
96
+ left: Math.max(0, clip.left - left)
97
+ }
98
+ };
99
+ };
58
100
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
59
101
  const [direction, setDirection] = import_react.default.useState("bottom");
60
102
  const directionRef = import_react.default.useRef("bottom");
@@ -79,35 +121,15 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
79
121
  left: Math.max(parentRect?.left ?? 0, 0),
80
122
  right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
81
123
  };
82
- const roomBelow = clip.bottom - triggerRect.bottom;
83
- const roomAbove = triggerRect.top - clip.top;
84
- let next;
85
- let top;
86
- if (popH <= roomBelow) {
87
- next = "bottom";
88
- top = triggerRect.bottom;
89
- } else if (popH <= roomAbove) {
90
- next = "top";
91
- top = triggerRect.top - popH;
92
- } else {
93
- next = roomBelow >= roomAbove ? "bottom" : "top";
94
- top = next === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
95
- top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
96
- top = Math.max(top, clip.top);
97
- }
98
- let left = triggerRect.left;
99
- if (left + popW > clip.right - 8) {
100
- left = triggerRect.right - popW;
101
- }
102
- if (left < clip.left + 8) left = clip.left + 8;
124
+ const { direction: next, top, left, over, maxHeight } = computePlacement(
125
+ triggerRect,
126
+ popW,
127
+ popH,
128
+ clip
129
+ );
103
130
  pop.style.top = `${top + window.scrollY}px`;
104
131
  pop.style.left = `${left + window.scrollX}px`;
105
- const over = {
106
- top: Math.max(0, clip.top - top),
107
- right: Math.max(0, left + popW - clip.right),
108
- bottom: Math.max(0, top + popH - clip.bottom),
109
- left: Math.max(0, clip.left - left)
110
- };
132
+ pop.style.maxHeight = maxHeight === null ? "" : `${maxHeight}px`;
111
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";
112
134
  if (next !== directionRef.current) {
113
135
  directionRef.current = next;
package/dist/components/PopOver/index.js CHANGED
@@ -19,6 +19,48 @@ var findScrollParent = (el) => {
19
19
  }
20
20
  return null;
21
21
  };
22
+ var computePlacement = (triggerRect, popW, popH, clip) => {
23
+ const roomBelow = clip.bottom - triggerRect.bottom;
24
+ const roomAbove = triggerRect.top - clip.top;
25
+ let direction;
26
+ let top;
27
+ let maxHeight = null;
28
+ if (popH <= roomBelow) {
29
+ direction = "bottom";
30
+ top = triggerRect.bottom;
31
+ } else if (popH <= roomAbove) {
32
+ direction = "top";
33
+ top = triggerRect.top - popH;
34
+ } else {
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;
44
+ }
45
+ let left = triggerRect.left;
46
+ if (left + popW > clip.right - 8) {
47
+ left = triggerRect.right - popW;
48
+ }
49
+ if (left < clip.left + 8) left = clip.left + 8;
50
+ const drawnH = maxHeight === null ? popH : Math.min(popH, maxHeight);
51
+ return {
52
+ direction,
53
+ top,
54
+ left,
55
+ maxHeight,
56
+ over: {
57
+ top: Math.max(0, clip.top - top),
58
+ right: Math.max(0, left + popW - clip.right),
59
+ bottom: Math.max(0, top + drawnH - clip.bottom),
60
+ left: Math.max(0, clip.left - left)
61
+ }
62
+ };
63
+ };
22
64
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
23
65
  const [direction, setDirection] = React.useState("bottom");
24
66
  const directionRef = React.useRef("bottom");
@@ -43,35 +85,15 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
43
85
  left: Math.max(parentRect?.left ?? 0, 0),
44
86
  right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
45
87
  };
46
- const roomBelow = clip.bottom - triggerRect.bottom;
47
- const roomAbove = triggerRect.top - clip.top;
48
- let next;
49
- let top;
50
- if (popH <= roomBelow) {
51
- next = "bottom";
52
- top = triggerRect.bottom;
53
- } else if (popH <= roomAbove) {
54
- next = "top";
55
- top = triggerRect.top - popH;
56
- } else {
57
- next = roomBelow >= roomAbove ? "bottom" : "top";
58
- top = next === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
59
- top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
60
- top = Math.max(top, clip.top);
61
- }
62
- let left = triggerRect.left;
63
- if (left + popW > clip.right - 8) {
64
- left = triggerRect.right - popW;
65
- }
66
- if (left < clip.left + 8) left = clip.left + 8;
88
+ const { direction: next, top, left, over, maxHeight } = computePlacement(
89
+ triggerRect,
90
+ popW,
91
+ popH,
92
+ clip
93
+ );
67
94
  pop.style.top = `${top + window.scrollY}px`;
68
95
  pop.style.left = `${left + window.scrollX}px`;
69
- const over = {
70
- top: Math.max(0, clip.top - top),
71
- right: Math.max(0, left + popW - clip.right),
72
- bottom: Math.max(0, top + popH - clip.bottom),
73
- left: Math.max(0, clip.left - left)
74
- };
96
+ pop.style.maxHeight = maxHeight === null ? "" : `${maxHeight}px`;
75
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";
76
98
  if (next !== directionRef.current) {
77
99
  directionRef.current = next;
package/dist/components/Select/index.cjs CHANGED
@@ -56,6 +56,48 @@ var findScrollParent = (el) => {
56
56
  }
57
57
  return null;
58
58
  };
59
+ var computePlacement = (triggerRect, popW, popH, clip) => {
60
+ const roomBelow = clip.bottom - triggerRect.bottom;
61
+ const roomAbove = triggerRect.top - clip.top;
62
+ let direction;
63
+ let top;
64
+ let maxHeight = null;
65
+ if (popH <= roomBelow) {
66
+ direction = "bottom";
67
+ top = triggerRect.bottom;
68
+ } else if (popH <= roomAbove) {
69
+ direction = "top";
70
+ top = triggerRect.top - popH;
71
+ } else {
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;
81
+ }
82
+ let left = triggerRect.left;
83
+ if (left + popW > clip.right - 8) {
84
+ left = triggerRect.right - popW;
85
+ }
86
+ if (left < clip.left + 8) left = clip.left + 8;
87
+ const drawnH = maxHeight === null ? popH : Math.min(popH, maxHeight);
88
+ return {
89
+ direction,
90
+ top,
91
+ left,
92
+ maxHeight,
93
+ over: {
94
+ top: Math.max(0, clip.top - top),
95
+ right: Math.max(0, left + popW - clip.right),
96
+ bottom: Math.max(0, top + drawnH - clip.bottom),
97
+ left: Math.max(0, clip.left - left)
98
+ }
99
+ };
100
+ };
59
101
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
60
102
  const [direction, setDirection] = import_react.default.useState("bottom");
61
103
  const directionRef = import_react.default.useRef("bottom");
@@ -80,35 +122,15 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
80
122
  left: Math.max(parentRect?.left ?? 0, 0),
81
123
  right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
82
124
  };
83
- const roomBelow = clip.bottom - triggerRect.bottom;
84
- const roomAbove = triggerRect.top - clip.top;
85
- let next;
86
- let top;
87
- if (popH <= roomBelow) {
88
- next = "bottom";
89
- top = triggerRect.bottom;
90
- } else if (popH <= roomAbove) {
91
- next = "top";
92
- top = triggerRect.top - popH;
93
- } else {
94
- next = roomBelow >= roomAbove ? "bottom" : "top";
95
- top = next === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
96
- top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
97
- top = Math.max(top, clip.top);
98
- }
99
- let left = triggerRect.left;
100
- if (left + popW > clip.right - 8) {
101
- left = triggerRect.right - popW;
102
- }
103
- if (left < clip.left + 8) left = clip.left + 8;
125
+ const { direction: next, top, left, over, maxHeight } = computePlacement(
126
+ triggerRect,
127
+ popW,
128
+ popH,
129
+ clip
130
+ );
104
131
  pop.style.top = `${top + window.scrollY}px`;
105
132
  pop.style.left = `${left + window.scrollX}px`;
106
- const over = {
107
- top: Math.max(0, clip.top - top),
108
- right: Math.max(0, left + popW - clip.right),
109
- bottom: Math.max(0, top + popH - clip.bottom),
110
- left: Math.max(0, clip.left - left)
111
- };
133
+ pop.style.maxHeight = maxHeight === null ? "" : `${maxHeight}px`;
112
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";
113
135
  if (next !== directionRef.current) {
114
136
  directionRef.current = next;
package/dist/components/Select/index.css CHANGED
@@ -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(-8px);
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(-8px);
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);
package/dist/components/Select/index.js CHANGED
@@ -19,6 +19,48 @@ var findScrollParent = (el) => {
19
19
  }
20
20
  return null;
21
21
  };
22
+ var computePlacement = (triggerRect, popW, popH, clip) => {
23
+ const roomBelow = clip.bottom - triggerRect.bottom;
24
+ const roomAbove = triggerRect.top - clip.top;
25
+ let direction;
26
+ let top;
27
+ let maxHeight = null;
28
+ if (popH <= roomBelow) {
29
+ direction = "bottom";
30
+ top = triggerRect.bottom;
31
+ } else if (popH <= roomAbove) {
32
+ direction = "top";
33
+ top = triggerRect.top - popH;
34
+ } else {
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;
44
+ }
45
+ let left = triggerRect.left;
46
+ if (left + popW > clip.right - 8) {
47
+ left = triggerRect.right - popW;
48
+ }
49
+ if (left < clip.left + 8) left = clip.left + 8;
50
+ const drawnH = maxHeight === null ? popH : Math.min(popH, maxHeight);
51
+ return {
52
+ direction,
53
+ top,
54
+ left,
55
+ maxHeight,
56
+ over: {
57
+ top: Math.max(0, clip.top - top),
58
+ right: Math.max(0, left + popW - clip.right),
59
+ bottom: Math.max(0, top + drawnH - clip.bottom),
60
+ left: Math.max(0, clip.left - left)
61
+ }
62
+ };
63
+ };
22
64
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
23
65
  const [direction, setDirection] = React.useState("bottom");
24
66
  const directionRef = React.useRef("bottom");
@@ -43,35 +85,15 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
43
85
  left: Math.max(parentRect?.left ?? 0, 0),
44
86
  right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
45
87
  };
46
- const roomBelow = clip.bottom - triggerRect.bottom;
47
- const roomAbove = triggerRect.top - clip.top;
48
- let next;
49
- let top;
50
- if (popH <= roomBelow) {
51
- next = "bottom";
52
- top = triggerRect.bottom;
53
- } else if (popH <= roomAbove) {
54
- next = "top";
55
- top = triggerRect.top - popH;
56
- } else {
57
- next = roomBelow >= roomAbove ? "bottom" : "top";
58
- top = next === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
59
- top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
60
- top = Math.max(top, clip.top);
61
- }
62
- let left = triggerRect.left;
63
- if (left + popW > clip.right - 8) {
64
- left = triggerRect.right - popW;
65
- }
66
- if (left < clip.left + 8) left = clip.left + 8;
88
+ const { direction: next, top, left, over, maxHeight } = computePlacement(
89
+ triggerRect,
90
+ popW,
91
+ popH,
92
+ clip
93
+ );
67
94
  pop.style.top = `${top + window.scrollY}px`;
68
95
  pop.style.left = `${left + window.scrollX}px`;
69
- const over = {
70
- top: Math.max(0, clip.top - top),
71
- right: Math.max(0, left + popW - clip.right),
72
- bottom: Math.max(0, top + popH - clip.bottom),
73
- left: Math.max(0, clip.left - left)
74
- };
96
+ pop.style.maxHeight = maxHeight === null ? "" : `${maxHeight}px`;
75
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";
76
98
  if (next !== directionRef.current) {
77
99
  directionRef.current = next;
package/dist/components/TimePicker/index.cjs CHANGED
@@ -55,6 +55,48 @@ var findScrollParent = (el) => {
55
55
  }
56
56
  return null;
57
57
  };
58
+ var computePlacement = (triggerRect, popW, popH, clip) => {
59
+ const roomBelow = clip.bottom - triggerRect.bottom;
60
+ const roomAbove = triggerRect.top - clip.top;
61
+ let direction;
62
+ let top;
63
+ let maxHeight = null;
64
+ if (popH <= roomBelow) {
65
+ direction = "bottom";
66
+ top = triggerRect.bottom;
67
+ } else if (popH <= roomAbove) {
68
+ direction = "top";
69
+ top = triggerRect.top - popH;
70
+ } else {
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;
80
+ }
81
+ let left = triggerRect.left;
82
+ if (left + popW > clip.right - 8) {
83
+ left = triggerRect.right - popW;
84
+ }
85
+ if (left < clip.left + 8) left = clip.left + 8;
86
+ const drawnH = maxHeight === null ? popH : Math.min(popH, maxHeight);
87
+ return {
88
+ direction,
89
+ top,
90
+ left,
91
+ maxHeight,
92
+ over: {
93
+ top: Math.max(0, clip.top - top),
94
+ right: Math.max(0, left + popW - clip.right),
95
+ bottom: Math.max(0, top + drawnH - clip.bottom),
96
+ left: Math.max(0, clip.left - left)
97
+ }
98
+ };
99
+ };
58
100
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
59
101
  const [direction, setDirection] = import_react.default.useState("bottom");
60
102
  const directionRef = import_react.default.useRef("bottom");
@@ -79,35 +121,15 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
79
121
  left: Math.max(parentRect?.left ?? 0, 0),
80
122
  right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
81
123
  };
82
- const roomBelow = clip.bottom - triggerRect.bottom;
83
- const roomAbove = triggerRect.top - clip.top;
84
- let next;
85
- let top;
86
- if (popH <= roomBelow) {
87
- next = "bottom";
88
- top = triggerRect.bottom;
89
- } else if (popH <= roomAbove) {
90
- next = "top";
91
- top = triggerRect.top - popH;
92
- } else {
93
- next = roomBelow >= roomAbove ? "bottom" : "top";
94
- top = next === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
95
- top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
96
- top = Math.max(top, clip.top);
97
- }
98
- let left = triggerRect.left;
99
- if (left + popW > clip.right - 8) {
100
- left = triggerRect.right - popW;
101
- }
102
- if (left < clip.left + 8) left = clip.left + 8;
124
+ const { direction: next, top, left, over, maxHeight } = computePlacement(
125
+ triggerRect,
126
+ popW,
127
+ popH,
128
+ clip
129
+ );
103
130
  pop.style.top = `${top + window.scrollY}px`;
104
131
  pop.style.left = `${left + window.scrollX}px`;
105
- const over = {
106
- top: Math.max(0, clip.top - top),
107
- right: Math.max(0, left + popW - clip.right),
108
- bottom: Math.max(0, top + popH - clip.bottom),
109
- left: Math.max(0, clip.left - left)
110
- };
132
+ pop.style.maxHeight = maxHeight === null ? "" : `${maxHeight}px`;
111
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";
112
134
  if (next !== directionRef.current) {
113
135
  directionRef.current = next;
package/dist/components/TimePicker/index.js CHANGED
@@ -19,6 +19,48 @@ var findScrollParent = (el) => {
19
19
  }
20
20
  return null;
21
21
  };
22
+ var computePlacement = (triggerRect, popW, popH, clip) => {
23
+ const roomBelow = clip.bottom - triggerRect.bottom;
24
+ const roomAbove = triggerRect.top - clip.top;
25
+ let direction;
26
+ let top;
27
+ let maxHeight = null;
28
+ if (popH <= roomBelow) {
29
+ direction = "bottom";
30
+ top = triggerRect.bottom;
31
+ } else if (popH <= roomAbove) {
32
+ direction = "top";
33
+ top = triggerRect.top - popH;
34
+ } else {
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;
44
+ }
45
+ let left = triggerRect.left;
46
+ if (left + popW > clip.right - 8) {
47
+ left = triggerRect.right - popW;
48
+ }
49
+ if (left < clip.left + 8) left = clip.left + 8;
50
+ const drawnH = maxHeight === null ? popH : Math.min(popH, maxHeight);
51
+ return {
52
+ direction,
53
+ top,
54
+ left,
55
+ maxHeight,
56
+ over: {
57
+ top: Math.max(0, clip.top - top),
58
+ right: Math.max(0, left + popW - clip.right),
59
+ bottom: Math.max(0, top + drawnH - clip.bottom),
60
+ left: Math.max(0, clip.left - left)
61
+ }
62
+ };
63
+ };
22
64
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
23
65
  const [direction, setDirection] = React.useState("bottom");
24
66
  const directionRef = React.useRef("bottom");
@@ -43,35 +85,15 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
43
85
  left: Math.max(parentRect?.left ?? 0, 0),
44
86
  right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
45
87
  };
46
- const roomBelow = clip.bottom - triggerRect.bottom;
47
- const roomAbove = triggerRect.top - clip.top;
48
- let next;
49
- let top;
50
- if (popH <= roomBelow) {
51
- next = "bottom";
52
- top = triggerRect.bottom;
53
- } else if (popH <= roomAbove) {
54
- next = "top";
55
- top = triggerRect.top - popH;
56
- } else {
57
- next = roomBelow >= roomAbove ? "bottom" : "top";
58
- top = next === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
59
- top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
60
- top = Math.max(top, clip.top);
61
- }
62
- let left = triggerRect.left;
63
- if (left + popW > clip.right - 8) {
64
- left = triggerRect.right - popW;
65
- }
66
- if (left < clip.left + 8) left = clip.left + 8;
88
+ const { direction: next, top, left, over, maxHeight } = computePlacement(
89
+ triggerRect,
90
+ popW,
91
+ popH,
92
+ clip
93
+ );
67
94
  pop.style.top = `${top + window.scrollY}px`;
68
95
  pop.style.left = `${left + window.scrollX}px`;
69
- const over = {
70
- top: Math.max(0, clip.top - top),
71
- right: Math.max(0, left + popW - clip.right),
72
- bottom: Math.max(0, top + popH - clip.bottom),
73
- left: Math.max(0, clip.left - left)
74
- };
96
+ pop.style.maxHeight = maxHeight === null ? "" : `${maxHeight}px`;
75
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";
76
98
  if (next !== directionRef.current) {
77
99
  directionRef.current = next;
package/dist/components/index.cjs CHANGED
@@ -3999,6 +3999,48 @@ var findScrollParent = (el) => {
3999
3999
  }
4000
4000
  return null;
4001
4001
  };
4002
+ var computePlacement = (triggerRect, popW, popH, clip) => {
4003
+ const roomBelow = clip.bottom - triggerRect.bottom;
4004
+ const roomAbove = triggerRect.top - clip.top;
4005
+ let direction;
4006
+ let top;
4007
+ let maxHeight = null;
4008
+ if (popH <= roomBelow) {
4009
+ direction = "bottom";
4010
+ top = triggerRect.bottom;
4011
+ } else if (popH <= roomAbove) {
4012
+ direction = "top";
4013
+ top = triggerRect.top - popH;
4014
+ } else {
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;
4024
+ }
4025
+ let left = triggerRect.left;
4026
+ if (left + popW > clip.right - 8) {
4027
+ left = triggerRect.right - popW;
4028
+ }
4029
+ if (left < clip.left + 8) left = clip.left + 8;
4030
+ const drawnH = maxHeight === null ? popH : Math.min(popH, maxHeight);
4031
+ return {
4032
+ direction,
4033
+ top,
4034
+ left,
4035
+ maxHeight,
4036
+ over: {
4037
+ top: Math.max(0, clip.top - top),
4038
+ right: Math.max(0, left + popW - clip.right),
4039
+ bottom: Math.max(0, top + drawnH - clip.bottom),
4040
+ left: Math.max(0, clip.left - left)
4041
+ }
4042
+ };
4043
+ };
4002
4044
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
4003
4045
  const [direction, setDirection] = import_react19.default.useState("bottom");
4004
4046
  const directionRef = import_react19.default.useRef("bottom");
@@ -4023,35 +4065,15 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
4023
4065
  left: Math.max(parentRect?.left ?? 0, 0),
4024
4066
  right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
4025
4067
  };
4026
- const roomBelow = clip.bottom - triggerRect.bottom;
4027
- const roomAbove = triggerRect.top - clip.top;
4028
- let next;
4029
- let top;
4030
- if (popH <= roomBelow) {
4031
- next = "bottom";
4032
- top = triggerRect.bottom;
4033
- } else if (popH <= roomAbove) {
4034
- next = "top";
4035
- top = triggerRect.top - popH;
4036
- } else {
4037
- next = roomBelow >= roomAbove ? "bottom" : "top";
4038
- top = next === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
4039
- top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
4040
- top = Math.max(top, clip.top);
4041
- }
4042
- let left = triggerRect.left;
4043
- if (left + popW > clip.right - 8) {
4044
- left = triggerRect.right - popW;
4045
- }
4046
- if (left < clip.left + 8) left = clip.left + 8;
4068
+ const { direction: next, top, left, over, maxHeight } = computePlacement(
4069
+ triggerRect,
4070
+ popW,
4071
+ popH,
4072
+ clip
4073
+ );
4047
4074
  pop.style.top = `${top + window.scrollY}px`;
4048
4075
  pop.style.left = `${left + window.scrollX}px`;
4049
- const over = {
4050
- top: Math.max(0, clip.top - top),
4051
- right: Math.max(0, left + popW - clip.right),
4052
- bottom: Math.max(0, top + popH - clip.bottom),
4053
- left: Math.max(0, clip.left - left)
4054
- };
4076
+ pop.style.maxHeight = maxHeight === null ? "" : `${maxHeight}px`;
4055
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";
4056
4078
  if (next !== directionRef.current) {
4057
4079
  directionRef.current = next;
package/dist/components/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(-8px);
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(-8px);
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
@@ -3897,6 +3897,48 @@ var findScrollParent = (el) => {
3897
3897
  }
3898
3898
  return null;
3899
3899
  };
3900
+ var computePlacement = (triggerRect, popW, popH, clip) => {
3901
+ const roomBelow = clip.bottom - triggerRect.bottom;
3902
+ const roomAbove = triggerRect.top - clip.top;
3903
+ let direction;
3904
+ let top;
3905
+ let maxHeight = null;
3906
+ if (popH <= roomBelow) {
3907
+ direction = "bottom";
3908
+ top = triggerRect.bottom;
3909
+ } else if (popH <= roomAbove) {
3910
+ direction = "top";
3911
+ top = triggerRect.top - popH;
3912
+ } else {
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;
3922
+ }
3923
+ let left = triggerRect.left;
3924
+ if (left + popW > clip.right - 8) {
3925
+ left = triggerRect.right - popW;
3926
+ }
3927
+ if (left < clip.left + 8) left = clip.left + 8;
3928
+ const drawnH = maxHeight === null ? popH : Math.min(popH, maxHeight);
3929
+ return {
3930
+ direction,
3931
+ top,
3932
+ left,
3933
+ maxHeight,
3934
+ over: {
3935
+ top: Math.max(0, clip.top - top),
3936
+ right: Math.max(0, left + popW - clip.right),
3937
+ bottom: Math.max(0, top + drawnH - clip.bottom),
3938
+ left: Math.max(0, clip.left - left)
3939
+ }
3940
+ };
3941
+ };
3900
3942
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
3901
3943
  const [direction, setDirection] = React19.useState("bottom");
3902
3944
  const directionRef = React19.useRef("bottom");
@@ -3921,35 +3963,15 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
3921
3963
  left: Math.max(parentRect?.left ?? 0, 0),
3922
3964
  right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
3923
3965
  };
3924
- const roomBelow = clip.bottom - triggerRect.bottom;
3925
- const roomAbove = triggerRect.top - clip.top;
3926
- let next;
3927
- let top;
3928
- if (popH <= roomBelow) {
3929
- next = "bottom";
3930
- top = triggerRect.bottom;
3931
- } else if (popH <= roomAbove) {
3932
- next = "top";
3933
- top = triggerRect.top - popH;
3934
- } else {
3935
- next = roomBelow >= roomAbove ? "bottom" : "top";
3936
- top = next === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
3937
- top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
3938
- top = Math.max(top, clip.top);
3939
- }
3940
- let left = triggerRect.left;
3941
- if (left + popW > clip.right - 8) {
3942
- left = triggerRect.right - popW;
3943
- }
3944
- if (left < clip.left + 8) left = clip.left + 8;
3966
+ const { direction: next, top, left, over, maxHeight } = computePlacement(
3967
+ triggerRect,
3968
+ popW,
3969
+ popH,
3970
+ clip
3971
+ );
3945
3972
  pop.style.top = `${top + window.scrollY}px`;
3946
3973
  pop.style.left = `${left + window.scrollX}px`;
3947
- const over = {
3948
- top: Math.max(0, clip.top - top),
3949
- right: Math.max(0, left + popW - clip.right),
3950
- bottom: Math.max(0, top + popH - clip.bottom),
3951
- left: Math.max(0, clip.left - left)
3952
- };
3974
+ pop.style.maxHeight = maxHeight === null ? "" : `${maxHeight}px`;
3953
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";
3954
3976
  if (next !== directionRef.current) {
3955
3977
  directionRef.current = next;
package/dist/index.cjs CHANGED
@@ -8411,6 +8411,48 @@ var findScrollParent = (el) => {
8411
8411
  }
8412
8412
  return null;
8413
8413
  };
8414
+ var computePlacement = (triggerRect, popW, popH, clip) => {
8415
+ const roomBelow = clip.bottom - triggerRect.bottom;
8416
+ const roomAbove = triggerRect.top - clip.top;
8417
+ let direction;
8418
+ let top;
8419
+ let maxHeight = null;
8420
+ if (popH <= roomBelow) {
8421
+ direction = "bottom";
8422
+ top = triggerRect.bottom;
8423
+ } else if (popH <= roomAbove) {
8424
+ direction = "top";
8425
+ top = triggerRect.top - popH;
8426
+ } else {
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;
8436
+ }
8437
+ let left = triggerRect.left;
8438
+ if (left + popW > clip.right - 8) {
8439
+ left = triggerRect.right - popW;
8440
+ }
8441
+ if (left < clip.left + 8) left = clip.left + 8;
8442
+ const drawnH = maxHeight === null ? popH : Math.min(popH, maxHeight);
8443
+ return {
8444
+ direction,
8445
+ top,
8446
+ left,
8447
+ maxHeight,
8448
+ over: {
8449
+ top: Math.max(0, clip.top - top),
8450
+ right: Math.max(0, left + popW - clip.right),
8451
+ bottom: Math.max(0, top + drawnH - clip.bottom),
8452
+ left: Math.max(0, clip.left - left)
8453
+ }
8454
+ };
8455
+ };
8414
8456
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
8415
8457
  const [direction, setDirection] = import_react19.default.useState("bottom");
8416
8458
  const directionRef = import_react19.default.useRef("bottom");
@@ -8435,35 +8477,15 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
8435
8477
  left: Math.max(parentRect?.left ?? 0, 0),
8436
8478
  right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
8437
8479
  };
8438
- const roomBelow = clip.bottom - triggerRect.bottom;
8439
- const roomAbove = triggerRect.top - clip.top;
8440
- let next;
8441
- let top;
8442
- if (popH <= roomBelow) {
8443
- next = "bottom";
8444
- top = triggerRect.bottom;
8445
- } else if (popH <= roomAbove) {
8446
- next = "top";
8447
- top = triggerRect.top - popH;
8448
- } else {
8449
- next = roomBelow >= roomAbove ? "bottom" : "top";
8450
- top = next === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
8451
- top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
8452
- top = Math.max(top, clip.top);
8453
- }
8454
- let left = triggerRect.left;
8455
- if (left + popW > clip.right - 8) {
8456
- left = triggerRect.right - popW;
8457
- }
8458
- if (left < clip.left + 8) left = clip.left + 8;
8480
+ const { direction: next, top, left, over, maxHeight } = computePlacement(
8481
+ triggerRect,
8482
+ popW,
8483
+ popH,
8484
+ clip
8485
+ );
8459
8486
  pop.style.top = `${top + window.scrollY}px`;
8460
8487
  pop.style.left = `${left + window.scrollX}px`;
8461
- const over = {
8462
- top: Math.max(0, clip.top - top),
8463
- right: Math.max(0, left + popW - clip.right),
8464
- bottom: Math.max(0, top + popH - clip.bottom),
8465
- left: Math.max(0, clip.left - left)
8466
- };
8488
+ pop.style.maxHeight = maxHeight === null ? "" : `${maxHeight}px`;
8467
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";
8468
8490
  if (next !== directionRef.current) {
8469
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(-8px);
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(-8px);
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
@@ -8000,6 +8000,48 @@ var findScrollParent = (el) => {
8000
8000
  }
8001
8001
  return null;
8002
8002
  };
8003
+ var computePlacement = (triggerRect, popW, popH, clip) => {
8004
+ const roomBelow = clip.bottom - triggerRect.bottom;
8005
+ const roomAbove = triggerRect.top - clip.top;
8006
+ let direction;
8007
+ let top;
8008
+ let maxHeight = null;
8009
+ if (popH <= roomBelow) {
8010
+ direction = "bottom";
8011
+ top = triggerRect.bottom;
8012
+ } else if (popH <= roomAbove) {
8013
+ direction = "top";
8014
+ top = triggerRect.top - popH;
8015
+ } else {
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;
8025
+ }
8026
+ let left = triggerRect.left;
8027
+ if (left + popW > clip.right - 8) {
8028
+ left = triggerRect.right - popW;
8029
+ }
8030
+ if (left < clip.left + 8) left = clip.left + 8;
8031
+ const drawnH = maxHeight === null ? popH : Math.min(popH, maxHeight);
8032
+ return {
8033
+ direction,
8034
+ top,
8035
+ left,
8036
+ maxHeight,
8037
+ over: {
8038
+ top: Math.max(0, clip.top - top),
8039
+ right: Math.max(0, left + popW - clip.right),
8040
+ bottom: Math.max(0, top + drawnH - clip.bottom),
8041
+ left: Math.max(0, clip.left - left)
8042
+ }
8043
+ };
8044
+ };
8003
8045
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
8004
8046
  const [direction, setDirection] = React19.useState("bottom");
8005
8047
  const directionRef = React19.useRef("bottom");
@@ -8024,35 +8066,15 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
8024
8066
  left: Math.max(parentRect?.left ?? 0, 0),
8025
8067
  right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
8026
8068
  };
8027
- const roomBelow = clip.bottom - triggerRect.bottom;
8028
- const roomAbove = triggerRect.top - clip.top;
8029
- let next;
8030
- let top;
8031
- if (popH <= roomBelow) {
8032
- next = "bottom";
8033
- top = triggerRect.bottom;
8034
- } else if (popH <= roomAbove) {
8035
- next = "top";
8036
- top = triggerRect.top - popH;
8037
- } else {
8038
- next = roomBelow >= roomAbove ? "bottom" : "top";
8039
- top = next === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
8040
- top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
8041
- top = Math.max(top, clip.top);
8042
- }
8043
- let left = triggerRect.left;
8044
- if (left + popW > clip.right - 8) {
8045
- left = triggerRect.right - popW;
8046
- }
8047
- if (left < clip.left + 8) left = clip.left + 8;
8069
+ const { direction: next, top, left, over, maxHeight } = computePlacement(
8070
+ triggerRect,
8071
+ popW,
8072
+ popH,
8073
+ clip
8074
+ );
8048
8075
  pop.style.top = `${top + window.scrollY}px`;
8049
8076
  pop.style.left = `${left + window.scrollX}px`;
8050
- const over = {
8051
- top: Math.max(0, clip.top - top),
8052
- right: Math.max(0, left + popW - clip.right),
8053
- bottom: Math.max(0, top + popH - clip.bottom),
8054
- left: Math.max(0, clip.left - left)
8055
- };
8077
+ pop.style.maxHeight = maxHeight === null ? "" : `${maxHeight}px`;
8056
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";
8057
8079
  if (next !== directionRef.current) {
8058
8080
  directionRef.current = next;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@x-plat/design-system",
3
- "version": "0.14.10",
3
+ "version": "0.14.12",
4
4
  "description": "XPLAT UI Design System",
5
5
  "author": "XPLAT WOONG",
6
6
  "main": "dist/index.cjs",