motile-ui 1.4.0 → 1.5.0

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,117 +1,125 @@
-import { jsx as l, jsxs as K } from "react/jsx-runtime";
-import n, { useRef as L, useState as O, useEffect as P, useId as v, 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(null), m = () => {
-  const o = q(_);
+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 = v(), d = v(), 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(_.Provider, { value: r, children: e });
+  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: g,
-    ...p
-  }, S) => {
-    const { open: c, onOpenChange: f } = m(), M = L(null), [E, T] = O(!1);
-    P(() => {
-      T(!0);
+    className: i,
+    onClick: c,
+    style: S,
+    ...y
+  }, g) => {
+    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, h = 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: () => {
-        h && f(!1);
+        v && p();
       },
-      enabled: c && h,
+      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 (!E || !c) return null;
-    const k = {
+    if (!j || !m) return null;
+    const H = {
       zIndex: s,
-      ...g
-    }, F = {
-      ...d && { "--modal-width": d },
-      ...r && { "--modal-max-width": r },
+      ...S
+    }, K = {
+      ...r && { "--modal-width": r },
+      ...d && { "--modal-max-width": d },
       zIndex: s + 1
-    }, H = /* @__PURE__ */ l(
+    }, L = /* @__PURE__ */ l(
       "div",
       {
-        ref: S,
-        className: `motile-modal__backdrop ${u || ""}`,
-        "data-state": c ? "open" : "closed",
+        ref: g,
+        className: `motile-modal__backdrop ${i || ""}`,
+        "data-state": m ? "open" : "closed",
         "data-variant": t,
-        onClick: j,
-        style: k,
-        ...p,
+        onClick: F,
+        style: H,
+        ...y,
         children: /* @__PURE__ */ l(
           "div",
           {
             ref: M,
             className: "motile-modal",
             "data-variant": t,
-            style: F,
-            children: p.children
+            style: K,
+            children: y.children
           }
         )
       }
     );
-    return z(H, o || document.body);
+    return D(L, o || document.body);
   }
 );
 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
       }
     );
@@ -120,7 +128,7 @@ 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",
       {
@@ -135,7 +143,7 @@ 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",
       {
@@ -149,28 +157,28 @@ const R = n.forwardRef(
 );
 R.displayName = "Modal.Body";
 const C = n.forwardRef(
-  ({ asChild: o, className: t, onClick: e, children: a, ...d }, r) => {
-    const { onOpenChange: s } = m(), u = (i) => {
-      e == null || e(i), s(!1);
+  ({ 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__ */ K(
+        ...r,
+        children: a || /* @__PURE__ */ P(
           "svg",
           {
             width: "18",
@@ -214,8 +222,8 @@ const $ = n.forwardRef(
   )
 );
 $.displayName = "Modal.Header";
-const te = {
-  Root: Q,
+const de = {
+  Root: X,
   Overlay: N,
   Content: w,
   Title: x,
@@ -225,13 +233,13 @@ const te = {
   Header: $
 };
 export {
-  te as Modal,
+  de as Modal,
   R as ModalBody,
   C as ModalClose,
   w as ModalContent,
   I as ModalFooter,
   $ as ModalHeader,
   N as ModalOverlay,
-  Q as ModalRoot,
+  X as ModalRoot,
   x as ModalTitle
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motile-ui",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "type": "module",
   "description": "A modern React component library for webview applications",
   "main": "./dist/index.js",