motile-ui 1.1.2 → 1.1.3

package/dist/components/Sheet/Sheet.d.ts

@@ -26,8 +26,14 @@ interface SheetRootProps {
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
+    /**
+     * 히스토리 기반 뒤로가기 닫기 기능 활성화 여부
+     * URL로 Sheet를 제어하는 경우 false로 설정하세요.
+     * @default true
+     */
+    enableHistoryClose?: boolean;
 }
-declare function SheetRoot({ children, position, closeOnBackdrop, maxWidth, zIndex, open: controlledOpen, defaultOpen, onOpenChange, }: SheetRootProps): import("react/jsx-runtime").JSX.Element;
+declare function SheetRoot({ children, position, closeOnBackdrop, maxWidth, zIndex, open: controlledOpen, defaultOpen, onOpenChange, enableHistoryClose, }: SheetRootProps): import("react/jsx-runtime").JSX.Element;
 interface SheetTriggerProps {
     children: React.ReactElement;
     asChild?: boolean;

package/dist/components/Sheet/Sheet.js

@@ -1,155 +1,156 @@
-import { jsx as u, jsxs as $ } from "react/jsx-runtime";
-import { useCallback as b, useState as S, useEffect as v, useId as A, useRef as x, useMemo as F, createContext as N, useContext as T } from "react";
+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 { createPortal as w } from "react-dom";
-import { Slot as g } from "../../utils/Slot.js";
+import { Slot as O } from "../../utils/Slot.js";
 import { useScrollLock as K } from "../../hooks/useScrollLock.js";
-import { useClickOutside as H } from "../../hooks/useClickOutside.js";
-import { useEscapeKey as V } from "../../hooks/useEscapeKey.js";
-import { useHistoryClose as q } from "../../hooks/useHistoryClose.js";
+import { useEscapeKey as H } from "../../hooks/useEscapeKey.js";
+import { useHistoryClose as P } from "../../hooks/useHistoryClose.js";
 import './Sheet.css';/* empty css          */
 const I = N(null);
-function k() {
+function v() {
   const e = T(I);
   if (!e)
     throw new Error("Sheet components must be used within Sheet.Root");
   return e;
 }
-function z({
+function V({
   value: e,
   defaultValue: n = !1,
   onChange: o
 }) {
-  const t = e !== void 0, [i, a] = S(n), s = t ? e : i, l = b(
-    (r) => {
-      const f = typeof r == "function" ? r(s) : r;
-      t || a(f), o == null || o(f);
+  const t = e !== void 0, [i, l] = S(n), s = t ? e : i, r = k(
+    (a) => {
+      const f = typeof a == "function" ? a(s) : a;
+      t || l(f), o == null || o(f);
     },
     [t, o, s]
   );
-  return [s, l];
+  return [s, r];
 }
-function B({
+function q({
   children: e,
   position: n = "right",
   closeOnBackdrop: o = !0,
   maxWidth: t = "600px",
   zIndex: i = 1e3,
-  open: a,
+  open: l,
   defaultOpen: s = !1,
-  onOpenChange: l
+  onOpenChange: r,
+  enableHistoryClose: a = !0
 }) {
-  const r = A().replace(/:/g, ""), f = x(null), h = x(null), [d, c] = z({
-    value: a,
+  const f = A().replace(/:/g, ""), h = g(null), m = g(null), [c, p] = V({
+    value: l,
     defaultValue: s,
-    onChange: l
-  }), { isClosingFromHistory: p, navigateAndClose: y } = q({
-    isOpen: d,
-    onClose: () => c(!1)
-  }), m = F(
+    onChange: r
+  }), { isClosingFromHistory: y, navigateAndClose: u } = P({
+    isOpen: c,
+    onClose: () => p(!1),
+    enabled: a
+  }), _ = F(
     () => ({
-      open: d,
-      setOpen: c,
+      open: c,
+      setOpen: p,
       position: n,
       closeOnBackdrop: o,
       maxWidth: t,
       zIndex: i,
-      onOpenChange: l,
-      triggerId: `${r}-trigger`,
-      contentId: `${r}-content`,
-      overlayRef: f,
-      sheetRef: h,
-      isClosingFromHistory: p,
-      navigateAndClose: y
+      onOpenChange: r,
+      triggerId: `${f}-trigger`,
+      contentId: `${f}-content`,
+      overlayRef: h,
+      sheetRef: m,
+      isClosingFromHistory: y,
+      navigateAndClose: u
     }),
     [
-      d,
       c,
+      p,
       n,
       o,
       t,
       i,
-      l,
       r,
       f,
       h,
-      p,
-      y
+      m,
+      y,
+      u
     ]
   );
-  return /* @__PURE__ */ u(I.Provider, { value: m, children: e });
+  return /* @__PURE__ */ d(I.Provider, { value: _, children: e });
 }
-function P({ children: e, asChild: n = !1 }) {
-  const { open: o, setOpen: t, triggerId: i, contentId: a } = k(), s = b(() => {
-    t((l) => !l);
+function z({ children: e, asChild: n = !1 }) {
+  const { open: o, setOpen: t, triggerId: i, contentId: l } = v(), s = k(() => {
+    t((r) => !r);
   }, [t]);
-  return n ? /* @__PURE__ */ u(
-    g,
+  return n ? /* @__PURE__ */ d(
+    O,
     {
       id: i,
       "aria-expanded": o,
-      "aria-controls": a,
+      "aria-controls": l,
       onClick: s,
       children: e
     }
-  ) : /* @__PURE__ */ u(
+  ) : /* @__PURE__ */ d(
     "button",
     {
       id: i,
       type: "button",
       "aria-expanded": o,
-      "aria-controls": a,
+      "aria-controls": l,
       onClick: s,
       children: e
     }
   );
 }
-function j({ children: e, container: n }) {
-  const { open: o } = k(), [t, i] = S(!1);
-  return v(() => {
+function B({ children: e, container: n }) {
+  const { open: o } = v(), [t, i] = S(!1);
+  return b(() => {
     i(!0);
   }, []), !t || !o ? null : w(e, n || document.body);
 }
-function E({ className: e = "", style: n }) {
-  const { open: o, setOpen: t, position: i, closeOnBackdrop: a, zIndex: s, overlayRef: l } = k(), [r, f] = S(!1), [h, d] = S(!1), c = typeof a == "boolean" ? { clickOutside: a } : {
-    escapeKey: a.escapeKey ?? !1,
-    clickOutside: a.clickOutside ?? !1
+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 } : {
+    escapeKey: l.escapeKey ?? !1,
+    clickOutside: l.clickOutside ?? !1
   };
-  v(() => {
+  b(() => {
     if (o)
       f(!0);
-    else if (r) {
-      d(!1);
-      const m = setTimeout(() => {
+    else if (a) {
+      m(!1);
+      const u = setTimeout(() => {
         f(!1);
       }, 300);
-      return () => clearTimeout(m);
+      return () => clearTimeout(u);
     }
-  }, [o, r]), v(() => {
-    if (!r || !o) return;
-    const m = requestAnimationFrame(() => {
+  }, [o, a]), b(() => {
+    if (!a || !o) return;
+    const u = requestAnimationFrame(() => {
       const _ = requestAnimationFrame(() => {
-        d(!0);
+        m(!0);
       });
       return () => cancelAnimationFrame(_);
     });
-    return () => cancelAnimationFrame(m);
-  }, [r, o]);
-  const p = b(
-    (m) => {
-      c.clickOutside && m.target === l.current && t(!1);
+    return () => cancelAnimationFrame(u);
+  }, [a, o]);
+  const p = k(
+    (u) => {
+      c.clickOutside && u.target === r.current && (u.stopPropagation(), t(!1));
     },
-    [c.clickOutside, t, l]
+    [c.clickOutside, t, r]
   );
-  if (!r)
+  if (!a)
     return null;
   const y = {
     zIndex: s,
     ...n
   };
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ d(
     "div",
     {
-      ref: l,
+      ref: r,
       className: `motile-sheet__overlay ${h ? "motile-sheet__overlay--visible" : ""} motile-sheet__overlay--${i} ${e}`,
       style: y,
       onClick: p,
@@ -157,18 +158,18 @@ function E({ className: e = "", style: n }) {
     }
   );
 }
-function L({ children: e, className: n = "", style: o }) {
+function E({ children: e, className: n = "", style: o }) {
   const {
     open: t,
     setOpen: i,
-    position: a,
+    position: l,
     closeOnBackdrop: s,
-    maxWidth: l,
-    zIndex: r,
+    maxWidth: r,
+    zIndex: a,
     contentId: f,
     sheetRef: h,
-    isClosingFromHistory: d
-  } = k(), [c, p] = S(!1), [y, m] = S(!1), _ = typeof s == "boolean" ? { escapeKey: s, clickOutside: s } : {
+    isClosingFromHistory: m
+  } = v(), [c, p] = S(!1), [y, u] = S(!1), _ = typeof s == "boolean" ? { escapeKey: s } : {
     escapeKey: s.escapeKey ?? !1,
     clickOutside: s.clickOutside ?? !1
   };
@@ -176,44 +177,40 @@ function L({ children: e, className: n = "", style: o }) {
     enabled: t,
     allowedSelectors: [".motile-sheet__body"]
   }), H({
-    refs: [h],
-    handler: () => i(!1),
-    enabled: t && _.clickOutside
-  }), V({
     handler: () => i(!1),
     enabled: t && _.escapeKey
-  }), v(() => {
+  }), b(() => {
     if (t)
       p(!0);
     else if (c) {
-      m(!1);
+      u(!1);
       const C = setTimeout(() => {
         p(!1);
-      }, d ? 0 : 300);
+      }, m ? 0 : 300);
       return () => clearTimeout(C);
     }
-  }, [t, c, d]), v(() => {
-    if (!c || !t || d) return;
-    const O = requestAnimationFrame(() => {
+  }, [t, c, m]), b(() => {
+    if (!c || !t || m) return;
+    const x = requestAnimationFrame(() => {
       const C = requestAnimationFrame(() => {
-        m(!0);
+        u(!0);
       });
       return () => cancelAnimationFrame(C);
     });
-    return () => cancelAnimationFrame(O);
-  }, [c, t, d]), !c)
+    return () => cancelAnimationFrame(x);
+  }, [c, t, m]), !c)
     return null;
   const R = {
-    ...l !== "600px" && { "--sheet-max-width": l },
-    zIndex: r + 1,
+    ...r !== "600px" && { "--sheet-max-width": r },
+    zIndex: a + 1,
     ...o
   };
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ d(
     "div",
     {
       ref: h,
       id: f,
-      className: `motile-sheet__content motile-sheet__content--${a} ${y ? "motile-sheet__content--visible" : ""} ${n}`,
+      className: `motile-sheet__content motile-sheet__content--${l} ${y ? "motile-sheet__content--visible" : ""} ${n}`,
       style: R,
       role: "dialog",
       "aria-modal": "true",
@@ -221,28 +218,28 @@ function L({ children: e, className: n = "", style: o }) {
     }
   );
 }
+function L({ children: e, className: n = "" }) {
+  return /* @__PURE__ */ d("div", { className: `motile-sheet__header ${n}`, children: e });
+}
 function D({ children: e, className: n = "" }) {
-  return /* @__PURE__ */ u("div", { className: `motile-sheet__header ${n}`, children: e });
+  return /* @__PURE__ */ d("h2", { id: "sheet-title", className: `motile-sheet__title ${n}`, children: e });
 }
 function M({ children: e, className: n = "" }) {
-  return /* @__PURE__ */ u("h2", { id: "sheet-title", className: `motile-sheet__title ${n}`, children: e });
-}
-function W({ children: e, className: n = "" }) {
-  return /* @__PURE__ */ u("div", { className: `motile-sheet__body ${n}`, children: e });
+  return /* @__PURE__ */ d("div", { className: `motile-sheet__body ${n}`, children: e });
 }
-function G({ children: e, asChild: n = !1 }) {
-  const { setOpen: o } = k(), t = b(() => {
+function W({ children: e, asChild: n = !1 }) {
+  const { setOpen: o } = v(), t = k(() => {
     o(!1);
   }, [o]);
-  return n ? /* @__PURE__ */ u(
-    g,
+  return n ? /* @__PURE__ */ d(
+    O,
     {
       className: "motile-sheet__close",
       onClick: t,
       "aria-label": "닫기",
       children: e
     }
-  ) : /* @__PURE__ */ u(
+  ) : /* @__PURE__ */ d(
     "button",
     {
       className: "motile-sheet__close",
@@ -261,30 +258,30 @@ function G({ children: e, asChild: n = !1 }) {
           strokeLinecap: "round",
           strokeLinejoin: "round",
           children: [
-            /* @__PURE__ */ u("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-            /* @__PURE__ */ u("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            /* @__PURE__ */ d("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+            /* @__PURE__ */ d("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
           ]
         }
       )
     }
   );
 }
-function ne() {
-  const { navigateAndClose: e } = k();
+function te() {
+  const { navigateAndClose: e } = v();
   return e;
 }
-const se = {
-  Root: B,
-  Trigger: P,
-  Portal: j,
-  Overlay: E,
-  Content: L,
-  Header: D,
-  Title: M,
-  Body: W,
-  Close: G
+const oe = {
+  Root: q,
+  Trigger: z,
+  Portal: B,
+  Overlay: j,
+  Content: E,
+  Header: L,
+  Title: D,
+  Body: M,
+  Close: W
 };
 export {
-  se as Sheet,
-  ne as useSheetNavigation
+  oe as Sheet,
+  te as useSheetNavigation
 };

package/dist/hooks/useHistoryClose.d.ts

@@ -28,6 +28,12 @@ export interface UseHistoryCloseProps {
      * 모달/Sheet 닫기 핸들러
      */
     onClose: () => void;
+    /**
+     * 히스토리 기반 닫기 기능 활성화 여부
+     * URL로 Sheet를 제어하는 경우 false로 설정
+     * @default true
+     */
+    enabled?: boolean;
 }
 export interface UseHistoryCloseReturn {
     /**
@@ -51,4 +57,4 @@ export interface UseHistoryCloseReturn {
      */
     navigateAndClose: (navigationFn: () => void) => void;
 }
-export declare function useHistoryClose({ onClose, isOpen, }: UseHistoryCloseProps): UseHistoryCloseReturn;
+export declare function useHistoryClose({ onClose, isOpen, enabled, }: UseHistoryCloseProps): UseHistoryCloseReturn;

package/dist/hooks/useHistoryClose.js

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

package/package.json

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