prometeo-design-system 6.3.8 → 6.4.0

package/dist/DrawerDesktop.es.js

@@ -1,119 +1,120 @@
-import { j as m } from "./jsx-runtime-GkKLlHH4.js";
-import { c as R } from "./cn-B6yFEsav.js";
-import { c as j } from "./index-BOQuZ0gG.js";
+import { j as l } from "./jsx-runtime-GkKLlHH4.js";
+import { c as k } from "./cn-B6yFEsav.js";
+import { c as R } from "./index-BOQuZ0gG.js";
 import { createPortal as B } from "react-dom";
-import { forwardRef as L, useRef as p, useState as v, useEffect as a, useCallback as x, useImperativeHandle as Y } from "react";
+import { forwardRef as L, useRef as d, useState as O, useEffect as o, useCallback as N, useImperativeHandle as Y } from "react";
 import F from "./Button.es.js";
 import { Close as H } from "./Icons/Close.es.js";
-const $ = L((t, i) => {
-  const l = p(null), [e, u] = v(t.defaultOpen || !1), [r, s] = v(null), d = p(t.onClose), c = p(r), b = p(/* @__PURE__ */ new Set()), {
-    modal: y = !1,
-    children: f,
-    className: g,
-    direction: O = "left",
-    attachToParent: h = !1,
-    closeOnOverlayClick: n = !1,
-    hideCloseButton: N = !1,
-    unmountChildrenOnClose: C = !1,
-    zindex: T = 35
-  } = t, k = p(n), D = p(e);
-  c.current = r;
-  const [V, P] = v(() => !C);
-  a(() => {
-    C && e && P(!0);
-  }, [e, C]), a(() => {
-    D.current = e;
-  }, [e]), a(() => {
-    c.current = r;
-  }, [r]), a(() => {
-    k.current = n;
-  }, [n]);
-  const I = (o) => {
-    if (!l.current)
+import { u as Z } from "./useDrawerControl-Cy-mkJxV.js";
+const $ = L((s, f) => {
+  const c = d(null), [e, m] = O(s.defaultOpen || !1), [t, y] = O(null), b = d(s.onClose), i = d(t), u = d(/* @__PURE__ */ new Set()), {
+    modal: p = !1,
+    children: a,
+    className: w,
+    direction: C = "left",
+    attachToParent: x = !1,
+    closeOnOverlayClick: r = !1,
+    hideCloseButton: T = !1,
+    unmountChildrenOnClose: h = !1,
+    zindex: S = 35
+  } = s, g = d(r), j = d(e);
+  i.current = t;
+  const [V, P] = O(() => !h);
+  o(() => {
+    h && e && P(!0);
+  }, [e, h]), o(() => {
+    j.current = e;
+  }, [e]), o(() => {
+    i.current = t;
+  }, [t]), o(() => {
+    g.current = r;
+  }, [r]);
+  const z = (n) => {
+    if (!c.current)
       return;
-    const E = l.current;
-    E && !E.contains(o.target) && k.current && D.current && w();
+    const E = c.current;
+    E && !E.contains(n.target) && g.current && j.current && v();
   };
-  a(() => {
-    if (!k.current || y || !e)
+  o(() => {
+    if (!g.current || p || !e)
       return;
-    const o = setTimeout(() => {
-      document.addEventListener("click", I);
+    const n = setTimeout(() => {
+      document.addEventListener("click", z);
     }, 0);
     return () => {
-      clearTimeout(o), document.removeEventListener("click", I);
+      clearTimeout(n), document.removeEventListener("click", z);
     };
-  }, [n, e, y]), a(() => {
-    d.current = t.onClose;
-  }, [t.onClose]);
-  const z = x((o) => {
-    s(o ?? null), u(!0);
-  }, []), w = x(() => {
-    u(!1), d.current?.(c.current), setTimeout(() => s(null), 300);
+  }, [r, e, p]), o(() => {
+    b.current = s.onClose;
+  }, [s.onClose]);
+  const D = N((n) => {
+    y(n ?? null), m(!0);
+  }, []), v = N(() => {
+    m(!1), b.current?.(i.current), setTimeout(() => y(null), 300);
   }, []);
-  a(() => {
-    b.current.forEach((o) => {
+  o(() => {
+    u.current.forEach((n) => {
       try {
-        o(e);
+        n(e);
       } catch {
       }
     });
   }, [e]), Y(
-    i,
+    f,
     () => ({
-      open: z,
-      close: w,
+      open: D,
+      close: v,
       isOpen: e,
-      subscribeOpenChange: (o) => (b.current.add(o), () => {
-        b.current.delete(o);
+      subscribeOpenChange: (n) => (u.current.add(n), () => {
+        u.current.delete(n);
       }),
-      getContext: () => c.current
+      getContext: () => i.current
     }),
-    [e, z, w]
+    [e, D, v]
   );
-  const S = /* @__PURE__ */ m.jsx(
+  const I = /* @__PURE__ */ l.jsx(
     q,
     {
-      context: r,
-      ref: l,
+      context: t,
+      ref: c,
       isOpen: e,
-      close: w,
-      direction: O,
-      modal: y,
-      className: g,
-      attachToParent: h,
-      closeOnOverlayClick: n,
-      hideCloseButton: N,
-      zindex: T,
-      children: (!C || V) && (typeof f == "function" ? f(r) : f)
+      close: v,
+      direction: C,
+      modal: p,
+      className: w,
+      attachToParent: x,
+      closeOnOverlayClick: r,
+      hideCloseButton: T,
+      zindex: S,
+      children: (!h || V) && (typeof a == "function" ? a(t) : a)
     }
   );
-  return h ? S : B(S, document.body);
+  return x ? I : B(I, document.body);
 });
 $.displayName = "DrawerDesktopV2";
 const q = ({
-  ref: t,
-  children: i,
-  direction: l = "left",
+  ref: s,
+  children: f,
+  direction: c = "left",
   isOpen: e,
-  close: u,
-  modal: r = !1,
-  className: s,
-  attachToParent: d = !1,
-  closeOnOverlayClick: c = !1,
-  hideCloseButton: b = !1,
-  context: y,
-  zindex: f = 499
+  close: m,
+  modal: t = !1,
+  className: y,
+  attachToParent: b = !1,
+  closeOnOverlayClick: i = !1,
+  hideCloseButton: u = !1,
+  context: p,
+  zindex: a = 499
 }) => {
-  a(() => {
-    if (e && r) {
-      const n = window.scrollY;
-      return document.body.style.position = "fixed", document.body.style.top = `-${n}px`, document.body.style.width = "100%", () => {
-        document.body.style.position = "", document.body.style.top = "", document.body.style.width = "", window.scrollTo(0, n);
+  o(() => {
+    if (e && t) {
+      const r = window.scrollY;
+      return document.body.style.position = "fixed", document.body.style.top = `-${r}px`, document.body.style.width = "100%", () => {
+        document.body.style.position = "", document.body.style.top = "", document.body.style.width = "", window.scrollTo(0, r);
       };
     }
-  }, [e, r]);
-  const g = j("border-neutral-strong-default", {
+  }, [e, t]);
+  const w = R("border-neutral-strong-default", {
     variants: {
       isOpen: {
         true: "desktop-drawer-visible",
@@ -124,7 +125,7 @@ const q = ({
         right: "right-0 border-l-[1px] border-r-0"
       }
     }
-  }), O = j(
+  }), C = R(
     "fixed inset-0 bg-black/60 z-[55] cursor-default",
     {
       variants: {
@@ -134,7 +135,7 @@ const q = ({
         }
       }
     }
-  ), h = j("", {
+  ), x = R("", {
     variants: {
       direction: {
         left: "right-0",
@@ -142,82 +143,60 @@ const q = ({
       }
     }
   });
-  return /* @__PURE__ */ m.jsxs(m.Fragment, { children: [
-    r && /* @__PURE__ */ m.jsx(
+  return /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
+    t && /* @__PURE__ */ l.jsx(
       "div",
       {
-        className: R(O({ isOpen: e })),
-        style: { zIndex: f },
-        onClick: (n) => {
-          n.preventDefault(), n.stopPropagation(), c && u();
+        className: k(C({ isOpen: e })),
+        style: { zIndex: a },
+        onClick: (r) => {
+          r.preventDefault(), r.stopPropagation(), i && m();
         },
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ m.jsxs(
+    /* @__PURE__ */ l.jsxs(
       "div",
       {
-        ref: t,
-        className: R(
+        ref: s,
+        className: k(
           "bg-neutral-strong-default h-full top-0 z-60 w-max overflow-y-auto",
-          d ? "absolute" : "fixed",
-          g({ isOpen: e, direction: l }),
-          !b && "p-4 pt-10",
-          s
+          b ? "absolute" : "fixed",
+          w({ isOpen: e, direction: c }),
+          !u && "p-4 pt-10",
+          y
         ),
         role: "dialog",
-        "aria-modal": r,
-        style: { zIndex: f + 1 },
+        "aria-modal": t,
+        style: { zIndex: a + 1 },
         children: [
-          !b && /* @__PURE__ */ m.jsx(
+          !u && /* @__PURE__ */ l.jsx(
             F,
             {
-              icon: /* @__PURE__ */ m.jsx(H, { size: 24 }),
+              icon: /* @__PURE__ */ l.jsx(H, { size: 24 }),
               animate: !1,
               animateIcon: !1,
               type: "button",
               size: "small",
               variant: "text",
-              onClick: u,
+              onClick: m,
               label: "",
               color: "secondary",
-              className: R(
+              className: k(
                 "absolute top-0 z-50",
-                h({ direction: l })
+                x({ direction: c })
               ),
               "aria-label": "Close drawer",
-              style: { zIndex: f + 2 }
+              style: { zIndex: a + 2 }
             }
           ),
-          typeof i == "function" ? i(y) : i
+          typeof f == "function" ? f(p) : f
         ]
       }
     )
   ] });
-}, W = () => {
-  const t = p(null), [i, l] = v(!1), e = x((s) => {
-    t.current?.open(s);
-  }, []), u = x(() => {
-    t.current?.close();
-  }, []), r = x(() => t.current?.getContext() ?? null, []);
-  return a(() => {
-    const s = t.current?.subscribeOpenChange;
-    if (!s) return;
-    const d = s((c) => {
-      l(c);
-    });
-    return () => {
-      d && d();
-    };
-  }, [t.current?.subscribeOpenChange]), {
-    isOpen: i,
-    open: e,
-    close: u,
-    drawerRef: t,
-    getContext: r
-  };
 };
 export {
   $ as default,
-  W as useDrawerDesktop
+  Z as useDrawerControl
 };