@x-plat/design-system 0.14.10 → 0.14.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 (13) hide show
  1. package/dist/components/Dropdown/index.cjs +40 -27
  2. package/dist/components/Dropdown/index.js +40 -27
  3. package/dist/components/PopOver/index.cjs +40 -27
  4. package/dist/components/PopOver/index.js +40 -27
  5. package/dist/components/Select/index.cjs +40 -27
  6. package/dist/components/Select/index.js +40 -27
  7. package/dist/components/TimePicker/index.cjs +40 -27
  8. package/dist/components/TimePicker/index.js +40 -27
  9. package/dist/components/index.cjs +40 -27
  10. package/dist/components/index.js +40 -27
  11. package/dist/index.cjs +40 -27
  12. package/dist/index.js +40 -27
  13. package/package.json +1 -1
package/dist/components/Dropdown/index.cjs CHANGED
@@ -55,6 +55,40 @@ 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
+ if (popH <= roomBelow) {
64
+ direction = "bottom";
65
+ top = triggerRect.bottom;
66
+ } else if (popH <= roomAbove) {
67
+ direction = "top";
68
+ top = triggerRect.top - popH;
69
+ } else {
70
+ direction = roomBelow >= roomAbove ? "bottom" : "top";
71
+ top = direction === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
72
+ top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
73
+ top = Math.max(top, clip.top);
74
+ }
75
+ let left = triggerRect.left;
76
+ if (left + popW > clip.right - 8) {
77
+ left = triggerRect.right - popW;
78
+ }
79
+ if (left < clip.left + 8) left = clip.left + 8;
80
+ return {
81
+ direction,
82
+ top,
83
+ left,
84
+ over: {
85
+ top: Math.max(0, clip.top - top),
86
+ right: Math.max(0, left + popW - clip.right),
87
+ bottom: Math.max(0, top + popH - clip.bottom),
88
+ left: Math.max(0, clip.left - left)
89
+ }
90
+ };
91
+ };
58
92
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
59
93
  const [direction, setDirection] = import_react.default.useState("bottom");
60
94
  const directionRef = import_react.default.useRef("bottom");
@@ -79,35 +113,14 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
79
113
  left: Math.max(parentRect?.left ?? 0, 0),
80
114
  right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
81
115
  };
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;
116
+ const { direction: next, top, left, over } = computePlacement(
117
+ triggerRect,
118
+ popW,
119
+ popH,
120
+ clip
121
+ );
103
122
  pop.style.top = `${top + window.scrollY}px`;
104
123
  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
- };
111
124
  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
125
  if (next !== directionRef.current) {
113
126
  directionRef.current = next;
package/dist/components/Dropdown/index.js CHANGED
@@ -19,6 +19,40 @@ 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
+ if (popH <= roomBelow) {
28
+ direction = "bottom";
29
+ top = triggerRect.bottom;
30
+ } else if (popH <= roomAbove) {
31
+ direction = "top";
32
+ top = triggerRect.top - popH;
33
+ } else {
34
+ direction = roomBelow >= roomAbove ? "bottom" : "top";
35
+ top = direction === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
36
+ top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
37
+ top = Math.max(top, clip.top);
38
+ }
39
+ let left = triggerRect.left;
40
+ if (left + popW > clip.right - 8) {
41
+ left = triggerRect.right - popW;
42
+ }
43
+ if (left < clip.left + 8) left = clip.left + 8;
44
+ return {
45
+ direction,
46
+ top,
47
+ left,
48
+ over: {
49
+ top: Math.max(0, clip.top - top),
50
+ right: Math.max(0, left + popW - clip.right),
51
+ bottom: Math.max(0, top + popH - clip.bottom),
52
+ left: Math.max(0, clip.left - left)
53
+ }
54
+ };
55
+ };
22
56
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
23
57
  const [direction, setDirection] = React.useState("bottom");
24
58
  const directionRef = React.useRef("bottom");
@@ -43,35 +77,14 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
43
77
  left: Math.max(parentRect?.left ?? 0, 0),
44
78
  right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
45
79
  };
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;
80
+ const { direction: next, top, left, over } = computePlacement(
81
+ triggerRect,
82
+ popW,
83
+ popH,
84
+ clip
85
+ );
67
86
  pop.style.top = `${top + window.scrollY}px`;
68
87
  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
- };
75
88
  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
