motile-ui 1.2.1 → 1.2.2

package/dist/components/Sheet/Sheet.js

@@ -1,14 +1,14 @@
 import { jsx as d, jsxs as $ } from "react/jsx-runtime";
-import { useCallback as k, useState as S, useEffect as b, useId as A, useRef as g, useMemo as F, createContext as N, useContext as T } from "react";
+import { useCallback as k, useState as v, useEffect as b, useId as A, useRef as I, useMemo as F, createContext as N, useContext as T } from "react";
 import { createPortal as w } from "react-dom";
 import { useEscapeKey as K } from "../../hooks/useEscapeKey.js";
 import { useHistoryClose as H } from "../../hooks/useHistoryClose.js";
 import { useScrollLock as P } from "../../hooks/useScrollLock.js";
 import { Slot as O } from "../../utils/Slot.js";
 import './Sheet.css';/* empty css          */
-const I = N(null);
-function v() {
-  const e = T(I);
+const R = N(null);
+function _() {
+  const e = T(R);
   if (!e)
     throw new Error("Sheet components must be used within Sheet.Root");
   return e;
@@ -18,7 +18,7 @@ function V({
   defaultValue: n = !1,
   onChange: o
 }) {
-  const t = e !== void 0, [i, l] = S(n), s = t ? e : i, r = k(
+  const t = e !== void 0, [i, l] = v(n), s = t ? e : i, r = k(
     (a) => {
       const f = typeof a == "function" ? a(s) : a;
       t || l(f), o == null || o(f);
@@ -38,18 +38,18 @@ function q({
   onOpenChange: r,
   enableHistoryClose: a = !0
 }) {
-  const f = A().replace(/:/g, ""), h = g(null), m = g(null), [c, p] = V({
+  const f = A().replace(/:/g, ""), p = I(null), m = I(null), [c, h] = V({
     value: l,
     defaultValue: s,
     onChange: r
-  }), { isClosingFromHistory: y, navigateAndClose: u } = H({
+  }), { isClosingFromHistory: y, close: u, navigateAndClose: S } = H({
     isOpen: c,
-    onClose: () => p(!1),
+    onClose: () => h(!1),
     enabled: a
-  }), _ = F(
+  }), C = F(
     () => ({
       open: c,
-      setOpen: p,
+      setOpen: h,
       position: n,
       closeOnBackdrop: o,
       maxWidth: t,
@@ -57,30 +57,32 @@ function q({
       onOpenChange: r,
       triggerId: `${f}-trigger`,
       contentId: `${f}-content`,
-      overlayRef: h,
+      overlayRef: p,
       sheetRef: m,
       isClosingFromHistory: y,
-      navigateAndClose: u
+      close: u,
+      navigateAndClose: S
     }),
     [
       c,
-      p,
+      h,
       n,
       o,
       t,
       i,
       r,
       f,
-      h,
+      p,
       m,
       y,
-      u
+      u,
+      S
     ]
   );
-  return /* @__PURE__ */ d(I.Provider, { value: _, children: e });
+  return /* @__PURE__ */ d(R.Provider, { value: C, children: e });
 }
 function z({ children: e, asChild: n = !1 }) {
-  const { open: o, setOpen: t, triggerId: i, contentId: l } = v(), s = k(() => {
+  const { open: o, setOpen: t, triggerId: i, contentId: l } = _(), s = k(() => {
     t((r) => !r);
   }, [t]);
   return n ? /* @__PURE__ */ d(
@@ -105,13 +107,13 @@ function z({ children: e, asChild: n = !1 }) {
   );
 }
 function B({ children: e, container: n }) {
-  const { open: o } = v(), [t, i] = S(!1);
+  const { open: o } = _(), [t, i] = v(!1);
   return b(() => {
     i(!0);
   }, []), !t || !o ? null : w(e, n || document.body);
 }
 function j({ className: e = "", style: n }) {
-  const { open: o, setOpen: t, position: i, closeOnBackdrop: l, zIndex: s, overlayRef: r } = v(), [a, f] = S(!1), [h, m] = S(!1), c = typeof l == "boolean" ? { clickOutside: l } : {
+  const { open: o, close: t, position: i, closeOnBackdrop: l, zIndex: s, overlayRef: r } = _(), [a, f] = v(!1), [p, m] = v(!1), c = typeof l == "boolean" ? { clickOutside: l } : {
     escapeKey: l.escapeKey ?? !1,
     clickOutside: l.clickOutside ?? !1
   };
@@ -128,16 +130,16 @@ function j({ className: e = "", style: n }) {
   }, [o, a]), b(() => {
     if (!a || !o) return;
     const u = requestAnimationFrame(() => {
-      const _ = requestAnimationFrame(() => {
+      const S = requestAnimationFrame(() => {
         m(!0);
       });
-      return () => cancelAnimationFrame(_);
+      return () => cancelAnimationFrame(S);
     });
     return () => cancelAnimationFrame(u);
   }, [a, o]);
-  const p = k(
+  const h = k(
     (u) => {
-      c.clickOutside && u.target === r.current && (u.stopPropagation(), t(!1));
+      c.clickOutside && u.target === r.current && (u.stopPropagation(), t());
     },
     [c.clickOutside, t, r]
   );
@@ -151,9 +153,9 @@ function j({ className: e = "", style: n }) {
     "div",
     {
       ref: r,
-      className: `motile-sheet__overlay ${h ? "motile-sheet__overlay--visible" : ""} motile-sheet__overlay--${i} ${e}`,
+      className: `motile-sheet__overlay ${p ? "motile-sheet__overlay--visible" : ""} motile-sheet__overlay--${i} ${e}`,
       style: y,
-      onClick: p,
+      onClick: h,
       role: "presentation"
     }
   );
@@ -161,15 +163,15 @@ function j({ className: e = "", style: n }) {
 function E({ children: e, className: n = "", style: o }) {
   const {
     open: t,
-    setOpen: i,
+    close: i,
     position: l,
     closeOnBackdrop: s,
     maxWidth: r,
     zIndex: a,
     contentId: f,
-    sheetRef: h,
+    sheetRef: p,
     isClosingFromHistory: m
-  } = v(), [c, p] = S(!1), [y, u] = S(!1), _ = typeof s == "boolean" ? { escapeKey: s } : {
+  } = _(), [c, h] = v(!1), [y, u] = v(!1), S = typeof s == "boolean" ? { escapeKey: s } : {
     escapeKey: s.escapeKey ?? !1,
     clickOutside: s.clickOutside ?? !1
   };
@@ -177,30 +179,30 @@ function E({ children: e, className: n = "", style: o }) {
     enabled: t,
     allowedSelectors: [".motile-sheet__body"]
   }), K({
-    handler: () => i(!1),
-    enabled: t && _.escapeKey
+    handler: i,
+    enabled: t && S.escapeKey
   }), b(() => {
     if (t)
-      p(!0);
+      h(!0);
     else if (c) {
       u(!1);
-      const C = setTimeout(() => {
-        p(!1);
+      const x = setTimeout(() => {
+        h(!1);
       }, m ? 0 : 300);
-      return () => clearTimeout(C);
+      return () => clearTimeout(x);
     }
   }, [t, c, m]), b(() => {
     if (!c || !t || m) return;
-    const x = requestAnimationFrame(() => {
-      const C = requestAnimationFrame(() => {
+    const g = requestAnimationFrame(() => {
+      const x = requestAnimationFrame(() => {
         u(!0);
       });
-      return () => cancelAnimationFrame(C);
+      return () => cancelAnimationFrame(x);
     });
-    return () => cancelAnimationFrame(x);
+    return () => cancelAnimationFrame(g);
   }, [c, t, m]), !c)
     return null;
-  const R = {
+  const C = {
     ...r !== "600px" && { "--sheet-max-width": r },
     zIndex: a + 1,
     ...o
@@ -208,10 +210,10 @@ function E({ children: e, className: n = "", style: o }) {
   return /* @__PURE__ */ d(
     "div",
     {
-      ref: h,
+      ref: p,
       id: f,
       className: `motile-sheet__content motile-sheet__content--${l} ${y ? "motile-sheet__content--visible" : ""} ${n}`,
-      style: R,
+      style: C,
       role: "dialog",
       "aria-modal": "true",
       children: e
@@ -228,8 +230,8 @@ function M({ children: e, className: n = "" }) {
   return /* @__PURE__ */ d("div", { className: `motile-sheet__body ${n}`, children: e });
 }
 function W({ children: e, asChild: n = !1 }) {
-  const { setOpen: o } = v(), t = k(() => {
-    o(!1);
+  const { close: o } = _(), t = k(() => {
+    o();
   }, [o]);
   return n ? /* @__PURE__ */ d(
     O,
@@ -267,7 +269,7 @@ function W({ children: e, asChild: n = !1 }) {
   );
 }
 function te() {
-  const { navigateAndClose: e } = v();
+  const { navigateAndClose: e } = _();
   return e;
 }
 const oe = {

package/dist/hooks/useHistoryClose.d.ts

@@ -40,6 +40,25 @@ export interface UseHistoryCloseReturn {
      * 히스토리 기반 닫기 여부
      */
     isClosingFromHistory: boolean;
+    /**
+     * Sheet/Modal을 닫는 함수
+     * 히스토리 기반 닫기가 활성화된 경우 history.back()을 통해 닫아
+     * 더미 히스토리를 확실하게 제거합니다.
+     *
+     * @description
+     * - enableHistoryClose=true: history.back() → popstate → onClose
+     * - enableHistoryClose=false: 직접 onClose() 호출
+     *
+     * Sheet.Close, 닫기 버튼 등에서 사용하세요.
+     *
+     * @example
+     * ```tsx
+     * const { close } = useHistoryClose({ isOpen, onClose });
+     *
+     * <button onClick={close}>닫기</button>
+     * ```
+     */
+    close: () => void;
     /**
      * Sheet을 닫으면서 페이지 네비게이션을 수행하는 함수
      * 히스토리를 깔끔하게 유지하면서 네비게이션을 처리합니다.

package/dist/hooks/useHistoryClose.js

@@ -1,47 +1,56 @@
-import { useRef as i, useState as h, useEffect as c } from "react";
-function m({
-  onClose: s,
-  isOpen: n,
-  enabled: r = !0
+import { useRef as s, useState as g, useEffect as a, useCallback as d } from "react";
+function L({
+  onClose: u,
+  isOpen: i,
+  enabled: e = !0
 }) {
-  const u = i(s), o = i(!1), [a, l] = h(!1), f = i(0), e = i(null);
-  return c(() => {
-    u.current = s;
-  }, [s]), c(() => {
-    if (!r || !n) return;
-    const t = (d) => {
-      l(!0), u.current();
+  const r = s(u), n = s(!1), [c, l] = g(!1), f = s(0), o = s(null);
+  a(() => {
+    r.current = u;
+  }, [u]), a(() => {
+    if (!e || !i) return;
+    const t = (w) => {
+      l(!0), r.current();
     };
-    return o.current || (f.current = window.history.length, window.history.pushState({ modal: !0 }, ""), o.current = !0), window.addEventListener("popstate", t), () => {
+    return n.current || (f.current = window.history.length, window.history.pushState({ modal: !0 }, ""), n.current = !0), window.addEventListener("popstate", t), () => {
       window.removeEventListener("popstate", t);
     };
-  }, [n, r]), c(() => {
-    if (!r || n || !o.current) return;
+  }, [i, e]), a(() => {
+    if (!e || i || !n.current) return;
     let t = null;
-    if (!a) {
-      const d = f.current + 1;
-      if (window.history.length !== d)
-        e.current = null;
-      else if (e.current) {
-        const w = e.current;
-        e.current = null, t = () => {
+    if (!c) {
+      const w = f.current + 1;
+      if (window.history.length !== w)
+        o.current = null;
+      else if (o.current) {
+        const v = o.current;
+        o.current = null, t = () => {
           window.removeEventListener("popstate", t), t = null, setTimeout(() => {
-            w();
+            v();
           }, 0);
         }, window.addEventListener("popstate", t), window.history.back();
       } else
         window.history.back();
     }
-    return o.current = !1, l(!1), () => {
+    return n.current = !1, l(!1), () => {
       t && window.removeEventListener("popstate", t);
     };
-  }, [n, a, r]), {
-    isClosingFromHistory: a,
-    navigateAndClose: (t) => {
-      e.current = t, u.current();
+  }, [i, c, e]);
+  const h = d(() => {
+    if (!e) {
+      r.current();
+      return;
     }
+    n.current ? window.history.back() : r.current();
+  }, [e]), p = d((t) => {
+    o.current = t, r.current();
+  }, []);
+  return {
+    isClosingFromHistory: c,
+    close: h,
+    navigateAndClose: p
   };
 }
 export {
-  m as useHistoryClose
+  L as useHistoryClose
 };

package/package.json

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