@x-plat/design-system 0.14.12 → 0.14.13

package/dist/components/Dropdown/index.cjs

@@ -98,15 +98,18 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
   };
 };
 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 placedRef = import_react.default.useRef(false);
   const calculatePosition = import_react.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();
@@ -121,6 +124,8 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left: Math.max(parentRect?.left ?? 0, 0),
       right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
     };
+    const first = !placedRef.current;
+    if (first) pop.style.transition = "none";
     const { direction: next, top, left, over, maxHeight } = computePlacement(
       triggerRect,
       popW,
@@ -131,15 +136,20 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     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_react.default.useLayoutEffect(() => {
     if (!enabled) {
       sizeRef.current = null;
       scrollParentRef.current = null;
+      placedRef.current = false;
       return;
     }
     if (triggerRef.current) {
@@ -168,7 +178,6 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       window.removeEventListener("scroll", onScroll, true);
     };
   }, [calculatePosition, enabled]);
-  return { direction };
 };
 var useAutoPosition_default = useAutoPosition;
 
@@ -263,7 +272,7 @@ var Dropdown = (props) => {
   const [visible, setVisible] = import_react4.default.useState(false);
   const triggerRef = import_react4.default.useRef(null);
   const menuRef = import_react4.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, () => {
@@ -299,7 +308,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_runtime.jsx)(
           "button",

package/dist/components/Dropdown/index.js

@@ -62,15 +62,18 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
   };
 };
 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 placedRef = React.useRef(false);
   const calculatePosition = React.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();
@@ -85,6 +88,8 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left: Math.max(parentRect?.left ?? 0, 0),
       right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
     };
+    const first = !placedRef.current;
+    if (first) pop.style.transition = "none";
     const { direction: next, top, left, over, maxHeight } = computePlacement(
       triggerRect,
       popW,
@@ -95,15 +100,20 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     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]);
   React.useLayoutEffect(() => {
     if (!enabled) {
       sizeRef.current = null;
       scrollParentRef.current = null;
+      placedRef.current = false;
       return;
     }
     if (triggerRef.current) {
@@ -132,7 +142,6 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       window.removeEventListener("scroll", onScroll, true);
     };
   }, [calculatePosition, enabled]);
-  return { direction };
 };
 var useAutoPosition_default = useAutoPosition;
 
@@ -227,7 +236,7 @@ var Dropdown = (props) => {
   const [visible, setVisible] = React4.useState(false);
   const triggerRef = React4.useRef(null);
   const menuRef = React4.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, () => {
@@ -263,7 +272,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__ */ jsx(
           "button",

package/dist/components/PopOver/index.cjs

@@ -98,15 +98,18 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
   };
 };
 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 placedRef = import_react.default.useRef(false);
   const calculatePosition = import_react.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();
@@ -121,6 +124,8 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left: Math.max(parentRect?.left ?? 0, 0),
       right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
     };
+    const first = !placedRef.current;
+    if (first) pop.style.transition = "none";
     const { direction: next, top, left, over, maxHeight } = computePlacement(
       triggerRect,
       popW,
@@ -131,15 +136,20 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     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_react.default.useLayoutEffect(() => {
     if (!enabled) {
       sizeRef.current = null;
       scrollParentRef.current = null;
+      placedRef.current = false;
       return;
     }
     if (triggerRef.current) {
@@ -168,7 +178,6 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       window.removeEventListener("scroll", onScroll, true);
     };
   }, [calculatePosition, enabled]);
-  return { direction };
 };
 var useAutoPosition_default = useAutoPosition;
 
@@ -268,7 +277,7 @@ var PopOver = (props) => {
     onClose();
     triggerRef.current?.focus({ preventScroll: true });
   });
-  const position = useAutoPosition_default(triggerRef, popRef, localOpen);
+  useAutoPosition_default(triggerRef, popRef, localOpen);
   import_react4.default.useEffect(() => {
     if (isOpen) {
       setLocalOpen(isOpen);
@@ -297,7 +306,6 @@ var PopOver = (props) => {
           {
             className: clsx_default(
               "lib-xplat-pop-over-content",
-              position.direction,
               eventTrigger && "visible"
             ),
             ref: popRef,

package/dist/components/PopOver/index.js

@@ -62,15 +62,18 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
   };
 };
 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 placedRef = React.useRef(false);
   const calculatePosition = React.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();
@@ -85,6 +88,8 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left: Math.max(parentRect?.left ?? 0, 0),
       right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
     };
+    const first = !placedRef.current;
+    if (first) pop.style.transition = "none";
     const { direction: next, top, left, over, maxHeight } = computePlacement(
       triggerRect,
       popW,
@@ -95,15 +100,20 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     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]);
   React.useLayoutEffect(() => {
     if (!enabled) {
       sizeRef.current = null;
       scrollParentRef.current = null;
+      placedRef.current = false;
       return;
     }
     if (triggerRef.current) {
@@ -132,7 +142,6 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       window.removeEventListener("scroll", onScroll, true);
     };
   }, [calculatePosition, enabled]);
-  return { direction };
 };
 var useAutoPosition_default = useAutoPosition;
 
