@x-plat/design-system 0.5.9 → 0.5.11

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 +17 -10
  2. package/dist/components/Dropdown/index.css +1 -1
  3. package/dist/components/Dropdown/index.js +17 -10
  4. package/dist/components/PopOver/index.cjs +17 -10
  5. package/dist/components/PopOver/index.css +1 -1
  6. package/dist/components/PopOver/index.js +17 -10
  7. package/dist/components/Select/index.cjs +18 -11
  8. package/dist/components/Select/index.css +1 -4
  9. package/dist/components/Select/index.js +18 -11
  10. package/dist/components/index.cjs +18 -11
  11. package/dist/components/index.css +3 -6
  12. package/dist/components/index.js +18 -11
  13. package/dist/index.cjs +18 -11
  14. package/dist/index.css +3 -6
  15. package/dist/index.js +18 -11
  16. package/package.json +4 -1
package/dist/components/Dropdown/index.cjs CHANGED
@@ -48,28 +48,35 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
48
48
  if (!triggerRef.current || !popRef.current) return;
49
49
  const triggerRect = triggerRef.current.getBoundingClientRect();
50
50
  const popRect = popRef.current.getBoundingClientRect();
51
- const viewportWidth = window.innerWidth;
52
51
  const viewportHeight = window.innerHeight;
53
- const position2 = {};
52
+ const viewportWidth = window.innerWidth;
54
53
  let direction = "bottom";
55
- if (triggerRect.bottom + popRect.height > viewportHeight) {
54
+ let top;
55
+ let left = triggerRect.left;
56
+ if (triggerRect.bottom + popRect.height > viewportHeight && triggerRect.top - popRect.height > 0) {
56
57
  direction = "top";
58
+ top = triggerRect.top - popRect.height;
59
+ } else {
60
+ top = triggerRect.bottom;
57
61
  }
58
- if (triggerRect.left + popRect.width > viewportWidth) {
59
- position2["right"] = 10;
60
- }
61
- if (triggerRect.left < 0) {
62
- position2["left"] = 10;
62
+ if (left + popRect.width > viewportWidth) {
63
+ left = viewportWidth - popRect.width - 8;
63
64
  }
65
+ if (left < 8) left = 8;
64
66
  setPosition({
65
- position: position2,
67
+ position: { top, left, width: triggerRect.width },
66
68
  direction
67
69
  });
68
70
  }, [triggerRef, popRef]);
69
71
  import_react.default.useEffect(() => {
72
+ if (!enabled) return;
70
73
  calculatePosition();
71
74
  window.addEventListener("resize", calculatePosition);
72
- return () => window.removeEventListener("resize", calculatePosition);
75
+ window.addEventListener("scroll", calculatePosition, true);
76
+ return () => {
77
+ window.removeEventListener("resize", calculatePosition);
78
+ window.removeEventListener("scroll", calculatePosition, true);
79
+ };
73
80
  }, [calculatePosition, enabled]);
74
81
  return position;
75
82
  };
package/dist/components/Dropdown/index.css CHANGED
@@ -8,7 +8,7 @@
8
8
  cursor: pointer;
9
9
  }