89
  if (next !== directionRef.current) {
77
90
  directionRef.current = next;
package/dist/components/PopOver/index.cjs CHANGED
@@ -55,6 +55,40 @@ 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
+ if (popH <= roomBelow) {
64
+ direction = "bottom";
65
+ top = triggerRect.bottom;
66
+ } else if (popH <= roomAbove) {
67
+ direction = "top";
68
+ top = triggerRect.top - popH;
69
+ } else {
70
+ direction = roomBelow >= roomAbove ? "bottom" : "top";
71
+ top = direction === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
72
+ top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
73
+ top = Math.max(top, clip.top);
74
+ }
75
+ let left = triggerRect.left;
76
+ if (left + popW > clip.right - 8) {
77
+ left = triggerRect.right - popW;
78
+ }
79
+ if (left < clip.left + 8) left = clip.left + 8;
80
+ return {
81
+ direction,
82
+ top,
83
+ left,
84
+ over: {
85
+ top: Math.max(0, clip.top - top),
86
+ right: Math.max(0, left + popW - clip.right),
87
+ bottom: Math.max(0, top + popH - clip.bottom),
88
+ left: Math.max(0, clip.left - left)
89
+ }
90
+ };
91
+ };
58
92
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
59
93
  const [direction, setDirection] = import_react.default.useState("bottom");
60
94
  const directionRef = import_react.default.useRef("bottom");
@@ -79,35 +113,14 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
79
113
  left: Math.max(parentRect?.left ?? 0, 0),
80
114
  right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
81
115
  };
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;
116
+ const { direction: next, top, left, over } = computePlacement(
117
+ triggerRect,
118
+ popW,
119
+ popH,
120
+ clip
121
+ );
103
122
  pop.style.top = `${top + window.scrollY}px`;
104
123
  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
- };
111
124
  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
125
  if (next !== directionRef.current) {
113
126
  directionRef.current = next;
package/dist/components/PopOver/index.js CHANGED
@@ -19,6 +19,40 @@ 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
+ if (popH <= roomBelow) {
28
+ direction = "bottom";
29
+ top = triggerRect.bottom;
30
+ } else if (popH <= roomAbove) {
31
+ direction = "top";
32
+ top = triggerRect.top - popH;
33
+ } else {
34
+ direction = roomBelow >= roomAbove ? "bottom" : "top";
35
+ top = direction === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
36
+ top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
37
+ top = Math.max(top, clip.top);
38
+ }
39
+ let left = triggerRect.left;
40
+ if (left + popW > clip.right - 8) {
41
+ left = triggerRect.right - popW;
42
+ }
43
+ if (left < clip.left + 8) left = clip.left + 8;
44
+ return {
45
+ direction,
46
+ top,
47
+ left,
48
+ over: {
49
+ top: Math.max(0, clip.top - top),
50
+ right: Math.max(0, left + popW - clip.right),
51
+ bottom: Math.max(0, top + popH - clip.bottom),
52
+ left: Math.max(0, clip.left - left)
53
+ }
54
+ };
55
+ };
22
56
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
23
57
  const [direction, setDirection] = React.useState("bottom");
24
58
  const directionRef = React.useRef("bottom");
@@ -43,35 +77,14 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
43
77
  left: Math.max(parentRect?.left ?? 0, 0),
44
78
  right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
45
79
  };
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;
80
+ const { direction: next, top, left, over } = computePlacement(
81
+ triggerRect,
82
+ popW,
83
+ popH,
84
+ clip
85
+ );
67
86
  pop.style.top = `${top + window.scrollY}px`;
68
87
  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
- };
75
88
  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
89
  if (next !== directionRef.current) {
77
90
  directionRef.current = next;
package/dist/components/Select/index.cjs CHANGED
@@ -56,6 +56,40 @@ 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
+ 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
+ direction = roomBelow >= roomAbove ? "bottom" : "top";
72
+ top = direction === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
73
+ top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
74
+ top = Math.max(top, clip.top);
75
+ }
76
+ let left = triggerRect.left;
77
+ if (left + popW > clip.right - 8) {
78
+ left = triggerRect.right - popW;
79
+ }
80
+ if (left < clip.left + 8) left = clip.left + 8;
81
+ return {
82
+ direction,
83
+ top,
84
+ left,
85
+ over: {
86
+ top: Math.max(0, clip.top - top),
87
+ right: Math.max(0, left + popW - clip.right),
88
+ bottom: Math.max(0, top + popH - clip.bottom),
89
+ left: Math.max(0, clip.left - left)
90
+ }
91
+ };
92
+ };
59
93
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
60
94
  const [direction, setDirection] = import_react.default.useState("bottom");
61
95
  const directionRef = import_react.default.useRef("bottom");
@@ -80,35 +114,14 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
80
114
  left: Math.max(parentRect?.left ?? 0, 0),
