@x-plat/design-system 0.5.15 → 0.5.17

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 (11) hide show
  1. package/dist/components/Dropdown/index.cjs +9 -7
  2. package/dist/components/Dropdown/index.js +9 -7
  3. package/dist/components/PopOver/index.cjs +9 -7
  4. package/dist/components/PopOver/index.js +9 -7
  5. package/dist/components/Select/index.cjs +10 -8
  6. package/dist/components/Select/index.js +10 -8
  7. package/dist/components/index.cjs +10 -8
  8. package/dist/components/index.js +10 -8
  9. package/dist/index.cjs +10 -8
  10. package/dist/index.js +10 -8
  11. package/package.json +1 -1
package/dist/components/Dropdown/index.cjs CHANGED
@@ -47,24 +47,26 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
47
47
  const calculatePosition = import_react.default.useCallback(() => {
48
48
  if (!triggerRef.current || !popRef.current) return;
49
49
  const triggerRect = triggerRef.current.getBoundingClientRect();
50
- const popRect = popRef.current.getBoundingClientRect();
50
+ const popW = popRef.current.offsetWidth;
51
+ const popH = popRef.current.offsetHeight;
51
52
  const viewportHeight = window.innerHeight;
52
53
  const viewportWidth = window.innerWidth;
53
54
  let direction = "bottom";
54
55
  let top;
55
- let left = triggerRect.left;
56
- if (triggerRect.bottom + popRect.height > viewportHeight && triggerRect.top - popRect.height > 0) {
56
+ let left;
57
+ if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
57
58
  direction = "top";
58
- top = triggerRect.top - popRect.height;
59
+ top = triggerRect.top - popH;
59
60
  } else {
60
61
  top = triggerRect.bottom;
61
62
  }
62
- if (left + popRect.width > viewportWidth) {
63
- left = viewportWidth - popRect.width - 8;
63
+ left = triggerRect.left;
64
+ if (left + popW > viewportWidth - 8) {
65
+ left = triggerRect.right - popW;
64
66
  }
65
67
  if (left < 8) left = 8;
66
68
  setPosition({
67
- position: { top, left, width: triggerRect.width },
69
+ position: { top, left },
68
70
  direction
69
71
  });
70
72
  }, [triggerRef, popRef]);
package/dist/components/Dropdown/index.js CHANGED
@@ -11,24 +11,26 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
11
11
  const calculatePosition = React.useCallback(() => {
12
12
  if (!triggerRef.current || !popRef.current) return;
13
13
  const triggerRect = triggerRef.current.getBoundingClientRect();
14
- const popRect = popRef.current.getBoundingClientRect();
14
+ const popW = popRef.current.offsetWidth;
15
+ const popH = popRef.current.offsetHeight;
15
16
  const viewportHeight = window.innerHeight;
16
17
  const viewportWidth = window.innerWidth;
17
18
  let direction = "bottom";
18
19
  let top;
19
- let left = triggerRect.left;
20
- if (triggerRect.bottom + popRect.height > viewportHeight && triggerRect.top - popRect.height > 0) {
20
+ let left;
21
+ if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
21
22
  direction = "top";
22
- top = triggerRect.top - popRect.height;
23
+ top = triggerRect.top - popH;
23
24
  } else {
24
25
  top = triggerRect.bottom;
25
26
  }
26
- if (left + popRect.width > viewportWidth) {
27
- left = viewportWidth - popRect.width - 8;
27
+ left = triggerRect.left;
28
+ if (left + popW > viewportWidth - 8) {
29
+ left = triggerRect.right - popW;
28
30
  }
29
31
  if (left < 8) left = 8;
30
32
  setPosition({
31
- position: { top, left, width: triggerRect.width },
33
+ position: { top, left },
32
34
  direction
33
35
  });
34
36
  }, [triggerRef, popRef]);
package/dist/components/PopOver/index.cjs CHANGED
@@ -47,24 +47,26 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
47
47
  const calculatePosition = import_react.default.useCallback(() => {
48
48
  if (!triggerRef.current || !popRef.current) return;
49
49
  const triggerRect = triggerRef.current.getBoundingClientRect();
50
- const popRect = popRef.current.getBoundingClientRect();
50
+ const popW = popRef.current.offsetWidth;
51
+ const popH = popRef.current.offsetHeight;
51
52
  const viewportHeight = window.innerHeight;
52
53
  const viewportWidth = window.innerWidth;
53
54
  let direction = "bottom";
54
55
  let top;
55
- let left = triggerRect.left;
56
- if (triggerRect.bottom + popRect.height > viewportHeight && triggerRect.top - popRect.height > 0) {
56
+ let left;
57
+ if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
57
58
  direction = "top";
58
- top = triggerRect.top - popRect.height;
59
+ top = triggerRect.top - popH;
59
60
  } else {
60
61
  top = triggerRect.bottom;
61
62
  }
62
- if (left + popRect.width > viewportWidth) {
63
- left = viewportWidth - popRect.width - 8;
63
+ left = triggerRect.left;
64
+ if (left + popW > viewportWidth - 8) {
65
+ left = triggerRect.right - popW;
64
66
  }
65
67
  if (left < 8) left = 8;
66
68
  setPosition({
67
- position: { top, left, width: triggerRect.width },
69
+ position: { top, left },
68
70
  direction
69
71
  });
70
72
  }, [triggerRef, popRef]);
package/dist/components/PopOver/index.js CHANGED
@@ -11,24 +11,26 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
11
11
  const calculatePosition = React.useCallback(() => {
12
12
  if (!triggerRef.current || !popRef.current) return;
13
13
  const triggerRect = triggerRef.current.getBoundingClientRect();
14
- const popRect = popRef.current.getBoundingClientRect();
14
+ const popW = popRef.current.offsetWidth;
15
+ const popH = popRef.current.offsetHeight;
15
16
  const viewportHeight = window.innerHeight;
16
17
  const viewportWidth = window.innerWidth;
17
18
  let direction = "bottom";
18
19
  let top;
19
- let left = triggerRect.left;
20
- if (triggerRect.bottom + popRect.height > viewportHeight && triggerRect.top - popRect.height > 0) {
20
+ let left;
21
+ if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
21
22
  direction = "top";
22
- top = triggerRect.top - popRect.height;
23
+ top = triggerRect.top - popH;
23
24
  } else {
24
25
  top = triggerRect.bottom;
25
26
  }
26
- if (left + popRect.width > viewportWidth) {
27
- left = viewportWidth - popRect.width - 8;
27
+ left = triggerRect.left;
28
+ if (left + popW > viewportWidth - 8) {
29
+ left = triggerRect.right - popW;
28
30
  }
29
31
  if (left < 8) left = 8;
30
32
  setPosition({
31
- position: { top, left, width: triggerRect.width },
33
+ position: { top, left },
32
34
  direction
33
35
  });
34
36
  }, [triggerRef, popRef]);
package/dist/components/Select/index.cjs CHANGED
@@ -48,24 +48,26 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
48
48
  const calculatePosition = import_react.default.useCallback(() => {
49
49
  if (!triggerRef.current || !popRef.current) return;
50
50
  const triggerRect = triggerRef.current.getBoundingClientRect();
51
- const popRect = popRef.current.getBoundingClientRect();
51
+ const popW = popRef.current.offsetWidth;
52
+ const popH = popRef.current.offsetHeight;
52
53
  const viewportHeight = window.innerHeight;
53
54
  const viewportWidth = window.innerWidth;
54
55
  let direction = "bottom";
55
56
  let top;
56
- let left = triggerRect.left;
57
- if (triggerRect.bottom + popRect.height > viewportHeight && triggerRect.top - popRect.height > 0) {
57
+ let left;
58
+ if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
58
59
  direction = "top";
59
- top = triggerRect.top - popRect.height;
60
+ top = triggerRect.top - popH;
60
61
  } else {
61
62
  top = triggerRect.bottom;
62
63
  }
63
- if (left + popRect.width > viewportWidth) {
64
- left = viewportWidth - popRect.width - 8;
64
+ left = triggerRect.left;
65
+ if (left + popW > viewportWidth - 8) {
66
+ left = triggerRect.right - popW;
65
67
  }
66
68
  if (left < 8) left = 8;
67
69
  setPosition({
68
- position: { top, left, width: triggerRect.width },
70
+ position: { top, left },
69
71
  direction
70
72
  });
71
73
  }, [triggerRef, popRef]);
@@ -1218,7 +1220,7 @@ var SelectRoot = (props) => {
1218
1220
  {
1219
1221
  className: clsx_default("lib-xplat-select-content", position.direction, stateClass),
1220
1222
  ref: contentRef,
1221
- style: { ...position.position, minWidth: position.position.width },
1223
+ style: { ...position.position, width: triggerRef.current?.offsetWidth },
1222
1224
  role: "listbox",
1223
1225
  children: /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(context_default.Provider, { value: ctxValue, children: itemChildren })
1224
1226
  }
package/dist/components/Select/index.js CHANGED
@@ -11,24 +11,26 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
11
11
  const calculatePosition = React.useCallback(() => {
12
12
  if (!triggerRef.current || !popRef.current) return;
13
13
  const triggerRect = triggerRef.current.getBoundingClientRect();
14
- const popRect = popRef.current.getBoundingClientRect();
14
+ const popW = popRef.current.offsetWidth;
15
+ const popH = popRef.current.offsetHeight;
15
16
  const viewportHeight = window.innerHeight;
16
17
  const viewportWidth = window.innerWidth;
17
18
  let direction = "bottom";
18
19
  let top;
19
- let left = triggerRect.left;
20
- if (triggerRect.bottom + popRect.height > viewportHeight && triggerRect.top - popRect.height > 0) {
20
+ let left;
21
+ if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
21
22
  direction = "top";
22
- top = triggerRect.top - popRect.height;
23
+ top = triggerRect.top - popH;
23
24
  } else {
24
25
  top = triggerRect.bottom;
25
26
  }
26
- if (left + popRect.width > viewportWidth) {
27
- left = viewportWidth - popRect.width - 8;
27
+ left = triggerRect.left;
28
+ if (left + popW > viewportWidth - 8) {
29
+ left = triggerRect.right - popW;
28
30
  }
29
31
  if (left < 8) left = 8;
30
32
  setPosition({
31
- position: { top, left, width: triggerRect.width },
33
+ position: { top, left },
32
34
  direction
33
35
  });
34
36
  }, [triggerRef, popRef]);
@@ -1181,7 +1183,7 @@ var SelectRoot = (props) => {
1181
1183
  {
1182
1184
  className: clsx_default("lib-xplat-select-content", position.direction, stateClass),
1183
1185
  ref: contentRef,
1184
- style: { ...position.position, minWidth: position.position.width },
1186
+ style: { ...position.position, width: triggerRef.current?.offsetWidth },
1185
1187
  role: "listbox",
1186
1188
  children: /* @__PURE__ */ jsx297(context_default.Provider, { value: ctxValue, children: itemChildren })
1187
1189
  }
package/dist/components/index.cjs CHANGED
@@ -3397,24 +3397,26 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
3397
3397
  const calculatePosition = import_react18.default.useCallback(() => {
3398
3398
  if (!triggerRef.current || !popRef.current) return;
3399
3399
  const triggerRect = triggerRef.current.getBoundingClientRect();
3400
- const popRect = popRef.current.getBoundingClientRect();
3400
+ const popW = popRef.current.offsetWidth;
3401
+ const popH = popRef.current.offsetHeight;
3401
3402
  const viewportHeight = window.innerHeight;
3402
3403
  const viewportWidth = window.innerWidth;
3403
3404
  let direction = "bottom";
3404
3405
  let top;
3405
- let left = triggerRect.left;
3406
- if (triggerRect.bottom + popRect.height > viewportHeight && triggerRect.top - popRect.height > 0) {
3406
+ let left;
3407
+ if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
3407
3408
  direction = "top";
3408
- top = triggerRect.top - popRect.height;
3409
+ top = triggerRect.top - popH;
3409
3410
  } else {
3410
3411
  top = triggerRect.bottom;
3411
3412
  }
3412
- if (left + popRect.width > viewportWidth) {
3413
- left = viewportWidth - popRect.width - 8;
3413
+ left = triggerRect.left;
3414
+ if (left + popW > viewportWidth - 8) {
3415
+ left = triggerRect.right - popW;
3414
3416
  }
3415
3417
  if (left < 8) left = 8;
3416
3418
  setPosition({
3417
- position: { top, left, width: triggerRect.width },
3419
+ position: { top, left },
3418
3420
  direction
3419
3421
  });
3420
3422
  }, [triggerRef, popRef]);
@@ -4220,7 +4222,7 @@ var SelectRoot = (props) => {
4220
4222
  {
4221
4223
  className: clsx_default("lib-xplat-select-content", position.direction, stateClass),
4222
4224
  ref: contentRef,
4223
- style: { ...position.position, minWidth: position.position.width },
4225
+ style: { ...position.position, width: triggerRef.current?.offsetWidth },
4224
4226
  role: "listbox",
4225
4227
  children: /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(context_default.Provider, { value: ctxValue, children: itemChildren })
4226
4228
  }
package/dist/components/index.js CHANGED
@@ -3309,24 +3309,26 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
3309
3309
  const calculatePosition = React17.useCallback(() => {
3310
3310
  if (!triggerRef.current || !popRef.current) return;
3311
3311
  const triggerRect = triggerRef.current.getBoundingClientRect();
3312
- const popRect = popRef.current.getBoundingClientRect();
3312
+ const popW = popRef.current.offsetWidth;
3313
+ const popH = popRef.current.offsetHeight;
3313
3314
  const viewportHeight = window.innerHeight;
3314
3315
  const viewportWidth = window.innerWidth;
3315
3316
  let direction = "bottom";
3316
3317
  let top;
3317
- let left = triggerRect.left;
3318
- if (triggerRect.bottom + popRect.height > viewportHeight && triggerRect.top - popRect.height > 0) {
3318
+ let left;
3319
+ if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
3319
3320
  direction = "top";
3320
- top = triggerRect.top - popRect.height;
3321
+ top = triggerRect.top - popH;
3321
3322
  } else {
3322
3323
  top = triggerRect.bottom;
3323
3324
  }
3324
- if (left + popRect.width > viewportWidth) {
3325
- left = viewportWidth - popRect.width - 8;
3325
+ left = triggerRect.left;
3326
+ if (left + popW > viewportWidth - 8) {
3327
+ left = triggerRect.right - popW;
3326
3328
  }
3327
3329
  if (left < 8) left = 8;
3328
3330
  setPosition({
3329
- position: { top, left, width: triggerRect.width },
3331
+ position: { top, left },
3330
3332
  direction
3331
3333
  });
3332
3334
  }, [triggerRef, popRef]);
@@ -4132,7 +4134,7 @@ var SelectRoot = (props) => {
4132
4134
  {
4133
4135
  className: clsx_default("lib-xplat-select-content", position.direction, stateClass),
4134
4136
  ref: contentRef,
4135
- style: { ...position.position, minWidth: position.position.width },
4137
+ style: { ...position.position, width: triggerRef.current?.offsetWidth },
4136
4138
  role: "listbox",
4137
4139
  children: /* @__PURE__ */ jsx332(context_default.Provider, { value: ctxValue, children: itemChildren })
4138
4140
  }
package/dist/index.cjs CHANGED
@@ -7821,24 +7821,26 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
7821
7821
  const calculatePosition = import_react18.default.useCallback(() => {
7822
7822
  if (!triggerRef.current || !popRef.current) return;
7823
7823
  const triggerRect = triggerRef.current.getBoundingClientRect();
7824
- const popRect = popRef.current.getBoundingClientRect();
7824
+ const popW = popRef.current.offsetWidth;
7825
+ const popH = popRef.current.offsetHeight;
7825
7826
  const viewportHeight = window.innerHeight;
7826
7827
  const viewportWidth = window.innerWidth;
7827
7828
  let direction = "bottom";
7828
7829
  let top;
7829
- let left = triggerRect.left;
7830
- if (triggerRect.bottom + popRect.height > viewportHeight && triggerRect.top - popRect.height > 0) {
7830
+ let left;
7831
+ if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
7831
7832
  direction = "top";
7832
- top = triggerRect.top - popRect.height;
7833
+ top = triggerRect.top - popH;
7833
7834
  } else {
7834
7835
  top = triggerRect.bottom;
7835
7836
  }
7836
- if (left + popRect.width > viewportWidth) {
7837
- left = viewportWidth - popRect.width - 8;
7837
+ left = triggerRect.left;
7838
+ if (left + popW > viewportWidth - 8) {
7839
+ left = triggerRect.right - popW;
7838
7840
  }
7839
7841
  if (left < 8) left = 8;
7840
7842
  setPosition({
7841
- position: { top, left, width: triggerRect.width },
7843
+ position: { top, left },
7842
7844
  direction
7843
7845
  });
7844
7846
  }, [triggerRef, popRef]);
@@ -8644,7 +8646,7 @@ var SelectRoot = (props) => {
8644
8646
  {
8645
8647
  className: clsx_default("lib-xplat-select-content", position.direction, stateClass),
8646
8648
  ref: contentRef,
8647
- style: { ...position.position, minWidth: position.position.width },
8649
+ style: { ...position.position, width: triggerRef.current?.offsetWidth },
8648
8650
  role: "listbox",
8649
8651
  children: /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(context_default.Provider, { value: ctxValue, children: itemChildren })
8650
8652
  }
package/dist/index.js CHANGED
@@ -7424,24 +7424,26 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
7424
7424
  const calculatePosition = React17.useCallback(() => {
7425
7425
  if (!triggerRef.current || !popRef.current) return;
7426
7426
  const triggerRect = triggerRef.current.getBoundingClientRect();
7427
- const popRect = popRef.current.getBoundingClientRect();
7427
+ const popW = popRef.current.offsetWidth;
7428
+ const popH = popRef.current.offsetHeight;
7428
7429
  const viewportHeight = window.innerHeight;
7429
7430
  const viewportWidth = window.innerWidth;
7430
7431
  let direction = "bottom";
7431
7432
  let top;
7432
- let left = triggerRect.left;
7433
- if (triggerRect.bottom + popRect.height > viewportHeight && triggerRect.top - popRect.height > 0) {
7433
+ let left;
7434
+ if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
7434
7435
  direction = "top";
7435
- top = triggerRect.top - popRect.height;
7436
+ top = triggerRect.top - popH;
7436
7437
  } else {
7437
7438
  top = triggerRect.bottom;
7438
7439
  }
7439
- if (left + popRect.width > viewportWidth) {
7440
- left = viewportWidth - popRect.width - 8;
7440
+ left = triggerRect.left;
7441
+ if (left + popW > viewportWidth - 8) {
7442
+ left = triggerRect.right - popW;
7441
7443
  }
7442
7444
  if (left < 8) left = 8;
7443
7445
  setPosition({
7444
- position: { top, left, width: triggerRect.width },
7446
+ position: { top, left },
7445
7447
  direction
7446
7448
  });
7447
7449
  }, [triggerRef, popRef]);
@@ -8247,7 +8249,7 @@ var SelectRoot = (props) => {
8247
8249
  {
8248
8250
  className: clsx_default("lib-xplat-select-content", position.direction, stateClass),
8249
8251
  ref: contentRef,
8250
- style: { ...position.position, minWidth: position.position.width },
8252
+ style: { ...position.position, width: triggerRef.current?.offsetWidth },
8251
8253
  role: "listbox",
8252
8254
  children: /* @__PURE__ */ jsx332(context_default.Provider, { value: ctxValue, children: itemChildren })
8253
8255
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@x-plat/design-system",
3
- "version": "0.5.15",
3
+ "version": "0.5.17",
4
4
  "description": "XPLAT UI Design System",
5
5
  "author": "XPLAT WOONG",
6
6
  "main": "dist/index.cjs",