@x-plat/design-system 0.14.11 → 0.14.13

package/dist/components/index.js

@@ -3902,6 +3902,7 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
   const roomAbove = triggerRect.top - clip.top;
   let direction;
   let top;
+  let maxHeight = null;
   if (popH <= roomBelow) {
     direction = "bottom";
     top = triggerRect.bottom;
@@ -3909,38 +3910,48 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
     direction = "top";
     top = triggerRect.top - popH;
   } else {
-    direction = roomBelow >= roomAbove ? "bottom" : "top";
-    top = direction === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
-    top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
-    top = Math.max(top, clip.top);
+    const room = Math.max(roomBelow, roomAbove, 0);
+    if (roomBelow >= roomAbove) {
+      direction = "bottom";
+      top = triggerRect.bottom;
+    } else {
+      direction = "top";
+      top = triggerRect.top - room;
+    }
+    maxHeight = room;
   }
   let left = triggerRect.left;
   if (left + popW > clip.right - 8) {
     left = triggerRect.right - popW;
   }
   if (left < clip.left + 8) left = clip.left + 8;
+  const drawnH = maxHeight === null ? popH : Math.min(popH, maxHeight);
   return {
     direction,
     top,
     left,
+    maxHeight,
     over: {
       top: Math.max(0, clip.top - top),
       right: Math.max(0, left + popW - clip.right),
-      bottom: Math.max(0, top + popH - clip.bottom),
+      bottom: Math.max(0, top + drawnH - clip.bottom),
       left: Math.max(0, clip.left - left)
     }
   };
 };
 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 placedRef = React19.useRef(false);
   const calculatePosition = React19.useCallback((remeasure = false) => {
     const pop = popRef.current;
     if (!triggerRef.current || !pop) return;
     if (remeasure || !sizeRef.current) {
-      sizeRef.current = { w: pop.offsetWidth, h: pop.offsetHeight };
+      sizeRef.current = {
+        w: pop.offsetWidth,
+        h: Math.max(pop.offsetHeight, pop.scrollHeight)
+      };
     }
     const { w: popW, h: popH } = sizeRef.current;
     const triggerRect = triggerRef.current.getBoundingClientRect();
@@ -3955,7 +3966,9 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left: Math.max(parentRect?.left ?? 0, 0),
       right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
     };
-    const { direction: next, top, left, over } = computePlacement(
+    const first = !placedRef.current;
+    if (first) pop.style.transition = "none";
+    const { direction: next, top, left, over, maxHeight } = computePlacement(
       triggerRect,
       popW,
       popH,
@@ -3963,16 +3976,22 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     );
     pop.style.top = `${top + window.scrollY}px`;
     pop.style.left = `${left + window.scrollX}px`;
+    pop.style.maxHeight = maxHeight === null ? "" : `${maxHeight}px`;
     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";
-    if (next !== directionRef.current) {
-      directionRef.current = next;
-      setDirection(next);
+    directionRef.current = next;
+    pop.classList.toggle("top", next === "top");
+    pop.classList.toggle("bottom", next === "bottom");
+    if (first) {
+      void pop.offsetHeight;
+      pop.style.transition = "";
+      placedRef.current = true;
     }
   }, [triggerRef, popRef]);
   React19.useLayoutEffect(() => {
     if (!enabled) {
       sizeRef.current = null;
       scrollParentRef.current = null;
+      placedRef.current = false;
       return;
     }
     if (triggerRef.current) {
@@ -4001,7 +4020,6 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       window.removeEventListener("scroll", onScroll, true);
     };
   }, [calculatePosition, enabled]);
-  return { direction };
 };
 var useAutoPosition_default = useAutoPosition;
 
