@x-plat/design-system 0.14.12 → 0.14.14

package/dist/components/Select/index.js

@@ -19,26 +19,27 @@ var findScrollParent = (el) => {
   }
   return null;
 };
+var TRIGGER_GAP = 8;
 var computePlacement = (triggerRect, popW, popH, clip) => {
-  const roomBelow = clip.bottom - triggerRect.bottom;
-  const roomAbove = triggerRect.top - clip.top;
+  const roomBelow = clip.bottom - triggerRect.bottom - TRIGGER_GAP;
+  const roomAbove = triggerRect.top - clip.top - TRIGGER_GAP;
   let direction;
   let top;
   let maxHeight = null;
   if (popH <= roomBelow) {
     direction = "bottom";
-    top = triggerRect.bottom;
+    top = triggerRect.bottom + TRIGGER_GAP;
   } else if (popH <= roomAbove) {
     direction = "top";
-    top = triggerRect.top - popH;
+    top = triggerRect.top - TRIGGER_GAP - popH;
   } else {
     const room = Math.max(roomBelow, roomAbove, 0);
     if (roomBelow >= roomAbove) {
       direction = "bottom";
-      top = triggerRect.bottom;
+      top = triggerRect.bottom + TRIGGER_GAP;
     } else {
       direction = "top";
-      top = triggerRect.top - room;
+      top = triggerRect.top - TRIGGER_GAP - room;
     }
     maxHeight = room;
   }
@@ -62,15 +63,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 +89,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 +101,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 +143,6 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       window.removeEventListener("scroll", onScroll, true);
     };
   }, [calculatePosition, enabled]);
-  return { direction };
 };
 var useAutoPosition_default = useAutoPosition;
 
@@ -1362,7 +1372,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 +1465,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

@@ -55,26 +55,27 @@ var findScrollParent = (el) => {
   }
   return null;
 };
+var TRIGGER_GAP = 8;
 var computePlacement = (triggerRect, popW, popH, clip) => {
-  const roomBelow = clip.bottom - triggerRect.bottom;
-  const roomAbove = triggerRect.top - clip.top;
+  const roomBelow = clip.bottom - triggerRect.bottom - TRIGGER_GAP;
+  const roomAbove = triggerRect.top - clip.top - TRIGGER_GAP;
   let direction;
   let top;
   let maxHeight = null;
   if (popH <= roomBelow) {
     direction = "bottom";
-    top = triggerRect.bottom;
+    top = triggerRect.bottom + TRIGGER_GAP;
   } else if (popH <= roomAbove) {
     direction = "top";
-    top = triggerRect.top - popH;
+    top = triggerRect.top - TRIGGER_GAP - popH;
   } else {
     const room = Math.max(roomBelow, roomAbove, 0);
     if (roomBelow >= roomAbove) {
       direction = "bottom";
-      top = triggerRect.bottom;
+      top = triggerRect.bottom + TRIGGER_GAP;
     } else {
       direction = "top";
-      top = triggerRect.top - room;
+      top = triggerRect.top - TRIGGER_GAP - room;
     }
     maxHeight = room;
   }
@@ -98,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();
@@ -121,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,
@@ -131,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) {
@@ -168,7 +179,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

@@ -19,26 +19,27 @@ var findScrollParent = (el) => {
   }
   return null;
 };
+var TRIGGER_GAP = 8;
 var computePlacement = (triggerRect, popW, popH, clip) => {
-  const roomBelow = clip.bottom - triggerRect.bottom;
-  const roomAbove = triggerRect.top - clip.top;
+  const roomBelow = clip.bottom - triggerRect.bottom - TRIGGER_GAP;
+  const roomAbove = triggerRect.top - clip.top - TRIGGER_GAP;
   let direction;
   let top;
   let maxHeight = null;
   if (popH <= roomBelow) {
     direction = "bottom";
-    top = triggerRect.bottom;
+    top = triggerRect.bottom + TRIGGER_GAP;
   } else if (popH <= roomAbove) {
     direction = "top";
-    top = triggerRect.top - popH;
+    top = triggerRect.top - TRIGGER_GAP - popH;
   } else {
     const room = Math.max(roomBelow, roomAbove, 0);
     if (roomBelow >= roomAbove) {
       direction = "bottom";
-      top = triggerRect.bottom;
+      top = triggerRect.bottom + TRIGGER_GAP;
     } else {
       direction = "top";
-      top = triggerRect.top - room;
+      top = triggerRect.top - TRIGGER_GAP - room;
     }
     maxHeight = room;
   }
@@ -62,15 +63,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 +89,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 +101,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 +143,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

@@ -3999,26 +3999,27 @@ var findScrollParent = (el) => {
   }
   return null;
 };