@@ -232,7 +241,7 @@ var PopOver = (props) => {
     onClose();
     triggerRef.current?.focus({ preventScroll: true });
   });
-  const position = useAutoPosition_default(triggerRef, popRef, localOpen);
+  useAutoPosition_default(triggerRef, popRef, localOpen);
   React4.useEffect(() => {
     if (isOpen) {
       setLocalOpen(isOpen);
@@ -261,7 +270,6 @@ var PopOver = (props) => {
           {
             className: clsx_default(
               "lib-xplat-pop-over-content",
-              position.direction,
               eventTrigger && "visible"
             ),
             ref: popRef,

package/dist/components/Select/index.cjs

@@ -99,15 +99,18 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
   };
 };
 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 placedRef = import_react.default.useRef(false);
   const calculatePosition = import_react.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();
@@ -122,6 +125,8 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left: Math.max(parentRect?.left ?? 0, 0),
       right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
     };
+    const first = !placedRef.current;
+    if (first) pop.style.transition = "none";
     const { direction: next, top, left, over, maxHeight } = computePlacement(
       triggerRect,
       popW,
@@ -132,15 +137,20 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     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_react.default.useLayoutEffect(() => {
     if (!enabled) {
       sizeRef.current = null;
       scrollParentRef.current = null;
+      placedRef.current = false;
       return;
     }
     if (triggerRef.current) {
@@ -169,7 +179,6 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       window.removeEventListener("scroll", onScroll, true);
     };
   }, [calculatePosition, enabled]);
-  return { direction };
 };
 var useAutoPosition_default = useAutoPosition;
 
@@ -1399,7 +1408,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_react6.default.useCallback(
     (label2, itemValue) => {
       if (!isControlled) {
@@ -1492,7 +1501,7 @@ var SelectRoot = (props) => {
         mounted && /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime297.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/components/Select/index.js

@@ -62,15 +62,18 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
   };
 };
 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 placedRef = React.useRef(false);
   const calculatePosition = React.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();
@@ -85,6 +88,8 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left: Math.max(parentRect?.left ?? 0, 0),
       right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
     };
+    const first = !placedRef.current;
+    if (first) pop.style.transition = "none";
     const { direction: next, top, left, over, maxHeight } = computePlacement(
       triggerRect,
       popW,
@@ -95,15 +100,20 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     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]);
   React.useLayoutEffect(() => {
     if (!enabled) {
       sizeRef.current = null;
       scrollParentRef.current = null;
+      placedRef.current = false;
       return;
     }
     if (triggerRef.current) {
@@ -132,7 +142,6 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       window.removeEventListener("scroll", onScroll, true);
     };
   }, [calculatePosition, enabled]);
-  return { direction };
 };
 var useAutoPosition_default = useAutoPosition;
 
@@ -1362,7 +1371,7 @@ var SelectRoot = (props) => {
     close();
     triggerRef.current?.focus({ preventScroll: true });
   });
-  const position = useAutoPosition_default(triggerRef, contentRef, mounted);
+  useAutoPosition_default(triggerRef, contentRef, mounted);
   const setSelected = React6.useCallback(
     (label2, itemValue) => {
       if (!isControlled) {
@@ -1455,7 +1464,7 @@ var SelectRoot = (props) => {
         mounted && /* @__PURE__ */ jsx297(Portal_default, { children: /* @__PURE__ */ jsxs190(
           "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/components/TimePicker/index.cjs

@@ -98,15 +98,18 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
   };
 };
 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 placedRef = import_react.default.useRef(false);
   const calculatePosition = import_react.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();
@@ -121,6 +124,8 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left: Math.max(parentRect?.left ?? 0, 0),
       right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
     };
+    const first = !placedRef.current;
+    if (first) pop.style.transition = "none";
     const { direction: next, top, left, over, maxHeight } = computePlacement(
       triggerRect,
       popW,
@@ -131,15 +136,20 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     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_react.default.useLayoutEffect(() => {
     if (!enabled) {
       sizeRef.current = null;
       scrollParentRef.current = null;
+      placedRef.current = false;
       return;
     }
     if (triggerRef.current) {
@@ -168,7 +178,6 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       window.removeEventListener("scroll", onScroll, true);
     };
   }, [calculatePosition, enabled]);
-  return { direction };
 };
 var useAutoPosition_default = useAutoPosition;
 

package/dist/components/TimePicker/index.js

@@ -62,15 +62,18 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
   };
 };
 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 placedRef = React.useRef(false);
   const calculatePosition = React.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();
@@ -85,6 +88,8 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left: Math.max(parentRect?.left ?? 0, 0),
       right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
     };
+    const first = !placedRef.current;
+    if (first) pop.style.transition = "none";
     const { direction: next, top, left, over, maxHeight } = computePlacement(
       triggerRect,
       popW,
@@ -95,15 +100,20 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     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]);
   React.useLayoutEffect(() => {
     if (!enabled) {
       sizeRef.current = null;
       scrollParentRef.current = null;
+      placedRef.current = false;
       return;
     }
     if (triggerRef.current) {
@@ -132,7 +142,6 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       window.removeEventListener("scroll", onScroll, true);
     };
   }, [calculatePosition, enabled]);
