@x-plat/design-system 0.14.7 → 0.14.9

package/dist/components/Dropdown/index.cjs

@@ -48,10 +48,18 @@ var Portal_default = Portal;
 
 // src/tokens/hooks/useAutoPosition.ts
 var import_react = __toESM(require("react"), 1);
+var findScrollParent = (el) => {
+  for (let p = el.parentElement; p; p = p.parentElement) {
+    const { overflowY, overflowX } = getComputedStyle(p);
+    if (/(auto|scroll)/.test(overflowY) || /(auto|scroll)/.test(overflowX)) return p;
+  }
+  return null;
+};
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [direction, setDirection] = import_react.default.useState("bottom");
   const directionRef = import_react.default.useRef("bottom");
   const sizeRef = import_react.default.useRef(null);
+  const scrollParentRef = import_react.default.useRef(null);
   const calculatePosition = import_react.default.useCallback((remeasure = false) => {
     const pop = popRef.current;
     if (!triggerRef.current || !pop) return;
@@ -60,26 +68,38 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     }
     const { w: popW, h: popH } = sizeRef.current;
     const triggerRect = triggerRef.current.getBoundingClientRect();
-    const viewportHeight = window.innerHeight;
-    const viewportWidth = window.innerWidth;
     if (popH === 0 || popW === 0) {
       sizeRef.current = null;
       return;
     }
-    let next = "bottom";
+    const parentRect = scrollParentRef.current?.getBoundingClientRect();
+    const clip = {
+      top: Math.max(parentRect?.top ?? 0, 0),
+      bottom: Math.min(parentRect?.bottom ?? window.innerHeight, window.innerHeight),
+      left: Math.max(parentRect?.left ?? 0, 0),
+      right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
+    };
+    const roomBelow = clip.bottom - triggerRect.bottom;
+    const roomAbove = triggerRect.top - clip.top;
+    let next;
     let top;
-    let left;
-    if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
+    if (popH <= roomBelow) {
+      next = "bottom";
+      top = triggerRect.bottom;
+    } else if (popH <= roomAbove) {
       next = "top";
       top = triggerRect.top - popH;
     } else {
-      top = triggerRect.bottom;
+      next = roomBelow >= roomAbove ? "bottom" : "top";
+      top = next === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
+      top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
+      top = Math.max(top, clip.top);
     }
-    left = triggerRect.left;
-    if (left + popW > viewportWidth - 8) {
+    let left = triggerRect.left;
+    if (left + popW > clip.right - 8) {
       left = triggerRect.right - popW;
     }
-    if (left < 8) left = 8;
+    if (left < clip.left + 8) left = clip.left + 8;
     pop.style.top = `${top + window.scrollY}px`;
     pop.style.left = `${left + window.scrollX}px`;
     if (next !== directionRef.current) {
@@ -90,12 +110,16 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   import_react.default.useLayoutEffect(() => {
     if (!enabled) {
       sizeRef.current = null;
+      scrollParentRef.current = null;
       return;
     }
+    if (triggerRef.current) {
+      scrollParentRef.current = findScrollParent(triggerRef.current);
+    }
     calculatePosition(true);
     const raf = requestAnimationFrame(() => calculatePosition(true));
     return () => cancelAnimationFrame(raf);
-  }, [calculatePosition, enabled]);
+  }, [calculatePosition, enabled, triggerRef]);
   import_react.default.useEffect(() => {
     if (!enabled || !popRef.current) return;
     const observer = new ResizeObserver(() => {

package/dist/components/Dropdown/index.js

@@ -12,10 +12,18 @@ var Portal_default = Portal;
 
 // src/tokens/hooks/useAutoPosition.ts
 import React from "react";
+var findScrollParent = (el) => {
+  for (let p = el.parentElement; p; p = p.parentElement) {
+    const { overflowY, overflowX } = getComputedStyle(p);
+    if (/(auto|scroll)/.test(overflowY) || /(auto|scroll)/.test(overflowX)) return p;
+  }
+  return null;
+};
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [direction, setDirection] = React.useState("bottom");
   const directionRef = React.useRef("bottom");
   const sizeRef = React.useRef(null);
+  const scrollParentRef = React.useRef(null);
   const calculatePosition = React.useCallback((remeasure = false) => {
     const pop = popRef.current;
     if (!triggerRef.current || !pop) return;
@@ -24,26 +32,38 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     }
     const { w: popW, h: popH } = sizeRef.current;
     const triggerRect = triggerRef.current.getBoundingClientRect();
-    const viewportHeight = window.innerHeight;
-    const viewportWidth = window.innerWidth;
     if (popH === 0 || popW === 0) {
       sizeRef.current = null;
       return;
     }
-    let next = "bottom";
+    const parentRect = scrollParentRef.current?.getBoundingClientRect();
+    const clip = {
+      top: Math.max(parentRect?.top ?? 0, 0),
+      bottom: Math.min(parentRect?.bottom ?? window.innerHeight, window.innerHeight),
+      left: Math.max(parentRect?.left ?? 0, 0),
+      right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
+    };
+    const roomBelow = clip.bottom - triggerRect.bottom;
+    const roomAbove = triggerRect.top - clip.top;
+    let next;
     let top;
-    let left;
-    if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
+    if (popH <= roomBelow) {
+      next = "bottom";
+      top = triggerRect.bottom;
+    } else if (popH <= roomAbove) {
       next = "top";
       top = triggerRect.top - popH;
     } else {
-      top = triggerRect.bottom;
+      next = roomBelow >= roomAbove ? "bottom" : "top";
+      top = next === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
+      top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
+      top = Math.max(top, clip.top);
     }
-    left = triggerRect.left;
-    if (left + popW > viewportWidth - 8) {
+    let left = triggerRect.left;
+    if (left + popW > clip.right - 8) {
       left = triggerRect.right - popW;
     }
-    if (left < 8) left = 8;
+    if (left < clip.left + 8) left = clip.left + 8;
     pop.style.top = `${top + window.scrollY}px`;
     pop.style.left = `${left + window.scrollX}px`;
     if (next !== directionRef.current) {
@@ -54,12 +74,16 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   React.useLayoutEffect(() => {
     if (!enabled) {
       sizeRef.current = null;
+      scrollParentRef.current = null;
       return;
     }
+    if (triggerRef.current) {
+      scrollParentRef.current = findScrollParent(triggerRef.current);
+    }
     calculatePosition(true);
     const raf = requestAnimationFrame(() => calculatePosition(true));
     return () => cancelAnimationFrame(raf);
-  }, [calculatePosition, enabled]);
+  }, [calculatePosition, enabled, triggerRef]);
   React.useEffect(() => {
     if (!enabled || !popRef.current) return;
     const observer = new ResizeObserver(() => {

package/dist/components/PopOver/index.cjs

@@ -48,10 +48,18 @@ var Portal_default = Portal;
 
 // src/tokens/hooks/useAutoPosition.ts
 var import_react = __toESM(require("react"), 1);
+var findScrollParent = (el) => {
+  for (let p = el.parentElement; p; p = p.parentElement) {
+    const { overflowY, overflowX } = getComputedStyle(p);
+    if (/(auto|scroll)/.test(overflowY) || /(auto|scroll)/.test(overflowX)) return p;
+  }
+  return null;
+};
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [direction, setDirection] = import_react.default.useState("bottom");
   const directionRef = import_react.default.useRef("bottom");
   const sizeRef = import_react.default.useRef(null);
+  const scrollParentRef = import_react.default.useRef(null);
   const calculatePosition = import_react.default.useCallback((remeasure = false) => {
     const pop = popRef.current;
     if (!triggerRef.current || !pop) return;
@@ -60,26 +68,38 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     }
     const { w: popW, h: popH } = sizeRef.current;
     const triggerRect = triggerRef.current.getBoundingClientRect();
-    const viewportHeight = window.innerHeight;
-    const viewportWidth = window.innerWidth;
     if (popH === 0 || popW === 0) {
       sizeRef.current = null;
       return;
     }
-    let next = "bottom";
+    const parentRect = scrollParentRef.current?.getBoundingClientRect();
+    const clip = {
+      top: Math.max(parentRect?.top ?? 0, 0),
+      bottom: Math.min(parentRect?.bottom ?? window.innerHeight, window.innerHeight),
+      left: Math.max(parentRect?.left ?? 0, 0),
+      right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
+    };
+    const roomBelow = clip.bottom - triggerRect.bottom;
+    const roomAbove = triggerRect.top - clip.top;
+    let next;
     let top;
-    let left;
-    if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
+    if (popH <= roomBelow) {
+      next = "bottom";
+      top = triggerRect.bottom;
+    } else if (popH <= roomAbove) {
       next = "top";
       top = triggerRect.top - popH;
     } else {
-      top = triggerRect.bottom;
+      next = roomBelow >= roomAbove ? "bottom" : "top";
+      top = next === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
+      top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
+      top = Math.max(top, clip.top);
     }
-    left = triggerRect.left;
-    if (left + popW > viewportWidth - 8) {
+    let left = triggerRect.left;
+    if (left + popW > clip.right - 8) {
       left = triggerRect.right - popW;
     }
-    if (left < 8) left = 8;
+    if (left < clip.left + 8) left = clip.left + 8;
     pop.style.top = `${top + window.scrollY}px`;
     pop.style.left = `${left + window.scrollX}px`;
     if (next !== directionRef.current) {
@@ -90,12 +110,16 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   import_react.default.useLayoutEffect(() => {
     if (!enabled) {
       sizeRef.current = null;
+      scrollParentRef.current = null;
       return;
     }
+    if (triggerRef.current) {
+      scrollParentRef.current = findScrollParent(triggerRef.current);
+    }
     calculatePosition(true);
     const raf = requestAnimationFrame(() => calculatePosition(true));
     return () => cancelAnimationFrame(raf);
-  }, [calculatePosition, enabled]);
+  }, [calculatePosition, enabled, triggerRef]);
   import_react.default.useEffect(() => {
     if (!enabled || !popRef.current) return;
     const observer = new ResizeObserver(() => {

package/dist/components/PopOver/index.js

@@ -12,10 +12,18 @@ var Portal_default = Portal;
 
 // src/tokens/hooks/useAutoPosition.ts
 import React from "react";
+var findScrollParent = (el) => {
+  for (let p = el.parentElement; p; p = p.parentElement) {
+    const { overflowY, overflowX } = getComputedStyle(p);
+    if (/(auto|scroll)/.test(overflowY) || /(auto|scroll)/.test(overflowX)) return p;
+  }
+  return null;
+};
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [direction, setDirection] = React.useState("bottom");
   const directionRef = React.useRef("bottom");
   const sizeRef = React.useRef(null);
+  const scrollParentRef = React.useRef(null);
   const calculatePosition = React.useCallback((remeasure = false) => {
     const pop = popRef.current;
     if (!triggerRef.current || !pop) return;
@@ -24,26 +32,38 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     }
     const { w: popW, h: popH } = sizeRef.current;
     const triggerRect = triggerRef.current.getBoundingClientRect();
-    const viewportHeight = window.innerHeight;
-    const viewportWidth = window.innerWidth;
     if (popH === 0 || popW === 0) {
       sizeRef.current = null;
       return;
     }
-    let next = "bottom";
+    const parentRect = scrollParentRef.current?.getBoundingClientRect();
+    const clip = {
+      top: Math.max(parentRect?.top ?? 0, 0),
+      bottom: Math.min(parentRect?.bottom ?? window.innerHeight, window.innerHeight),
+      left: Math.max(parentRect?.left ?? 0, 0),
+      right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
+    };
+    const roomBelow = clip.bottom - triggerRect.bottom;
+    const roomAbove = triggerRect.top - clip.top;
+    let next;
     let top;
-    let left;
-    if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
+    if (popH <= roomBelow) {
+      next = "bottom";
+      top = triggerRect.bottom;
+    } else if (popH <= roomAbove) {
       next = "top";
       top = triggerRect.top - popH;
     } else {
-      top = triggerRect.bottom;
+      next = roomBelow >= roomAbove ? "bottom" : "top";
+      top = next === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
+      top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
+      top = Math.max(top, clip.top);
     }
-    left = triggerRect.left;
-    if (left + popW > viewportWidth - 8) {
+    let left = triggerRect.left;
+    if (left + popW > clip.right - 8) {
       left = triggerRect.right - popW;
     }
-    if (left < 8) left = 8;
+    if (left < clip.left + 8) left = clip.left + 8;
     pop.style.top = `${top + window.scrollY}px`;
     pop.style.left = `${left + window.scrollX}px`;
     if (next !== directionRef.current) {
@@ -54,12 +74,16 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   React.useLayoutEffect(() => {
     if (!enabled) {
       sizeRef.current = null;
+      scrollParentRef.current = null;
       return;
     }
+    if (triggerRef.current) {
+      scrollParentRef.current = findScrollParent(triggerRef.current);
+    }
     calculatePosition(true);
     const raf = requestAnimationFrame(() => calculatePosition(true));
     return () => cancelAnimationFrame(raf);
-  }, [calculatePosition, enabled]);
+  }, [calculatePosition, enabled, triggerRef]);
   React.useEffect(() => {
     if (!enabled || !popRef.current) return;
     const observer = new ResizeObserver(() => {

package/dist/components/Select/index.cjs

@@ -49,10 +49,18 @@ var Portal_default = Portal;
 
 // src/tokens/hooks/useAutoPosition.ts
 var import_react = __toESM(require("react"), 1);
+var findScrollParent = (el) => {
+  for (let p = el.parentElement; p; p = p.parentElement) {
+    const { overflowY, overflowX } = getComputedStyle(p);
+    if (/(auto|scroll)/.test(overflowY) || /(auto|scroll)/.test(overflowX)) return p;
+  }
+  return null;
+};
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [direction, setDirection] = import_react.default.useState("bottom");
   const directionRef = import_react.default.useRef("bottom");
   const sizeRef = import_react.default.useRef(null);
+  const scrollParentRef = import_react.default.useRef(null);
   const calculatePosition = import_react.default.useCallback((remeasure = false) => {
     const pop = popRef.current;
     if (!triggerRef.current || !pop) return;
@@ -61,26 +69,38 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     }
     const { w: popW, h: popH } = sizeRef.current;
     const triggerRect = triggerRef.current.getBoundingClientRect();
-    const viewportHeight = window.innerHeight;
-    const viewportWidth = window.innerWidth;
     if (popH === 0 || popW === 0) {
       sizeRef.current = null;
       return;
     }
-    let next = "bottom";
+    const parentRect = scrollParentRef.current?.getBoundingClientRect();
+    const clip = {
+      top: Math.max(parentRect?.top ?? 0, 0),
+      bottom: Math.min(parentRect?.bottom ?? window.innerHeight, window.innerHeight),
+      left: Math.max(parentRect?.left ?? 0, 0),
+      right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
+    };
+    const roomBelow = clip.bottom - triggerRect.bottom;
+    const roomAbove = triggerRect.top - clip.top;
+    let next;
     let top;
-    let left;
-    if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
+    if (popH <= roomBelow) {
+      next = "bottom";
+      top = triggerRect.bottom;
+    } else if (popH <= roomAbove) {
       next = "top";
       top = triggerRect.top - popH;
     } else {
-      top = triggerRect.bottom;
+      next = roomBelow >= roomAbove ? "bottom" : "top";
+      top = next === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
+      top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
+      top = Math.max(top, clip.top);
     }
-    left = triggerRect.left;
-    if (left + popW > viewportWidth - 8) {
+    let left = triggerRect.left;
+    if (left + popW > clip.right - 8) {
       left = triggerRect.right - popW;
     }
-    if (left < 8) left = 8;
+    if (left < clip.left + 8) left = clip.left + 8;
     pop.style.top = `${top + window.scrollY}px`;
     pop.style.left = `${left + window.scrollX}px`;
     if (next !== directionRef.current) {
@@ -91,12 +111,16 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   import_react.default.useLayoutEffect(() => {
     if (!enabled) {
       sizeRef.current = null;
+      scrollParentRef.current = null;
       return;
     }
+    if (triggerRef.current) {
+      scrollParentRef.current = findScrollParent(triggerRef.current);
+    }
     calculatePosition(true);
     const raf = requestAnimationFrame(() => calculatePosition(true));
     return () => cancelAnimationFrame(raf);
-  }, [calculatePosition, enabled]);
+  }, [calculatePosition, enabled, triggerRef]);
   import_react.default.useEffect(() => {
     if (!enabled || !popRef.current) return;
     const observer = new ResizeObserver(() => {

package/dist/components/Select/index.css

@@ -251,6 +251,7 @@
 }
 .lib-xplat-select-content .select-item {
   padding: var(--spacing-space-2) var(--spacing-space-3);
+  overflow-wrap: anywhere;
   font-family: var(--semantic-typo-label-2-m-font);
   font-size: var(--semantic-typo-label-2-m-size);
   line-height: var(--semantic-typo-label-2-m-lh);

package/dist/components/Select/index.js

@@ -12,10 +12,18 @@ var Portal_default = Portal;
 
 // src/tokens/hooks/useAutoPosition.ts
 import React from "react";
+var findScrollParent = (el) => {
+  for (let p = el.parentElement; p; p = p.parentElement) {
+    const { overflowY, overflowX } = getComputedStyle(p);
+    if (/(auto|scroll)/.test(overflowY) || /(auto|scroll)/.test(overflowX)) return p;
+  }
+  return null;
+};
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [direction, setDirection] = React.useState("bottom");
   const directionRef = React.useRef("bottom");
   const sizeRef = React.useRef(null);
+  const scrollParentRef = React.useRef(null);
   const calculatePosition = React.useCallback((remeasure = false) => {
     const pop = popRef.current;
     if (!triggerRef.current || !pop) return;
@@ -24,26 +32,38 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     }
     const { w: popW, h: popH } = sizeRef.current;
     const triggerRect = triggerRef.current.getBoundingClientRect();
-    const viewportHeight = window.innerHeight;
-    const viewportWidth = window.innerWidth;
     if (popH === 0 || popW === 0) {
       sizeRef.current = null;
       return;
     }
-    let next = "bottom";
+    const parentRect = scrollParentRef.current?.getBoundingClientRect();
+    const clip = {
+      top: Math.max(parentRect?.top ?? 0, 0),
+      bottom: Math.min(parentRect?.bottom ?? window.innerHeight, window.innerHeight),
+      left: Math.max(parentRect?.left ?? 0, 0),
+      right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
+    };
+    const roomBelow = clip.bottom - triggerRect.bottom;
+    const roomAbove = triggerRect.top - clip.top;
+    let next;
     let top;
-    let left;
-    if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
+    if (popH <= roomBelow) {
+      next = "bottom";
+      top = triggerRect.bottom;
+    } else if (popH <= roomAbove) {
       next = "top";
       top = triggerRect.top - popH;
     } else {
-      top = triggerRect.bottom;
+      next = roomBelow >= roomAbove ? "bottom" : "top";
+      top = next === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
+      top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
+      top = Math.max(top, clip.top);
     }
-    left = triggerRect.left;
-    if (left + popW > viewportWidth - 8) {
+    let left = triggerRect.left;
+    if (left + popW > clip.right - 8) {
       left = triggerRect.right - popW;
     }
-    if (left < 8) left = 8;
+    if (left < clip.left + 8) left = clip.left + 8;
     pop.style.top = `${top + window.scrollY}px`;
     pop.style.left = `${left + window.scrollX}px`;
     if (next !== directionRef.current) {
@@ -54,12 +74,16 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   React.useLayoutEffect(() => {
     if (!enabled) {
       sizeRef.current = null;
+      scrollParentRef.current = null;
       return;
     }
+    if (triggerRef.current) {
+      scrollParentRef.current = findScrollParent(triggerRef.current);
+    }
     calculatePosition(true);
     const raf = requestAnimationFrame(() => calculatePosition(true));
     return () => cancelAnimationFrame(raf);
-  }, [calculatePosition, enabled]);
+  }, [calculatePosition, enabled, triggerRef]);
   React.useEffect(() => {
     if (!enabled || !popRef.current) return;
     const observer = new ResizeObserver(() => {

package/dist/components/TimePicker/index.cjs

@@ -48,10 +48,18 @@ var Portal_default = Portal;
 
 // src/tokens/hooks/useAutoPosition.ts
 var import_react = __toESM(require("react"), 1);
+var findScrollParent = (el) => {
+  for (let p = el.parentElement; p; p = p.parentElement) {
+    const { overflowY, overflowX } = getComputedStyle(p);
+    if (/(auto|scroll)/.test(overflowY) || /(auto|scroll)/.test(overflowX)) return p;
+  }
+  return null;
+};
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [direction, setDirection] = import_react.default.useState("bottom");
   const directionRef = import_react.default.useRef("bottom");
   const sizeRef = import_react.default.useRef(null);
+  const scrollParentRef = import_react.default.useRef(null);
   const calculatePosition = import_react.default.useCallback((remeasure = false) => {
     const pop = popRef.current;
     if (!triggerRef.current || !pop) return;
@@ -60,26 +68,38 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     }
     const { w: popW, h: popH } = sizeRef.current;
     const triggerRect = triggerRef.current.getBoundingClientRect();
-    const viewportHeight = window.innerHeight;
-    const viewportWidth = window.innerWidth;
     if (popH === 0 || popW === 0) {
       sizeRef.current = null;
       return;
     }
-    let next = "bottom";
+    const parentRect = scrollParentRef.current?.getBoundingClientRect();
+    const clip = {
+      top: Math.max(parentRect?.top ?? 0, 0),
+      bottom: Math.min(parentRect?.bottom ?? window.innerHeight, window.innerHeight),
+      left: Math.max(parentRect?.left ?? 0, 0),
+      right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
+    };
+    const roomBelow = clip.bottom - triggerRect.bottom;
+    const roomAbove = triggerRect.top - clip.top;
+    let next;
     let top;
-    let left;
-    if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
+    if (popH <= roomBelow) {
+      next = "bottom";
+      top = triggerRect.bottom;
+    } else if (popH <= roomAbove) {
       next = "top";
       top = triggerRect.top - popH;
     } else {
-      top = triggerRect.bottom;
+      next = roomBelow >= roomAbove ? "bottom" : "top";
+      top = next === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
+      top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
+      top = Math.max(top, clip.top);
     }
-    left = triggerRect.left;
-    if (left + popW > viewportWidth - 8) {
+    let left = triggerRect.left;
+    if (left + popW > clip.right - 8) {
       left = triggerRect.right - popW;
     }
-    if (left < 8) left = 8;
+    if (left < clip.left + 8) left = clip.left + 8;
     pop.style.top = `${top + window.scrollY}px`;
     pop.style.left = `${left + window.scrollX}px`;
     if (next !== directionRef.current) {
@@ -90,12 +110,16 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   import_react.default.useLayoutEffect(() => {
     if (!enabled) {
       sizeRef.current = null;
+      scrollParentRef.current = null;
       return;
     }
+    if (triggerRef.current) {
+      scrollParentRef.current = findScrollParent(triggerRef.current);
+    }
     calculatePosition(true);
     const raf = requestAnimationFrame(() => calculatePosition(true));
     return () => cancelAnimationFrame(raf);
-  }, [calculatePosition, enabled]);
+  }, [calculatePosition, enabled, triggerRef]);
   import_react.default.useEffect(() => {
     if (!enabled || !popRef.current) return;
     const observer = new ResizeObserver(() => {

package/dist/components/TimePicker/index.css

@@ -137,6 +137,7 @@
 }
 .lib-xplat-time-picker-content .time-picker-item {
   padding: var(--spacing-space-2) var(--spacing-space-3);
+  overflow-wrap: anywhere;
   cursor: pointer;
   outline: none;
   color: var(--semantic-text-primary);

package/dist/components/TimePicker/index.js

@@ -12,10 +12,18 @@ var Portal_default = Portal;
 
 // src/tokens/hooks/useAutoPosition.ts
 import React from "react";
+var findScrollParent = (el) => {
+  for (let p = el.parentElement; p; p = p.parentElement) {
+    const { overflowY, overflowX } = getComputedStyle(p);
+    if (/(auto|scroll)/.test(overflowY) || /(auto|scroll)/.test(overflowX)) return p;
+  }
+  return null;
+};
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [direction, setDirection] = React.useState("bottom");
   const directionRef = React.useRef("bottom");
   const sizeRef = React.useRef(null);
+  const scrollParentRef = React.useRef(null);
   const calculatePosition = React.useCallback((remeasure = false) => {
     const pop = popRef.current;
     if (!triggerRef.current || !pop) return;
@@ -24,26 +32,38 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     }
     const { w: popW, h: popH } = sizeRef.current;
     const triggerRect = triggerRef.current.getBoundingClientRect();
-    const viewportHeight = window.innerHeight;
-    const viewportWidth = window.innerWidth;
     if (popH === 0 || popW === 0) {
       sizeRef.current = null;
       return;
     }
-    let next = "bottom";
+    const parentRect = scrollParentRef.current?.getBoundingClientRect();
+    const clip = {
+      top: Math.max(parentRect?.top ?? 0, 0),
+      bottom: Math.min(parentRect?.bottom ?? window.innerHeight, window.innerHeight),
+      left: Math.max(parentRect?.left ?? 0, 0),
+      right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
+    };
+    const roomBelow = clip.bottom - triggerRect.bottom;
+    const roomAbove = triggerRect.top - clip.top;
+    let next;
     let top;
-    let left;
-    if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
+    if (popH <= roomBelow) {
+      next = "bottom";
+      top = triggerRect.bottom;
+    } else if (popH <= roomAbove) {
       next = "top";
       top = triggerRect.top - popH;
     } else {
-      top = triggerRect.bottom;
+      next = roomBelow >= roomAbove ? "bottom" : "top";
+      top = next === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
+      top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
+      top = Math.max(top, clip.top);
     }
-    left = triggerRect.left;
-    if (left + popW > viewportWidth - 8) {
+    let left = triggerRect.left;
+    if (left + popW > clip.right - 8) {
       left = triggerRect.right - popW;
     }
-    if (left < 8) left = 8;
+    if (left < clip.left + 8) left = clip.left + 8;
     pop.style.top = `${top + window.scrollY}px`;
     pop.style.left = `${left + window.scrollX}px`;
     if (next !== directionRef.current) {
@@ -54,12 +74,16 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   React.useLayoutEffect(() => {
     if (!enabled) {
       sizeRef.current = null;
+      scrollParentRef.current = null;
       return;
     }
+    if (triggerRef.current) {
+      scrollParentRef.current = findScrollParent(triggerRef.current);
+    }
     calculatePosition(true);
     const raf = requestAnimationFrame(() => calculatePosition(true));
     return () => cancelAnimationFrame(raf);
-  }, [calculatePosition, enabled]);
+  }, [calculatePosition, enabled, triggerRef]);
   React.useEffect(() => {
     if (!enabled || !popRef.current) return;
     const observer = new ResizeObserver(() => {

package/dist/components/index.cjs

@@ -3992,10 +3992,18 @@ var Portal_default = Portal;
 
 // src/tokens/hooks/useAutoPosition.ts
 var import_react19 = __toESM(require("react"), 1);
+var findScrollParent = (el) => {
+  for (let p = el.parentElement; p; p = p.parentElement) {
+    const { overflowY, overflowX } = getComputedStyle(p);
+    if (/(auto|scroll)/.test(overflowY) || /(auto|scroll)/.test(overflowX)) return p;
+  }
+  return null;
+};
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [direction, setDirection] = import_react19.default.useState("bottom");
   const directionRef = import_react19.default.useRef("bottom");
   const sizeRef = import_react19.default.useRef(null);
+  const scrollParentRef = import_react19.default.useRef(null);
   const calculatePosition = import_react19.default.useCallback((remeasure = false) => {
     const pop = popRef.current;
     if (!triggerRef.current || !pop) return;
@@ -4004,26 +4012,38 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     }
     const { w: popW, h: popH } = sizeRef.current;
     const triggerRect = triggerRef.current.getBoundingClientRect();
-    const viewportHeight = window.innerHeight;
-    const viewportWidth = window.innerWidth;
     if (popH === 0 || popW === 0) {
       sizeRef.current = null;
       return;
     }
-    let next = "bottom";
+    const parentRect = scrollParentRef.current?.getBoundingClientRect();
+    const clip = {
+      top: Math.max(parentRect?.top ?? 0, 0),
+      bottom: Math.min(parentRect?.bottom ?? window.innerHeight, window.innerHeight),
+      left: Math.max(parentRect?.left ?? 0, 0),
+      right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
+    };
+    const roomBelow = clip.bottom - triggerRect.bottom;
+    const roomAbove = triggerRect.top - clip.top;
+    let next;
     let top;
-    let left;
-    if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
+    if (popH <= roomBelow) {
+      next = "bottom";
+      top = triggerRect.bottom;
+    } else if (popH <= roomAbove) {
       next = "top";
       top = triggerRect.top - popH;
     } else {
-      top = triggerRect.bottom;
+      next = roomBelow >= roomAbove ? "bottom" : "top";
+      top = next === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
+      top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
+      top = Math.max(top, clip.top);
     }
-    left = triggerRect.left;
-    if (left + popW > viewportWidth - 8) {
+    let left = triggerRect.left;
+    if (left + popW > clip.right - 8) {
       left = triggerRect.right - popW;
     }
-    if (left < 8) left = 8;
+    if (left < clip.left + 8) left = clip.left + 8;
     pop.style.top = `${top + window.scrollY}px`;
     pop.style.left = `${left + window.scrollX}px`;
     if (next !== directionRef.current) {
@@ -4034,12 +4054,16 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   import_react19.default.useLayoutEffect(() => {
     if (!enabled) {
       sizeRef.current = null;
+      scrollParentRef.current = null;
       return;
     }
+    if (triggerRef.current) {
+      scrollParentRef.current = findScrollParent(triggerRef.current);
+    }
     calculatePosition(true);
     const raf = requestAnimationFrame(() => calculatePosition(true));
     return () => cancelAnimationFrame(raf);
-  }, [calculatePosition, enabled]);
+  }, [calculatePosition, enabled, triggerRef]);
   import_react19.default.useEffect(() => {
     if (!enabled || !popRef.current) return;
     const observer = new ResizeObserver(() => {

package/dist/components/index.css

@@ -4552,6 +4552,7 @@
 }
 .lib-xplat-select-content .select-item {
   padding: var(--spacing-space-2) var(--spacing-space-3);
+  overflow-wrap: anywhere;
   font-family: var(--semantic-typo-label-2-m-font);
   font-size: var(--semantic-typo-label-2-m-size);
   line-height: var(--semantic-typo-label-2-m-lh);
@@ -5639,6 +5640,7 @@
 }
 .lib-xplat-time-picker-content .time-picker-item {
   padding: var(--spacing-space-2) var(--spacing-space-3);
+  overflow-wrap: anywhere;
   cursor: pointer;
   outline: none;
   color: var(--semantic-text-primary);

package/dist/components/index.js

@@ -3890,10 +3890,18 @@ var Portal_default = Portal;
 
 // src/tokens/hooks/useAutoPosition.ts
 import React19 from "react";
+var findScrollParent = (el) => {
+  for (let p = el.parentElement; p; p = p.parentElement) {
+    const { overflowY, overflowX } = getComputedStyle(p);
+    if (/(auto|scroll)/.test(overflowY) || /(auto|scroll)/.test(overflowX)) return p;
+  }
+  return null;
+};
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [direction, setDirection] = React19.useState("bottom");
   const directionRef = React19.useRef("bottom");
   const sizeRef = React19.useRef(null);
+  const scrollParentRef = React19.useRef(null);
   const calculatePosition = React19.useCallback((remeasure = false) => {
     const pop = popRef.current;
     if (!triggerRef.current || !pop) return;
@@ -3902,26 +3910,38 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     }
     const { w: popW, h: popH } = sizeRef.current;
     const triggerRect = triggerRef.current.getBoundingClientRect();
-    const viewportHeight = window.innerHeight;
-    const viewportWidth = window.innerWidth;
     if (popH === 0 || popW === 0) {
       sizeRef.current = null;
       return;
     }
-    let next = "bottom";
+    const parentRect = scrollParentRef.current?.getBoundingClientRect();
+    const clip = {
+      top: Math.max(parentRect?.top ?? 0, 0),
+      bottom: Math.min(parentRect?.bottom ?? window.innerHeight, window.innerHeight),
+      left: Math.max(parentRect?.left ?? 0, 0),
+      right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
+    };
+    const roomBelow = clip.bottom - triggerRect.bottom;
+    const roomAbove = triggerRect.top - clip.top;
+    let next;
     let top;
-    let left;
-    if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
+    if (popH <= roomBelow) {
+      next = "bottom";
+      top = triggerRect.bottom;
+    } else if (popH <= roomAbove) {
       next = "top";
       top = triggerRect.top - popH;
     } else {
-      top = triggerRect.bottom;
+      next = roomBelow >= roomAbove ? "bottom" : "top";
+      top = next === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
+      top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
+      top = Math.max(top, clip.top);
     }
-    left = triggerRect.left;
-    if (left + popW > viewportWidth - 8) {
+    let left = triggerRect.left;
+    if (left + popW > clip.right - 8) {
       left = triggerRect.right - popW;
     }
-    if (left < 8) left = 8;
+    if (left < clip.left + 8) left = clip.left + 8;
     pop.style.top = `${top + window.scrollY}px`;
     pop.style.left = `${left + window.scrollX}px`;
     if (next !== directionRef.current) {
@@ -3932,12 +3952,16 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   React19.useLayoutEffect(() => {
     if (!enabled) {
       sizeRef.current = null;
+      scrollParentRef.current = null;
       return;
     }
+    if (triggerRef.current) {
+      scrollParentRef.current = findScrollParent(triggerRef.current);
+    }
     calculatePosition(true);
     const raf = requestAnimationFrame(() => calculatePosition(true));
     return () => cancelAnimationFrame(raf);
-  }, [calculatePosition, enabled]);
+  }, [calculatePosition, enabled, triggerRef]);
   React19.useEffect(() => {
     if (!enabled || !popRef.current) return;
     const observer = new ResizeObserver(() => {

package/dist/index.cjs

@@ -8404,10 +8404,18 @@ var Portal_default = Portal;
 
 // src/tokens/hooks/useAutoPosition.ts
 var import_react19 = __toESM(require("react"), 1);
+var findScrollParent = (el) => {
+  for (let p = el.parentElement; p; p = p.parentElement) {
+    const { overflowY, overflowX } = getComputedStyle(p);
+    if (/(auto|scroll)/.test(overflowY) || /(auto|scroll)/.test(overflowX)) return p;
+  }
+  return null;
+};
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [direction, setDirection] = import_react19.default.useState("bottom");
   const directionRef = import_react19.default.useRef("bottom");
   const sizeRef = import_react19.default.useRef(null);
+  const scrollParentRef = import_react19.default.useRef(null);
   const calculatePosition = import_react19.default.useCallback((remeasure = false) => {
     const pop = popRef.current;
     if (!triggerRef.current || !pop) return;
@@ -8416,26 +8424,38 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     }
     const { w: popW, h: popH } = sizeRef.current;
     const triggerRect = triggerRef.current.getBoundingClientRect();
-    const viewportHeight = window.innerHeight;
-    const viewportWidth = window.innerWidth;
     if (popH === 0 || popW === 0) {
       sizeRef.current = null;
       return;
     }
-    let next = "bottom";
+    const parentRect = scrollParentRef.current?.getBoundingClientRect();
+    const clip = {
+      top: Math.max(parentRect?.top ?? 0, 0),
+      bottom: Math.min(parentRect?.bottom ?? window.innerHeight, window.innerHeight),
+      left: Math.max(parentRect?.left ?? 0, 0),
+      right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
+    };
+    const roomBelow = clip.bottom - triggerRect.bottom;
+    const roomAbove = triggerRect.top - clip.top;
+    let next;
     let top;
-    let left;
-    if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
+    if (popH <= roomBelow) {
+      next = "bottom";
+      top = triggerRect.bottom;
+    } else if (popH <= roomAbove) {
       next = "top";
       top = triggerRect.top - popH;
     } else {
-      top = triggerRect.bottom;
+      next = roomBelow >= roomAbove ? "bottom" : "top";
+      top = next === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
+      top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
+      top = Math.max(top, clip.top);
     }
-    left = triggerRect.left;
-    if (left + popW > viewportWidth - 8) {
+    let left = triggerRect.left;
+    if (left + popW > clip.right - 8) {
       left = triggerRect.right - popW;
     }
-    if (left < 8) left = 8;
+    if (left < clip.left + 8) left = clip.left + 8;
     pop.style.top = `${top + window.scrollY}px`;
     pop.style.left = `${left + window.scrollX}px`;
     if (next !== directionRef.current) {
@@ -8446,12 +8466,16 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   import_react19.default.useLayoutEffect(() => {
     if (!enabled) {
       sizeRef.current = null;
+      scrollParentRef.current = null;
       return;
     }
+    if (triggerRef.current) {
+      scrollParentRef.current = findScrollParent(triggerRef.current);
+    }
     calculatePosition(true);
     const raf = requestAnimationFrame(() => calculatePosition(true));
     return () => cancelAnimationFrame(raf);
-  }, [calculatePosition, enabled]);
+  }, [calculatePosition, enabled, triggerRef]);
   import_react19.default.useEffect(() => {
     if (!enabled || !popRef.current) return;
     const observer = new ResizeObserver(() => {

package/dist/index.css

@@ -4552,6 +4552,7 @@
 }
 .lib-xplat-select-content .select-item {
   padding: var(--spacing-space-2) var(--spacing-space-3);
+  overflow-wrap: anywhere;
   font-family: var(--semantic-typo-label-2-m-font);
   font-size: var(--semantic-typo-label-2-m-size);
   line-height: var(--semantic-typo-label-2-m-lh);
@@ -5639,6 +5640,7 @@
 }
 .lib-xplat-time-picker-content .time-picker-item {
   padding: var(--spacing-space-2) var(--spacing-space-3);
+  overflow-wrap: anywhere;
   cursor: pointer;
   outline: none;
   color: var(--semantic-text-primary);

package/dist/index.js

@@ -7993,10 +7993,18 @@ var Portal_default = Portal;
 
 // src/tokens/hooks/useAutoPosition.ts
 import React19 from "react";
+var findScrollParent = (el) => {
+  for (let p = el.parentElement; p; p = p.parentElement) {
+    const { overflowY, overflowX } = getComputedStyle(p);
+    if (/(auto|scroll)/.test(overflowY) || /(auto|scroll)/.test(overflowX)) return p;
+  }
+  return null;
+};
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [direction, setDirection] = React19.useState("bottom");
   const directionRef = React19.useRef("bottom");
   const sizeRef = React19.useRef(null);
+  const scrollParentRef = React19.useRef(null);
   const calculatePosition = React19.useCallback((remeasure = false) => {
     const pop = popRef.current;
     if (!triggerRef.current || !pop) return;
@@ -8005,26 +8013,38 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     }
     const { w: popW, h: popH } = sizeRef.current;
     const triggerRect = triggerRef.current.getBoundingClientRect();
-    const viewportHeight = window.innerHeight;
-    const viewportWidth = window.innerWidth;
     if (popH === 0 || popW === 0) {
       sizeRef.current = null;
       return;
     }
-    let next = "bottom";
+    const parentRect = scrollParentRef.current?.getBoundingClientRect();
+    const clip = {
+      top: Math.max(parentRect?.top ?? 0, 0),
+      bottom: Math.min(parentRect?.bottom ?? window.innerHeight, window.innerHeight),
+      left: Math.max(parentRect?.left ?? 0, 0),
+      right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
+    };
+    const roomBelow = clip.bottom - triggerRect.bottom;
+    const roomAbove = triggerRect.top - clip.top;
+    let next;
     let top;
-    let left;
-    if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
+    if (popH <= roomBelow) {
+      next = "bottom";
+      top = triggerRect.bottom;
+    } else if (popH <= roomAbove) {
       next = "top";
       top = triggerRect.top - popH;
     } else {
-      top = triggerRect.bottom;
+      next = roomBelow >= roomAbove ? "bottom" : "top";
+      top = next === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
+      top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
+      top = Math.max(top, clip.top);
     }
-    left = triggerRect.left;
-    if (left + popW > viewportWidth - 8) {
+    let left = triggerRect.left;
+    if (left + popW > clip.right - 8) {
       left = triggerRect.right - popW;
     }
-    if (left < 8) left = 8;
+    if (left < clip.left + 8) left = clip.left + 8;
     pop.style.top = `${top + window.scrollY}px`;
     pop.style.left = `${left + window.scrollX}px`;
     if (next !== directionRef.current) {
@@ -8035,12 +8055,16 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   React19.useLayoutEffect(() => {
     if (!enabled) {
       sizeRef.current = null;
+      scrollParentRef.current = null;
       return;
     }
+    if (triggerRef.current) {
+      scrollParentRef.current = findScrollParent(triggerRef.current);
+    }
     calculatePosition(true);
     const raf = requestAnimationFrame(() => calculatePosition(true));
     return () => cancelAnimationFrame(raf);
-  }, [calculatePosition, enabled]);
+  }, [calculatePosition, enabled, triggerRef]);
   React19.useEffect(() => {
     if (!enabled || !popRef.current) return;
     const observer = new ResizeObserver(() => {

package/guidelines/MIGRATION.md

@@ -392,10 +392,19 @@ export { Button, Input, Select, SideBar /* 쓰는 것만 */ } from "@x-plat/desi
 | | 상태 |
 |---|---|
 | 오버레이 열림/닫힘 애니메이션 (0.14.2) | **사람이 화면에서 확인함** — 셀렉트가 부드럽게 내려온다 |
+| 안쪽 상자 스크롤 시 닫힘 (0.14.7) | **사람이 화면에서 확인함** |
+| 팝업 목록 안에서 휠 → 안 닫힘 (0.14.7) | **사람이 화면에서 확인함** |
+| 긴 항목 줄바꿈 (0.14.8) | **사람이 화면에서 확인함** — 두세 줄로 떨어진다 |
+| 페이지(문서) 스크롤 시 안 닫힘 (0.14.7) | **확인 안 됨.** 규칙상 맞지만 그 조건의 화면에 고르개가 없어 볼 자리가 없었다 |
 | `Layout` 타입 (0.14.2) | 소비자 흉내 프로젝트로 타입 검사 통과 |
 | `ToggleChip` 커서·초점 테두리 | 마크업·CSS 만 확인. 눌러 본 사람 없음 |
 | Editor | 아래 |
 
+> 확인할 때는 **배포가 앉은 뒤에** 볼 것. 한 번은 "안 닫힌다" 로 나왔다가
+> 다시 보니 닫혔다 — 반쯤 배포된 화면이었다. 그리고 버전 번호가 아니라
+> 받은 파일 안을 열어 확인하는 편이 낫다(0.14.1 은 번호만 올라가고 내용이
+> 안 온 적이 있다).
+
 **Editor 는 브라우저에서 검증되지 않았다.** `contentEditable`·`execCommand`·IME 는
 자동 테스트로 흉내 낼 수 없다. 특히 아래 넷은 직접 눌러 봐야 한다.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-plat/design-system",
-  "version": "0.14.7",
+  "version": "0.14.9",
   "description": "XPLAT UI Design System",
   "author": "XPLAT WOONG",
   "main": "dist/index.cjs",