10
10
  .lib-xplat-dropdown .dropdown-menu {
11
- position: absolute;
11
+ position: fixed;
12
12
  z-index: 100;
13
13
  min-width: 160px;
14
14
  background: var(--semantic-surface-neutral-default);
package/dist/components/Dropdown/index.js CHANGED
@@ -12,28 +12,35 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
12
12
  if (!triggerRef.current || !popRef.current) return;
13
13
  const triggerRect = triggerRef.current.getBoundingClientRect();
14
14
  const popRect = popRef.current.getBoundingClientRect();
15
- const viewportWidth = window.innerWidth;
16
15
  const viewportHeight = window.innerHeight;
17
- const position2 = {};
16
+ const viewportWidth = window.innerWidth;
18
17
  let direction = "bottom";
19
- if (triggerRect.bottom + popRect.height > viewportHeight) {
18
+ let top;
19
+ let left = triggerRect.left;
20
+ if (triggerRect.bottom + popRect.height > viewportHeight && triggerRect.top - popRect.height > 0) {
20
21
  direction = "top";
22
+ top = triggerRect.top - popRect.height;
23
+ } else {
24
+ top = triggerRect.bottom;
21
25
  }
22
- if (triggerRect.left + popRect.width > viewportWidth) {
23
- position2["right"] = 10;
24
- }
25
- if (triggerRect.left < 0) {
26
- position2["left"] = 10;
26
+ if (left + popRect.width > viewportWidth) {
27
+ left = viewportWidth - popRect.width - 8;
27
28
  }
29
+ if (left < 8) left = 8;
28
30
  setPosition({
29
- position: position2,
31
+ position: { top, left, width: triggerRect.width },
30
32
  direction
31
33
  });
32
34
  }, [triggerRef, popRef]);
33
35
  React.useEffect(() => {
36
+ if (!enabled) return;
34
37
  calculatePosition();
35
38
  window.addEventListener("resize", calculatePosition);
36
- return () => window.removeEventListener("resize", calculatePosition);
39
+ window.addEventListener("scroll", calculatePosition, true);
40
+ return () => {
41
+ window.removeEventListener("resize", calculatePosition);
42
+ window.removeEventListener("scroll", calculatePosition, true);
43
+ };
37
44
  }, [calculatePosition, enabled]);
38
45
  return position;
39
46
  };
package/dist/components/PopOver/index.cjs CHANGED
@@ -48,28 +48,35 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
48
48
  if (!triggerRef.current || !popRef.current) return;
49
49
  const triggerRect = triggerRef.current.getBoundingClientRect();
50
50
  const popRect = popRef.current.getBoundingClientRect();
51
- const viewportWidth = window.innerWidth;
52
51
  const viewportHeight = window.innerHeight;
53
- const position2 = {};
52
+ const viewportWidth = window.innerWidth;
54
53
  let direction = "bottom";
55
- if (triggerRect.bottom + popRect.height > viewportHeight) {
54
+ let top;
55
+ let left = triggerRect.left;
56
+ if (triggerRect.bottom + popRect.height > viewportHeight && triggerRect.top - popRect.height > 0) {
56
57
  direction = "top";
58
+ top = triggerRect.top - popRect.height;
59
+ } else {
60
+ top = triggerRect.bottom;
57
61
  }
58
- if (triggerRect.left + popRect.width > viewportWidth) {
59
- position2["right"] = 10;
60
- }
61
- if (triggerRect.left < 0) {
62
- position2["left"] = 10;
62
+ if (left + popRect.width > viewportWidth) {
63
+ left = viewportWidth - popRect.width - 8;
63
64
  }
65
+ if (left < 8) left = 8;
64
66
  setPosition({
65
- position: position2,
67
+ position: { top, left, width: triggerRect.width },
66
68
  direction
67
69
  });
68
70
  }, [triggerRef, popRef]);
69
71
  import_react.default.useEffect(() => {
72
+ if (!enabled) return;
70
73
  calculatePosition();
71
74
  window.addEventListener("resize", calculatePosition);
72
- return () => window.removeEventListener("resize", calculatePosition);
75
+ window.addEventListener("scroll", calculatePosition, true);
76
+ return () => {
77
+ window.removeEventListener("resize", calculatePosition);
78
+ window.removeEventListener("scroll", calculatePosition, true);
79
+ };
73
80
  }, [calculatePosition, enabled]);
74
81
  return position;
75
82
  };
package/dist/components/PopOver/index.css CHANGED
@@ -7,7 +7,7 @@
7
7
  user-select: none;
8
8
  }