-  return { direction };
 };
 var useAutoPosition_default = useAutoPosition;
 

package/dist/components/index.cjs

@@ -4042,15 +4042,18 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
   };
 };
 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();
@@ -4065,6 +4068,8 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left: Math.max(parentRect?.left ?? 0, 0),
       right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
     };
+    const first = !placedRef.current;
+    if (first) pop.style.transition = "none";
     const { direction: next, top, left, over, maxHeight } = computePlacement(
       triggerRect,
       popW,
@@ -4075,15 +4080,20 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     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) {
@@ -4112,7 +4122,6 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       window.removeEventListener("scroll", onScroll, true);
     };
   }, [calculatePosition, enabled]);
-  return { direction };
 };
 var useAutoPosition_default = useAutoPosition;
 
@@ -4150,7 +4159,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, () => {
@@ -4186,7 +4195,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",
@@ -6088,7 +6097,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);
@@ -6117,7 +6126,6 @@ var PopOver = (props) => {
           {
             className: clsx_default(
               "lib-xplat-pop-over-content",
-              position.direction,
               eventTrigger && "visible"
             ),
             ref: popRef,
@@ -6369,7 +6377,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) {
@@ -6462,7 +6470,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/components/index.js

@@ -3940,15 +3940,18 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
   };
 };
 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();
@@ -3963,6 +3966,8 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left: Math.max(parentRect?.left ?? 0, 0),
       right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
     };
+    const first = !placedRef.current;
+    if (first) pop.style.transition = "none";
     const { direction: next, top, left, over, maxHeight } = computePlacement(
       triggerRect,
       popW,
@@ -3973,15 +3978,20 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     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) {
@@ -4010,7 +4020,6 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       window.removeEventListener("scroll", onScroll, true);
     };
   }, [calculatePosition, enabled]);
-  return { direction };
 };
 var useAutoPosition_default = useAutoPosition;
 
@@ -4048,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, () => {
@@ -4084,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",
@@ -5986,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);
@@ -6015,7 +6024,6 @@ var PopOver = (props) => {
           {
             className: clsx_default(
               "lib-xplat-pop-over-content",
-              position.direction,
               eventTrigger && "visible"
             ),
             ref: popRef,
@@ -6267,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) {
@@ -6360,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

@@ -8454,15 +8454,18 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
   };
 };
 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();
@@ -8477,6 +8480,8 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left: Math.max(parentRect?.left ?? 0, 0),
       right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
     };
+    const first = !placedRef.current;
+    if (first) pop.style.transition = "none";
     const { direction: next, top, left, over, maxHeight } = computePlacement(
       triggerRect,
       popW,
@@ -8487,15 +8492,20 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     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) {
@@ -8524,7 +8534,6 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       window.removeEventListener("scroll", onScroll, true);
     };
   }, [calculatePosition, enabled]);
-  return { direction };
 };
 var useAutoPosition_default = useAutoPosition;
 
@@ -8562,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, () => {
@@ -8598,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",
@@ -10500,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);
@@ -10529,7 +10538,6 @@ var PopOver = (props) => {
           {
             className: clsx_default(
               "lib-xplat-pop-over-content",
-              position.direction,
               eventTrigger && "visible"
             ),
             ref: popRef,
@@ -10781,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) {
@@ -10874,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.js

@@ -8043,15 +8043,18 @@ var computePlacement = (triggerRect, popW, popH, clip) => {
   };
 };
 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();
@@ -8066,6 +8069,8 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left: Math.max(parentRect?.left ?? 0, 0),
       right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
     };
+    const first = !placedRef.current;
+    if (first) pop.style.transition = "none";
     const { direction: next, top, left, over, maxHeight } = computePlacement(
       triggerRect,
       popW,
@@ -8076,15 +8081,20 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     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) {
@@ -8113,7 +8123,6 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       window.removeEventListener("scroll", onScroll, true);
     };
   }, [calculatePosition, enabled]);
-  return { direction };
 };
 var useAutoPosition_default = useAutoPosition;
 
@@ -8151,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, () => {
@@ -8187,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",
@@ -10089,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);
@@ -10118,7 +10127,6 @@ var PopOver = (props) => {
           {
             className: clsx_default(
               "lib-xplat-pop-over-content",
-              position.direction,
               eventTrigger && "visible"
             ),
             ref: popRef,
@@ -10370,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) {
@@ -10463,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.12",
+  "version": "0.14.13",
   "description": "XPLAT UI Design System",
   "author": "XPLAT WOONG",
   "main": "dist/index.cjs",