@cagatayfdn/flora-components 0.0.93 → 0.0.95

package/dist/Modal.css

@@ -1 +1 @@
-._modal_1jora_1{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;width:100%;height:100%;background-color:#00000073;display:flex;justify-content:center;overflow:auto;align-items:center}._modal_1jora_1 ._content_1jora_16{border-radius:10px;background-color:#333b57;position:relative;box-shadow:0 3px 6px -4px #0000007a,0 6px 16px #00000052,0 9px 28px 8px #0003;pointer-events:auto;margin:30px;width:450px;display:inline-block}._modal_1jora_1 ._content_1jora_16 ._header_1jora_26{padding:16px 30px;position:relative;border-bottom:1px solid #3b4768}._modal_1jora_1 ._content_1jora_16 ._header_1jora_26 h2{margin:0;font-size:20px;font-weight:500}._modal_1jora_1 ._content_1jora_16 ._header_1jora_26 h2:before{content:"";position:absolute;top:50%;left:0;width:4px;height:16px;margin-top:-8px;background-color:#4482ff}._modal_1jora_1 ._content_1jora_16 ._header_1jora_26 ._close_1jora_46{position:absolute;right:30px;top:50%;cursor:pointer;margin-top:-10px}._modal_1jora_1 ._content_1jora_16 ._body_1jora_53{padding:40px 30px;height:100%}._modal_1jora_1 ._content_1jora_16 ._body_1jora_53 ._desc_1jora_57{color:#bcbcbc;margin-bottom:23px}._modal__light_1jora_61 ._content_1jora_16{background-color:#f5f5f5}._modal__light_1jora_61 ._content_1jora_16 ._header_1jora_26{background-color:#fff;border-bottom-color:#c8daec;border-radius:10px 10px 0 0}._modal__light_1jora_61 ._content_1jora_16 ._header_1jora_26 h2,._modal__light_1jora_61 ._content_1jora_16 ._header_1jora_26 ._close_1jora_46{color:#3d4561}._modal__light_1jora_61 ._content_1jora_16 ._body_1jora_53,._modal__light_1jora_61 ._content_1jora_16 ._body_1jora_53 ._desc_1jora_57{color:#788195}
+._overlay_yit4w_1{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999}._modal_yit4w_10{position:fixed;top:0;right:0;bottom:0;left:0;z-index:999;width:100%;height:100%;display:flex;background:#00000073;justify-content:center;overflow:auto;align-items:center}._modal_yit4w_10 ._content_yit4w_25{border-radius:10px;background-color:#333b57;position:relative;box-shadow:0 3px 6px -4px #0000007a,0 6px 16px #00000052,0 9px 28px 8px #0003;pointer-events:auto;margin:30px;width:450px;display:inline-block}._modal_yit4w_10 ._content_yit4w_25 ._header_yit4w_35{padding:16px 30px;position:relative;border-bottom:1px solid #3b4768}._modal_yit4w_10 ._content_yit4w_25 ._header_yit4w_35 h2{margin:0;font-size:20px;font-weight:500}._modal_yit4w_10 ._content_yit4w_25 ._header_yit4w_35 h2:before{content:"";position:absolute;top:50%;left:0;width:4px;height:16px;margin-top:-8px;background-color:#4482ff}._modal_yit4w_10 ._content_yit4w_25 ._header_yit4w_35 ._close_yit4w_55{position:absolute;right:30px;top:50%;cursor:pointer;margin-top:-10px}._modal_yit4w_10 ._content_yit4w_25 ._body_yit4w_62{padding:40px 30px;height:100%}._modal_yit4w_10 ._content_yit4w_25 ._body_yit4w_62 ._desc_yit4w_66{color:#bcbcbc;margin-bottom:23px}._modal__light_yit4w_70 ._content_yit4w_25{background-color:#f5f5f5}._modal__light_yit4w_70 ._content_yit4w_25 ._header_yit4w_35{background-color:#fff;border-bottom-color:#c8daec;border-radius:10px 10px 0 0}._modal__light_yit4w_70 ._content_yit4w_25 ._header_yit4w_35 h2,._modal__light_yit4w_70 ._content_yit4w_25 ._header_yit4w_35 ._close_yit4w_55{color:#3d4561}._modal__light_yit4w_70 ._content_yit4w_25 ._body_yit4w_62,._modal__light_yit4w_70 ._content_yit4w_25 ._body_yit4w_62 ._desc_yit4w_66{color:#788195}

package/dist/components/Modal/Modal.js

@@ -1,57 +1,73 @@
 import { j as e } from "../../jsx-runtime-BcAkpsdy.js";
-import { useEffect as x } from "react";
+import { useEffect as u } from "react";
 import { c as s } from "../../index-BHf7G3IG.js";
-import { Icons as u } from "../../assets/icons/icons.js";
+import { Icons as w } from "../../assets/icons/icons.js";
 import N from "../Icon/index.js";
-import '../../Modal.css';const b = "_modal_1jora_1", f = "_content_1jora_16", v = "_header_1jora_26", g = "_close_1jora_46", C = "_body_1jora_53", S = "_desc_1jora_57", w = "_modal__light_1jora_61", o = {
-  modal: b,
-  content: f,
-  header: v,
-  close: g,
-  body: C,
+import '../../Modal.css';const b = "_overlay_yit4w_1", f = "_modal_yit4w_10", g = "_content_yit4w_25", C = "_header_yit4w_35", k = "_close_yit4w_55", E = "_body_yit4w_62", S = "_desc_yit4w_66", F = "_modal__light_yit4w_70", o = {
+  overlay: b,
+  modal: f,
+  content: g,
+  header: C,
+  close: k,
+  body: E,
   desc: S,
-  modal__light: w
-}, A = (n) => {
+  modal__light: F
+}, H = (i) => {
   const {
-    children: r,
+    children: m,
     header: a,
-    title: c,
-    description: l,
-    className: m,
-    onClose: i,
-    visible: t = !0,
-    appearance: d,
-    headerClass: _,
-    descriptionClass: h
-  } = n, j = () => {
+    title: t,
+    description: d,
+    className: y,
+    onClose: _,
+    visible: c = !0,
+    appearance: l,
+    headerClass: h,
+    descriptionClass: v
+  } = i, x = () => {
     document.body.style.width = "calc(100% - 15px)", document.body.className = "overflow-hidden";
-  }, y = () => {
-    document.body.className = "", document.body.removeAttribute("style");
   }, p = () => {
-    i();
+    document.body.className = "", document.body.removeAttribute("style");
+  }, n = () => {
+    _();
   };
-  return x(() => (t && j(), () => {
-    y();
-  }), [t]), /* @__PURE__ */ e.jsx(e.Fragment, { children: t && /* @__PURE__ */ e.jsx(
-    "div",
-    {
-      className: s(o.modal, {
-        [o[`modal__${d}`]]: d
-      }),
-      "data-testid": "modal-container",
-      children: /* @__PURE__ */ e.jsxs("div", { className: s(m, o.content), children: [
-        c || a ? /* @__PURE__ */ e.jsxs("div", { className: s(o.header, _), children: [
-          c ? /* @__PURE__ */ e.jsx("h2", { children: c }) : a,
-          /* @__PURE__ */ e.jsx("span", { className: o.close, onClick: p, children: /* @__PURE__ */ e.jsx(N, { name: u.Close }) })
-        ] }) : /* @__PURE__ */ e.jsx(e.Fragment, {}),
-        /* @__PURE__ */ e.jsxs("div", { className: o.body, children: [
-          l && /* @__PURE__ */ e.jsx("p", { className: s(o.desc, h), children: l }),
-          r
+  return u(() => {
+    const r = (j) => {
+      j.key === "Escape" && n();
+    };
+    return document.addEventListener("keydown", r), c && x(), () => {
+      p(), document.removeEventListener("keydown", r);
+    };
+  }, [c]), /* @__PURE__ */ e.jsx(e.Fragment, { children: c && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(
+      "div",
+      {
+        "data-testid": "modal-overlay",
+        onClick: n,
+        className: o.overlay
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      "div",
+      {
+        className: s(o.modal, {
+          [o[`modal__${l}`]]: l
+        }),
+        "data-testid": "modal-container",
+        children: /* @__PURE__ */ e.jsxs("div", { className: s(y, o.content), children: [
+          t || a ? /* @__PURE__ */ e.jsxs("div", { className: s(o.header, h), children: [
+            t ? /* @__PURE__ */ e.jsx("h2", { children: t }) : a,
+            /* @__PURE__ */ e.jsx("span", { className: o.close, onClick: n, children: /* @__PURE__ */ e.jsx(N, { name: w.Close }) })
+          ] }) : /* @__PURE__ */ e.jsx(e.Fragment, {}),
+          /* @__PURE__ */ e.jsxs("div", { className: o.body, children: [
+            d && /* @__PURE__ */ e.jsx("p", { className: s(o.desc, v), children: d }),
+            m
+          ] })
         ] })
-      ] })
-    }
-  ) });
+      }
+    )
+  ] }) });
 };
 export {
-  A as default
+  H as default
 };

package/dist/index.d.mts

@@ -1377,7 +1377,9 @@ export declare function useDisclosure(isOpenInit?: boolean): {
     onToggle: () => void;
 };
 
-export declare function useDrawer(): (string | ((id: string) => void))[];
+declare type UseDrawer = [(id: string) => void, (id: string) => void, string];
+
+export declare function useDrawer(): UseDrawer;
 
 export declare const useDrawerContext: () => DrawerContextType;
 

package/dist/index.d.ts

@@ -1377,7 +1377,9 @@ export declare function useDisclosure(isOpenInit?: boolean): {
     onToggle: () => void;
 };
 
-export declare function useDrawer(): (string | ((id: string) => void))[];
+declare type UseDrawer = [(id: string) => void, (id: string) => void, string];
+
+export declare function useDrawer(): UseDrawer;
 
 export declare const useDrawerContext: () => DrawerContextType;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cagatayfdn/flora-components",
-  "version": "0.0.93",
+  "version": "0.0.95",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -98,4 +98,4 @@
     "typescript": "^5.4.3",
     "vite": "^5.2.0"
   }
-}
+}