@x-plat/design-system 0.14.11 → 0.14.13

package/dist/components/Select/index.js

@@ -24,6 +24,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;
@@ -31,38 +32,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] = 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();
@@ -77,7 +88,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,
@@ -85,16 +98,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]);
   React.useLayoutEffect(() => {
     if (!enabled) {
       sizeRef.current = null;
       scrollParentRef.current = null;
+      placedRef.current = false;
       return;
     }
     if (triggerRef.current) {
@@ -123,7 +142,6 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       window.removeEventListener("scroll", onScroll, true);
     };
   }, [calculatePosition, enabled]);
-  return { direction };
 };
 var useAutoPosition_default = useAutoPosition;
 
@@ -1353,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) {
@@ -1446,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

@@ -60,6 +60,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;
@@ -67,38 +68,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_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();
@@ -113,7 +124,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,
@@ -121,16 +134,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_react.default.useLayoutEffect(() => {
     if (!enabled) {
       sizeRef.current = null;
       scrollParentRef.current = null;
+      placedRef.current = false;
       return;
     }
     if (triggerRef.current) {
@@ -159,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

@@ -24,6 +24,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;
@@ -31,38 +32,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] = 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();
@@ -77,7 +88,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,
@@ -85,16 +98,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]);
   React.useLayoutEffect(() => {
     if (!enabled) {
       sizeRef.current = null;
       scrollParentRef.current = null;
+      placedRef.current = false;
       return;
     }
     if (triggerRef.current) {
@@ -123,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

@@ -4004,6 +4004,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;
@@ -4011,38 +4012,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();
@@ -4057,7 +4068,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,
@@ -4065,16 +4078,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) {
@@ -4103,7 +4122,6 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       window.removeEventListener("scroll", onScroll, true);
     };
   }, [calculatePosition, enabled]);
-  return { direction };
 };
 var useAutoPosition_default = useAutoPosition;
 
@@ -4141,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, () => {
@@ -4177,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",
@@ -6079,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);
@@ -6108,7 +6126,6 @@ var PopOver = (props) => {
           {
             className: clsx_default(
               "lib-xplat-pop-over-content",
-              position.direction,
               eventTrigger && "visible"
             ),
             ref: popRef,
@@ -6360,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) {
@@ -6453,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.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);