@x-plat/design-system 0.14.3 → 0.14.5

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.
@@ -74,8 +74,8 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
74
74
  left = triggerRect.right - popW;
75
75
  }
76
76
  if (left < 8) left = 8;
77
- pop.style.top = `${top}px`;
78
- pop.style.left = `${left}px`;
77
+ pop.style.top = `${top + window.scrollY}px`;
78
+ pop.style.left = `${left + window.scrollX}px`;
79
79
  if (next !== directionRef.current) {
80
80
  directionRef.current = next;
81
81
  setDirection(next);
@@ -97,15 +97,10 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
97
97
  }, [calculatePosition, enabled, popRef]);
98
98
  import_react.default.useEffect(() => {
99
99
  if (!enabled) return;
100
- let raf = 0;
101
- const onScrollOrResize = () => {
102
- cancelAnimationFrame(raf);
103
- raf = requestAnimationFrame(calculatePosition);
104
- };
100
+ const onScrollOrResize = () => calculatePosition();
105
101
  window.addEventListener("resize", onScrollOrResize, { passive: true });
106
102
  window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
107
103
  return () => {
108
- cancelAnimationFrame(raf);
109
104
  window.removeEventListener("resize", onScrollOrResize);
110
105
  window.removeEventListener("scroll", onScrollOrResize, true);
111
106
  };
@@ -1,3 +1,5 @@
1
+ @charset "UTF-8";
2
+
1
3
  /* src/components/Dropdown/dropdown.scss */
2
4
  .lib-xplat-dropdown {
3
5
  position: relative;
@@ -8,7 +10,7 @@
8
10
  cursor: pointer;
9
11
  }
10
12
  .lib-xplat-dropdown-menu {
11
- position: fixed;
13
+ position: absolute;
12
14
  z-index: 1000;
13
15
  min-width: 160px;
14
16
  background: var(--semantic-surface-neutral-primary);
@@ -38,8 +38,8 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
38
38
  left = triggerRect.right - popW;
39
39
  }
40
40
  if (left < 8) left = 8;
41
- pop.style.top = `${top}px`;
42
- pop.style.left = `${left}px`;
41
+ pop.style.top = `${top + window.scrollY}px`;
42
+ pop.style.left = `${left + window.scrollX}px`;
43
43
  if (next !== directionRef.current) {
44
44
  directionRef.current = next;
45
45
  setDirection(next);
@@ -61,15 +61,10 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
61
61
  }, [calculatePosition, enabled, popRef]);
62
62
  React.useEffect(() => {
63
63
  if (!enabled) return;
64
- let raf = 0;
65
- const onScrollOrResize = () => {
66
- cancelAnimationFrame(raf);
67
- raf = requestAnimationFrame(calculatePosition);
68
- };
64
+ const onScrollOrResize = () => calculatePosition();
69
65
  window.addEventListener("resize", onScrollOrResize, { passive: true });
70
66
  window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
71
67
  return () => {
72
- cancelAnimationFrame(raf);
73
68
  window.removeEventListener("resize", onScrollOrResize);
74
69
  window.removeEventListener("scroll", onScrollOrResize, true);
75
70
  };
@@ -74,8 +74,8 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
74
74
  left = triggerRect.right - popW;
75
75
  }
76
76
  if (left < 8) left = 8;
77
- pop.style.top = `${top}px`;
78
- pop.style.left = `${left}px`;
77
+ pop.style.top = `${top + window.scrollY}px`;
78
+ pop.style.left = `${left + window.scrollX}px`;
79
79
  if (next !== directionRef.current) {
80
80
  directionRef.current = next;
81
81
  setDirection(next);
@@ -97,15 +97,10 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
97
97
  }, [calculatePosition, enabled, popRef]);
98
98
  import_react.default.useEffect(() => {
99
99
  if (!enabled) return;
100
- let raf = 0;
101
- const onScrollOrResize = () => {
102
- cancelAnimationFrame(raf);
103
- raf = requestAnimationFrame(calculatePosition);
104
- };
100
+ const onScrollOrResize = () => calculatePosition();
105
101
  window.addEventListener("resize", onScrollOrResize, { passive: true });
106
102
  window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
107
103
  return () => {
108
- cancelAnimationFrame(raf);
109
104
  window.removeEventListener("resize", onScrollOrResize);
110
105
  window.removeEventListener("scroll", onScrollOrResize, true);
111
106
  };
@@ -1,3 +1,5 @@
1
+ @charset "UTF-8";
2
+
1
3
  /* src/components/PopOver/popOver.scss */
2
4
  .lib-xplat-pop-over {
3
5
  position: relative;
@@ -7,7 +9,7 @@
7
9
  user-select: none;
8
10
  }
9
11
  .lib-xplat-pop-over-content {
10
- position: fixed;
12
+ position: absolute;
11
13
  z-index: 1000;
12
14
  cursor: default;
13
15
  transition: transform 0.2s ease, opacity 0.2s ease;
@@ -38,8 +38,8 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
38
38
  left = triggerRect.right - popW;
39
39
  }
40
40
  if (left < 8) left = 8;
41
- pop.style.top = `${top}px`;
42
- pop.style.left = `${left}px`;
41
+ pop.style.top = `${top + window.scrollY}px`;
42
+ pop.style.left = `${left + window.scrollX}px`;
43
43
  if (next !== directionRef.current) {
44
44
  directionRef.current = next;
45
45
  setDirection(next);
@@ -61,15 +61,10 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
61
61
  }, [calculatePosition, enabled, popRef]);
62
62
  React.useEffect(() => {
63
63
  if (!enabled) return;
64
- let raf = 0;
65
- const onScrollOrResize = () => {
66
- cancelAnimationFrame(raf);
67
- raf = requestAnimationFrame(calculatePosition);
68
- };
64
+ const onScrollOrResize = () => calculatePosition();
69
65
  window.addEventListener("resize", onScrollOrResize, { passive: true });
70
66
  window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
71
67
  return () => {
72
- cancelAnimationFrame(raf);
73
68
  window.removeEventListener("resize", onScrollOrResize);
74
69
  window.removeEventListener("scroll", onScrollOrResize, true);
75
70
  };
@@ -75,8 +75,8 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
75
75
  left = triggerRect.right - popW;
76
76
  }
77
77
  if (left < 8) left = 8;
78
- pop.style.top = `${top}px`;
79
- pop.style.left = `${left}px`;
78
+ pop.style.top = `${top + window.scrollY}px`;
79
+ pop.style.left = `${left + window.scrollX}px`;
80
80
  if (next !== directionRef.current) {
81
81
  directionRef.current = next;
82
82
  setDirection(next);
@@ -98,15 +98,10 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
98
98
  }, [calculatePosition, enabled, popRef]);
99
99
  import_react.default.useEffect(() => {
100
100
  if (!enabled) return;
101
- let raf = 0;
102
- const onScrollOrResize = () => {
103
- cancelAnimationFrame(raf);
104
- raf = requestAnimationFrame(calculatePosition);
105
- };
101
+ const onScrollOrResize = () => calculatePosition();
106
102
  window.addEventListener("resize", onScrollOrResize, { passive: true });
107
103
  window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
108
104
  return () => {
109
- cancelAnimationFrame(raf);
110
105
  window.removeEventListener("resize", onScrollOrResize);
111
106
  window.removeEventListener("scroll", onScrollOrResize, true);
112
107
  };
@@ -199,7 +199,7 @@
199
199
  letter-spacing: var(--semantic-typo-label-2-m-ls);
200
200
  }
201
201
  .lib-xplat-select-content {
202
- position: fixed;
202
+ position: absolute;
203
203
  z-index: 1000;
204
204
  padding: var(--spacing-space-1) 0;
205
205
  border-radius: var(--spacing-radius-md);
@@ -38,8 +38,8 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
38
38
  left = triggerRect.right - popW;
39
39
  }
40
40
  if (left < 8) left = 8;
41
- pop.style.top = `${top}px`;
42
- pop.style.left = `${left}px`;
41
+ pop.style.top = `${top + window.scrollY}px`;
42
+ pop.style.left = `${left + window.scrollX}px`;
43
43
  if (next !== directionRef.current) {
44
44
  directionRef.current = next;
45
45
  setDirection(next);
@@ -61,15 +61,10 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
61
61
  }, [calculatePosition, enabled, popRef]);
62
62
  React.useEffect(() => {
63
63
  if (!enabled) return;
64
- let raf = 0;
65
- const onScrollOrResize = () => {
66
- cancelAnimationFrame(raf);
67
- raf = requestAnimationFrame(calculatePosition);
68
- };
64
+ const onScrollOrResize = () => calculatePosition();
69
65
  window.addEventListener("resize", onScrollOrResize, { passive: true });
70
66
  window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
71
67
  return () => {
72
- cancelAnimationFrame(raf);
73
68
  window.removeEventListener("resize", onScrollOrResize);
74
69
  window.removeEventListener("scroll", onScrollOrResize, true);
75
70
  };
@@ -74,8 +74,8 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
74
74
  left = triggerRect.right - popW;
75
75
  }
76
76
  if (left < 8) left = 8;
77
- pop.style.top = `${top}px`;
78
- pop.style.left = `${left}px`;
77
+ pop.style.top = `${top + window.scrollY}px`;
78
+ pop.style.left = `${left + window.scrollX}px`;
79
79
  if (next !== directionRef.current) {
80
80
  directionRef.current = next;
81
81
  setDirection(next);
@@ -97,15 +97,10 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
97
97
  }, [calculatePosition, enabled, popRef]);
98
98
  import_react.default.useEffect(() => {
99
99
  if (!enabled) return;
100
- let raf = 0;
101
- const onScrollOrResize = () => {
102
- cancelAnimationFrame(raf);
103
- raf = requestAnimationFrame(calculatePosition);
104
- };
100
+ const onScrollOrResize = () => calculatePosition();
105
101
  window.addEventListener("resize", onScrollOrResize, { passive: true });
106
102
  window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
107
103
  return () => {
108
- cancelAnimationFrame(raf);
109
104
  window.removeEventListener("resize", onScrollOrResize);
110
105
  window.removeEventListener("scroll", onScrollOrResize, true);
111
106
  };
@@ -1,3 +1,5 @@
1
+ @charset "UTF-8";
2
+
1
3
  /* src/components/FieldMessage/fieldMessage.scss */
2
4
  .lib-xplat-field {
3
5
  display: flex;
@@ -116,7 +118,7 @@
116
118
  color: var(--semantic-text-disabled);
117
119
  }
118
120
  .lib-xplat-time-picker-content {
119
- position: fixed;
121
+ position: absolute;
120
122
  z-index: 1000;
121
123
  max-height: 220px;
122
124
  overflow-y: auto;
@@ -38,8 +38,8 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
38
38
  left = triggerRect.right - popW;
39
39
  }
40
40
  if (left < 8) left = 8;
41
- pop.style.top = `${top}px`;
42
- pop.style.left = `${left}px`;
41
+ pop.style.top = `${top + window.scrollY}px`;
42
+ pop.style.left = `${left + window.scrollX}px`;
43
43
  if (next !== directionRef.current) {
44
44
  directionRef.current = next;
45
45
  setDirection(next);
@@ -61,15 +61,10 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
61
61
  }, [calculatePosition, enabled, popRef]);
62
62
  React.useEffect(() => {
63
63
  if (!enabled) return;
64
- let raf = 0;
65
- const onScrollOrResize = () => {
66
- cancelAnimationFrame(raf);
67
- raf = requestAnimationFrame(calculatePosition);
68
- };
64
+ const onScrollOrResize = () => calculatePosition();
69
65
  window.addEventListener("resize", onScrollOrResize, { passive: true });
70
66
  window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
71
67
  return () => {
72
- cancelAnimationFrame(raf);
73
68
  window.removeEventListener("resize", onScrollOrResize);
74
69
  window.removeEventListener("scroll", onScrollOrResize, true);
75
70
  };
@@ -4001,8 +4001,8 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
4001
4001
  left = triggerRect.right - popW;
4002
4002
  }
4003
4003
  if (left < 8) left = 8;
4004
- pop.style.top = `${top}px`;
4005
- pop.style.left = `${left}px`;
4004
+ pop.style.top = `${top + window.scrollY}px`;
4005
+ pop.style.left = `${left + window.scrollX}px`;
4006
4006
  if (next !== directionRef.current) {
4007
4007
  directionRef.current = next;
4008
4008
  setDirection(next);
@@ -4024,15 +4024,10 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
4024
4024
  }, [calculatePosition, enabled, popRef]);
4025
4025
  import_react19.default.useEffect(() => {
4026
4026
  if (!enabled) return;
4027
- let raf = 0;
4028
- const onScrollOrResize = () => {
4029
- cancelAnimationFrame(raf);
4030
- raf = requestAnimationFrame(calculatePosition);
4031
- };
4027
+ const onScrollOrResize = () => calculatePosition();
4032
4028
  window.addEventListener("resize", onScrollOrResize, { passive: true });
4033
4029
  window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
4034
4030
  return () => {
4035
- cancelAnimationFrame(raf);
4036
4031
  window.removeEventListener("resize", onScrollOrResize);
4037
4032
  window.removeEventListener("scroll", onScrollOrResize, true);
4038
4033
  };
@@ -3273,7 +3273,7 @@
3273
3273
  cursor: pointer;
3274
3274
  }
3275
3275
  .lib-xplat-dropdown-menu {
3276
- position: fixed;
3276
+ position: absolute;
3277
3277
  z-index: 1000;
3278
3278
  min-width: 160px;
3279
3279
  background: var(--semantic-surface-neutral-primary);
@@ -4160,7 +4160,7 @@
4160
4160
  user-select: none;
4161
4161
  }
4162
4162
  .lib-xplat-pop-over-content {
4163
- position: fixed;
4163
+ position: absolute;
4164
4164
  z-index: 1000;
4165
4165
  cursor: default;
4166
4166
  transition: transform 0.2s ease, opacity 0.2s ease;
@@ -4500,7 +4500,7 @@
4500
4500
  letter-spacing: var(--semantic-typo-label-2-m-ls);
4501
4501
  }
4502
4502
  .lib-xplat-select-content {
4503
- position: fixed;
4503
+ position: absolute;
4504
4504
  z-index: 1000;
4505
4505
  padding: var(--spacing-space-1) 0;
4506
4506
  border-radius: var(--spacing-radius-md);
@@ -5620,7 +5620,7 @@
5620
5620
  color: var(--semantic-text-disabled);
5621
5621
  }
5622
5622
  .lib-xplat-time-picker-content {
5623
- position: fixed;
5623
+ position: absolute;
5624
5624
  z-index: 1000;
5625
5625
  max-height: 220px;
5626
5626
  overflow-y: auto;
@@ -3899,8 +3899,8 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
3899
3899
  left = triggerRect.right - popW;
3900
3900
  }
3901
3901
  if (left < 8) left = 8;
3902
- pop.style.top = `${top}px`;
3903
- pop.style.left = `${left}px`;
3902
+ pop.style.top = `${top + window.scrollY}px`;
3903
+ pop.style.left = `${left + window.scrollX}px`;
3904
3904
  if (next !== directionRef.current) {
3905
3905
  directionRef.current = next;
3906
3906
  setDirection(next);
@@ -3922,15 +3922,10 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
3922
3922
  }, [calculatePosition, enabled, popRef]);
3923
3923
  React19.useEffect(() => {
3924
3924
  if (!enabled) return;
3925
- let raf = 0;
3926
- const onScrollOrResize = () => {
3927
- cancelAnimationFrame(raf);
3928
- raf = requestAnimationFrame(calculatePosition);
3929
- };
3925
+ const onScrollOrResize = () => calculatePosition();
3930
3926
  window.addEventListener("resize", onScrollOrResize, { passive: true });
3931
3927
  window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
3932
3928
  return () => {
3933
- cancelAnimationFrame(raf);
3934
3929
  window.removeEventListener("resize", onScrollOrResize);
3935
3930
  window.removeEventListener("scroll", onScrollOrResize, true);
3936
3931
  };
package/dist/index.cjs CHANGED
@@ -8413,8 +8413,8 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
8413
8413
  left = triggerRect.right - popW;
8414
8414
  }
8415
8415
  if (left < 8) left = 8;
8416
- pop.style.top = `${top}px`;
8417
- pop.style.left = `${left}px`;
8416
+ pop.style.top = `${top + window.scrollY}px`;
8417
+ pop.style.left = `${left + window.scrollX}px`;
8418
8418
  if (next !== directionRef.current) {
8419
8419
  directionRef.current = next;
8420
8420
  setDirection(next);
@@ -8436,15 +8436,10 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
8436
8436
  }, [calculatePosition, enabled, popRef]);
8437
8437
  import_react19.default.useEffect(() => {
8438
8438
  if (!enabled) return;
8439
- let raf = 0;
8440
- const onScrollOrResize = () => {
8441
- cancelAnimationFrame(raf);
8442
- raf = requestAnimationFrame(calculatePosition);
8443
- };
8439
+ const onScrollOrResize = () => calculatePosition();
8444
8440
  window.addEventListener("resize", onScrollOrResize, { passive: true });
8445
8441
  window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
8446
8442
  return () => {
8447
- cancelAnimationFrame(raf);
8448
8443
  window.removeEventListener("resize", onScrollOrResize);
8449
8444
  window.removeEventListener("scroll", onScrollOrResize, true);
8450
8445
  };
package/dist/index.css CHANGED
@@ -3273,7 +3273,7 @@
3273
3273
  cursor: pointer;
3274
3274
  }
3275
3275
  .lib-xplat-dropdown-menu {
3276
- position: fixed;
3276
+ position: absolute;
3277
3277
  z-index: 1000;
3278
3278
  min-width: 160px;
3279
3279
  background: var(--semantic-surface-neutral-primary);
@@ -4160,7 +4160,7 @@
4160
4160
  user-select: none;
4161
4161
  }
4162
4162
  .lib-xplat-pop-over-content {
4163
- position: fixed;
4163
+ position: absolute;
4164
4164
  z-index: 1000;
4165
4165
  cursor: default;
4166
4166
  transition: transform 0.2s ease, opacity 0.2s ease;
@@ -4500,7 +4500,7 @@
4500
4500
  letter-spacing: var(--semantic-typo-label-2-m-ls);
4501
4501
  }
4502
4502
  .lib-xplat-select-content {
4503
- position: fixed;
4503
+ position: absolute;
4504
4504
  z-index: 1000;
4505
4505
  padding: var(--spacing-space-1) 0;
4506
4506
  border-radius: var(--spacing-radius-md);
@@ -5620,7 +5620,7 @@
5620
5620
  color: var(--semantic-text-disabled);
5621
5621
  }
5622
5622
  .lib-xplat-time-picker-content {
5623
- position: fixed;
5623
+ position: absolute;
5624
5624
  z-index: 1000;
5625
5625
  max-height: 220px;
5626
5626
  overflow-y: auto;
package/dist/index.js CHANGED
@@ -8002,8 +8002,8 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
8002
8002
  left = triggerRect.right - popW;
8003
8003
  }
8004
8004
  if (left < 8) left = 8;
8005
- pop.style.top = `${top}px`;
8006
- pop.style.left = `${left}px`;
8005
+ pop.style.top = `${top + window.scrollY}px`;
8006
+ pop.style.left = `${left + window.scrollX}px`;
8007
8007
  if (next !== directionRef.current) {
8008
8008
  directionRef.current = next;
8009
8009
  setDirection(next);
@@ -8025,15 +8025,10 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
8025
8025
  }, [calculatePosition, enabled, popRef]);
8026
8026
  React19.useEffect(() => {
8027
8027
  if (!enabled) return;
8028
- let raf = 0;
8029
- const onScrollOrResize = () => {
8030
- cancelAnimationFrame(raf);
8031
- raf = requestAnimationFrame(calculatePosition);
8032
- };
8028
+ const onScrollOrResize = () => calculatePosition();
8033
8029
  window.addEventListener("resize", onScrollOrResize, { passive: true });
8034
8030
  window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
8035
8031
  return () => {
8036
- cancelAnimationFrame(raf);
8037
8032
  window.removeEventListener("resize", onScrollOrResize);
8038
8033
  window.removeEventListener("scroll", onScrollOrResize, true);
8039
8034
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@x-plat/design-system",
3
- "version": "0.14.3",
3
+ "version": "0.14.5",
4
4
  "description": "XPLAT UI Design System",
5
5
  "author": "XPLAT WOONG",
6
6
  "main": "dist/index.cjs",