@x-plat/design-system 0.11.0 → 0.13.0

package/dist/components/Select/index.cjs

@@ -52,8 +52,10 @@ var import_react = __toESM(require("react"), 1);
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [position, setPosition] = import_react.default.useState({
     position: {},
-    direction: "bottom"
+    direction: "bottom",
+    repositioning: false
   });
+  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,11 +80,16 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     if (left < 8) left = 8;
     setPosition({
       position: { top, left },
-      direction
+      direction,
+      repositioning: placedRef.current
     });
+    placedRef.current = true;
   }, [triggerRef, popRef]);
   import_react.default.useLayoutEffect(() => {
-    if (!enabled) return;
+    if (!enabled) {
+      placedRef.current = false;
+      return;
+    }
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
@@ -97,11 +104,17 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   }, [calculatePosition, enabled, popRef]);
   import_react.default.useEffect(() => {
     if (!enabled) return;
-    window.addEventListener("resize", calculatePosition);
-    window.addEventListener("scroll", calculatePosition, true);
+    let raf = 0;
+    const onScrollOrResize = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(calculatePosition);
+    };
+    window.addEventListener("resize", onScrollOrResize, { passive: true });
+    window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
     return () => {
-      window.removeEventListener("resize", calculatePosition);
-      window.removeEventListener("scroll", calculatePosition, true);
+      cancelAnimationFrame(raf);
+      window.removeEventListener("resize", onScrollOrResize);
+      window.removeEventListener("scroll", onScrollOrResize, true);
     };
   }, [calculatePosition, enabled]);
   return position;
