motile-ui 1.3.1 → 1.5.0

package/README.md

@@ -43,6 +43,8 @@
 - 📱 **모바일 최적화** - 터치 친화적 인터랙션과 반응형 디자인
 - ♿ **접근성** - WCAG 2.1 AA 준수 컴포넌트
 - 🎯 **트리쉐이킹 지원** - 필요한 것만 import
+- 🧅 **중첩 오버레이 안전** - Sheet 위 Sheet처럼 오버레이가 겹쳐도 뒤로가기·ESC·스크롤 잠금이 한 겹씩 정확히 동작
+- ⌨️ **스크롤 시 키보드 닫기** - 모바일에서 입력에 포커스한 채 스크롤하면 소프트 키보드를 자동으로 닫음 (useAutoBlur 훅 · autoBlur prop)
 - 📖 **풍부한 문서** - Storybook을 통한 라이브 예제 제공
 
 ---
@@ -234,6 +236,8 @@ MIT © [Innopers](https://github.com/Innopers)
 - 📱 **Mobile Optimized** - Touch-friendly interactions and responsive design
 - ♿ **Accessible** - WCAG 2.1 AA compliant components
 - 🎯 **Tree-shakeable** - Import only what you need
+- 🧅 **Nesting-Safe Overlays** - Back navigation, ESC, and scroll lock peel one layer at a time when overlays stack (e.g. Sheet over Sheet)
+- ⌨️ **Dismiss Keyboard on Scroll** - On mobile, scrolling with an input focused auto-dismisses the soft keyboard (useAutoBlur hook · autoBlur prop)
 - 📖 **Well Documented** - Comprehensive docs with live examples via Storybook
 
 ---

package/dist/components/Drawer/Drawer.js

@@ -60,7 +60,9 @@ const $ = G(null), f = () => {
     enabled: D && S.clickOutside
   }), Z({
     handler: p,
-    enabled: D && S.escapeKey
+    enabled: D && S.escapeKey,
+    stacked: !0
+    // 중첩 오버레이에서 ESC는 최상단만 닫는다
   });
   const j = {
     open: x,

package/dist/components/Input/Input.d.ts

@@ -56,6 +56,12 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
      * Floating label (focus 전에는 placeholder 위치, focus/값 있을 때 위로 이동)
      */
     label?: string;
+    /**
+     * 모바일에서 이 입력에 포커스된 채 스크롤하면 포커스를 해제해 소프트 키보드를
+     * 닫습니다 (useAutoBlur 내장). 데스크톱(비터치)에는 영향이 없습니다.
+     * @default false
+     */
+    autoBlur?: boolean;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/Input/Input.js

@@ -1,78 +1,82 @@
 import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import { forwardRef as D, useId as F, useRef as G, useEffect as H } from "react";
+import { forwardRef as H, useId as J, useRef as v, useEffect as K } from "react";
+import { useAutoBlur as O } from "../../hooks/useAutoBlur.js";
 import './Input.css';/* empty css          */
-const J = D(
+const P = H(
   ({
-    id: N,
+    id: y,
     autoFocus: $ = !1,
-    autoSelect: _ = !1,
-    variant: v = "outlined",
-    isError: y,
+    autoSelect: f = !1,
+    variant: B = "outlined",
+    isError: C,
     errorMessage: r,
     onClear: m,
     leftIcon: d,
     rightIcon: p,
-    className: C,
-    value: o,
-    color: f,
-    style: B,
-    maxLength: h,
+    className: R,
+    value: l,
+    color: _,
+    style: j,
+    maxLength: u,
     label: i,
+    autoBlur: x = !1,
     placeholder: b,
     ...w
-  }, j) => {
-    const x = F().replace(/:/g, ""), n = N ?? `motile-input-${x}`, R = G(null), l = j || R, s = y ?? !!r;
-    H(() => {
-      if ($ && l.current) {
-        const A = setTimeout(() => {
-          l.current && (l.current.focus(), _ && l.current.select());
+  }, L) => {
+    const k = J().replace(/:/g, ""), n = y ?? `motile-input-${k}`, E = v(null), o = L || E, N = v(null);
+    O({ containerRef: N, enabled: x });
+    const s = C ?? !!r;
+    K(() => {
+      if ($ && o.current) {
+        const G = setTimeout(() => {
+          o.current && (o.current.focus(), f && o.current.select());
         }, 50);
-        return () => clearTimeout(A);
+        return () => clearTimeout(G);
       }
-    }, [$, _]);
-    const e = "motile-input", u = m && o, L = !!d, k = u || p, E = [
+    }, [$, f]);
+    const e = "motile-input", h = m && l, S = !!d, T = h || p, z = [
       e,
-      `${e}--${v}`,
+      `${e}--${B}`,
       s && `${e}--error`,
-      L && `${e}--with-left-icon`,
-      k && `${e}--with-right-content`,
+      S && `${e}--with-left-icon`,
+      T && `${e}--with-right-content`,
       i && `${e}--with-label`,
-      C
-    ].filter(Boolean).join(" "), S = [
+      R
+    ].filter(Boolean).join(" "), A = [
       `${e}-wrapper`,
       i && `${e}-wrapper--with-label`,
       s && `${e}-wrapper--shake`
-    ].filter(Boolean).join(" "), T = [
+    ].filter(Boolean).join(" "), I = [
       `${e}__label`,
       s && `${e}__label--error`
-    ].filter(Boolean).join(" "), z = f ? { "--motile-input-color": f } : void 0, I = {
-      ...B
-    }, g = o ? String(o).length : 0, c = h !== void 0, q = [
+    ].filter(Boolean).join(" "), g = _ ? { "--motile-input-color": _ } : void 0, q = {
+      ...j
+    }, D = l ? String(l).length : 0, c = u !== void 0, F = [
       w["aria-describedby"],
       r ? `${n}-error` : void 0,
       c ? `${n}-counter` : void 0
     ].filter(Boolean).join(" ") || void 0;
-    return /* @__PURE__ */ a("div", { className: `${e}-root`, children: [
-      /* @__PURE__ */ a("div", { className: S, style: z, children: [
-        i && /* @__PURE__ */ t("label", { className: T, htmlFor: n, children: i }),
+    return /* @__PURE__ */ a("div", { className: `${e}-root`, ref: N, children: [
+      /* @__PURE__ */ a("div", { className: A, style: g, children: [
+        i && /* @__PURE__ */ t("label", { className: I, htmlFor: n, children: i }),
         d && /* @__PURE__ */ t("div", { className: `${e}__left-icon`, children: d }),
         /* @__PURE__ */ t(
           "input",
           {
             id: n,
             ...w,
-            "aria-describedby": q,
+            "aria-describedby": F,
             "aria-invalid": s || void 0,
-            ref: l,
-            className: E,
-            value: o,
-            maxLength: h,
-            style: I,
+            ref: o,
+            className: z,
+            value: l,
+            maxLength: u,
+            style: q,
             placeholder: i ? b || " " : b
           }
         ),
-        p && !u && /* @__PURE__ */ t("div", { className: `${e}__right-icon`, children: p }),
-        u && /* @__PURE__ */ t(
+        p && !h && /* @__PURE__ */ t("div", { className: `${e}__right-icon`, children: p }),
+        h && /* @__PURE__ */ t(
           "button",
           {
             type: "button",
@@ -106,9 +110,9 @@ const J = D(
               }
             ),
             c && /* @__PURE__ */ a("span", { id: `${n}-counter`, className: `${e}__counter`, children: [
-              g,
+              D,
               "/",
-              h
+              u
             ] })
           ]
         }
@@ -116,7 +120,7 @@ const J = D(
     ] });
   }
 );
-J.displayName = "Input";
+P.displayName = "Input";
 export {
-  J as Input
+  P as Input
 };

package/dist/components/Modal/Modal.d.ts

@@ -37,6 +37,19 @@ interface ModalRootProps {
      * Modal 내용
      */
     children: React.ReactNode;
+    /**
+     * 브라우저 히스토리(뒤로가기 / iOS 스와이프 제스처)로 Modal 닫기 활성화.
+     *
+     * 옵트인 기능이다. 활성 시 열릴 때 더미 히스토리 항목을 push하고,
+     * 브라우저 뒤로가기로 Modal이 닫힌다. 내부적으로 Sheet과 동일한 오버레이
+     * 히스토리 레지스트리를 공유하므로 Sheet/Modal 중첩에서도 안전하다.
+     *
+     * 주의: 열린 상태로 Modal.Root가 언마운트되거나 외부 라우팅(router.push 등)으로
+     * 닫히면 정리용 back()이 실행되지 않아 더미 항목이 남을 수 있다(뒤로가기 한 번은 no-op).
+     *
+     * @default false
+     */
+    enableHistoryClose?: boolean;
 }
 interface ModalOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
     /**

package/dist/components/Modal/Modal.js

@@ -1,124 +1,134 @@
-import { jsx as l, jsxs as L } from "react/jsx-runtime";
-import n, { useRef as k, useState as O, useEffect as P, useId as h, createContext as V, useContext as q } from "react";
-import { createPortal as z } from "react-dom";
-import { useClickOutside as A } from "../../hooks/useClickOutside.js";
-import { useEscapeKey as D } from "../../hooks/useEscapeKey.js";
-import { useScrollLock as G } from "../../hooks/useScrollLock.js";
-import { Slot as J } from "../../utils/Slot.js";
+import { jsx as l, jsxs as P } from "react/jsx-runtime";
+import n, { useRef as O, useState as V, useEffect as q, useId as _, createContext as z, useContext as A } from "react";
+import { createPortal as D } from "react-dom";
+import { useClickOutside as G } from "../../hooks/useClickOutside.js";
+import { useEscapeKey as J } from "../../hooks/useEscapeKey.js";
+import { useHistoryClose as Q } from "../../hooks/useHistoryClose.js";
+import { useScrollLock as U } from "../../hooks/useScrollLock.js";
+import { Slot as W } from "../../utils/Slot.js";
 import './Modal.css';/* empty css          */
-const v = V(null), m = () => {
-  const o = q(v);
+const h = z(null), u = () => {
+  const o = A(h);
   if (!o)
     throw new Error("Modal compound components must be used within Modal.Root");
   return o;
-}, Q = ({
+}, X = ({
   open: o,
   onOpenChange: t,
-  children: e
+  children: e,
+  enableHistoryClose: a = !1
 }) => {
-  const a = h(), d = h(), r = n.useMemo(
+  const r = _(), d = _(), { close: s } = Q({
+    isOpen: o,
+    onClose: () => t(!1),
+    enabled: a
+  }), i = n.useMemo(
     () => ({
       open: o,
       onOpenChange: t,
-      titleId: a,
+      close: s,
+      enableHistoryClose: a,
+      titleId: r,
       descriptionId: d
     }),
-    [o, t, a, d]
+    [o, t, s, a, r, d]
   );
-  return /* @__PURE__ */ l(v.Provider, { value: r, children: e });
-}, _ = n.forwardRef(
+  return /* @__PURE__ */ l(h.Provider, { value: i, children: e });
+}, N = n.forwardRef(
   ({
     container: o,
     variant: t = "scale",
     closeOnBackdrop: e = !0,
     disableScrollLock: a = !1,
-    width: d,
-    maxWidth: r,
+    width: r,
+    maxWidth: d,
     zIndex: s = 1e3,
-    className: u,
-    onClick: i,
-    style: $,
-    ...p
+    className: i,
+    onClick: c,
+    style: S,
+    ...y
   }, g) => {
-    const { open: c, onOpenChange: f } = m(), M = k(null), [S, E] = O(!1);
-    P(() => {
-      E(!0);
+    const { open: m, onOpenChange: E, close: p, enableHistoryClose: T } = u(), M = O(null), [j, k] = V(!1);
+    q(() => {
+      k(!0);
     }, []);
-    const b = typeof e == "boolean" ? e : e.clickOutside ?? !1, T = typeof e == "boolean" ? e : e.escapeKey ?? !1;
-    G({
-      enabled: c && !a,
+    const b = typeof e == "boolean" ? e : e.clickOutside ?? !1, v = typeof e == "boolean" ? e : e.escapeKey ?? !1;
+    U({
+      enabled: m && !a,
       allowedSelectors: [".motile-modal__content"]
-    }), A({
+    }), G({
       refs: [M],
       handler: () => {
-        b && f(!1);
+        b && !T && E(!1);
       },
-      enabled: c
-    }), D({
+      enabled: m
+    }), J({
       handler: () => {
-        T && f(!1);
+        v && p();
       },
-      enabled: c
+      enabled: m && v,
+      stacked: !0
+      // 중첩 오버레이에서 ESC는 최상단만 닫는다
     });
-    const j = (y) => {
-      i == null || i(y), y.target === y.currentTarget && b && f(!1);
+    const F = (f) => {
+      c == null || c(f), f.target === f.currentTarget && b && p();
     };
-    if (!S || !c) return null;
-    const F = {
+    if (!j || !m) return null;
+    const H = {
       zIndex: s,
-      ...$
-    }, H = {
-      ...d && { "--modal-width": d },
-      ...r && { "--modal-max-width": r },
+      ...S
+    }, K = {
+      ...r && { "--modal-width": r },
+      ...d && { "--modal-max-width": d },
       zIndex: s + 1
-    }, K = /* @__PURE__ */ l(
+    }, L = /* @__PURE__ */ l(
       "div",
       {
         ref: g,
-        className: `motile-modal__backdrop ${u || ""}`,
-        "data-state": c ? "open" : "closed",
+        className: `motile-modal__backdrop ${i || ""}`,
+        "data-state": m ? "open" : "closed",
         "data-variant": t,
-        onClick: j,
-        style: F,
-        ...p,
+        onClick: F,
+        style: H,
+        ...y,
         children: /* @__PURE__ */ l(
           "div",
           {
             ref: M,
             className: "motile-modal",
             "data-variant": t,
-            style: H,
-            children: p.children
+            style: K,
+            children: y.children
           }
         )
       }
     );
-    return z(K, o || document.body);
+    return D(L, o || document.body);
   }
 );
-_.displayName = "Modal.Overlay";
-const N = n.forwardRef(
+N.displayName = "Modal.Overlay";
+const w = n.forwardRef(
   ({ className: o, forceMount: t, ...e }, a) => {
-    const { open: d, titleId: r, descriptionId: s } = m();
-    return !d && !t ? null : /* @__PURE__ */ l(
+    const { open: r, titleId: d, descriptionId: s } = u();
+    return !r && !t ? null : /* @__PURE__ */ l(
       "div",
       {
         ref: a,
         className: `motile-modal__content ${o || ""}`,
         role: "dialog",
         "aria-modal": "true",
-        "aria-labelledby": r,
+        "aria-labelledby": d,
         "aria-describedby": s,
-        "data-state": d ? "open" : "closed",
+        "data-state": r ? "open" : "closed",
         ...e
       }
     );
   }
 );
-N.displayName = "Modal.Content";
-const w = n.forwardRef(
+w.displayName = "Modal.Content";
+const x = n.forwardRef(
   ({ className: o, ...t }, e) => {
-    const { titleId: a } = m();
+    const { titleId: a } = u();
     return /* @__PURE__ */ l(
       "h2",
       {
@@ -130,10 +140,10 @@ const w = n.forwardRef(
     );
   }
 );
-w.displayName = "Modal.Title";
-const x = n.forwardRef(
+x.displayName = "Modal.Title";
+const R = n.forwardRef(
   ({ className: o, ...t }, e) => {
-    const { descriptionId: a } = m();
+    const { descriptionId: a } = u();
     return /* @__PURE__ */ l(
       "div",
       {
@@ -145,30 +155,30 @@ const x = n.forwardRef(
     );
   }
 );
-x.displayName = "Modal.Body";
-const R = n.forwardRef(
-  ({ asChild: o, className: t, onClick: e, children: a, ...d }, r) => {
-    const { onOpenChange: s } = m(), u = (i) => {
-      e == null || e(i), s(!1);
+R.displayName = "Modal.Body";
+const C = n.forwardRef(
+  ({ asChild: o, className: t, onClick: e, children: a, ...r }, d) => {
+    const { close: s } = u(), i = (c) => {
+      e == null || e(c), s();
     };
     return o ? /* @__PURE__ */ l(
-      J,
+      W,
       {
-        ...d,
-        onClick: u,
-        ref: r,
+        ...r,
+        onClick: i,
+        ref: d,
         children: a
       }
     ) : /* @__PURE__ */ l(
       "button",
       {
-        ref: r,
+        ref: d,
         type: "button",
         className: `motile-modal__close ${t || ""}`,
-        onClick: u,
+        onClick: i,
         "aria-label": "닫기",
-        ...d,
-        children: a || /* @__PURE__ */ L(
+        ...r,
+        children: a || /* @__PURE__ */ P(
           "svg",
           {
             width: "18",
@@ -189,8 +199,8 @@ const R = n.forwardRef(
     );
   }
 );
-R.displayName = "Modal.Close";
-const C = n.forwardRef(
+C.displayName = "Modal.Close";
+const I = n.forwardRef(
   ({ className: o, ...t }, e) => /* @__PURE__ */ l(
     "div",
     {
@@ -200,8 +210,8 @@ const C = n.forwardRef(
     }
   )
 );
-C.displayName = "Modal.Footer";
-const I = n.forwardRef(
+I.displayName = "Modal.Footer";
+const $ = n.forwardRef(
   ({ className: o, ...t }, e) => /* @__PURE__ */ l(
     "div",
     {
@@ -211,25 +221,25 @@ const I = n.forwardRef(
     }
   )
 );
-I.displayName = "Modal.Header";
-const te = {
-  Root: Q,
-  Overlay: _,
-  Content: N,
-  Title: w,
-  Body: x,
-  Close: R,
-  Footer: C,
-  Header: I
+$.displayName = "Modal.Header";
+const de = {
+  Root: X,
+  Overlay: N,
+  Content: w,
+  Title: x,
+  Body: R,
+  Close: C,
+  Footer: I,
+  Header: $
 };
 export {
-  te as Modal,
-  x as ModalBody,
-  R as ModalClose,
-  N as ModalContent,
-  C as ModalFooter,
-  I as ModalHeader,
-  _ as ModalOverlay,
-  Q as ModalRoot,
-  w as ModalTitle
+  de as Modal,
+  R as ModalBody,
+  C as ModalClose,
+  w as ModalContent,
+  I as ModalFooter,
+  $ as ModalHeader,
+  N as ModalOverlay,
+  X as ModalRoot,
+  x as ModalTitle
 };

package/dist/components/Popover/Popover.js

@@ -1,5 +1,5 @@
-import { jsxs as $, jsx as g } from "react/jsx-runtime";
-import k, { useCallback as b, useId as N, useRef as I, useMemo as j, createContext as E, useContext as T } from "react";
+import { jsxs as y, jsx as g } from "react/jsx-runtime";
+import $, { useCallback as b, useId as N, useRef as I, useMemo as j, createContext as E, useContext as T } from "react";
 import { useClickOutside as h } from "../../hooks/useClickOutside.js";
 import { useEscapeKey as A } from "../../hooks/useEscapeKey.js";
 import { FloatingArrow as B } from "../../utils/FloatingArrow.js";
@@ -17,7 +17,7 @@ function K({
   defaultValue: p = !1,
   onChange: o
 }) {
-  const e = t !== void 0, [r, s] = k.useState(p), l = e ? t : r, c = b(
+  const e = t !== void 0, [r, s] = $.useState(p), l = e ? t : r, c = b(
     (a) => {
       const d = typeof a == "function" ? a(l) : a;
       e || s(d), o == null || o(d);
@@ -38,15 +38,15 @@ function M({
   open: a,
   defaultOpen: d = !1,
   onOpenChange: m,
-  onClickOutside: f,
+  onClickOutside: u,
   onDismiss: v,
-  autoClose: u = !0
+  autoClose: f = !0
 }) {
   const n = N().replace(/:/g, ""), x = I(null), w = I(null), P = I(null), [R, i] = K({
     value: a,
     defaultValue: d,
     onChange: m
-  }), y = j(
+  }), k = j(
     () => ({
       open: R,
       setOpen: i,
@@ -56,10 +56,10 @@ function M({
       showArrow: r,
       zIndex: s,
       color: l,
-      autoClose: u,
+      autoClose: f,
       bounceCount: c,
       onOpenChange: m,
-      onClickOutside: f,
+      onClickOutside: u,
       onDismiss: v,
       triggerId: `${n}-trigger`,
       contentId: `${n}-content`,
@@ -76,15 +76,15 @@ function M({
       r,
       s,
       l,
-      u,
+      f,
       c,
       m,
-      f,
+      u,
       v,
       n
     ]
   );
-  return /* @__PURE__ */ g(S.Provider, { value: y, children: /* @__PURE__ */ g("div", { ref: P, className: "motile-popover-wrapper", children: t }) });
+  return /* @__PURE__ */ g(S.Provider, { value: k, children: /* @__PURE__ */ g("div", { ref: P, className: "motile-popover-wrapper", children: t }) });
 }
 function V({ children: t, asChild: p = !1 }) {
   const { open: o, setOpen: e, triggerId: r, contentId: s, triggerRef: l } = C(), c = b(() => {
@@ -129,9 +129,9 @@ function q({
     showArrow: a,
     zIndex: d,
     color: m,
-    autoClose: f,
+    autoClose: u,
     bounceCount: v,
-    onClickOutside: u,
+    onClickOutside: f,
     onDismiss: n,
     contentId: x,
     contentRef: w,
@@ -140,23 +140,27 @@ function q({
   if (A({
     handler: b(
       (i) => {
-        f && (n == null || n(i), i.defaultPrevented || r(!1));
+        u && (n == null || n(i), i.defaultPrevented || r(!1));
       },
-      [f, n, r]
+      [u, n, r]
     ),
-    enabled: e
+    // enabled를 정직하게 계산 — 닫히지 않을(autoClose=false) 팝오버가
+    // ESC 스택의 top을 점유해 아래 오버레이의 ESC를 삼키지 않게
+    enabled: e && u,
+    stacked: !0
+    // 중첩 오버레이에서 ESC는 최상단만 닫는다
   }), h({
     refs: [P],
     handler: b(
       (i) => {
-        f && (u == null || u(i), n == null || n(i), i.defaultPrevented || r(!1));
+        u && (f == null || f(i), n == null || n(i), i.defaultPrevented || r(!1));
       },
-      [f, u, n, r]
+      [u, f, n, r]
     ),
     enabled: e
   }), !e) return null;
   const R = v !== 0;
-  return /* @__PURE__ */ $(
+  return /* @__PURE__ */ y(
     "div",
     {
       ref: w,