@x-plat/design-system 0.14.9 → 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 +41 -21
  2. package/dist/components/Dropdown/index.js +41 -21
  3. package/dist/components/PopOver/index.cjs +41 -21
  4. package/dist/components/PopOver/index.js +41 -21
  5. package/dist/components/Select/index.cjs +41 -21
  6. package/dist/components/Select/index.js +41 -21
  7. package/dist/components/TimePicker/index.cjs +41 -21
  8. package/dist/components/TimePicker/index.js +41 -21
  9. package/dist/components/index.cjs +41 -21
  10. package/dist/components/index.js +41 -21
  11. package/dist/index.cjs +41 -21
  12. package/dist/index.js +41 -21
  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,29 +113,15 @@ 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`;
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";
105
125
  if (next !== directionRef.current) {
106
126
  directionRef.current = next;
107
127
  setDirection(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,29 +77,15 @@ 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`;
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";
69
89
  if (next !== directionRef.current) {
70
90
  directionRef.current = next;
71
91
  setDirection(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,29 +113,15 @@ 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`;
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";
105
125
  if (next !== directionRef.current) {
106
126
  directionRef.current = next;
107
127
  setDirection(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,29 +77,15 @@ 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`;
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";
69
89
  if (next !== directionRef.current) {
70
90
  directionRef.current = next;
71
91
  setDirection(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,29 +114,15 @@ 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`;
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";
106
126
  if (next !== directionRef.current) {
107
127
  directionRef.current = next;
108
128
  setDirection(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,29 +77,15 @@ 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`;
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";
69
89
  if (next !== directionRef.current) {
70
90
  directionRef.current = next;
71
91
  setDirection(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,29 +113,15 @@ 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`;
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";
105
125
  if (next !== directionRef.current) {
106
126
  directionRef.current = next;
107
127
  setDirection(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,29 +77,15 @@ 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`;
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";
69
89
  if (next !== directionRef.current) {
70
90
  directionRef.current = next;
71
91
  setDirection(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,29 +4057,15 @@ 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`;
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";
4049
4069
  if (next !== directionRef.current) {
4050
4070
  directionRef.current = next;
4051
4071
  setDirection(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,29 +3955,15 @@ 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`;
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";
3947
3967
  if (next !== directionRef.current) {
3948
3968
  directionRef.current = next;
3949
3969
  setDirection(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,29 +8469,15 @@ 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`;
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";
8461
8481
  if (next !== directionRef.current) {
8462
8482
  directionRef.current = next;
8463
8483
  setDirection(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,29 +8058,15 @@ 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`;
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";
8050
8070
  if (next !== directionRef.current) {
8051
8071
  directionRef.current = next;
8052
8072
  setDirection(next);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@x-plat/design-system",
3
- "version": "0.14.9",
3
+ "version": "0.14.11",
4
4
  "description": "XPLAT UI Design System",
5
5
  "author": "XPLAT WOONG",
6
6
  "main": "dist/index.cjs",