@x-plat/design-system 0.14.13 → 0.14.15

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 (24) hide show
  1. package/dist/components/DatePicker/index.cjs +46 -41
  2. package/dist/components/DatePicker/index.js +46 -41
  3. package/dist/components/Drawer/index.cjs +14 -9
  4. package/dist/components/Drawer/index.js +14 -9
  5. package/dist/components/Dropdown/index.cjs +21 -20
  6. package/dist/components/Dropdown/index.css +2 -2
  7. package/dist/components/Dropdown/index.js +21 -20
  8. package/dist/components/Modal/index.cjs +15 -10
  9. package/dist/components/Modal/index.js +15 -10
  10. package/dist/components/PopOver/index.cjs +21 -20
  11. package/dist/components/PopOver/index.js +21 -20
  12. package/dist/components/Select/index.cjs +21 -20
  13. package/dist/components/Select/index.css +4 -4
  14. package/dist/components/Select/index.js +21 -20
  15. package/dist/components/TimePicker/index.cjs +21 -20
  16. package/dist/components/TimePicker/index.js +21 -20
  17. package/dist/components/index.cjs +196 -193
  18. package/dist/components/index.css +6 -6
  19. package/dist/components/index.js +196 -193
  20. package/dist/index.cjs +196 -193
  21. package/dist/index.css +6 -6
  22. package/dist/index.js +196 -193
  23. package/guidelines/MIGRATION.md +28 -30
  24. package/package.json +1 -1
package/dist/components/TimePicker/index.cjs CHANGED
@@ -55,26 +55,27 @@ var findScrollParent = (el) => {
55
55
  }
56
56
  return null;
57
57
  };
58
+ var TRIGGER_GAP = 8;
58
59
  var computePlacement = (triggerRect, popW, popH, clip) => {
59
- const roomBelow = clip.bottom - triggerRect.bottom;
60
- const roomAbove = triggerRect.top - clip.top;
60
+ const roomBelow = clip.bottom - triggerRect.bottom - TRIGGER_GAP;
61
+ const roomAbove = triggerRect.top - clip.top - TRIGGER_GAP;
61
62
  let direction;
62
63
  let top;
63
64
  let maxHeight = null;
64
65
  if (popH <= roomBelow) {
65
66
  direction = "bottom";
66
- top = triggerRect.bottom;
67
+ top = triggerRect.bottom + TRIGGER_GAP;
67
68
  } else if (popH <= roomAbove) {
68
69
  direction = "top";
69
- top = triggerRect.top - popH;
70
+ top = triggerRect.top - TRIGGER_GAP - popH;
70
71
  } else {
71
72
  const room = Math.max(roomBelow, roomAbove, 0);
72
73
  if (roomBelow >= roomAbove) {
73
74
  direction = "bottom";
74
- top = triggerRect.bottom;
75
+ top = triggerRect.bottom + TRIGGER_GAP;
75
76
  } else {
76
77
  direction = "top";
77
- top = triggerRect.top - room;
78
+ top = triggerRect.top - TRIGGER_GAP - room;
78
79
  }
79
80
  maxHeight = room;
80
81
  }
@@ -229,22 +230,22 @@ var useEscapeKey = (enabled, onEscape) => {
229
230
  return () => document.removeEventListener("keydown", onKey);
230
231
  }, [enabled, onEscape]);
231
232
  };
232
- var useCloseOnContainerScroll = (enabled, popRef, onClose) => {
233
+ var useCloseWhenTriggerHidden = (enabled, triggerRef, onClose) => {
233
234
  const onCloseRef = import_react3.default.useRef(onClose);
234
235
  onCloseRef.current = onClose;
235
236
  import_react3.default.useEffect(() => {
236
- if (!enabled) return;
237
- const onScroll = (e) => {
238
- const target = e.target;
239
- if (target === document || target === document.documentElement || target === document.body) {
240
- return;
241
- }
242
- if (target instanceof Node && popRef.current?.contains(target)) return;
243
- onCloseRef.current();
244
- };
245
- window.addEventListener("scroll", onScroll, { passive: true, capture: true });
246
- return () => window.removeEventListener("scroll", onScroll, true);
247
- }, [enabled, popRef]);
237
+ const trigger = triggerRef.current;
238
+ if (!enabled || !trigger) return;
239
+ const observer = new IntersectionObserver(
240
+ ([entry]) => {
241
+ if (!entry.isIntersecting) onCloseRef.current();
242
+ },
243
+ // 그릇이 없으면 root: null → 뷰포트 기준
244
+ { root: findScrollParent(trigger), threshold: 0 }
245
+ );
246
+ observer.observe(trigger);
247
+ return () => observer.disconnect();
248
+ }, [enabled, triggerRef]);
248
249
  };
