quirk-ui 0.1.159 → 0.1.161
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/FormField-BPAhK8ty.cjs +1 -0
- package/dist/{FormField-D1m8xWkL.js → FormField-DMKvp-Na.js} +94 -93
- package/dist/FormField.css +1 -1
- package/dist/core/components/Modal/Modal.test.cjs +1 -1
- package/dist/core/components/Modal/Modal.test.mjs +72 -150
- package/dist/core/components/Modal/index.cjs +1 -1
- package/dist/core/components/Modal/index.mjs +76 -82
- package/dist/core.d.ts +1 -1
- package/dist/index38.css +1 -1
- package/dist/main.d.ts +1 -1
- package/dist/next/blocks/FormBlock/FormField.cjs +1 -1
- package/dist/next/blocks/FormBlock/FormField.mjs +1 -1
- package/dist/next/blocks/FormBlock/index.cjs +1 -1
- package/dist/next/blocks/FormBlock/index.mjs +105 -101
- package/package.json +1 -1
- package/dist/FormField-DU5sh1Fk.cjs +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";require('./FormField.css');const a=require("react/jsx-runtime"),v=require("./core/components/Input/index.cjs"),T=require("./core/components/Textarea/index.cjs"),h=require("./core/components/Select/index.cjs"),_=require("./core/components/Checkbox/index.cjs"),k=require("./core/components/Radio/index.cjs"),p=require("./core/components/Fieldset/index.cjs"),W=require("./core/components/DatePicker/index.cjs"),F=require("./core/components/Range/index.cjs"),j="_formBlock_1iehq_1",C="_container_1iehq_7",w="_formInner_1iehq_20",L="_maxWidthSm_1iehq_26",y="_maxWidthMd_1iehq_29",S="_maxWidthLg_1iehq_32",B="_maxWidthFull_1iehq_35",$="_heading_1iehq_41",H="_eyebrow_1iehq_47",G="_title_1iehq_51",I="_disclaimer_1iehq_55",M="_progress_1iehq_62",D="_progressHeader_1iehq_68",O="_stepLabel_1iehq_74",P="_stepCount_1iehq_80",R="_stepDescription_1iehq_85",V="_fields_1iehq_93",f="_fieldFull_1iehq_100",N="_fieldHalf_1iehq_104",z="_fieldThird_1iehq_112",A="_actions_1iehq_122",E="_submitButton_1iehq_129",J="_success_1iehq_135",K="_errorBanner_1iehq_150",u={formBlock:j,container:C,formInner:w,maxWidthSm:L,maxWidthMd:y,maxWidthLg:S,maxWidthFull:B,heading:$,eyebrow:H,title:G,disclaimer:I,progress:M,progressHeader:D,stepLabel:O,stepCount:P,stepDescription:R,fields:V,fieldFull:f,fieldHalf:N,fieldThird:z,actions:A,submitButton:E,success:J,errorBanner:K};function c(e){return(e??[]).map(n=>({label:n.label,value:n.value.current,disabled:n.disabled}))}function m(e){return(e??[]).map(n=>({label:n.label,options:n.options.map(s=>({label:s.label,value:s.value.current,disabled:s.disabled}))}))}function Q({field:e,value:n,error:s,onChange:o}){const r=e.name.current,x={full:u.fieldFull,half:u.fieldHalf,third:u.fieldThird}[e.width??"full"],l={id:r,name:r,label:e.label,required:e.required,disabled:e.disabled,helperText:e.helperText,error:s},d=()=>{switch(e.fieldType){case"text":case"email":case"phone":case"number":case"url":return a.jsx(v.Input,{...l,type:e.fieldType==="phone"?"tel":e.fieldType,placeholder:e.placeholder,value:n??"",minLength:e.minLength,maxLength:e.maxLength,fullWidth:!0,onChange:t=>o(r,t.target.value)});case"textarea":return a.jsx(T.Textarea,{...l,placeholder:e.placeholder,value:n??"",rows:e.rows??4,maxLength:e.maxLength,showCharCount:e.showCharCount,fullWidth:!0,onChange:t=>o(r,t.target.value)});case"select":{const t=e.useOptionGroups?m(e.optionGroups):c(e.options);return a.jsx(h.Select,{...l,placeholder:e.placeholder,options:t,value:n??"",fullWidth:!0,onChange:i=>o(r,i.target.value)})}case"multiselect":{const t=e.useOptionGroups?m(e.optionGroups):c(e.options);return a.jsx(h.Select,{...l,multiple:!0,options:t,value:n??[],showSelectedCount:!0,onChange:i=>o(r,i)})}case"checkbox":return a.jsx(_.Checkbox,{id:l.id,name:l.name,label:e.label,required:e.required,disabled:e.disabled,helperText:s??e.helperText,error:!!s,checked:n??!1,onChange:t=>o(r,t.target.checked)});case"checkboxGroup":{const t=n??[];return a.jsx(p.Fieldset,{legend:e.label,error:!!s,helperText:s,children:c(e.options).map(i=>a.jsx(_.Checkbox,{id:`${r}-${i.value}`,name:`${r}[]`,label:i.label,checked:t.includes(i.value),disabled:i.disabled||e.disabled,onChange:b=>{const q=b.target.checked?[...t,i.value]:t.filter(g=>g!==i.value);o(r,q)}},i.value))})}case"radio":return a.jsx(p.Fieldset,{legend:e.label,error:!!s,helperText:s,children:c(e.options).map(t=>a.jsx(k.Radio,{id:`${r}-${t.value}`,name:r,value:t.value,label:t.label,checked:n===t.value,disabled:t.disabled||e.disabled,required:e.required,onChange:()=>o(r,t.value)},t.value))});case"date":return a.jsx(W.DatePicker,{id:l.id,name:l.name,label:e.label,required:e.required,disabled:e.disabled,helperText:s??e.helperText,error:!!s,value:n??null,onChange:t=>o(r,t)});case"range":return a.jsx(F.Range,{...l,value:n??e.rangeMin??0,min:e.rangeMin??0,max:e.rangeMax??100,step:e.rangeStep??1,valuePrefix:e.rangeValuePrefix,valueSuffix:e.rangeValueSuffix,showValue:!0,onChange:t=>o(r,t)});case"hidden":return a.jsx("input",{type:"hidden",name:r,value:n??e.hiddenValue??""});default:return null}};return e.fieldType==="hidden"?d():a.jsx("div",{className:`${x}`,children:d()})}exports.FormField=Q;exports.styles=u;
|
|
@@ -1,68 +1,69 @@
|
|
|
1
1
|
import { jsx as s } from "react/jsx-runtime";
|
|
2
|
-
import { Input as
|
|
2
|
+
import { Input as v } from "./core/components/Input/index.mjs";
|
|
3
3
|
import { Textarea as T } from "./core/components/Textarea/index.mjs";
|
|
4
|
-
import { Select as
|
|
5
|
-
import { Checkbox as
|
|
4
|
+
import { Select as d } from "./core/components/Select/index.mjs";
|
|
5
|
+
import { Checkbox as m } from "./core/components/Checkbox/index.mjs";
|
|
6
6
|
import { Radio as W } from "./core/components/Radio/index.mjs";
|
|
7
|
-
import { Fieldset as
|
|
7
|
+
import { Fieldset as _ } from "./core/components/Fieldset/index.mjs";
|
|
8
8
|
import { DatePicker as f } from "./core/components/DatePicker/index.mjs";
|
|
9
9
|
import { Range as k } from "./core/components/Range/index.mjs";
|
|
10
|
-
import './FormField.css';const
|
|
11
|
-
formBlock:
|
|
12
|
-
container:
|
|
13
|
-
formInner:
|
|
14
|
-
maxWidthSm:
|
|
15
|
-
maxWidthMd:
|
|
16
|
-
maxWidthLg:
|
|
10
|
+
import './FormField.css';const w = "_formBlock_1iehq_1", L = "_container_1iehq_7", C = "_formInner_1iehq_20", F = "_maxWidthSm_1iehq_26", y = "_maxWidthMd_1iehq_29", B = "_maxWidthLg_1iehq_32", S = "_maxWidthFull_1iehq_35", H = "_heading_1iehq_41", G = "_eyebrow_1iehq_47", M = "_title_1iehq_51", $ = "_disclaimer_1iehq_55", I = "_progress_1iehq_62", D = "_progressHeader_1iehq_68", O = "_stepLabel_1iehq_74", V = "_stepCount_1iehq_80", P = "_stepDescription_1iehq_85", R = "_fields_1iehq_93", j = "_fieldFull_1iehq_100", N = "_fieldHalf_1iehq_104", z = "_fieldThird_1iehq_112", A = "_actions_1iehq_122", E = "_submitButton_1iehq_129", J = "_success_1iehq_135", K = "_errorBanner_1iehq_150", u = {
|
|
11
|
+
formBlock: w,
|
|
12
|
+
container: L,
|
|
13
|
+
formInner: C,
|
|
14
|
+
maxWidthSm: F,
|
|
15
|
+
maxWidthMd: y,
|
|
16
|
+
maxWidthLg: B,
|
|
17
17
|
maxWidthFull: S,
|
|
18
18
|
heading: H,
|
|
19
19
|
eyebrow: G,
|
|
20
20
|
title: M,
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
21
|
+
disclaimer: $,
|
|
22
|
+
progress: I,
|
|
23
|
+
progressHeader: D,
|
|
24
|
+
stepLabel: O,
|
|
25
|
+
stepCount: V,
|
|
26
|
+
stepDescription: P,
|
|
27
|
+
fields: R,
|
|
28
|
+
fieldFull: j,
|
|
29
|
+
fieldHalf: N,
|
|
30
|
+
fieldThird: z,
|
|
31
|
+
actions: A,
|
|
32
|
+
submitButton: E,
|
|
33
|
+
success: J,
|
|
34
|
+
errorBanner: K
|
|
34
35
|
};
|
|
35
|
-
function
|
|
36
|
-
return (e ?? []).map((
|
|
37
|
-
label:
|
|
38
|
-
value:
|
|
39
|
-
disabled:
|
|
36
|
+
function c(e) {
|
|
37
|
+
return (e ?? []).map((r) => ({
|
|
38
|
+
label: r.label,
|
|
39
|
+
value: r.value.current,
|
|
40
|
+
disabled: r.disabled
|
|
40
41
|
}));
|
|
41
42
|
}
|
|
42
|
-
function
|
|
43
|
-
return (e ?? []).map((
|
|
44
|
-
label:
|
|
45
|
-
options:
|
|
46
|
-
label:
|
|
47
|
-
value:
|
|
48
|
-
disabled:
|
|
43
|
+
function p(e) {
|
|
44
|
+
return (e ?? []).map((r) => ({
|
|
45
|
+
label: r.label,
|
|
46
|
+
options: r.options.map((n) => ({
|
|
47
|
+
label: n.label,
|
|
48
|
+
value: n.value.current,
|
|
49
|
+
disabled: n.disabled
|
|
49
50
|
}))
|
|
50
51
|
}));
|
|
51
52
|
}
|
|
52
|
-
function
|
|
53
|
-
const
|
|
53
|
+
function ne({ field: e, value: r, error: n, onChange: i }) {
|
|
54
|
+
const a = e.name.current, b = {
|
|
54
55
|
full: u.fieldFull,
|
|
55
56
|
half: u.fieldHalf,
|
|
56
57
|
third: u.fieldThird
|
|
57
|
-
}[e.width ?? "full"],
|
|
58
|
-
id:
|
|
59
|
-
name:
|
|
58
|
+
}[e.width ?? "full"], o = {
|
|
59
|
+
id: a,
|
|
60
|
+
name: a,
|
|
60
61
|
label: e.label,
|
|
61
62
|
required: e.required,
|
|
62
63
|
disabled: e.disabled,
|
|
63
64
|
helperText: e.helperText,
|
|
64
|
-
error:
|
|
65
|
-
},
|
|
65
|
+
error: n
|
|
66
|
+
}, h = () => {
|
|
66
67
|
switch (e.fieldType) {
|
|
67
68
|
// ── Text-based inputs ──────────────────────────────────────────────
|
|
68
69
|
case "text":
|
|
@@ -71,16 +72,16 @@ function re({ field: e, value: n, error: a, onChange: o }) {
|
|
|
71
72
|
case "number":
|
|
72
73
|
case "url":
|
|
73
74
|
return /* @__PURE__ */ s(
|
|
74
|
-
|
|
75
|
+
v,
|
|
75
76
|
{
|
|
76
|
-
...
|
|
77
|
+
...o,
|
|
77
78
|
type: e.fieldType === "phone" ? "tel" : e.fieldType,
|
|
78
79
|
placeholder: e.placeholder,
|
|
79
|
-
value:
|
|
80
|
+
value: r ?? "",
|
|
80
81
|
minLength: e.minLength,
|
|
81
82
|
maxLength: e.maxLength,
|
|
82
83
|
fullWidth: !0,
|
|
83
|
-
onChange: (t) =>
|
|
84
|
+
onChange: (t) => i(a, t.target.value)
|
|
84
85
|
}
|
|
85
86
|
);
|
|
86
87
|
// ── Textarea ───────────────────────────────────────────────────────
|
|
@@ -88,76 +89,76 @@ function re({ field: e, value: n, error: a, onChange: o }) {
|
|
|
88
89
|
return /* @__PURE__ */ s(
|
|
89
90
|
T,
|
|
90
91
|
{
|
|
91
|
-
...
|
|
92
|
+
...o,
|
|
92
93
|
placeholder: e.placeholder,
|
|
93
|
-
value:
|
|
94
|
+
value: r ?? "",
|
|
94
95
|
rows: e.rows ?? 4,
|
|
95
96
|
maxLength: e.maxLength,
|
|
96
97
|
showCharCount: e.showCharCount,
|
|
97
98
|
fullWidth: !0,
|
|
98
|
-
onChange: (t) =>
|
|
99
|
+
onChange: (t) => i(a, t.target.value)
|
|
99
100
|
}
|
|
100
101
|
);
|
|
101
102
|
// ── Select ─────────────────────────────────────────────────────────
|
|
102
103
|
case "select": {
|
|
103
|
-
const t = e.useOptionGroups ?
|
|
104
|
+
const t = e.useOptionGroups ? p(e.optionGroups) : c(e.options);
|
|
104
105
|
return /* @__PURE__ */ s(
|
|
105
|
-
|
|
106
|
+
d,
|
|
106
107
|
{
|
|
107
|
-
...
|
|
108
|
+
...o,
|
|
108
109
|
placeholder: e.placeholder,
|
|
109
110
|
options: t,
|
|
110
|
-
value:
|
|
111
|
+
value: r ?? "",
|
|
111
112
|
fullWidth: !0,
|
|
112
|
-
onChange: (l) =>
|
|
113
|
+
onChange: (l) => i(a, l.target.value)
|
|
113
114
|
}
|
|
114
115
|
);
|
|
115
116
|
}
|
|
116
117
|
// ── Multi-select ───────────────────────────────────────────────────
|
|
117
118
|
case "multiselect": {
|
|
118
|
-
const t = e.useOptionGroups ?
|
|
119
|
+
const t = e.useOptionGroups ? p(e.optionGroups) : c(e.options);
|
|
119
120
|
return /* @__PURE__ */ s(
|
|
120
|
-
|
|
121
|
+
d,
|
|
121
122
|
{
|
|
122
|
-
...
|
|
123
|
+
...o,
|
|
123
124
|
multiple: !0,
|
|
124
125
|
options: t,
|
|
125
|
-
value:
|
|
126
|
+
value: r ?? [],
|
|
126
127
|
showSelectedCount: !0,
|
|
127
|
-
onChange: (l) =>
|
|
128
|
+
onChange: (l) => i(a, l)
|
|
128
129
|
}
|
|
129
130
|
);
|
|
130
131
|
}
|
|
131
132
|
// ── Single checkbox ────────────────────────────────────────────────
|
|
132
133
|
case "checkbox":
|
|
133
134
|
return /* @__PURE__ */ s(
|
|
134
|
-
|
|
135
|
+
m,
|
|
135
136
|
{
|
|
136
|
-
id:
|
|
137
|
-
name:
|
|
137
|
+
id: o.id,
|
|
138
|
+
name: o.name,
|
|
138
139
|
label: e.label,
|
|
139
140
|
required: e.required,
|
|
140
141
|
disabled: e.disabled,
|
|
141
|
-
helperText:
|
|
142
|
-
error: !!
|
|
143
|
-
checked:
|
|
144
|
-
onChange: (t) =>
|
|
142
|
+
helperText: n ?? e.helperText,
|
|
143
|
+
error: !!n,
|
|
144
|
+
checked: r ?? !1,
|
|
145
|
+
onChange: (t) => i(a, t.target.checked)
|
|
145
146
|
}
|
|
146
147
|
);
|
|
147
148
|
// ── Checkbox group ─────────────────────────────────────────────────
|
|
148
149
|
case "checkboxGroup": {
|
|
149
|
-
const t =
|
|
150
|
-
return /* @__PURE__ */ s(
|
|
151
|
-
|
|
150
|
+
const t = r ?? [];
|
|
151
|
+
return /* @__PURE__ */ s(_, { legend: e.label, error: !!n, helperText: n, children: c(e.options).map((l) => /* @__PURE__ */ s(
|
|
152
|
+
m,
|
|
152
153
|
{
|
|
153
|
-
id: `${
|
|
154
|
-
name: `${
|
|
154
|
+
id: `${a}-${l.value}`,
|
|
155
|
+
name: `${a}[]`,
|
|
155
156
|
label: l.label,
|
|
156
157
|
checked: t.includes(l.value),
|
|
157
158
|
disabled: l.disabled || e.disabled,
|
|
158
|
-
onChange: (
|
|
159
|
-
const
|
|
160
|
-
|
|
159
|
+
onChange: (x) => {
|
|
160
|
+
const g = x.target.checked ? [...t, l.value] : t.filter((q) => q !== l.value);
|
|
161
|
+
i(a, g);
|
|
161
162
|
}
|
|
162
163
|
},
|
|
163
164
|
l.value
|
|
@@ -165,17 +166,17 @@ function re({ field: e, value: n, error: a, onChange: o }) {
|
|
|
165
166
|
}
|
|
166
167
|
// ── Radio group ────────────────────────────────────────────────────
|
|
167
168
|
case "radio":
|
|
168
|
-
return /* @__PURE__ */ s(
|
|
169
|
+
return /* @__PURE__ */ s(_, { legend: e.label, error: !!n, helperText: n, children: c(e.options).map((t) => /* @__PURE__ */ s(
|
|
169
170
|
W,
|
|
170
171
|
{
|
|
171
|
-
id: `${
|
|
172
|
-
name:
|
|
172
|
+
id: `${a}-${t.value}`,
|
|
173
|
+
name: a,
|
|
173
174
|
value: t.value,
|
|
174
175
|
label: t.label,
|
|
175
|
-
checked:
|
|
176
|
+
checked: r === t.value,
|
|
176
177
|
disabled: t.disabled || e.disabled,
|
|
177
178
|
required: e.required,
|
|
178
|
-
onChange: () =>
|
|
179
|
+
onChange: () => i(a, t.value)
|
|
179
180
|
},
|
|
180
181
|
t.value
|
|
181
182
|
)) });
|
|
@@ -184,15 +185,15 @@ function re({ field: e, value: n, error: a, onChange: o }) {
|
|
|
184
185
|
return /* @__PURE__ */ s(
|
|
185
186
|
f,
|
|
186
187
|
{
|
|
187
|
-
id:
|
|
188
|
-
name:
|
|
188
|
+
id: o.id,
|
|
189
|
+
name: o.name,
|
|
189
190
|
label: e.label,
|
|
190
191
|
required: e.required,
|
|
191
192
|
disabled: e.disabled,
|
|
192
|
-
helperText:
|
|
193
|
-
error: !!
|
|
194
|
-
value:
|
|
195
|
-
onChange: (t) =>
|
|
193
|
+
helperText: n ?? e.helperText,
|
|
194
|
+
error: !!n,
|
|
195
|
+
value: r ?? null,
|
|
196
|
+
onChange: (t) => i(a, t)
|
|
196
197
|
}
|
|
197
198
|
);
|
|
198
199
|
// ── Range ──────────────────────────────────────────────────────────
|
|
@@ -200,15 +201,15 @@ function re({ field: e, value: n, error: a, onChange: o }) {
|
|
|
200
201
|
return /* @__PURE__ */ s(
|
|
201
202
|
k,
|
|
202
203
|
{
|
|
203
|
-
...
|
|
204
|
-
value:
|
|
204
|
+
...o,
|
|
205
|
+
value: r ?? e.rangeMin ?? 0,
|
|
205
206
|
min: e.rangeMin ?? 0,
|
|
206
207
|
max: e.rangeMax ?? 100,
|
|
207
208
|
step: e.rangeStep ?? 1,
|
|
208
209
|
valuePrefix: e.rangeValuePrefix,
|
|
209
210
|
valueSuffix: e.rangeValueSuffix,
|
|
210
211
|
showValue: !0,
|
|
211
|
-
onChange: (t) =>
|
|
212
|
+
onChange: (t) => i(a, t)
|
|
212
213
|
}
|
|
213
214
|
);
|
|
214
215
|
// ── Hidden ─────────────────────────────────────────────────────────
|
|
@@ -217,17 +218,17 @@ function re({ field: e, value: n, error: a, onChange: o }) {
|
|
|
217
218
|
"input",
|
|
218
219
|
{
|
|
219
220
|
type: "hidden",
|
|
220
|
-
name:
|
|
221
|
-
value:
|
|
221
|
+
name: a,
|
|
222
|
+
value: r ?? e.hiddenValue ?? ""
|
|
222
223
|
}
|
|
223
224
|
);
|
|
224
225
|
default:
|
|
225
226
|
return null;
|
|
226
227
|
}
|
|
227
228
|
};
|
|
228
|
-
return e.fieldType === "hidden" ?
|
|
229
|
+
return e.fieldType === "hidden" ? h() : /* @__PURE__ */ s("div", { className: `${b}`, children: h() });
|
|
229
230
|
}
|
|
230
231
|
export {
|
|
231
|
-
|
|
232
|
+
ne as F,
|
|
232
233
|
u as s
|
|
233
234
|
};
|
package/dist/FormField.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._formBlock_1iehq_1{width:100%;padding-top:var(--spacing-xl);padding-bottom:var(--spacing-xl)}._container_1iehq_7{width:100%;max-width:var(--layout-width, 1250px);margin:0 auto;padding-left:var(--spacing-md);padding-right:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-lg)}._formInner_1iehq_20{width:100%;margin-left:auto;margin-right:auto}._maxWidthSm_1iehq_26{max-width:480px}._maxWidthMd_1iehq_29{max-width:640px}._maxWidthLg_1iehq_32{max-width:800px}._maxWidthFull_1iehq_35{max-width:100%}._heading_1iehq_41{display:flex;flex-direction:column;gap:var(--spacing-sm)}._eyebrow_1iehq_47{font-weight:var(--font-weight-bold)}._title_1iehq_51{text-wrap:balance}._disclaimer_1iehq_55{font-size:var(--font-size-sm);font-style:italic}._progress_1iehq_62{display:flex;flex-direction:column;gap:var(--spacing-sm)}._progressHeader_1iehq_68{display:flex;justify-content:space-between;align-items:center}._stepLabel_1iehq_74{font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);color:var(--color-text-primary)}._stepCount_1iehq_80{font-size:var(--font-size-sm);color:var(--color-secondary-50)}._stepDescription_1iehq_85{color:var(--color-secondary-75);font-size:var(--font-size-md);margin:0}._fields_1iehq_93{display:flex;flex-wrap:wrap;gap:var(--spacing-md)}._fieldFull_1iehq_100{width:100%}._fieldHalf_1iehq_104{width:calc(50% - var(--spacing-md) / 2)}@media (max-width: 767px){._fieldHalf_1iehq_104{width:100%}}._fieldThird_1iehq_112{width:calc(33.333% - var(--spacing-md) * 2 / 3)}@media (max-width: 767px){._fieldThird_1iehq_112{width:100%}}._actions_1iehq_122{display:flex;align-items:center;gap:var(--spacing-md);padding-top:var(--spacing-sm)}._submitButton_1iehq_129{margin-left:auto}._success_1iehq_135{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-lg);padding:var(--spacing-md) 0 0}._success_1iehq_135 p{color:var(--color-states-success-bg);font-weight:var(--font-weight-semibold)}._errorBanner_1iehq_150{padding:var(--spacing-md);background-color:var(--color-states-error-bg);color:var(--color-states-error-text);border-radius:var(--radius-md);font-size:var(--font-size-sm)}
|
|
@@ -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("Rich text + form render props",()=>{e.it("renders rich text via renderRichText when richTextBlocks provided",()=>{const o=[{_type:"block",_key:"a"}],r=e.vi.fn(()=>t.jsx("p",{children:"Rich text content"}));e.render(t.jsx(n.Modal,{trigger:t.jsx("button",{children:"Open"}),isOpen:!0,richTextBlocks:o,renderRichText:r})),e.globalExpect(r).toHaveBeenCalledWith({blocks:o}),e.globalExpect(e.screen.getByText("Rich text content")).toBeInTheDocument()}),e.it("renders rich text inside .intro wrapper",()=>{const o=[{_type:"block",_key:"a"}];e.render(t.jsx(n.Modal,{trigger:t.jsx("button",{children:"Open"}),isOpen:!0,richTextBlocks:o,renderRichText:()=>t.jsx("p",{children:"Intro text"})})),e.globalExpect(document.querySelector(".intro")).toBeInTheDocument()}),e.it("renders form via renderForm when formData provided",()=>{const o={_id:"form-1",heading:"Contact"},r=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:r})),e.globalExpect(r).toHaveBeenCalledWith(o),e.globalExpect(e.screen.getByTestId("the-form")).toBeInTheDocument()}),e.it("renders both rich text and form together",()=>{const o=[{_type:"block",_key:"a"}],r={_id:"form-1"};e.render(t.jsx(n.Modal,{trigger:t.jsx("button",{children:"Open"}),isOpen:!0,richTextBlocks:o,renderRichText:()=>t.jsx("p",{children:"Intro"}),formData:r,renderForm:()=>t.jsx("form",{"data-testid":"form"})})),e.globalExpect(e.screen.getByText("Intro")).toBeInTheDocument(),e.globalExpect(e.screen.getByTestId("form")).toBeInTheDocument(),e.globalExpect(document.querySelector(".intro")).toBeInTheDocument()}),e.it("explicit content prop takes priority over render props",()=>{const o=[{_type:"block",_key:"a"}],r=e.vi.fn(()=>t.jsx("p",{children:"Should not render"}));e.render(t.jsx(n.Modal,{trigger:t.jsx("button",{children:"Open"}),isOpen:!0,content:t.jsx("p",{children:"Explicit content"}),richTextBlocks:o,renderRichText:r})),e.globalExpect(e.screen.getByText("Explicit content")).toBeInTheDocument(),e.globalExpect(r).not.toHaveBeenCalled()}),e.it("does not render intro when richTextBlocks is empty",()=>{e.render(t.jsx(n.Modal,{trigger:t.jsx("button",{children:"Open"}),isOpen:!0,richTextBlocks:[],renderRichText:()=>t.jsx("p",{children:"Should not render"})})),e.globalExpect(document.querySelector(".intro")).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("renders title when provided",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),title:"Modal Title",isOpen:!0})),e.globalExpect(e.screen.getByText("Modal Title")).toBeInTheDocument()}),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.it("sets id on title for aria-labelledby",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),title:"My Modal",isOpen:!0})),e.globalExpect(e.screen.getByText("My Modal")).toHaveAttribute("id","modal-title")})}),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.it("links title with aria-labelledby",()=>{e.render(t.jsx(n.Modal,{content:t.jsx("div",{children:"Content"}),trigger:t.jsx("button",{children:"Open"}),title:"My Modal",isOpen:!0})),e.globalExpect(e.screen.getByRole("dialog")).toHaveAttribute("aria-labelledby","modal-title")})}),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
|
+
"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("Rich text + form render props",()=>{e.it("renders form via renderForm when formData provided",()=>{const o={_id:"form-1",heading:"Contact"},r=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:r})),e.globalExpect(r).toHaveBeenCalledWith(o),e.globalExpect(e.screen.getByTestId("the-form")).toBeInTheDocument()}),e.it("explicit content prop takes priority over render props",()=>{const o=[{_type:"block",_key:"a"}],r=e.vi.fn(()=>t.jsx("p",{children:"Should not render"}));e.render(t.jsx(n.Modal,{trigger:t.jsx("button",{children:"Open"}),isOpen:!0,content:t.jsx("p",{children:"Explicit content"}),richTextBlocks:o,renderRichText:r})),e.globalExpect(e.screen.getByText("Explicit content")).toBeInTheDocument(),e.globalExpect(r).not.toHaveBeenCalled()}),e.it("does not render intro when richTextBlocks is empty",()=>{e.render(t.jsx(n.Modal,{trigger:t.jsx("button",{children:"Open"}),isOpen:!0,richTextBlocks:[],renderRichText:()=>t.jsx("p",{children:"Should not render"})})),e.globalExpect(document.querySelector(".intro")).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")})})});
|