9
9
  .lib-xplat-pop-over > .content-wrap {
10
- position: absolute;
10
+ position: fixed;
11
11
  cursor: default;
12
12
  transition: transform 0.2s ease, opacity 0.2s ease;
13
13
  background: white;
package/dist/components/PopOver/index.js CHANGED
@@ -12,28 +12,35 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
12
12
  if (!triggerRef.current || !popRef.current) return;
13
13
  const triggerRect = triggerRef.current.getBoundingClientRect();
14
14
  const popRect = popRef.current.getBoundingClientRect();
15
- const viewportWidth = window.innerWidth;
16
15
  const viewportHeight = window.innerHeight;
17
- const position2 = {};
16
+ const viewportWidth = window.innerWidth;
18
17
  let direction = "bottom";
19
- if (triggerRect.bottom + popRect.height > viewportHeight) {
18
+ let top;
19
+ let left = triggerRect.left;
20
+ if (triggerRect.bottom + popRect.height > viewportHeight && triggerRect.top - popRect.height > 0) {
20
21
  direction = "top";
22
+ top = triggerRect.top - popRect.height;
23
+ } else {
24
+ top = triggerRect.bottom;
21
25
  }
22
- if (triggerRect.left + popRect.width > viewportWidth) {
23
- position2["right"] = 10;
24
- }
25
- if (triggerRect.left < 0) {
26
- position2["left"] = 10;
26
+ if (left + popRect.width > viewportWidth) {
27
+ left = viewportWidth - popRect.width - 8;
27
28
  }
29
+ if (left < 8) left = 8;
28
30
  setPosition({
29
- position: position2,
31
+ position: { top, left, width: triggerRect.width },
30
32
  direction
31
33
  });
32
34
  }, [triggerRef, popRef]);
33
35
  React.useEffect(() => {
36
+ if (!enabled) return;
34
37
  calculatePosition();
35
38
  window.addEventListener("resize", calculatePosition);
36
- return () => window.removeEventListener("resize", calculatePosition);
39
+ window.addEventListener("scroll", calculatePosition, true);
40
+ return () => {
41
+ window.removeEventListener("resize", calculatePosition);
42
+ window.removeEventListener("scroll", calculatePosition, true);
43
+ };
37
44
  }, [calculatePosition, enabled]);
38
45
  return position;
39
46
  };
package/dist/components/Select/index.cjs CHANGED
@@ -49,28 +49,35 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
49
49
  if (!triggerRef.current || !popRef.current) return;
50
50
  const triggerRect = triggerRef.current.getBoundingClientRect();
51
51
  const popRect = popRef.current.getBoundingClientRect();
52
- const viewportWidth = window.innerWidth;
53
52
  const viewportHeight = window.innerHeight;
54
- const position2 = {};
53
+ const viewportWidth = window.innerWidth;
55
54
  let direction = "bottom";
56
- if (triggerRect.bottom + popRect.height > viewportHeight) {
55
+ let top;
56
+ let left = triggerRect.left;
57
+ if (triggerRect.bottom + popRect.height > viewportHeight && triggerRect.top - popRect.height > 0) {
57
58
  direction = "top";
59
+ top = triggerRect.top - popRect.height;
60
+ } else {
61
+ top = triggerRect.bottom;
58
62
  }
59
- if (triggerRect.left + popRect.width > viewportWidth) {
60
- position2["right"] = 10;
61
- }
62
- if (triggerRect.left < 0) {
63
- position2["left"] = 10;
63
+ if (left + popRect.width > viewportWidth) {
64
+ left = viewportWidth - popRect.width - 8;
64
65
  }
66
+ if (left < 8) left = 8;
65
67
  setPosition({
66
- position: position2,
68
+ position: { top, left, width: triggerRect.width },
67
69
  direction
68
70
  });
69
71
  }, [triggerRef, popRef]);
70
72
  import_react.default.useEffect(() => {
73
+ if (!enabled) return;
71
74
  calculatePosition();
72
75
  window.addEventListener("resize", calculatePosition);
73
- return () => window.removeEventListener("resize", calculatePosition);
76
+ window.addEventListener("scroll", calculatePosition, true);
77
+ return () => {
78
+ window.removeEventListener("resize", calculatePosition);
79
+ window.removeEventListener("scroll", calculatePosition, true);
80
+ };
74
81
  }, [calculatePosition, enabled]);
75
82
  return position;
76
83
  };
@@ -1194,7 +1201,7 @@ var SelectRoot = (props) => {
1194
1201
  {
1195
1202
  className: clsx_default("select-content", position.direction, stateClass),
1196
1203
  ref: contentRef,
1197
- style: { ...position.position },
1204
+ style: { ...position.position, minWidth: position.position.width },
1198
1205
  role: "listbox",
1199
1206
  children: itemChildren
1200
1207
  }
package/dist/components/Select/index.css CHANGED
@@ -100,10 +100,7 @@
100
100
  font-size: 20px;
101
101
  }
