@x-plat/design-system 0.14.0 → 0.14.2

package/dist/components/Dropdown/index.cjs

@@ -51,10 +51,8 @@ var import_react = __toESM(require("react"), 1);
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [position, setPosition] = import_react.default.useState({
     position: {},
-    direction: "bottom",
-    repositioning: false
+    direction: "bottom"
   });
-  const placedRef = import_react.default.useRef(false);
   const calculatePosition = import_react.default.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
@@ -77,18 +75,10 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left = triggerRect.right - popW;
     }
     if (left < 8) left = 8;
-    setPosition({
-      position: { top, left },
-      direction,
-      repositioning: placedRef.current
-    });
-    placedRef.current = true;
+    setPosition({ position: { top, left }, direction });
   }, [triggerRef, popRef]);
   import_react.default.useLayoutEffect(() => {
-    if (!enabled) {
-      placedRef.current = false;
-      return;
-    }
+    if (!enabled) return;
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
@@ -194,7 +184,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 { position, direction, repositioning } = useAutoPosition_default(triggerRef, menuRef, mounted);
+  const { position, direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
   useEscapeKey(isOpen, () => {
     setIsOpen(false);
@@ -229,7 +219,7 @@ var Dropdown = (props) => {
       "div",
       {
         ref: menuRef,
-        className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }, repositioning && "repositioning"),
+        className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }),
         style: { top: position.top, left: position.left },
         role: "menu",
         children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/components/Dropdown/index.css

@@ -57,6 +57,3 @@
   color: var(--semantic-text-disabled);
   cursor: not-allowed;
 }
-.lib-xplat-dropdown-menu.repositioning {
-  transition: none;
-}

package/dist/components/Dropdown/index.js

@@ -15,10 +15,8 @@ import React from "react";
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [position, setPosition] = React.useState({
     position: {},
-    direction: "bottom",
-    repositioning: false
+    direction: "bottom"
   });
-  const placedRef = React.useRef(false);
   const calculatePosition = React.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
@@ -41,18 +39,10 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left = triggerRect.right - popW;
     }
     if (left < 8) left = 8;
-    setPosition({
-      position: { top, left },
-      direction,
-      repositioning: placedRef.current
-    });
-    placedRef.current = true;
+    setPosition({ position: { top, left }, direction });
   }, [triggerRef, popRef]);
   React.useLayoutEffect(() => {
-    if (!enabled) {
-      placedRef.current = false;
-      return;
-    }
+    if (!enabled) return;
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
@@ -158,7 +148,7 @@ var Dropdown = (props) => {
   const [visible, setVisible] = React4.useState(false);
   const triggerRef = React4.useRef(null);
   const menuRef = React4.useRef(null);
-  const { position, direction, repositioning } = useAutoPosition_default(triggerRef, menuRef, mounted);
+  const { position, direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
   useEscapeKey(isOpen, () => {
     setIsOpen(false);
@@ -193,7 +183,7 @@ var Dropdown = (props) => {
       "div",
       {
         ref: menuRef,
-        className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }, repositioning && "repositioning"),
+        className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }),
         style: { top: position.top, left: position.left },
         role: "menu",
         children: items.map((item) => /* @__PURE__ */ jsx(

package/dist/components/PopOver/index.cjs

@@ -51,10 +51,8 @@ var import_react = __toESM(require("react"), 1);
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [position, setPosition] = import_react.default.useState({
     position: {},
-    direction: "bottom",
-    repositioning: false
+    direction: "bottom"
   });
-  const placedRef = import_react.default.useRef(false);
   const calculatePosition = import_react.default.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
@@ -77,18 +75,10 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left = triggerRect.right - popW;
     }
     if (left < 8) left = 8;
-    setPosition({
-      position: { top, left },
-      direction,
-      repositioning: placedRef.current
-    });
-    placedRef.current = true;
+    setPosition({ position: { top, left }, direction });
   }, [triggerRef, popRef]);
   import_react.default.useLayoutEffect(() => {
-    if (!enabled) {
-      placedRef.current = false;
-      return;
-    }
+    if (!enabled) return;
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
@@ -228,7 +218,6 @@ var PopOver = (props) => {
             className: clsx_default(
               "lib-xplat-pop-over-content",
               position.direction,
-              position.repositioning && "repositioning",
               eventTrigger && "visible"
             ),
             ref: popRef,

package/dist/components/PopOver/index.css

@@ -27,6 +27,3 @@
   opacity: 1;
   transform: scale(1);
 }
-.lib-xplat-pop-over-content.repositioning {
-  transition: none;
-}

package/dist/components/PopOver/index.js

@@ -15,10 +15,8 @@ import React from "react";
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [position, setPosition] = React.useState({
     position: {},
-    direction: "bottom",
-    repositioning: false
+    direction: "bottom"
   });
-  const placedRef = React.useRef(false);
   const calculatePosition = React.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
@@ -41,18 +39,10 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left = triggerRect.right - popW;
     }
     if (left < 8) left = 8;
-    setPosition({
-      position: { top, left },
-      direction,
-      repositioning: placedRef.current
-    });
-    placedRef.current = true;
+    setPosition({ position: { top, left }, direction });
   }, [triggerRef, popRef]);
   React.useLayoutEffect(() => {
-    if (!enabled) {
-      placedRef.current = false;
-      return;
-    }
+    if (!enabled) return;
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
@@ -192,7 +182,6 @@ var PopOver = (props) => {
             className: clsx_default(
               "lib-xplat-pop-over-content",
               position.direction,
-              position.repositioning && "repositioning",
               eventTrigger && "visible"
             ),
             ref: popRef,

package/dist/components/Select/index.cjs

@@ -52,10 +52,8 @@ var import_react = __toESM(require("react"), 1);
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [position, setPosition] = import_react.default.useState({
     position: {},
-    direction: "bottom",
-    repositioning: false
+    direction: "bottom"
   });
-  const placedRef = import_react.default.useRef(false);
   const calculatePosition = import_react.default.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
@@ -78,18 +76,10 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left = triggerRect.right - popW;
     }
     if (left < 8) left = 8;
-    setPosition({
-      position: { top, left },
-      direction,
-      repositioning: placedRef.current
-    });
-    placedRef.current = true;
+    setPosition({ position: { top, left }, direction });
   }, [triggerRef, popRef]);
   import_react.default.useLayoutEffect(() => {
-    if (!enabled) {
-      placedRef.current = false;
-      return;
-    }
+    if (!enabled) return;
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
@@ -1422,7 +1412,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, position.repositioning && "repositioning"),
+            className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass),
             ref: contentRef,
             style: { ...position.position, width: triggerRef.current?.offsetWidth },
             role: "listbox",

package/dist/components/Select/index.css

@@ -273,6 +273,3 @@
   cursor: not-allowed;
   color: var(--semantic-text-disabled);
 }
-.lib-xplat-select-content.repositioning {
-  transition: none;
-}

package/dist/components/Select/index.js

@@ -15,10 +15,8 @@ import React from "react";
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [position, setPosition] = React.useState({
     position: {},
-    direction: "bottom",
-    repositioning: false
+    direction: "bottom"
   });
-  const placedRef = React.useRef(false);
   const calculatePosition = React.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
@@ -41,18 +39,10 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left = triggerRect.right - popW;
     }
     if (left < 8) left = 8;
