@entur/modal 1.6.16 → 1.6.18

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.
Files changed (9) hide show
  1. package/CHANGELOG.md +470 -0
  2. package/dist/ModalContent.d.ts +1 -1
  3. package/dist/modal.cjs.development.js +45 -30
  4. package/dist/modal.cjs.development.js.map +1 -1
  5. package/dist/modal.cjs.production.min.js +1 -1
  6. package/dist/modal.cjs.production.min.js.map +1 -1
  7. package/dist/modal.esm.js +45 -30
  8. package/dist/modal.esm.js.map +1 -1
  9. package/package.json +13 -20
package/CHANGELOG.md ADDED
@@ -0,0 +1,470 @@
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.18](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.6.17...@entur/modal@1.6.18) (2023-01-19)
7
+
8
+ **Note:** Version bump only for package @entur/modal
9
+
10
+ ## [1.6.17](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.6.14...@entur/modal@1.6.17) (2022-12-09)
11
+
12
+ ### Bug Fixes
13
+
14
+ - **modal:** make title prop optional ([0892b90](https://bitbucket.org/enturas/design-system/commits/0892b90ff702c3479b72c9435f972a3fd6022c03))
15
+
16
+ ## [1.6.16](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.6.15...@entur/modal@1.6.16) (2022-11-24)
17
+
18
+ **Note:** Version bump only for package @entur/modal
19
+
20
+ ## [1.6.15](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.6.14...@entur/modal@1.6.15) (2022-10-31)
21
+
22
+ **Note:** Version bump only for package @entur/modal
23
+
24
+ ## [1.6.14](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.6.13...@entur/modal@1.6.14) (2022-10-31)
25
+
26
+ **Note:** Version bump only for package @entur/modal
27
+
28
+ ## [1.6.13](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.6.12...@entur/modal@1.6.13) (2022-10-31)
29
+
30
+ **Note:** Version bump only for package @entur/modal
31
+
32
+ ## [1.6.12](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.6.11...@entur/modal@1.6.12) (2022-10-20)
33
+
34
+ **Note:** Version bump only for package @entur/modal
35
+
36
+ ## [1.6.11](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.6.10...@entur/modal@1.6.11) (2022-10-20)
37
+
38
+ **Note:** Version bump only for package @entur/modal
39
+
40
+ ## [1.6.10](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.6.9...@entur/modal@1.6.10) (2022-10-12)
41
+
42
+ **Note:** Version bump only for package @entur/modal
43
+
44
+ ## [1.6.8](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.6.7...@entur/modal@1.6.8) (2022-08-31)
45
+
46
+ **Note:** Version bump only for package @entur/modal
47
+
48
+ ## [1.6.7](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.6.6...@entur/modal@1.6.7) (2022-08-24)
49
+
50
+ **Note:** Version bump only for package @entur/modal
51
+
52
+ ## [1.6.6](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.6.5...@entur/modal@1.6.6) (2022-08-09)
53
+
54
+ **Note:** Version bump only for package @entur/modal
55
+
56
+ ## [1.6.5](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.6.4...@entur/modal@1.6.5) (2022-07-05)
57
+
58
+ **Note:** Version bump only for package @entur/modal
59
+
60
+ ## [1.6.4](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.6.3...@entur/modal@1.6.4) (2022-06-28)
61
+
62
+ **Note:** Version bump only for package @entur/modal
63
+
64
+ ## [1.6.3](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.6.2...@entur/modal@1.6.3) (2022-06-24)
65
+
66
+ **Note:** Version bump only for package @entur/modal
67
+
68
+ ## [1.6.2](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.6.1...@entur/modal@1.6.2) (2022-06-02)
69
+
70
+ **Note:** Version bump only for package @entur/modal
71
+
72
+ ## [1.6.1](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.6.0...@entur/modal@1.6.1) (2022-05-13)
73
+
74
+ **Note:** Version bump only for package @entur/modal
75
+
76
+ # [1.6.0](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.5.13...@entur/modal@1.6.0) (2022-05-04)
77
+
78
+ ### Features
79
+
80
+ - **modal:** add custom scrollbar to modal to preserve rounded corners ([22f967f](https://bitbucket.org/enturas/design-system/commits/22f967faed103dda79491dd0ffa7fbad1039dd56))
81
+
82
+ ## [1.5.13](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.5.12...@entur/modal@1.5.13) (2022-04-27)
83
+
84
+ **Note:** Version bump only for package @entur/modal
85
+
86
+ ## [1.5.12](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.5.11...@entur/modal@1.5.12) (2022-04-20)
87
+
88
+ **Note:** Version bump only for package @entur/modal
89
+
90
+ ## [1.5.11](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.5.10...@entur/modal@1.5.11) (2022-04-19)
91
+
92
+ **Note:** Version bump only for package @entur/modal
93
+
94
+ ## [1.5.10](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.5.9...@entur/modal@1.5.10) (2022-03-01)
95
+
96
+ **Note:** Version bump only for package @entur/modal
97
+
98
+ ## [1.5.9](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.5.8...@entur/modal@1.5.9) (2022-02-09)
99
+
100
+ **Note:** Version bump only for package @entur/modal
101
+
102
+ ## [1.5.8](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.5.7...@entur/modal@1.5.8) (2021-11-17)
103
+
104
+ **Note:** Version bump only for package @entur/modal
105
+
106
+ ## [1.5.7](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.5.6...@entur/modal@1.5.7) (2021-09-23)
107
+
108
+ **Note:** Version bump only for package @entur/modal
109
+
110
+ ## [1.5.6](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.5.5...@entur/modal@1.5.6) (2021-09-13)
111
+
112
+ ### Bug Fixes
113
+
114
+ - **modal:** increase border radius on modals ([8d321aa](https://bitbucket.org/enturas/design-system/commits/8d321aa3e0e83a410a285763182db22c7b1c96be))
115
+
116
+ ## [1.5.5](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.5.4...@entur/modal@1.5.5) (2021-09-07)
117
+
118
+ ### Bug Fixes
119
+
120
+ - update dependencies ([c76a03c](https://bitbucket.org/enturas/design-system/commits/c76a03ca6e15951c40b032f618617380dc8f15d1))
121
+ - utilize reworked focus token ([586758f](https://bitbucket.org/enturas/design-system/commits/586758fc86eb5aa52116c63c14ef033eb2e8b12f))
122
+
123
+ ## [1.5.4](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.5.3...@entur/modal@1.5.4) (2021-08-13)
124
+
125
+ **Note:** Version bump only for package @entur/modal
126
+
127
+ ## [1.5.3](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.5.2...@entur/modal@1.5.3) (2021-07-16)
128
+
129
+ **Note:** Version bump only for package @entur/modal
130
+
131
+ ## [1.5.2](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.5.1...@entur/modal@1.5.2) (2021-06-25)
132
+
133
+ ### Bug Fixes
134
+
135
+ - update dependencies ([85395ed](https://bitbucket.org/enturas/design-system/commits/85395ed69004335bb173770dfaa634ad542de771))
136
+
137
+ ## [1.5.1](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.5.0...@entur/modal@1.5.1) (2021-06-04)
138
+
139
+ **Note:** Version bump only for package @entur/modal
140
+
141
+ # [1.5.0](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.4.0...@entur/modal@1.5.0) (2021-05-19)
142
+
143
+ ### Features
144
+
145
+ - **modal:** add animation on modal entry ([f0f0701](https://bitbucket.org/enturas/design-system/commits/f0f07019a9324b8a697165e5d902fee9cfb21815))
146
+
147
+ # [1.4.0](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.3.16...@entur/modal@1.4.0) (2021-05-05)
148
+
149
+ ### Features
150
+
151
+ - **modal:** add closeonclickoutside prop ([7fba612](https://bitbucket.org/enturas/design-system/commits/7fba612263e8c66f732c84447cf3bbf99766073c))
152
+
153
+ ## [1.3.16](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.3.15...@entur/modal@1.3.16) (2021-04-23)
154
+
155
+ ### Bug Fixes
156
+
157
+ - utilize new focus tokens ([17113ef](https://bitbucket.org/enturas/design-system/commits/17113ef3f791c86fa6e19e71680fd5acdbae4990))
158
+
159
+ ## [1.3.15](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.3.14...@entur/modal@1.3.15) (2021-04-09)
160
+
161
+ **Note:** Version bump only for package @entur/modal
162
+
163
+ ## [1.3.14](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.3.13...@entur/modal@1.3.14) (2021-03-02)
164
+
165
+ **Note:** Version bump only for package @entur/modal
166
+
167
+ ## [1.3.13](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.3.12...@entur/modal@1.3.13) (2021-02-17)
168
+
169
+ ### Bug Fixes
170
+
171
+ - **modal:** add border radius for modal windows ([8ed7468](https://bitbucket.org/enturas/design-system/commits/8ed7468ce9c2544f11ea7113415366236f12041e))
172
+
173
+ ## [1.3.12](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.3.11...@entur/modal@1.3.12) (2021-01-29)
174
+
175
+ **Note:** Version bump only for package @entur/modal
176
+
177
+ ## [1.3.11](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.3.10...@entur/modal@1.3.11) (2021-01-20)
178
+
179
+ **Note:** Version bump only for package @entur/modal
180
+
181
+ ## [1.3.10](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.3.9...@entur/modal@1.3.10) (2021-01-13)
182
+
183
+ ### Bug Fixes
184
+
185
+ - update dependency ([40fd77e](https://bitbucket.org/enturas/design-system/commits/40fd77ebca7fa8a3d0e82409561e3e3cd63c441d))
186
+
187
+ ## [1.3.9](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.3.8...@entur/modal@1.3.9) (2021-01-05)
188
+
189
+ **Note:** Version bump only for package @entur/modal
190
+
191
+ ## [1.3.8](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.3.7...@entur/modal@1.3.8) (2020-12-04)
192
+
193
+ ### Bug Fixes
194
+
195
+ - **modal:** fix typings of heading ([720abb7](https://bitbucket.org/enturas/design-system/commits/720abb75c6aec3655fa81abf01abe4d4d40e6b61))
196
+
197
+ ## [1.3.7](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.3.6...@entur/modal@1.3.7) (2020-11-10)
198
+
199
+ **Note:** Version bump only for package @entur/modal
200
+
201
+ ## [1.3.6](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.3.5...@entur/modal@1.3.6) (2020-11-05)
202
+
203
+ **Note:** Version bump only for package @entur/modal
204
+
205
+ ## [1.3.5](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.3.4...@entur/modal@1.3.5) (2020-10-28)
206
+
207
+ **Note:** Version bump only for package @entur/modal
208
+
209
+ ## [1.3.4](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.3.3...@entur/modal@1.3.4) (2020-10-23)
210
+
211
+ **Note:** Version bump only for package @entur/modal
212
+
213
+ ## [1.3.3](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.3.2...@entur/modal@1.3.3) (2020-10-16)
214
+
215
+ **Note:** Version bump only for package @entur/modal
216
+
217
+ ## [1.3.2](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.3.1...@entur/modal@1.3.2) (2020-10-09)
218
+
219
+ **Note:** Version bump only for package @entur/modal
220
+
221
+ ## [1.3.1](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.3.0...@entur/modal@1.3.1) (2020-09-25)
222
+
223
+ **Note:** Version bump only for package @entur/modal
224
+
225
+ # [1.3.0](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.2.0...@entur/modal@1.3.0) (2020-09-14)
226
+
227
+ ### Bug Fixes
228
+
229
+ - **drawer:** improve automatic focus within in drawer ([f4efa2f](https://bitbucket.org/enturas/design-system/commits/f4efa2f2ad3d09cf7806d26e0d0526041ac463f7))
230
+
231
+ ### Features
232
+
233
+ - **drawer:** add overlay prop, for optional overlay ([8577478](https://bitbucket.org/enturas/design-system/commits/85774782d653138073af2ad73c0924347d80e1aa))
234
+
235
+ # [1.2.0](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.29...@entur/modal@1.2.0) (2020-09-10)
236
+
237
+ ### Bug Fixes
238
+
239
+ - **drawer:** add overflow-y:auto for drawer ([687cea7](https://bitbucket.org/enturas/design-system/commits/687cea7ac5f3451951930a5a882ffbb3ad3a8615))
240
+
241
+ ### Features
242
+
243
+ - **drawer:** add style prop support ([77fbf0d](https://bitbucket.org/enturas/design-system/commits/77fbf0d74450930ca9359b51ca1c09dbe1070fc0))
244
+
245
+ ## [1.1.29](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.28...@entur/modal@1.1.29) (2020-09-02)
246
+
247
+ ### Bug Fixes
248
+
249
+ - **modal:** adjust modal backdrop color ([ba08fdc](https://bitbucket.org/enturas/design-system/commits/ba08fdca717b88a588023e0467d14a8220ef9d5b))
250
+
251
+ ## [1.1.28](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.27...@entur/modal@1.1.28) (2020-08-26)
252
+
253
+ **Note:** Version bump only for package @entur/modal
254
+
255
+ ## [1.1.27](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.26...@entur/modal@1.1.27) (2020-08-19)
256
+
257
+ **Note:** Version bump only for package @entur/modal
258
+
259
+ ## [1.1.26](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.25...@entur/modal@1.1.26) (2020-08-11)
260
+
261
+ **Note:** Version bump only for package @entur/modal
262
+
263
+ ## [1.1.25](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.24...@entur/modal@1.1.25) (2020-07-24)
264
+
265
+ **Note:** Version bump only for package @entur/modal
266
+
267
+ ## [1.1.24](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.23...@entur/modal@1.1.24) (2020-07-22)
268
+
269
+ **Note:** Version bump only for package @entur/modal
270
+
271
+ ## [1.1.23](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.22...@entur/modal@1.1.23) (2020-07-16)
272
+
273
+ ### Bug Fixes
274
+
275
+ - update modal dependency ([bab3f74](https://bitbucket.org/enturas/design-system/commits/bab3f74d5b379a801eaa057bad2880006e1d32eb))
276
+
277
+ ## [1.1.22](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.21...@entur/modal@1.1.22) (2020-07-13)
278
+
279
+ **Note:** Version bump only for package @entur/modal
280
+
281
+ ## [1.1.21](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.20...@entur/modal@1.1.21) (2020-07-09)
282
+
283
+ **Note:** Version bump only for package @entur/modal
284
+
285
+ ## [1.1.20](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.19...@entur/modal@1.1.20) (2020-07-03)
286
+
287
+ **Note:** Version bump only for package @entur/modal
288
+
289
+ ## [1.1.19](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.18...@entur/modal@1.1.19) (2020-06-17)
290
+
291
+ ### Bug Fixes
292
+
293
+ - use iconbutton in modal window ([0ec8929](https://bitbucket.org/enturas/design-system/commits/0ec8929a339d76fcbb6c1af6d6b39796b0554d11))
294
+
295
+ ## [1.1.18](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.17...@entur/modal@1.1.18) (2020-05-27)
296
+
297
+ **Note:** Version bump only for package @entur/modal
298
+
299
+ ## [1.1.17](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.16...@entur/modal@1.1.17) (2020-05-26)
300
+
301
+ ### Bug Fixes
302
+
303
+ - fix extraSmall prop for modal ([1aeba26](https://bitbucket.org/enturas/design-system/commits/1aeba2662d6fcd179b6f959676b6370e6cd4ef63))
304
+ - fix size=extraLarge not rendering properly for modal ([1ce2056](https://bitbucket.org/enturas/design-system/commits/1ce2056438dcb9c80f3357ddf1289a7523e5b51c))
305
+ - use iconbutton directly in drawer ([adcab79](https://bitbucket.org/enturas/design-system/commits/adcab79fd967741467ed5956a4463fbf199c2ed8))
306
+
307
+ ## [1.1.16](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.15...@entur/modal@1.1.16) (2020-05-20)
308
+
309
+ **Note:** Version bump only for package @entur/modal
310
+
311
+ ## [1.1.15](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.14...@entur/modal@1.1.15) (2020-04-27)
312
+
313
+ **Note:** Version bump only for package @entur/modal
314
+
315
+ ## [1.1.14](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.13...@entur/modal@1.1.14) (2020-04-23)
316
+
317
+ ### Bug Fixes
318
+
319
+ - updated to use new focus styling where applicable ([d0a52c0](https://bitbucket.org/enturas/design-system/commits/d0a52c096b673c6647070a90dd79bef9003ee0ad))
320
+
321
+ ## [1.1.13](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.12...@entur/modal@1.1.13) (2020-04-08)
322
+
323
+ **Note:** Version bump only for package @entur/modal
324
+
325
+ ## [1.1.12](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.10...@entur/modal@1.1.12) (2020-03-25)
326
+
327
+ **Note:** Version bump only for package @entur/modal
328
+
329
+ ## [1.1.11](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.10...@entur/modal@1.1.11) (2020-03-25)
330
+
331
+ **Note:** Version bump only for package @entur/modal
332
+
333
+ ## [1.1.10](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.9...@entur/modal@1.1.10) (2020-03-20)
334
+
335
+ **Note:** Version bump only for package @entur/modal
336
+
337
+ ## [1.1.9](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.8...@entur/modal@1.1.9) (2020-03-18)
338
+
339
+ **Note:** Version bump only for package @entur/modal
340
+
341
+ ## [1.1.8](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.7...@entur/modal@1.1.8) (2020-03-05)
342
+
343
+ **Note:** Version bump only for package @entur/modal
344
+
345
+ ## [1.1.7](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.6...@entur/modal@1.1.7) (2020-02-26)
346
+
347
+ **Note:** Version bump only for package @entur/modal
348
+
349
+ ## [1.1.6](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.5...@entur/modal@1.1.6) (2020-02-20)
350
+
351
+ **Note:** Version bump only for package @entur/modal
352
+
353
+ ## [1.1.5](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.4...@entur/modal@1.1.5) (2020-02-14)
354
+
355
+ **Note:** Version bump only for package @entur/modal
356
+
357
+ ## [1.1.4](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.3...@entur/modal@1.1.4) (2020-02-12)
358
+
359
+ ### Bug Fixes
360
+
361
+ - fix missing type for spreading of props ([0e5beba](https://bitbucket.org/enturas/design-system/commits/0e5beba82ea7dde39915cd626e665aa6c15dafbf))
362
+
363
+ ## [1.1.3](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.2...@entur/modal@1.1.3) (2020-02-10)
364
+
365
+ **Note:** Version bump only for package @entur/modal
366
+
367
+ ## [1.1.2](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.1...@entur/modal@1.1.2) (2020-02-05)
368
+
369
+ **Note:** Version bump only for package @entur/modal
370
+
371
+ ## [1.1.1](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.1.0...@entur/modal@1.1.1) (2020-02-05)
372
+
373
+ ### Bug Fixes
374
+
375
+ - remove test-files from build process ([e0b24af](https://bitbucket.org/enturas/design-system/commits/e0b24af05d5c2ad8de4ae587d83c389495235890))
376
+
377
+ # [1.1.0](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.0.7...@entur/modal@1.1.0) (2020-01-28)
378
+
379
+ ### Features
380
+
381
+ - **Drawer:** add new component - Drawer ([e869df0](https://bitbucket.org/enturas/design-system/commits/e869df0946bdc81c177df4b25f3cfe5dee0a7eb5))
382
+
383
+ ## [1.0.7](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.0.6...@entur/modal@1.0.7) (2020-01-27)
384
+
385
+ ### Bug Fixes
386
+
387
+ - **types:** place types in the correct place ([acace09](https://bitbucket.org/enturas/design-system/commits/acace09ec0e258c5cff3a65e13ab29d6603780d9))
388
+
389
+ ## [1.0.6](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.0.5...@entur/modal@1.0.6) (2020-01-20)
390
+
391
+ **Note:** Version bump only for package @entur/modal
392
+
393
+ ## [1.0.5](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.0.4...@entur/modal@1.0.5) (2020-01-14)
394
+
395
+ **Note:** Version bump only for package @entur/modal
396
+
397
+ ## [1.0.4](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.0.3...@entur/modal@1.0.4) (2020-01-13)
398
+
399
+ ### Bug Fixes
400
+
401
+ - fix focus styling for close button in modal window ([8d4b02f](https://bitbucket.org/enturas/design-system/commits/8d4b02f77500200c9a5281c9bb07a629fc3134b1))
402
+
403
+ ## [1.0.3](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.0.2...@entur/modal@1.0.3) (2020-01-10)
404
+
405
+ ### Bug Fixes
406
+
407
+ - **modal:** added a max height to the modal as well as overflow handling. ([32e78d9](https://bitbucket.org/enturas/design-system/commits/32e78d91b51599591c3cafc35f4adeffce966617))
408
+
409
+ ## [1.0.2](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.0.1...@entur/modal@1.0.2) (2020-01-08)
410
+
411
+ ### Bug Fixes
412
+
413
+ - warn in development if the developer have forgotten the CSS ([e5c30fc](https://bitbucket.org/enturas/design-system/commits/e5c30fc08624ef22c02773892778abd92205c6b0))
414
+
415
+ ## [1.0.1](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.0.0...@entur/modal@1.0.1) (2020-01-06)
416
+
417
+ **Note:** Version bump only for package @entur/modal
418
+
419
+ # [1.0.0](https://bitbucket.org/enturas/design-system/compare/@entur/modal@0.3.1...@entur/modal@1.0.0) (2019-11-29)
420
+
421
+ ### Bug Fixes
422
+
423
+ - **Modal, ModalOverlay:** rename isOpen to open ([c910829](https://bitbucket.org/enturas/design-system/commits/c910829527f3352e73c30ee4a2ae2c79c0d35070))
424
+ - **ModalContent:** add aria-labelledby to use the title as label ([400117c](https://bitbucket.org/enturas/design-system/commits/400117c93b03c693d088d579afa68c4702871330))
425
+
426
+ ### Features
427
+
428
+ - **Heading1-6:** add margin prop to all headings ([a167485](https://bitbucket.org/enturas/design-system/commits/a1674852143e8a99bff7c2dbebf20ff09aeea977))
429
+ - **Modal, ModalContent:** add support for title and sizes ([5190a2f](https://bitbucket.org/enturas/design-system/commits/5190a2f29ba410870f8d21621066e3647ccf5e3a))
430
+
431
+ ### BREAKING CHANGES
432
+
433
+ - **Modal, ModalOverlay:** Rename isOpen to open for the Modal and ModalOverlay components
434
+ - **Modal, ModalContent:** The title prop is now required. Remove any top level heading, and use the title prop instead. The
435
+ size prop is now required, too.
436
+
437
+ ## [0.3.1](https://bitbucket.org/enturas/design-system/compare/@entur/modal@0.3.0...@entur/modal@0.3.1) (2019-11-27)
438
+
439
+ ### Bug Fixes
440
+
441
+ - **types:** simplify the types to avoid extraneous props ([571ac56](https://bitbucket.org/enturas/design-system/commits/571ac568abb5a6b2c353d5711418d1058b51a91b))
442
+
443
+ # [0.3.0](https://bitbucket.org/enturas/design-system/compare/@entur/modal@0.2.1...@entur/modal@0.3.0) (2019-11-22)
444
+
445
+ ### Bug Fixes
446
+
447
+ - fixing potential duplication of props naming ([6efd896](https://bitbucket.org/enturas/design-system/commits/6efd896d381bca09bc047dbdaec6d2629a9571db))
448
+
449
+ ### Features
450
+
451
+ - **types:** exporting all public types for public components ([4a277ab](https://bitbucket.org/enturas/design-system/commits/4a277ab266fdb32a6760821a07b1c6cc716bac85))
452
+
453
+ ## [0.2.1](https://bitbucket.org/enturas/design-system/compare/@entur/modal@0.2.0...@entur/modal@0.2.1) (2019-11-14)
454
+
455
+ ### Bug Fixes
456
+
457
+ - **css classnames:** fixing naming collisions with CSS classes ([a93ca43](https://bitbucket.org/enturas/design-system/commits/a93ca435d3a01d61d8f02694a672686b9e943a66))
458
+
459
+ # 0.2.0 (2019-10-30)
460
+
461
+ ### Bug Fixes
462
+
463
+ - **modal:** add missing dependencies ([c1065c0](https://bitbucket.org/enturas/design-system/commits/c1065c00e746a99148e2ec0578f50e79c135ac8a))
464
+ - update all packages to use new tokens ([4847835](https://bitbucket.org/enturas/design-system/commits/48478359b0e562ba828e06d9b5c57239316805c2))
465
+ - **modal:** center modals on screen ([3525d8c](https://bitbucket.org/enturas/design-system/commits/3525d8c572431878582edc7e8bbbbfb2b1276ed3))
466
+ - **style:** set a minimum width for all modals ([a4f208f](https://bitbucket.org/enturas/design-system/commits/a4f208f7a98a8cb671dc8532b360e73d3ce864d1))
467
+
468
+ ### Features
469
+
470
+ - **modal:** add new package @entur/modal ([642e78c](https://bitbucket.org/enturas/design-system/commits/642e78cac1f4db4e63ac3c202405c9876b68ff4a))
package/dist/ModalContent.d.ts CHANGED
@@ -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>;
package/dist/modal.cjs.development.js CHANGED
@@ -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
 
package/dist/modal.cjs.development.js.map CHANGED
@@ -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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"}
package/dist/modal.cjs.production.min.js CHANGED
@@ -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
package/dist/modal.cjs.production.min.js.map CHANGED
@@ -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
 
package/dist/modal.esm.js.map CHANGED
@@ -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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAkBaA,YAAY,GAAgC,SAA5CA,YAAY;EAAA,IACvBC,SAAS,QAATA,SAAS;IACTC,IAAI,QAAJA,IAAI;IACDC,IAAI;EAAA,OAEPC,oBAACC,aAAa;IACZJ,SAAS,EAAEK,UAAU,CAAC,oBAAoB,EAAEL,SAAS,CAAC;IACtDM,MAAM,EAAEL;KACJC,IAAI,EACR;AAAA;;;ACTJ,IAAMK,WAAW,GAAG;EAClBC,UAAU,EAAEC,QAAQ;EACpBC,KAAK,EAAEC,QAAQ;EACfC,MAAM,EAAEC,QAAQ;EAChBC,KAAK,EAAED,QAAQ;EACfE,UAAU,EAAEF;CACb;IAEYG,YAAY,GAAgC,SAA5CA,YAAY;MACvBC,QAAQ,QAARA,QAAQ;IACRjB,SAAS,QAATA,SAAS;IACTkB,IAAI,QAAJA,IAAI;IACJC,KAAK,QAALA,KAAK;IACFjB,IAAI;EAEP,IAAMkB,OAAO,GAAsBb,WAAW,CAACW,IAAI,CAAC,IAAIL,QAAQ;EAChE,IAAMQ,QAAQ,GAAGC,WAAW,CAAC,WAAW,CAAC;EACzC,OACEnB,oBAACoB,aAAa;IACZvB,SAAS,EAAEK,UAAU,CACnB,oBAAoB,gCACQa,IAAI,EAChClB,SAAS,CACV;uBACgBqB;KACbnB,IAAI,GAERC,oBAACiB,OAAO;IAACI,MAAM,EAAC,QAAQ;IAACC,EAAE,EAAC,IAAI;IAACC,EAAE,EAAEL;KAClCF,KAAK,CACE,EACTF,QAAQ,CACK;AAEpB;;;ICtBaU,KAAK,GAAyB,SAA9BA,KAAK;MAChBV,QAAQ,QAARA,QAAQ;IAAA,uBACRW,UAAU;IAAVA,UAAU,gCAAG,MAAM;IACnBC,eAAe,QAAfA,eAAe;IACf5B,IAAI,QAAJA,IAAI;IACJ6B,SAAS,QAATA,SAAS;IACTZ,IAAI,QAAJA,IAAI;IAAA,6BACJa,mBAAmB;IAAnBA,mBAAmB,sCAAG,IAAI;IACvB7B,IAAI;EAEP,IAAM8B,eAAe,GAAG,CAAC,QAAQ,EAAE,OAAO,EAAE,YAAY,CAAC,CAACC,QAAQ,CAACf,IAAI,CAAC;EAExE,IAAIgB,eAAe;EACnB,IAAIJ,SAAS,IAAIC,mBAAmB,EAAE;IACpCG,eAAe,GAAGJ,SAAS;;EAE7B,OACE3B,oBAACJ,YAAY;IACXE,IAAI,EAAEA,IAAI;IACV6B,SAAS,EAAEI,eAAe;IAC1BL,eAAe,EAAEA;KAEjB1B,oBAACa,YAAY;IAACE,IAAI,EAAEA;KAAUhB,IAAI,GAC/B8B,eAAe,IACd7B,oBAACgC,UAAU;IACTnC,SAAS,EAAC,kBAAkB;kBAChB4B,UAAU;IACtBQ,OAAO,EAAEN;KAET3B,oBAACkC,SAAS,OAAG,CAEhB,EACApB,QAAQ,CACI,CACF;AAEnB;;ICxBaqB,MAAM,GAA0B,SAAhCA,MAAM;MACjBrB,QAAQ,QAARA,QAAQ;IACRjB,SAAS,QAATA,SAAS;IAAA,uBACT4B,UAAU;IAAVA,UAAU,gCAAG,YAAY;IAAA,qBACzBW,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,iBAChBtC,IAAI;IAAJA,IAAI,0BAAG,IAAI;IACX6B,SAAS,QAATA,SAAS;IACTX,KAAK,QAALA,KAAK;IACLqB,KAAK,QAALA,KAAK;IAAA,oBACLC,OAAO;IAAPA,OAAO,6BAAG,KAAK;EAEf,IAAMC,OAAO,GAAGpB,WAAW,CAAC,YAAY,CAAC;EAEzC,IAAI,CAACrB,IAAI,EAAE;IACT,OAAO,IAAI;;EAGb,IAAM0C,aAAa,GAAG,SAAhBA,aAAa,CAAIC,CAAsB;IAC3C,IAAIA,CAAC,CAACC,GAAG,KAAK,QAAQ,EAAE;MACtBD,CAAC,CAACE,eAAe,EAAE;MACnBhB,SAAS,EAAE;;GAEd;EAED,IAAMiB,OAAO,GAAGR,QAAQ,GAAGS,QAAQ,GAAG7C,KAAK,CAAC8C,QAAQ;EACpD,IAAMC,gBAAgB,GAAGT,OAAO,GAAGlB,aAAa,GAAG,KAAK;EACxD,OACEpB,oBAACgD,kBAAkB;IACjBC,SAAS,EAAEX,OAAO;IAClBY,OAAO,EAAE,iBAACpC,QAAyB;MAAA,OACjCd,oBAACJ,YAAY;QAACE,IAAI,EAAEA,IAAI;QAAE6B,SAAS,EAAEA;SAClCb,QAAQ,CACI;;KAGjBd,oBAAC4C,OAAO,QACN5C,oBAAC+C,gBAAgB;uBACER,OAAO;IACxB1C,SAAS,EAAEK,UAAU,CAAC,YAAY,EAAEL,SAAS,CAAC;IAC9CsD,SAAS,EAAEX,aAAa;IACxBH,KAAK,EAAEA;KAEPrC,oBAACoD,eAAe,QACdpD;IAAKH,SAAS,EAAC;KACbG,oBAACQ,QAAQ;IAACc,EAAE,EAAC,IAAI;IAACC,EAAE,EAAEgB;KACnBvB,KAAK,CACG,EACVF,QAAQ,CACL,EACNd,oBAACgC,UAAU;IACTnC,SAAS,EAAC,0BAA0B;IACpCoC,OAAO,EAAEN,SAAS;IAClB0B,IAAI,EAAC;KAELrD,oBAACkC,SAAS;;IAAe,EACzBlC,oBAACsD,cAAc,QAAE7B,UAAU,CAAkB,CAClC,CACG,CACD,CACX,CACS;AAEzB;AAEA,IAAMuB,kBAAkB,GAInB,SAJCA,kBAAkB;EAAA,IAIhBC,SAAS,SAATA,SAAS;IAAEC,OAAO,SAAPA,OAAO;IAAEpC,QAAQ,SAARA,QAAQ;EAAA,OAClCmC,SAAS,GAAGC,OAAO,CAACpC,QAAQ,CAAC,GAAGA,QAAQ;AAAA;;AC3G1CyC,sBAAsB,CAAC,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,QAAQ,CAAC;;;;"}
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/modal",
3
- "version": "1.6.16",
3
+ "version": "1.6.18",
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",
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.53",
31
+ "@entur/button": "^2.10.8",
32
+ "@entur/icons": "^5.4.1",
33
+ "@entur/layout": "^2.1.15",
34
+ "@entur/tokens": "^3.4.4",
35
+ "@entur/typography": "^1.7.4",
36
+ "@entur/utils": "^0.4.9",
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": "de71e205560a699e2dce301e133966dc9348c459"
49
42
  }