102
102
  .lib-xplat-select .select-content {
103
- position: absolute;
104
- left: 0;
105
- right: 0;
106
- width: 100%;
103
+ position: fixed;
107
104
  padding: var(--spacing-space-1) 0;
108
105
  border-radius: var(--spacing-radius-md);
109
106
  background-color: var(--semantic-surface-neutral-default);
package/dist/components/Select/index.js CHANGED
@@ -12,28 +12,35 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
12
12
  if (!triggerRef.current || !popRef.current) return;
13
13
  const triggerRect = triggerRef.current.getBoundingClientRect();
14
14
  const popRect = popRef.current.getBoundingClientRect();
15
- const viewportWidth = window.innerWidth;
16
15
  const viewportHeight = window.innerHeight;
17
- const position2 = {};
16
+ const viewportWidth = window.innerWidth;
18
17
  let direction = "bottom";
19
- if (triggerRect.bottom + popRect.height > viewportHeight) {
18
+ let top;
19
+ let left = triggerRect.left;
20
+ if (triggerRect.bottom + popRect.height > viewportHeight && triggerRect.top - popRect.height > 0) {
20
21
  direction = "top";
22
+ top = triggerRect.top - popRect.height;
23
+ } else {
24
+ top = triggerRect.bottom;
21
25
  }
22
- if (triggerRect.left + popRect.width > viewportWidth) {
23
- position2["right"] = 10;
24
- }
25
- if (triggerRect.left < 0) {
26
- position2["left"] = 10;
26
+ if (left + popRect.width > viewportWidth) {
27
+ left = viewportWidth - popRect.width - 8;
27
28
  }
29
+ if (left < 8) left = 8;
28
30
  setPosition({
29
- position: position2,
31
+ position: { top, left, width: triggerRect.width },
30
32
  direction
31
33
  });
32
34
  }, [triggerRef, popRef]);
33
35
  React.useEffect(() => {
36
+ if (!enabled) return;
34
37
  calculatePosition();
35
38
  window.addEventListener("resize", calculatePosition);
36
- return () => window.removeEventListener("resize", calculatePosition);
39
+ window.addEventListener("scroll", calculatePosition, true);
40
+ return () => {
41
+ window.removeEventListener("resize", calculatePosition);
42
+ window.removeEventListener("scroll", calculatePosition, true);
43
+ };
37
44
  }, [calculatePosition, enabled]);
38
45
  return position;
39
46
  };
@@ -1157,7 +1164,7 @@ var SelectRoot = (props) => {
1157
1164
  {
1158
1165
  className: clsx_default("select-content", position.direction, stateClass),
1159
1166
  ref: contentRef,
1160
- style: { ...position.position },
1167
+ style: { ...position.position, minWidth: position.position.width },
1161
1168
  role: "listbox",
1162
1169
  children: itemChildren
1163
1170
  }
package/dist/components/index.cjs CHANGED
@@ -3335,28 +3335,35 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
3335
3335
  if (!triggerRef.current || !popRef.current) return;
3336
3336
  const triggerRect = triggerRef.current.getBoundingClientRect();
3337
3337
  const popRect = popRef.current.getBoundingClientRect();
3338
- const viewportWidth = window.innerWidth;
3339
3338
  const viewportHeight = window.innerHeight;
3340
- const position2 = {};
3339
+ const viewportWidth = window.innerWidth;
3341
3340
  let direction = "bottom";
3342
- if (triggerRect.bottom + popRect.height > viewportHeight) {
3341
+ let top;
3342
+ let left = triggerRect.left;
3343
+ if (triggerRect.bottom + popRect.height > viewportHeight && triggerRect.top - popRect.height > 0) {
3343
3344
  direction = "top";
3345
+ top = triggerRect.top - popRect.height;
3346
+ } else {
3347
+ top = triggerRect.bottom;
3344
3348
  }
3345
- if (triggerRect.left + popRect.width > viewportWidth) {
3346
- position2["right"] = 10;
3347
- }
3348
- if (triggerRect.left < 0) {
3349
- position2["left"] = 10;
3349
+ if (left + popRect.width > viewportWidth) {
3350
+ left = viewportWidth - popRect.width - 8;
3350
3351
  }
3352
+ if (left < 8) left = 8;
3351
3353
  setPosition({
3352
- position: position2,
3354
+ position: { top, left, width: triggerRect.width },
3353
3355
  direction
3354
3356
  });
3355
3357
  }, [triggerRef, popRef]);
3356
3358
  import_react17.default.useEffect(() => {
3359
+ if (!enabled) return;
3357
3360
  calculatePosition();
3358
3361
  window.addEventListener("resize", calculatePosition);
3359
- return () => window.removeEventListener("resize", calculatePosition);
3362
+ window.addEventListener("scroll", calculatePosition, true);
3363
+ return () => {
3364
+ window.removeEventListener("resize", calculatePosition);
3365
+ window.removeEventListener("scroll", calculatePosition, true);
3366
+ };
3360
3367
  }, [calculatePosition, enabled]);
3361
3368
  return position;
3362
3369
  };