81
115
  right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
82
116
  };
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;
117
+ const { direction: next, top, left, over } = computePlacement(
118
+ triggerRect,
119
+ popW,
120
+ popH,
121
+ clip
122
+ );
104
123
  pop.style.top = `${top + window.scrollY}px`;
105
124
  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
- };
112
125
  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
126
  if (next !== directionRef.current) {
114
127
  directionRef.current = next;
package/dist/components/Select/index.js CHANGED
@@ -19,6 +19,40 @@ 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
+ if (popH <= roomBelow) {
28
+ direction = "bottom";
29
+ top = triggerRect.bottom;
30
+ } else if (popH <= roomAbove) {
31
+ direction = "top";
32
+ top = triggerRect.top - popH;
33
+ } else {
34
+ direction = roomBelow >= roomAbove ? "bottom" : "top";
35
+ top = direction === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
36
+ top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
37
+ top = Math.max(top, clip.top);
38
+ }
39
+ let left = triggerRect.left;
40
+ if (left + popW > clip.right - 8) {
41
+ left = triggerRect.right - popW;
42
+ }
43
+ if (left < clip.left + 8) left = clip.left + 8;
44
+ return {
45
+ direction,
46
+ top,
47
+ left,
48
+ over: {
49
+ top: Math.max(0, clip.top - top),
50
+ right: Math.max(0, left + popW - clip.right),
51
+ bottom: Math.max(0, top + popH - clip.bottom),
52
+ left: Math.max(0, clip.left - left)
53
+ }
54
+ };
55
+ };
22
56
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
23
57
  const [direction, setDirection] = React.useState("bottom");
24
58
  const directionRef = React.useRef("bottom");
@@ -43,35 +77,14 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
43
77
  left: Math.max(parentRect?.left ?? 0, 0),
44
78
  right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
45
79
  };
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;
80
+ const { direction: next, top, left, over } = computePlacement(
81
+ triggerRect,
82
+ popW,
83
+ popH,
84
+ clip
85
+ );
67
86
  pop.style.top = `${top + window.scrollY}px`;
68
87
  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
- };
75
88
  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
89
  if (next !== directionRef.current) {
77
90
  directionRef.current = next;
package/dist/components/TimePicker/index.cjs CHANGED
@@ -55,6 +55,40 @@ 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
+ if (popH <= roomBelow) {
64
+ direction = "bottom";
65
+ top = triggerRect.bottom;
66
+ } else if (popH <= roomAbove) {
67
+ direction = "top";
68
+ top = triggerRect.top - popH;
69
+ } else {
70
+ direction = roomBelow >= roomAbove ? "bottom" : "top";
71
+ top = direction === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
72
+ top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
73
+ top = Math.max(top, clip.top);
74
+ }
75
+ let left = triggerRect.left;
76
+ if (left + popW > clip.right - 8) {
77
+ left = triggerRect.right - popW;
78
+ }
79
+ if (left < clip.left + 8) left = clip.left + 8;
80
+ return {
81
+ direction,
82
+ top,
83
+ left,
84
+ over: {
85
+ top: Math.max(0, clip.top - top),
86
+ right: Math.max(0, left + popW - clip.right),
87
+ bottom: Math.max(0, top + popH - clip.bottom),
88
+ left: Math.max(0, clip.left - left)
89
+ }
90
+ };
91
+ };
58
92
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
59
93
  const [direction, setDirection] = import_react.default.useState("bottom");
60
94
  const directionRef = import_react.default.useRef("bottom");
@@ -79,35 +113,14 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
79
113
  left: Math.max(parentRect?.left ?? 0, 0),
80
114
  right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
81
115
  };
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;
116
+ const { direction: next, top, left, over } = computePlacement(
117
+ triggerRect,
118
+ popW,
119
+ popH,
120
+ clip
121
+ );
103
122
  pop.style.top = `${top + window.scrollY}px`;
104
123
  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
- };
111
124
  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
