@entur/modal 1.6.16 → 1.6.17

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/CHANGELOG.md ADDED
@@ -0,0 +1,466 @@
1
+ # Change Log
2
+
3
+ All notable changes to this project will be documented in this file.
4
+ See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
+
6
+ ## [1.6.17](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.6.14...@entur/modal@1.6.17) (2022-12-09)
7
+
8
+ ### Bug Fixes
9
+
10
+ - **modal:** make title prop optional ([0892b90](https://bitbucket.org/enturas/design-system/commits/0892b90ff702c3479b72c9435f972a3fd6022c03))
11
+
12
+ ## [1.6.16](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.6.15...@entur/modal@1.6.16) (2022-11-24)
13
+
14
+ **Note:** Version bump only for package @entur/modal
15
+
16
+ ## [1.6.15](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.6.14...@entur/modal@1.6.15) (2022-10-31)
17
+
18
+ **Note:** Version bump only for package @entur/modal
19
+
20
+ ## [1.6.14](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.6.13...@entur/modal@1.6.14) (2022-10-31)
21
+
22
+ **Note:** Version bump only for package @entur/modal
23
+
24
+ ## [1.6.13](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.6.12...@entur/modal@1.6.13) (2022-10-31)
25
+
26
+ **Note:** Version bump only for package @entur/modal
27
+
28
+ ## [1.6.12](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.6.11...@entur/modal@1.6.12) (2022-10-20)
29
+
30
+ **Note:** Version bump only for package @entur/modal
31
+
32
+ ## [1.6.11](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.6.10...@entur/modal@1.6.11) (2022-10-20)
33
+
34
+ **Note:** Version bump only for package @entur/modal
35
+
36
+ ## [1.6.10](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.6.9...@entur/modal@1.6.10) (2022-10-12)
37
+
38
+ **Note:** Version bump only for package @entur/modal
39
+
40
+ ## [1.6.8](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.6.7...@entur/modal@1.6.8) (2022-08-31)
41
+
42
+ **Note:** Version bump only for package @entur/modal
43
+
44
+ ## [1.6.7](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.6.6...@entur/modal@1.6.7) (2022-08-24)
45
+
46
+ **Note:** Version bump only for package @entur/modal
47
+
48
+ ## [1.6.6](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.6.5...@entur/modal@1.6.6) (2022-08-09)
49
+
50
+ **Note:** Version bump only for package @entur/modal
51
+
52
+ ## [1.6.5](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.6.4...@entur/modal@1.6.5) (2022-07-05)
53
+
54
+ **Note:** Version bump only for package @entur/modal
55
+
56
+ ## [1.6.4](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.6.3...@entur/modal@1.6.4) (2022-06-28)
57
+
58
+ **Note:** Version bump only for package @entur/modal
59
+
60
+ ## [1.6.3](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.6.2...@entur/modal@1.6.3) (2022-06-24)
61
+
62
+ **Note:** Version bump only for package @entur/modal
63
+
64
+ ## [1.6.2](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.6.1...@entur/modal@1.6.2) (2022-06-02)
65
+
66
+ **Note:** Version bump only for package @entur/modal
67
+
68
+ ## [1.6.1](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.6.0...@entur/modal@1.6.1) (2022-05-13)
69
+
70
+ **Note:** Version bump only for package @entur/modal
71
+
72
+ # [1.6.0](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.5.13...@entur/modal@1.6.0) (2022-05-04)
73
+
74
+ ### Features
75
+
76
+ - **modal:** add custom scrollbar to modal to preserve rounded corners ([22f967f](https://bitbucket.org/enturas/design-system/commits/22f967faed103dda79491dd0ffa7fbad1039dd56))
77
+
78
+ ## [1.5.13](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.5.12...@entur/modal@1.5.13) (2022-04-27)
79
+
80
+ **Note:** Version bump only for package @entur/modal
81
+
82
+ ## [1.5.12](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.5.11...@entur/modal@1.5.12) (2022-04-20)
83
+
84
+ **Note:** Version bump only for package @entur/modal
85
+
86
+ ## [1.5.11](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.5.10...@entur/modal@1.5.11) (2022-04-19)
87
+
88
+ **Note:** Version bump only for package @entur/modal
89
+
90
+ ## [1.5.10](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.5.9...@entur/modal@1.5.10) (2022-03-01)
91
+
92
+ **Note:** Version bump only for package @entur/modal
93
+
94
+ ## [1.5.9](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.5.8...@entur/modal@1.5.9) (2022-02-09)
95
+
96
+ **Note:** Version bump only for package @entur/modal
97
+
98
+ ## [1.5.8](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.5.7...@entur/modal@1.5.8) (2021-11-17)
99
+
100
+ **Note:** Version bump only for package @entur/modal
101
+
102
+ ## [1.5.7](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.5.6...@entur/modal@1.5.7) (2021-09-23)
103
+
104
+ **Note:** Version bump only for package @entur/modal
105
+
106
+ ## [1.5.6](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.5.5...@entur/modal@1.5.6) (2021-09-13)
107
+
108
+ ### Bug Fixes
109
+
110
+ - **modal:** increase border radius on modals ([8d321aa](https://bitbucket.org/enturas/design-system/commits/8d321aa3e0e83a410a285763182db22c7b1c96be))
111
+
112
+ ## [1.5.5](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.5.4...@entur/modal@1.5.5) (2021-09-07)
113
+
114
+ ### Bug Fixes
115
+
116
+ - update dependencies ([c76a03c](https://bitbucket.org/enturas/design-system/commits/c76a03ca6e15951c40b032f618617380dc8f15d1))
117
+ - utilize reworked focus token ([586758f](https://bitbucket.org/enturas/design-system/commits/586758fc86eb5aa52116c63c14ef033eb2e8b12f))
118
+
119
+ ## [1.5.4](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.5.3...@entur/modal@1.5.4) (2021-08-13)
120
+
121
+ **Note:** Version bump only for package @entur/modal
122
+
123
+ ## [1.5.3](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.5.2...@entur/modal@1.5.3) (2021-07-16)
124
+
125
+ **Note:** Version bump only for package @entur/modal
126
+
127
+ ## [1.5.2](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.5.1...@entur/modal@1.5.2) (2021-06-25)
128
+
129
+ ### Bug Fixes
130
+
131
+ - update dependencies ([85395ed](https://bitbucket.org/enturas/design-system/commits/85395ed69004335bb173770dfaa634ad542de771))
132
+
133
+ ## [1.5.1](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.5.0...@entur/modal@1.5.1) (2021-06-04)
134
+
135
+ **Note:** Version bump only for package @entur/modal
136
+
137
+ # [1.5.0](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.4.0...@entur/modal@1.5.0) (2021-05-19)
138
+
139
+ ### Features
140
+
141
+ - **modal:** add animation on modal entry ([f0f0701](https://bitbucket.org/enturas/design-system/commits/f0f07019a9324b8a697165e5d902fee9cfb21815))
142
+
143
+ # [1.4.0](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.3.16...@entur/modal@1.4.0) (2021-05-05)
144
+
145
+ ### Features
146
+
147
+ - **modal:** add closeonclickoutside prop ([7fba612](https://bitbucket.org/enturas/design-system/commits/7fba612263e8c66f732c84447cf3bbf99766073c))
148
+
149
+ ## [1.3.16](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.3.15...@entur/modal@1.3.16) (2021-04-23)
150
+
151
+ ### Bug Fixes
152
+
153
+ - utilize new focus tokens ([17113ef](https://bitbucket.org/enturas/design-system/commits/17113ef3f791c86fa6e19e71680fd5acdbae4990))
154
+
155
+ ## [1.3.15](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.3.14...@entur/modal@1.3.15) (2021-04-09)
156
+
157
+ **Note:** Version bump only for package @entur/modal
158
+
159
+ ## [1.3.14](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.3.13...@entur/modal@1.3.14) (2021-03-02)
160
+
161
+ **Note:** Version bump only for package @entur/modal
162
+
163
+ ## [1.3.13](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.3.12...@entur/modal@1.3.13) (2021-02-17)
164
+
165
+ ### Bug Fixes
166
+
167
+ - **modal:** add border radius for modal windows ([8ed7468](https://bitbucket.org/enturas/design-system/commits/8ed7468ce9c2544f11ea7113415366236f12041e))
168
+
169
+ ## [1.3.12](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.3.11...@entur/modal@1.3.12) (2021-01-29)
170
+
171
+ **Note:** Version bump only for package @entur/modal
172
+
173
+ ## [1.3.11](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.3.10...@entur/modal@1.3.11) (2021-01-20)
174
+
175
+ **Note:** Version bump only for package @entur/modal
176
+
177
+ ## [1.3.10](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.3.9...@entur/modal@1.3.10) (2021-01-13)
178
+
179
+ ### Bug Fixes
180
+
181
+ - update dependency ([40fd77e](https://bitbucket.org/enturas/design-system/commits/40fd77ebca7fa8a3d0e82409561e3e3cd63c441d))
182
+
183
+ ## [1.3.9](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.3.8...@entur/modal@1.3.9) (2021-01-05)
184
+
185
+ **Note:** Version bump only for package @entur/modal
186
+
187
+ ## [1.3.8](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.3.7...@entur/modal@1.3.8) (2020-12-04)
188
+
189
+ ### Bug Fixes
190
+
191
+ - **modal:** fix typings of heading ([720abb7](https://bitbucket.org/enturas/design-system/commits/720abb75c6aec3655fa81abf01abe4d4d40e6b61))
192
+
193
+ ## [1.3.7](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.3.6...@entur/modal@1.3.7) (2020-11-10)
194
+
195
+ **Note:** Version bump only for package @entur/modal
196
+
197
+ ## [1.3.6](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.3.5...@entur/modal@1.3.6) (2020-11-05)
198
+
199
+ **Note:** Version bump only for package @entur/modal
200
+
201
+ ## [1.3.5](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.3.4...@entur/modal@1.3.5) (2020-10-28)
202
+
203
+ **Note:** Version bump only for package @entur/modal
204
+
205
+ ## [1.3.4](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.3.3...@entur/modal@1.3.4) (2020-10-23)
206
+
207
+ **Note:** Version bump only for package @entur/modal
208
+
209
+ ## [1.3.3](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.3.2...@entur/modal@1.3.3) (2020-10-16)
210
+
211
+ **Note:** Version bump only for package @entur/modal
212
+
213
+ ## [1.3.2](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.3.1...@entur/modal@1.3.2) (2020-10-09)
214
+
215
+ **Note:** Version bump only for package @entur/modal
216
+
217
+ ## [1.3.1](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.3.0...@entur/modal@1.3.1) (2020-09-25)
218
+
219
+ **Note:** Version bump only for package @entur/modal
220
+
221
+ # [1.3.0](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.2.0...@entur/modal@1.3.0) (2020-09-14)
222
+
223
+ ### Bug Fixes
224
+
225
+ - **drawer:** improve automatic focus within in drawer ([f4efa2f](https://bitbucket.org/enturas/design-system/commits/f4efa2f2ad3d09cf7806d26e0d0526041ac463f7))
226
+
227
+ ### Features
228
+
229
+ - **drawer:** add overlay prop, for optional overlay ([8577478](https://bitbucket.org/enturas/design-system/commits/85774782d653138073af2ad73c0924347d80e1aa))
230
+
231
+ # [1.2.0](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.29...@entur/modal@1.2.0) (2020-09-10)
232
+
233
+ ### Bug Fixes
234
+
235
+ - **drawer:** add overflow-y:auto for drawer ([687cea7](https://bitbucket.org/enturas/design-system/commits/687cea7ac5f3451951930a5a882ffbb3ad3a8615))
236
+
237
+ ### Features
238
+
239
+ - **drawer:** add style prop support ([77fbf0d](https://bitbucket.org/enturas/design-system/commits/77fbf0d74450930ca9359b51ca1c09dbe1070fc0))
240
+
241
+ ## [1.1.29](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.28...@entur/modal@1.1.29) (2020-09-02)
242
+
243
+ ### Bug Fixes
244
+
245
+ - **modal:** adjust modal backdrop color ([ba08fdc](https://bitbucket.org/enturas/design-system/commits/ba08fdca717b88a588023e0467d14a8220ef9d5b))
246
+
247
+ ## [1.1.28](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.27...@entur/modal@1.1.28) (2020-08-26)
248
+
249
+ **Note:** Version bump only for package @entur/modal
250
+
251
+ ## [1.1.27](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.26...@entur/modal@1.1.27) (2020-08-19)
252
+
253
+ **Note:** Version bump only for package @entur/modal
254
+
255
+ ## [1.1.26](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.25...@entur/modal@1.1.26) (2020-08-11)
256
+
257
+ **Note:** Version bump only for package @entur/modal
258
+
259
+ ## [1.1.25](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.24...@entur/modal@1.1.25) (2020-07-24)
260
+
261
+ **Note:** Version bump only for package @entur/modal
262
+
263
+ ## [1.1.24](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.23...@entur/modal@1.1.24) (2020-07-22)
264
+
265
+ **Note:** Version bump only for package @entur/modal
266
+
267
+ ## [1.1.23](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.22...@entur/modal@1.1.23) (2020-07-16)
268
+
269
+ ### Bug Fixes
270
+
271
+ - update modal dependency ([bab3f74](https://bitbucket.org/enturas/design-system/commits/bab3f74d5b379a801eaa057bad2880006e1d32eb))
272
+
273
+ ## [1.1.22](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.21...@entur/modal@1.1.22) (2020-07-13)
274
+
275
+ **Note:** Version bump only for package @entur/modal
276
+
277
+ ## [1.1.21](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.20...@entur/modal@1.1.21) (2020-07-09)
278
+
279
+ **Note:** Version bump only for package @entur/modal
280
+
281
+ ## [1.1.20](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.19...@entur/modal@1.1.20) (2020-07-03)
282
+
283
+ **Note:** Version bump only for package @entur/modal
284
+
285
+ ## [1.1.19](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.18...@entur/modal@1.1.19) (2020-06-17)
286
+
287
+ ### Bug Fixes
288
+
289
+ - use iconbutton in modal window ([0ec8929](https://bitbucket.org/enturas/design-system/commits/0ec8929a339d76fcbb6c1af6d6b39796b0554d11))
290
+
291
+ ## [1.1.18](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.17...@entur/modal@1.1.18) (2020-05-27)
292
+
293
+ **Note:** Version bump only for package @entur/modal
294
+
295
+ ## [1.1.17](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.16...@entur/modal@1.1.17) (2020-05-26)
296
+
297
+ ### Bug Fixes
298
+
299
+ - fix extraSmall prop for modal ([1aeba26](https://bitbucket.org/enturas/design-system/commits/1aeba2662d6fcd179b6f959676b6370e6cd4ef63))
300
+ - fix size=extraLarge not rendering properly for modal ([1ce2056](https://bitbucket.org/enturas/design-system/commits/1ce2056438dcb9c80f3357ddf1289a7523e5b51c))
301
+ - use iconbutton directly in drawer ([adcab79](https://bitbucket.org/enturas/design-system/commits/adcab79fd967741467ed5956a4463fbf199c2ed8))
302
+
303
+ ## [1.1.16](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.15...@entur/modal@1.1.16) (2020-05-20)
304
+
305
+ **Note:** Version bump only for package @entur/modal
306
+
307
+ ## [1.1.15](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.14...@entur/modal@1.1.15) (2020-04-27)
308
+
309
+ **Note:** Version bump only for package @entur/modal
310
+
311
+ ## [1.1.14](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.13...@entur/modal@1.1.14) (2020-04-23)
312
+
313
+ ### Bug Fixes
314
+
315
+ - updated to use new focus styling where applicable ([d0a52c0](https://bitbucket.org/enturas/design-system/commits/d0a52c096b673c6647070a90dd79bef9003ee0ad))
316
+
317
+ ## [1.1.13](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.12...@entur/modal@1.1.13) (2020-04-08)
318
+
319
+ **Note:** Version bump only for package @entur/modal
320
+
321
+ ## [1.1.12](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.10...@entur/modal@1.1.12) (2020-03-25)
322
+
323
+ **Note:** Version bump only for package @entur/modal
324
+
325
+ ## [1.1.11](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.10...@entur/modal@1.1.11) (2020-03-25)
326
+
327
+ **Note:** Version bump only for package @entur/modal
328
+
329
+ ## [1.1.10](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.9...@entur/modal@1.1.10) (2020-03-20)
330
+
331
+ **Note:** Version bump only for package @entur/modal
332
+
333
+ ## [1.1.9](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.8...@entur/modal@1.1.9) (2020-03-18)
334
+
335
+ **Note:** Version bump only for package @entur/modal
336
+
337
+ ## [1.1.8](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.7...@entur/modal@1.1.8) (2020-03-05)
338
+
339
+ **Note:** Version bump only for package @entur/modal
340
+
341
+ ## [1.1.7](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.6...@entur/modal@1.1.7) (2020-02-26)
342
+
343
+ **Note:** Version bump only for package @entur/modal
344
+
345
+ ## [1.1.6](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.5...@entur/modal@1.1.6) (2020-02-20)
346
+
347
+ **Note:** Version bump only for package @entur/modal
348
+
349
+ ## [1.1.5](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.4...@entur/modal@1.1.5) (2020-02-14)
350
+
351
+ **Note:** Version bump only for package @entur/modal
352
+
353
+ ## [1.1.4](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.3...@entur/modal@1.1.4) (2020-02-12)
354
+
355
+ ### Bug Fixes
356
+
357
+ - fix missing type for spreading of props ([0e5beba](https://bitbucket.org/enturas/design-system/commits/0e5beba82ea7dde39915cd626e665aa6c15dafbf))
358
+
359
+ ## [1.1.3](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.2...@entur/modal@1.1.3) (2020-02-10)
360
+
361
+ **Note:** Version bump only for package @entur/modal
362
+
363
+ ## [1.1.2](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.1...@entur/modal@1.1.2) (2020-02-05)
364
+
365
+ **Note:** Version bump only for package @entur/modal
366
+
367
+ ## [1.1.1](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.0...@entur/modal@1.1.1) (2020-02-05)
368
+
369
+ ### Bug Fixes
370
+
371
+ - remove test-files from build process ([e0b24af](https://bitbucket.org/enturas/design-system/commits/e0b24af05d5c2ad8de4ae587d83c389495235890))
372
+
373
+ # [1.1.0](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.0.7...@entur/modal@1.1.0) (2020-01-28)
374
+
375
+ ### Features
376
+
377
+ - **Drawer:** add new component - Drawer ([e869df0](https://bitbucket.org/enturas/design-system/commits/e869df0946bdc81c177df4b25f3cfe5dee0a7eb5))
378
+
379
+ ## [1.0.7](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.0.6...@entur/modal@1.0.7) (2020-01-27)
380
+
381
+ ### Bug Fixes
382
+
383
+ - **types:** place types in the correct place ([acace09](https://bitbucket.org/enturas/design-system/commits/acace09ec0e258c5cff3a65e13ab29d6603780d9))
384
+
385
+ ## [1.0.6](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.0.5...@entur/modal@1.0.6) (2020-01-20)
386
+
387
+ **Note:** Version bump only for package @entur/modal
388
+
389
+ ## [1.0.5](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.0.4...@entur/modal@1.0.5) (2020-01-14)
390
+
391
+ **Note:** Version bump only for package @entur/modal
392
+
393
+ ## [1.0.4](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.0.3...@entur/modal@1.0.4) (2020-01-13)
394
+
395
+ ### Bug Fixes
396
+
397
+ - fix focus styling for close button in modal window ([8d4b02f](https://bitbucket.org/enturas/design-system/commits/8d4b02f77500200c9a5281c9bb07a629fc3134b1))
398
+
399
+ ## [1.0.3](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.0.2...@entur/modal@1.0.3) (2020-01-10)
400
+
401
+ ### Bug Fixes
402
+
403
+ - **modal:** added a max height to the modal as well as overflow handling. ([32e78d9](https://bitbucket.org/enturas/design-system/commits/32e78d91b51599591c3cafc35f4adeffce966617))
404
+
405
+ ## [1.0.2](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.0.1...@entur/modal@1.0.2) (2020-01-08)
406
+
407
+ ### Bug Fixes
408
+
409
+ - warn in development if the developer have forgotten the CSS ([e5c30fc](https://bitbucket.org/enturas/design-system/commits/e5c30fc08624ef22c02773892778abd92205c6b0))
410
+
411
+ ## [1.0.1](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.0.0...@entur/modal@1.0.1) (2020-01-06)
412
+
413
+ **Note:** Version bump only for package @entur/modal
414
+
415
+ # [1.0.0](https://bitbucket.org/enturas/design-system/compare/@entur/modal@0.3.1...@entur/modal@1.0.0) (2019-11-29)
416
+
417
+ ### Bug Fixes
418
+
419
+ - **Modal, ModalOverlay:** rename isOpen to open ([c910829](https://bitbucket.org/enturas/design-system/commits/c910829527f3352e73c30ee4a2ae2c79c0d35070))
420
+ - **ModalContent:** add aria-labelledby to use the title as label ([400117c](https://bitbucket.org/enturas/design-system/commits/400117c93b03c693d088d579afa68c4702871330))
421
+
422
+ ### Features
423
+
424
+ - **Heading1-6:** add margin prop to all headings ([a167485](https://bitbucket.org/enturas/design-system/commits/a1674852143e8a99bff7c2dbebf20ff09aeea977))
425
+ - **Modal, ModalContent:** add support for title and sizes ([5190a2f](https://bitbucket.org/enturas/design-system/commits/5190a2f29ba410870f8d21621066e3647ccf5e3a))
426
+
427
+ ### BREAKING CHANGES
428
+
429
+ - **Modal, ModalOverlay:** Rename isOpen to open for the Modal and ModalOverlay components
430
+ - **Modal, ModalContent:** The title prop is now required. Remove any top level heading, and use the title prop instead. The
431
+ size prop is now required, too.
432
+
433
+ ## [0.3.1](https://bitbucket.org/enturas/design-system/compare/@entur/modal@0.3.0...@entur/modal@0.3.1) (2019-11-27)
434
+
435
+ ### Bug Fixes
436
+
437
+ - **types:** simplify the types to avoid extraneous props ([571ac56](https://bitbucket.org/enturas/design-system/commits/571ac568abb5a6b2c353d5711418d1058b51a91b))
438
+
439
+ # [0.3.0](https://bitbucket.org/enturas/design-system/compare/@entur/modal@0.2.1...@entur/modal@0.3.0) (2019-11-22)
440
+
441
+ ### Bug Fixes
442
+
443
+ - fixing potential duplication of props naming ([6efd896](https://bitbucket.org/enturas/design-system/commits/6efd896d381bca09bc047dbdaec6d2629a9571db))
444
+
445
+ ### Features
446
+
447
+ - **types:** exporting all public types for public components ([4a277ab](https://bitbucket.org/enturas/design-system/commits/4a277ab266fdb32a6760821a07b1c6cc716bac85))
448
+
449
+ ## [0.2.1](https://bitbucket.org/enturas/design-system/compare/@entur/modal@0.2.0...@entur/modal@0.2.1) (2019-11-14)
450
+
451
+ ### Bug Fixes
452
+
453
+ - **css classnames:** fixing naming collisions with CSS classes ([a93ca43](https://bitbucket.org/enturas/design-system/commits/a93ca435d3a01d61d8f02694a672686b9e943a66))
454
+
455
+ # 0.2.0 (2019-10-30)
456
+
457
+ ### Bug Fixes
458
+
459
+ - **modal:** add missing dependencies ([c1065c0](https://bitbucket.org/enturas/design-system/commits/c1065c00e746a99148e2ec0578f50e79c135ac8a))
460
+ - update all packages to use new tokens ([4847835](https://bitbucket.org/enturas/design-system/commits/48478359b0e562ba828e06d9b5c57239316805c2))
461
+ - **modal:** center modals on screen ([3525d8c](https://bitbucket.org/enturas/design-system/commits/3525d8c572431878582edc7e8bbbbfb2b1276ed3))
462
+ - **style:** set a minimum width for all modals ([a4f208f](https://bitbucket.org/enturas/design-system/commits/a4f208f7a98a8cb671dc8532b360e73d3ce864d1))
463
+
464
+ ### Features
465
+
466
+ - **modal:** add new package @entur/modal ([642e78c](https://bitbucket.org/enturas/design-system/commits/642e78cac1f4db4e63ac3c202405c9876b68ff4a))
@@ -7,7 +7,7 @@ export declare type ModalContentProps = {
7
7
  /** Størrelsen på modalen */
8
8
  size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';
9
9
  /** Tittelen som vises i modalen */
10
- title: string;
10
+ title?: string;
11
11
  [key: string]: any;
12
12
  };
13
13
  export declare const ModalContent: React.FC<ModalContentProps>;
@@ -22,34 +22,41 @@ function _extends() {
22
22
  _extends = Object.assign || function (target) {
23
23
  for (var i = 1; i < arguments.length; i++) {
24
24
  var source = arguments[i];
25
+
25
26
  for (var key in source) {
26
27
  if (Object.prototype.hasOwnProperty.call(source, key)) {
27
28
  target[key] = source[key];
28
29
  }
29
30
  }
30
31
  }
32
+
31
33
  return target;
32
34
  };
35
+
33
36
  return _extends.apply(this, arguments);
34
37
  }
38
+
35
39
  function _objectWithoutPropertiesLoose(source, excluded) {
36
40
  if (source == null) return {};
37
41
  var target = {};
38
42
  var sourceKeys = Object.keys(source);
39
43
  var key, i;
44
+
40
45
  for (i = 0; i < sourceKeys.length; i++) {
41
46
  key = sourceKeys[i];
42
47
  if (excluded.indexOf(key) >= 0) continue;
43
48
  target[key] = source[key];
44
49
  }
50
+
45
51
  return target;
46
52
  }
47
53
 
48
54
  var _excluded$2 = ["className", "open"];
49
55
  var ModalOverlay = function ModalOverlay(_ref) {
50
56
  var className = _ref.className,
51
- open = _ref.open,
52
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
57
+ open = _ref.open,
58
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
59
+
53
60
  return React__default["default"].createElement(dialog.DialogOverlay, _extends({
54
61
  className: classNames__default["default"]('eds-modal__overlay', className),
55
62
  isOpen: open
@@ -66,16 +73,17 @@ var headingsMap = {
66
73
  };
67
74
  var ModalContent = function ModalContent(_ref) {
68
75
  var children = _ref.children,
69
- className = _ref.className,
70
- size = _ref.size,
71
- title = _ref.title,
72
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
76
+ className = _ref.className,
77
+ size = _ref.size,
78
+ title = _ref.title,
79
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
80
+
73
81
  var Heading = headingsMap[size] || typography.Heading2;
74
82
  var randomId = utils.useRandomId('eds-modal');
75
83
  return React__default["default"].createElement(dialog.DialogContent, _extends({
76
84
  className: classNames__default["default"]('eds-modal__content', "eds-modal__content--size-" + size, className),
77
85
  "aria-labelledby": randomId
78
- }, rest), React__default["default"].createElement(Heading, {
86
+ }, rest), title && React__default["default"].createElement(Heading, {
79
87
  margin: "bottom",
80
88
  as: "h2",
81
89
  id: randomId
@@ -85,20 +93,23 @@ var ModalContent = function ModalContent(_ref) {
85
93
  var _excluded = ["children", "closeLabel", "initialFocusRef", "open", "onDismiss", "size", "closeOnClickOutside"];
86
94
  var Modal = function Modal(_ref) {
87
95
  var children = _ref.children,
88
- _ref$closeLabel = _ref.closeLabel,
89
- closeLabel = _ref$closeLabel === void 0 ? 'Lukk' : _ref$closeLabel,
90
- initialFocusRef = _ref.initialFocusRef,
91
- open = _ref.open,
92
- onDismiss = _ref.onDismiss,
93
- size = _ref.size,
94
- _ref$closeOnClickOuts = _ref.closeOnClickOutside,
95
- closeOnClickOutside = _ref$closeOnClickOuts === void 0 ? true : _ref$closeOnClickOuts,
96
- rest = _objectWithoutPropertiesLoose(_ref, _excluded);
96
+ _ref$closeLabel = _ref.closeLabel,
97
+ closeLabel = _ref$closeLabel === void 0 ? 'Lukk' : _ref$closeLabel,
98
+ initialFocusRef = _ref.initialFocusRef,
99
+ open = _ref.open,
100
+ onDismiss = _ref.onDismiss,
101
+ size = _ref.size,
102
+ _ref$closeOnClickOuts = _ref.closeOnClickOutside,
103
+ closeOnClickOutside = _ref$closeOnClickOuts === void 0 ? true : _ref$closeOnClickOuts,
104
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded);
105
+
97
106
  var showCloseButton = ['medium', 'large', 'extraLarge'].includes(size);
98
107
  var handleOnDismiss;
108
+
99
109
  if (onDismiss && closeOnClickOutside) {
100
110
  handleOnDismiss = onDismiss;
101
111
  }
112
+
102
113
  return React__default["default"].createElement(ModalOverlay, {
103
114
  open: open,
104
115
  onDismiss: handleOnDismiss,
@@ -114,28 +125,31 @@ var Modal = function Modal(_ref) {
114
125
 
115
126
  var Drawer = function Drawer(_ref) {
116
127
  var children = _ref.children,
117
- className = _ref.className,
118
- _ref$closeLabel = _ref.closeLabel,
119
- closeLabel = _ref$closeLabel === void 0 ? 'Lukk skuff' : _ref$closeLabel,
120
- _ref$contrast = _ref.contrast,
121
- contrast = _ref$contrast === void 0 ? false : _ref$contrast,
122
- _ref$open = _ref.open,
123
- open = _ref$open === void 0 ? true : _ref$open,
124
- onDismiss = _ref.onDismiss,
125
- title = _ref.title,
126
- style = _ref.style,
127
- _ref$overlay = _ref.overlay,
128
- overlay = _ref$overlay === void 0 ? false : _ref$overlay;
128
+ className = _ref.className,
129
+ _ref$closeLabel = _ref.closeLabel,
130
+ closeLabel = _ref$closeLabel === void 0 ? 'Lukk skuff' : _ref$closeLabel,
131
+ _ref$contrast = _ref.contrast,
132
+ contrast = _ref$contrast === void 0 ? false : _ref$contrast,
133
+ _ref$open = _ref.open,
134
+ open = _ref$open === void 0 ? true : _ref$open,
135
+ onDismiss = _ref.onDismiss,
136
+ title = _ref.title,
137
+ style = _ref.style,
138
+ _ref$overlay = _ref.overlay,
139
+ overlay = _ref$overlay === void 0 ? false : _ref$overlay;
129
140
  var titleId = utils.useRandomId('eds-drawer');
141
+
130
142
  if (!open) {
131
143
  return null;
132
144
  }
145
+
133
146
  var handleKeyDown = function handleKeyDown(e) {
134
147
  if (e.key === 'Escape') {
135
148
  e.stopPropagation();
136
149
  onDismiss();
137
150
  }
138
151
  };
152
+
139
153
  var Wrapper = contrast ? layout.Contrast : React__default["default"].Fragment;
140
154
  var ContentContainer = overlay ? dialog.DialogContent : 'div';
141
155
  return React__default["default"].createElement(ConditionalWrapper, {
@@ -164,10 +178,11 @@ var Drawer = function Drawer(_ref) {
164
178
  "aria-hidden": true
165
179
  }), React__default["default"].createElement(a11y.VisuallyHidden, null, closeLabel))))));
166
180
  };
181
+
167
182
  var ConditionalWrapper = function ConditionalWrapper(_ref2) {
168
183
  var condition = _ref2.condition,
169
- wrapper = _ref2.wrapper,
170
- children = _ref2.children;
184
+ wrapper = _ref2.wrapper,
185
+ children = _ref2.children;
171
186
  return condition ? wrapper(children) : children;
172
187
  };
173
188
 
@@ -1 +1 @@
1
- {"version":3,"file":"modal.cjs.development.js","sources":["../src/ModalOverlay.tsx","../src/ModalContent.tsx","../src/Modal.tsx","../src/Drawer.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { DialogOverlay } from '@reach/dialog';\n\nexport type ModalOverlayProps = {\n /** Flagg som sier om modalen er åpen */\n open?: boolean;\n /** Callback som kalles når brukeren ber om å lukke modalen */\n onDismiss?: () => void;\n /** Innholdet i modalen */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen */\n initialFocusRef?: React.RefObject<HTMLElement>;\n [key: string]: any;\n};\n\nexport const ModalOverlay: React.FC<ModalOverlayProps> = ({\n className,\n open,\n ...rest\n}) => (\n <DialogOverlay\n className={classNames('eds-modal__overlay', className)}\n isOpen={open}\n {...rest}\n />\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { DialogContent } from '@reach/dialog';\nimport { Heading4, Heading3, Heading2 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\n\nexport type ModalContentProps = {\n /** Innholdet i modalen */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Størrelsen på modalen */\n size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';\n /** Tittelen som vises i modalen */\n title: string;\n [key: string]: any;\n};\n\nconst headingsMap = {\n extraSmall: Heading4,\n small: Heading3,\n medium: Heading2,\n large: Heading2,\n extraLarge: Heading2,\n};\n\nexport const ModalContent: React.FC<ModalContentProps> = ({\n children,\n className,\n size,\n title,\n ...rest\n}) => {\n const Heading: React.ElementType = headingsMap[size] || Heading2;\n const randomId = useRandomId('eds-modal');\n return (\n <DialogContent\n className={classNames(\n 'eds-modal__content',\n `eds-modal__content--size-${size}`,\n className,\n )}\n aria-labelledby={randomId}\n {...rest}\n >\n <Heading margin=\"bottom\" as=\"h2\" id={randomId}>\n {title}\n </Heading>\n {children}\n </DialogContent>\n );\n};\n","import React from 'react';\nimport { CloseIcon } from '@entur/icons';\nimport { ModalOverlay } from './ModalOverlay';\nimport { ModalContent } from './ModalContent';\nimport { IconButton } from '@entur/button';\nimport './Modal.scss';\n\nexport type ModalProps = {\n /** Innholdet i modalen */\n children: React.ReactNode;\n /** Skjermleser-label til lukk-knappen */\n closeLabel?: string;\n /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen */\n initialFocusRef?: React.RefObject<HTMLElement>;\n /** Flagg som sier om modalen er åpen */\n open?: boolean;\n /** Callback som kalles når brukeren ber om å lukke modalen */\n onDismiss?: () => void;\n /** Størrelsen på modalen */\n size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';\n /** Tittelen som vises i modalen */\n title: string;\n /** Om modalen skal lukkes når man klikker på utsiden av den\n * @default true\n */\n closeOnClickOutside?: boolean;\n [key: string]: any;\n};\n\nexport const Modal: React.FC<ModalProps> = ({\n children,\n closeLabel = 'Lukk',\n initialFocusRef,\n open,\n onDismiss,\n size,\n closeOnClickOutside = true,\n ...rest\n}) => {\n const showCloseButton = ['medium', 'large', 'extraLarge'].includes(size);\n\n let handleOnDismiss;\n if (onDismiss && closeOnClickOutside) {\n handleOnDismiss = onDismiss;\n }\n return (\n <ModalOverlay\n open={open}\n onDismiss={handleOnDismiss}\n initialFocusRef={initialFocusRef}\n >\n <ModalContent size={size} {...rest}>\n {showCloseButton && (\n <IconButton\n className=\"eds-modal__close\"\n aria-label={closeLabel}\n onClick={onDismiss}\n >\n <CloseIcon />\n </IconButton>\n )}\n {children}\n </ModalContent>\n </ModalOverlay>\n );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { MoveFocusInside } from 'react-focus-lock';\nimport { VisuallyHidden } from '@entur/a11y';\nimport { Contrast } from '@entur/layout';\nimport { CloseIcon } from '@entur/icons';\nimport { Heading3 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\nimport { IconButton } from '@entur/button';\n\nimport './Drawer.scss';\nimport { ModalOverlay } from './ModalOverlay';\nimport { DialogContent } from '@reach/dialog';\n\nexport type DrawerProps = {\n /** Innholdet. Typisk tekst, lenker eller knapper */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Tekst som beskriver lukkeknappen for skjermlesere\n * @default 'Lukk skuff'\n */\n closeLabel?: string;\n /** Om draweren skal vises i mørk variant\n * @default false\n */\n contrast?: boolean;\n /** Callback som kalles når brukeren ønsker å lukke draweren */\n onDismiss: () => void;\n /** Om draweren er åpen eller ikke\n * @default true\n */\n open?: boolean;\n /** Tittel på toppen av draweren */\n title: string;\n /** Styling som sendes til Drawer */\n style?: React.CSSProperties;\n /** Legger på et overlay over resten av siden */\n overlay?: boolean;\n};\n\nexport const Drawer: React.FC<DrawerProps> = ({\n children,\n className,\n closeLabel = 'Lukk skuff',\n contrast = false,\n open = true,\n onDismiss,\n title,\n style,\n overlay = false,\n}) => {\n const titleId = useRandomId('eds-drawer');\n\n if (!open) {\n return null;\n }\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') {\n e.stopPropagation();\n onDismiss();\n }\n };\n\n const Wrapper = contrast ? Contrast : React.Fragment;\n const ContentContainer = overlay ? DialogContent : 'div';\n return (\n <ConditionalWrapper\n condition={overlay}\n wrapper={(children: React.ReactNode) => (\n <ModalOverlay open={open} onDismiss={onDismiss}>\n {children}\n </ModalOverlay>\n )}\n >\n <Wrapper>\n <ContentContainer\n aria-labelledby={titleId}\n className={classNames('eds-drawer', className)}\n onKeyDown={handleKeyDown}\n style={style}\n >\n <MoveFocusInside>\n <div className=\"eds-drawer__content\">\n <Heading3 as=\"h2\" id={titleId}>\n {title}\n </Heading3>\n {children}\n </div>\n <IconButton\n className=\"eds-drawer__close-button\"\n onClick={onDismiss}\n type=\"button\"\n >\n <CloseIcon aria-hidden />\n <VisuallyHidden>{closeLabel}</VisuallyHidden>\n </IconButton>\n </MoveFocusInside>\n </ContentContainer>\n </Wrapper>\n </ConditionalWrapper>\n );\n};\n\nconst ConditionalWrapper: React.FC<{\n condition: boolean;\n wrapper: (child: JSX.Element) => JSX.Element;\n children: React.ReactElement;\n}> = ({ condition, wrapper, children }) =>\n condition ? wrapper(children) : children;\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('modal', 'icons', 'typography', 'a11y', 'button');\n\nexport * from './Modal';\nexport * from './ModalOverlay';\nexport * from './ModalContent';\nexport * from './Drawer';\n"],"names":["ModalOverlay","className","open","rest","React","DialogOverlay","classNames","isOpen","headingsMap","extraSmall","Heading4","small","Heading3","medium","Heading2","large","extraLarge","ModalContent","children","size","title","Heading","randomId","useRandomId","DialogContent","margin","as","id","Modal","closeLabel","initialFocusRef","onDismiss","closeOnClickOutside","showCloseButton","includes","handleOnDismiss","IconButton","onClick","CloseIcon","Drawer","contrast","style","overlay","titleId","handleKeyDown","e","key","stopPropagation","Wrapper","Contrast","Fragment","ContentContainer","ConditionalWrapper","condition","wrapper","onKeyDown","MoveFocusInside","type","VisuallyHidden","warnAboutMissingStyles"],"mappings":"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"}
1
+ {"version":3,"file":"modal.cjs.development.js","sources":["../src/ModalOverlay.tsx","../src/ModalContent.tsx","../src/Modal.tsx","../src/Drawer.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { DialogOverlay } from '@reach/dialog';\n\nexport type ModalOverlayProps = {\n /** Flagg som sier om modalen er åpen */\n open?: boolean;\n /** Callback som kalles når brukeren ber om å lukke modalen */\n onDismiss?: () => void;\n /** Innholdet i modalen */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen */\n initialFocusRef?: React.RefObject<HTMLElement>;\n [key: string]: any;\n};\n\nexport const ModalOverlay: React.FC<ModalOverlayProps> = ({\n className,\n open,\n ...rest\n}) => (\n <DialogOverlay\n className={classNames('eds-modal__overlay', className)}\n isOpen={open}\n {...rest}\n />\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { DialogContent } from '@reach/dialog';\nimport { Heading4, Heading3, Heading2 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\n\nexport type ModalContentProps = {\n /** Innholdet i modalen */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Størrelsen på modalen */\n size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';\n /** Tittelen som vises i modalen */\n title?: string;\n [key: string]: any;\n};\n\nconst headingsMap = {\n extraSmall: Heading4,\n small: Heading3,\n medium: Heading2,\n large: Heading2,\n extraLarge: Heading2,\n};\n\nexport const ModalContent: React.FC<ModalContentProps> = ({\n children,\n className,\n size,\n title,\n ...rest\n}) => {\n const Heading: React.ElementType = headingsMap[size] || Heading2;\n const randomId = useRandomId('eds-modal');\n return (\n <DialogContent\n className={classNames(\n 'eds-modal__content',\n `eds-modal__content--size-${size}`,\n className,\n )}\n aria-labelledby={randomId}\n {...rest}\n >\n {title && (\n <Heading margin=\"bottom\" as=\"h2\" id={randomId}>\n {title}\n </Heading>\n )}\n {children}\n </DialogContent>\n );\n};\n","import React from 'react';\nimport { CloseIcon } from '@entur/icons';\nimport { ModalOverlay } from './ModalOverlay';\nimport { ModalContent } from './ModalContent';\nimport { IconButton } from '@entur/button';\nimport './Modal.scss';\n\nexport type ModalProps = {\n /** Innholdet i modalen */\n children: React.ReactNode;\n /** Skjermleser-label til lukk-knappen */\n closeLabel?: string;\n /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen */\n initialFocusRef?: React.RefObject<HTMLElement>;\n /** Flagg som sier om modalen er åpen */\n open?: boolean;\n /** Callback som kalles når brukeren ber om å lukke modalen */\n onDismiss?: () => void;\n /** Størrelsen på modalen */\n size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';\n /** Tittelen som vises i modalen */\n title: string;\n /** Om modalen skal lukkes når man klikker på utsiden av den\n * @default true\n */\n closeOnClickOutside?: boolean;\n [key: string]: any;\n};\n\nexport const Modal: React.FC<ModalProps> = ({\n children,\n closeLabel = 'Lukk',\n initialFocusRef,\n open,\n onDismiss,\n size,\n closeOnClickOutside = true,\n ...rest\n}) => {\n const showCloseButton = ['medium', 'large', 'extraLarge'].includes(size);\n\n let handleOnDismiss;\n if (onDismiss && closeOnClickOutside) {\n handleOnDismiss = onDismiss;\n }\n return (\n <ModalOverlay\n open={open}\n onDismiss={handleOnDismiss}\n initialFocusRef={initialFocusRef}\n >\n <ModalContent size={size} {...rest}>\n {showCloseButton && (\n <IconButton\n className=\"eds-modal__close\"\n aria-label={closeLabel}\n onClick={onDismiss}\n >\n <CloseIcon />\n </IconButton>\n )}\n {children}\n </ModalContent>\n </ModalOverlay>\n );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { MoveFocusInside } from 'react-focus-lock';\nimport { VisuallyHidden } from '@entur/a11y';\nimport { Contrast } from '@entur/layout';\nimport { CloseIcon } from '@entur/icons';\nimport { Heading3 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\nimport { IconButton } from '@entur/button';\n\nimport './Drawer.scss';\nimport { ModalOverlay } from './ModalOverlay';\nimport { DialogContent } from '@reach/dialog';\n\nexport type DrawerProps = {\n /** Innholdet. Typisk tekst, lenker eller knapper */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Tekst som beskriver lukkeknappen for skjermlesere\n * @default 'Lukk skuff'\n */\n closeLabel?: string;\n /** Om draweren skal vises i mørk variant\n * @default false\n */\n contrast?: boolean;\n /** Callback som kalles når brukeren ønsker å lukke draweren */\n onDismiss: () => void;\n /** Om draweren er åpen eller ikke\n * @default true\n */\n open?: boolean;\n /** Tittel på toppen av draweren */\n title: string;\n /** Styling som sendes til Drawer */\n style?: React.CSSProperties;\n /** Legger på et overlay over resten av siden */\n overlay?: boolean;\n};\n\nexport const Drawer: React.FC<DrawerProps> = ({\n children,\n className,\n closeLabel = 'Lukk skuff',\n contrast = false,\n open = true,\n onDismiss,\n title,\n style,\n overlay = false,\n}) => {\n const titleId = useRandomId('eds-drawer');\n\n if (!open) {\n return null;\n }\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') {\n e.stopPropagation();\n onDismiss();\n }\n };\n\n const Wrapper = contrast ? Contrast : React.Fragment;\n const ContentContainer = overlay ? DialogContent : 'div';\n return (\n <ConditionalWrapper\n condition={overlay}\n wrapper={(children: React.ReactNode) => (\n <ModalOverlay open={open} onDismiss={onDismiss}>\n {children}\n </ModalOverlay>\n )}\n >\n <Wrapper>\n <ContentContainer\n aria-labelledby={titleId}\n className={classNames('eds-drawer', className)}\n onKeyDown={handleKeyDown}\n style={style}\n >\n <MoveFocusInside>\n <div className=\"eds-drawer__content\">\n <Heading3 as=\"h2\" id={titleId}>\n {title}\n </Heading3>\n {children}\n </div>\n <IconButton\n className=\"eds-drawer__close-button\"\n onClick={onDismiss}\n type=\"button\"\n >\n <CloseIcon aria-hidden />\n <VisuallyHidden>{closeLabel}</VisuallyHidden>\n </IconButton>\n </MoveFocusInside>\n </ContentContainer>\n </Wrapper>\n </ConditionalWrapper>\n );\n};\n\nconst ConditionalWrapper: React.FC<{\n condition: boolean;\n wrapper: (child: JSX.Element) => JSX.Element;\n children: React.ReactElement;\n}> = ({ condition, wrapper, children }) =>\n condition ? wrapper(children) : children;\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('modal', 'icons', 'typography', 'a11y', 'button');\n\nexport * from './Modal';\nexport * from './ModalOverlay';\nexport * from './ModalContent';\nexport * from './Drawer';\n"],"names":["ModalOverlay","className","open","rest","React","DialogOverlay","classNames","isOpen","headingsMap","extraSmall","Heading4","small","Heading3","medium","Heading2","large","extraLarge","ModalContent","children","size","title","Heading","randomId","useRandomId","DialogContent","margin","as","id","Modal","closeLabel","initialFocusRef","onDismiss","closeOnClickOutside","showCloseButton","includes","handleOnDismiss","IconButton","onClick","CloseIcon","Drawer","contrast","style","overlay","titleId","handleKeyDown","e","key","stopPropagation","Wrapper","Contrast","Fragment","ContentContainer","ConditionalWrapper","condition","wrapper","onKeyDown","MoveFocusInside","type","VisuallyHidden","warnAboutMissingStyles"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@entur/utils"),t=require("react"),a=require("@entur/icons"),n=require("classnames"),l=require("@reach/dialog"),r=require("@entur/typography"),o=require("@entur/button"),i=require("react-focus-lock"),s=require("@entur/a11y"),u=require("@entur/layout");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=d(t),m=d(n);function f(){return f=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},f.apply(this,arguments)}function p(e,t){if(null==e)return{};var a,n,l={},r=Object.keys(e);for(n=0;n<r.length;n++)t.indexOf(a=r[n])>=0||(l[a]=e[a]);return l}var v=["className","open"],y=function(e){var t=e.className,a=e.open,n=p(e,v);return c.default.createElement(l.DialogOverlay,f({className:m.default("eds-modal__overlay",t),isOpen:a},n))},g=["children","className","size","title"],b={extraSmall:r.Heading4,small:r.Heading3,medium:r.Heading2,large:r.Heading2,extraLarge:r.Heading2},E=function(t){var a=t.children,n=t.className,o=t.size,i=t.title,s=p(t,g),u=b[o]||r.Heading2,d=e.useRandomId("eds-modal");return c.default.createElement(l.DialogContent,f({className:m.default("eds-modal__content","eds-modal__content--size-"+o,n),"aria-labelledby":d},s),c.default.createElement(u,{margin:"bottom",as:"h2",id:d},i),a)},h=["children","closeLabel","initialFocusRef","open","onDismiss","size","closeOnClickOutside"],_=function(e){var t=e.children;return e.condition?(0,e.wrapper)(t):t};e.warnAboutMissingStyles("modal","icons","typography","a11y","button"),exports.Drawer=function(t){var n=t.children,d=t.className,f=t.closeLabel,p=void 0===f?"Lukk skuff":f,v=t.contrast,g=void 0!==v&&v,b=t.open,E=void 0===b||b,h=t.onDismiss,O=t.title,k=t.style,N=t.overlay,q=void 0!==N&&N,w=e.useRandomId("eds-drawer");return E?c.default.createElement(_,{condition:q,wrapper:function(e){return c.default.createElement(y,{open:E,onDismiss:h},e)}},c.default.createElement(g?u.Contrast:c.default.Fragment,null,c.default.createElement(q?l.DialogContent:"div",{"aria-labelledby":w,className:m.default("eds-drawer",d),onKeyDown:function(e){"Escape"===e.key&&(e.stopPropagation(),h())},style:k},c.default.createElement(i.MoveFocusInside,null,c.default.createElement("div",{className:"eds-drawer__content"},c.default.createElement(r.Heading3,{as:"h2",id:w},O),n),c.default.createElement(o.IconButton,{className:"eds-drawer__close-button",onClick:h,type:"button"},c.default.createElement(a.CloseIcon,{"aria-hidden":!0}),c.default.createElement(s.VisuallyHidden,null,p)))))):null},exports.Modal=function(e){var t,n=e.children,l=e.closeLabel,r=void 0===l?"Lukk":l,i=e.initialFocusRef,s=e.open,u=e.onDismiss,d=e.size,m=e.closeOnClickOutside,v=void 0===m||m,g=p(e,h),b=["medium","large","extraLarge"].includes(d);return u&&v&&(t=u),c.default.createElement(y,{open:s,onDismiss:t,initialFocusRef:i},c.default.createElement(E,f({size:d},g),b&&c.default.createElement(o.IconButton,{className:"eds-modal__close","aria-label":r,onClick:u},c.default.createElement(a.CloseIcon,null)),n))},exports.ModalContent=E,exports.ModalOverlay=y;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@entur/utils"),t=require("react"),a=require("@entur/icons"),n=require("classnames"),l=require("@reach/dialog"),r=require("@entur/typography"),o=require("@entur/button"),i=require("react-focus-lock"),s=require("@entur/a11y"),u=require("@entur/layout");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=d(t),m=d(n);function f(){return f=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},f.apply(this,arguments)}function p(e,t){if(null==e)return{};var a,n,l={},r=Object.keys(e);for(n=0;n<r.length;n++)t.indexOf(a=r[n])>=0||(l[a]=e[a]);return l}var v=["className","open"],y=function(e){var t=e.className,a=e.open,n=p(e,v);return c.default.createElement(l.DialogOverlay,f({className:m.default("eds-modal__overlay",t),isOpen:a},n))},g=["children","className","size","title"],b={extraSmall:r.Heading4,small:r.Heading3,medium:r.Heading2,large:r.Heading2,extraLarge:r.Heading2},E=function(t){var a=t.children,n=t.className,o=t.size,i=t.title,s=p(t,g),u=b[o]||r.Heading2,d=e.useRandomId("eds-modal");return c.default.createElement(l.DialogContent,f({className:m.default("eds-modal__content","eds-modal__content--size-"+o,n),"aria-labelledby":d},s),i&&c.default.createElement(u,{margin:"bottom",as:"h2",id:d},i),a)},h=["children","closeLabel","initialFocusRef","open","onDismiss","size","closeOnClickOutside"],_=function(e){var t=e.children;return e.condition?(0,e.wrapper)(t):t};e.warnAboutMissingStyles("modal","icons","typography","a11y","button"),exports.Drawer=function(t){var n=t.children,d=t.className,f=t.closeLabel,p=void 0===f?"Lukk skuff":f,v=t.contrast,g=void 0!==v&&v,b=t.open,E=void 0===b||b,h=t.onDismiss,O=t.title,k=t.style,N=t.overlay,q=void 0!==N&&N,w=e.useRandomId("eds-drawer");return E?c.default.createElement(_,{condition:q,wrapper:function(e){return c.default.createElement(y,{open:E,onDismiss:h},e)}},c.default.createElement(g?u.Contrast:c.default.Fragment,null,c.default.createElement(q?l.DialogContent:"div",{"aria-labelledby":w,className:m.default("eds-drawer",d),onKeyDown:function(e){"Escape"===e.key&&(e.stopPropagation(),h())},style:k},c.default.createElement(i.MoveFocusInside,null,c.default.createElement("div",{className:"eds-drawer__content"},c.default.createElement(r.Heading3,{as:"h2",id:w},O),n),c.default.createElement(o.IconButton,{className:"eds-drawer__close-button",onClick:h,type:"button"},c.default.createElement(a.CloseIcon,{"aria-hidden":!0}),c.default.createElement(s.VisuallyHidden,null,p)))))):null},exports.Modal=function(e){var t,n=e.children,l=e.closeLabel,r=void 0===l?"Lukk":l,i=e.initialFocusRef,s=e.open,u=e.onDismiss,d=e.size,m=e.closeOnClickOutside,v=void 0===m||m,g=p(e,h),b=["medium","large","extraLarge"].includes(d);return u&&v&&(t=u),c.default.createElement(y,{open:s,onDismiss:t,initialFocusRef:i},c.default.createElement(E,f({size:d},g),b&&c.default.createElement(o.IconButton,{className:"eds-modal__close","aria-label":r,onClick:u},c.default.createElement(a.CloseIcon,null)),n))},exports.ModalContent=E,exports.ModalOverlay=y;
2
2
  //# sourceMappingURL=modal.cjs.production.min.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"modal.cjs.production.min.js","sources":["../src/ModalOverlay.tsx","../src/ModalContent.tsx","../src/Drawer.tsx","../src/index.tsx","../src/Modal.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { DialogOverlay } from '@reach/dialog';\n\nexport type ModalOverlayProps = {\n /** Flagg som sier om modalen er åpen */\n open?: boolean;\n /** Callback som kalles når brukeren ber om å lukke modalen */\n onDismiss?: () => void;\n /** Innholdet i modalen */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen */\n initialFocusRef?: React.RefObject<HTMLElement>;\n [key: string]: any;\n};\n\nexport const ModalOverlay: React.FC<ModalOverlayProps> = ({\n className,\n open,\n ...rest\n}) => (\n <DialogOverlay\n className={classNames('eds-modal__overlay', className)}\n isOpen={open}\n {...rest}\n />\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { DialogContent } from '@reach/dialog';\nimport { Heading4, Heading3, Heading2 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\n\nexport type ModalContentProps = {\n /** Innholdet i modalen */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Størrelsen på modalen */\n size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';\n /** Tittelen som vises i modalen */\n title: string;\n [key: string]: any;\n};\n\nconst headingsMap = {\n extraSmall: Heading4,\n small: Heading3,\n medium: Heading2,\n large: Heading2,\n extraLarge: Heading2,\n};\n\nexport const ModalContent: React.FC<ModalContentProps> = ({\n children,\n className,\n size,\n title,\n ...rest\n}) => {\n const Heading: React.ElementType = headingsMap[size] || Heading2;\n const randomId = useRandomId('eds-modal');\n return (\n <DialogContent\n className={classNames(\n 'eds-modal__content',\n `eds-modal__content--size-${size}`,\n className,\n )}\n aria-labelledby={randomId}\n {...rest}\n >\n <Heading margin=\"bottom\" as=\"h2\" id={randomId}>\n {title}\n </Heading>\n {children}\n </DialogContent>\n );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { MoveFocusInside } from 'react-focus-lock';\nimport { VisuallyHidden } from '@entur/a11y';\nimport { Contrast } from '@entur/layout';\nimport { CloseIcon } from '@entur/icons';\nimport { Heading3 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\nimport { IconButton } from '@entur/button';\n\nimport './Drawer.scss';\nimport { ModalOverlay } from './ModalOverlay';\nimport { DialogContent } from '@reach/dialog';\n\nexport type DrawerProps = {\n /** Innholdet. Typisk tekst, lenker eller knapper */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Tekst som beskriver lukkeknappen for skjermlesere\n * @default 'Lukk skuff'\n */\n closeLabel?: string;\n /** Om draweren skal vises i mørk variant\n * @default false\n */\n contrast?: boolean;\n /** Callback som kalles når brukeren ønsker å lukke draweren */\n onDismiss: () => void;\n /** Om draweren er åpen eller ikke\n * @default true\n */\n open?: boolean;\n /** Tittel på toppen av draweren */\n title: string;\n /** Styling som sendes til Drawer */\n style?: React.CSSProperties;\n /** Legger på et overlay over resten av siden */\n overlay?: boolean;\n};\n\nexport const Drawer: React.FC<DrawerProps> = ({\n children,\n className,\n closeLabel = 'Lukk skuff',\n contrast = false,\n open = true,\n onDismiss,\n title,\n style,\n overlay = false,\n}) => {\n const titleId = useRandomId('eds-drawer');\n\n if (!open) {\n return null;\n }\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') {\n e.stopPropagation();\n onDismiss();\n }\n };\n\n const Wrapper = contrast ? Contrast : React.Fragment;\n const ContentContainer = overlay ? DialogContent : 'div';\n return (\n <ConditionalWrapper\n condition={overlay}\n wrapper={(children: React.ReactNode) => (\n <ModalOverlay open={open} onDismiss={onDismiss}>\n {children}\n </ModalOverlay>\n )}\n >\n <Wrapper>\n <ContentContainer\n aria-labelledby={titleId}\n className={classNames('eds-drawer', className)}\n onKeyDown={handleKeyDown}\n style={style}\n >\n <MoveFocusInside>\n <div className=\"eds-drawer__content\">\n <Heading3 as=\"h2\" id={titleId}>\n {title}\n </Heading3>\n {children}\n </div>\n <IconButton\n className=\"eds-drawer__close-button\"\n onClick={onDismiss}\n type=\"button\"\n >\n <CloseIcon aria-hidden />\n <VisuallyHidden>{closeLabel}</VisuallyHidden>\n </IconButton>\n </MoveFocusInside>\n </ContentContainer>\n </Wrapper>\n </ConditionalWrapper>\n );\n};\n\nconst ConditionalWrapper: React.FC<{\n condition: boolean;\n wrapper: (child: JSX.Element) => JSX.Element;\n children: React.ReactElement;\n}> = ({ condition, wrapper, children }) =>\n condition ? wrapper(children) : children;\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('modal', 'icons', 'typography', 'a11y', 'button');\n\nexport * from './Modal';\nexport * from './ModalOverlay';\nexport * from './ModalContent';\nexport * from './Drawer';\n","import React from 'react';\nimport { CloseIcon } from '@entur/icons';\nimport { ModalOverlay } from './ModalOverlay';\nimport { ModalContent } from './ModalContent';\nimport { IconButton } from '@entur/button';\nimport './Modal.scss';\n\nexport type ModalProps = {\n /** Innholdet i modalen */\n children: React.ReactNode;\n /** Skjermleser-label til lukk-knappen */\n closeLabel?: string;\n /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen */\n initialFocusRef?: React.RefObject<HTMLElement>;\n /** Flagg som sier om modalen er åpen */\n open?: boolean;\n /** Callback som kalles når brukeren ber om å lukke modalen */\n onDismiss?: () => void;\n /** Størrelsen på modalen */\n size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';\n /** Tittelen som vises i modalen */\n title: string;\n /** Om modalen skal lukkes når man klikker på utsiden av den\n * @default true\n */\n closeOnClickOutside?: boolean;\n [key: string]: any;\n};\n\nexport const Modal: React.FC<ModalProps> = ({\n children,\n closeLabel = 'Lukk',\n initialFocusRef,\n open,\n onDismiss,\n size,\n closeOnClickOutside = true,\n ...rest\n}) => {\n const showCloseButton = ['medium', 'large', 'extraLarge'].includes(size);\n\n let handleOnDismiss;\n if (onDismiss && closeOnClickOutside) {\n handleOnDismiss = onDismiss;\n }\n return (\n <ModalOverlay\n open={open}\n onDismiss={handleOnDismiss}\n initialFocusRef={initialFocusRef}\n >\n <ModalContent size={size} {...rest}>\n {showCloseButton && (\n <IconButton\n className=\"eds-modal__close\"\n aria-label={closeLabel}\n onClick={onDismiss}\n >\n <CloseIcon />\n </IconButton>\n )}\n {children}\n </ModalContent>\n </ModalOverlay>\n );\n};\n"],"names":["ModalOverlay","className","open","rest","React","DialogOverlay","classNames","isOpen","headingsMap","extraSmall","Heading4","small","Heading3","medium","Heading2","large","extraLarge","ModalContent","children","size","title","Heading","randomId","useRandomId","DialogContent","margin","as","id","ConditionalWrapper","condition","wrapper","warnAboutMissingStyles","_ref$closeLabel","closeLabel","_ref$contrast","contrast","_ref$open","onDismiss","style","_ref$overlay","overlay","titleId","Contrast","Fragment","onKeyDown","e","key","stopPropagation","MoveFocusInside","IconButton","onClick","type","CloseIcon","VisuallyHidden","handleOnDismiss","initialFocusRef","_ref$closeOnClickOuts","closeOnClickOutside","showCloseButton","includes"],"mappings":"uxBAkBaA,EAA4C,YAAhC,IACvBC,IAAAA,UACAC,IAAAA,KACGC,SAAI,OAEPC,wBAACC,mBACCJ,UAAWK,UAAW,qBAAsBL,GAC5CM,OAAQL,GACJC,+CCRFK,EAAc,CAClBC,WAAYC,WACZC,MAAOC,WACPC,OAAQC,WACRC,MAAOD,WACPE,WAAYF,YAGDG,EAA4C,gBACvDC,IAAAA,SACAjB,IAAAA,UACAkB,IAAAA,KACAC,IAAAA,MACGjB,SAEGkB,EAA6Bb,EAAYW,IAASL,WAClDQ,EAAWC,cAAY,aAC7B,OACEnB,wBAACoB,mBACCvB,UAAWK,UACT,iDAC4Ba,EAC5BlB,qBAEeqB,GACbnB,GAEJC,wBAACiB,GAAQI,OAAO,SAASC,GAAG,KAAKC,GAAIL,GAClCF,GAEFF,kGCyDDU,EAID,YAJmB,IAIIV,IAAAA,SAAQ,SAA5BW,WACMC,IADKA,SACGZ,GAAYA,GC3GlCa,yBAAuB,QAAS,QAAS,aAAc,OAAQ,yBDsClB,gBAC3Cb,IAAAA,SACAjB,IAAAA,UAAS+B,IACTC,WAAAA,aAAa,eAAYC,IACzBC,SAAAA,gBAAgBC,IAChBlC,KAAAA,gBACAmC,IAAAA,UACAjB,IAAAA,MACAkB,IAAAA,MAAKC,IACLC,QAAAA,gBAEMC,EAAUlB,cAAY,cAE5B,OAAKrB,EAcHE,wBAACwB,GACCC,UAAWW,EACXV,QAAS,SAACZ,GAAyB,OACjCd,wBAACJ,GAAaE,KAAMA,EAAMmC,UAAWA,GAClCnB,KAILd,wBAXY+B,EAAWO,WAAWtC,UAAMuC,cAYtCvC,wBAXmBoC,EAAUhB,gBAAgB,yBAY1BiB,EACjBxC,UAAWK,UAAW,aAAcL,GACpC2C,UAtBc,SAACC,GACP,WAAVA,EAAEC,MACJD,EAAEE,kBACFV,MAoBIC,MAAOA,GAEPlC,wBAAC4C,uBACC5C,+BAAKH,UAAU,uBACbG,wBAACQ,YAASc,GAAG,KAAKC,GAAIc,GACnBrB,GAEFF,GAEHd,wBAAC6C,cACChD,UAAU,2BACViD,QAASb,EACTc,KAAK,UAEL/C,wBAACgD,gCACDhD,wBAACiD,sBAAgBpB,QAzCpB,oBE1BgC,gBAYrCqB,EAXJpC,IAAAA,SAAQc,IACRC,WAAAA,aAAa,SACbsB,IAAAA,gBACArD,IAAAA,KACAmC,IAAAA,UACAlB,IAAAA,KAAIqC,IACJC,oBAAAA,gBACGtD,SAEGuD,EAAkB,CAAC,SAAU,QAAS,cAAcC,SAASxC,GAMnE,OAHIkB,GAAaoB,IACfH,EAAkBjB,GAGlBjC,wBAACJ,GACCE,KAAMA,EACNmC,UAAWiB,EACXC,gBAAiBA,GAEjBnD,wBAACa,KAAaE,KAAMA,GAAUhB,GAC3BuD,GACCtD,wBAAC6C,cACChD,UAAU,gCACEgC,EACZiB,QAASb,GAETjC,wBAACgD,mBAGJlC"}
1
+ {"version":3,"file":"modal.cjs.production.min.js","sources":["../src/ModalOverlay.tsx","../src/ModalContent.tsx","../src/Drawer.tsx","../src/index.tsx","../src/Modal.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { DialogOverlay } from '@reach/dialog';\n\nexport type ModalOverlayProps = {\n /** Flagg som sier om modalen er åpen */\n open?: boolean;\n /** Callback som kalles når brukeren ber om å lukke modalen */\n onDismiss?: () => void;\n /** Innholdet i modalen */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen */\n initialFocusRef?: React.RefObject<HTMLElement>;\n [key: string]: any;\n};\n\nexport const ModalOverlay: React.FC<ModalOverlayProps> = ({\n className,\n open,\n ...rest\n}) => (\n <DialogOverlay\n className={classNames('eds-modal__overlay', className)}\n isOpen={open}\n {...rest}\n />\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { DialogContent } from '@reach/dialog';\nimport { Heading4, Heading3, Heading2 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\n\nexport type ModalContentProps = {\n /** Innholdet i modalen */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Størrelsen på modalen */\n size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';\n /** Tittelen som vises i modalen */\n title?: string;\n [key: string]: any;\n};\n\nconst headingsMap = {\n extraSmall: Heading4,\n small: Heading3,\n medium: Heading2,\n large: Heading2,\n extraLarge: Heading2,\n};\n\nexport const ModalContent: React.FC<ModalContentProps> = ({\n children,\n className,\n size,\n title,\n ...rest\n}) => {\n const Heading: React.ElementType = headingsMap[size] || Heading2;\n const randomId = useRandomId('eds-modal');\n return (\n <DialogContent\n className={classNames(\n 'eds-modal__content',\n `eds-modal__content--size-${size}`,\n className,\n )}\n aria-labelledby={randomId}\n {...rest}\n >\n {title && (\n <Heading margin=\"bottom\" as=\"h2\" id={randomId}>\n {title}\n </Heading>\n )}\n {children}\n </DialogContent>\n );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { MoveFocusInside } from 'react-focus-lock';\nimport { VisuallyHidden } from '@entur/a11y';\nimport { Contrast } from '@entur/layout';\nimport { CloseIcon } from '@entur/icons';\nimport { Heading3 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\nimport { IconButton } from '@entur/button';\n\nimport './Drawer.scss';\nimport { ModalOverlay } from './ModalOverlay';\nimport { DialogContent } from '@reach/dialog';\n\nexport type DrawerProps = {\n /** Innholdet. Typisk tekst, lenker eller knapper */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Tekst som beskriver lukkeknappen for skjermlesere\n * @default 'Lukk skuff'\n */\n closeLabel?: string;\n /** Om draweren skal vises i mørk variant\n * @default false\n */\n contrast?: boolean;\n /** Callback som kalles når brukeren ønsker å lukke draweren */\n onDismiss: () => void;\n /** Om draweren er åpen eller ikke\n * @default true\n */\n open?: boolean;\n /** Tittel på toppen av draweren */\n title: string;\n /** Styling som sendes til Drawer */\n style?: React.CSSProperties;\n /** Legger på et overlay over resten av siden */\n overlay?: boolean;\n};\n\nexport const Drawer: React.FC<DrawerProps> = ({\n children,\n className,\n closeLabel = 'Lukk skuff',\n contrast = false,\n open = true,\n onDismiss,\n title,\n style,\n overlay = false,\n}) => {\n const titleId = useRandomId('eds-drawer');\n\n if (!open) {\n return null;\n }\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') {\n e.stopPropagation();\n onDismiss();\n }\n };\n\n const Wrapper = contrast ? Contrast : React.Fragment;\n const ContentContainer = overlay ? DialogContent : 'div';\n return (\n <ConditionalWrapper\n condition={overlay}\n wrapper={(children: React.ReactNode) => (\n <ModalOverlay open={open} onDismiss={onDismiss}>\n {children}\n </ModalOverlay>\n )}\n >\n <Wrapper>\n <ContentContainer\n aria-labelledby={titleId}\n className={classNames('eds-drawer', className)}\n onKeyDown={handleKeyDown}\n style={style}\n >\n <MoveFocusInside>\n <div className=\"eds-drawer__content\">\n <Heading3 as=\"h2\" id={titleId}>\n {title}\n </Heading3>\n {children}\n </div>\n <IconButton\n className=\"eds-drawer__close-button\"\n onClick={onDismiss}\n type=\"button\"\n >\n <CloseIcon aria-hidden />\n <VisuallyHidden>{closeLabel}</VisuallyHidden>\n </IconButton>\n </MoveFocusInside>\n </ContentContainer>\n </Wrapper>\n </ConditionalWrapper>\n );\n};\n\nconst ConditionalWrapper: React.FC<{\n condition: boolean;\n wrapper: (child: JSX.Element) => JSX.Element;\n children: React.ReactElement;\n}> = ({ condition, wrapper, children }) =>\n condition ? wrapper(children) : children;\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('modal', 'icons', 'typography', 'a11y', 'button');\n\nexport * from './Modal';\nexport * from './ModalOverlay';\nexport * from './ModalContent';\nexport * from './Drawer';\n","import React from 'react';\nimport { CloseIcon } from '@entur/icons';\nimport { ModalOverlay } from './ModalOverlay';\nimport { ModalContent } from './ModalContent';\nimport { IconButton } from '@entur/button';\nimport './Modal.scss';\n\nexport type ModalProps = {\n /** Innholdet i modalen */\n children: React.ReactNode;\n /** Skjermleser-label til lukk-knappen */\n closeLabel?: string;\n /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen */\n initialFocusRef?: React.RefObject<HTMLElement>;\n /** Flagg som sier om modalen er åpen */\n open?: boolean;\n /** Callback som kalles når brukeren ber om å lukke modalen */\n onDismiss?: () => void;\n /** Størrelsen på modalen */\n size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';\n /** Tittelen som vises i modalen */\n title: string;\n /** Om modalen skal lukkes når man klikker på utsiden av den\n * @default true\n */\n closeOnClickOutside?: boolean;\n [key: string]: any;\n};\n\nexport const Modal: React.FC<ModalProps> = ({\n children,\n closeLabel = 'Lukk',\n initialFocusRef,\n open,\n onDismiss,\n size,\n closeOnClickOutside = true,\n ...rest\n}) => {\n const showCloseButton = ['medium', 'large', 'extraLarge'].includes(size);\n\n let handleOnDismiss;\n if (onDismiss && closeOnClickOutside) {\n handleOnDismiss = onDismiss;\n }\n return (\n <ModalOverlay\n open={open}\n onDismiss={handleOnDismiss}\n initialFocusRef={initialFocusRef}\n >\n <ModalContent size={size} {...rest}>\n {showCloseButton && (\n <IconButton\n className=\"eds-modal__close\"\n aria-label={closeLabel}\n onClick={onDismiss}\n >\n <CloseIcon />\n </IconButton>\n )}\n {children}\n </ModalContent>\n </ModalOverlay>\n );\n};\n"],"names":["ModalOverlay","className","open","rest","React","DialogOverlay","classNames","isOpen","headingsMap","extraSmall","Heading4","small","Heading3","medium","Heading2","large","extraLarge","ModalContent","children","size","title","Heading","randomId","useRandomId","DialogContent","margin","as","id","ConditionalWrapper","condition","wrapper","warnAboutMissingStyles","closeLabel","contrast","onDismiss","style","overlay","titleId","Contrast","Fragment","onKeyDown","e","key","stopPropagation","MoveFocusInside","IconButton","onClick","type","CloseIcon","VisuallyHidden","handleOnDismiss","initialFocusRef","closeOnClickOutside","showCloseButton","includes"],"mappings":"uxBAkBaA,EAA4C,gBACvDC,IAAAA,UACAC,IAAAA,KACGC,gBAEHC,wBAACC,mBACCJ,UAAWK,UAAW,qBAAsBL,GAC5CM,OAAQL,GACJC,+CCRFK,EAAc,CAClBC,WAAYC,WACZC,MAAOC,WACPC,OAAQC,WACRC,MAAOD,WACPE,WAAYF,YAGDG,EAA4C,gBACvDC,IAAAA,SACAjB,IAAAA,UACAkB,IAAAA,KACAC,IAAAA,MACGjB,SAEGkB,EAA6Bb,EAAYW,IAASL,WAClDQ,EAAWC,cAAY,oBAE3BnB,wBAACoB,mBACCvB,UAAWK,UACT,iDAC4Ba,EAC5BlB,qBAEeqB,GACbnB,GAEHiB,GACChB,wBAACiB,GAAQI,OAAO,SAASC,GAAG,KAAKC,GAAIL,GAClCF,GAGJF,kGCuDDU,EAID,gBAAuBV,IAAAA,kBAApBW,WACMC,IADKA,SACGZ,GAAYA,GC3GlCa,yBAAuB,QAAS,QAAS,aAAc,OAAQ,yBDsClB,gBAC3Cb,IAAAA,SACAjB,IAAAA,cACA+B,WAAAA,aAAa,mBACbC,SAAAA,oBACA/B,KAAAA,gBACAgC,IAAAA,UACAd,IAAAA,MACAe,IAAAA,UACAC,QAAAA,gBAEMC,EAAUd,cAAY,qBAEvBrB,EAcHE,wBAACwB,GACCC,UAAWO,EACXN,QAAS,SAACZ,UACRd,wBAACJ,GAAaE,KAAMA,EAAMgC,UAAWA,GAClChB,KAILd,wBAXY6B,EAAWK,WAAWlC,UAAMmC,cAYtCnC,wBAXmBgC,EAAUZ,gBAAgB,yBAY1Ba,EACjBpC,UAAWK,UAAW,aAAcL,GACpCuC,UAtBc,SAACC,GACP,WAAVA,EAAEC,MACJD,EAAEE,kBACFT,MAoBIC,MAAOA,GAEP/B,wBAACwC,uBACCxC,+BAAKH,UAAU,uBACbG,wBAACQ,YAASc,GAAG,KAAKC,GAAIU,GACnBjB,GAEFF,GAEHd,wBAACyC,cACC5C,UAAU,2BACV6C,QAASZ,EACTa,KAAK,UAEL3C,wBAAC4C,gCACD5C,wBAAC6C,sBAAgBjB,QAzCpB,oBE1BgC,gBAYrCkB,EAXJhC,IAAAA,aACAc,WAAAA,aAAa,SACbmB,IAAAA,gBACAjD,IAAAA,KACAgC,IAAAA,UACAf,IAAAA,SACAiC,oBAAAA,gBACGjD,SAEGkD,EAAkB,CAAC,SAAU,QAAS,cAAcC,SAASnC,UAG/De,GAAakB,IACfF,EAAkBhB,GAGlB9B,wBAACJ,GACCE,KAAMA,EACNgC,UAAWgB,EACXC,gBAAiBA,GAEjB/C,wBAACa,KAAaE,KAAMA,GAAUhB,GAC3BkD,GACCjD,wBAACyC,cACC5C,UAAU,gCACE+B,EACZc,QAASZ,GAET9B,wBAAC4C,mBAGJ9B"}
package/dist/modal.esm.js CHANGED
@@ -13,34 +13,41 @@ function _extends() {
13
13
  _extends = Object.assign || function (target) {
14
14
  for (var i = 1; i < arguments.length; i++) {
15
15
  var source = arguments[i];
16
+
16
17
  for (var key in source) {
17
18
  if (Object.prototype.hasOwnProperty.call(source, key)) {
18
19
  target[key] = source[key];
19
20
  }
20
21
  }
21
22
  }
23
+
22
24
  return target;
23
25
  };
26
+
24
27
  return _extends.apply(this, arguments);
25
28
  }
29
+
26
30
  function _objectWithoutPropertiesLoose(source, excluded) {
27
31
  if (source == null) return {};
28
32
  var target = {};
29
33
  var sourceKeys = Object.keys(source);
30
34
  var key, i;
35
+
31
36
  for (i = 0; i < sourceKeys.length; i++) {
32
37
  key = sourceKeys[i];
33
38
  if (excluded.indexOf(key) >= 0) continue;
34
39
  target[key] = source[key];
35
40
  }
41
+
36
42
  return target;
37
43
  }
38
44
 
39
45
  var _excluded$2 = ["className", "open"];
40
46
  var ModalOverlay = function ModalOverlay(_ref) {
41
47
  var className = _ref.className,
42
- open = _ref.open,
43
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
48
+ open = _ref.open,
49
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
50
+
44
51
  return React.createElement(DialogOverlay, _extends({
45
52
  className: classNames('eds-modal__overlay', className),
46
53
  isOpen: open
@@ -57,16 +64,17 @@ var headingsMap = {
57
64
  };
58
65
  var ModalContent = function ModalContent(_ref) {
59
66
  var children = _ref.children,
60
- className = _ref.className,
61
- size = _ref.size,
62
- title = _ref.title,
63
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
67
+ className = _ref.className,
68
+ size = _ref.size,
69
+ title = _ref.title,
70
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
71
+
64
72
  var Heading = headingsMap[size] || Heading2;
65
73
  var randomId = useRandomId('eds-modal');
66
74
  return React.createElement(DialogContent, _extends({
67
75
  className: classNames('eds-modal__content', "eds-modal__content--size-" + size, className),
68
76
  "aria-labelledby": randomId
69
- }, rest), React.createElement(Heading, {
77
+ }, rest), title && React.createElement(Heading, {
70
78
  margin: "bottom",
71
79
  as: "h2",
72
80
  id: randomId
@@ -76,20 +84,23 @@ var ModalContent = function ModalContent(_ref) {
76
84
  var _excluded = ["children", "closeLabel", "initialFocusRef", "open", "onDismiss", "size", "closeOnClickOutside"];
77
85
  var Modal = function Modal(_ref) {
78
86
  var children = _ref.children,
79
- _ref$closeLabel = _ref.closeLabel,
80
- closeLabel = _ref$closeLabel === void 0 ? 'Lukk' : _ref$closeLabel,
81
- initialFocusRef = _ref.initialFocusRef,
82
- open = _ref.open,
83
- onDismiss = _ref.onDismiss,
84
- size = _ref.size,
85
- _ref$closeOnClickOuts = _ref.closeOnClickOutside,
86
- closeOnClickOutside = _ref$closeOnClickOuts === void 0 ? true : _ref$closeOnClickOuts,
87
- rest = _objectWithoutPropertiesLoose(_ref, _excluded);
87
+ _ref$closeLabel = _ref.closeLabel,
88
+ closeLabel = _ref$closeLabel === void 0 ? 'Lukk' : _ref$closeLabel,
89
+ initialFocusRef = _ref.initialFocusRef,
90
+ open = _ref.open,
91
+ onDismiss = _ref.onDismiss,
92
+ size = _ref.size,
93
+ _ref$closeOnClickOuts = _ref.closeOnClickOutside,
94
+ closeOnClickOutside = _ref$closeOnClickOuts === void 0 ? true : _ref$closeOnClickOuts,
95
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded);
96
+
88
97
  var showCloseButton = ['medium', 'large', 'extraLarge'].includes(size);
89
98
  var handleOnDismiss;
99
+
90
100
  if (onDismiss && closeOnClickOutside) {
91
101
  handleOnDismiss = onDismiss;
92
102
  }
103
+
93
104
  return React.createElement(ModalOverlay, {
94
105
  open: open,
95
106
  onDismiss: handleOnDismiss,
@@ -105,28 +116,31 @@ var Modal = function Modal(_ref) {
105
116
 
106
117
  var Drawer = function Drawer(_ref) {
107
118
  var children = _ref.children,
108
- className = _ref.className,
109
- _ref$closeLabel = _ref.closeLabel,
110
- closeLabel = _ref$closeLabel === void 0 ? 'Lukk skuff' : _ref$closeLabel,
111
- _ref$contrast = _ref.contrast,
112
- contrast = _ref$contrast === void 0 ? false : _ref$contrast,
113
- _ref$open = _ref.open,
114
- open = _ref$open === void 0 ? true : _ref$open,
115
- onDismiss = _ref.onDismiss,
116
- title = _ref.title,
117
- style = _ref.style,
118
- _ref$overlay = _ref.overlay,
119
- overlay = _ref$overlay === void 0 ? false : _ref$overlay;
119
+ className = _ref.className,
120
+ _ref$closeLabel = _ref.closeLabel,
121
+ closeLabel = _ref$closeLabel === void 0 ? 'Lukk skuff' : _ref$closeLabel,
122
+ _ref$contrast = _ref.contrast,
123
+ contrast = _ref$contrast === void 0 ? false : _ref$contrast,
124
+ _ref$open = _ref.open,
125
+ open = _ref$open === void 0 ? true : _ref$open,
126
+ onDismiss = _ref.onDismiss,
127
+ title = _ref.title,
128
+ style = _ref.style,
129
+ _ref$overlay = _ref.overlay,
130
+ overlay = _ref$overlay === void 0 ? false : _ref$overlay;
120
131
  var titleId = useRandomId('eds-drawer');
132
+
121
133
  if (!open) {
122
134
  return null;
123
135
  }
136
+
124
137
  var handleKeyDown = function handleKeyDown(e) {
125
138
  if (e.key === 'Escape') {
126
139
  e.stopPropagation();
127
140
  onDismiss();
128
141
  }
129
142
  };
143
+
130
144
  var Wrapper = contrast ? Contrast : React.Fragment;
131
145
  var ContentContainer = overlay ? DialogContent : 'div';
132
146
  return React.createElement(ConditionalWrapper, {
@@ -155,10 +169,11 @@ var Drawer = function Drawer(_ref) {
155
169
  "aria-hidden": true
156
170
  }), React.createElement(VisuallyHidden, null, closeLabel))))));
157
171
  };
172
+
158
173
  var ConditionalWrapper = function ConditionalWrapper(_ref2) {
159
174
  var condition = _ref2.condition,
160
- wrapper = _ref2.wrapper,
161
- children = _ref2.children;
175
+ wrapper = _ref2.wrapper,
176
+ children = _ref2.children;
162
177
  return condition ? wrapper(children) : children;
163
178
  };
164
179
 
@@ -1 +1 @@
1
- {"version":3,"file":"modal.esm.js","sources":["../src/ModalOverlay.tsx","../src/ModalContent.tsx","../src/Modal.tsx","../src/Drawer.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { DialogOverlay } from '@reach/dialog';\n\nexport type ModalOverlayProps = {\n /** Flagg som sier om modalen er åpen */\n open?: boolean;\n /** Callback som kalles når brukeren ber om å lukke modalen */\n onDismiss?: () => void;\n /** Innholdet i modalen */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen */\n initialFocusRef?: React.RefObject<HTMLElement>;\n [key: string]: any;\n};\n\nexport const ModalOverlay: React.FC<ModalOverlayProps> = ({\n className,\n open,\n ...rest\n}) => (\n <DialogOverlay\n className={classNames('eds-modal__overlay', className)}\n isOpen={open}\n {...rest}\n />\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { DialogContent } from '@reach/dialog';\nimport { Heading4, Heading3, Heading2 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\n\nexport type ModalContentProps = {\n /** Innholdet i modalen */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Størrelsen på modalen */\n size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';\n /** Tittelen som vises i modalen */\n title: string;\n [key: string]: any;\n};\n\nconst headingsMap = {\n extraSmall: Heading4,\n small: Heading3,\n medium: Heading2,\n large: Heading2,\n extraLarge: Heading2,\n};\n\nexport const ModalContent: React.FC<ModalContentProps> = ({\n children,\n className,\n size,\n title,\n ...rest\n}) => {\n const Heading: React.ElementType = headingsMap[size] || Heading2;\n const randomId = useRandomId('eds-modal');\n return (\n <DialogContent\n className={classNames(\n 'eds-modal__content',\n `eds-modal__content--size-${size}`,\n className,\n )}\n aria-labelledby={randomId}\n {...rest}\n >\n <Heading margin=\"bottom\" as=\"h2\" id={randomId}>\n {title}\n </Heading>\n {children}\n </DialogContent>\n );\n};\n","import React from 'react';\nimport { CloseIcon } from '@entur/icons';\nimport { ModalOverlay } from './ModalOverlay';\nimport { ModalContent } from './ModalContent';\nimport { IconButton } from '@entur/button';\nimport './Modal.scss';\n\nexport type ModalProps = {\n /** Innholdet i modalen */\n children: React.ReactNode;\n /** Skjermleser-label til lukk-knappen */\n closeLabel?: string;\n /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen */\n initialFocusRef?: React.RefObject<HTMLElement>;\n /** Flagg som sier om modalen er åpen */\n open?: boolean;\n /** Callback som kalles når brukeren ber om å lukke modalen */\n onDismiss?: () => void;\n /** Størrelsen på modalen */\n size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';\n /** Tittelen som vises i modalen */\n title: string;\n /** Om modalen skal lukkes når man klikker på utsiden av den\n * @default true\n */\n closeOnClickOutside?: boolean;\n [key: string]: any;\n};\n\nexport const Modal: React.FC<ModalProps> = ({\n children,\n closeLabel = 'Lukk',\n initialFocusRef,\n open,\n onDismiss,\n size,\n closeOnClickOutside = true,\n ...rest\n}) => {\n const showCloseButton = ['medium', 'large', 'extraLarge'].includes(size);\n\n let handleOnDismiss;\n if (onDismiss && closeOnClickOutside) {\n handleOnDismiss = onDismiss;\n }\n return (\n <ModalOverlay\n open={open}\n onDismiss={handleOnDismiss}\n initialFocusRef={initialFocusRef}\n >\n <ModalContent size={size} {...rest}>\n {showCloseButton && (\n <IconButton\n className=\"eds-modal__close\"\n aria-label={closeLabel}\n onClick={onDismiss}\n >\n <CloseIcon />\n </IconButton>\n )}\n {children}\n </ModalContent>\n </ModalOverlay>\n );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { MoveFocusInside } from 'react-focus-lock';\nimport { VisuallyHidden } from '@entur/a11y';\nimport { Contrast } from '@entur/layout';\nimport { CloseIcon } from '@entur/icons';\nimport { Heading3 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\nimport { IconButton } from '@entur/button';\n\nimport './Drawer.scss';\nimport { ModalOverlay } from './ModalOverlay';\nimport { DialogContent } from '@reach/dialog';\n\nexport type DrawerProps = {\n /** Innholdet. Typisk tekst, lenker eller knapper */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Tekst som beskriver lukkeknappen for skjermlesere\n * @default 'Lukk skuff'\n */\n closeLabel?: string;\n /** Om draweren skal vises i mørk variant\n * @default false\n */\n contrast?: boolean;\n /** Callback som kalles når brukeren ønsker å lukke draweren */\n onDismiss: () => void;\n /** Om draweren er åpen eller ikke\n * @default true\n */\n open?: boolean;\n /** Tittel på toppen av draweren */\n title: string;\n /** Styling som sendes til Drawer */\n style?: React.CSSProperties;\n /** Legger på et overlay over resten av siden */\n overlay?: boolean;\n};\n\nexport const Drawer: React.FC<DrawerProps> = ({\n children,\n className,\n closeLabel = 'Lukk skuff',\n contrast = false,\n open = true,\n onDismiss,\n title,\n style,\n overlay = false,\n}) => {\n const titleId = useRandomId('eds-drawer');\n\n if (!open) {\n return null;\n }\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') {\n e.stopPropagation();\n onDismiss();\n }\n };\n\n const Wrapper = contrast ? Contrast : React.Fragment;\n const ContentContainer = overlay ? DialogContent : 'div';\n return (\n <ConditionalWrapper\n condition={overlay}\n wrapper={(children: React.ReactNode) => (\n <ModalOverlay open={open} onDismiss={onDismiss}>\n {children}\n </ModalOverlay>\n )}\n >\n <Wrapper>\n <ContentContainer\n aria-labelledby={titleId}\n className={classNames('eds-drawer', className)}\n onKeyDown={handleKeyDown}\n style={style}\n >\n <MoveFocusInside>\n <div className=\"eds-drawer__content\">\n <Heading3 as=\"h2\" id={titleId}>\n {title}\n </Heading3>\n {children}\n </div>\n <IconButton\n className=\"eds-drawer__close-button\"\n onClick={onDismiss}\n type=\"button\"\n >\n <CloseIcon aria-hidden />\n <VisuallyHidden>{closeLabel}</VisuallyHidden>\n </IconButton>\n </MoveFocusInside>\n </ContentContainer>\n </Wrapper>\n </ConditionalWrapper>\n );\n};\n\nconst ConditionalWrapper: React.FC<{\n condition: boolean;\n wrapper: (child: JSX.Element) => JSX.Element;\n children: React.ReactElement;\n}> = ({ condition, wrapper, children }) =>\n condition ? wrapper(children) : children;\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('modal', 'icons', 'typography', 'a11y', 'button');\n\nexport * from './Modal';\nexport * from './ModalOverlay';\nexport * from './ModalContent';\nexport * from './Drawer';\n"],"names":["ModalOverlay","className","open","rest","React","DialogOverlay","classNames","isOpen","headingsMap","extraSmall","Heading4","small","Heading3","medium","Heading2","large","extraLarge","ModalContent","children","size","title","Heading","randomId","useRandomId","DialogContent","margin","as","id","Modal","closeLabel","initialFocusRef","onDismiss","closeOnClickOutside","showCloseButton","includes","handleOnDismiss","IconButton","onClick","CloseIcon","Drawer","contrast","style","overlay","titleId","handleKeyDown","e","key","stopPropagation","Wrapper","Contrast","Fragment","ContentContainer","ConditionalWrapper","condition","wrapper","onKeyDown","MoveFocusInside","type","VisuallyHidden","warnAboutMissingStyles"],"mappings":"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"}
1
+ {"version":3,"file":"modal.esm.js","sources":["../src/ModalOverlay.tsx","../src/ModalContent.tsx","../src/Modal.tsx","../src/Drawer.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { DialogOverlay } from '@reach/dialog';\n\nexport type ModalOverlayProps = {\n /** Flagg som sier om modalen er åpen */\n open?: boolean;\n /** Callback som kalles når brukeren ber om å lukke modalen */\n onDismiss?: () => void;\n /** Innholdet i modalen */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen */\n initialFocusRef?: React.RefObject<HTMLElement>;\n [key: string]: any;\n};\n\nexport const ModalOverlay: React.FC<ModalOverlayProps> = ({\n className,\n open,\n ...rest\n}) => (\n <DialogOverlay\n className={classNames('eds-modal__overlay', className)}\n isOpen={open}\n {...rest}\n />\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { DialogContent } from '@reach/dialog';\nimport { Heading4, Heading3, Heading2 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\n\nexport type ModalContentProps = {\n /** Innholdet i modalen */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Størrelsen på modalen */\n size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';\n /** Tittelen som vises i modalen */\n title?: string;\n [key: string]: any;\n};\n\nconst headingsMap = {\n extraSmall: Heading4,\n small: Heading3,\n medium: Heading2,\n large: Heading2,\n extraLarge: Heading2,\n};\n\nexport const ModalContent: React.FC<ModalContentProps> = ({\n children,\n className,\n size,\n title,\n ...rest\n}) => {\n const Heading: React.ElementType = headingsMap[size] || Heading2;\n const randomId = useRandomId('eds-modal');\n return (\n <DialogContent\n className={classNames(\n 'eds-modal__content',\n `eds-modal__content--size-${size}`,\n className,\n )}\n aria-labelledby={randomId}\n {...rest}\n >\n {title && (\n <Heading margin=\"bottom\" as=\"h2\" id={randomId}>\n {title}\n </Heading>\n )}\n {children}\n </DialogContent>\n );\n};\n","import React from 'react';\nimport { CloseIcon } from '@entur/icons';\nimport { ModalOverlay } from './ModalOverlay';\nimport { ModalContent } from './ModalContent';\nimport { IconButton } from '@entur/button';\nimport './Modal.scss';\n\nexport type ModalProps = {\n /** Innholdet i modalen */\n children: React.ReactNode;\n /** Skjermleser-label til lukk-knappen */\n closeLabel?: string;\n /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen */\n initialFocusRef?: React.RefObject<HTMLElement>;\n /** Flagg som sier om modalen er åpen */\n open?: boolean;\n /** Callback som kalles når brukeren ber om å lukke modalen */\n onDismiss?: () => void;\n /** Størrelsen på modalen */\n size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';\n /** Tittelen som vises i modalen */\n title: string;\n /** Om modalen skal lukkes når man klikker på utsiden av den\n * @default true\n */\n closeOnClickOutside?: boolean;\n [key: string]: any;\n};\n\nexport const Modal: React.FC<ModalProps> = ({\n children,\n closeLabel = 'Lukk',\n initialFocusRef,\n open,\n onDismiss,\n size,\n closeOnClickOutside = true,\n ...rest\n}) => {\n const showCloseButton = ['medium', 'large', 'extraLarge'].includes(size);\n\n let handleOnDismiss;\n if (onDismiss && closeOnClickOutside) {\n handleOnDismiss = onDismiss;\n }\n return (\n <ModalOverlay\n open={open}\n onDismiss={handleOnDismiss}\n initialFocusRef={initialFocusRef}\n >\n <ModalContent size={size} {...rest}>\n {showCloseButton && (\n <IconButton\n className=\"eds-modal__close\"\n aria-label={closeLabel}\n onClick={onDismiss}\n >\n <CloseIcon />\n </IconButton>\n )}\n {children}\n </ModalContent>\n </ModalOverlay>\n );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { MoveFocusInside } from 'react-focus-lock';\nimport { VisuallyHidden } from '@entur/a11y';\nimport { Contrast } from '@entur/layout';\nimport { CloseIcon } from '@entur/icons';\nimport { Heading3 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\nimport { IconButton } from '@entur/button';\n\nimport './Drawer.scss';\nimport { ModalOverlay } from './ModalOverlay';\nimport { DialogContent } from '@reach/dialog';\n\nexport type DrawerProps = {\n /** Innholdet. Typisk tekst, lenker eller knapper */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Tekst som beskriver lukkeknappen for skjermlesere\n * @default 'Lukk skuff'\n */\n closeLabel?: string;\n /** Om draweren skal vises i mørk variant\n * @default false\n */\n contrast?: boolean;\n /** Callback som kalles når brukeren ønsker å lukke draweren */\n onDismiss: () => void;\n /** Om draweren er åpen eller ikke\n * @default true\n */\n open?: boolean;\n /** Tittel på toppen av draweren */\n title: string;\n /** Styling som sendes til Drawer */\n style?: React.CSSProperties;\n /** Legger på et overlay over resten av siden */\n overlay?: boolean;\n};\n\nexport const Drawer: React.FC<DrawerProps> = ({\n children,\n className,\n closeLabel = 'Lukk skuff',\n contrast = false,\n open = true,\n onDismiss,\n title,\n style,\n overlay = false,\n}) => {\n const titleId = useRandomId('eds-drawer');\n\n if (!open) {\n return null;\n }\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') {\n e.stopPropagation();\n onDismiss();\n }\n };\n\n const Wrapper = contrast ? Contrast : React.Fragment;\n const ContentContainer = overlay ? DialogContent : 'div';\n return (\n <ConditionalWrapper\n condition={overlay}\n wrapper={(children: React.ReactNode) => (\n <ModalOverlay open={open} onDismiss={onDismiss}>\n {children}\n </ModalOverlay>\n )}\n >\n <Wrapper>\n <ContentContainer\n aria-labelledby={titleId}\n className={classNames('eds-drawer', className)}\n onKeyDown={handleKeyDown}\n style={style}\n >\n <MoveFocusInside>\n <div className=\"eds-drawer__content\">\n <Heading3 as=\"h2\" id={titleId}>\n {title}\n </Heading3>\n {children}\n </div>\n <IconButton\n className=\"eds-drawer__close-button\"\n onClick={onDismiss}\n type=\"button\"\n >\n <CloseIcon aria-hidden />\n <VisuallyHidden>{closeLabel}</VisuallyHidden>\n </IconButton>\n </MoveFocusInside>\n </ContentContainer>\n </Wrapper>\n </ConditionalWrapper>\n );\n};\n\nconst ConditionalWrapper: React.FC<{\n condition: boolean;\n wrapper: (child: JSX.Element) => JSX.Element;\n children: React.ReactElement;\n}> = ({ condition, wrapper, children }) =>\n condition ? wrapper(children) : children;\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('modal', 'icons', 'typography', 'a11y', 'button');\n\nexport * from './Modal';\nexport * from './ModalOverlay';\nexport * from './ModalContent';\nexport * from './Drawer';\n"],"names":["ModalOverlay","className","open","rest","React","DialogOverlay","classNames","isOpen","headingsMap","extraSmall","Heading4","small","Heading3","medium","Heading2","large","extraLarge","ModalContent","children","size","title","Heading","randomId","useRandomId","DialogContent","margin","as","id","Modal","closeLabel","initialFocusRef","onDismiss","closeOnClickOutside","showCloseButton","includes","handleOnDismiss","IconButton","onClick","CloseIcon","Drawer","contrast","style","overlay","titleId","handleKeyDown","e","key","stopPropagation","Wrapper","Contrast","Fragment","ContentContainer","ConditionalWrapper","condition","wrapper","onKeyDown","MoveFocusInside","type","VisuallyHidden","warnAboutMissingStyles"],"mappings":"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"}
package/dist/styles.css CHANGED
@@ -2,6 +2,16 @@
2
2
  --eds-modal: 1;
3
3
  }/* DO NOT CHANGE!*/
4
4
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
5
+ @-webkit-keyframes slideFromRight {
6
+ from {
7
+ box-shadow: none;
8
+ transform: translateX(100%);
9
+ }
10
+ to {
11
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
12
+ transform: 0;
13
+ }
14
+ }
5
15
  @keyframes slideFromRight {
6
16
  from {
7
17
  box-shadow: none;
@@ -13,7 +23,8 @@
13
23
  }
14
24
  }
15
25
  .eds-drawer {
16
- animation: slideFromRight forwards ease-out 0.1s;
26
+ -webkit-animation: slideFromRight forwards ease-out 0.1s;
27
+ animation: slideFromRight forwards ease-out 0.1s;
17
28
  background: #ebebf1;
18
29
  bottom: 0;
19
30
  padding: 1.5rem;
@@ -59,9 +70,12 @@
59
70
  right: 0;
60
71
  top: 0;
61
72
  z-index: 30;
62
- animation: fadeInOverlay;
63
- animation-duration: 0.2s;
64
- animation-timing-function: ease-in-out;
73
+ -webkit-animation: fadeInOverlay;
74
+ animation: fadeInOverlay;
75
+ -webkit-animation-duration: 0.2s;
76
+ animation-duration: 0.2s;
77
+ -webkit-animation-timing-function: ease-in-out;
78
+ animation-timing-function: ease-in-out;
65
79
  }
66
80
 
67
81
  .eds-modal__content {
@@ -76,9 +90,12 @@
76
90
  max-height: 90vh;
77
91
  overflow: auto;
78
92
  z-index: 40;
79
- animation: slideInContent;
80
- animation-duration: 0.2s;
81
- animation-timing-function: ease-in-out;
93
+ -webkit-animation: slideInContent;
94
+ animation: slideInContent;
95
+ -webkit-animation-duration: 0.2s;
96
+ animation-duration: 0.2s;
97
+ -webkit-animation-timing-function: ease-in-out;
98
+ animation-timing-function: ease-in-out;
82
99
  }
83
100
  .eds-modal__content--size-extraSmall {
84
101
  max-width: 21rem;
@@ -138,6 +155,15 @@
138
155
  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
139
156
  }
140
157
 
158
+ @-webkit-keyframes fadeInOverlay {
159
+ from {
160
+ opacity: 0;
161
+ }
162
+ to {
163
+ opacity: 1;
164
+ }
165
+ }
166
+
141
167
  @keyframes fadeInOverlay {
142
168
  from {
143
169
  opacity: 0;
@@ -146,6 +172,16 @@
146
172
  opacity: 1;
147
173
  }
148
174
  }
175
+ @-webkit-keyframes slideInContent {
176
+ from {
177
+ top: 5rem;
178
+ opacity: 0;
179
+ }
180
+ to {
181
+ top: 0%;
182
+ opacity: 1;
183
+ }
184
+ }
149
185
  @keyframes slideInContent {
150
186
  from {
151
187
  top: 5rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/modal",
3
- "version": "1.6.16",
3
+ "version": "1.6.17",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/modal.esm.js",
@@ -17,33 +17,26 @@
17
17
  "access": "public"
18
18
  },
19
19
  "scripts": {
20
- "start": "yarn run dts watch --noClean",
21
- "build": "yarn run dts build",
22
- "test": "yarn run dts test --env=jsdom",
23
- "lint": "yarn run dts lint"
20
+ "start": "dts watch --noClean",
21
+ "build": "dts build",
22
+ "test": "dts test --env=jsdom",
23
+ "lint": "dts lint"
24
24
  },
25
25
  "peerDependencies": {
26
26
  "react": ">=16.8.0",
27
27
  "react-dom": ">=16.8.0"
28
28
  },
29
29
  "dependencies": {
30
- "@entur/a11y": "^0.2.51",
31
- "@entur/button": "^2.10.6",
32
- "@entur/icons": "^5.3.0",
33
- "@entur/layout": "^2.1.13",
34
- "@entur/tokens": "^3.4.2",
35
- "@entur/typography": "^1.7.2",
36
- "@entur/utils": "^0.4.7",
30
+ "@entur/a11y": "^0.2.52",
31
+ "@entur/button": "^2.10.7",
32
+ "@entur/icons": "^5.4.0",
33
+ "@entur/layout": "^2.1.14",
34
+ "@entur/tokens": "^3.4.3",
35
+ "@entur/typography": "^1.7.3",
36
+ "@entur/utils": "^0.4.8",
37
37
  "@reach/dialog": "^0.16.0",
38
38
  "classnames": "^2.3.1",
39
39
  "react-focus-lock": "^2.5.2"
40
40
  },
41
- "devDependencies": {
42
- "dts-cli": "^1.1.6",
43
- "jest": "^27.0.0",
44
- "jest-watch-typeahead": "^2.2.0",
45
- "ts-jest": "^27.0.0",
46
- "typescript": "^4.8.0"
47
- },
48
- "gitHead": "8915b1630bd936740ba9a4a88883f3432948a80e"
41
+ "gitHead": "103844c30bdc32296f3998a360cf6066492173e9"
49
42
  }