motile-ui 1.3.1 → 1.4.0

package/dist/components/Select/Select.js

@@ -1,33 +1,33 @@
 import { jsxs as L, jsx as n } from "react/jsx-runtime";
-import M, { useEffect as j, useState as R, useRef as P, useId as ee, useCallback as $, createContext as te, useContext as oe } from "react";
+import k, { useEffect as j, useState as R, useRef as P, useId as ee, useCallback as $, createContext as te, useContext as oe } from "react";
 import { Drawer as C } from "../Drawer/Drawer.js";
 import { useClickOutside as se } from "../../hooks/useClickOutside.js";
 import { useEscapeKey as ne } from "../../hooks/useEscapeKey.js";
 import { useMediaQuery as le } from "../../hooks/useMediaQuery.js";
-import { Slot as ie } from "../../utils/Slot.js";
+import { Slot as re } from "../../utils/Slot.js";
 import './Select.css';/* empty css           */
-const O = te(null), z = () => {
-  const e = oe(O);
+const Q = te(null), z = () => {
+  const e = oe(Q);
   if (!e)
     throw new Error("Select components must be used within Select.Root");
   return e;
-}, Q = ({
+}, B = ({
   value: e,
   defaultValue: c,
   onValueChange: l,
-  open: i,
+  open: r,
   onOpenChange: o,
   disabled: a = !1,
   zIndex: u = 40,
   hideCheckIcon: g = !1,
-  maxWidth: r = 768,
+  maxWidth: i = 768,
   closeOnBackdrop: s = !0,
   color: S,
   children: w
 }) => {
-  const [d, _] = R(c), [y, p] = R(!1), f = P(null), v = P(null), m = e !== void 0, h = m ? e : d, E = i !== void 0, b = E ? i : y, K = P(b);
+  const [d, _] = R(c), [y, p] = R(!1), f = P(null), v = P(null), m = e !== void 0, h = m ? e : d, E = r !== void 0, b = E ? r : y, K = P(b);
   K.current = b;
-  const [D, T] = R(/* @__PURE__ */ new Map()), F = `select-content-${ee()}`, G = r ? `(max-width: ${typeof r == "number" ? `${r}px` : r})` : "(max-width: 768px)", k = le(G), J = typeof s == "boolean" ? s : s.clickOutside ?? !1, X = typeof s == "boolean" ? s : s.escapeKey ?? !1, x = $(
+  const [F, T] = R(/* @__PURE__ */ new Map()), G = `select-content-${ee()}`, J = i ? `(max-width: ${typeof i == "number" ? `${i}px` : i})` : "(max-width: 768px)", M = le(J), X = typeof s == "boolean" ? s : s.clickOutside ?? !1, H = typeof s == "boolean" ? s : s.escapeKey ?? !1, x = $(
     (t) => {
       E || p(t), o == null || o(t);
     },
@@ -38,8 +38,8 @@ const O = te(null), z = () => {
   }, Z = $(
     (t, I) => {
       T((N) => {
-        const H = new Map(N);
-        return H.set(t, I), H;
+        const O = new Map(N);
+        return O.set(t, I), O;
       });
     },
     []
@@ -52,15 +52,17 @@ const O = te(null), z = () => {
   se({
     refs: [v, f],
     handler: () => {
-      b && J && x(!1);
+      b && X && x(!1);
     },
-    enabled: b && !k
+    enabled: b && !M
   }), ne({
     handler: () => {
       var t;
-      b && X && (x(!1), (t = f.current) == null || t.focus());
+      b && H && (x(!1), (t = f.current) == null || t.focus());
     },
-    enabled: b && !k
+    enabled: b && !M && H,
+    stacked: !0
+    // 중첩 오버레이에서 ESC는 최상단만 닫는다
   }), j(() => {
     if (!b) return;
     const t = () => {
@@ -69,7 +71,7 @@ const O = te(null), z = () => {
     return window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
   }, [b, x]), j(() => {
     K.current && x(!1);
-  }, [k, x]);
+  }, [M, x]);
   const W = {
     open: b,
     setOpen: x,
@@ -78,24 +80,24 @@ const O = te(null), z = () => {
     disabled: a,
     triggerRef: f,
     contentRef: v,
-    contentId: F,
-    itemLabels: D,
+    contentId: G,
+    itemLabels: F,
     registerItem: Z,
     unregisterItem: V,
     zIndex: u,
     hideCheckIcon: g,
-    isMobile: k,
-    maxWidth: r,
+    isMobile: M,
+    maxWidth: i,
     closeOnBackdrop: s,
     color: S
   };
-  return /* @__PURE__ */ n(O.Provider, { value: W, children: /* @__PURE__ */ n("div", { style: { position: "relative" }, children: w }) });
+  return /* @__PURE__ */ n(Q.Provider, { value: W, children: /* @__PURE__ */ n("div", { style: { position: "relative" }, children: w }) });
 };
-Q.displayName = "Select.Root";
-const B = M.forwardRef(({ children: e, className: c, style: l, asChild: i = !1, ...o }, a) => {
-  const { open: u, setOpen: g, disabled: r, triggerRef: s, contentId: S, zIndex: w, color: d } = z(), _ = () => {
-    r || g(!u);
-  }, y = M.useCallback(
+B.displayName = "Select.Root";
+const U = k.forwardRef(({ children: e, className: c, style: l, asChild: r = !1, ...o }, a) => {
+  const { open: u, setOpen: g, disabled: i, triggerRef: s, contentId: S, zIndex: w, color: d } = z(), _ = () => {
+    i || g(!u);
+  }, y = k.useCallback(
     (h) => {
       s.current = h, typeof a == "function" ? a(h) : a && (a.current = h);
     },
@@ -111,7 +113,7 @@ const B = M.forwardRef(({ children: e, className: c, style: l, asChild: i = !1,
     "aria-controls": S,
     "aria-expanded": u,
     "aria-haspopup": "listbox",
-    disabled: r,
+    disabled: i,
     className: p,
     style: f,
     onClick: _,
@@ -137,25 +139,25 @@ const B = M.forwardRef(({ children: e, className: c, style: l, asChild: i = !1,
       )
     }
   );
-  return i ? /* @__PURE__ */ n(ie, { ...v, children: e }) : /* @__PURE__ */ L("button", { ...v, children: [
+  return r ? /* @__PURE__ */ n(re, { ...v, children: e }) : /* @__PURE__ */ L("button", { ...v, children: [
     e,
     m
   ] });
 });
-B.displayName = "Select.Trigger";
-const U = ({
+U.displayName = "Select.Trigger";
+const q = ({
   placeholder: e = "선택하세요"
 }) => {
-  const { value: c, itemLabels: l } = z(), i = c ? l.get(c) : void 0;
-  return /* @__PURE__ */ n("span", { className: "motile-select__value", children: i || e });
+  const { value: c, itemLabels: l } = z(), r = c ? l.get(c) : void 0;
+  return /* @__PURE__ */ n("span", { className: "motile-select__value", children: r || e });
 };
-U.displayName = "Select.Value";
-const q = M.forwardRef(({ children: e, className: c, style: l, ...i }, o) => {
+q.displayName = "Select.Value";
+const A = k.forwardRef(({ children: e, className: c, style: l, ...r }, o) => {
   const {
     open: a,
     setOpen: u,
     contentRef: g,
-    contentId: r,
+    contentId: i,
     zIndex: s,
     isMobile: S,
     closeOnBackdrop: w,
@@ -164,7 +166,7 @@ const q = M.forwardRef(({ children: e, className: c, style: l, ...i }, o) => {
   j(() => {
     y(!0);
   }, []);
-  const p = M.useCallback(
+  const p = k.useCallback(
     (m) => {
       g.current = m, typeof o == "function" ? o(m) : o && (o.current = m);
     },
@@ -194,10 +196,10 @@ const q = M.forwardRef(({ children: e, className: c, style: l, ...i }, o) => {
                   children: /* @__PURE__ */ n(
                     "div",
                     {
-                      id: r,
+                      id: i,
                       role: "listbox",
                       className: `motile-select__mobile-list ${c || ""}`,
-                      ...i,
+                      ...r,
                       children: e
                     }
                   )
@@ -222,28 +224,28 @@ const q = M.forwardRef(({ children: e, className: c, style: l, ...i }, o) => {
     "div",
     {
       ref: p,
-      id: r,
+      id: i,
       role: "listbox",
       className: f,
       style: v,
       tabIndex: -1,
-      ...i,
+      ...r,
       children: e
     }
   );
 });
-q.displayName = "Select.Content";
-const A = M.forwardRef(
+A.displayName = "Select.Content";
+const D = k.forwardRef(
   ({
     value: e,
     selected: c,
     disabled: l = !1,
-    children: i,
+    children: r,
     className: o,
     style: a,
     onClick: u,
     ...g
-  }, r) => {
+  }, i) => {
     const {
       value: s,
       onValueChange: S,
@@ -253,8 +255,8 @@ const A = M.forwardRef(
       color: y
     } = z(), p = c !== void 0 ? c : e !== void 0 && s === e;
     j(() => {
-      e !== void 0 && d(e, i);
-    }, [e, i, d]);
+      e !== void 0 && d(e, r);
+    }, [e, r, d]);
     const f = (h) => {
       l || (u == null || u(h), !h.defaultPrevented && (e !== void 0 ? S(e) : w(!1)));
     }, v = [
@@ -269,7 +271,7 @@ const A = M.forwardRef(
     return /* @__PURE__ */ L(
       "div",
       {
-        ref: r,
+        ref: i,
         role: "option",
         "aria-selected": p,
         "aria-disabled": l,
@@ -278,7 +280,7 @@ const A = M.forwardRef(
         onClick: f,
         ...g,
         children: [
-          i,
+          r,
           p && !_ && /* @__PURE__ */ n(
             "svg",
             {
@@ -305,19 +307,19 @@ const A = M.forwardRef(
     );
   }
 );
-A.displayName = "Select.Item";
+D.displayName = "Select.Item";
 const be = {
-  Root: Q,
-  Trigger: B,
-  Value: U,
-  Content: q,
-  Item: A
+  Root: B,
+  Trigger: U,
+  Value: q,
+  Content: A,
+  Item: D
 };
 export {
   be as Select,
-  q as SelectContent,
-  A as SelectItem,
-  Q as SelectRoot,
-  B as SelectTrigger,
-  U as SelectValue
+  A as SelectContent,
+  D as SelectItem,
+  B as SelectRoot,
+  U as SelectTrigger,
+  q as SelectValue
 };

package/dist/components/Sheet/Sheet.js

@@ -180,7 +180,9 @@ function E({ children: e, className: n = "", style: o }) {
     allowedSelectors: [".motile-sheet__body"]
   }), K({
     handler: i,
-    enabled: t && S.escapeKey
+    enabled: t && S.escapeKey,
+    stacked: !0
+    // 중첩 오버레이에서 ESC는 최상단만 닫는다
   }), b(() => {
     if (t)
       h(!0);

package/dist/components/SpeedDial/SpeedDial.js

@@ -16,31 +16,33 @@ const _ = R(null), g = () => {
   onOpenChange: t,
   direction: i = "up",
   color: d,
-  closeOnClickOutside: n = !0,
-  closeOnEscapeKey: a = !0,
-  children: o
+  closeOnClickOutside: a = !0,
+  closeOnEscapeKey: o = !0,
+  children: r
 }) => {
-  const l = y(null), r = b();
+  const l = y(null), n = b();
   v({
     refs: [l],
     handler: () => {
-      n && t(!1);
+      a && t(!1);
     },
     enabled: e
   }), A({
     handler: () => {
-      a && t(!1);
+      o && t(!1);
     },
-    enabled: e
+    enabled: e && o,
+    stacked: !0
+    // 중첩 오버레이에서 ESC는 최상단만 닫는다
   });
   const p = m.useMemo(
     () => ({
       open: e,
       onOpenChange: t,
       direction: i,
-      triggerId: r
+      triggerId: n
     }),
-    [e, t, i, r]
+    [e, t, i, n]
   ), u = d ? { "--motile-speeddial-color": d } : void 0;
   return /* @__PURE__ */ s(_.Provider, { value: p, children: /* @__PURE__ */ s(
     "div",
@@ -48,87 +50,87 @@ const _ = R(null), g = () => {
       ref: l,
       className: "motile-speed-dial",
       style: u,
-      children: o
+      children: r
     }
   ) });
-}, S = c(({ className: e, onClick: t, children: i, asChild: d = !1, ...n }, a) => {
-  const { open: o, onOpenChange: l, triggerId: r } = g(), p = (u) => {
-    t == null || t(u), u.defaultPrevented || l(!o);
+}, S = c(({ className: e, onClick: t, children: i, asChild: d = !1, ...a }, o) => {
+  const { open: r, onOpenChange: l, triggerId: n } = g(), p = (u) => {
+    t == null || t(u), u.defaultPrevented || l(!r);
   };
   return d ? /* @__PURE__ */ s(
     f,
     {
-      ref: a,
-      id: r,
+      ref: o,
+      id: n,
       className: e ? `motile-speed-dial__trigger ${e}` : "motile-speed-dial__trigger",
-      "aria-expanded": o,
+      "aria-expanded": r,
       "aria-haspopup": "menu",
       onClick: p,
-      ...n,
+      ...a,
       children: i
     }
   ) : /* @__PURE__ */ s(
     "button",
     {
-      ref: a,
+      ref: o,
       type: "button",
-      id: r,
+      id: n,
       className: e ? `motile-speed-dial__trigger ${e}` : "motile-speed-dial__trigger",
-      "aria-expanded": o,
+      "aria-expanded": r,
       "aria-haspopup": "menu",
       onClick: p,
-      ...n,
+      ...a,
       children: i
     }
   );
 });
 S.displayName = "SpeedDial.Trigger";
 const x = c(({ className: e, children: t, ...i }, d) => {
-  const { open: n, direction: a, triggerId: o } = g();
-  if (!n) return null;
-  const l = m.Children.map(t, (r, p) => m.isValidElement(r) ? m.cloneElement(r, {
+  const { open: a, direction: o, triggerId: r } = g();
+  if (!a) return null;
+  const l = m.Children.map(t, (n, p) => m.isValidElement(n) ? m.cloneElement(n, {
     style: {
       "--action-index": p,
-      ...r.props.style || {}
+      ...n.props.style || {}
     }
-  }) : r);
+  }) : n);
   return /* @__PURE__ */ s(
     "div",
     {
       ref: d,
       role: "menu",
-      "aria-labelledby": o,
+      "aria-labelledby": r,
       className: e ? `motile-speed-dial__actions ${e}` : "motile-speed-dial__actions",
-      "data-direction": a,
+      "data-direction": o,
       ...i,
       children: l
     }
   );
 });
 x.displayName = "SpeedDial.Actions";
-const D = c(({ className: e, onClick: t, children: i, asChild: d = !1, ...n }, a) => {
-  const o = (l) => {
+const D = c(({ className: e, onClick: t, children: i, asChild: d = !1, ...a }, o) => {
+  const r = (l) => {
     t == null || t(l);
   };
   return d ? /* @__PURE__ */ s(
     f,
     {
-      ref: a,
+      ref: o,
       role: "menuitem",
       className: e ? `motile-speed-dial__action ${e}` : "motile-speed-dial__action",
-      onClick: o,
-      ...n,
+      onClick: r,
+      ...a,
       children: i
     }
   ) : /* @__PURE__ */ s(
     "button",
     {
-      ref: a,
+      ref: o,
       type: "button",
       role: "menuitem",
       className: e ? `motile-speed-dial__action ${e}` : "motile-speed-dial__action",
-      onClick: o,
-      ...n,
+      onClick: r,
+      ...a,
       children: i
     }
   );

package/dist/components/Textarea/Textarea.d.ts

@@ -54,5 +54,11 @@ export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextArea
      * @default false
      */
     autoSize?: boolean | AutoSizeConfig;
+    /**
+     * 모바일에서 이 입력에 포커스된 채 스크롤하면 포커스를 해제해 소프트 키보드를
+     * 닫습니다 (useAutoBlur 내장). 데스크톱(비터치)에는 영향이 없습니다.
+     * @default false
+     */
+    autoBlur?: boolean;
 }
 export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/Textarea/Textarea.js

@@ -1,60 +1,64 @@
-import { jsxs as m, jsx as y } from "react/jsx-runtime";
-import { forwardRef as Q, useRef as U, useState as V, useMemo as X, useEffect as Z, useLayoutEffect as F } from "react";
+import { jsxs as m, jsx as R } from "react/jsx-runtime";
+import { forwardRef as X, useRef as C, useState as Z, useMemo as F, useEffect as z, useLayoutEffect as ee } from "react";
+import { useAutoBlur as te } from "../../hooks/useAutoBlur.js";
 import './Textarea.css';/* empty css             */
-const z = Q(
+const oe = X(
   ({
-    autoFocus: _ = !1,
-    autoSelect: R = !1,
-    isError: T,
+    autoFocus: y = !1,
+    autoSelect: _ = !1,
+    isError: j,
     errorMessage: o,
-    className: C,
+    className: I,
     value: n,
     color: b,
-    style: j,
+    style: E,
     maxLength: f,
     label: l,
     placeholder: v,
     rows: d = 4,
-    resize: I = "none",
+    resize: S = "none",
     autoSize: s = !1,
+    autoBlur: W = !1,
     ...H
-  }, E) => {
-    const S = U(null), i = E || S, [c, W] = V({ height: void 0, isMaxHeight: !1 }), p = T ?? !!o, t = X(() => typeof s == "boolean" ? s ? { minRows: d, maxRows: void 0 } : void 0 : s ? {
+  }, k) => {
+    const A = C(null), r = k || A, B = C(null);
+    te({ containerRef: B, enabled: W });
+    const [c, D] = Z({ height: void 0, isMaxHeight: !1 }), p = j ?? !!o, t = F(() => typeof s == "boolean" ? s ? { minRows: d, maxRows: void 0 } : void 0 : s ? {
       minRows: s.minRows ?? d,
       maxRows: s.maxRows
     } : void 0, [s, d]);
-    Z(() => {
-      if (_ && i.current) {
+    z(() => {
+      if (y && r.current) {
         const a = setTimeout(() => {
-          i.current && (i.current.focus(), R && i.current.select());
+          r.current && (r.current.focus(), _ && r.current.select());
         }, 50);
         return () => clearTimeout(a);
       }
-    }, [_, R]), F(() => {
-      if (!t || !i.current) return;
-      const a = i.current;
+    }, [y, _]), ee(() => {
+      if (!t || !r.current) return;
+      const a = r.current;
       if (!(n && String(n).length > 0) && c.height === void 0)
         return;
       a.style.height = "auto";
-      const J = a.scrollHeight, h = window.getComputedStyle(a), B = parseInt(h.lineHeight, 10), K = parseInt(h.paddingTop, 10), L = parseInt(h.paddingBottom, 10), M = parseInt(h.borderTopWidth, 10), O = parseInt(h.borderBottomWidth, 10), N = K + L + M + O, x = t.minRows ? B * t.minRows + N : void 0, w = t.maxRows ? B * t.maxRows + N : void 0;
-      let r = J, u = !1;
-      x !== void 0 && r < x && (r = x), w !== void 0 && r > w && (r = w, u = !0), a.style.height = `${r}px`, W(($) => r !== $.height || u !== $.isMaxHeight ? { height: r, isMaxHeight: u } : $);
+      const M = a.scrollHeight, h = window.getComputedStyle(a), N = parseInt(h.lineHeight, 10), O = parseInt(h.paddingTop, 10), Q = parseInt(h.paddingBottom, 10), U = parseInt(h.borderTopWidth, 10), V = parseInt(h.borderBottomWidth, 10), T = O + Q + U + V, x = t.minRows ? N * t.minRows + T : void 0, u = t.maxRows ? N * t.maxRows + T : void 0;
+      let i = M, w = !1;
+      x !== void 0 && i < x && (i = x), u !== void 0 && i > u && (i = u, w = !0), a.style.height = `${i}px`, D(($) => i !== $.height || w !== $.isMaxHeight ? { height: i, isMaxHeight: w } : $);
     }, [n, t]);
-    const e = "motile-textarea", k = [
+    const e = "motile-textarea", P = [
       e,
       p && `${e}--error`,
       p && `${e}--shake`,
       l && `${e}--with-label`,
-      C
-    ].filter(Boolean).join(" "), D = [
+      I
+    ].filter(Boolean).join(" "), Y = [
       `${e}-wrapper`,
       l && `${e}-wrapper--with-label`
-    ].filter(Boolean).join(" "), P = [
+    ].filter(Boolean).join(" "), q = [
       `${e}__label`,
       p && `${e}__label--error`
-    ].filter(Boolean).join(" "), Y = b ? { "--motile-textarea-color": b } : void 0, q = {
-      ...j,
-      resize: t ? "none" : I,
+    ].filter(Boolean).join(" "), G = b ? { "--motile-textarea-color": b } : void 0, J = {
+      ...E,
+      resize: t ? "none" : S,
       ...t ? {
         // 계산된 후에만 height 적용 (첫 렌더에서는 native rows 사용)
         ...c.height !== void 0 && { height: c.height },
@@ -62,24 +66,24 @@ const z = Q(
         ...c.height !== void 0 && { minHeight: "auto" },
         overflowY: c.isMaxHeight ? "auto" : "hidden"
       } : {}
-    }, A = n ? String(n).length : 0, g = f !== void 0, G = [
+    }, K = n ? String(n).length : 0, g = f !== void 0, L = [
       H["aria-describedby"],
       o ? `${e}-error` : void 0
     ].filter(Boolean).join(" ") || void 0;
-    return /* @__PURE__ */ m("div", { className: `${e}-root`, children: [
-      /* @__PURE__ */ m("div", { className: D, style: Y, children: [
-        l && /* @__PURE__ */ y("label", { className: P, children: l }),
-        /* @__PURE__ */ y(
+    return /* @__PURE__ */ m("div", { className: `${e}-root`, ref: B, children: [
+      /* @__PURE__ */ m("div", { className: Y, style: G, children: [
+        l && /* @__PURE__ */ R("label", { className: q, children: l }),
+        /* @__PURE__ */ R(
           "textarea",
           {
             ...H,
-            "aria-describedby": G,
-            ref: i,
-            className: k,
+            "aria-describedby": L,
+            ref: r,
+            className: P,
             value: n,
             maxLength: f,
             rows: (t == null ? void 0 : t.minRows) ?? d,
-            style: q,
+            style: J,
             placeholder: l ? v || " " : v
           }
         )
@@ -89,7 +93,7 @@ const z = Q(
         {
           className: `${e}__helper-text ${o && g ? `${e}__helper-text--both` : o ? `${e}__helper-text--error-only` : `${e}__helper-text--counter-only`}`,
           children: [
-            o && /* @__PURE__ */ y(
+            o && /* @__PURE__ */ R(
               "span",
               {
                 id: `${e}-error`,
@@ -99,7 +103,7 @@ const z = Q(
               }
             ),
             g && /* @__PURE__ */ m("span", { className: `${e}__counter`, children: [
-              A,
+              K,
               "/",
               f
             ] })
@@ -109,7 +113,7 @@ const z = Q(
     ] });
   }
 );
-z.displayName = "Textarea";
+oe.displayName = "Textarea";
 export {
-  z as Textarea
+  oe as Textarea
 };

package/dist/hooks/index.d.ts

@@ -1,3 +1,5 @@
+export type { UseAutoBlurOptions } from './useAutoBlur';
+export { useAutoBlur } from './useAutoBlur';
 export type { UseClickOutsideOptions } from './useClickOutside';
 export { useClickOutside } from './useClickOutside';
 export type { UseEscapeKeyOptions } from './useEscapeKey';

package/dist/hooks/index.js

@@ -1,10 +1,12 @@
-import { useClickOutside as r } from "./useClickOutside.js";
-import { useEscapeKey as u } from "./useEscapeKey.js";
-import { useMediaQuery as t } from "./useMediaQuery.js";
-import { useScrollLock as f } from "./useScrollLock.js";
+import { useAutoBlur as r } from "./useAutoBlur.js";
+import { useClickOutside as s } from "./useClickOutside.js";
+import { useEscapeKey as p } from "./useEscapeKey.js";
+import { useMediaQuery as m } from "./useMediaQuery.js";
+import { useScrollLock as c } from "./useScrollLock.js";
 export {
-  r as useClickOutside,
-  u as useEscapeKey,
-  t as useMediaQuery,
-  f as useScrollLock
+  r as useAutoBlur,
+  s as useClickOutside,
+  p as useEscapeKey,
+  m as useMediaQuery,
+  c as useScrollLock
 };