-    setPosition({
-      position: { top, left },
-      direction,
-      repositioning: placedRef.current
-    });
-    placedRef.current = true;
+    setPosition({ position: { top, left }, direction });
   }, [triggerRef, popRef]);
   React.useLayoutEffect(() => {
-    if (!enabled) {
-      placedRef.current = false;
-      return;
-    }
+    if (!enabled) return;
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
@@ -1385,7 +1375,7 @@ var SelectRoot = (props) => {
         mounted && /* @__PURE__ */ jsx297(Portal_default, { children: /* @__PURE__ */ jsxs190(
           "div",
           {
-            className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass, position.repositioning && "repositioning"),
+            className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass),
             ref: contentRef,
             style: { ...position.position, width: triggerRef.current?.offsetWidth },
             role: "listbox",

package/dist/components/TimePicker/index.cjs

@@ -51,10 +51,8 @@ var import_react = __toESM(require("react"), 1);
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [position, setPosition] = import_react.default.useState({
     position: {},
-    direction: "bottom",
-    repositioning: false
+    direction: "bottom"
   });
-  const placedRef = import_react.default.useRef(false);
   const calculatePosition = import_react.default.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
@@ -77,18 +75,10 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left = triggerRect.right - popW;
     }
     if (left < 8) left = 8;
-    setPosition({
-      position: { top, left },
-      direction,
-      repositioning: placedRef.current
-    });
-    placedRef.current = true;
+    setPosition({ position: { top, left }, direction });
   }, [triggerRef, popRef]);
   import_react.default.useLayoutEffect(() => {
-    if (!enabled) {
-      placedRef.current = false;
-      return;
-    }
+    if (!enabled) return;
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
@@ -427,7 +417,7 @@ var TimePicker = (props) => {
       "div",
       {
         ref: contentRef,
-        className: clsx_default("lib-xplat-time-picker-content", size, visible ? "enter" : "exit", position.repositioning && "repositioning"),
+        className: clsx_default("lib-xplat-time-picker-content", size, visible ? "enter" : "exit"),
         style: { ...position.position, width: triggerRef.current?.offsetWidth },
         role: "listbox",
         children: options.map((t) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(

package/dist/components/TimePicker/index.css

@@ -170,6 +170,3 @@
   font-weight: var(--semantic-typo-label-1-m-weight);
   letter-spacing: var(--semantic-typo-label-1-m-ls);
 }
-.lib-xplat-time-picker-content.repositioning {
-  transition: none;
-}

package/dist/components/TimePicker/index.js

@@ -15,10 +15,8 @@ import React from "react";
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [position, setPosition] = React.useState({
     position: {},
-    direction: "bottom",
-    repositioning: false
+    direction: "bottom"
   });
-  const placedRef = React.useRef(false);
   const calculatePosition = React.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
@@ -41,18 +39,10 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left = triggerRect.right - popW;
     }
     if (left < 8) left = 8;
-    setPosition({
-      position: { top, left },
-      direction,
-      repositioning: placedRef.current
-    });
-    placedRef.current = true;
+    setPosition({ position: { top, left }, direction });
   }, [triggerRef, popRef]);
   React.useLayoutEffect(() => {
-    if (!enabled) {
-      placedRef.current = false;
-      return;
-    }
+    if (!enabled) return;
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
@@ -391,7 +381,7 @@ var TimePicker = (props) => {
       "div",
       {
         ref: contentRef,
-        className: clsx_default("lib-xplat-time-picker-content", size, visible ? "enter" : "exit", position.repositioning && "repositioning"),
+        className: clsx_default("lib-xplat-time-picker-content", size, visible ? "enter" : "exit"),
         style: { ...position.position, width: triggerRef.current?.offsetWidth },
         role: "listbox",
         children: options.map((t) => /* @__PURE__ */ jsx5(

package/dist/components/index.cjs

@@ -3978,10 +3978,8 @@ var import_react19 = __toESM(require("react"), 1);
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [position, setPosition] = import_react19.default.useState({
     position: {},
-    direction: "bottom",
-    repositioning: false
+    direction: "bottom"
   });
-  const placedRef = import_react19.default.useRef(false);
   const calculatePosition = import_react19.default.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
@@ -4004,18 +4002,10 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left = triggerRect.right - popW;
     }
     if (left < 8) left = 8;
-    setPosition({
-      position: { top, left },
-      direction,
-      repositioning: placedRef.current
-    });
-    placedRef.current = true;
+    setPosition({ position: { top, left }, direction });
   }, [triggerRef, popRef]);
   import_react19.default.useLayoutEffect(() => {
-    if (!enabled) {
-      placedRef.current = false;
-      return;
-    }
+    if (!enabled) return;
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
@@ -4081,7 +4071,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 { position, direction, repositioning } = useAutoPosition_default(triggerRef, menuRef, mounted);
+  const { position, direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
   useEscapeKey(isOpen, () => {
     setIsOpen(false);
@@ -4116,7 +4106,7 @@ var Dropdown = (props) => {
       "div",
       {
         ref: menuRef,
-        className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }, repositioning && "repositioning"),
+        className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }),
         style: { top: position.top, left: position.left },
         role: "menu",
         children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
@@ -6048,7 +6038,6 @@ var PopOver = (props) => {
             className: clsx_default(
               "lib-xplat-pop-over-content",
               position.direction,
-              position.repositioning && "repositioning",
               eventTrigger && "visible"
             ),
             ref: popRef,
@@ -6395,7 +6384,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, position.repositioning && "repositioning"),
+            className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass),
             ref: contentRef,
             style: { ...position.position, width: triggerRef.current?.offsetWidth },
             role: "listbox",
@@ -7288,7 +7277,7 @@ var TimePicker = (props) => {
       "div",
       {
         ref: contentRef,
-        className: clsx_default("lib-xplat-time-picker-content", size, visible ? "enter" : "exit", position.repositioning && "repositioning"),
+        className: clsx_default("lib-xplat-time-picker-content", size, visible ? "enter" : "exit"),
         style: { ...position.position, width: triggerRef.current?.offsetWidth },
         role: "listbox",
         children: options.map((t) => /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(

package/dist/components/index.css

@@ -3322,9 +3322,6 @@
   color: var(--semantic-text-disabled);
   cursor: not-allowed;
 }
-.lib-xplat-dropdown-menu.repositioning {
-  transition: none;
-}
 
 /* src/components/Editor/editor.scss */
 .lib-xplat-editor {
@@ -4183,9 +4180,6 @@
   opacity: 1;
   transform: scale(1);
 }
-.lib-xplat-pop-over-content.repositioning {
-  transition: none;
-}
 
 /* src/components/Progress/progress.scss */
 .lib-xplat-progress {
@@ -4580,9 +4574,6 @@
   cursor: not-allowed;
   color: var(--semantic-text-disabled);
 }
-.lib-xplat-select-content.repositioning {
-  transition: none;
-}
 
 /* src/components/Skeleton/skeleton.scss */
 .lib-xplat-skeleton {
@@ -5683,9 +5674,6 @@
   font-weight: var(--semantic-typo-label-1-m-weight);
   letter-spacing: var(--semantic-typo-label-1-m-ls);
 }
-.lib-xplat-time-picker-content.repositioning {
-  transition: none;
-}
 
 /* src/components/Toast/toast.scss */
 .lib-xplat-toast-container {

package/dist/components/index.js

@@ -3876,10 +3876,8 @@ import React19 from "react";
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [position, setPosition] = React19.useState({
     position: {},
-    direction: "bottom",
-    repositioning: false
+    direction: "bottom"
   });
-  const placedRef = React19.useRef(false);
   const calculatePosition = React19.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
@@ -3902,18 +3900,10 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left = triggerRect.right - popW;
     }
     if (left < 8) left = 8;
-    setPosition({
-      position: { top, left },
-      direction,
-      repositioning: placedRef.current
-    });
-    placedRef.current = true;
+    setPosition({ position: { top, left }, direction });
   }, [triggerRef, popRef]);
   React19.useLayoutEffect(() => {
-    if (!enabled) {
-      placedRef.current = false;
-      return;
-    }
+    if (!enabled) return;
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
@@ -3979,7 +3969,7 @@ var Dropdown = (props) => {
   const [visible, setVisible] = React21.useState(false);
   const triggerRef = React21.useRef(null);
   const menuRef = React21.useRef(null);
-  const { position, direction, repositioning } = useAutoPosition_default(triggerRef, menuRef, mounted);
+  const { position, direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
   useEscapeKey(isOpen, () => {
     setIsOpen(false);
@@ -4014,7 +4004,7 @@ var Dropdown = (props) => {
       "div",
       {
         ref: menuRef,
-        className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }, repositioning && "repositioning"),
+        className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }),
         style: { top: position.top, left: position.left },
         role: "menu",
         children: items.map((item) => /* @__PURE__ */ jsx322(
@@ -5946,7 +5936,6 @@ var PopOver = (props) => {
             className: clsx_default(
               "lib-xplat-pop-over-content",
               position.direction,
-              position.repositioning && "repositioning",
               eventTrigger && "visible"
             ),
             ref: popRef,
@@ -6293,7 +6282,7 @@ var SelectRoot = (props) => {
         mounted && /* @__PURE__ */ jsx337(Portal_default, { children: /* @__PURE__ */ jsxs216(
           "div",
           {
-            className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass, position.repositioning && "repositioning"),
+            className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass),
             ref: contentRef,
             style: { ...position.position, width: triggerRef.current?.offsetWidth },
             role: "listbox",
@@ -7186,7 +7175,7 @@ var TimePicker = (props) => {
       "div",
       {
         ref: contentRef,
-        className: clsx_default("lib-xplat-time-picker-content", size, visible ? "enter" : "exit", position.repositioning && "repositioning"),
+        className: clsx_default("lib-xplat-time-picker-content", size, visible ? "enter" : "exit"),
         style: { ...position.position, width: triggerRef.current?.offsetWidth },
         role: "listbox",
         children: options.map((t) => /* @__PURE__ */ jsx351(

package/dist/index.cjs

@@ -8389,10 +8389,8 @@ var import_react19 = __toESM(require("react"), 1);
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [position, setPosition] = import_react19.default.useState({
     position: {},
-    direction: "bottom",
-    repositioning: false
+    direction: "bottom"
   });
-  const placedRef = import_react19.default.useRef(false);
   const calculatePosition = import_react19.default.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
@@ -8415,18 +8413,10 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left = triggerRect.right - popW;
     }
     if (left < 8) left = 8;
-    setPosition({
-      position: { top, left },
-      direction,
-      repositioning: placedRef.current
-    });
-    placedRef.current = true;
+    setPosition({ position: { top, left }, direction });
   }, [triggerRef, popRef]);
   import_react19.default.useLayoutEffect(() => {
-    if (!enabled) {
-      placedRef.current = false;
-      return;
-    }
+    if (!enabled) return;
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
@@ -8492,7 +8482,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 { position, direction, repositioning } = useAutoPosition_default(triggerRef, menuRef, mounted);
+  const { position, direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
   useEscapeKey(isOpen, () => {
     setIsOpen(false);
@@ -8527,7 +8517,7 @@ var Dropdown = (props) => {
       "div",
       {
         ref: menuRef,
-        className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }, repositioning && "repositioning"),
+        className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }),
         style: { top: position.top, left: position.left },
         role: "menu",
         children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
@@ -10459,7 +10449,6 @@ var PopOver = (props) => {
             className: clsx_default(
               "lib-xplat-pop-over-content",
               position.direction,
-              position.repositioning && "repositioning",
               eventTrigger && "visible"
             ),
             ref: popRef,
@@ -10806,7 +10795,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, position.repositioning && "repositioning"),
+            className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass),
             ref: contentRef,
             style: { ...position.position, width: triggerRef.current?.offsetWidth },
             role: "listbox",
@@ -11699,7 +11688,7 @@ var TimePicker = (props) => {
       "div",
       {
         ref: contentRef,
-        className: clsx_default("lib-xplat-time-picker-content", size, visible ? "enter" : "exit", position.repositioning && "repositioning"),
+        className: clsx_default("lib-xplat-time-picker-content", size, visible ? "enter" : "exit"),
         style: { ...position.position, width: triggerRef.current?.offsetWidth },
         role: "listbox",
         children: options.map((t) => /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(

package/dist/index.css

@@ -3322,9 +3322,6 @@
   color: var(--semantic-text-disabled);
   cursor: not-allowed;
 }
-.lib-xplat-dropdown-menu.repositioning {
-  transition: none;
-}
 
 /* src/components/Editor/editor.scss */
 .lib-xplat-editor {
@@ -4183,9 +4180,6 @@
   opacity: 1;
   transform: scale(1);
 }
-.lib-xplat-pop-over-content.repositioning {
-  transition: none;
-}
 
 /* src/components/Progress/progress.scss */
 .lib-xplat-progress {
@@ -4580,9 +4574,6 @@
   cursor: not-allowed;
   color: var(--semantic-text-disabled);
 }
-.lib-xplat-select-content.repositioning {
-  transition: none;
-}
 
 /* src/components/Skeleton/skeleton.scss */
 .lib-xplat-skeleton {
@@ -5683,9 +5674,6 @@
   font-weight: var(--semantic-typo-label-1-m-weight);
   letter-spacing: var(--semantic-typo-label-1-m-ls);
 }
-.lib-xplat-time-picker-content.repositioning {
-  transition: none;
-}
 
 /* src/components/Toast/toast.scss */
 .lib-xplat-toast-container {

package/dist/index.js

@@ -7979,10 +7979,8 @@ import React19 from "react";
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [position, setPosition] = React19.useState({
     position: {},
-    direction: "bottom",
-    repositioning: false
+    direction: "bottom"
   });
-  const placedRef = React19.useRef(false);
   const calculatePosition = React19.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
@@ -8005,18 +8003,10 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left = triggerRect.right - popW;
     }
     if (left < 8) left = 8;
-    setPosition({
-      position: { top, left },
-      direction,
-      repositioning: placedRef.current
-    });
-    placedRef.current = true;
+    setPosition({ position: { top, left }, direction });
   }, [triggerRef, popRef]);
   React19.useLayoutEffect(() => {
-    if (!enabled) {
-      placedRef.current = false;
-      return;
-    }
+    if (!enabled) return;
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
@@ -8082,7 +8072,7 @@ var Dropdown = (props) => {
   const [visible, setVisible] = React21.useState(false);
   const triggerRef = React21.useRef(null);
   const menuRef = React21.useRef(null);
-  const { position, direction, repositioning } = useAutoPosition_default(triggerRef, menuRef, mounted);
+  const { position, direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
   useEscapeKey(isOpen, () => {
     setIsOpen(false);
@@ -8117,7 +8107,7 @@ var Dropdown = (props) => {
       "div",
       {
         ref: menuRef,
-        className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }, repositioning && "repositioning"),
+        className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }),
         style: { top: position.top, left: position.left },
         role: "menu",
         children: items.map((item) => /* @__PURE__ */ jsx322(
@@ -10049,7 +10039,6 @@ var PopOver = (props) => {
             className: clsx_default(
               "lib-xplat-pop-over-content",
               position.direction,
-              position.repositioning && "repositioning",
               eventTrigger && "visible"
             ),
             ref: popRef,
@@ -10396,7 +10385,7 @@ var SelectRoot = (props) => {
         mounted && /* @__PURE__ */ jsx337(Portal_default, { children: /* @__PURE__ */ jsxs216(
           "div",
           {
-            className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass, position.repositioning && "repositioning"),
+            className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass),
             ref: contentRef,
             style: { ...position.position, width: triggerRef.current?.offsetWidth },
             role: "listbox",
@@ -11289,7 +11278,7 @@ var TimePicker = (props) => {
       "div",
       {
         ref: contentRef,
-        className: clsx_default("lib-xplat-time-picker-content", size, visible ? "enter" : "exit", position.repositioning && "repositioning"),
+        className: clsx_default("lib-xplat-time-picker-content", size, visible ? "enter" : "exit"),
         style: { ...position.position, width: triggerRef.current?.offsetWidth },
         role: "listbox",
         children: options.map((t) => /* @__PURE__ */ jsx351(

package/dist/layout/Layout/index.d.cts

@@ -1,13 +1,21 @@
 import React from 'react';
-import { Header } from '../Header/index.cjs';
 
-interface SidebarChildProps {
-    handleSwitchSideBar: () => void;
-    [key: string]: unknown;
-}
 interface LayoutProps {
-    header?: React.ReactElement<typeof Header>;
-    sideBar?: React.ReactElement<SidebarChildProps>;
+    /**
+     * 화면 위쪽 머리말. 보통 `Header` 를 넣는다.
+     *
+     * 한때 `ReactElement<typeof Header>` 로 좁혀 두었는데 그건 잘못된 표기였다 —
+     * `ReactElement<P>` 의 `P` 는 **그 엘리먼트의 props** 지 컴포넌트 타입이
+     * 아니다. `<Header />` 를 그대로 넘겨도 통과하지 않았다.
+     */
+    header?: React.ReactNode;
+    /**
+     * 왼쪽 옆띠. 보통 `SideBar` 를 넣는다.
+     *
+     * 여는·닫는 상태는 `SideBar` 가 자기 안의 컨텍스트로 들고 있다. Layout 은
+     * 아무것도 주입하지 않으므로 슬롯을 좁힐 이유가 없다.
+     */
+    sideBar?: React.ReactNode;
     children?: React.ReactNode;
 }
 declare const Layout: React.FC<LayoutProps>;

package/dist/layout/Layout/index.d.ts

@@ -1,13 +1,21 @@
 import React from 'react';
-import { Header } from '../Header/index.js';
 
-interface SidebarChildProps {
-    handleSwitchSideBar: () => void;
-    [key: string]: unknown;
-}
 interface LayoutProps {
-    header?: React.ReactElement<typeof Header>;
-    sideBar?: React.ReactElement<SidebarChildProps>;
+    /**
+     * 화면 위쪽 머리말. 보통 `Header` 를 넣는다.
+     *
+     * 한때 `ReactElement<typeof Header>` 로 좁혀 두었는데 그건 잘못된 표기였다 —
+     * `ReactElement<P>` 의 `P` 는 **그 엘리먼트의 props** 지 컴포넌트 타입이
+     * 아니다. `<Header />` 를 그대로 넘겨도 통과하지 않았다.
+     */
+    header?: React.ReactNode;
+    /**
+     * 왼쪽 옆띠. 보통 `SideBar` 를 넣는다.
+     *
+     * 여는·닫는 상태는 `SideBar` 가 자기 안의 컨텍스트로 들고 있다. Layout 은
+     * 아무것도 주입하지 않으므로 슬롯을 좁힐 이유가 없다.
+     */
+    sideBar?: React.ReactNode;
     children?: React.ReactNode;
 }
 declare const Layout: React.FC<LayoutProps>;

package/guidelines/MIGRATION.md

@@ -260,6 +260,30 @@ HTML 을 검색 색인에 넣는다면 **닫는 태그를 공백이나 줄바꿈
 직접 넘기는 구조라 라벨이 가리킬 대상이 없고, 후자는 `role="menu"` 인 액션
 메뉴라 검증할 값이 없다.
 
+## 0.12.0 ~ 0.14.0 — 오버레이 열림/닫힘 애니메이션이 죽어 있었다 (0.14.1 에서 고침)
+
+**`e80f4df` 가 넣고 `0.14.1` 이 걷어냈다. 이 구간을 쓰고 있었다면 Select ·
+Dropdown · PopOver · TimePicker 가 전부 애니메이션 없이 툭 튀어나왔다.**
+
+0.12.0 에서 "열린 오버레이가 스크롤 중 미끄러진다" 를 고치면서 원인을 둘로
+봤는데 하나가 틀렸다.
+
+- **맞았던 것** — 스크롤 이벤트마다 `setState` 가 돌아 팝업이 한 프레임씩
+  뒤따라왔다. rAF 로 묶어 고쳤고, 이쪽은 그대로 남아 있다.
+- **틀렸던 것** — "방향이 뒤집히면 열림 애니메이션이 다시 발동한다" 고 보고
+  `.repositioning { transition: none }` 을 넣었다. 그런데 자리는 `top`/`left`
+  로 옮기는데 전환은 `transform`/`opacity` 에만 걸려 있어 자리 이동은 애초에
+  전환을 타지 않고, 방향이 뒤집혀도 `.top.visible` 과 `.bottom.visible` 이
+  같은 `transform` 을 주므로 바뀌는 값이 없다.
+
+게다가 그 플래그는 첫 계산 직후 켜진 뒤 **닫힐 때까지 꺼지지 않았다.** 여는
+순간 `useLayoutEffect` → `rAF` → `ResizeObserver` 가 연달아 계산하므로 첫
+프레임 안에 `transition: none` 이 붙고, 그 뒤에 `.visible` 이 와도 전환이
+없다. 닫힘(`.exit`)도 같다.
+
+**올리기만 하면 된다. 쓰는 쪽에서 고칠 것은 없다.** `.repositioning` 클래스를
+직접 잡는 CSS 를 쓰고 있었다면 그 규칙만 지우면 된다.
+
 ---
 
 ## 실제 이관에서 걸린 것 / 안 걸린 것

package/guidelines/components/chip-tag.md

@@ -88,6 +88,11 @@ const toggle = (v: string) =>
 ))}
 ```
 
+> **곁에 깔린 `Chip` 과 같은 `size` 를 쓸 것.** 고르는 칩은 거의 항상 표시용
+> 칩 옆에 놓이는데, 양쪽 기본값이 `md` 라고 안심하고 두면 앱이 표시용 칩을
+> `sm` 으로 통일해 쓰는 경우 고르는 칩만 한 눈금 커진다. 모양을 맞춰 놔도
+> 크기가 어긋나면 똑같이 겉돈다.
+
 `Chip` 과 **같은 알약 모양·같은 크기 눈금**을 쓴다. 두 CSS 가 따로 있는 게
 아니라 `ToggleChip` 이 `.lib-xplat-chip` 을 그대로 입고 상호작용분만 얹으므로
 둘이 따로 놀 수 없다. 거르개 칩 아래에 표시용 `Chip` 이 깔리는 화면에서

package/package.json

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