@x-plat/design-system 0.14.12 → 0.14.14

package/dist/index.cjs

@@ -8411,26 +8411,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;
   }
@@ -8454,15 +8455,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 +8481,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 +8493,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 +8535,6 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       window.removeEventListener("scroll", onScroll, true);
     };
   }, [calculatePosition, enabled]);
-  return { direction };
 };
 var useAutoPosition_default = useAutoPosition;
 
@@ -8562,7 +8572,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 +8608,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 +10510,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 +10539,6 @@ var PopOver = (props) => {
           {
             className: clsx_default(
               "lib-xplat-pop-over-content",
-              position.direction,
               eventTrigger && "visible"
             ),
             ref: popRef,
@@ -10781,7 +10790,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 +10883,7 @@ var SelectRoot = (props) => {
         mounted && /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime337.jsxs)(
           "div",
           {
-            className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass),
+            className: clsx_default("lib-xplat-select-content", size, stateClass),
             ref: contentRef,
             style: { width: triggerRef.current?.offsetWidth },
             role: "listbox",

package/dist/index.css

@@ -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/index.js

@@ -8000,26 +8000,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;
   }
@@ -8043,15 +8044,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 +8070,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 +8082,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 +8124,6 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       window.removeEventListener("scroll", onScroll, true);
     };
   }, [calculatePosition, enabled]);
-  return { direction };
 };
 var useAutoPosition_default = useAutoPosition;
 
@@ -8151,7 +8161,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 +8197,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 +10099,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 +10128,6 @@ var PopOver = (props) => {
           {
             className: clsx_default(
               "lib-xplat-pop-over-content",
-              position.direction,
               eventTrigger && "visible"
             ),
             ref: popRef,
@@ -10370,7 +10379,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 +10472,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.14",
   "description": "XPLAT UI Design System",
   "author": "XPLAT WOONG",
   "main": "dist/index.cjs",