@geotab/zenith 3.8.0-beta.1 → 3.9.0-beta.ssr.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +12 -12
- package/dist/button/button.d.ts +2 -1
- package/dist/button/button.js +3 -3
- package/dist/calendar/calendar.js +201 -4
- package/dist/card/components/cardButton/cardButton.d.ts +2 -1
- package/dist/card/components/cardButton/cardButton.js +5 -3
- package/dist/card/components/title.js +7 -3
- package/dist/chart/barChart/getBarLegendItems.js +3 -5
- package/dist/chart/lineChart/getLineLegendItems.js +7 -7
- package/dist/chart/pieChart/getPieLegendItems.js +8 -12
- package/dist/chart/plugins/legend/interfaces.d.ts +1 -1
- package/dist/dateInputInner/dateInputInnerControlBlock.js +12 -8
- package/dist/dialog/dialog.js +4 -3
- package/dist/fileUpload/fileUpload.js +21 -12
- package/dist/filtersBar/filtersBarSidePanel/components/filtersBarSidePanelRange/filtersBarSidePanelRange.js +3 -0
- package/dist/formFieldError/formFieldError.d.ts +2 -1
- package/dist/formFieldError/formFieldError.js +2 -2
- package/dist/index.css +5 -0
- package/dist/index.d.ts +0 -2
- package/dist/index.js +16 -20
- package/dist/nav/navEditList/navEditListUtils.d.ts +1 -1
- package/dist/nav/navEditList/navEditListUtils.js +2 -1
- package/dist/nav/navItem/navActionItem.js +3 -3
- package/dist/pageHeader/pageHeaderActions.js +4 -3
- package/dist/rangeRaw/rangeRaw.js +7 -1
- package/dist/selectList/selectList.js +11 -7
- package/dist/summaryTile/summaryTile.d.ts +1 -3
- package/dist/summaryTile/summaryTile.js +1 -2
- package/dist/toggleButtonRaw/toggleButtonRaw.js +3 -1
- package/dist/toggleButtonRaw/types.d.ts +1 -0
- package/dist/tooltip/tooltip.js +11 -11
- package/dist/utils/localization/translations/en-json.d.ts +2 -0
- package/dist/utils/localization/translations/en-json.js +3 -1
- package/esm/button/button.d.ts +2 -1
- package/esm/button/button.js +3 -3
- package/esm/calendar/calendar.js +201 -4
- package/esm/card/components/cardButton/cardButton.d.ts +2 -1
- package/esm/card/components/cardButton/cardButton.js +5 -3
- package/esm/card/components/title.js +8 -4
- package/esm/chart/barChart/getBarLegendItems.js +3 -5
- package/esm/chart/lineChart/getLineLegendItems.js +7 -7
- package/esm/chart/pieChart/getPieLegendItems.js +8 -12
- package/esm/chart/plugins/legend/interfaces.d.ts +1 -1
- package/esm/dateInputInner/dateInputInnerControlBlock.js +13 -9
- package/esm/dialog/dialog.js +4 -3
- package/esm/fileUpload/fileUpload.js +21 -12
- package/esm/filtersBar/filtersBarSidePanel/components/filtersBarSidePanelRange/filtersBarSidePanelRange.js +3 -0
- package/esm/formFieldError/formFieldError.d.ts +2 -1
- package/esm/formFieldError/formFieldError.js +2 -2
- package/esm/index.d.ts +0 -2
- package/esm/index.js +0 -2
- package/esm/nav/navEditList/navEditListUtils.d.ts +1 -1
- package/esm/nav/navEditList/navEditListUtils.js +2 -1
- package/esm/nav/navItem/navActionItem.js +3 -2
- package/esm/pageHeader/pageHeaderActions.js +4 -3
- package/esm/rangeRaw/rangeRaw.js +7 -1
- package/esm/selectList/selectList.js +11 -7
- package/esm/summaryTile/summaryTile.d.ts +1 -3
- package/esm/summaryTile/summaryTile.js +1 -2
- package/esm/toggleButtonRaw/toggleButtonRaw.js +3 -1
- package/esm/toggleButtonRaw/types.d.ts +1 -0
- package/esm/tooltip/tooltip.js +11 -11
- package/esm/utils/localization/translations/en-json.d.ts +2 -0
- package/esm/utils/localization/translations/en-json.js +3 -1
- package/package.json +5 -5
package/esm/calendar/calendar.js
CHANGED
|
@@ -203,6 +203,195 @@ injectString("zh-Hans", "ShortSaturday", "\u516D");
|
|
|
203
203
|
injectString("zh-TW", "ShortSaturday", "\u9031\u516D");
|
|
204
204
|
injectString("ro-RO", "ShortSaturday", "ShortSaturday");
|
|
205
205
|
injectString("ar-SA", "ShortSaturday", "\u0633");
|
|
206
|
+
injectString("cs", "Sunday", "Ned\u011Ble");
|
|
207
|
+
injectString("da-DK", "Sunday", "s\xF8ndag");
|
|
208
|
+
injectString("de", "Sunday", "Sonntag");
|
|
209
|
+
injectString("en", "Sunday", "Sunday");
|
|
210
|
+
injectString("es", "Sunday", "Domingo");
|
|
211
|
+
injectString("fi-FI", "Sunday", "Sunnuntai");
|
|
212
|
+
injectString("fr", "Sunday", "Dimanche");
|
|
213
|
+
injectString("fr-FR", "Sunday", "Dimanche");
|
|
214
|
+
injectString("hu-HU", "Sunday", "vas\xE1rnap");
|
|
215
|
+
injectString("id", "Sunday", "Minggu");
|
|
216
|
+
injectString("it", "Sunday", "Domenica");
|
|
217
|
+
injectString("ja", "Sunday", "\u65E5\u66DC\u65E5");
|
|
218
|
+
injectString("ko-KR", "Sunday", "\uC77C\uC694\uC77C");
|
|
219
|
+
injectString("ms", "Sunday", "Ahad");
|
|
220
|
+
injectString("nb-NO", "Sunday", "S\xF8ndag");
|
|
221
|
+
injectString("nl", "Sunday", "zondag");
|
|
222
|
+
injectString("pl", "Sunday", "Niedziela");
|
|
223
|
+
injectString("pt-BR", "Sunday", "Domingo");
|
|
224
|
+
injectString("pt-PT", "Sunday", "Domingo");
|
|
225
|
+
injectString("sk-SK", "Sunday", "Nede\u013Ea");
|
|
226
|
+
injectString("sv", "Sunday", "S\xF6ndag");
|
|
227
|
+
injectString("th", "Sunday", "\u0E27\u0E31\u0E19\u0E2D\u0E32\u0E17\u0E34\u0E15\u0E22\u0E4C");
|
|
228
|
+
injectString("tr", "Sunday", "Pazar");
|
|
229
|
+
injectString("zh-Hans", "Sunday", "\u661F\u671F\u5929");
|
|
230
|
+
injectString("zh-TW", "Sunday", "\u661F\u671F\u65E5");
|
|
231
|
+
injectString("ro-RO", "Sunday", "Duminic\u0103");
|
|
232
|
+
injectString("ar-SA", "Sunday", "\u0627\u0644\u0623\u062D\u062F");
|
|
233
|
+
injectString("cs", "Monday", "Pond\u011Bl\xED");
|
|
234
|
+
injectString("da-DK", "Monday", "mandag");
|
|
235
|
+
injectString("de", "Monday", "Montag");
|
|
236
|
+
injectString("en", "Monday", "Monday");
|
|
237
|
+
injectString("es", "Monday", "Lunes");
|
|
238
|
+
injectString("fi-FI", "Monday", "Maanantai");
|
|
239
|
+
injectString("fr", "Monday", "Lundi");
|
|
240
|
+
injectString("fr-FR", "Monday", "Lundi");
|
|
241
|
+
injectString("hu-HU", "Monday", "h\xE9tf\u0151");
|
|
242
|
+
injectString("id", "Monday", "Senin");
|
|
243
|
+
injectString("it", "Monday", "Luned\xEC");
|
|
244
|
+
injectString("ja", "Monday", "\u6708\u66DC\u65E5");
|
|
245
|
+
injectString("ko-KR", "Monday", "\uC6D4\uC694\uC77C");
|
|
246
|
+
injectString("ms", "Monday", "Isnin");
|
|
247
|
+
injectString("nb-NO", "Monday", "Mandag");
|
|
248
|
+
injectString("nl", "Monday", "maandag");
|
|
249
|
+
injectString("pl", "Monday", "Poniedzia\u0142ek");
|
|
250
|
+
injectString("pt-BR", "Monday", "Segunda-feira");
|
|
251
|
+
injectString("pt-PT", "Monday", "Segunda-feira");
|
|
252
|
+
injectString("sk-SK", "Monday", "pondelok");
|
|
253
|
+
injectString("sv", "Monday", "M\xE5ndag");
|
|
254
|
+
injectString("th", "Monday", "\u0E27\u0E31\u0E19\u0E08\u0E31\u0E19\u0E17\u0E23\u0E4C");
|
|
255
|
+
injectString("tr", "Monday", "Pazartesi");
|
|
256
|
+
injectString("zh-Hans", "Monday", "\u661F\u671F\u4E00");
|
|
257
|
+
injectString("zh-TW", "Monday", "\u661F\u671F\u4E00");
|
|
258
|
+
injectString("ro-RO", "Monday", "Luni");
|
|
259
|
+
injectString("ar-SA", "Monday", "\u0627\u0644\u0627\u062B\u0646\u064A\u0646");
|
|
260
|
+
injectString("cs", "Tuesday", "\xDAter\xFD");
|
|
261
|
+
injectString("da-DK", "Tuesday", "tirsdag");
|
|
262
|
+
injectString("de", "Tuesday", "Dienstag");
|
|
263
|
+
injectString("en", "Tuesday", "Tuesday");
|
|
264
|
+
injectString("es", "Tuesday", "Martes");
|
|
265
|
+
injectString("fi-FI", "Tuesday", "Tiistai");
|
|
266
|
+
injectString("fr", "Tuesday", "Mardi");
|
|
267
|
+
injectString("fr-FR", "Tuesday", "Mardi");
|
|
268
|
+
injectString("hu-HU", "Tuesday", "kedd");
|
|
269
|
+
injectString("id", "Tuesday", "Selasa");
|
|
270
|
+
injectString("it", "Tuesday", "Marted\xEC");
|
|
271
|
+
injectString("ja", "Tuesday", "\u706B\u66DC\u65E5");
|
|
272
|
+
injectString("ko-KR", "Tuesday", "\uD654\uC694\uC77C");
|
|
273
|
+
injectString("ms", "Tuesday", "Selasa");
|
|
274
|
+
injectString("nb-NO", "Tuesday", "Tirsdag");
|
|
275
|
+
injectString("nl", "Tuesday", "dinsdag");
|
|
276
|
+
injectString("pl", "Tuesday", "Wtorek");
|
|
277
|
+
injectString("pt-BR", "Tuesday", "Ter\xE7a-feira");
|
|
278
|
+
injectString("pt-PT", "Tuesday", "Ter\xE7a-feira");
|
|
279
|
+
injectString("sk-SK", "Tuesday", "Utorok");
|
|
280
|
+
injectString("sv", "Tuesday", "Tisdag");
|
|
281
|
+
injectString("th", "Tuesday", "\u0E27\u0E31\u0E19\u0E2D\u0E31\u0E07\u0E04\u0E32\u0E23");
|
|
282
|
+
injectString("tr", "Tuesday", "Sal\u0131");
|
|
283
|
+
injectString("zh-Hans", "Tuesday", "\u661F\u671F\u4E8C");
|
|
284
|
+
injectString("zh-TW", "Tuesday", "\u661F\u671F\u4E8C");
|
|
285
|
+
injectString("ro-RO", "Tuesday", "Mar\u021Bi");
|
|
286
|
+
injectString("ar-SA", "Tuesday", "\u0627\u0644\u062B\u0644\u0627\u062B\u0627\u0621");
|
|
287
|
+
injectString("cs", "Wednesday", "St\u0159eda");
|
|
288
|
+
injectString("da-DK", "Wednesday", "onsdag");
|
|
289
|
+
injectString("de", "Wednesday", "Mittwoch");
|
|
290
|
+
injectString("en", "Wednesday", "Wednesday");
|
|
291
|
+
injectString("es", "Wednesday", "Mi\xE9rcoles");
|
|
292
|
+
injectString("fi-FI", "Wednesday", "Keskiviikko");
|
|
293
|
+
injectString("fr", "Wednesday", "Mercredi");
|
|
294
|
+
injectString("fr-FR", "Wednesday", "Mercredi");
|
|
295
|
+
injectString("hu-HU", "Wednesday", "szerda");
|
|
296
|
+
injectString("id", "Wednesday", "Rabu");
|
|
297
|
+
injectString("it", "Wednesday", "Mercoled\xEC");
|
|
298
|
+
injectString("ja", "Wednesday", "\u6C34\u66DC\u65E5");
|
|
299
|
+
injectString("ko-KR", "Wednesday", "\uC218\uC694\uC77C");
|
|
300
|
+
injectString("ms", "Wednesday", "Rabu");
|
|
301
|
+
injectString("nb-NO", "Wednesday", "Onsdag");
|
|
302
|
+
injectString("nl", "Wednesday", "woensdag");
|
|
303
|
+
injectString("pl", "Wednesday", "\u015Aroda");
|
|
304
|
+
injectString("pt-BR", "Wednesday", "Quarta-feira");
|
|
305
|
+
injectString("pt-PT", "Wednesday", "Quarta-feira");
|
|
306
|
+
injectString("sk-SK", "Wednesday", "Streda");
|
|
307
|
+
injectString("sv", "Wednesday", "Onsdag");
|
|
308
|
+
injectString("th", "Wednesday", "\u0E27\u0E31\u0E19\u0E1E\u0E38\u0E18");
|
|
309
|
+
injectString("tr", "Wednesday", "\xC7ar\u015Famba");
|
|
310
|
+
injectString("zh-Hans", "Wednesday", "\u661F\u671F\u4E09");
|
|
311
|
+
injectString("zh-TW", "Wednesday", "\u661F\u671F\u4E09");
|
|
312
|
+
injectString("ro-RO", "Wednesday", "Miercuri");
|
|
313
|
+
injectString("ar-SA", "Wednesday", "\u0627\u0644\u0623\u0631\u0628\u0639\u0627\u0621");
|
|
314
|
+
injectString("cs", "Thursday", "\u010Ctvrtek");
|
|
315
|
+
injectString("da-DK", "Thursday", "torsdag");
|
|
316
|
+
injectString("de", "Thursday", "Donnerstag");
|
|
317
|
+
injectString("en", "Thursday", "Thursday");
|
|
318
|
+
injectString("es", "Thursday", "Jueves");
|
|
319
|
+
injectString("fi-FI", "Thursday", "Torstai");
|
|
320
|
+
injectString("fr", "Thursday", "Jeudi");
|
|
321
|
+
injectString("fr-FR", "Thursday", "Jeudi");
|
|
322
|
+
injectString("hu-HU", "Thursday", "cs\xFCt\xF6rt\xF6k");
|
|
323
|
+
injectString("id", "Thursday", "Kamis");
|
|
324
|
+
injectString("it", "Thursday", "Gioved\xEC");
|
|
325
|
+
injectString("ja", "Thursday", "\u6728\u66DC\u65E5");
|
|
326
|
+
injectString("ko-KR", "Thursday", "\uBAA9\uC694\uC77C");
|
|
327
|
+
injectString("ms", "Thursday", "Khamis");
|
|
328
|
+
injectString("nb-NO", "Thursday", "Torsdag");
|
|
329
|
+
injectString("nl", "Thursday", "donderdag");
|
|
330
|
+
injectString("pl", "Thursday", "Czwartek");
|
|
331
|
+
injectString("pt-BR", "Thursday", "Quinta-feira");
|
|
332
|
+
injectString("pt-PT", "Thursday", "Quinta-feira");
|
|
333
|
+
injectString("sk-SK", "Thursday", "\u0161tvrtok");
|
|
334
|
+
injectString("sv", "Thursday", "Torsdag");
|
|
335
|
+
injectString("th", "Thursday", "\u0E27\u0E31\u0E19\u0E1E\u0E24\u0E2B\u0E31\u0E2A\u0E1A\u0E14\u0E35");
|
|
336
|
+
injectString("tr", "Thursday", "Per\u015Fembe");
|
|
337
|
+
injectString("zh-Hans", "Thursday", "\u661F\u671F\u56DB");
|
|
338
|
+
injectString("zh-TW", "Thursday", "\u661F\u671F\u56DB");
|
|
339
|
+
injectString("ro-RO", "Thursday", "Joi");
|
|
340
|
+
injectString("ar-SA", "Thursday", "\u0627\u0644\u062E\u0645\u064A\u0633");
|
|
341
|
+
injectString("cs", "Friday", "P\xE1tek");
|
|
342
|
+
injectString("da-DK", "Friday", "fredag");
|
|
343
|
+
injectString("de", "Friday", "Freitag");
|
|
344
|
+
injectString("en", "Friday", "Friday");
|
|
345
|
+
injectString("es", "Friday", "Viernes");
|
|
346
|
+
injectString("fi-FI", "Friday", "Perjantai");
|
|
347
|
+
injectString("fr", "Friday", "Vendredi");
|
|
348
|
+
injectString("fr-FR", "Friday", "Vendredi");
|
|
349
|
+
injectString("hu-HU", "Friday", "p\xE9ntek");
|
|
350
|
+
injectString("id", "Friday", "Jumat");
|
|
351
|
+
injectString("it", "Friday", "Venerd\xEC");
|
|
352
|
+
injectString("ja", "Friday", "\u91D1\u66DC\u65E5");
|
|
353
|
+
injectString("ko-KR", "Friday", "\uAE08\uC694\uC77C");
|
|
354
|
+
injectString("ms", "Friday", "Jumaat");
|
|
355
|
+
injectString("nb-NO", "Friday", "Fredag");
|
|
356
|
+
injectString("nl", "Friday", "vrijdag");
|
|
357
|
+
injectString("pl", "Friday", "Pi\u0105tek");
|
|
358
|
+
injectString("pt-BR", "Friday", "Sexta-feira");
|
|
359
|
+
injectString("pt-PT", "Friday", "Sexta-feira");
|
|
360
|
+
injectString("sk-SK", "Friday", "Piatok");
|
|
361
|
+
injectString("sv", "Friday", "Fredag");
|
|
362
|
+
injectString("th", "Friday", "\u0E27\u0E31\u0E19\u0E28\u0E38\u0E01\u0E23\u0E4C");
|
|
363
|
+
injectString("tr", "Friday", "Cuma");
|
|
364
|
+
injectString("zh-Hans", "Friday", "\u661F\u671F\u4E94");
|
|
365
|
+
injectString("zh-TW", "Friday", "\u661F\u671F\u4E94");
|
|
366
|
+
injectString("ro-RO", "Friday", "Vineri");
|
|
367
|
+
injectString("ar-SA", "Friday", "\u0627\u0644\u062C\u0645\u0639\u0629");
|
|
368
|
+
injectString("cs", "Saturday", "Sobota");
|
|
369
|
+
injectString("da-DK", "Saturday", "l\xF8rdag");
|
|
370
|
+
injectString("de", "Saturday", "Samstag");
|
|
371
|
+
injectString("en", "Saturday", "Saturday");
|
|
372
|
+
injectString("es", "Saturday", "S\xE1bado");
|
|
373
|
+
injectString("fi-FI", "Saturday", "Lauantai");
|
|
374
|
+
injectString("fr", "Saturday", "Samedi");
|
|
375
|
+
injectString("fr-FR", "Saturday", "Samedi");
|
|
376
|
+
injectString("hu-HU", "Saturday", "szombat");
|
|
377
|
+
injectString("id", "Saturday", "Sabtu");
|
|
378
|
+
injectString("it", "Saturday", "Sabato");
|
|
379
|
+
injectString("ja", "Saturday", "\u571F\u66DC\u65E5");
|
|
380
|
+
injectString("ko-KR", "Saturday", "\uD1A0\uC694\uC77C");
|
|
381
|
+
injectString("ms", "Saturday", "Sabtu");
|
|
382
|
+
injectString("nb-NO", "Saturday", "L\xF8rdag");
|
|
383
|
+
injectString("nl", "Saturday", "zaterdag");
|
|
384
|
+
injectString("pl", "Saturday", "Sobota");
|
|
385
|
+
injectString("pt-BR", "Saturday", "S\xE1bado");
|
|
386
|
+
injectString("pt-PT", "Saturday", "S\xE1bado");
|
|
387
|
+
injectString("sk-SK", "Saturday", "Sobota");
|
|
388
|
+
injectString("sv", "Saturday", "L\xF6rdag");
|
|
389
|
+
injectString("th", "Saturday", "\u0E27\u0E31\u0E19\u0E40\u0E2A\u0E32\u0E23\u0E4C");
|
|
390
|
+
injectString("tr", "Saturday", "Cumartesi");
|
|
391
|
+
injectString("zh-Hans", "Saturday", "\u661F\u671F\u516D");
|
|
392
|
+
injectString("zh-TW", "Saturday", "\u661F\u671F\u516D");
|
|
393
|
+
injectString("ro-RO", "Saturday", "S\xE2mb\u0103t\u0103");
|
|
394
|
+
injectString("ar-SA", "Saturday", "\u0627\u0644\u0633\u0628\u062A");
|
|
206
395
|
injectString("cs", "Jan", "Led");
|
|
207
396
|
injectString("da-DK", "Jan", "Jan");
|
|
208
397
|
injectString("de", "Jan", "Jan");
|
|
@@ -637,7 +826,7 @@ injectString("ro-RO", "Next month", "Luna urm\u0103toare");
|
|
|
637
826
|
injectString("ar-SA", "Next month", "\u0627\u0644\u0634\u0647\u0631 \u0627\u0644\u062A\u0627\u0644\u064A");
|
|
638
827
|
const DEFAULT_START_DAY_OF_WEEK = 0;
|
|
639
828
|
const DEFAULT_YEAR_RANGE = 20;
|
|
640
|
-
export const monthLabelsArray = ["Jan", "Feb", "Mar", "Apr", "
|
|
829
|
+
export const monthLabelsArray = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
|
641
830
|
export const Calendar = ({
|
|
642
831
|
id,
|
|
643
832
|
value,
|
|
@@ -694,6 +883,7 @@ export const Calendar = ({
|
|
|
694
883
|
5: translate("ShortFriday"),
|
|
695
884
|
6: translate("ShortSaturday")
|
|
696
885
|
}), [translate]);
|
|
886
|
+
const fullDayLabels = useMemo(() => [translate("Sunday"), translate("Monday"), translate("Tuesday"), translate("Wednesday"), translate("Thursday"), translate("Friday"), translate("Saturday")], [translate]);
|
|
697
887
|
const getDayOfWeek = useCallback(date => {
|
|
698
888
|
const dayOfWeek = new Date(date).getDay();
|
|
699
889
|
return dayLabels[dayOfWeek];
|
|
@@ -967,9 +1157,16 @@ export const Calendar = ({
|
|
|
967
1157
|
children: [_jsx("thead", {
|
|
968
1158
|
children: _jsx("tr", {
|
|
969
1159
|
className: "zen-calendar__columns",
|
|
970
|
-
children: dates[0].map(date =>
|
|
1160
|
+
children: dates[0].map(date => _jsxs("th", {
|
|
1161
|
+
scope: "col",
|
|
971
1162
|
className: "zen-calendar__column",
|
|
972
|
-
children:
|
|
1163
|
+
children: [_jsx("span", {
|
|
1164
|
+
"aria-hidden": "true",
|
|
1165
|
+
children: getDayOfWeek(date)
|
|
1166
|
+
}), _jsx("span", {
|
|
1167
|
+
className: "zen-visually-hidden",
|
|
1168
|
+
children: fullDayLabels[new Date(date).getDay()]
|
|
1169
|
+
})]
|
|
973
1170
|
}, `cal-h-${date}`))
|
|
974
1171
|
})
|
|
975
1172
|
}), _jsx("tbody", {
|
|
@@ -1023,4 +1220,4 @@ export const Calendar = ({
|
|
|
1023
1220
|
})]
|
|
1024
1221
|
});
|
|
1025
1222
|
};
|
|
1026
|
-
export const TRANSLATIONS = ["Select year", "Previous month", "Next month", "Change start date, {date}", "Change end date, {date}", "Choose end date", "Choose start date", "Change date, {date}", "Choose date", "{short-day-of-week-sunday}S", "{short-day-of-week-monday}M", "{short-day-of-week-tuesday}T", "{short-day-of-week-wednesday}W", "{short-day-of-week-thursday}T", "{short-day-of-week-friday}F", "{short-day-of-week-saturday}S", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
|
|
1223
|
+
export const TRANSLATIONS = ["Select year", "Previous month", "Next month", "Change start date, {date}", "Change end date, {date}", "Choose end date", "Choose start date", "Change date, {date}", "Choose date", "{short-day-of-week-sunday}S", "{short-day-of-week-monday}M", "{short-day-of-week-tuesday}T", "{short-day-of-week-wednesday}W", "{short-day-of-week-thursday}T", "{short-day-of-week-friday}F", "{short-day-of-week-saturday}S", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
|
|
@@ -10,5 +10,6 @@ export interface ICardButton extends IZenIdComponentProps {
|
|
|
10
10
|
onClick?: React.MouseEventHandler<HTMLButtonElement>;
|
|
11
11
|
link?: string;
|
|
12
12
|
target?: HTMLAttributeAnchorTarget;
|
|
13
|
+
dataAnalyticsId?: string;
|
|
13
14
|
}
|
|
14
|
-
export declare const CardButton: ({ children, disabled, icon, name, onClick, link, className, target: linkTarget }: ICardButton) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export declare const CardButton: ({ children, disabled, icon, name, onClick, link, className, target: linkTarget, dataAnalyticsId }: ICardButton) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -8,12 +8,14 @@ import { IconChevronTopSmall } from "../../../icons/iconChevronTopSmall";
|
|
|
8
8
|
import { Menu } from "../../../menu/menu";
|
|
9
9
|
import { useDriveClassName } from "../../../utils/theme/useDriveClassName";
|
|
10
10
|
import { useDrive } from "../../../utils/theme/useDrive";
|
|
11
|
-
|
|
11
|
+
import { toKebabCase } from "../../../utils/toKebabCase";
|
|
12
|
+
export const CardButton = ({ children, disabled = false, icon, name, onClick, link, className, target: linkTarget, dataAnalyticsId }) => {
|
|
12
13
|
const [isOpen, setIsOpen] = useState(false);
|
|
13
14
|
const triggerRef = useRef(null);
|
|
14
15
|
const content = [];
|
|
15
16
|
const cardButtonDriveClasses = useDriveClassName("zen-card-button");
|
|
16
17
|
const isDrive = useDrive();
|
|
18
|
+
const analyticsId = dataAnalyticsId || toKebabCase(name);
|
|
17
19
|
Children.forEach(children, (el) => {
|
|
18
20
|
if (el.type === Menu.Item) {
|
|
19
21
|
content.push(el);
|
|
@@ -27,9 +29,9 @@ export const CardButton = ({ children, disabled = false, icon, name, onClick, li
|
|
|
27
29
|
}
|
|
28
30
|
onClick === null || onClick === void 0 ? void 0 : onClick(...args);
|
|
29
31
|
};
|
|
30
|
-
const renderLink = () => (_jsxs(Button, { disabled: disabled, type: "tertiary", link: link, target: linkTarget, title: name, className: classNames([className || "", "zen-card-button", "zen-caption", cardButtonDriveClasses || ""]), children: [icon && createElement(icon, { size: isDrive ? "huge" : "large", className: "zen-caption__pre-content" }), _jsx("span", { className: "zen-caption__content", children: name })] }));
|
|
32
|
+
const renderLink = () => (_jsxs(Button, { disabled: disabled, type: "tertiary", link: link, target: linkTarget, title: name, dataAnalyticsId: analyticsId, className: classNames([className || "", "zen-card-button", "zen-caption", cardButtonDriveClasses || ""]), children: [icon && createElement(icon, { size: isDrive ? "huge" : "large", className: "zen-caption__pre-content" }), _jsx("span", { className: "zen-caption__content", children: name })] }));
|
|
31
33
|
const renderButton = () => {
|
|
32
|
-
const trigger = (_jsxs(Button, { htmlType: "button", ref: triggerRef, disabled: disabled, type: "tertiary", onClick: onButtonClickHandler, title: name, className: classNames([className || "", "zen-card-button", "zen-caption", cardButtonDriveClasses || ""]), children: [icon && createElement(icon, { size: isDrive ? "huge" : "large", className: "zen-caption__pre-content" }), _jsx("span", { className: "zen-caption__content", children: name }), !!content.length &&
|
|
34
|
+
const trigger = (_jsxs(Button, { htmlType: "button", ref: triggerRef, disabled: disabled, type: "tertiary", onClick: onButtonClickHandler, title: name, dataAnalyticsId: analyticsId, className: classNames([className || "", "zen-card-button", "zen-caption", cardButtonDriveClasses || ""]), children: [icon && createElement(icon, { size: isDrive ? "huge" : "large", className: "zen-caption__pre-content" }), _jsx("span", { className: "zen-caption__content", children: name }), !!content.length &&
|
|
33
35
|
(isOpen ? (_jsx(IconChevronTopSmall, { size: isDrive ? "huge" : "large", className: "zen-caption__post-content" })) : (_jsx(IconChevronDownSmall, { size: isDrive ? "huge" : "large", className: "zen-caption__post-content" })))] }));
|
|
34
36
|
return content.length ? (_jsxs(_Fragment, { children: [trigger, _jsx(ControlledMenu, { title: name, isOpen: isOpen, setIsOpen: setIsOpen, triggerRef: triggerRef, children: content })] })) : (trigger);
|
|
35
37
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { createElement, useMemo } from "react";
|
|
3
3
|
import { classNames } from "../../commonHelpers/classNames/classNames";
|
|
4
4
|
import { useDriveClassName } from "../../utils/theme/useDriveClassName";
|
|
@@ -11,8 +11,12 @@ export const Title = ({ isMobile, link, target, title, id, icon, iconType, class
|
|
|
11
11
|
const iconSize = useMemo(() => (isDrive ? "huge" : "large"), [isDrive]);
|
|
12
12
|
const iconElement = useMemo(() => (icon ? _jsx("div", { className: classNames(["zen-card-title__icon", iconClassName]), children: createElement(icon, { size: iconSize }) }) : null), [icon, iconSize, iconClassName]);
|
|
13
13
|
const chevron = useMemo(() => (_jsx("span", { className: "zen-card-title__link-chevron", children: _jsx(IconChevronRightSmall, { size: iconSize, className: "zen-card-title__chevron-icon" }) })), [iconSize]);
|
|
14
|
-
const roleProp = onClick ? "button" : undefined;
|
|
15
|
-
const tabIndexProp = onClick ? 0 : undefined;
|
|
16
14
|
const titleClasses = classNames(["zen-card-title", driveClassNames || "", onClick ? "zen-card-title__clickable" : ""]);
|
|
17
|
-
|
|
15
|
+
if (onClick) {
|
|
16
|
+
return (_jsxs("button", { type: "button", className: titleClasses, onClick: onClick, children: [iconElement, _jsxs("span", { title: title, id: id, className: classNames(["zen-card-title__text", isMobile && !isDrive ? "zen-card-title__text--mobile" : "", className]), children: [title, chevron] })] }));
|
|
17
|
+
}
|
|
18
|
+
if (link) {
|
|
19
|
+
return (_jsxs("a", { id: id, className: titleClasses, href: link, target: target, children: [iconElement, _jsxs("span", { title: title, className: classNames(["zen-card-title__link-text"]), children: [title, chevron] })] }));
|
|
20
|
+
}
|
|
21
|
+
return (_jsxs("div", { className: titleClasses, children: [iconElement, _jsx("span", { title: title, id: id, className: classNames(["zen-card-title__text", isMobile && !isDrive ? "zen-card-title__text--mobile" : "", className]), children: title })] }));
|
|
18
22
|
};
|
|
@@ -16,16 +16,14 @@ export const getBarLegendItems = (data, options) => {
|
|
|
16
16
|
const legendItems = data.datasets.map((dataset, index) => {
|
|
17
17
|
let value;
|
|
18
18
|
if (options === null || options === void 0 ? void 0 : options.getValue) {
|
|
19
|
-
const
|
|
20
|
-
|
|
21
|
-
if (customValue !== undefined) {
|
|
19
|
+
const customValue = options.getValue(index, getDatasetValues(dataset));
|
|
20
|
+
if (customValue !== null && customValue !== undefined) {
|
|
22
21
|
const strValue = typeof customValue === "number" ? customValue.toFixed(2) : customValue;
|
|
23
22
|
value = formatValue(strValue, index, options.unit);
|
|
24
23
|
}
|
|
25
24
|
}
|
|
26
25
|
else if (options === null || options === void 0 ? void 0 : options.unit) {
|
|
27
|
-
|
|
28
|
-
value = formatValue(sum.toFixed(2), index, options.unit);
|
|
26
|
+
value = formatValue(getDatasetSum(dataset).toFixed(2), index, options.unit);
|
|
29
27
|
}
|
|
30
28
|
const originalLabel = dataset.label || "";
|
|
31
29
|
const text = (options === null || options === void 0 ? void 0 : options.getLabel) ? options.getLabel(index, originalLabel) : originalLabel;
|
|
@@ -35,15 +35,15 @@ export const getLineLegendItems = (data, options) => {
|
|
|
35
35
|
}
|
|
36
36
|
let value;
|
|
37
37
|
if (options === null || options === void 0 ? void 0 : options.getValue) {
|
|
38
|
-
const
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
38
|
+
const customValue = options.getValue(index, getDatasetValues(dataset));
|
|
39
|
+
if (customValue !== null) {
|
|
40
|
+
const strValue = customValue !== undefined
|
|
41
|
+
? typeof customValue === "number"
|
|
42
|
+
? customValue.toFixed(2)
|
|
43
|
+
: customValue
|
|
44
|
+
: getLatestValue(dataset).toFixed(2);
|
|
42
45
|
value = formatValue(strValue, index, options.unit);
|
|
43
46
|
}
|
|
44
|
-
else {
|
|
45
|
-
value = formatValue(getLatestValue(dataset).toFixed(2), index, options.unit);
|
|
46
|
-
}
|
|
47
47
|
}
|
|
48
48
|
else {
|
|
49
49
|
value = formatValue(getLatestValue(dataset).toFixed(2), index, options === null || options === void 0 ? void 0 : options.unit);
|
|
@@ -8,22 +8,18 @@ export const getPieLegendItems = (data, options, isHidden) => {
|
|
|
8
8
|
const colors = dataset.backgroundColor || [];
|
|
9
9
|
const legendItems = dataset.data.map((item, index) => {
|
|
10
10
|
let value;
|
|
11
|
-
if (isHidden(index)) {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
value = formatValue(strValue, index, options.unit);
|
|
11
|
+
if (!isHidden(index)) {
|
|
12
|
+
if (options === null || options === void 0 ? void 0 : options.getValue) {
|
|
13
|
+
const customValue = options.getValue(index, dataset.data);
|
|
14
|
+
if (customValue !== null) {
|
|
15
|
+
const strValue = customValue !== undefined ? (typeof customValue === "number" ? customValue.toFixed(2) : customValue) : item.toFixed(2);
|
|
16
|
+
value = formatValue(strValue, index, options.unit);
|
|
17
|
+
}
|
|
19
18
|
}
|
|
20
19
|
else {
|
|
21
|
-
value = formatValue(item.toFixed(2), index, options.unit);
|
|
20
|
+
value = formatValue(item.toFixed(2), index, options === null || options === void 0 ? void 0 : options.unit);
|
|
22
21
|
}
|
|
23
22
|
}
|
|
24
|
-
else {
|
|
25
|
-
value = formatValue(item.toFixed(2), index, options === null || options === void 0 ? void 0 : options.unit);
|
|
26
|
-
}
|
|
27
23
|
const originalLabel = labels[index] && typeof labels[index] === "string" ? labels[index] : "";
|
|
28
24
|
const text = (options === null || options === void 0 ? void 0 : options.getLabel) ? options.getLabel(index, originalLabel) : originalLabel;
|
|
29
25
|
return {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { TUnit } from "../../interfaces";
|
|
2
2
|
export interface ILegendOptions {
|
|
3
3
|
unit?: TUnit;
|
|
4
|
-
getValue?: (datasetIndex: number, data: number[]) => string | number | undefined;
|
|
4
|
+
getValue?: (datasetIndex: number, data: number[]) => string | number | null | undefined;
|
|
5
5
|
getLabel?: (datasetIndex: number, originalLabel: string) => string;
|
|
6
6
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { injectString } from "../utils/localization/translationsDictionary";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useMemo } from "react";
|
|
3
|
+
import { useId, useMemo } from "react";
|
|
4
4
|
import { TextInputRaw } from "../textInputRaw/textInputRaw";
|
|
5
5
|
import { TimePicker } from "../timePicker/timePicker";
|
|
6
6
|
import { useLanguage } from "../utils/localization/useLanguage";
|
|
@@ -79,23 +79,28 @@ export const DateInputInnerControlBlock = props => {
|
|
|
79
79
|
assistiveText,
|
|
80
80
|
ref
|
|
81
81
|
} = props;
|
|
82
|
+
const generatedId = useId();
|
|
83
|
+
const fieldId = id || generatedId;
|
|
82
84
|
const {
|
|
83
85
|
translate
|
|
84
86
|
} = useLanguage();
|
|
85
87
|
const driveAssistiveClass = useDriveClassName("zen-form-field__text");
|
|
86
88
|
const isHasDateError = requireSelection && !dateText;
|
|
87
89
|
const isHasTimeError = requireSelection && !timePickerValue;
|
|
90
|
+
const dateErrorId = `${fieldId}-date-error`;
|
|
91
|
+
const timeErrorId = `${fieldId}-time-error`;
|
|
88
92
|
const memoizedDateInput = useMemo(() => _jsx(TextInputRaw, {
|
|
89
93
|
className: classNames(["zen-date-input-inner__text-input", isActiveField ? "zen-date-input-inner__text-input--active" : ""]),
|
|
90
|
-
id:
|
|
94
|
+
id: fieldId,
|
|
91
95
|
value: dateText,
|
|
92
96
|
onChange: handleSetDateText,
|
|
93
97
|
onBlur: onBlurDateChangeHandler,
|
|
94
98
|
placeholder: placeholder,
|
|
95
99
|
autocomplete: "off",
|
|
96
100
|
isError: isHasDateError,
|
|
101
|
+
ariaDescribedby: isHasDateError ? dateErrorId : undefined,
|
|
97
102
|
ref: ref
|
|
98
|
-
}), [dateText, handleSetDateText,
|
|
103
|
+
}), [dateText, handleSetDateText, fieldId, isActiveField, isHasDateError, onBlurDateChangeHandler, placeholder, ref, dateErrorId]);
|
|
99
104
|
const memoizedTimeSelect = useMemo(() => selectTime ? _jsxs("div", {
|
|
100
105
|
className: "zen-date-input-inner__inputs-block-item",
|
|
101
106
|
children: [_jsx(TimePicker, {
|
|
@@ -103,18 +108,16 @@ export const DateInputInnerControlBlock = props => {
|
|
|
103
108
|
value: timePickerValue,
|
|
104
109
|
onChange: timeChangeHandler,
|
|
105
110
|
isMobileView: isMobileView,
|
|
106
|
-
fullWidth: true
|
|
107
|
-
// eslint-disable-next-line
|
|
108
|
-
// @ts-ignore
|
|
109
|
-
dataTimeId: id
|
|
111
|
+
fullWidth: true
|
|
110
112
|
}), isHasTimeError ? _jsx(FormFieldError, {
|
|
113
|
+
id: timeErrorId,
|
|
111
114
|
error: translate("The time must be set")
|
|
112
115
|
}) : null]
|
|
113
|
-
}) : null, [isActiveField, isHasTimeError, isMobileView, selectTime, timeChangeHandler, timePickerValue, translate,
|
|
116
|
+
}) : null, [isActiveField, isHasTimeError, isMobileView, selectTime, timeChangeHandler, timePickerValue, translate, timeErrorId]);
|
|
114
117
|
return _jsxs("div", {
|
|
115
118
|
className: classNames(["zen-date-input-inner__control-block", className || ""]),
|
|
116
119
|
children: [title ? _jsx("label", {
|
|
117
|
-
htmlFor:
|
|
120
|
+
htmlFor: fieldId,
|
|
118
121
|
className: "zen-date-input-inner__label",
|
|
119
122
|
children: title
|
|
120
123
|
}) : null, _jsxs("div", {
|
|
@@ -122,6 +125,7 @@ export const DateInputInnerControlBlock = props => {
|
|
|
122
125
|
children: [_jsxs("div", {
|
|
123
126
|
className: "zen-date-input-inner__inputs-block-item",
|
|
124
127
|
children: [memoizedDateInput, isHasDateError ? _jsx(FormFieldError, {
|
|
128
|
+
id: dateErrorId,
|
|
125
129
|
error: translate("The date must be set")
|
|
126
130
|
}) : null]
|
|
127
131
|
}), memoizedTimeSelect]
|
package/esm/dialog/dialog.js
CHANGED
|
@@ -7,7 +7,7 @@ import { classNames } from "../commonHelpers/classNames/classNames";
|
|
|
7
7
|
import { useBodyScroll } from "../utils/useBodyScroll";
|
|
8
8
|
import { useClientReady } from "../commonHelpers/hooks/useClientReady";
|
|
9
9
|
import { zen } from "../utils/zen";
|
|
10
|
-
import {
|
|
10
|
+
import { usePortal } from "../commonHelpers/hooks/usePortal";
|
|
11
11
|
/**
|
|
12
12
|
* @deprecated - use Modal instead
|
|
13
13
|
*/
|
|
@@ -42,9 +42,10 @@ export const Dialog = ({ isOpen, children, isElementVisible }) => {
|
|
|
42
42
|
const labeledId = useId();
|
|
43
43
|
const darkClass = dark ? "zen-dark" : "";
|
|
44
44
|
const createDialog = id => (_jsxs("div", { className: classNames(["zen-dialog", darkClass]), "aria-modal": "true", role: "dialog", "aria-labelledby": labeledId, style: { top: `${zen.pageYOffset || 0}px` }, children: [_jsx(DialogContent, Object.assign({}, children.props, { labeledId: id, isElementVisible: isElementVisible })), _jsx("div", { className: "zen-dialog__shield" })] }));
|
|
45
|
+
const modalRoot = ((_b = zen.document) === null || _b === void 0 ? void 0 : _b.fullscreenElement) || ((_c = zen.document) === null || _c === void 0 ? void 0 : _c.body);
|
|
46
|
+
const portal = usePortal(isOpen && isValidElement(children) ? createDialog(labeledId) : null, modalRoot, "ModalPortal");
|
|
45
47
|
if (!isClientReady) {
|
|
46
48
|
return null;
|
|
47
49
|
}
|
|
48
|
-
|
|
49
|
-
return createPortal(isOpen && isValidElement(children) ? createDialog(labeledId) : null, modalRoot);
|
|
50
|
+
return portal;
|
|
50
51
|
};
|
|
@@ -204,28 +204,37 @@ export const FileUpload = ({
|
|
|
204
204
|
const pendingFocusIndexRef = useRef(null);
|
|
205
205
|
const driveClasses = useDriveClassName("zen-file-upload");
|
|
206
206
|
const classes = useMemo(() => classNames(["zen-file-upload", `zen-file-upload--${size}`, isMobile ? "zen-file-upload--mobile" : "", driveClasses || "", disabled ? "zen-file-upload--disabled" : "", className !== null && className !== void 0 ? className : ""]), [size, isMobile, driveClasses, disabled, className]);
|
|
207
|
-
const
|
|
208
|
-
const isUploadDisabled = disabled || hasReachedLimit;
|
|
207
|
+
const isUploadDisabled = disabled;
|
|
209
208
|
const isInteractionDisabled = isUploadDisabled || isUploading;
|
|
210
209
|
const dropZoneClasses = useMemo(() => classNames(["zen-file-upload__drop-zone", `zen-file-upload__drop-zone--${size}`, isMobile ? "zen-file-upload__drop-zone--mobile" : "", isDragOver ? "zen-file-upload__drop-zone--drag-over" : "", isInteractionDisabled ? "zen-file-upload__drop-zone--disabled" : ""]), [size, isMobile, isDragOver, isInteractionDisabled]);
|
|
211
210
|
const handleFilesAdded = useCallback(fileList => {
|
|
212
211
|
if (!onChange) {
|
|
213
212
|
return;
|
|
214
213
|
}
|
|
215
|
-
|
|
216
|
-
|
|
214
|
+
let newFiles = createUploadedFiles(fileList);
|
|
215
|
+
let addedFiles = fileList;
|
|
216
|
+
// when allowMultiple is false, only take first file
|
|
217
|
+
if (!allowMultiple && newFiles.length > 1) {
|
|
218
|
+
newFiles = [newFiles[0]];
|
|
219
|
+
const firstFile = fileList[0];
|
|
220
|
+
const singleFileArray = [firstFile];
|
|
221
|
+
addedFiles = Object.assign(singleFileArray, {
|
|
222
|
+
item: index => singleFileArray[index] || null
|
|
223
|
+
});
|
|
224
|
+
}
|
|
225
|
+
const merged = allowMultiple ? [...value, ...newFiles] : newFiles;
|
|
217
226
|
onChange(merged, {
|
|
218
227
|
action: "add",
|
|
219
|
-
addedFiles
|
|
228
|
+
addedFiles
|
|
220
229
|
});
|
|
221
|
-
}, [onChange, value]);
|
|
230
|
+
}, [onChange, value, allowMultiple]);
|
|
222
231
|
const handleDragOver = useCallback(e => {
|
|
223
232
|
e.preventDefault();
|
|
224
233
|
e.stopPropagation();
|
|
225
|
-
if (!disabled && !isUploading
|
|
234
|
+
if (!disabled && !isUploading) {
|
|
226
235
|
setIsDragOver(true);
|
|
227
236
|
}
|
|
228
|
-
}, [disabled, isUploading
|
|
237
|
+
}, [disabled, isUploading]);
|
|
229
238
|
const handleDragLeave = useCallback(e => {
|
|
230
239
|
e.preventDefault();
|
|
231
240
|
e.stopPropagation();
|
|
@@ -235,7 +244,7 @@ export const FileUpload = ({
|
|
|
235
244
|
e.preventDefault();
|
|
236
245
|
e.stopPropagation();
|
|
237
246
|
setIsDragOver(false);
|
|
238
|
-
if (!disabled && !isUploading &&
|
|
247
|
+
if (!disabled && !isUploading && onChange && e.dataTransfer.files.length > 0) {
|
|
239
248
|
// DataTransfer.files becomes inaccessible after event, so preserve it
|
|
240
249
|
const filesArray = Array.from(e.dataTransfer.files);
|
|
241
250
|
// Create a simple FileList-like object
|
|
@@ -244,12 +253,12 @@ export const FileUpload = ({
|
|
|
244
253
|
});
|
|
245
254
|
handleFilesAdded(fileList);
|
|
246
255
|
}
|
|
247
|
-
}, [disabled, isUploading,
|
|
256
|
+
}, [disabled, isUploading, onChange, handleFilesAdded]);
|
|
248
257
|
const handleBrowseClick = useCallback(() => {
|
|
249
|
-
if (!disabled && !isUploading &&
|
|
258
|
+
if (!disabled && !isUploading && fileInputRef.current) {
|
|
250
259
|
fileInputRef.current.click();
|
|
251
260
|
}
|
|
252
|
-
}, [disabled, isUploading
|
|
261
|
+
}, [disabled, isUploading]);
|
|
253
262
|
const handleFileInputChange = useCallback(e => {
|
|
254
263
|
if (e.target.files && e.target.files.length > 0 && onChange) {
|
|
255
264
|
handleFilesAdded(e.target.files);
|
|
@@ -78,6 +78,7 @@ export const FiltersBarSidePanelRange = ({
|
|
|
78
78
|
}) => {
|
|
79
79
|
const generatedId = useId();
|
|
80
80
|
const intId = id || generatedId;
|
|
81
|
+
const rangeErrorId = `${intId}-error`;
|
|
81
82
|
const [currentValue, setCurrentValue] = useState(value);
|
|
82
83
|
const [errorType, setErrorType] = useState(undefined);
|
|
83
84
|
const prevValueRef = useRef(value);
|
|
@@ -152,11 +153,13 @@ export const FiltersBarSidePanelRange = ({
|
|
|
152
153
|
return _jsxs("div", {
|
|
153
154
|
ref: setFieldsContainerRef,
|
|
154
155
|
id: intId,
|
|
156
|
+
"aria-describedby": errorType !== undefined && directionState === "row" ? rangeErrorId : undefined,
|
|
155
157
|
className: classNames(["zen-filters-bar-side-panel-range", className || ""]),
|
|
156
158
|
children: [_jsxs("div", {
|
|
157
159
|
className: rangeFieldContainerClasses,
|
|
158
160
|
children: [memoizedMinRangeField, memoizedMaxRangeField]
|
|
159
161
|
}), errorType !== undefined && directionState === "row" ? _jsx(FormFieldError, {
|
|
162
|
+
id: rangeErrorId,
|
|
160
163
|
className: "zen-filters-bar-side-panel-range__error",
|
|
161
164
|
error: [getErrorString("min", currentValue.min, translate, errorType, min, max) || "", getErrorString("max", currentValue.max, translate, errorType, min, max) || ""]
|
|
162
165
|
}) : null]
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import "./formFieldError.less";
|
|
2
2
|
interface IFormFieldError {
|
|
3
|
+
id?: string;
|
|
3
4
|
className?: string;
|
|
4
5
|
error?: string | string[];
|
|
5
6
|
}
|
|
6
|
-
export declare const FormFieldError: ({ className, error }: IFormFieldError) => import("react/jsx-runtime").JSX.Element | null;
|
|
7
|
+
export declare const FormFieldError: ({ id, className, error }: IFormFieldError) => import("react/jsx-runtime").JSX.Element | null;
|
|
7
8
|
export {};
|
|
@@ -3,11 +3,11 @@ import { classNames } from "../commonHelpers/classNames/classNames";
|
|
|
3
3
|
import { IconException } from "../icons/iconException";
|
|
4
4
|
import { useDrive } from "../utils/theme/useDrive";
|
|
5
5
|
import { useDriveClassName } from "../utils/theme/useDriveClassName";
|
|
6
|
-
export const FormFieldError = ({ className, error }) => {
|
|
6
|
+
export const FormFieldError = ({ id, className, error }) => {
|
|
7
7
|
const driveComponentClass = useDriveClassName("zen-form-field-error");
|
|
8
8
|
const isDrive = useDrive();
|
|
9
9
|
const errorStrings = Array.isArray(error)
|
|
10
10
|
? error.filter(el => el).map((erStr, ind) => _jsx("div", { children: erStr }, `error_str_${ind}`))
|
|
11
11
|
: error && _jsx("div", { children: error });
|
|
12
|
-
return error ? (_jsxs("
|
|
12
|
+
return error ? (_jsxs("span", { id: id, className: classNames(["zen-form-field-error", driveComponentClass || "", className || ""]), children: [_jsx(IconException, { className: "zen-form-field-error__error-icon", size: isDrive ? "large" : "bigger" }), _jsx("span", { className: "zen-form-field-error__error-text", children: errorStrings })] })) : null;
|
|
13
13
|
};
|
package/esm/index.d.ts
CHANGED
|
@@ -74,8 +74,6 @@ export { useDropdownState } from "./dropdown/useDropdownState";
|
|
|
74
74
|
export { type IEmptyState, EmptyState } from "./emptyState/emptyState";
|
|
75
75
|
export { type IFavoriteButton, FavoriteButton } from "./favoriteButton/favoriteButton";
|
|
76
76
|
export { FeedbackProvider } from "./feedbackProvider/feedbackProvider";
|
|
77
|
-
export { TemplateDownloadSection } from "./fileUpload/components/templateDownloadSection";
|
|
78
|
-
export { UploadedFilesSection } from "./fileUpload/components/uploadedFilesSection";
|
|
79
77
|
export { FileUpload } from "./fileUpload/fileUpload";
|
|
80
78
|
export { type IUploadedFile, type ITemplateDownload, type IFileUploadMeta, type IFileUpload } from "./fileUpload/fileUploadType";
|
|
81
79
|
export { type TFilterButton, type IFilterButton, FilterButton } from "./filterButton/filterButton";
|
package/esm/index.js
CHANGED
|
@@ -73,8 +73,6 @@ export { useDropdownState } from "./dropdown/useDropdownState";
|
|
|
73
73
|
export { EmptyState } from "./emptyState/emptyState";
|
|
74
74
|
export { FavoriteButton } from "./favoriteButton/favoriteButton";
|
|
75
75
|
export { FeedbackProvider } from "./feedbackProvider/feedbackProvider";
|
|
76
|
-
export { TemplateDownloadSection } from "./fileUpload/components/templateDownloadSection";
|
|
77
|
-
export { UploadedFilesSection } from "./fileUpload/components/uploadedFilesSection";
|
|
78
76
|
export { FileUpload } from "./fileUpload/fileUpload";
|
|
79
77
|
export { FilterButton } from "./filterButton/filterButton";
|
|
80
78
|
export { FiltersChip } from "./filters/components/filtersChip";
|