+var TRIGGER_GAP = 8;
 var computePlacement = (triggerRect, popW, popH, clip) => {
-  const roomBelow = clip.bottom - triggerRect.bottom;
-  const roomAbove = triggerRect.top - clip.top;
+  const roomBelow = clip.bottom - triggerRect.bottom - TRIGGER_GAP;
+  const roomAbove = triggerRect.top - clip.top - TRIGGER_GAP;
   let direction;
   let top;
   let maxHeight = null;
   if (popH <= roomBelow) {
     direction = "bottom";
-    top = triggerRect.bottom;
+    top = triggerRect.bottom + TRIGGER_GAP;
   } else if (popH <= roomAbove) {
     direction = "top";
-    top = triggerRect.top - popH;
+    top = triggerRect.top - TRIGGER_GAP - popH;
   } else {
     const room = Math.max(roomBelow, roomAbove, 0);
     if (roomBelow >= roomAbove) {
       direction = "bottom";
-      top = triggerRect.bottom;
+      top = triggerRect.bottom + TRIGGER_GAP;
     } else {
       direction = "top";
-      top = triggerRect.top - room;
+      top = triggerRect.top - TRIGGER_GAP - room;
     }
     maxHeight = room;
   }
@@ -4042,15 +4043,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 +4069,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 +4081,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 +4123,6 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       window.removeEventListener("scroll", onScroll, true);
     };
   }, [calculatePosition, enabled]);
-  return { direction };
 };
 var useAutoPosition_default = useAutoPosition;
 
@@ -4150,7 +4160,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 +4196,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 +6098,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 +6127,6 @@ var PopOver = (props) => {
           {
             className: clsx_default(
               "lib-xplat-pop-over-content",
-              position.direction,
               eventTrigger && "visible"
             ),
             ref: popRef,
@@ -6369,7 +6378,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 +6471,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.css

@@ -3282,11 +3282,11 @@
   box-shadow: var(--semantic-shadow-md);
   padding: var(--spacing-space-1) 0;
   opacity: 0;
-  transform: translateY(-4px);
+  transform: translateY(4px);
   transition: opacity 0.15s ease, transform 0.15s ease;
 }
 .lib-xplat-dropdown-menu.bottom {
-  transform: translateY(4px);
+  transform: translateY(-4px);
 }
 .lib-xplat-dropdown-menu.visible {
   opacity: 1;
@@ -4513,7 +4513,7 @@
   transition: transform 0.2s ease, opacity 0.2s ease;
 }
 .lib-xplat-select-content.bottom {
-  transform: translateY(8px);
+  transform: translateY(-4px);
 }
 .lib-xplat-select-content.bottom.visible {
   opacity: 1;
@@ -4521,12 +4521,12 @@
 }
 .lib-xplat-select-content.bottom.exit {
   opacity: 0;
-  transform: translateY(8px);
+  transform: translateY(-4px);
 }
 .lib-xplat-select-content {
 }
 .lib-xplat-select-content.top {
-  transform: translateY(-8px);
+  transform: translateY(4px);
 }
 .lib-xplat-select-content.top.visible {
   opacity: 1;
@@ -4534,7 +4534,7 @@
 }
 .lib-xplat-select-content.top.exit {
   opacity: 0;
-  transform: translateY(-8px);
+  transform: translateY(4px);
 }
 .lib-xplat-select-content.sm .select-item {
   padding: var(--spacing-space-2) var(--spacing-space-2);

package/dist/components/index.js

@@ -3897,26 +3897,27 @@ var findScrollParent = (el) => {
   }
   return null;
 };
+var TRIGGER_GAP = 8;
 var computePlacement = (triggerRect, popW, popH, clip) => {
-  const roomBelow = clip.bottom - triggerRect.bottom;
-  const roomAbove = triggerRect.top - clip.top;
+  const roomBelow = clip.bottom - triggerRect.bottom - TRIGGER_GAP;
+  const roomAbove = triggerRect.top - clip.top - TRIGGER_GAP;
   let direction;
   let top;
   let maxHeight = null;
   if (popH <= roomBelow) {
     direction = "bottom";
-    top = triggerRect.bottom;
+    top = triggerRect.bottom + TRIGGER_GAP;
   } else if (popH <= roomAbove) {
     direction = "top";
-    top = triggerRect.top - popH;
+    top = triggerRect.top - TRIGGER_GAP - popH;
   } else {
     const room = Math.max(roomBelow, roomAbove, 0);
     if (roomBelow >= roomAbove) {
       direction = "bottom";
-      top = triggerRect.bottom;
+      top = triggerRect.bottom + TRIGGER_GAP;
     } else {
       direction = "top";
-      top = triggerRect.top - room;
+      top = triggerRect.top - TRIGGER_GAP - room;
     }
     maxHeight = room;
   }
@@ -3940,15 +3941,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 +3967,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 +3979,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 +4021,6 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       window.removeEventListener("scroll", onScroll, true);
     };
   }, [calculatePosition, enabled]);
-  return { direction };
 };
 var useAutoPosition_default = useAutoPosition;
 
@@ -4048,7 +4058,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 +4094,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 +5996,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 +6025,6 @@ var PopOver = (props) => {
           {
             className: clsx_default(
               "lib-xplat-pop-over-content",
-              position.direction,
               eventTrigger && "visible"
             ),
             ref: popRef,
@@ -6267,7 +6276,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 +6369,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",