@@ -4147,7 +4154,7 @@ var SelectRoot = (props) => {
4147
4154
  {
4148
4155
  className: clsx_default("select-content", position.direction, stateClass),
4149
4156
  ref: contentRef,
4150
- style: { ...position.position },
4157
+ style: { ...position.position, minWidth: position.position.width },
4151
4158
  role: "listbox",
4152
4159
  children: itemChildren
4153
4160
  }
package/dist/components/index.css CHANGED
@@ -2605,7 +2605,7 @@
2605
2605
  cursor: pointer;
2606
2606
  }
2607
2607
  .lib-xplat-dropdown .dropdown-menu {
2608
- position: absolute;
2608
+ position: fixed;
2609
2609
  z-index: 100;
2610
2610
  min-width: 160px;
2611
2611
  background: var(--semantic-surface-neutral-default);
@@ -2938,7 +2938,7 @@
2938
2938
  user-select: none;
2939
2939
  }
2940
2940
  .lib-xplat-pop-over > .content-wrap {
2941
- position: absolute;
2941
+ position: fixed;
2942
2942
  cursor: default;
2943
2943
  transition: transform 0.2s ease, opacity 0.2s ease;
2944
2944
  background: white;
@@ -3210,10 +3210,7 @@
3210
3210
  font-size: 20px;
3211
3211
  }
3212
3212
  .lib-xplat-select .select-content {
3213
- position: absolute;
3214
- left: 0;
3215
- right: 0;
3216
- width: 100%;
3213
+ position: fixed;
3217
3214
  padding: var(--spacing-space-1) 0;
3218
3215
  border-radius: var(--spacing-radius-md);
3219
3216
  background-color: var(--semantic-surface-neutral-default);
package/dist/components/index.js CHANGED
@@ -3247,28 +3247,35 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
3247
3247
  if (!triggerRef.current || !popRef.current) return;
3248
3248
  const triggerRect = triggerRef.current.getBoundingClientRect();
3249
3249
  const popRect = popRef.current.getBoundingClientRect();
3250
- const viewportWidth = window.innerWidth;
3251
3250
  const viewportHeight = window.innerHeight;
3252
- const position2 = {};
3251
+ const viewportWidth = window.innerWidth;
3253
3252
  let direction = "bottom";
3254
- if (triggerRect.bottom + popRect.height > viewportHeight) {
3253
+ let top;
3254
+ let left = triggerRect.left;
3255
+ if (triggerRect.bottom + popRect.height > viewportHeight && triggerRect.top - popRect.height > 0) {
3255
3256
  direction = "top";
3257
+ top = triggerRect.top - popRect.height;
3258
+ } else {
3259
+ top = triggerRect.bottom;
3256
3260
  }
3257
- if (triggerRect.left + popRect.width > viewportWidth) {
3258
- position2["right"] = 10;
3259
- }
3260
- if (triggerRect.left < 0) {
3261
- position2["left"] = 10;
3261
+ if (left + popRect.width > viewportWidth) {
3262
+ left = viewportWidth - popRect.width - 8;
3262
3263
  }
3264
+ if (left < 8) left = 8;
3263
3265
  setPosition({
3264
- position: position2,
3266
+ position: { top, left, width: triggerRect.width },
3265
3267
  direction
3266
3268
  });
3267
3269
  }, [triggerRef, popRef]);
3268
3270
  React16.useEffect(() => {
3271
+ if (!enabled) return;
3269
3272
  calculatePosition();
3270
3273
  window.addEventListener("resize", calculatePosition);
3271
- return () => window.removeEventListener("resize", calculatePosition);
3274
+ window.addEventListener("scroll", calculatePosition, true);
3275
+ return () => {
3276
+ window.removeEventListener("resize", calculatePosition);
3277
+ window.removeEventListener("scroll", calculatePosition, true);
3278
+ };
3272
3279
  }, [calculatePosition, enabled]);
3273
3280
  return position;
3274
3281
  };