@@ -1187,11 +1200,11 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, validations, children } = props;
   const hasMessages = !!validations && validations.length > 0;
   if (!label && !hasMessages) return /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(import_jsx_runtime295.Fragment, { children });
   return /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("div", { className: "lib-xplat-field", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("label", { className: "lib-xplat-field-label", htmlFor, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),
@@ -1409,7 +1422,7 @@ var SelectRoot = (props) => {
         mounted && /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime297.jsxs)(
           "div",
           {
-            className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass),
+            className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass, position.repositioning && "repositioning"),
             ref: contentRef,
             style: { ...position.position, width: triggerRef.current?.offsetWidth },
             role: "listbox",

package/dist/components/Select/index.css

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

package/dist/components/Select/index.d.cts

@@ -34,10 +34,8 @@ interface SelectProps {
     children: SelectItemElement | SelectItemElement[];
     /** 비활성화 상태 */
     disabled?: boolean;
-    /** 에러 상태 */
     /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
     validations?: Validation[];
-    /** 메시지 없이 테두리만 붉게 한다. validations 와 함께 쓰면 둘 중 하나만 참이어도 적용된다 */
     /** 컨트롤 위에 붙는 라벨. 클릭하면 컨트롤에 포커스가 간다 */
     label?: React.ReactNode;
     /** 라벨 뒤에 필수 표시(*)를 붙인다 */
@@ -49,6 +47,7 @@ interface SelectProps {
     searchable?: boolean;
     /** 검색칸 안내 문구 */
     searchPlaceholder?: string;
+    /** 메시지 없이 테두리만 붉게 한다. validations 와 함께 쓰면 둘 중 하나만 참이어도 적용된다 */
     error?: boolean;
     /** 사이즈 */
     size?: SelectSize;

package/dist/components/Select/index.d.ts

@@ -34,10 +34,8 @@ interface SelectProps {
     children: SelectItemElement | SelectItemElement[];
     /** 비활성화 상태 */
     disabled?: boolean;
-    /** 에러 상태 */
     /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
     validations?: Validation[];
-    /** 메시지 없이 테두리만 붉게 한다. validations 와 함께 쓰면 둘 중 하나만 참이어도 적용된다 */
     /** 컨트롤 위에 붙는 라벨. 클릭하면 컨트롤에 포커스가 간다 */
     label?: React.ReactNode;
     /** 라벨 뒤에 필수 표시(*)를 붙인다 */
@@ -49,6 +47,7 @@ interface SelectProps {
     searchable?: boolean;
     /** 검색칸 안내 문구 */
     searchPlaceholder?: string;
+    /** 메시지 없이 테두리만 붉게 한다. validations 와 함께 쓰면 둘 중 하나만 참이어도 적용된다 */
     error?: boolean;
     /** 사이즈 */
     size?: SelectSize;

package/dist/components/Select/index.js

@@ -15,8 +15,10 @@ import React from "react";
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [position, setPosition] = React.useState({
     position: {},
-    direction: "bottom"
+    direction: "bottom",
+    repositioning: false
   });
+  const placedRef = React.useRef(false);
   const calculatePosition = React.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
@@ -41,11 +43,16 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     if (left < 8) left = 8;
     setPosition({
       position: { top, left },
-      direction
+      direction,
+      repositioning: placedRef.current
     });
+    placedRef.current = true;
   }, [triggerRef, popRef]);
   React.useLayoutEffect(() => {
-    if (!enabled) return;
+    if (!enabled) {
+      placedRef.current = false;
+      return;
+    }
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
@@ -60,11 +67,17 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   }, [calculatePosition, enabled, popRef]);
   React.useEffect(() => {
     if (!enabled) return;
-    window.addEventListener("resize", calculatePosition);
-    window.addEventListener("scroll", calculatePosition, true);
+    let raf = 0;
+    const onScrollOrResize = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(calculatePosition);
+    };
+    window.addEventListener("resize", onScrollOrResize, { passive: true });
+    window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
     return () => {
-      window.removeEventListener("resize", calculatePosition);
-      window.removeEventListener("scroll", calculatePosition, true);
+      cancelAnimationFrame(raf);
+      window.removeEventListener("resize", onScrollOrResize);
+      window.removeEventListener("scroll", onScrollOrResize, true);
     };
   }, [calculatePosition, enabled]);
   return position;
@@ -1150,11 +1163,11 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, validations, children } = props;
   const hasMessages = !!validations && validations.length > 0;
   if (!label && !hasMessages) return /* @__PURE__ */ jsx295(Fragment, { children });
   return /* @__PURE__ */ jsxs189("div", { className: "lib-xplat-field", children: [
-    label && /* @__PURE__ */ jsxs189("label", { className: "lib-xplat-field-label", htmlFor, children: [
+    label && /* @__PURE__ */ jsxs189("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ jsx295("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),
@@ -1372,7 +1385,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, position.direction, stateClass, position.repositioning && "repositioning"),
             ref: contentRef,
             style: { ...position.position, width: triggerRef.current?.offsetWidth },
             role: "listbox",

package/dist/components/Switch/index.cjs

@@ -179,11 +179,11 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, validations, children } = props;
   const hasMessages = !!validations && validations.length > 0;
   if (!label && !hasMessages) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children });
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lib-xplat-field", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "lib-xplat-field-label", htmlFor, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),

package/dist/components/Switch/index.js

@@ -143,11 +143,11 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, validations, children } = props;
   const hasMessages = !!validations && validations.length > 0;
   if (!label && !hasMessages) return /* @__PURE__ */ jsx4(Fragment, { children });
   return /* @__PURE__ */ jsxs3("div", { className: "lib-xplat-field", children: [
-    label && /* @__PURE__ */ jsxs3("label", { className: "lib-xplat-field-label", htmlFor, children: [
+    label && /* @__PURE__ */ jsxs3("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ jsx4("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),

package/dist/components/TextArea/index.cjs

@@ -176,11 +176,11 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, validations, children } = props;
   const hasMessages = !!validations && validations.length > 0;
   if (!label && !hasMessages) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children });
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lib-xplat-field", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "lib-xplat-field-label", htmlFor, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),

package/dist/components/TextArea/index.js

@@ -140,11 +140,11 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, validations, children } = props;
   const hasMessages = !!validations && validations.length > 0;
   if (!label && !hasMessages) return /* @__PURE__ */ jsx4(Fragment, { children });
   return /* @__PURE__ */ jsxs3("div", { className: "lib-xplat-field", children: [
-    label && /* @__PURE__ */ jsxs3("label", { className: "lib-xplat-field-label", htmlFor, children: [
+    label && /* @__PURE__ */ jsxs3("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ jsx4("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),

package/dist/components/TimePicker/index.cjs

@@ -51,8 +51,10 @@ var import_react = __toESM(require("react"), 1);
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [position, setPosition] = import_react.default.useState({
     position: {},
-    direction: "bottom"
+    direction: "bottom",
+    repositioning: false
   });
+  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,11 +79,16 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     if (left < 8) left = 8;
     setPosition({
       position: { top, left },
-      direction
+      direction,
+      repositioning: placedRef.current
     });
+    placedRef.current = true;
   }, [triggerRef, popRef]);
   import_react.default.useLayoutEffect(() => {
-    if (!enabled) return;
+    if (!enabled) {
+      placedRef.current = false;
+      return;
+    }
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
@@ -96,11 +103,17 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   }, [calculatePosition, enabled, popRef]);
   import_react.default.useEffect(() => {
     if (!enabled) return;
-    window.addEventListener("resize", calculatePosition);
-    window.addEventListener("scroll", calculatePosition, true);
+    let raf = 0;
+    const onScrollOrResize = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(calculatePosition);
+    };
+    window.addEventListener("resize", onScrollOrResize, { passive: true });
+    window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
     return () => {
-      window.removeEventListener("resize", calculatePosition);
-      window.removeEventListener("scroll", calculatePosition, true);
+      cancelAnimationFrame(raf);
+      window.removeEventListener("resize", onScrollOrResize);
+      window.removeEventListener("scroll", onScrollOrResize, true);
     };
   }, [calculatePosition, enabled]);
   return position;
@@ -295,11 +308,11 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, validations, children } = props;
   const hasMessages = !!validations && validations.length > 0;
   if (!label && !hasMessages) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children });
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lib-xplat-field", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "lib-xplat-field-label", htmlFor, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),
@@ -414,7 +427,7 @@ var TimePicker = (props) => {
       "div",
       {
         ref: contentRef,
-        className: clsx_default("lib-xplat-time-picker-content", size, visible ? "enter" : "exit"),
+        className: clsx_default("lib-xplat-time-picker-content", size, visible ? "enter" : "exit", position.repositioning && "repositioning"),
         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,3 +170,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;
+}

package/dist/components/TimePicker/index.js

@@ -15,8 +15,10 @@ import React from "react";
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [position, setPosition] = React.useState({
     position: {},
-    direction: "bottom"
+    direction: "bottom",
+    repositioning: false
   });
+  const placedRef = React.useRef(false);
   const calculatePosition = React.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
@@ -41,11 +43,16 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     if (left < 8) left = 8;
     setPosition({
       position: { top, left },
-      direction
+      direction,
+      repositioning: placedRef.current
     });
+    placedRef.current = true;
   }, [triggerRef, popRef]);
   React.useLayoutEffect(() => {
-    if (!enabled) return;
+    if (!enabled) {
+      placedRef.current = false;
+      return;
+    }
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
@@ -60,11 +67,17 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   }, [calculatePosition, enabled, popRef]);
   React.useEffect(() => {
     if (!enabled) return;
-    window.addEventListener("resize", calculatePosition);
-    window.addEventListener("scroll", calculatePosition, true);
+    let raf = 0;
+    const onScrollOrResize = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(calculatePosition);
+    };
+    window.addEventListener("resize", onScrollOrResize, { passive: true });
+    window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
     return () => {
-      window.removeEventListener("resize", calculatePosition);
-      window.removeEventListener("scroll", calculatePosition, true);
+      cancelAnimationFrame(raf);
+      window.removeEventListener("resize", onScrollOrResize);
+      window.removeEventListener("scroll", onScrollOrResize, true);
     };
   }, [calculatePosition, enabled]);
   return position;
@@ -259,11 +272,11 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, validations, children } = props;
   const hasMessages = !!validations && validations.length > 0;
   if (!label && !hasMessages) return /* @__PURE__ */ jsx4(Fragment, { children });
   return /* @__PURE__ */ jsxs3("div", { className: "lib-xplat-field", children: [
-    label && /* @__PURE__ */ jsxs3("label", { className: "lib-xplat-field-label", htmlFor, children: [
+    label && /* @__PURE__ */ jsxs3("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ jsx4("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),
@@ -378,7 +391,7 @@ var TimePicker = (props) => {
       "div",
       {
         ref: contentRef,
-        className: clsx_default("lib-xplat-time-picker-content", size, visible ? "enter" : "exit"),
+        className: clsx_default("lib-xplat-time-picker-content", size, visible ? "enter" : "exit", position.repositioning && "repositioning"),
         style: { ...position.position, width: triggerRef.current?.offsetWidth },
         role: "listbox",
         children: options.map((t) => /* @__PURE__ */ jsx5(