@@ -4039,7 +4057,7 @@ var Dropdown = (props) => {
   const [visible, setVisible] = React21.useState(false);
   const triggerRef = React21.useRef(null);
   const menuRef = React21.useRef(null);
-  const { direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
+  useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
   useCloseOnContainerScroll(isOpen, menuRef, () => setIsOpen(false));
   useEscapeKey(isOpen, () => {
@@ -4075,7 +4093,7 @@ var Dropdown = (props) => {
       "div",
       {
         ref: menuRef,
-        className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }),
+        className: clsx_default("lib-xplat-dropdown-menu", { visible }),
         role: "menu",
         children: items.map((item) => /* @__PURE__ */ jsx322(
           "button",
@@ -5977,7 +5995,7 @@ var PopOver = (props) => {
     onClose();
     triggerRef.current?.focus({ preventScroll: true });
   });
-  const position = useAutoPosition_default(triggerRef, popRef, localOpen);
+  useAutoPosition_default(triggerRef, popRef, localOpen);
   React27.useEffect(() => {
     if (isOpen) {
       setLocalOpen(isOpen);
@@ -6006,7 +6024,6 @@ var PopOver = (props) => {
           {
             className: clsx_default(
               "lib-xplat-pop-over-content",
-              position.direction,
               eventTrigger && "visible"
             ),
             ref: popRef,
@@ -6258,7 +6275,7 @@ var SelectRoot = (props) => {
     close();
     triggerRef.current?.focus({ preventScroll: true });
   });
-  const position = useAutoPosition_default(triggerRef, contentRef, mounted);
+  useAutoPosition_default(triggerRef, contentRef, mounted);
   const setSelected = React31.useCallback(
     (label2, itemValue) => {
       if (!isControlled) {
@@ -6351,7 +6368,7 @@ var SelectRoot = (props) => {
         mounted && /* @__PURE__ */ jsx337(Portal_default, { children: /* @__PURE__ */ jsxs216(
           "div",
           {
-            className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass),
+            className: clsx_default("lib-xplat-select-content", size, stateClass),
             ref: contentRef,
             style: { width: triggerRef.current?.offsetWidth },
             role: "listbox",

package/dist/index.cjs

@@ -8416,6 +8416,7 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
   const roomAbove = triggerRect.top - clip.top;
   let direction;
   let top;
+  let maxHeight = null;
   if (popH <= roomBelow) {
     direction = "bottom";
     top = triggerRect.bottom;
@@ -8423,38 +8424,48 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
     direction = "top";
     top = triggerRect.top - popH;
   } else {
-    direction = roomBelow >= roomAbove ? "bottom" : "top";
-    top = direction === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
-    top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
-    top = Math.max(top, clip.top);
+    const room = Math.max(roomBelow, roomAbove, 0);
+    if (roomBelow >= roomAbove) {
+      direction = "bottom";
+      top = triggerRect.bottom;
+    } else {
+      direction = "top";
+      top = triggerRect.top - room;
+    }
+    maxHeight = room;
   }
   let left = triggerRect.left;
   if (left + popW > clip.right - 8) {
     left = triggerRect.right - popW;
   }
   if (left < clip.left + 8) left = clip.left + 8;
+  const drawnH = maxHeight === null ? popH : Math.min(popH, maxHeight);
   return {
     direction,
     top,
     left,
+    maxHeight,
     over: {
       top: Math.max(0, clip.top - top),
       right: Math.max(0, left + popW - clip.right),
-      bottom: Math.max(0, top + popH - clip.bottom),
+      bottom: Math.max(0, top + drawnH - clip.bottom),
       left: Math.max(0, clip.left - left)
     }
   };
 };
 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 placedRef = import_react19.default.useRef(false);
   const calculatePosition = import_react19.default.useCallback((remeasure = false) => {
     const pop = popRef.current;
     if (!triggerRef.current || !pop) return;
     if (remeasure || !sizeRef.current) {
-      sizeRef.current = { w: pop.offsetWidth, h: pop.offsetHeight };
+      sizeRef.current = {
+        w: pop.offsetWidth,
+        h: Math.max(pop.offsetHeight, pop.scrollHeight)
+      };
     }
     const { w: popW, h: popH } = sizeRef.current;
     const triggerRect = triggerRef.current.getBoundingClientRect();
@@ -8469,7 +8480,9 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left: Math.max(parentRect?.left ?? 0, 0),
       right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
     };
-    const { direction: next, top, left, over } = computePlacement(
+    const first = !placedRef.current;
+    if (first) pop.style.transition = "none";
+    const { direction: next, top, left, over, maxHeight } = computePlacement(
       triggerRect,
       popW,
       popH,
@@ -8477,16 +8490,22 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     );
     pop.style.top = `${top + window.scrollY}px`;
     pop.style.left = `${left + window.scrollX}px`;
+    pop.style.maxHeight = maxHeight === null ? "" : `${maxHeight}px`;
     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";
-    if (next !== directionRef.current) {
-      directionRef.current = next;
-      setDirection(next);
+    directionRef.current = next;
+    pop.classList.toggle("top", next === "top");
+    pop.classList.toggle("bottom", next === "bottom");
+    if (first) {
+      void pop.offsetHeight;
+      pop.style.transition = "";
+      placedRef.current = true;
     }
   }, [triggerRef, popRef]);
   import_react19.default.useLayoutEffect(() => {
     if (!enabled) {
       sizeRef.current = null;
       scrollParentRef.current = null;
+      placedRef.current = false;
       return;
     }
     if (triggerRef.current) {
@@ -8515,7 +8534,6 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       window.removeEventListener("scroll", onScroll, true);
     };
   }, [calculatePosition, enabled]);
-  return { direction };
 };
 var useAutoPosition_default = useAutoPosition;
 
@@ -8553,7 +8571,7 @@ var Dropdown = (props) => {
   const [visible, setVisible] = import_react21.default.useState(false);
   const triggerRef = import_react21.default.useRef(null);
   const menuRef = import_react21.default.useRef(null);
-  const { direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
+  useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
   useCloseOnContainerScroll(isOpen, menuRef, () => setIsOpen(false));
   useEscapeKey(isOpen, () => {
@@ -8589,7 +8607,7 @@ var Dropdown = (props) => {
       "div",
       {
         ref: menuRef,
-        className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }),
+        className: clsx_default("lib-xplat-dropdown-menu", { visible }),
         role: "menu",
         children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
           "button",
@@ -10491,7 +10509,7 @@ var PopOver = (props) => {
     onClose();
     triggerRef.current?.focus({ preventScroll: true });
   });
-  const position = useAutoPosition_default(triggerRef, popRef, localOpen);
+  useAutoPosition_default(triggerRef, popRef, localOpen);
   import_react27.default.useEffect(() => {
     if (isOpen) {
       setLocalOpen(isOpen);
@@ -10520,7 +10538,6 @@ var PopOver = (props) => {
           {
             className: clsx_default(
               "lib-xplat-pop-over-content",
-              position.direction,
               eventTrigger && "visible"
             ),
             ref: popRef,
@@ -10772,7 +10789,7 @@ var SelectRoot = (props) => {
     close();
     triggerRef.current?.focus({ preventScroll: true });
   });
-  const position = useAutoPosition_default(triggerRef, contentRef, mounted);
+  useAutoPosition_default(triggerRef, contentRef, mounted);
   const setSelected = import_react31.default.useCallback(
     (label2, itemValue) => {
       if (!isControlled) {
@@ -10865,7 +10882,7 @@ var SelectRoot = (props) => {
         mounted && /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime337.jsxs)(
           "div",
           {
-            className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass),
+            className: clsx_default("lib-xplat-select-content", size, stateClass),
             ref: contentRef,
             style: { width: triggerRef.current?.offsetWidth },
             role: "listbox",

package/dist/index.css

@@ -4513,7 +4513,7 @@
   transition: transform 0.2s ease, opacity 0.2s ease;
 }
 .lib-xplat-select-content.bottom {
-  transform: translateY(-8px);
+  transform: translateY(8px);
 }
 .lib-xplat-select-content.bottom.visible {
   opacity: 1;
@@ -4521,10 +4521,12 @@
 }
 .lib-xplat-select-content.bottom.exit {
   opacity: 0;
-  transform: translateY(-8px);
+  transform: translateY(8px);
+}
+.lib-xplat-select-content {
 }
 .lib-xplat-select-content.top {
-  transform: translateY(8px);
+  transform: translateY(-8px);
 }
 .lib-xplat-select-content.top.visible {
   opacity: 1;
@@ -4532,7 +4534,7 @@
 }
 .lib-xplat-select-content.top.exit {
   opacity: 0;
-  transform: translateY(8px);
+  transform: translateY(-8px);
 }
 .lib-xplat-select-content.sm .select-item {
   padding: var(--spacing-space-2) var(--spacing-space-2);

package/dist/index.js

@@ -8005,6 +8005,7 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
   const roomAbove = triggerRect.top - clip.top;
   let direction;
   let top;
+  let maxHeight = null;
   if (popH <= roomBelow) {
     direction = "bottom";
     top = triggerRect.bottom;
@@ -8012,38 +8013,48 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
     direction = "top";
     top = triggerRect.top - popH;
   } else {
-    direction = roomBelow >= roomAbove ? "bottom" : "top";
-    top = direction === "bottom" ? triggerRect.bottom : triggerRect.top - popH;
-    top = Math.min(top, Math.max(clip.top, clip.bottom - popH));
-    top = Math.max(top, clip.top);
+    const room = Math.max(roomBelow, roomAbove, 0);
+    if (roomBelow >= roomAbove) {
+      direction = "bottom";
+      top = triggerRect.bottom;
+    } else {
+      direction = "top";
+      top = triggerRect.top - room;
+    }
+    maxHeight = room;
   }
   let left = triggerRect.left;
   if (left + popW > clip.right - 8) {
     left = triggerRect.right - popW;
   }
   if (left < clip.left + 8) left = clip.left + 8;
+  const drawnH = maxHeight === null ? popH : Math.min(popH, maxHeight);
   return {
     direction,
     top,
     left,
+    maxHeight,
     over: {
       top: Math.max(0, clip.top - top),
       right: Math.max(0, left + popW - clip.right),
-      bottom: Math.max(0, top + popH - clip.bottom),
+      bottom: Math.max(0, top + drawnH - clip.bottom),
       left: Math.max(0, clip.left - left)
     }
   };
 };
 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 placedRef = React19.useRef(false);
   const calculatePosition = React19.useCallback((remeasure = false) => {
     const pop = popRef.current;
     if (!triggerRef.current || !pop) return;
     if (remeasure || !sizeRef.current) {
-      sizeRef.current = { w: pop.offsetWidth, h: pop.offsetHeight };
+      sizeRef.current = {
+        w: pop.offsetWidth,
+        h: Math.max(pop.offsetHeight, pop.scrollHeight)
+      };
     }
     const { w: popW, h: popH } = sizeRef.current;
     const triggerRect = triggerRef.current.getBoundingClientRect();
@@ -8058,7 +8069,9 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left: Math.max(parentRect?.left ?? 0, 0),
       right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
     };
-    const { direction: next, top, left, over } = computePlacement(
+    const first = !placedRef.current;
+    if (first) pop.style.transition = "none";
+    const { direction: next, top, left, over, maxHeight } = computePlacement(
       triggerRect,
       popW,
       popH,
@@ -8066,16 +8079,22 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     );
     pop.style.top = `${top + window.scrollY}px`;
     pop.style.left = `${left + window.scrollX}px`;
+    pop.style.maxHeight = maxHeight === null ? "" : `${maxHeight}px`;
     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";
-    if (next !== directionRef.current) {
-      directionRef.current = next;
-      setDirection(next);
+    directionRef.current = next;
+    pop.classList.toggle("top", next === "top");
+    pop.classList.toggle("bottom", next === "bottom");
+    if (first) {
+      void pop.offsetHeight;
+      pop.style.transition = "";
+      placedRef.current = true;
     }
   }, [triggerRef, popRef]);
   React19.useLayoutEffect(() => {
     if (!enabled) {
       sizeRef.current = null;
       scrollParentRef.current = null;
+      placedRef.current = false;
       return;
     }
     if (triggerRef.current) {
@@ -8104,7 +8123,6 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       window.removeEventListener("scroll", onScroll, true);
     };
   }, [calculatePosition, enabled]);
-  return { direction };
 };
 var useAutoPosition_default = useAutoPosition;
 
@@ -8142,7 +8160,7 @@ var Dropdown = (props) => {
   const [visible, setVisible] = React21.useState(false);
   const triggerRef = React21.useRef(null);
   const menuRef = React21.useRef(null);
-  const { direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
+  useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
   useCloseOnContainerScroll(isOpen, menuRef, () => setIsOpen(false));
   useEscapeKey(isOpen, () => {
@@ -8178,7 +8196,7 @@ var Dropdown = (props) => {
       "div",
       {
         ref: menuRef,
-        className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }),
+        className: clsx_default("lib-xplat-dropdown-menu", { visible }),
         role: "menu",
         children: items.map((item) => /* @__PURE__ */ jsx322(
           "button",
@@ -10080,7 +10098,7 @@ var PopOver = (props) => {
     onClose();
     triggerRef.current?.focus({ preventScroll: true });
   });
-  const position = useAutoPosition_default(triggerRef, popRef, localOpen);
+  useAutoPosition_default(triggerRef, popRef, localOpen);
   React27.useEffect(() => {
     if (isOpen) {
       setLocalOpen(isOpen);
@@ -10109,7 +10127,6 @@ var PopOver = (props) => {
           {
             className: clsx_default(
               "lib-xplat-pop-over-content",
-              position.direction,
               eventTrigger && "visible"
             ),
             ref: popRef,
@@ -10361,7 +10378,7 @@ var SelectRoot = (props) => {
     close();
     triggerRef.current?.focus({ preventScroll: true });
   });
-  const position = useAutoPosition_default(triggerRef, contentRef, mounted);
+  useAutoPosition_default(triggerRef, contentRef, mounted);
   const setSelected = React31.useCallback(
     (label2, itemValue) => {
       if (!isControlled) {
@@ -10454,7 +10471,7 @@ var SelectRoot = (props) => {
         mounted && /* @__PURE__ */ jsx337(Portal_default, { children: /* @__PURE__ */ jsxs216(
           "div",
           {
-            className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass),
+            className: clsx_default("lib-xplat-select-content", size, stateClass),
             ref: contentRef,
             style: { width: triggerRef.current?.offsetWidth },
             role: "listbox",

package/package.json

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