249
250
 
250
251
  // ../../node_modules/clsx/dist/clsx.mjs
@@ -455,7 +456,7 @@ var TimePicker = (props) => {
455
456
  }, [step, min, max]);
456
457
  const close = import_react4.default.useCallback(() => setOpen(false), []);
457
458
  useClickOutside_default([triggerRef, contentRef], close, isOpen);
458
- useCloseOnContainerScroll(isOpen, contentRef, close);
459
+ useCloseWhenTriggerHidden(isOpen, triggerRef, close);
459
460
  useEscapeKey(isOpen, () => {
460
461
  close();
461
462
  triggerRef.current?.focus({ preventScroll: true });
package/dist/components/TimePicker/index.js CHANGED
@@ -19,26 +19,27 @@ var findScrollParent = (el) => {
19
19
  }
20
20
  return null;
21
21
  };
22
+ var TRIGGER_GAP = 8;
22
23
  var computePlacement = (triggerRect, popW, popH, clip) => {
23
- const roomBelow = clip.bottom - triggerRect.bottom;
24
- const roomAbove = triggerRect.top - clip.top;
24
+ const roomBelow = clip.bottom - triggerRect.bottom - TRIGGER_GAP;
25
+ const roomAbove = triggerRect.top - clip.top - TRIGGER_GAP;
25
26
  let direction;
26
27
  let top;
27
28
  let maxHeight = null;
28
29
  if (popH <= roomBelow) {
29
30
  direction = "bottom";
30
- top = triggerRect.bottom;
31
+ top = triggerRect.bottom + TRIGGER_GAP;
31
32
  } else if (popH <= roomAbove) {
32
33
  direction = "top";
33
- top = triggerRect.top - popH;
34
+ top = triggerRect.top - TRIGGER_GAP - popH;
34
35
  } else {
35
36
  const room = Math.max(roomBelow, roomAbove, 0);
36
37
  if (roomBelow >= roomAbove) {
37
38
  direction = "bottom";
38
- top = triggerRect.bottom;
39
+ top = triggerRect.bottom + TRIGGER_GAP;
39
40
  } else {
40
41
  direction = "top";
41
- top = triggerRect.top - room;
42
+ top = triggerRect.top - TRIGGER_GAP - room;
42
43
  }
43
44
  maxHeight = room;
44
45
  }
@@ -193,22 +194,22 @@ var useEscapeKey = (enabled, onEscape) => {
193
194
  return () => document.removeEventListener("keydown", onKey);
194
195
  }, [enabled, onEscape]);
195
196
  };
196
- var useCloseOnContainerScroll = (enabled, popRef, onClose) => {
197
+ var useCloseWhenTriggerHidden = (enabled, triggerRef, onClose) => {
197
198
  const onCloseRef = React3.useRef(onClose);
198
199
  onCloseRef.current = onClose;
199
200
  React3.useEffect(() => {
200
- if (!enabled) return;
201
- const onScroll = (e) => {
202
- const target = e.target;
203
- if (target === document || target === document.documentElement || target === document.body) {
204
- return;
205
- }
206
- if (target instanceof Node && popRef.current?.contains(target)) return;
207
- onCloseRef.current();
208
- };
209
- window.addEventListener("scroll", onScroll, { passive: true, capture: true });
210
- return () => window.removeEventListener("scroll", onScroll, true);
211
- }, [enabled, popRef]);
201
+ const trigger = triggerRef.current;
202
+ if (!enabled || !trigger) return;
203
+ const observer = new IntersectionObserver(
204
+ ([entry]) => {
205
+ if (!entry.isIntersecting) onCloseRef.current();
206
+ },
207
+ // 그릇이 없으면 root: null → 뷰포트 기준
208
+ { root: findScrollParent(trigger), threshold: 0 }
209
+ );
210
+ observer.observe(trigger);
211
+ return () => observer.disconnect();
212
+ }, [enabled, triggerRef]);
212
213
  };
213
214
 
214
215
  // ../../node_modules/clsx/dist/clsx.mjs
@@ -419,7 +420,7 @@ var TimePicker = (props) => {
419
420
  }, [step, min, max]);
420
421
  const close = React4.useCallback(() => setOpen(false), []);
421
422
  useClickOutside_default([triggerRef, contentRef], close, isOpen);
422
- useCloseOnContainerScroll(isOpen, contentRef, close);
423
+ useCloseWhenTriggerHidden(isOpen, triggerRef, close);
423
424
  useEscapeKey(isOpen, () => {
424
425
  close();
425
426
  triggerRef.current?.focus({ preventScroll: true });