125
  if (next !== directionRef.current) {
113
126
  directionRef.current = next;
package/dist/components/TimePicker/index.js CHANGED
@@ -19,6 +19,40 @@ 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
+ if (popH <= roomBelow) {
28
+ direction = "bottom";
29
+ top = triggerRect.bottom;
30
+ } else if (popH <= roomAbove) {
31
+ direction = "top";
32
+ top = triggerRect.top - popH;
33
+ } else {
34
+ direction = roomBelow >= roomAbove ? "bottom" : "top";
35
+ top = direction === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
36
+ top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
37
+ top = Math.max(top, clip.top);
38
+ }
39
+ let left = triggerRect.left;
40
+ if (left + popW > clip.right - 8) {
41
+ left = triggerRect.right - popW;
42
+ }
43
+ if (left < clip.left + 8) left = clip.left + 8;
44
+ return {
45
+ direction,
46
+ top,
47
+ left,
48
+ over: {
49
+ top: Math.max(0, clip.top - top),
50
+ right: Math.max(0, left + popW - clip.right),
51
+ bottom: Math.max(0, top + popH - clip.bottom),
52
+ left: Math.max(0, clip.left - left)
53
+ }
54
+ };
55
+ };
22
56
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
23
57
  const [direction, setDirection] = React.useState("bottom");
24
58
  const directionRef = React.useRef("bottom");
@@ -43,35 +77,14 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
43
77
  left: Math.max(parentRect?.left ?? 0, 0),
44
78
  right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
45
79
  };
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;
80
+ const { direction: next, top, left, over } = computePlacement(
81
+ triggerRect,
82
+ popW,
83
+ popH,
84
+ clip
85
+ );
67
86
  pop.style.top = `${top + window.scrollY}px`;
68
87
  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
- };
75
88
  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
89
  if (next !== directionRef.current) {
77
90
  directionRef.current = next;
package/dist/components/index.cjs CHANGED
@@ -3999,6 +3999,40 @@ 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
+ if (popH <= roomBelow) {
4008
+ direction = "bottom";
4009
+ top = triggerRect.bottom;
4010
+ } else if (popH <= roomAbove) {
4011
+ direction = "top";
4012
+ top = triggerRect.top - popH;
4013
+ } else {
4014
+ direction = roomBelow >= roomAbove ? "bottom" : "top";
4015
+ top = direction === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
4016
+ top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
4017
+ top = Math.max(top, clip.top);
4018
+ }
4019
+ let left = triggerRect.left;
4020
+ if (left + popW > clip.right - 8) {
4021
+ left = triggerRect.right - popW;
4022
+ }
4023
+ if (left < clip.left + 8) left = clip.left + 8;
4024
+ return {
4025
+ direction,
4026
+ top,
4027
+ left,
4028
+ over: {
4029
+ top: Math.max(0, clip.top - top),
4030
+ right: Math.max(0, left + popW - clip.right),
4031
+ bottom: Math.max(0, top + popH - clip.bottom),
4032
+ left: Math.max(0, clip.left - left)
4033
+ }
4034
+ };
4035
+ };
4002
4036
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
4003
4037
  const [direction, setDirection] = import_react19.default.useState("bottom");
4004
4038
  const directionRef = import_react19.default.useRef("bottom");
@@ -4023,35 +4057,14 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
4023
4057
  left: Math.max(parentRect?.left ?? 0, 0),
4024
4058
  right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
4025
4059
  };
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;
4060
+ const { direction: next, top, left, over } = computePlacement(
4061
+ triggerRect,
4062
+ popW,
4063
+ popH,
4064
+ clip
4065
+ );
4047
4066
  pop.style.top = `${top + window.scrollY}px`;
4048
4067
  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
- };
4055
4068
  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
4069
  if (next !== directionRef.current) {
4057
4070
  directionRef.current = next;
package/dist/components/index.js CHANGED
@@ -3897,6 +3897,40 @@ 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
+ if (popH <= roomBelow) {
3906
+ direction = "bottom";
3907
+ top = triggerRect.bottom;
3908
+ } else if (popH <= roomAbove) {
3909
+ direction = "top";
3910
+ top = triggerRect.top - popH;
3911
+ } else {
3912
+ direction = roomBelow >= roomAbove ? "bottom" : "top";
3913
+ top = direction === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
3914
+ top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
3915
+ top = Math.max(top, clip.top);
3916
+ }
3917
+ let left = triggerRect.left;
3918
+ if (left + popW > clip.right - 8) {
3919
+ left = triggerRect.right - popW;
3920
+ }
3921
+ if (left < clip.left + 8) left = clip.left + 8;
3922
+ return {
3923
+ direction,
3924
+ top,
3925
+ left,
3926
+ over: {
3927
+ top: Math.max(0, clip.top - top),
3928
+ right: Math.max(0, left + popW - clip.right),
3929
+ bottom: Math.max(0, top + popH - clip.bottom),
3930
+ left: Math.max(0, clip.left - left)
3931
+ }
3932
+ };
3933
+ };
3900
3934
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
3901
3935
  const [direction, setDirection] = React19.useState("bottom");
3902
3936
  const directionRef = React19.useRef("bottom");
