quirk-ui 0.1.200 → 0.1.202
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/core/components/Modal/Modal.test.cjs +1 -1
- package/dist/core/components/Modal/Modal.test.mjs +28 -18
- package/dist/core/components/Modal/index.cjs +1 -1
- package/dist/core/components/Modal/index.mjs +75 -70
- package/dist/index38.css +1 -1
- package/dist/index38.css.d.ts +16 -15
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";const t=require("react/jsx-runtime"),e=require("../../../react.esm-C_9Ma9mj.cjs"),n=require("./index.cjs");require("../../../index-CW_Ehh1q.cjs");e.describe("Modal",()=>{e.beforeEach(()=>{document.body.innerHTML=""}),e.describe("Rendering",()=>{e.it("renders the trigger button",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Modal Content"}),trigger:t.jsx("button",{children:"Open Modal"})})),e.globalExpect(e.screen.getByRole("button",{name:"Open Modal"})).toBeInTheDocument()}),e.it("does not render modal content initially",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Modal Content"}),trigger:t.jsx("button",{children:"Open Modal"})})),e.globalExpect(e.screen.queryByText("Modal Content")).not.toBeInTheDocument()}),e.it("renders modal content when trigger is clicked",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Modal Content"}),trigger:t.jsx("button",{children:"Open Modal"})})),e.fireEvent.click(e.screen.getByRole("button",{name:"Open Modal"})),e.globalExpect(e.screen.getByText("Modal Content")).toBeInTheDocument()})}),e.describe("
|
|
1
|
+
"use strict";const t=require("react/jsx-runtime"),e=require("../../../react.esm-C_9Ma9mj.cjs"),n=require("./index.cjs");require("../../../index-CW_Ehh1q.cjs");e.describe("Modal",()=>{e.beforeEach(()=>{document.body.innerHTML="",document.body.style.position="",document.body.style.top="",document.body.style.width="",document.body.style.overflowY=""}),e.describe("Scroll lock",()=>{e.it("locks scroll on body when modal opens",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"})})),e.fireEvent.click(e.screen.getByRole("button",{name:"Open"})),e.globalExpect(document.body.style.position).toBe("fixed"),e.globalExpect(document.body.style.width).toBe("100%")}),e.it("unlocks scroll on body when modal closes",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"})})),e.fireEvent.click(e.screen.getByRole("button",{name:"Open"})),e.fireEvent.click(e.screen.getByRole("button",{name:/close/i})),e.globalExpect(document.body.style.position).toBe(""),e.globalExpect(document.body.style.width).toBe("")})}),e.describe("Rendering",()=>{e.it("renders the trigger button",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Modal Content"}),trigger:t.jsx("button",{children:"Open Modal"})})),e.globalExpect(e.screen.getByRole("button",{name:"Open Modal"})).toBeInTheDocument()}),e.it("does not render modal content initially",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Modal Content"}),trigger:t.jsx("button",{children:"Open Modal"})})),e.globalExpect(e.screen.queryByText("Modal Content")).not.toBeInTheDocument()}),e.it("renders modal content when trigger is clicked",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Modal Content"}),trigger:t.jsx("button",{children:"Open Modal"})})),e.fireEvent.click(e.screen.getByRole("button",{name:"Open Modal"})),e.globalExpect(e.screen.getByText("Modal Content")).toBeInTheDocument()})}),e.describe("Form render prop",()=>{e.it("renders form via renderForm when formData provided",()=>{const o={_id:"form-1",heading:"Contact"},l=e.vi.fn(()=>t.jsx("form",{"data-testid":"the-form"}));e.render(t.jsx(n.Modal,{trigger:t.jsx("button",{children:"Open"}),isOpen:!0,formData:o,renderForm:l})),e.globalExpect(l).toHaveBeenCalledWith(o),e.globalExpect(e.screen.getByTestId("the-form")).toBeInTheDocument()}),e.it("explicit content prop takes priority over renderForm",()=>{const o=e.vi.fn(()=>t.jsx("form",{"data-testid":"the-form"}));e.render(t.jsx(n.Modal,{trigger:t.jsx("button",{children:"Open"}),isOpen:!0,content:t.jsx("p",{children:"Explicit content"}),formData:{_id:"form-1"},renderForm:o})),e.globalExpect(e.screen.getByText("Explicit content")).toBeInTheDocument(),e.globalExpect(o).not.toHaveBeenCalled()}),e.it("does not call renderForm when formData is not provided",()=>{const o=e.vi.fn(()=>t.jsx("form",{"data-testid":"the-form"}));e.render(t.jsx(n.Modal,{trigger:t.jsx("button",{children:"Open"}),isOpen:!0,renderForm:o})),e.globalExpect(o).not.toHaveBeenCalled(),e.globalExpect(e.screen.queryByTestId("the-form")).not.toBeInTheDocument()})}),e.describe("Sizes",()=>{e.it("applies small size",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),isOpen:!0,size:"sm"})),e.globalExpect(document.querySelector(".container")).toHaveClass("size-sm")}),e.it("applies medium size by default",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),isOpen:!0})),e.globalExpect(document.querySelector(".container")).toHaveClass("size-md")}),e.it("applies large size",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),isOpen:!0,size:"lg"})),e.globalExpect(document.querySelector(".container")).toHaveClass("size-lg")})}),e.describe("Title",()=>{e.it("does not render title when not provided",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),isOpen:!0})),e.globalExpect(document.querySelector(".title")).not.toBeInTheDocument()})}),e.describe("Close Button",()=>{e.it("shows close button by default",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),isOpen:!0})),e.globalExpect(e.screen.getByRole("button",{name:/close/i})).toBeInTheDocument()}),e.it("hides close button when showCloseButton is false",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),isOpen:!0,showCloseButton:!1})),e.globalExpect(e.screen.queryByRole("button",{name:/close/i})).not.toBeInTheDocument()}),e.it("closes modal when close button is clicked",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Modal Content"}),trigger:t.jsx("button",{children:"Open Modal"})})),e.fireEvent.click(e.screen.getByRole("button",{name:"Open Modal"})),e.globalExpect(e.screen.getByText("Modal Content")).toBeInTheDocument(),e.fireEvent.click(e.screen.getByRole("button",{name:/close/i})),e.globalExpect(e.screen.queryByText("Modal Content")).not.toBeInTheDocument()})}),e.describe("Overlay Click",()=>{e.it("closes modal when clicking overlay by default",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Modal Content"}),trigger:t.jsx("button",{children:"Open Modal"})})),e.fireEvent.click(e.screen.getByRole("button",{name:"Open Modal"})),e.fireEvent.click(document.querySelector(".overlay")),e.globalExpect(e.screen.queryByText("Modal Content")).not.toBeInTheDocument()}),e.it("does not close when closeOnOverlayClick is false",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Modal Content"}),trigger:t.jsx("button",{children:"Open Modal"}),closeOnOverlayClick:!1})),e.fireEvent.click(e.screen.getByRole("button",{name:"Open Modal"})),e.fireEvent.click(document.querySelector(".overlay")),e.globalExpect(e.screen.getByText("Modal Content")).toBeInTheDocument()}),e.it("does not close when clicking modal content",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Modal Content"}),trigger:t.jsx("button",{children:"Open Modal"})})),e.fireEvent.click(e.screen.getByRole("button",{name:"Open Modal"})),e.fireEvent.click(e.screen.getByText("Modal Content")),e.globalExpect(e.screen.getByText("Modal Content")).toBeInTheDocument()})}),e.describe("Escape Key",()=>{e.it("closes modal on Escape key by default",async()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Modal Content"}),trigger:t.jsx("button",{children:"Open Modal"})})),e.fireEvent.click(e.screen.getByRole("button",{name:"Open Modal"})),e.fireEvent.keyDown(document,{key:"Escape"}),await e.waitForWrapper(()=>{e.globalExpect(e.screen.queryByText("Modal Content")).not.toBeInTheDocument()})}),e.it("does not close on Escape if closeOnEscape is false",async()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Modal Content"}),trigger:t.jsx("button",{children:"Open Modal"}),closeOnEscape:!1})),e.fireEvent.click(e.screen.getByRole("button",{name:"Open Modal"})),e.fireEvent.keyDown(document,{key:"Escape"}),await e.waitForWrapper(()=>{e.globalExpect(e.screen.getByText("Modal Content")).toBeInTheDocument()})})}),e.describe("Controlled Mode",()=>{e.it("respects controlled open state",()=>{const{rerender:o}=e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Modal Content"}),trigger:t.jsx("button",{children:"Open Modal"}),isOpen:!1}));e.globalExpect(e.screen.queryByText("Modal Content")).not.toBeInTheDocument(),o(t.jsx(n.Modal,{content:t.jsx("div",{children:"Modal Content"}),trigger:t.jsx("button",{children:"Open Modal"}),isOpen:!0})),e.globalExpect(e.screen.getByText("Modal Content")).toBeInTheDocument()}),e.it("calls onOpen when trigger is clicked in controlled mode",()=>{const o=e.vi.fn();e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),isOpen:!1,onOpen:o})),e.fireEvent.click(e.screen.getByRole("button",{name:"Open"})),e.globalExpect(o).toHaveBeenCalled()}),e.it("calls onClose when close button is clicked in controlled mode",()=>{const o=e.vi.fn();e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),isOpen:!0,onClose:o})),e.fireEvent.click(e.screen.getByRole("button",{name:/close/i})),e.globalExpect(o).toHaveBeenCalled()})}),e.describe("Accessibility",()=>{e.it("has dialog role",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),isOpen:!0})),e.globalExpect(e.screen.getByRole("dialog")).toBeInTheDocument()}),e.it("has aria-modal attribute",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),isOpen:!0})),e.globalExpect(e.screen.getByRole("dialog")).toHaveAttribute("aria-modal","true")})}),e.describe("Custom Styling",()=>{e.it("applies custom className to modal",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),className:"custom-modal",isOpen:!0})),e.globalExpect(document.querySelector(".modal")).toHaveClass("custom-modal")}),e.it("applies custom className to overlay",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),overlayClassName:"custom-overlay",isOpen:!0})),e.globalExpect(document.querySelector(".overlay")).toHaveClass("custom-overlay")}),e.it("applies custom inline styles",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),style:{maxWidth:"500px"},isOpen:!0})),e.globalExpect(document.querySelector(".modal").style.maxWidth).toBe("500px")})})});
|
|
@@ -1,10 +1,20 @@
|
|
|
1
1
|
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { d, b as
|
|
2
|
+
import { d, b as m, i as l, r, f as i, s as n, g as t, v as a, w as u } from "../../../react.esm-DjxyacK8.js";
|
|
3
3
|
import { Modal as o } from "./index.mjs";
|
|
4
4
|
import "../../../index-DPGXWTtt.js";
|
|
5
5
|
d("Modal", () => {
|
|
6
|
-
|
|
7
|
-
document.body.innerHTML = "";
|
|
6
|
+
m(() => {
|
|
7
|
+
document.body.innerHTML = "", document.body.style.position = "", document.body.style.top = "", document.body.style.width = "", document.body.style.overflowY = "";
|
|
8
|
+
}), d("Scroll lock", () => {
|
|
9
|
+
l("locks scroll on body when modal opens", () => {
|
|
10
|
+
r(
|
|
11
|
+
/* @__PURE__ */ e(o, { content: /* @__PURE__ */ e("div", { children: "Content" }), trigger: /* @__PURE__ */ e("button", { children: "Open" }) })
|
|
12
|
+
), i.click(n.getByRole("button", { name: "Open" })), t(document.body.style.position).toBe("fixed"), t(document.body.style.width).toBe("100%");
|
|
13
|
+
}), l("unlocks scroll on body when modal closes", () => {
|
|
14
|
+
r(
|
|
15
|
+
/* @__PURE__ */ e(o, { content: /* @__PURE__ */ e("div", { children: "Content" }), trigger: /* @__PURE__ */ e("button", { children: "Open" }) })
|
|
16
|
+
), i.click(n.getByRole("button", { name: "Open" })), i.click(n.getByRole("button", { name: /close/i })), t(document.body.style.position).toBe(""), t(document.body.style.width).toBe("");
|
|
17
|
+
});
|
|
8
18
|
}), d("Rendering", () => {
|
|
9
19
|
l("renders the trigger button", () => {
|
|
10
20
|
r(
|
|
@@ -39,9 +49,9 @@ d("Modal", () => {
|
|
|
39
49
|
)
|
|
40
50
|
), i.click(n.getByRole("button", { name: "Open Modal" })), t(n.getByText("Modal Content")).toBeInTheDocument();
|
|
41
51
|
});
|
|
42
|
-
}), d("
|
|
52
|
+
}), d("Form render prop", () => {
|
|
43
53
|
l("renders form via renderForm when formData provided", () => {
|
|
44
|
-
const c = { _id: "form-1", heading: "Contact" },
|
|
54
|
+
const c = { _id: "form-1", heading: "Contact" }, s = a.fn(() => /* @__PURE__ */ e("form", { "data-testid": "the-form" }));
|
|
45
55
|
r(
|
|
46
56
|
/* @__PURE__ */ e(
|
|
47
57
|
o,
|
|
@@ -49,12 +59,12 @@ d("Modal", () => {
|
|
|
49
59
|
trigger: /* @__PURE__ */ e("button", { children: "Open" }),
|
|
50
60
|
isOpen: !0,
|
|
51
61
|
formData: c,
|
|
52
|
-
renderForm:
|
|
62
|
+
renderForm: s
|
|
53
63
|
}
|
|
54
64
|
)
|
|
55
|
-
), t(
|
|
56
|
-
}), l("explicit content prop takes priority over
|
|
57
|
-
const c =
|
|
65
|
+
), t(s).toHaveBeenCalledWith(c), t(n.getByTestId("the-form")).toBeInTheDocument();
|
|
66
|
+
}), l("explicit content prop takes priority over renderForm", () => {
|
|
67
|
+
const c = a.fn(() => /* @__PURE__ */ e("form", { "data-testid": "the-form" }));
|
|
58
68
|
r(
|
|
59
69
|
/* @__PURE__ */ e(
|
|
60
70
|
o,
|
|
@@ -62,23 +72,23 @@ d("Modal", () => {
|
|
|
62
72
|
trigger: /* @__PURE__ */ e("button", { children: "Open" }),
|
|
63
73
|
isOpen: !0,
|
|
64
74
|
content: /* @__PURE__ */ e("p", { children: "Explicit content" }),
|
|
65
|
-
|
|
66
|
-
|
|
75
|
+
formData: { _id: "form-1" },
|
|
76
|
+
renderForm: c
|
|
67
77
|
}
|
|
68
78
|
)
|
|
69
|
-
), t(n.getByText("Explicit content")).toBeInTheDocument(), t(
|
|
70
|
-
}), l("does not
|
|
79
|
+
), t(n.getByText("Explicit content")).toBeInTheDocument(), t(c).not.toHaveBeenCalled();
|
|
80
|
+
}), l("does not call renderForm when formData is not provided", () => {
|
|
81
|
+
const c = a.fn(() => /* @__PURE__ */ e("form", { "data-testid": "the-form" }));
|
|
71
82
|
r(
|
|
72
83
|
/* @__PURE__ */ e(
|
|
73
84
|
o,
|
|
74
85
|
{
|
|
75
86
|
trigger: /* @__PURE__ */ e("button", { children: "Open" }),
|
|
76
87
|
isOpen: !0,
|
|
77
|
-
|
|
78
|
-
renderRichText: () => /* @__PURE__ */ e("p", { children: "Should not render" })
|
|
88
|
+
renderForm: c
|
|
79
89
|
}
|
|
80
90
|
)
|
|
81
|
-
), t(
|
|
91
|
+
), t(c).not.toHaveBeenCalled(), t(n.queryByTestId("the-form")).not.toBeInTheDocument();
|
|
82
92
|
});
|
|
83
93
|
}), d("Sizes", () => {
|
|
84
94
|
l("applies small size", () => {
|
|
@@ -252,7 +262,7 @@ d("Modal", () => {
|
|
|
252
262
|
)
|
|
253
263
|
), t(n.getByText("Modal Content")).toBeInTheDocument();
|
|
254
264
|
}), l("calls onOpen when trigger is clicked in controlled mode", () => {
|
|
255
|
-
const c =
|
|
265
|
+
const c = a.fn();
|
|
256
266
|
r(
|
|
257
267
|
/* @__PURE__ */ e(
|
|
258
268
|
o,
|
|
@@ -265,7 +275,7 @@ d("Modal", () => {
|
|
|
265
275
|
)
|
|
266
276
|
), i.click(n.getByRole("button", { name: "Open" })), t(c).toHaveBeenCalled();
|
|
267
277
|
}), l("calls onClose when close button is clicked in controlled mode", () => {
|
|
268
|
-
const c =
|
|
278
|
+
const c = a.fn();
|
|
269
279
|
r(
|
|
270
280
|
/* @__PURE__ */ e(
|
|
271
281
|
o,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../index38.css');const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../index38.css');const e=require("react/jsx-runtime"),d=require("react"),Y=require("react-dom"),L=require("../../../x-Dft9NVe_.cjs"),R="_overlay_1hn68_2",P="_fadeIn_1hn68_1",D="_container_1hn68_19",A="_modal_1hn68_49",C="_slideUp_1hn68_1",F="_closeButton_1hn68_60",K="_title_1hn68_87",X="_content_1hn68_97",G="_intro_1hn68_116",H="_trigger_1hn68_123",J="_slideUpSheet_1hn68_1",l={overlay:R,fadeIn:P,container:D,"size-sm":"_size-sm_1hn68_26","size-md":"_size-md_1hn68_30","size-lg":"_size-lg_1hn68_34","size-xl":"_size-xl_1hn68_38","size-full":"_size-full_1hn68_42",modal:A,slideUp:C,closeButton:F,title:K,content:X,intro:G,trigger:H,slideUpSheet:J},Q=()=>{if(typeof document>"u")return;const o=window.scrollY;document.body.style.position="fixed",document.body.style.top=`-${o}px`,document.body.style.width="100%",document.body.style.overflowY="scroll"},x=()=>{if(typeof document>"u")return;const o=Math.abs(parseInt(document.body.style.top||"0",10));document.body.style.position="",document.body.style.top="",document.body.style.width="",document.body.style.overflowY="",o&&window.scrollTo(0,o)};function V({content:o,trigger:w,isOpen:y,onOpen:c,onClose:i,size:k="md",closeOnEscape:h=!0,closeOnOverlayClick:z=!0,showCloseButton:E=!0,className:j,overlayClassName:$,style:S,formData:v,renderForm:b}){const[q,g]=d.useState(!1),f=d.useRef(null),m=y!==void 0,t=m?y:q,I=()=>{m||g(!0),c==null||c()},a=()=>{m||g(!1),i==null||i()},N=()=>t?a():I(),U=()=>{z&&a()};d.useEffect(()=>{if(!h||!t)return;const n=r=>{r.key==="Escape"&&a()};return document.addEventListener("keydown",n),()=>document.removeEventListener("keydown",n)},[t,h]),d.useEffect(()=>(t?Q():x(),()=>x()),[t]),d.useEffect(()=>{if(!t||!f.current)return;const n=f.current,r=n.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),s=r[0],u=r[r.length-1],p=_=>{_.key==="Tab"&&(_.shiftKey?document.activeElement===s&&(_.preventDefault(),u==null||u.focus()):document.activeElement===u&&(_.preventDefault(),s==null||s.focus()))};return n.addEventListener("keydown",p),s==null||s.focus(),()=>n.removeEventListener("keydown",p)},[t]);const B=l[`size-${k}`]??"",M=o!==void 0?o:e.jsx(e.Fragment,{children:v&&b?b(v):null}),T=t?e.jsx("div",{className:`${l.overlay} ${$??""}`.trim(),onClick:U,role:"dialog","aria-modal":"true",children:e.jsxs("div",{className:`${B} ${l.container}`,children:[E&&e.jsx("button",{"aria-label":"Close",className:l.closeButton,onClick:a,type:"button",children:e.jsx(L.X,{size:20})}),e.jsx("div",{ref:f,className:`${l.modal} ${j??""}`.trim(),style:S,onClick:n=>n.stopPropagation(),children:e.jsx("div",{className:l.content,children:M})})]})}):null;return e.jsxs(e.Fragment,{children:[e.jsx("div",{className:l.trigger,onClick:N,children:w}),typeof window<"u"&&Y.createPortal(T,document.body)]})}exports.Modal=V;
|
|
@@ -1,105 +1,110 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useState as
|
|
3
|
-
import { createPortal as
|
|
4
|
-
import { X as
|
|
5
|
-
import '../../../index38.css';const
|
|
6
|
-
overlay:
|
|
7
|
-
fadeIn:
|
|
8
|
-
container:
|
|
9
|
-
"size-sm": "_size-
|
|
10
|
-
"size-md": "_size-
|
|
11
|
-
"size-lg": "_size-
|
|
12
|
-
"size-xl": "_size-
|
|
13
|
-
"size-full": "_size-
|
|
14
|
-
modal:
|
|
15
|
-
slideUp:
|
|
16
|
-
closeButton:
|
|
17
|
-
title:
|
|
18
|
-
content:
|
|
19
|
-
intro:
|
|
20
|
-
trigger:
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
1
|
+
import { jsx as l, Fragment as w, jsxs as k } from "react/jsx-runtime";
|
|
2
|
+
import { useState as R, useRef as q, useEffect as f } from "react";
|
|
3
|
+
import { createPortal as A } from "react-dom";
|
|
4
|
+
import { X as C } from "../../../x-CnsEH4Ox.js";
|
|
5
|
+
import '../../../index38.css';const D = "_overlay_1hn68_2", K = "_fadeIn_1hn68_1", X = "_container_1hn68_19", F = "_modal_1hn68_49", G = "_slideUp_1hn68_1", H = "_closeButton_1hn68_60", J = "_title_1hn68_87", Q = "_content_1hn68_97", V = "_intro_1hn68_116", W = "_trigger_1hn68_123", Z = "_slideUpSheet_1hn68_1", s = {
|
|
6
|
+
overlay: D,
|
|
7
|
+
fadeIn: K,
|
|
8
|
+
container: X,
|
|
9
|
+
"size-sm": "_size-sm_1hn68_26",
|
|
10
|
+
"size-md": "_size-md_1hn68_30",
|
|
11
|
+
"size-lg": "_size-lg_1hn68_34",
|
|
12
|
+
"size-xl": "_size-xl_1hn68_38",
|
|
13
|
+
"size-full": "_size-full_1hn68_42",
|
|
14
|
+
modal: F,
|
|
15
|
+
slideUp: G,
|
|
16
|
+
closeButton: H,
|
|
17
|
+
title: J,
|
|
18
|
+
content: Q,
|
|
19
|
+
intro: V,
|
|
20
|
+
trigger: W,
|
|
21
|
+
slideUpSheet: Z
|
|
22
|
+
}, O = () => {
|
|
23
|
+
if (typeof document > "u") return;
|
|
24
|
+
const n = window.scrollY;
|
|
25
|
+
document.body.style.position = "fixed", document.body.style.top = `-${n}px`, document.body.style.width = "100%", document.body.style.overflowY = "scroll";
|
|
26
|
+
}, z = () => {
|
|
27
|
+
if (typeof document > "u") return;
|
|
28
|
+
const n = Math.abs(parseInt(document.body.style.top || "0", 10));
|
|
29
|
+
document.body.style.position = "", document.body.style.top = "", document.body.style.width = "", document.body.style.overflowY = "", n && window.scrollTo(0, n);
|
|
25
30
|
};
|
|
26
|
-
function
|
|
27
|
-
content:
|
|
28
|
-
trigger:
|
|
29
|
-
isOpen:
|
|
30
|
-
onOpen:
|
|
31
|
+
function le({
|
|
32
|
+
content: n,
|
|
33
|
+
trigger: x,
|
|
34
|
+
isOpen: h,
|
|
35
|
+
onOpen: c,
|
|
31
36
|
onClose: i,
|
|
32
|
-
size:
|
|
33
|
-
closeOnEscape:
|
|
37
|
+
size: E = "md",
|
|
38
|
+
closeOnEscape: y = !0,
|
|
34
39
|
closeOnOverlayClick: $ = !0,
|
|
35
|
-
showCloseButton:
|
|
36
|
-
className:
|
|
37
|
-
overlayClassName:
|
|
38
|
-
style:
|
|
40
|
+
showCloseButton: S = !0,
|
|
41
|
+
className: I,
|
|
42
|
+
overlayClassName: N,
|
|
43
|
+
style: U,
|
|
39
44
|
// title,
|
|
40
45
|
// richTextBlocks,
|
|
41
46
|
// renderRichText,
|
|
42
|
-
formData:
|
|
43
|
-
renderForm:
|
|
47
|
+
formData: v,
|
|
48
|
+
renderForm: p
|
|
44
49
|
}) {
|
|
45
|
-
const [
|
|
46
|
-
_ ||
|
|
47
|
-
},
|
|
48
|
-
_ ||
|
|
49
|
-
},
|
|
50
|
-
$ &&
|
|
50
|
+
const [B, b] = R(!1), m = q(null), _ = h !== void 0, e = _ ? h : B, Y = () => {
|
|
51
|
+
_ || b(!0), c == null || c();
|
|
52
|
+
}, r = () => {
|
|
53
|
+
_ || b(!1), i == null || i();
|
|
54
|
+
}, L = () => e ? r() : Y(), T = () => {
|
|
55
|
+
$ && r();
|
|
51
56
|
};
|
|
52
|
-
|
|
53
|
-
if (!
|
|
54
|
-
const t = (
|
|
55
|
-
|
|
57
|
+
f(() => {
|
|
58
|
+
if (!y || !e) return;
|
|
59
|
+
const t = (d) => {
|
|
60
|
+
d.key === "Escape" && r();
|
|
56
61
|
};
|
|
57
62
|
return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
|
|
58
|
-
}, [e,
|
|
59
|
-
if (!e || !
|
|
60
|
-
const t =
|
|
63
|
+
}, [e, y]), f(() => (e ? O() : z(), () => z()), [e]), f(() => {
|
|
64
|
+
if (!e || !m.current) return;
|
|
65
|
+
const t = m.current, d = t.querySelectorAll(
|
|
61
66
|
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
|
|
62
|
-
),
|
|
63
|
-
|
|
67
|
+
), o = d[0], a = d[d.length - 1], g = (u) => {
|
|
68
|
+
u.key === "Tab" && (u.shiftKey ? document.activeElement === o && (u.preventDefault(), a == null || a.focus()) : document.activeElement === a && (u.preventDefault(), o == null || o.focus()));
|
|
64
69
|
};
|
|
65
|
-
return t.addEventListener("keydown",
|
|
70
|
+
return t.addEventListener("keydown", g), o == null || o.focus(), () => t.removeEventListener("keydown", g);
|
|
66
71
|
}, [e]);
|
|
67
|
-
const
|
|
72
|
+
const j = s[`size-${E}`] ?? "", M = n !== void 0 ? n : /* @__PURE__ */ l(w, { children: v && p ? p(v) : null }), P = e ? /* @__PURE__ */ l(
|
|
68
73
|
"div",
|
|
69
74
|
{
|
|
70
|
-
className: `${
|
|
71
|
-
onClick:
|
|
75
|
+
className: `${s.overlay} ${N ?? ""}`.trim(),
|
|
76
|
+
onClick: T,
|
|
72
77
|
role: "dialog",
|
|
73
78
|
"aria-modal": "true",
|
|
74
|
-
children: /* @__PURE__ */
|
|
75
|
-
|
|
79
|
+
children: /* @__PURE__ */ k("div", { className: `${j} ${s.container}`, children: [
|
|
80
|
+
S && /* @__PURE__ */ l(
|
|
76
81
|
"button",
|
|
77
82
|
{
|
|
78
83
|
"aria-label": "Close",
|
|
79
|
-
className:
|
|
80
|
-
onClick:
|
|
84
|
+
className: s.closeButton,
|
|
85
|
+
onClick: r,
|
|
81
86
|
type: "button",
|
|
82
|
-
children: /* @__PURE__ */
|
|
87
|
+
children: /* @__PURE__ */ l(C, { size: 20 })
|
|
83
88
|
}
|
|
84
89
|
),
|
|
85
|
-
/* @__PURE__ */
|
|
90
|
+
/* @__PURE__ */ l(
|
|
86
91
|
"div",
|
|
87
92
|
{
|
|
88
|
-
ref:
|
|
89
|
-
className: `${
|
|
90
|
-
style:
|
|
93
|
+
ref: m,
|
|
94
|
+
className: `${s.modal} ${I ?? ""}`.trim(),
|
|
95
|
+
style: U,
|
|
91
96
|
onClick: (t) => t.stopPropagation(),
|
|
92
|
-
children: /* @__PURE__ */
|
|
97
|
+
children: /* @__PURE__ */ l("div", { className: s.content, children: M })
|
|
93
98
|
}
|
|
94
99
|
)
|
|
95
100
|
] })
|
|
96
101
|
}
|
|
97
102
|
) : null;
|
|
98
|
-
return /* @__PURE__ */
|
|
99
|
-
/* @__PURE__ */
|
|
100
|
-
typeof window < "u" &&
|
|
103
|
+
return /* @__PURE__ */ k(w, { children: [
|
|
104
|
+
/* @__PURE__ */ l("div", { className: s.trigger, onClick: L, children: x }),
|
|
105
|
+
typeof window < "u" && A(P, document.body)
|
|
101
106
|
] });
|
|
102
107
|
}
|
|
103
108
|
export {
|
|
104
|
-
|
|
109
|
+
le as Modal
|
|
105
110
|
};
|
package/dist/index38.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._overlay_1hn68_2{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:_fadeIn_1hn68_1 .2s ease;padding:var(--spacing-md, 1rem);overflow-y:auto}._container_1hn68_19{position:relative;display:flex;flex-direction:column}._size-sm_1hn68_26{width:90%;max-width:400px}._size-md_1hn68_30{width:90%;max-width:600px}._size-lg_1hn68_34{width:90%;max-width:800px}._size-xl_1hn68_38{width:90%;max-width:1200px}._size-full_1hn68_42{width:95%;height:95dvh;max-height:95dvh}._modal_1hn68_49{position:relative;background-color:var(--color-background, #fff);border-radius:var(--radius-lg, .5rem);padding:var(--spacing-xl, 2rem);max-height:90dvh;overflow-y:auto;animation:_slideUp_1hn68_1 .3s ease}._closeButton_1hn68_60{background:none;border:none;cursor:pointer;padding:var(--spacing-xs, .25rem);margin-bottom:var(--spacing-xs);border-radius:var(--radius-sm, .25rem);color:#fff;transition:all .2s ease;display:flex;align-items:center;justify-content:center;align-self:flex-end;z-index:1}._closeButton_1hn68_60:hover{background-color:var(--color-secondary-10, #f5f5f5);color:var(--color-text-primary, #333)}._closeButton_1hn68_60:focus-visible{outline:2px solid var(--color-primary-100, #007bff);outline-offset:2px}._title_1hn68_87{font-size:var(--font-size-xl, 1.5rem);font-weight:var(--font-weight-bold, 700);color:var(--color-heading, #111);margin-bottom:var(--spacing-lg, 1.5rem);padding-right:var(--spacing-xl, 2rem);line-height:var(--line-height-heading, 1.2)}._content_1hn68_97{color:var(--color-text-primary, #333);line-height:var(--line-height-normal, 1.5);display:flex;flex-direction:column;gap:var(--spacing-xl)}._content_1hn68_97 video,._content_1hn68_97 img{max-width:100%;height:auto;border-radius:var(--radius-md, .5rem)}._content_1hn68_97 video{width:100%}._intro_1hn68_116{margin-bottom:var(--spacing-lg, 1.5rem);padding-bottom:var(--spacing-lg, 1.5rem);border-bottom:1px solid var(--color-border, #e5e7eb)}._trigger_1hn68_123{width:auto;display:inline-block;cursor:pointer}@keyframes _fadeIn_1hn68_1{0%{opacity:0}to{opacity:1}}@keyframes _slideUp_1hn68_1{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 768px){._overlay_1hn68_2{align-items:flex-end;justify-content:stretch;padding:0;overflow:hidden}._container_1hn68_19{width:100%;max-width:100%;max-height:92dvh;display:flex;flex-direction:column;animation:_slideUpSheet_1hn68_1 .3s ease}._size-sm_1hn68_26,._size-md_1hn68_30,._size-lg_1hn68_34,._size-xl_1hn68_38,._size-full_1hn68_42{width:100%;max-width:100%;height:auto;max-height:92dvh}._closeButton_1hn68_60{color:var(--color-text-primary, #333);align-self:flex-end;margin:var(--spacing-sm) var(--spacing-sm) 0}._modal_1hn68_49{border-radius:var(--radius-lg, .5rem) var(--radius-lg, .5rem) 0 0;padding:var(--spacing-lg, 1.5rem);flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;max-height:none;animation:none;overscroll-behavior:contain}._title_1hn68_87{font-size:var(--font-size-lg, 1.25rem);padding-right:0}}@keyframes _slideUpSheet_1hn68_1{0%{transform:translateY(150%);opacity:.75}to{transform:translateY(0);opacity:1}}
|
package/dist/index38.css.d.ts
CHANGED
|
@@ -1,19 +1,20 @@
|
|
|
1
1
|
declare const styles: {
|
|
2
|
-
readonly "
|
|
3
|
-
readonly "
|
|
4
|
-
readonly "
|
|
5
|
-
readonly "
|
|
6
|
-
readonly "
|
|
7
|
-
readonly "
|
|
8
|
-
readonly "
|
|
9
|
-
readonly "_size-
|
|
10
|
-
readonly "_size-
|
|
11
|
-
readonly "_size-
|
|
12
|
-
readonly "_size-
|
|
13
|
-
readonly "_size-
|
|
14
|
-
readonly "
|
|
15
|
-
readonly "
|
|
16
|
-
readonly "
|
|
2
|
+
readonly "_closeButton_1hn68_60": string;
|
|
3
|
+
readonly "_container_1hn68_19": string;
|
|
4
|
+
readonly "_content_1hn68_97": string;
|
|
5
|
+
readonly "_fadeIn_1hn68_1": string;
|
|
6
|
+
readonly "_intro_1hn68_116": string;
|
|
7
|
+
readonly "_modal_1hn68_49": string;
|
|
8
|
+
readonly "_overlay_1hn68_2": string;
|
|
9
|
+
readonly "_size-full_1hn68_42": string;
|
|
10
|
+
readonly "_size-lg_1hn68_34": string;
|
|
11
|
+
readonly "_size-md_1hn68_30": string;
|
|
12
|
+
readonly "_size-sm_1hn68_26": string;
|
|
13
|
+
readonly "_size-xl_1hn68_38": string;
|
|
14
|
+
readonly "_slideUpSheet_1hn68_1": string;
|
|
15
|
+
readonly "_slideUp_1hn68_1": string;
|
|
16
|
+
readonly "_title_1hn68_87": string;
|
|
17
|
+
readonly "_trigger_1hn68_123": string;
|
|
17
18
|
};
|
|
18
19
|
export = styles;
|
|
19
20
|
|