@@ -4059,7 +4066,7 @@ var SelectRoot = (props) => {
4059
4066
  {
4060
4067
  className: clsx_default("select-content", position.direction, stateClass),
4061
4068
  ref: contentRef,
4062
- style: { ...position.position },
4069
+ style: { ...position.position, minWidth: position.position.width },
4063
4070
  role: "listbox",
4064
4071
  children: itemChildren
4065
4072
  }
package/dist/index.cjs CHANGED
@@ -7759,28 +7759,35 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
7759
7759
  if (!triggerRef.current || !popRef.current) return;
7760
7760
  const triggerRect = triggerRef.current.getBoundingClientRect();
7761
7761
  const popRect = popRef.current.getBoundingClientRect();
7762
- const viewportWidth = window.innerWidth;
7763
7762
  const viewportHeight = window.innerHeight;
7764
- const position2 = {};
7763
+ const viewportWidth = window.innerWidth;
7765
7764
  let direction = "bottom";
7766
- if (triggerRect.bottom + popRect.height > viewportHeight) {
7765
+ let top;
7766
+ let left = triggerRect.left;
7767
+ if (triggerRect.bottom + popRect.height > viewportHeight && triggerRect.top - popRect.height > 0) {
7767
7768
  direction = "top";
7769
+ top = triggerRect.top - popRect.height;
7770
+ } else {
7771
+ top = triggerRect.bottom;
7768
7772
  }
7769
- if (triggerRect.left + popRect.width > viewportWidth) {
7770
- position2["right"] = 10;
7771
- }
7772
- if (triggerRect.left < 0) {
7773
- position2["left"] = 10;
7773
+ if (left + popRect.width > viewportWidth) {
7774
+ left = viewportWidth - popRect.width - 8;
7774
7775
  }
7776
+ if (left < 8) left = 8;
7775
7777
  setPosition({
7776
- position: position2,
7778
+ position: { top, left, width: triggerRect.width },
7777
7779
  direction
7778
7780
  });
7779
7781
  }, [triggerRef, popRef]);
7780
7782
  import_react17.default.useEffect(() => {
7783
+ if (!enabled) return;
7781
7784
  calculatePosition();
7782
7785
  window.addEventListener("resize", calculatePosition);
7783
- return () => window.removeEventListener("resize", calculatePosition);
7786
+ window.addEventListener("scroll", calculatePosition, true);
7787
+ return () => {
7788
+ window.removeEventListener("resize", calculatePosition);
7789
+ window.removeEventListener("scroll", calculatePosition, true);
7790
+ };
7784
7791
  }, [calculatePosition, enabled]);
7785
7792
  return position;
7786
7793
  };
@@ -8571,7 +8578,7 @@ var SelectRoot = (props) => {
8571
8578
  {
8572
8579
  className: clsx_default("select-content", position.direction, stateClass),
8573
8580
  ref: contentRef,
8574
- style: { ...position.position },
8581
+ style: { ...position.position, minWidth: position.position.width },
8575
8582
  role: "listbox",
8576
8583
  children: itemChildren
8577
8584
  }
package/dist/index.css CHANGED
@@ -2605,7 +2605,7 @@
2605
2605
  cursor: pointer;
2606
2606
  }
2607
2607
  .lib-xplat-dropdown .dropdown-menu {
2608
- position: absolute;
2608
+ position: fixed;
2609
2609
  z-index: 100;
2610
2610
  min-width: 160px;
2611
2611
  background: var(--semantic-surface-neutral-default);
@@ -2938,7 +2938,7 @@
2938
2938
  user-select: none;
2939
2939
  }