@@ -3921,35 +3955,14 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
3921
3955
  left: Math.max(parentRect?.left ?? 0, 0),
3922
3956
  right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
3923
3957
  };
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;
3958
+ const { direction: next, top, left, over } = computePlacement(
3959
+ triggerRect,
3960
+ popW,
3961
+ popH,
3962
+ clip
3963
+ );
3945
3964
  pop.style.top = `${top + window.scrollY}px`;
3946
3965
  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
- };
3953
3966
  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
3967
  if (next !== directionRef.current) {
3955
3968
  directionRef.current = next;
package/dist/index.cjs CHANGED
@@ -8411,6 +8411,40 @@ 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
+ if (popH <= roomBelow) {
8420
+ direction = "bottom";
8421
+ top = triggerRect.bottom;
8422
+ } else if (popH <= roomAbove) {
8423
+ direction = "top";
8424
+ top = triggerRect.top - popH;
8425
+ } else {
8426
+ direction = roomBelow >= roomAbove ? "bottom" : "top";
8427
+ top = direction === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
8428
+ top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
8429
+ top = Math.max(top, clip.top);
8430
+ }
8431
+ let left = triggerRect.left;
8432
+ if (left + popW > clip.right - 8) {
8433
+ left = triggerRect.right - popW;
8434
+ }
8435
+ if (left < clip.left + 8) left = clip.left + 8;
8436
+ return {
8437
+ direction,
8438
+ top,
8439
+ left,
8440
+ over: {
8441
+ top: Math.max(0, clip.top - top),
8442
+ right: Math.max(0, left + popW - clip.right),
8443
+ bottom: Math.max(0, top + popH - clip.bottom),
8444
+ left: Math.max(0, clip.left - left)
8445
+ }
8446
+ };
8447
+ };
8414
8448
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
8415
8449
  const [direction, setDirection] = import_react19.default.useState("bottom");
8416
8450
  const directionRef = import_react19.default.useRef("bottom");
@@ -8435,35 +8469,14 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
8435
8469
  left: Math.max(parentRect?.left ?? 0, 0),
8436
8470
  right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
8437
8471
  };
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;
8472
+ const { direction: next, top, left, over } = computePlacement(
8473
+ triggerRect,
8474
+ popW,
8475
+ popH,
8476
+ clip
8477
+ );
8459
8478
  pop.style.top = `${top + window.scrollY}px`;
8460
8479
  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
- };
8467
8480
  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
8481
  if (next !== directionRef.current) {
8469
8482
  directionRef.current = next;
package/dist/index.js CHANGED
@@ -8000,6 +8000,40 @@ 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
+ if (popH <= roomBelow) {
8009
+ direction = "bottom";
8010
+ top = triggerRect.bottom;
8011
+ } else if (popH <= roomAbove) {
8012
+ direction = "top";
8013
+ top = triggerRect.top - popH;
8014
+ } else {
8015
+ direction = roomBelow >= roomAbove ? "bottom" : "top";
8016
+ top = direction === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
8017
+ top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
8018
+ top = Math.max(top, clip.top);
8019
+ }
8020
+ let left = triggerRect.left;
8021
+ if (left + popW > clip.right - 8) {
8022
+ left = triggerRect.right - popW;
8023
+ }
8024
+ if (left < clip.left + 8) left = clip.left + 8;
8025
+ return {
8026
+ direction,
8027
+ top,
8028
+ left,
8029
+ over: {
8030
+ top: Math.max(0, clip.top - top),
8031
+ right: Math.max(0, left + popW - clip.right),
8032
+ bottom: Math.max(0, top + popH - clip.bottom),
8033
+ left: Math.max(0, clip.left - left)
8034
+ }
8035
+ };
8036
+ };
8003
8037
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
8004
8038
  const [direction, setDirection] = React19.useState("bottom");
8005
8039
  const directionRef = React19.useRef("bottom");
@@ -8024,35 +8058,14 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
8024
8058
  left: Math.max(parentRect?.left ?? 0, 0),
8025
8059
  right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
8026
8060
  };
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;
8061
+ const { direction: next, top, left, over } = computePlacement(
8062
+ triggerRect,
8063
+ popW,
8064
+ popH,
8065
+ clip
8066
+ );
8048
8067
  pop.style.top = `${top + window.scrollY}px`;
8049
8068
  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
- };
8056
8069
  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
8070
  if (next !== directionRef.current) {
8058
8071
  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.11",
4
4
  "description": "XPLAT UI Design System",
5
5
  "author": "XPLAT WOONG",
6
6
  "main": "dist/index.cjs",