2940
2940
  .lib-xplat-pop-over > .content-wrap {
2941
- position: absolute;
2941
+ position: fixed;
2942
2942
  cursor: default;
2943
2943
  transition: transform 0.2s ease, opacity 0.2s ease;
2944
2944
  background: white;
@@ -3210,10 +3210,7 @@
3210
3210
  font-size: 20px;
3211
3211
  }
3212
3212
  .lib-xplat-select .select-content {
3213
- position: absolute;
3214
- left: 0;
3215
- right: 0;
3216
- width: 100%;
3213
+ position: fixed;
3217
3214
  padding: var(--spacing-space-1) 0;
3218
3215
  border-radius: var(--spacing-radius-md);
3219
3216
  background-color: var(--semantic-surface-neutral-default);
package/dist/index.js CHANGED
@@ -7362,28 +7362,35 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
7362
7362
  if (!triggerRef.current || !popRef.current) return;
7363
7363
  const triggerRect = triggerRef.current.getBoundingClientRect();
7364
7364
  const popRect = popRef.current.getBoundingClientRect();
7365
- const viewportWidth = window.innerWidth;
7366
7365
  const viewportHeight = window.innerHeight;
7367
- const position2 = {};
7366
+ const viewportWidth = window.innerWidth;
7368
7367
  let direction = "bottom";
7369
- if (triggerRect.bottom + popRect.height > viewportHeight) {
7368
+ let top;
7369
+ let left = triggerRect.left;
7370
+ if (triggerRect.bottom + popRect.height > viewportHeight && triggerRect.top - popRect.height > 0) {
7370
7371
  direction = "top";
7372
+ top = triggerRect.top - popRect.height;
7373
+ } else {
7374
+ top = triggerRect.bottom;
7371
7375
  }
7372
- if (triggerRect.left + popRect.width > viewportWidth) {
7373
- position2["right"] = 10;
7374
- }
7375
- if (triggerRect.left < 0) {
7376
- position2["left"] = 10;
7376
+ if (left + popRect.width > viewportWidth) {
7377
+ left = viewportWidth - popRect.width - 8;
7377
7378
  }
7379
+ if (left < 8) left = 8;
7378
7380
  setPosition({
7379
- position: position2,
7381
+ position: { top, left, width: triggerRect.width },
7380
7382
  direction
7381
7383
  });
7382
7384
  }, [triggerRef, popRef]);
7383
7385
  React16.useEffect(() => {
7386
+ if (!enabled) return;
7384
7387
  calculatePosition();
7385
7388
  window.addEventListener("resize", calculatePosition);
7386
- return () => window.removeEventListener("resize", calculatePosition);
7389
+ window.addEventListener("scroll", calculatePosition, true);
7390
+ return () => {
7391
+ window.removeEventListener("resize", calculatePosition);
7392
+ window.removeEventListener("scroll", calculatePosition, true);
7393
+ };
7387
7394
  }, [calculatePosition, enabled]);
7388
7395
  return position;
7389
7396
  };
@@ -8174,7 +8181,7 @@ var SelectRoot = (props) => {
8174
8181
  {
8175
8182
  className: clsx_default("select-content", position.direction, stateClass),
8176
8183
  ref: contentRef,
8177
- style: { ...position.position },
8184
+ style: { ...position.position, minWidth: position.position.width },
8178
8185
  role: "listbox",
8179
8186
  children: itemChildren
8180
8187
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@x-plat/design-system",
3
- "version": "0.5.9",
3
+ "version": "0.5.11",
4
4
  "description": "XPLAT UI Design System",
5
5
  "author": "XPLAT WOONG",
6
6
  "main": "dist/index.cjs",
@@ -45,6 +45,9 @@
45
45
  },
46
46
  "./style.css": "./dist/index.css"
47
47
  },
48
+ "publishConfig": {
49
+ "registry": "https://registry.figma.com/npm/b24bf639-d7c5-4da1-947f-66484e5f4d7f/registry/"
50
+ },
48
51
  "files": [
49
52
  "dist",
50
53
  "global.d.ts",