From 71f44c828ab781e9d27cca34115042d6b83e3d55 Mon Sep 17 00:00:00 2001 From: Adam Date: Fri, 25 Aug 2023 15:57:08 -0700 Subject: [PATCH 01/44] feat(table): Add Table and related components --- .../assets/table-cell/t9n/messages.json | 5 + .../assets/table-cell/t9n/messages_ar.json | 5 + .../assets/table-cell/t9n/messages_bg.json | 5 + .../assets/table-cell/t9n/messages_bs.json | 5 + .../assets/table-cell/t9n/messages_ca.json | 5 + .../assets/table-cell/t9n/messages_cs.json | 5 + .../assets/table-cell/t9n/messages_da.json | 5 + .../assets/table-cell/t9n/messages_de.json | 5 + .../assets/table-cell/t9n/messages_el.json | 5 + .../assets/table-cell/t9n/messages_en.json | 5 + .../assets/table-cell/t9n/messages_es.json | 5 + .../assets/table-cell/t9n/messages_et.json | 5 + .../assets/table-cell/t9n/messages_fi.json | 5 + .../assets/table-cell/t9n/messages_fr.json | 5 + .../assets/table-cell/t9n/messages_he.json | 5 + .../assets/table-cell/t9n/messages_hr.json | 5 + .../assets/table-cell/t9n/messages_hu.json | 5 + .../assets/table-cell/t9n/messages_id.json | 5 + .../assets/table-cell/t9n/messages_it.json | 5 + .../assets/table-cell/t9n/messages_ja.json | 5 + .../assets/table-cell/t9n/messages_ko.json | 5 + .../assets/table-cell/t9n/messages_lt.json | 5 + .../assets/table-cell/t9n/messages_lv.json | 5 + .../assets/table-cell/t9n/messages_nl.json | 5 + .../assets/table-cell/t9n/messages_no.json | 5 + .../assets/table-cell/t9n/messages_pl.json | 5 + .../assets/table-cell/t9n/messages_pt-BR.json | 5 + .../assets/table-cell/t9n/messages_pt-PT.json | 5 + .../assets/table-cell/t9n/messages_ro.json | 5 + .../assets/table-cell/t9n/messages_ru.json | 5 + .../assets/table-cell/t9n/messages_sk.json | 5 + .../assets/table-cell/t9n/messages_sl.json | 5 + .../assets/table-cell/t9n/messages_sr.json | 5 + .../assets/table-cell/t9n/messages_sv.json | 5 + .../assets/table-cell/t9n/messages_th.json | 5 + .../assets/table-cell/t9n/messages_tr.json | 5 + .../assets/table-cell/t9n/messages_uk.json | 5 + .../assets/table-cell/t9n/messages_vi.json | 5 + .../assets/table-cell/t9n/messages_zh-CN.json | 5 + .../assets/table-cell/t9n/messages_zh-HK.json | 5 + .../assets/table-cell/t9n/messages_zh-TW.json | 5 + .../src/components/table-cell/readme.md | 55 + .../src/components/table-cell/resources.ts | 6 + .../src/components/table-cell/table-cell.scss | 69 + .../src/components/table-cell/table-cell.tsx | 186 ++ .../assets/table-header/t9n/messages.json | 9 + .../assets/table-header/t9n/messages_ar.json | 9 + .../assets/table-header/t9n/messages_bg.json | 9 + .../assets/table-header/t9n/messages_bs.json | 9 + .../assets/table-header/t9n/messages_ca.json | 9 + .../assets/table-header/t9n/messages_cs.json | 9 + .../assets/table-header/t9n/messages_da.json | 9 + .../assets/table-header/t9n/messages_de.json | 9 + .../assets/table-header/t9n/messages_el.json | 9 + .../assets/table-header/t9n/messages_en.json | 9 + .../assets/table-header/t9n/messages_es.json | 9 + .../assets/table-header/t9n/messages_et.json | 9 + .../assets/table-header/t9n/messages_fi.json | 9 + .../assets/table-header/t9n/messages_fr.json | 9 + .../assets/table-header/t9n/messages_he.json | 9 + .../assets/table-header/t9n/messages_hr.json | 9 + .../assets/table-header/t9n/messages_hu.json | 9 + .../assets/table-header/t9n/messages_id.json | 9 + .../assets/table-header/t9n/messages_it.json | 9 + .../assets/table-header/t9n/messages_ja.json | 9 + .../assets/table-header/t9n/messages_ko.json | 9 + .../assets/table-header/t9n/messages_lt.json | 9 + .../assets/table-header/t9n/messages_lv.json | 9 + .../assets/table-header/t9n/messages_nl.json | 9 + .../assets/table-header/t9n/messages_no.json | 9 + .../assets/table-header/t9n/messages_pl.json | 9 + .../table-header/t9n/messages_pt-BR.json | 9 + .../table-header/t9n/messages_pt-PT.json | 9 + .../assets/table-header/t9n/messages_ro.json | 9 + .../assets/table-header/t9n/messages_ru.json | 9 + .../assets/table-header/t9n/messages_sk.json | 9 + .../assets/table-header/t9n/messages_sl.json | 9 + .../assets/table-header/t9n/messages_sr.json | 9 + .../assets/table-header/t9n/messages_sv.json | 9 + .../assets/table-header/t9n/messages_th.json | 9 + .../assets/table-header/t9n/messages_tr.json | 9 + .../assets/table-header/t9n/messages_uk.json | 9 + .../assets/table-header/t9n/messages_vi.json | 9 + .../table-header/t9n/messages_zh-CN.json | 9 + .../table-header/t9n/messages_zh-HK.json | 9 + .../table-header/t9n/messages_zh-TW.json | 9 + .../src/components/table-header/readme.md | 63 + .../src/components/table-header/resources.ts | 8 + .../components/table-header/table-header.scss | 67 + .../components/table-header/table-header.tsx | 199 ++ .../src/components/table-row/readme.md | 53 + .../src/components/table-row/resources.ts | 3 + .../src/components/table-row/table-row.scss | 27 + .../src/components/table-row/table-row.tsx | 344 +++ .../table/assets/table/t9n/messages.json | 6 + .../table/assets/table/t9n/messages_ar.json | 6 + .../table/assets/table/t9n/messages_bg.json | 6 + .../table/assets/table/t9n/messages_bs.json | 5 + .../table/assets/table/t9n/messages_ca.json | 6 + .../table/assets/table/t9n/messages_cs.json | 6 + .../table/assets/table/t9n/messages_da.json | 6 + .../table/assets/table/t9n/messages_de.json | 6 + .../table/assets/table/t9n/messages_el.json | 6 + .../table/assets/table/t9n/messages_en.json | 6 + .../table/assets/table/t9n/messages_es.json | 6 + .../table/assets/table/t9n/messages_et.json | 6 + .../table/assets/table/t9n/messages_fi.json | 6 + .../table/assets/table/t9n/messages_fr.json | 6 + .../table/assets/table/t9n/messages_he.json | 6 + .../table/assets/table/t9n/messages_hr.json | 6 + .../table/assets/table/t9n/messages_hu.json | 6 + .../table/assets/table/t9n/messages_id.json | 6 + .../table/assets/table/t9n/messages_it.json | 6 + .../table/assets/table/t9n/messages_ja.json | 6 + .../table/assets/table/t9n/messages_ko.json | 6 + .../table/assets/table/t9n/messages_lt.json | 6 + .../table/assets/table/t9n/messages_lv.json | 6 + .../table/assets/table/t9n/messages_nl.json | 6 + .../table/assets/table/t9n/messages_no.json | 6 + .../table/assets/table/t9n/messages_pl.json | 6 + .../assets/table/t9n/messages_pt-BR.json | 6 + .../assets/table/t9n/messages_pt-PT.json | 6 + .../table/assets/table/t9n/messages_ro.json | 6 + .../table/assets/table/t9n/messages_ru.json | 6 + .../table/assets/table/t9n/messages_sk.json | 6 + .../table/assets/table/t9n/messages_sl.json | 6 + .../table/assets/table/t9n/messages_sr.json | 6 + .../table/assets/table/t9n/messages_sv.json | 6 + .../table/assets/table/t9n/messages_th.json | 6 + .../table/assets/table/t9n/messages_tr.json | 6 + .../table/assets/table/t9n/messages_uk.json | 6 + .../table/assets/table/t9n/messages_vi.json | 6 + .../assets/table/t9n/messages_zh-CN.json | 6 + .../assets/table/t9n/messages_zh-HK.json | 6 + .../assets/table/t9n/messages_zh-TW.json | 6 + .../src/components/table/interfaces.ts | 11 + .../src/components/table/readme.md | 50 + .../src/components/table/resources.ts | 13 + .../src/components/table/table.e2e.ts | 440 +++ .../src/components/table/table.scss | 86 + .../src/components/table/table.stories.ts | 701 +++++ .../src/components/table/table.tsx | 436 +++ .../calcite-components/src/demos/table.html | 2649 +++++++++++++++++ packages/calcite-components/src/index.html | 6 + t9nmanifest.txt | 3 + 145 files changed, 6294 insertions(+) create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ar.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_bg.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_bs.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ca.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_cs.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_da.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_de.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_el.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_en.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_es.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_et.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_fi.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_fr.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_he.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_hr.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_hu.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_id.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_it.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ja.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ko.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_lt.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_lv.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_nl.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_no.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pl.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pt-BR.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pt-PT.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ro.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ru.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sk.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sl.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sr.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sv.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_th.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_tr.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_uk.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_vi.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-CN.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-HK.json create mode 100644 packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-TW.json create mode 100644 packages/calcite-components/src/components/table-cell/readme.md create mode 100644 packages/calcite-components/src/components/table-cell/resources.ts create mode 100644 packages/calcite-components/src/components/table-cell/table-cell.scss create mode 100644 packages/calcite-components/src/components/table-cell/table-cell.tsx create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ar.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_bg.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_bs.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ca.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_cs.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_da.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_de.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_el.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_en.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_es.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_et.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_fi.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_fr.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_he.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_hr.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_hu.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_id.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_it.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ja.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ko.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_lt.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_lv.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_nl.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_no.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pl.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pt-BR.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pt-PT.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ro.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ru.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sk.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sl.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sr.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sv.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_th.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_tr.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_uk.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_vi.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-CN.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-HK.json create mode 100644 packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-TW.json create mode 100644 packages/calcite-components/src/components/table-header/readme.md create mode 100644 packages/calcite-components/src/components/table-header/resources.ts create mode 100644 packages/calcite-components/src/components/table-header/table-header.scss create mode 100644 packages/calcite-components/src/components/table-header/table-header.tsx create mode 100644 packages/calcite-components/src/components/table-row/readme.md create mode 100644 packages/calcite-components/src/components/table-row/resources.ts create mode 100644 packages/calcite-components/src/components/table-row/table-row.scss create mode 100644 packages/calcite-components/src/components/table-row/table-row.tsx create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_ar.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_bg.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_bs.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_ca.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_cs.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_da.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_de.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_el.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_en.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_es.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_et.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_fi.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_fr.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_he.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_hr.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_hu.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_id.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_it.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_ja.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_ko.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_lt.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_lv.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_nl.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_no.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_pl.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_pt-BR.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_pt-PT.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_ro.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_ru.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_sk.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_sl.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_sr.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_sv.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_th.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_tr.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_uk.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_vi.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_zh-CN.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_zh-HK.json create mode 100644 packages/calcite-components/src/components/table/assets/table/t9n/messages_zh-TW.json create mode 100644 packages/calcite-components/src/components/table/interfaces.ts create mode 100644 packages/calcite-components/src/components/table/readme.md create mode 100644 packages/calcite-components/src/components/table/resources.ts create mode 100644 packages/calcite-components/src/components/table/table.e2e.ts create mode 100644 packages/calcite-components/src/components/table/table.scss create mode 100644 packages/calcite-components/src/components/table/table.stories.ts create mode 100644 packages/calcite-components/src/components/table/table.tsx create mode 100644 packages/calcite-components/src/demos/table.html diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ar.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ar.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ar.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_bg.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_bg.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_bg.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_bs.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_bs.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_bs.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ca.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ca.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ca.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_cs.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_cs.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_cs.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_da.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_da.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_da.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_de.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_de.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_de.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_el.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_el.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_el.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_en.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_en.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_en.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_es.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_es.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_es.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_et.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_et.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_et.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_fi.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_fi.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_fi.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_fr.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_fr.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_fr.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_he.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_he.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_he.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_hr.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_hr.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_hr.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_hu.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_hu.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_hu.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_id.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_id.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_id.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_it.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_it.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_it.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ja.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ja.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ja.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ko.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ko.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ko.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_lt.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_lt.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_lt.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_lv.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_lv.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_lv.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_nl.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_nl.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_nl.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_no.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_no.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_no.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pl.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pl.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pl.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pt-BR.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pt-BR.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pt-BR.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pt-PT.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pt-PT.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pt-PT.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ro.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ro.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ro.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ru.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ru.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ru.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sk.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sk.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sk.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sl.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sl.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sl.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sr.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sr.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sr.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sv.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sv.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sv.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_th.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_th.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_th.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_tr.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_tr.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_tr.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_uk.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_uk.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_uk.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_vi.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_vi.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_vi.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-CN.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-CN.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-CN.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-HK.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-HK.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-HK.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-TW.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-TW.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-TW.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table-cell/readme.md b/packages/calcite-components/src/components/table-cell/readme.md new file mode 100644 index 00000000000..7c9c20fd6bc --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/readme.md @@ -0,0 +1,55 @@ +# calcite-table-cell + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| ------------------ | ----------- | ----------------------------------------------------------------------------------------- | ------------------------------ | ----------- | +| `alignment` | `alignment` | Specifies the alignment of the component. | `"center" \| "end" \| "start"` | `"start"` | +| `colSpan` | `col-span` | | `number` | `undefined` | +| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ focusReadout?: string; }` | `undefined` | +| `rowSpan` | `row-span` | | `number` | `undefined` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `value` | `value` | Provide a value to the component - used to sort when table header is sortable and active. | `""` | `undefined` | + +## Methods + +### `setFocus() => Promise` + +Sets focus on the component's first focusable element. + +#### Returns + +Type: `Promise` + +## Slots + +| Slot | Description | +| ---- | ------------------------------------------------ | +| | A slot for adding content, usually text content. | + +## CSS Custom Properties + +| Name | Description | +| ----------------------------------- | ------------------------------------------------ | +| `--calcite-table-cell-background` | Specifies the background color of the component. | +| `--calcite-table-cell-border-color` | Specifies the border color of the component. | + +## Dependencies + +### Used by + +- [calcite-table-row](../table-row) + +### Graph + +```mermaid +graph TD; + calcite-table-row --> calcite-table-cell + style calcite-table-cell fill:#f9f,stroke:#333,stroke-width:4px +``` + +--- + +_Built with [StencilJS](https://stenciljs.com/)_ diff --git a/packages/calcite-components/src/components/table-cell/resources.ts b/packages/calcite-components/src/components/table-cell/resources.ts new file mode 100644 index 00000000000..dd61c2e1b4a --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/resources.ts @@ -0,0 +1,6 @@ +export const CSS = { + numberCell: "number-cell", + selectionCell: "selection-cell", + selectedCell: "selected-cell", + assistiveText: "assistive-text", +}; diff --git a/packages/calcite-components/src/components/table-cell/table-cell.scss b/packages/calcite-components/src/components/table-cell/table-cell.scss new file mode 100644 index 00000000000..b525edb2bf4 --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/table-cell.scss @@ -0,0 +1,69 @@ +/** + * CSS Custom Properties + * + * These properties can be overridden using the component's tag as selector. + * + * @prop --calcite-table-cell-background: Specifies the background color of the component. + * @prop --calcite-table-cell-border-color: Specifies the border color of the component. + */ + +:host { + --calcite-table-cell-background-internal: var(--calcite-table-cell-background, transparent); + --calcite-table-cell-border-color-internal: var(--calcite-table-cell-border-color, transparent); + @apply contents; +} + +:host([alignment="center"]) td { + @apply text-center; +} + +:host([alignment="end"]) td { + @apply text-end; +} + +td { + @apply align-middle text-color-1; + background: var(--calcite-table-cell-background-internal); + border-inline-end: 1px solid var(--calcite-ui-border-3); + + @apply text-start focus-base; + &:focus { + @apply focus-inset; + } + padding: var(--calcite-table-cell-padding-internal); +} + +.number-cell { + @apply bg-foreground-2; +} + +.number-cell, +.selection-cell { + border-inline-end: 1px solid var(--calcite-ui-border-3); + inline-size: 2rem; + min-inline-size: 2rem; +} + +.selection-cell { + @apply cursor-pointer; + inset-inline-start: 2rem; +} + +.selected-cell { + --calcite-table-cell-background: var(--calcite-ui-foreground-current); + background: var(--calcite-ui-foreground-current); +} + +.selection-cell.selected-cell { + box-shadow: inset 0.25rem 0 0 0 var(--calcite-ui-brand); + color: var(--calcite-ui-brand); + & calcite-icon { + color: var(--calcite-ui-brand); + } +} +.selection-cell { + @apply align-middle; + & ::slotted(calcite-icon) { + margin-block-start: 0.3rem; + } +} diff --git a/packages/calcite-components/src/components/table-cell/table-cell.tsx b/packages/calcite-components/src/components/table-cell/table-cell.tsx new file mode 100644 index 00000000000..ce0fbe502fc --- /dev/null +++ b/packages/calcite-components/src/components/table-cell/table-cell.tsx @@ -0,0 +1,186 @@ +import { Component, Element, h, Host, Method, Prop, State, VNode, Watch } from "@stencil/core"; +import { Alignment, Scale } from "../interfaces"; +import { + componentFocusable, + LoadableComponent, + setComponentLoaded, + setUpLoadableComponent, +} from "../../utils/loadable"; +import { + connectMessages, + disconnectMessages, + setUpMessages, + T9nComponent, + updateMessages, +} from "../../utils/t9n"; +import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; +import { TableCellMessages } from "./assets/table-cell/t9n"; +import { CSS } from "./resources"; + +/** + * @slot - A slot for adding content, usually text content. + */ +@Component({ + tag: "calcite-table-cell", + styleUrl: "table-cell.scss", + shadow: true, + assetsDirs: ["assets"], +}) +export class TableCell implements LocalizedComponent, LoadableComponent, T9nComponent { + //-------------------------------------------------------------------------- + // + // Properties + // + //-------------------------------------------------------------------------- + + /** Specifies the alignment of the component. */ + @Prop({ reflect: true }) alignment: Alignment = "start"; + + /** Specifies the number of columns the component should span. */ + @Prop({ reflect: true }) colSpan: number; + + /** Specifies the number of rows the component should span. */ + @Prop({ reflect: true }) rowSpan: number; + + /** Specifies the size of the component. */ + @Prop({ reflect: true }) scale: Scale = "m"; + + /** Provide a value to the component - used for accessible technology and column sorting */ + @Prop() value: string; + + /** + * @internal + */ + @Prop() position: number; + + /** + * @internal + */ + @Prop() selectionCell: boolean; + + /** + * @internal + */ + @Prop() selectionMode: SelectionMode; + + /** + * @internal + */ + @Prop() numberCell: boolean; + + /** + * @internal + */ + @Prop() parentRowIsSelected: boolean; + + /** + * Made into a prop for testing purposes only + * + * @internal + */ + // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module + @Prop({ mutable: true }) messages: TableCellMessages; + + /** + * Use this property to override individual strings used by the component. + */ + // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module + @Prop({ mutable: true }) messageOverrides: Partial; + + @Watch("messageOverrides") + onMessagesChange(): void { + /* wired up by t9n util */ + } + + // -------------------------------------------------------------------------- + // + // Private Properties + // + // -------------------------------------------------------------------------- + @Element() el: HTMLCalciteTableCellElement; + + @State() defaultMessages: TableCellMessages; + + @State() effectiveLocale = ""; + + @Watch("effectiveLocale") + effectiveLocaleChange(): void { + updateMessages(this, this.effectiveLocale); + } + + private focusableEl: HTMLDivElement; + + // -------------------------------------------------------------------------- + // + // Lifecycle + // + // -------------------------------------------------------------------------- + + async componentWillLoad(): Promise { + setUpLoadableComponent(this); + await setUpMessages(this); + } + + componentDidLoad(): void { + setComponentLoaded(this); + } + + connectedCallback(): void { + connectLocalized(this); + connectMessages(this); + } + + disconnectedCallback(): void { + disconnectLocalized(this); + disconnectMessages(this); + } + + //-------------------------------------------------------------------------- + // + // Public Methods + // + // -------------------------------------------------------------------------- + + /** Sets focus on the component's first focusable element. */ + @Method() + async setFocus(): Promise { + await componentFocusable(this); + this.focusableEl.focus(); + } + + //-------------------------------------------------------------------------- + // + // Render Methods + // + //-------------------------------------------------------------------------- + + render(): VNode { + const prefix = this.parentRowIsSelected ? this.messages.selected : this.messages.unselected; + const describedBy = this.selectionCell ? `${prefix}. ${this.messages.toggleSelection}` : ""; + return ( + + (this.focusableEl = el as HTMLDivElement)} + > + {/* + + {this.value} + + */} + + + + ); + } +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ar.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ar.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ar.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_bg.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_bg.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_bg.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_bs.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_bs.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_bs.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ca.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ca.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ca.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_cs.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_cs.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_cs.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_da.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_da.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_da.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_de.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_de.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_de.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_el.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_el.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_el.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_en.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_en.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_en.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_es.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_es.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_es.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_et.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_et.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_et.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_fi.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_fi.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_fi.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_fr.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_fr.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_fr.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_he.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_he.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_he.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_hr.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_hr.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_hr.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_hu.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_hu.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_hu.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_id.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_id.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_id.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_it.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_it.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_it.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ja.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ja.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ja.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ko.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ko.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ko.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_lt.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_lt.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_lt.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_lv.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_lv.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_lv.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_nl.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_nl.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_nl.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_no.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_no.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_no.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pl.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pl.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pl.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pt-BR.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pt-BR.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pt-BR.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pt-PT.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pt-PT.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pt-PT.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ro.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ro.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ro.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ru.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ru.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ru.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sk.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sk.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sk.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sl.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sl.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sl.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sr.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sr.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sr.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sv.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sv.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sv.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_th.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_th.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_th.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_tr.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_tr.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_tr.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_uk.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_uk.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_uk.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_vi.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_vi.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_vi.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-CN.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-CN.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-CN.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-HK.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-HK.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-HK.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-TW.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-TW.json new file mode 100644 index 00000000000..d19978b68e3 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-TW.json @@ -0,0 +1,9 @@ +{ + "selected": "Column is selected", + "selectAll": "Select all", + "selectNone": "Deselect all", + "sortAscending": "Column is sorted ascending", + "sortDescending": "Column is sorted descending", + "sortNone": "Column is not sorted", + "rowNumber": "Row number" +} diff --git a/packages/calcite-components/src/components/table-header/readme.md b/packages/calcite-components/src/components/table-header/readme.md new file mode 100644 index 00000000000..308975e0e20 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/readme.md @@ -0,0 +1,63 @@ +# calcite-table-header + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------- | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ----------- | +| `alignment` | `alignment` | Specifies the alignment of the component. | `"center" \| "end" \| "start"` | `"start"` | +| `colSpan` | `col-span` | | `number` | `undefined` | +| `description` | `description` | A description to display beneath heading content. | `string` | `undefined` | +| `heading` | `heading` | A heading to display above description content. | `string` | `undefined` | +| `label` | `label` | | `string` | `""` | +| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ focusReadout?: string; sortAscending?: string; sortDescending?: string; sortNone?: string; }` | `undefined` | +| `rowSpan` | `row-span` | | `number` | `undefined` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `sortable` | `sortable` | Specifies if the component should be able to sort associated `calcite-table-cell` ascending or descending | `boolean` | `false` | + +## Methods + +### `setFocus() => Promise` + +Sets focus on the component's first focusable element. + +#### Returns + +Type: `Promise` + +## Slots + +| Slot | Description | +| --------------- | ------------------------------------------------ | +| `"actions-end"` | A slot for adding content, usually text content. | + +## CSS Custom Properties + +| Name | Description | +| ------------------------------------- | ------------------------------------------------ | +| `--calcite-table-header-background` | Specifies the background color of the component. | +| `--calcite-table-header-border-color` | Specifies the border color of the component. | + +## Dependencies + +### Used by + +- [calcite-table-row](../table-row) + +### Depends on + +- [calcite-icon](../icon) + +### Graph + +```mermaid +graph TD; + calcite-table-header --> calcite-icon + calcite-table-row --> calcite-table-header + style calcite-table-header fill:#f9f,stroke:#333,stroke-width:4px +``` + +--- + +_Built with [StencilJS](https://stenciljs.com/)_ diff --git a/packages/calcite-components/src/components/table-header/resources.ts b/packages/calcite-components/src/components/table-header/resources.ts new file mode 100644 index 00000000000..ed10312b52e --- /dev/null +++ b/packages/calcite-components/src/components/table-header/resources.ts @@ -0,0 +1,8 @@ +export const CSS = { + numberCell: "number-cell", + selectionCell: "selection-cell", + isInBody: "is-in-body", + heading: "heading", + description: "description", + multipleSelectionCell: "multiple-selection-cell", +}; diff --git a/packages/calcite-components/src/components/table-header/table-header.scss b/packages/calcite-components/src/components/table-header/table-header.scss new file mode 100644 index 00000000000..9af3bc53b1e --- /dev/null +++ b/packages/calcite-components/src/components/table-header/table-header.scss @@ -0,0 +1,67 @@ +/** + * CSS Custom Properties + * + * These properties can be overridden using the component's tag as selector. + * + * @prop --calcite-table-header-background: Specifies the background color of the component. + * @prop --calcite-table-header-border-color: Specifies the border color of the component. + */ + +:host { + --calcite-table-header-background-internal: var(--calcite-table-header-background, var(--calcite-ui-foreground-2)); + --calcite-table-header-border-color-internal: var(--calcite-table-border-color, var(--calcite-ui-border-3)); + @apply contents; +} + +:host([alignment="center"]) th { + @apply text-center; +} + +:host([alignment="end"]) th { + @apply text-end; +} + +th { + @apply text-color-1 focus-base text-start font-medium; + border-inline-end: 1px solid var(--calcite-table-header-border-color-internal); + border-block-end: 1px solid var(--calcite-table-header-border-color-internal); + padding-block: calc(var(--calcite-table-cell-padding-internal) * 1.5); + padding-inline: var(--calcite-table-cell-padding-internal); + background-color: var(--calcite-table-header-background-internal); + + &:focus-within { + @apply focus-inset; + } +} + +th.is-in-body { + border-inline-end: 1px solid var(--calcite-table-header-border-color-internal); + border-block-end: 0; + border-block-start: 0; +} + +.multiple-selection-cell { + cursor: pointer; + vertical-align: middle; + color: var(--calcite-ui-text-3); +} + +.number-cell, +.selection-cell { + inline-size: 2rem; + min-inline-size: 2rem; +} + +.number-cell calcite-icon, +.selection-cell calcite-icon { + margin-inline: auto; + vertical-align: middle; +} + +.heading { + @apply text-color-2; +} + +.description { + @apply text-color-3; +} diff --git a/packages/calcite-components/src/components/table-header/table-header.tsx b/packages/calcite-components/src/components/table-header/table-header.tsx new file mode 100644 index 00000000000..b0bd0e3d1b1 --- /dev/null +++ b/packages/calcite-components/src/components/table-header/table-header.tsx @@ -0,0 +1,199 @@ +import { Component, Element, h, Host, Method, Prop, State, VNode, Watch } from "@stencil/core"; +import { + componentFocusable, + LoadableComponent, + setComponentLoaded, + setUpLoadableComponent, +} from "../../utils/loadable"; +import { + connectMessages, + disconnectMessages, + setUpMessages, + T9nComponent, + updateMessages, +} from "../../utils/t9n"; +import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; +import { Alignment, Scale, SelectionMode } from "../interfaces"; +import { TableHeaderMessages } from "./assets/table-header/t9n"; +import { CSS } from "./resources"; + +@Component({ + tag: "calcite-table-header", + styleUrl: "table-header.scss", + shadow: true, + assetsDirs: ["assets"], +}) +export class TableHeader implements LocalizedComponent, LoadableComponent, T9nComponent { + //-------------------------------------------------------------------------- + // + // Properties + // + //-------------------------------------------------------------------------- + + /** Specifies the size of the component. */ + @Prop({ reflect: true }) scale: Scale = "m"; + + /** Specifies the alignment of the component. */ + @Prop({ reflect: true }) alignment: Alignment = "start"; + + /** Specifies the number of columns the component should span. */ + @Prop({ reflect: true }) colSpan: number; + + /** A description to display beneath heading content. */ + @Prop({ reflect: true }) description: string; + + /** A heading to display above description content. */ + @Prop({ reflect: true }) heading: string; + + /** Specifies the number of rows the component should span. */ + @Prop({ reflect: true }) rowSpan: number; + + /** + * @internal + */ + @Prop() position: number; + + /** + * @internal + */ + @Prop() selectionCell = false; + + /** + * @internal + */ + @Prop() selectionMode: SelectionMode; + + /** + * @internal + */ + @Prop() numberCell = false; + + /** + * @internal + */ + @Prop() isInBody = false; + + /** + * Made into a prop for testing purposes only + * + * @internal + */ + // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module + @Prop({ mutable: true }) messages: TableHeaderMessages; + + /** + * Use this property to override individual strings used by the component. + */ + // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module + @Prop({ mutable: true }) messageOverrides: Partial; + + @Watch("messageOverrides") + onMessagesChange(): void { + /* wired up by t9n util */ + } + + @State() defaultMessages: TableHeaderMessages; + + @State() effectiveLocale = ""; + + @Watch("effectiveLocale") + effectiveLocaleChange(): void { + updateMessages(this, this.effectiveLocale); + } + + // -------------------------------------------------------------------------- + // + // Lifecycle + // + // -------------------------------------------------------------------------- + + async componentWillLoad(): Promise { + setUpLoadableComponent(this); + await setUpMessages(this); + } + + componentDidLoad(): void { + setComponentLoaded(this); + } + + connectedCallback(): void { + connectLocalized(this); + connectMessages(this); + } + + disconnectedCallback(): void { + disconnectLocalized(this); + disconnectMessages(this); + } + + // -------------------------------------------------------------------------- + // + // Private Properties + // + // -------------------------------------------------------------------------- + @Element() el: HTMLCalciteTableHeaderElement; + + private focusableEl: HTMLDivElement; + + // -------------------------------------------------------------------------- + // + // Public Methods + // + // -------------------------------------------------------------------------- + + /** Sets focus on the component's first focusable element. */ + @Method() + async setFocus(): Promise { + await componentFocusable(this); + this.focusableEl.focus(); + } + + //-------------------------------------------------------------------------- + // + // Render Methods + // + //-------------------------------------------------------------------------- + + render(): VNode { + const scope = this.rowSpan + ? "rowgroup" + : this.colSpan + ? "colgroup" + : this.isInBody + ? "row" + : "col"; + + const describedBy = this.selectionCell + ? this.messages.selectAll + : this.numberCell + ? this.messages.rowNumber + : ""; + return ( + + (this.focusableEl = el as HTMLDivElement)} + > + {this.heading &&
{this.heading}
} + {this.description &&
{this.description}
} + {this.selectionCell && this.selectionMode === "multiple" && ( + + )} + + + ); + } +} diff --git a/packages/calcite-components/src/components/table-row/readme.md b/packages/calcite-components/src/components/table-row/readme.md new file mode 100644 index 00000000000..48216d72890 --- /dev/null +++ b/packages/calcite-components/src/components/table-row/readme.md @@ -0,0 +1,53 @@ +# calcite-table-row + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| ---------- | ---------- | ---------------------------------------------------------------------------------------- | ------------------- | ------- | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `selected` | `selected` | Is the component selected. | `boolean` | `false` | + +## Events + +| Event | Description | Type | +| ----------------------- | ------------------------------------------------------- | ------------------- | +| `calciteTableRowSelect` | Fires when the selected state of the component changes. | `CustomEvent` | + +## Slots + +| Slot | Description | +| ---- | -------------------------------------------------------------------------- | +| | A slot for adding `calcite-table-cell` or `calcite-table-header` elements. | + +## CSS Custom Properties + +| Name | Description | +| ---------------------------------- | ------------------------------------------------ | +| `--calcite-table-row-background` | Specifies the background color of the component. | +| `--calcite-table-row-border-color` | Specifies the border color of the component. | + +## Dependencies + +### Depends on + +- [calcite-icon](../icon) +- [calcite-table-header](../table-header) +- [calcite-table-cell](../table-cell) + +### Graph + +```mermaid +graph TD; + calcite-table-row --> calcite-icon + calcite-table-row --> calcite-table-header + calcite-table-row --> calcite-table-cell + calcite-table-header --> calcite-icon + style calcite-table-row fill:#f9f,stroke:#333,stroke-width:4px +``` + +--- + +_Built with [StencilJS](https://stenciljs.com/)_ diff --git a/packages/calcite-components/src/components/table-row/resources.ts b/packages/calcite-components/src/components/table-row/resources.ts new file mode 100644 index 00000000000..22dc39109f4 --- /dev/null +++ b/packages/calcite-components/src/components/table-row/resources.ts @@ -0,0 +1,3 @@ +export const CSS = { + isInTableHead: "is-in-table-head", +}; diff --git a/packages/calcite-components/src/components/table-row/table-row.scss b/packages/calcite-components/src/components/table-row/table-row.scss new file mode 100644 index 00000000000..d14608c6646 --- /dev/null +++ b/packages/calcite-components/src/components/table-row/table-row.scss @@ -0,0 +1,27 @@ +/** + * CSS Custom Properties + * + * These properties can be overridden using the component's tag as selector. + * + * @prop --calcite-table-row-background: Specifies the background color of the component. + * @prop --calcite-table-row-border-color: Specifies the border color of the component. + */ + +@include disabled(); + +:host { + --calcite-table-row-background-internal: var(--calcite-table-row-background, var(--calcite-ui-foreground-1)); + --calcite-table-row-border-color-internal: var(--calcite-table-row-border-color, transparent); + @apply contents; +} + +:host([disabled]) tr { + @apply opacity-disabled pointer-events-none; +} + +tr { + @apply table-row; + border-block-start: 1px solid var(--calcite-table-row-border-color, var(--calcite-ui-border-3)); + border-block-end: 1px solid var(--calcite-table-row-border-color-internal); + background-color: var(--calcite-table-row-background-internal); +} diff --git a/packages/calcite-components/src/components/table-row/table-row.tsx b/packages/calcite-components/src/components/table-row/table-row.tsx new file mode 100644 index 00000000000..3a43d53b545 --- /dev/null +++ b/packages/calcite-components/src/components/table-row/table-row.tsx @@ -0,0 +1,344 @@ +import { + Component, + Element, + Event, + EventEmitter, + h, + Host, + Listen, + Prop, + State, + VNode, + Watch, +} from "@stencil/core"; +import { LocalizedComponent, NumberingSystem, numberStringFormatter } from "../../utils/locale"; +import { Scale, SelectionMode } from "../interfaces"; +import { focusElementInGroup, FocusElementInGroupDestination } from "../../utils/dom"; +import { TableRowFocusEvent } from "../table/interfaces"; +import { CSS } from "./resources"; + +/** + * @slot - A slot for adding `calcite-table-cell` or `calcite-table-header` elements. + */ + +@Component({ + tag: "calcite-table-row", + styleUrl: "table-row.scss", + shadow: true, +}) +export class Table implements LocalizedComponent { + //-------------------------------------------------------------------------- + // + // Properties + // + //-------------------------------------------------------------------------- + + /** When `true`, interaction is prevented and the component is displayed with lower opacity. */ + @Prop({ reflect: true }) disabled = false; + + /** Specifies the size of the component. */ + @Prop({ reflect: true }) scale: Scale = "m"; + + /** Is the component selected. */ + @Prop({ reflect: true }) selected = false; + + /** + * @internal + */ + @Prop() position: number; + + /** + * @internal + */ + @Prop() numbered = false; + + /** + * @internal + */ + @Prop() numberingSystem: NumberingSystem; + + /** + * @internal + */ + @Prop() groupSeparator: boolean; + + /** + * @internal + */ + @Prop() tableHeadRow = false; + + /** + * @internal + */ + @Prop() selectionMode: Extract<"multiple" | "single" | "none", SelectionMode> = "none"; + + @Watch("selected") + @Watch("selectionMode") + @Watch("numbered") + handleCellChanges(): void { + if (this.rowCells?.length > 0) { + setTimeout(() => this.updateCells(), 60); + } + } + + //-------------------------------------------------------------------------- + // + // Lifecycle + // + //-------------------------------------------------------------------------- + + componentDidLoad(): void { + this.updateCells(); + } + + //-------------------------------------------------------------------------- + // + // Private Properties + // + //-------------------------------------------------------------------------- + + @Element() el: HTMLCalciteTableRowElement; + + private tableRowSlotEl: HTMLSlotElement; + + private tableRowEl: HTMLTableRowElement; + + private rowCells: (HTMLCalciteTableCellElement | HTMLCalciteTableHeaderElement)[] = []; + + @State() effectiveLocale = ""; + + // -------------------------------------------------------------------------- + // + // Events + // + // -------------------------------------------------------------------------- + + /** + * Fires when the selected state of the component changes. + */ + @Event({ cancelable: false }) calciteTableRowSelect: EventEmitter; + + /** @internal */ + @Event({ cancelable: false }) + calciteInternalTableRowFocusRequest: EventEmitter; + + //-------------------------------------------------------------------------- + // + // Event Listeners + // + //-------------------------------------------------------------------------- + + @Listen("calciteInternalTableRowFocusChange", { target: "document" }) + calciteInternalTableRowFocusChangeHandler(event: CustomEvent): void { + if ((event.target as Element).contains(this.el)) { + const position = event.detail.cellPosition; + const rowPosition = event.detail.rowPosition; + const destination = event.detail.destination; + + if (rowPosition === this.position) { + if (this.disabled) { + const deflectDirection = + destination === "last" ? "previous" : destination === "first" ? "next" : destination; + this.emitTableRowFocusRequest(position, this.position, deflectDirection); + return; + } + const cellPosition = (this.rowCells as any)?.find((_, index) => index + 1 === position); + if (cellPosition) { + cellPosition.setFocus(); + } + } + } + } + + keyDownHandler(event: KeyboardEvent): void { + const el = event.target as HTMLCalciteTableCellElement | HTMLCalciteTableHeaderElement; + const key = event.key; + const isControl = event.ctrlKey; + const cells = this.rowCells; + if (el?.matches("calcite-table-cell") || el.matches("calcite-table-header")) { + switch (key) { + case "ArrowUp": + this.emitTableRowFocusRequest(el.position, this.position, "previous"); + event.preventDefault(); + break; + case "ArrowDown": + this.emitTableRowFocusRequest(el.position, this.position, "next"); + event.preventDefault(); + break; + case "PageUp": + this.emitTableRowFocusRequest(el.position, this.position, "first"); + event.preventDefault(); + break; + case "PageDown": + this.emitTableRowFocusRequest(el.position, this.position, "last"); + event.preventDefault(); + break; + case "ArrowLeft": + focusElementInGroup(cells, el, "previous", false); + event.preventDefault(); + break; + case "ArrowRight": + focusElementInGroup(cells, el, "next", false); + event.preventDefault(); + break; + case "Home": + if (isControl) { + this.emitTableRowFocusRequest(1, this.position, "first"); + event.preventDefault(); + } else { + focusElementInGroup(cells, el, "first", false); + event.preventDefault(); + } + break; + case "End": + if (isControl) { + this.emitTableRowFocusRequest(this.rowCells?.length, this.position, "last"); + event.preventDefault(); + } else { + focusElementInGroup(cells, el, "last", false); + event.preventDefault(); + } + break; + } + } + } + + //-------------------------------------------------------------------------- + // + // Private Methods + // + //-------------------------------------------------------------------------- + + emitTableRowFocusRequest = ( + cellPosition: number, + rowPosition: number, + destination: FocusElementInGroupDestination + ): void => { + this.calciteInternalTableRowFocusRequest.emit({ + cellPosition, + rowPosition, + destination, + }); + }; + + updateCells = (): void => { + const slottedCells = this.tableRowSlotEl + ?.assignedElements({ flatten: true }) + .filter( + (el) => el?.matches("calcite-table-cell") || el?.matches("calcite-table-header") + ) as any; + + const renderedCells = Array.from( + this.tableRowEl?.querySelectorAll("calcite-table-header, calcite-table-cell") + ).filter( + (el: HTMLCalciteTableCellElement | HTMLCalciteTableHeaderElement) => + el.numberCell || el.selectionCell + ); + const cells = renderedCells ? renderedCells.concat(slottedCells) : slottedCells; + + if (cells.length > 0) { + cells?.forEach((cell, index) => { + cell.position = index + 1; + cell.parentRowPosition = this.position; + cell.parentRowIsSelected = this.selected; + cell.isInBody = !this.tableHeadRow; + }); + } + this.rowCells = cells || []; + }; + + handleSelectionOfRow = (): void => { + this.calciteTableRowSelect.emit(); + }; + + handleKeyboardSelection = (event: KeyboardEvent): void => { + if (event.key === "Enter" || event.key === " ") { + if (event.key === " ") { + event.preventDefault(); + } + this.handleSelectionOfRow(); + } + }; + + //-------------------------------------------------------------------------- + // + // Render Methods + // + //-------------------------------------------------------------------------- + + renderSelectionIcon(): VNode { + const icon = + this.selectionMode === "multiple" && this.selected + ? "check-square-f" + : this.selectionMode === "multiple" + ? "square" + : this.selected + ? "circle-f" + : "circle"; + + return ; + } + + renderSelectableCell(): VNode { + return this.tableHeadRow ? ( + + ) : ( + + {this.renderSelectionIcon()} + + ); + } + + renderNumberedCell(): VNode { + numberStringFormatter.numberFormatOptions = { + locale: this.effectiveLocale, + numberingSystem: this.numberingSystem, + useGrouping: this.groupSeparator, + }; + + const localizedPosition = numberStringFormatter.localize(this.position?.toString()); + return this.tableHeadRow ? ( + + ) : ( + + {localizedPosition} + + ); + } + + render(): VNode { + return ( + + this.keyDownHandler(event)} + // eslint-disable-next-line react/jsx-sort-props + ref={(el) => (this.tableRowEl = el)} + > + {this.numbered && this.renderNumberedCell()} + {this.selectionMode !== "none" && this.renderSelectableCell()} + (this.tableRowSlotEl = el as HTMLSlotElement)} + /> + + + ); + } +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_ar.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_ar.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_ar.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_bg.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_bg.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_bg.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_bs.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_bs.json new file mode 100644 index 00000000000..acc8187415b --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_bs.json @@ -0,0 +1,5 @@ +{ + "selected": "Row is selected", + "unselected": "Row is unselected", + "toggleSelection": "Toggle row selection" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_ca.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_ca.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_ca.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_cs.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_cs.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_cs.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_da.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_da.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_da.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_de.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_de.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_de.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_el.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_el.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_el.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_en.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_en.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_en.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_es.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_es.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_es.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_et.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_et.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_et.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_fi.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_fi.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_fi.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_fr.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_fr.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_fr.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_he.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_he.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_he.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_hr.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_hr.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_hr.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_hu.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_hu.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_hu.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_id.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_id.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_id.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_it.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_it.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_it.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_ja.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_ja.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_ja.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_ko.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_ko.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_ko.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_lt.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_lt.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_lt.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_lv.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_lv.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_lv.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_nl.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_nl.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_nl.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_no.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_no.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_no.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_pl.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_pl.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_pl.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_pt-BR.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_pt-BR.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_pt-BR.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_pt-PT.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_pt-PT.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_pt-PT.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_ro.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_ro.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_ro.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_ru.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_ru.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_ru.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_sk.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_sk.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_sk.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_sl.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_sl.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_sl.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_sr.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_sr.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_sr.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_sv.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_sv.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_sv.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_th.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_th.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_th.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_tr.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_tr.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_tr.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_uk.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_uk.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_uk.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_vi.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_vi.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_vi.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_zh-CN.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_zh-CN.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_zh-CN.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_zh-HK.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_zh-HK.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_zh-HK.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_zh-TW.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_zh-TW.json new file mode 100644 index 00000000000..24475f75324 --- /dev/null +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_zh-TW.json @@ -0,0 +1,6 @@ +{ + "selected": "Selected", + "clear": "Clear", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" +} diff --git a/packages/calcite-components/src/components/table/interfaces.ts b/packages/calcite-components/src/components/table/interfaces.ts new file mode 100644 index 00000000000..05052f96f61 --- /dev/null +++ b/packages/calcite-components/src/components/table/interfaces.ts @@ -0,0 +1,11 @@ +import { FocusElementInGroupDestination } from "../../utils/dom"; + +export interface TableRowFocusEvent { + cellPosition: number; + rowPosition: number; + destination: FocusElementInGroupDestination; +} + +export type TableAppearance = "bordered" | "simple" | "bordered-zebra" | "simple-zebra"; + +export type TableLayout = "auto" | "fixed"; diff --git a/packages/calcite-components/src/components/table/readme.md b/packages/calcite-components/src/components/table/readme.md new file mode 100644 index 00000000000..06294a8a158 --- /dev/null +++ b/packages/calcite-components/src/components/table/readme.md @@ -0,0 +1,50 @@ +# calcite-table + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| ---------------------- | ---------------- | ------------------------------------------------------------- | -------------------------------------------------------------- | ----------- | +| `appearance` | `appearance` | Specifies the appearance of the component. | `"bordered" \| "bordered-zebra" \| "simple" \| "simple-zebra"` | `"simple"` | +| `caption` _(required)_ | `caption` | Specifies an accessible title for the component. | `string` | `undefined` | +| `layout` | `layout` | Specifies the layout of the component. | `"auto" \| "fixed"` | `"auto"` | +| `numbered` | `numbered` | When `true`, displays the position of the row in numeric form | `boolean` | `false` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `selectedItems` | -- | Specifies the component's selected items. | `HTMLCalciteTableRowElement[]` | `[]` | +| `selectionMode` | `selection-mode` | Specifies the selection mode of the component. | `"multiple" \| "none" \| "single"` | `"none"` | + +## Events + +| Event | Description | Type | +| -------------------- | --------------------------------------------- | ------------------- | +| `calciteTableSelect` | Emits when the component's selection changes. | `CustomEvent` | + +## Slots + +| Slot | Description | +| ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | +| | A slot for adding `calcite-table-row` or nested `calcite-table` elements. Content placed here will be rendered in a `table-body` tag. | +| `"selection-actions"` | A slot for adding a `calcite-action` or other element to display when `selectionMode !== "none"` and `calcite-table-row` are selected. | +| `"selection-actions"` | A slot for adding a `calcite-action` or other element to display when `selectionMode !== "none"` and `calcite-table-row` are selected. | +| `"table-foot- A slot for adding `calcite-table-row`and nested`calcite-table-header` elements."` | | +| `"table-head- A slot for adding `calcite-table-row`and nested`calcite-table-header` elements."` | | + +## Dependencies + +### Depends on + +- [calcite-chip](../chip) + +### Graph + +```mermaid +graph TD; + calcite-table --> calcite-chip + calcite-chip --> calcite-icon + style calcite-table fill:#f9f,stroke:#333,stroke-width:4px +``` + +--- + +_Built with [StencilJS](https://stenciljs.com/)_ diff --git a/packages/calcite-components/src/components/table/resources.ts b/packages/calcite-components/src/components/table/resources.ts new file mode 100644 index 00000000000..511b67e9ee1 --- /dev/null +++ b/packages/calcite-components/src/components/table/resources.ts @@ -0,0 +1,13 @@ +export const CSS = { + bordered: "bordered", + simple: "simple", + borderedZebra: "bordered-zebra", + simpleZebra: "simple-zebra", + selectionArea: "selection-area", + paginationArea: "pagination-area", + container: "container", + tableContainer: "table-container", + tableFixed: "table-fixed-layout", + assistiveText: "assistive-text", + selectionActions: "selection-actions", +}; diff --git a/packages/calcite-components/src/components/table/table.e2e.ts b/packages/calcite-components/src/components/table/table.e2e.ts new file mode 100644 index 00000000000..c74ebfedd3a --- /dev/null +++ b/packages/calcite-components/src/components/table/table.e2e.ts @@ -0,0 +1,440 @@ +// import { newE2EPage } from "@stencil/core/testing"; +import { html } from "../../../support/formatting"; +import { accessible, renders, hidden, defaults, reflects } from "../../tests/commonTests"; + +describe("calcite-table", () => { + describe("renders", () => { + renders( + html` + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + `, + { display: "table" } + ); + }); + + describe("defaults", () => { + defaults("calcite-table", [ + { + propertyName: "appearance", + defaultValue: "simple", + }, + { + propertyName: "groupSeparator", + defaultValue: false, + }, + { + propertyName: "layout", + defaultValue: "auto", + }, + { + propertyName: "numbered", + defaultValue: false, + }, + { + propertyName: "pageSize", + defaultValue: 0, + }, + { + propertyName: "scale", + defaultValue: "m", + }, + { + propertyName: "selectionMode", + defaultValue: "none", + }, + ]); + }); + + describe("reflects", () => { + reflects("calcite-table", [ + { + propertyName: "appearance", + value: "simple", + }, + { + propertyName: "layout", + value: "auto", + }, + { + propertyName: "scale", + value: "m", + }, + { + propertyName: "selectionMode", + value: "none", + }, + ]); + }); + + describe("hidden", () => { + hidden("calcite-table"); + }); + + describe("accessible", () => { + describe("is accessible simple", () => { + accessible( + html` + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + ` + ); + }); + + describe("is accessible with selection mode multiple", () => { + accessible( + html` + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + ` + ); + }); + + describe("is accessible with selection mode multiple selected at load", () => { + accessible( + html` + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + ` + ); + }); + + describe("is accessible with selection mode single", () => { + accessible( + html` + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + ` + ); + }); + + describe("is accessible with numbered", () => { + accessible( + html` + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + ` + ); + }); + + describe("is accessible with numbered and selection", () => { + accessible( + html` + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + ` + ); + }); + describe("is accessible with pagination", () => { + accessible( + html` + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + ` + ); + }); + describe("is accessible with pagination and selection mode", () => { + accessible( + html` + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + ` + ); + }); + }); +}); + +describe("keyboard navigation", () => { + it("navigates correctly when no pagination present", async () => { + // + }); + it("navigates correctly when pagination present and first page displayed", async () => { + // + }); + it("navigates correctly when pagination present, and navigation to another page occurs", async () => { + // + }); + it("navigates correctly skipping disabled rows", async () => { + // + }); + it("navigates correctly skipping disabled rows when disabled rows in last position", async () => { + // + }); +}); + +describe("selection modes", () => { + it("allows one item to be selected in single selection mode with correct events", async () => { + // make sure rendered chip shows right number + // make sure event emit correct elements + }); + it("allows none, one, or multiple items to be selected in multiple selection mode with correct events", async () => { + // make sure rendered chip shows right number + // make sure event emit correct elements + }); + + it("correctly maintains selected items in count and event that have been navigated away from via pagination", async () => { + // make sure rendered chip shows right number + // make sure event emit correct elements + // change page + // make sure rendered chip shows right number + // make sure "out of view" chip visible and shows right number + // make sure event emit correct elements + // change page to third page + // make sure rendered chip shows right number + // make sure "out of view" chip visible and shows right number + // make sure event emit correct elements + // change page to third page + // make sure rendered chip shows right number + // make sure "out of view" chip visible and shows right number + // make sure event emit correct elements + }); +}); + +// page size updates re-create keyboard navigation arrays +// ensure keyboard navigation works after page size updates and more rows visible diff --git a/packages/calcite-components/src/components/table/table.scss b/packages/calcite-components/src/components/table/table.scss new file mode 100644 index 00000000000..0dcf220b357 --- /dev/null +++ b/packages/calcite-components/src/components/table/table.scss @@ -0,0 +1,86 @@ +:host([scale="s"]) { + --calcite-table-cell-padding-internal: 0.25rem; + font-size: var(--calcite-font-size--2); +} +:host([scale="m"]) { + --calcite-table-cell-padding-internal: 0.5rem; + font-size: var(--calcite-font-size--1); +} +:host([scale="l"]) { + --calcite-table-cell-padding-internal: 1rem; + font-size: var(--calcite-font-size-0); +} + +:host { + @apply table; +} + +.container { + max-inline-size: 100vw; + inline-size: 100%; +} + +.table-container { + @apply overflow-x-scroll whitespace-nowrap; +} + +.assistive-text { + @apply sr-only; +} + +table { + @apply w-full border-collapse; + overflow-x: scroll; + border-block-start: 1px solid var(--calcite-ui-border-3); + border-inline-start: 1px solid var(--calcite-ui-border-3); + border-block-end: 1px solid var(--calcite-ui-border-3); +} + +thead { + @apply sticky top-0 z-sticky; +} + +.table-fixed-layout { + @apply table-fixed; +} + +.bordered, +.bordered-zebra { + ::slotted(calcite-table-row) { + --calcite-table-row-border-color: var(--calcite-ui-border-3); + } +} + +.simple-zebra, +.bordered-zebra { + ::slotted(calcite-table-row:nth-child(2n + 1)) { + --calcite-table-row-background: var(--calcite-ui-foreground-2); + } +} + +.selection-area { + @apply flex flex-row items-center py-1; + border-block-start: 1px solid var(--calcite-ui-border-3); +} + +.selection-area calcite-chip:last-of-type { + margin-inline-end: 0.5rem; +} +.selection-area calcite-chip:last-of-type:not(:first-of-type) { + margin-inline-start: 0.5rem; +} +.pagination-area { + @apply flex flex-row py-2 w-full justify-center; + border-block-end: 1px solid var(--calcite-ui-border-3); +} + +.selection-actions { + @apply flex flex-row; + margin-inline-start: auto; +} + +.selection-area calcite-chip-group { + margin-inline-end: 1rem; +} + +@include base-component(); diff --git a/packages/calcite-components/src/components/table/table.stories.ts b/packages/calcite-components/src/components/table/table.stories.ts new file mode 100644 index 00000000000..04cda652dcb --- /dev/null +++ b/packages/calcite-components/src/components/table/table.stories.ts @@ -0,0 +1,701 @@ +import { storyFilters, boolean } from "../../../.storybook/helpers"; +import readme from "./readme.md"; +import { html } from "../../../support/formatting"; +import { modesDarkDefault } from "../../../.storybook/utils"; +import { number, select, text } from "@storybook/addon-knobs"; + +export default { + title: "Components/Table", + parameters: { + notes: readme, + }, + ...storyFilters(), +}; + +export const simple = (): string => + html` + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + `; + +export const simpleZebra_TestOnly = (): string => html` + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + +`; + +export const bordered_TestOnly = (): string => html` + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + +`; + +export const borderedZebra_TestOnly = (): string => html` + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + +`; + +export const alignments_TestOnly = (): string => html` + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + +`; + +export const displayedRows_TestOnly = (): string => html` + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + +`; + +export const numbered_TestOnly = (): string => html` + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + +`; + +export const richCellContent_TestOnly = (): string => html` + + + + + + + + + Chip + + cell + + + cell + + Chipbutton + chip + + + cell + chip + + chipchip + +`; + +export const layoutFixed_TestOnly = (): string => html` + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + +`; + +export const rowSpanAndColSpan_TestOnly = (): string => html` + + + + + + cell + cell + + + cell + cell + + + cell + cell + cell + cell + cell + + + cell + cell + cell + cell + cell + cell + + + cell + cell + cell + cell + +`; + +export const rowSpanAndColSpan2_TestOnly = (): string => html` + + + + + + cell + cell + + + cell + cell + + + cell + cell + cell + cell + cell + + + cell + cell + cell + cell + cell + cell + + + cell + cell + cell + cell + +`; + +export const rowSpanAndColSpan3_TestOnly = (): string => html` + + + + + + cell + cell + + + cell + cell + + + cell + cell + + + cell + cell + cell + + + cell + cell + cell + + + cell + cell + + + cell + cell + + + cell + cell + +`; + +export const singleSelection_TestOnly = (): string => html` + + + + + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + +`; + +export const selectionModeAndSelectedOnLoad_TestOnly = (): string => html` + + + + + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + +`; + +export const localized_TestOnly = (): string => html` + + + + + + + + + slot + + + + + + + + + cell + cell + cell + cell + cell + 34 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 53 + Happy + + Another thing + + cell + cell + cell + cell + cell + 25 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 120 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 987 + Happy + + Another thing + + +`; + +export const darkModeRTL_TestOnly = (): string => + html` + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + `; + +darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault }; diff --git a/packages/calcite-components/src/components/table/table.tsx b/packages/calcite-components/src/components/table/table.tsx new file mode 100644 index 00000000000..5bb41bfabaa --- /dev/null +++ b/packages/calcite-components/src/components/table/table.tsx @@ -0,0 +1,436 @@ +import { + Component, + Element, + Event, + EventEmitter, + h, + Host, + Listen, + Prop, + State, + VNode, + Watch, +} from "@stencil/core"; +import { Scale, SelectionMode } from "../interfaces"; +import { + LoadableComponent, + setComponentLoaded, + setUpLoadableComponent, +} from "../../utils/loadable"; +import { + connectMessages, + disconnectMessages, + setUpMessages, + T9nComponent, + updateMessages, +} from "../../utils/t9n"; +import { + connectLocalized, + disconnectLocalized, + LocalizedComponent, + numberStringFormatter, + NumberingSystem, +} from "../../utils/locale"; +import { TableAppearance, TableLayout, TableRowFocusEvent } from "./interfaces"; +import { CSS } from "./resources"; +import { TableMessages } from "./assets/table/t9n"; + +/** + * @slot - A slot for adding `calcite-table-row` or nested `calcite-table` elements. Content placed here will be rendered in a `table-body` tag. + * @slot table-head- A slot for adding `calcite-table-row` and nested `calcite-table-header` elements. + * @slot table-foot- A slot for adding `calcite-table-row` and nested `calcite-table-header` elements. + * @slot selection-actions - A slot for adding a `calcite-action` or other element to display when `selectionMode !== "none"` and `calcite-table-row` are selected. + */ + +@Component({ + tag: "calcite-table", + styleUrl: "table.scss", + shadow: true, + assetsDirs: ["assets"], +}) +export class Table implements LocalizedComponent, LoadableComponent, T9nComponent { + //-------------------------------------------------------------------------- + // + // Properties + // + //-------------------------------------------------------------------------- + + /** Specifies the appearance of the component. */ + @Prop({ reflect: true }) appearance: TableAppearance = "simple"; + + /** Specifies an accessible title for the component. */ + @Prop() caption!: string; + + /** When `true`, number values are displayed with a group separator corresponding to the language and country format. */ + @Prop({ reflect: true }) groupSeparator = false; + + /** Specifies the layout of the component. */ + @Prop({ reflect: true }) layout: TableLayout = "auto"; + + /** When `true`, displays the position of the row in numeric form */ + @Prop({ reflect: true }) numbered = false; + + /** Specifies the Unicode numeral system used by the component for localization. */ + @Prop({ reflect: true }) numberingSystem?: NumberingSystem; + + /** Specifies the page size of the component. When true, renders pagination. */ + @Prop({ reflect: true }) pageSize = 0; + + /** Specifies the size of the component. */ + @Prop({ reflect: true }) scale: Scale = "m"; + + /** Specifies the selection mode of the component. */ + @Prop({ reflect: true }) selectionMode: Extract<"none" | "multiple" | "single", SelectionMode> = + "none"; + + @Watch("pageSize") + @Watch("numbered") + @Watch("selectionMode") + @Watch("numberingSystem") + @Watch("groupSeparator") + handleNumberedChange(): void { + this.updateRows(); + } + + /** + * Specifies the component's selected items. + * + * @readonly + */ + @Prop({ mutable: true }) selectedItems: HTMLCalciteTableRowElement[] = []; + + /** + * Made into a prop for testing purposes only + * + * @internal + */ + // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module + @Prop({ mutable: true }) messages: TableMessages; + + /** + * Use this property to override individual strings used by the component. + */ + // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module + @Prop({ mutable: true }) messageOverrides: Partial; + + @Watch("messageOverrides") + onMessagesChange(): void { + /* wired up by t9n util */ + } + + // -------------------------------------------------------------------------- + // + // Private Properties + // + // -------------------------------------------------------------------------- + + @Element() el: HTMLCalciteTableElement; + + @State() colCount = 0; + + @State() currentPageStartRow = 1; + + @State() firstRowInPage = 1; + + @State() lastRowInPage: number; + + @State() selectedCount = 0; + + @State() defaultMessages: TableMessages; + + @State() effectiveLocale = ""; + + @Watch("effectiveLocale") + effectiveLocaleChange(): void { + updateMessages(this, this.effectiveLocale); + } + + private bodyRows: HTMLCalciteTableRowElement[]; + + private headRows: HTMLCalciteTableRowElement[]; + + private tableBodySlotEl: HTMLSlotElement; + + private tableHeadSlotEl: HTMLSlotElement; + + //-------------------------------------------------------------------------- + // + // Lifecycle + // + //-------------------------------------------------------------------------- + + async componentWillLoad(): Promise { + setUpLoadableComponent(this); + await setUpMessages(this); + this.updateRows(); + } + + componentDidLoad(): void { + setComponentLoaded(this); + } + + connectedCallback(): void { + connectLocalized(this); + connectMessages(this); + } + + disconnectedCallback(): void { + disconnectLocalized(this); + disconnectMessages(this); + } + //-------------------------------------------------------------------------- + // + // Events + // + //-------------------------------------------------------------------------- + + /** Emits when the component's selection changes. */ + @Event({ cancelable: false }) calciteTableSelect: EventEmitter; + + /** @internal */ + @Event({ cancelable: false }) + calciteInternalTableRowFocusChange: EventEmitter; + + //-------------------------------------------------------------------------- + // + // Event Listeners + // + //-------------------------------------------------------------------------- + + @Listen("calciteTableRowSelect") + calciteChipSelectListener(event: CustomEvent): void { + if (event.composedPath().includes(this.el)) { + this.setSelectedItems(event.target as HTMLCalciteTableRowElement); + } + } + + @Listen("calciteInternalTableRowFocusRequest") + calciteInternalTableRowFocusEvent(event: TableRowFocusEvent): void { + const cellPosition = event["detail"].cellPosition; + const rowPos = event["detail"].rowPosition; + const destination = event["detail"].destination; + const fromHeader = rowPos === 0; + let rowPosition: number; + + switch (destination) { + case "first": + rowPosition = 0; + break; + case "last": + rowPosition = this.lastRowInPage; + break; + case "next": + rowPosition = fromHeader ? this.firstRowInPage : rowPos + 1; + break; + case "previous": + rowPosition = fromHeader || rowPos <= this.firstRowInPage ? 0 : rowPos - 1; + break; + } + this.calciteInternalTableRowFocusChange.emit({ cellPosition, rowPosition, destination }); + } + // -------------------------------------------------------------------------- + // + // Private Methods + // + // -------------------------------------------------------------------------- + + updateRows = (): void => { + const headRows = this.tableHeadSlotEl + ?.assignedElements({ flatten: true }) + ?.filter((el) => el?.matches("calcite-table-row")) as HTMLCalciteTableRowElement[]; + + const bodyRows = this.tableBodySlotEl + ?.assignedElements({ flatten: true }) + ?.filter((el) => el?.matches("calcite-table-row")) as HTMLCalciteTableRowElement[]; + + const allRows = headRows?.length > 0 ? [...headRows, ...bodyRows] : bodyRows || []; + + allRows?.forEach((row) => { + const rowPosition = allRows.indexOf(row); + row.selectionMode = this.selectionMode; + row.numberingSystem = this.numberingSystem; + row.groupSeparator = this.groupSeparator; + row.numbered = this.numbered; + row.tableHeadRow = headRows?.includes(row); + row.position = rowPosition; + }); + this.headRows = headRows; + this.bodyRows = bodyRows; + const colCount = + this.headRows?.length > 0 + ? this.headRows[0]?.querySelectorAll("calcite-table-header")?.length + : 0; + this.colCount = colCount; + this.updateSelectedItems(); + this.paginateRows(); + }; + + handlePaginationChange = (event: CustomEvent): void => { + const requestedItem = (event.target as HTMLCalcitePaginationElement).startItem; + this.currentPageStartRow = requestedItem || 1; + this.updateRows(); + }; + + paginateRows = (): void => { + this.bodyRows?.forEach((row) => { + const inView = + row.position >= this.currentPageStartRow && + row.position < this.currentPageStartRow + this.pageSize; + row.style.display = this.pageSize === 0 || inView ? "contents" : "none"; + row.hidden = this.pageSize === 0 || inView; + }); + + const firstVisibleRow = this.bodyRows?.filter((row) => row.hidden)[0]?.position || 1; + this.firstRowInPage = firstVisibleRow; + this.lastRowInPage = + this.pageSize < 1 && this.bodyRows?.length > 0 + ? this.bodyRows[this.bodyRows?.length - 1].position + : firstVisibleRow + this.pageSize - 1; + }; + + updateSelectedItems = (emit?: boolean): void => { + const selectedItems = this.bodyRows?.filter((el) => el.selected); + this.selectedItems = selectedItems; + this.selectedCount = selectedItems?.length; + if (emit) { + this.calciteTableSelect.emit(); + } + }; + + handleDeselectAllRows = (): void => { + this.bodyRows?.forEach((row) => { + row.selected = false; + }); + this.updateSelectedItems(true); + }; + + setSelectedItems = (elToMatch?: HTMLCalciteTableRowElement): void => { + if (elToMatch?.tableHeadRow) { + this.bodyRows?.forEach((el) => (el.selected = this.selectedCount !== this.bodyRows?.length)); + } else if (elToMatch) { + this.bodyRows?.forEach((el) => { + const matchingEl = elToMatch === el; + switch (this.selectionMode) { + case "multiple": + if (matchingEl) { + el.selected = !el.selected; + } + break; + case "single": + el.selected = matchingEl ? !el.selected : false; + break; + } + }); + } + this.updateSelectedItems(true); + }; + + // -------------------------------------------------------------------------- + // + // Render Methods + // + // -------------------------------------------------------------------------- + + renderSelectionArea(): VNode { + numberStringFormatter.numberFormatOptions = { + locale: this.effectiveLocale, + numberingSystem: this.numberingSystem, + useGrouping: this.groupSeparator, + }; + + const outOfViewCount = this.selectedItems?.filter((el) => !el.hidden)?.length; + const localizedOutOfViewCount = numberStringFormatter.localize(outOfViewCount?.toString()); + const localizedSelectedCount = numberStringFormatter.localize(this.selectedCount?.toString()); + const selectionText = `${localizedSelectedCount} ${this.messages.selected}`; + const outOfViewText = `${localizedOutOfViewCount} ${this.messages.hiddenSelected}`; + + return ( +
+ 0 ? "brand" : "neutral"} value={selectionText}> + {selectionText} + + {outOfViewCount > 0 && ( + + {localizedOutOfViewCount} + + )} + {this.selectedCount > 0 && ( + + {this.messages.clear} + + )} +
+ +
+
+ ); + } + + renderPaginationArea(): VNode { + return ( +
+ this.handlePaginationChange(event)} + pageSize={this.pageSize} + startItem={1} + totalItems={this.bodyRows?.length} + /> +
+ ); + } + + renderTHead(): VNode { + return ( + + (this.tableHeadSlotEl = el as HTMLSlotElement)} + /> + + ); + } + + renderTBody(): VNode { + return ( + + (this.tableBodySlotEl = el as HTMLSlotElement)} + /> + + ); + } + + render(): VNode { + return ( + +
+ {this.selectionMode !== "none" && this.renderSelectionArea()} +
+ + {this.renderTHead()} + {this.renderTBody()} + +
{this.caption}
+
+ {this.pageSize > 0 && this.renderPaginationArea()} +
+ + ); + } +} diff --git a/packages/calcite-components/src/demos/table.html b/packages/calcite-components/src/demos/table.html new file mode 100644 index 00000000000..f393592ab53 --- /dev/null +++ b/packages/calcite-components/src/demos/table.html @@ -0,0 +1,2649 @@ + + + + + + + Table + + + + + + + +

Interactive

+
+
+ Appearance + + simple + simple-zebra + bordered + bordered-zebra + +
+
+ Selection Mode + + none + single + multiple + +
+
+ Scale + + S + M + L + +
+
+ Layout + + Auto + Fixed + +
+
+ pageSize + + + + Features + + Numbered + +
+
+ Themes + + Calcite (Default) + Mint Glacier + Ranger Station + Lavender Field + +
+
+ + + + + + + + + + + slot + + + + + + + + + cell + cell + cell + cell + cell + 34 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 53 + Happy + + Another thing + + cell + cell + cell + cell + cell + 25 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 120 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 987 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 120 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 987 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 53 + Happy + + Another thing + + cell + cell + cell + cell + cell + 25 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 120 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 987 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 120 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 987 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 53 + Happy + + Another thing + + cell + cell + cell + cell + cell + 25 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 120 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 987 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 120 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 987 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 120 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 987 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + + + +

Localized numbers

+ + + + + + + + + + + slot + + + + + + + + + cell + cell + cell + cell + cell + 34 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 53 + Happy + + Another thing + + cell + cell + cell + cell + cell + 25 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 120 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 987 + Happy + + Another thing + + + +

Simple

+ + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + +

Simple-zebra

+ + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + +

Bordered

+ + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + +

Bordered-zebra

+ + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + +

Various alignments

+ + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + +

Disabled rows

+ + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + +

Numbered

+ + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + +

With rich cell content

+ + + + + + + + + + Chip + + cell + + + cell + + Chipbutton + chip + + + cell + chip + + chipchip + + + +

Layout fixed

+ + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + +

Using row-span and col-span

+ + + + + + + cell + cell + + + cell + cell + + + cell + cell + cell + cell + cell + + + cell + cell + cell + cell + cell + cell + + + cell + cell + cell + cell + + + +

Using row-span and col-span and numbered

+ + + + + + + cell + cell + + + cell + cell + + + cell + cell + cell + cell + cell + + + cell + cell + cell + cell + cell + cell + + + cell + cell + cell + cell + + + +

Using row-span and col-span

+ + + + + + + cell + cell + + + cell + cell + + + cell + cell + + + cell + cell + cell + + + cell + cell + cell + + + cell + cell + + + cell + cell + + + cell + cell + + + +

Multiple headers using col-span

+ + + + + + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + +

Headers in rows

+ + + + cell + cell + cell + + + + cell + cell + cell + + + + cell + cell + cell + + + + cell + cell + cell + + + +

Headers in rows and table-head

+ + + + + + + + + + cell + cell + cell + + + + cell + cell + cell + + + + cell + cell + cell + + + + cell + cell + cell + + + +

selection-mode single

+ + + + + + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + +

selection-mode multiple and numbered including out of view

+ + + + + + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + +

selection-mode multiple with selected at load

+ + + + + + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + +

With selection-mode multiple and rich cell content

+ + + + + + + + + + Chip + + cell + + + cell + + Chipbutton + chip + + + cell + chip + + chipchip + + + +

Handle keyboard navigation with disabled rows in various places

+

+ Expect up / down to skip to next non-disabled - expect "page up / down / cntrl home + end" to focus next + available non-disabled +

+ + + + + + + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + + + + diff --git a/packages/calcite-components/src/index.html b/packages/calcite-components/src/index.html index a524524a26a..01e404d523f 100644 --- a/packages/calcite-components/src/index.html +++ b/packages/calcite-components/src/index.html @@ -425,6 +425,12 @@

Calcite demo

+
+ + + +
+
diff --git a/t9nmanifest.txt b/t9nmanifest.txt index 0fa58306416..38bb14869aa 100644 --- a/t9nmanifest.txt +++ b/t9nmanifest.txt @@ -34,6 +34,9 @@ packages\calcite-components\src\components\rating\assets\rating\t9n packages\calcite-components\src\components\scrim\assets\scrim\t9n packages\calcite-components\src\components\shell-panel\assets\shell-panel\t9n packages\calcite-components\src\components\tab-title\assets\tab-title\t9n +packages\calcite-components\src\components\table\assets\table\t9n +packages\calcite-components\src\components\table-cell\assets\table-cell\t9n +packages\calcite-components\src\components\table-header\assets\table-header\t9n packages\calcite-components\src\components\text-area\assets\text-area\t9n packages\calcite-components\src\components\time-picker\assets\time-picker\t9n packages\calcite-components\src\components\tip\assets\tip\t9n From b56ee54c1cb85b7c53f0f2acb2e1fd357d55a00a Mon Sep 17 00:00:00 2001 From: Adam Date: Fri, 25 Aug 2023 16:17:05 -0700 Subject: [PATCH 02/44] Clean up --- .../src/components/table-header/resources.ts | 1 + .../components/table-header/table-header.scss | 7 ++---- .../components/table-header/table-header.tsx | 5 ++++ .../src/components/table/table.scss | 24 ++++++++++--------- .../src/components/table/table.stories.ts | 2 +- 5 files changed, 22 insertions(+), 17 deletions(-) diff --git a/packages/calcite-components/src/components/table-header/resources.ts b/packages/calcite-components/src/components/table-header/resources.ts index ed10312b52e..6513673dfd8 100644 --- a/packages/calcite-components/src/components/table-header/resources.ts +++ b/packages/calcite-components/src/components/table-header/resources.ts @@ -5,4 +5,5 @@ export const CSS = { heading: "heading", description: "description", multipleSelectionCell: "multiple-selection-cell", + assistiveText: "assistive-text", }; diff --git a/packages/calcite-components/src/components/table-header/table-header.scss b/packages/calcite-components/src/components/table-header/table-header.scss index 9af3bc53b1e..2bfcd280c42 100644 --- a/packages/calcite-components/src/components/table-header/table-header.scss +++ b/packages/calcite-components/src/components/table-header/table-header.scss @@ -41,9 +41,7 @@ th.is-in-body { } .multiple-selection-cell { - cursor: pointer; - vertical-align: middle; - color: var(--calcite-ui-text-3); + @apply cursor-pointer align-middle text-color-3; } .number-cell, @@ -54,8 +52,7 @@ th.is-in-body { .number-cell calcite-icon, .selection-cell calcite-icon { - margin-inline: auto; - vertical-align: middle; + @apply ms-auto me-auto align-middle; } .heading { diff --git a/packages/calcite-components/src/components/table-header/table-header.tsx b/packages/calcite-components/src/components/table-header/table-header.tsx index b0bd0e3d1b1..4788df0e038 100644 --- a/packages/calcite-components/src/components/table-header/table-header.tsx +++ b/packages/calcite-components/src/components/table-header/table-header.tsx @@ -192,6 +192,11 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo {this.selectionCell && this.selectionMode === "multiple" && ( )} + {(this.selectionCell || this.numberCell) && ( + + {describedBy} + + )} ); diff --git a/packages/calcite-components/src/components/table/table.scss b/packages/calcite-components/src/components/table/table.scss index 0dcf220b357..81ad102d8ad 100644 --- a/packages/calcite-components/src/components/table/table.scss +++ b/packages/calcite-components/src/components/table/table.scss @@ -58,29 +58,31 @@ thead { } } +.selection-actions { + @apply flex flex-row; + margin-inline-start: auto; +} + .selection-area { @apply flex flex-row items-center py-1; border-block-start: 1px solid var(--calcite-ui-border-3); } .selection-area calcite-chip:last-of-type { - margin-inline-end: 0.5rem; + @apply me-2; } + .selection-area calcite-chip:last-of-type:not(:first-of-type) { - margin-inline-start: 0.5rem; -} -.pagination-area { - @apply flex flex-row py-2 w-full justify-center; - border-block-end: 1px solid var(--calcite-ui-border-3); + @apply ms-2; } -.selection-actions { - @apply flex flex-row; - margin-inline-start: auto; +.selection-area calcite-button { + @apply me-4; } -.selection-area calcite-chip-group { - margin-inline-end: 1rem; +.pagination-area { + @apply flex flex-row py-2 w-full justify-center; + border-block-end: 1px solid var(--calcite-ui-border-3); } @include base-component(); diff --git a/packages/calcite-components/src/components/table/table.stories.ts b/packages/calcite-components/src/components/table/table.stories.ts index 04cda652dcb..924eba6bcbd 100644 --- a/packages/calcite-components/src/components/table/table.stories.ts +++ b/packages/calcite-components/src/components/table/table.stories.ts @@ -671,7 +671,7 @@ export const localized_TestOnly = (): string => html``; export const darkModeRTL_TestOnly = (): string => - html` + html` From 7c0dfd8d89854f941c5a3a9bebc7d709e8a12348 Mon Sep 17 00:00:00 2001 From: Adam Date: Fri, 25 Aug 2023 19:06:07 -0700 Subject: [PATCH 03/44] Clean up --- .../assets/table-cell/t9n/messages.json | 9 ++- .../assets/table-cell/t9n/messages_ar.json | 9 ++- .../assets/table-cell/t9n/messages_bg.json | 9 ++- .../assets/table-cell/t9n/messages_bs.json | 9 ++- .../assets/table-cell/t9n/messages_ca.json | 9 ++- .../assets/table-cell/t9n/messages_cs.json | 9 ++- .../assets/table-cell/t9n/messages_da.json | 9 ++- .../assets/table-cell/t9n/messages_de.json | 9 ++- .../assets/table-cell/t9n/messages_el.json | 9 ++- .../assets/table-cell/t9n/messages_en.json | 9 ++- .../assets/table-cell/t9n/messages_es.json | 9 ++- .../assets/table-cell/t9n/messages_et.json | 9 ++- .../assets/table-cell/t9n/messages_fi.json | 9 ++- .../assets/table-cell/t9n/messages_fr.json | 9 ++- .../assets/table-cell/t9n/messages_he.json | 9 ++- .../assets/table-cell/t9n/messages_hr.json | 9 ++- .../assets/table-cell/t9n/messages_hu.json | 9 ++- .../assets/table-cell/t9n/messages_id.json | 9 ++- .../assets/table-cell/t9n/messages_it.json | 9 ++- .../assets/table-cell/t9n/messages_ja.json | 9 ++- .../assets/table-cell/t9n/messages_ko.json | 9 ++- .../assets/table-cell/t9n/messages_lt.json | 9 ++- .../assets/table-cell/t9n/messages_lv.json | 9 ++- .../assets/table-cell/t9n/messages_nl.json | 9 ++- .../assets/table-cell/t9n/messages_no.json | 9 ++- .../assets/table-cell/t9n/messages_pl.json | 9 ++- .../assets/table-cell/t9n/messages_pt-BR.json | 9 ++- .../assets/table-cell/t9n/messages_pt-PT.json | 9 ++- .../assets/table-cell/t9n/messages_ro.json | 9 ++- .../assets/table-cell/t9n/messages_ru.json | 9 ++- .../assets/table-cell/t9n/messages_sk.json | 9 ++- .../assets/table-cell/t9n/messages_sl.json | 9 ++- .../assets/table-cell/t9n/messages_sr.json | 9 ++- .../assets/table-cell/t9n/messages_sv.json | 9 ++- .../assets/table-cell/t9n/messages_th.json | 9 ++- .../assets/table-cell/t9n/messages_tr.json | 9 ++- .../assets/table-cell/t9n/messages_uk.json | 9 ++- .../assets/table-cell/t9n/messages_vi.json | 9 ++- .../assets/table-cell/t9n/messages_zh-CN.json | 9 ++- .../assets/table-cell/t9n/messages_zh-HK.json | 9 ++- .../assets/table-cell/t9n/messages_zh-TW.json | 9 ++- .../src/components/table-cell/table-cell.scss | 4 + .../src/components/table-cell/table-cell.tsx | 68 +++++++++++++--- .../assets/table-header/t9n/messages.json | 11 ++- .../assets/table-header/t9n/messages_ar.json | 11 ++- .../assets/table-header/t9n/messages_bg.json | 11 ++- .../assets/table-header/t9n/messages_bs.json | 11 ++- .../assets/table-header/t9n/messages_ca.json | 11 ++- .../assets/table-header/t9n/messages_cs.json | 11 ++- .../assets/table-header/t9n/messages_da.json | 11 ++- .../assets/table-header/t9n/messages_de.json | 11 ++- .../assets/table-header/t9n/messages_el.json | 11 ++- .../assets/table-header/t9n/messages_en.json | 11 ++- .../assets/table-header/t9n/messages_es.json | 11 ++- .../assets/table-header/t9n/messages_et.json | 11 ++- .../assets/table-header/t9n/messages_fi.json | 11 ++- .../assets/table-header/t9n/messages_fr.json | 11 ++- .../assets/table-header/t9n/messages_he.json | 11 ++- .../assets/table-header/t9n/messages_hr.json | 11 ++- .../assets/table-header/t9n/messages_hu.json | 11 ++- .../assets/table-header/t9n/messages_id.json | 11 ++- .../assets/table-header/t9n/messages_it.json | 11 ++- .../assets/table-header/t9n/messages_ja.json | 11 ++- .../assets/table-header/t9n/messages_ko.json | 11 ++- .../assets/table-header/t9n/messages_lt.json | 11 ++- .../assets/table-header/t9n/messages_lv.json | 11 ++- .../assets/table-header/t9n/messages_nl.json | 11 ++- .../assets/table-header/t9n/messages_no.json | 11 ++- .../assets/table-header/t9n/messages_pl.json | 11 ++- .../table-header/t9n/messages_pt-BR.json | 11 ++- .../table-header/t9n/messages_pt-PT.json | 11 ++- .../assets/table-header/t9n/messages_ro.json | 11 ++- .../assets/table-header/t9n/messages_ru.json | 11 ++- .../assets/table-header/t9n/messages_sk.json | 11 ++- .../assets/table-header/t9n/messages_sl.json | 11 ++- .../assets/table-header/t9n/messages_sr.json | 11 ++- .../assets/table-header/t9n/messages_sv.json | 11 ++- .../assets/table-header/t9n/messages_th.json | 11 ++- .../assets/table-header/t9n/messages_tr.json | 11 ++- .../assets/table-header/t9n/messages_uk.json | 11 ++- .../assets/table-header/t9n/messages_vi.json | 11 ++- .../table-header/t9n/messages_zh-CN.json | 11 ++- .../table-header/t9n/messages_zh-HK.json | 11 ++- .../table-header/t9n/messages_zh-TW.json | 11 ++- .../src/components/table-header/resources.ts | 1 + .../components/table-header/table-header.scss | 7 ++ .../components/table-header/table-header.tsx | 77 ++++++++++++++++--- .../src/components/table-row/table-row.tsx | 50 ++++++++---- .../table/assets/table/t9n/messages.json | 1 + .../table/assets/table/t9n/messages_ar.json | 1 + .../table/assets/table/t9n/messages_bg.json | 1 + .../table/assets/table/t9n/messages_bs.json | 8 +- .../table/assets/table/t9n/messages_ca.json | 1 + .../table/assets/table/t9n/messages_cs.json | 1 + .../table/assets/table/t9n/messages_da.json | 1 + .../table/assets/table/t9n/messages_de.json | 1 + .../table/assets/table/t9n/messages_el.json | 1 + .../table/assets/table/t9n/messages_en.json | 1 + .../table/assets/table/t9n/messages_es.json | 1 + .../table/assets/table/t9n/messages_et.json | 1 + .../table/assets/table/t9n/messages_fi.json | 1 + .../table/assets/table/t9n/messages_fr.json | 1 + .../table/assets/table/t9n/messages_he.json | 1 + .../table/assets/table/t9n/messages_hr.json | 1 + .../table/assets/table/t9n/messages_hu.json | 1 + .../table/assets/table/t9n/messages_id.json | 1 + .../table/assets/table/t9n/messages_it.json | 1 + .../table/assets/table/t9n/messages_ja.json | 1 + .../table/assets/table/t9n/messages_ko.json | 1 + .../table/assets/table/t9n/messages_lt.json | 1 + .../table/assets/table/t9n/messages_lv.json | 1 + .../table/assets/table/t9n/messages_nl.json | 1 + .../table/assets/table/t9n/messages_no.json | 1 + .../table/assets/table/t9n/messages_pl.json | 1 + .../assets/table/t9n/messages_pt-BR.json | 1 + .../assets/table/t9n/messages_pt-PT.json | 1 + .../table/assets/table/t9n/messages_ro.json | 1 + .../table/assets/table/t9n/messages_ru.json | 1 + .../table/assets/table/t9n/messages_sk.json | 1 + .../table/assets/table/t9n/messages_sl.json | 1 + .../table/assets/table/t9n/messages_sr.json | 1 + .../table/assets/table/t9n/messages_sv.json | 1 + .../table/assets/table/t9n/messages_th.json | 1 + .../table/assets/table/t9n/messages_tr.json | 1 + .../table/assets/table/t9n/messages_uk.json | 1 + .../table/assets/table/t9n/messages_vi.json | 1 + .../assets/table/t9n/messages_zh-CN.json | 1 + .../assets/table/t9n/messages_zh-HK.json | 1 + .../assets/table/t9n/messages_zh-TW.json | 1 + .../src/components/table/table.e2e.ts | 11 +++ .../src/components/table/table.tsx | 11 ++- 131 files changed, 692 insertions(+), 405 deletions(-) diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ar.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ar.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ar.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ar.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_bg.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_bg.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_bg.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_bg.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_bs.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_bs.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_bs.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_bs.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ca.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ca.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ca.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ca.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_cs.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_cs.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_cs.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_cs.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_da.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_da.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_da.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_da.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_de.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_de.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_de.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_de.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_el.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_el.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_el.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_el.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_en.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_en.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_en.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_en.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_es.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_es.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_es.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_es.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_et.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_et.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_et.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_et.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_fi.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_fi.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_fi.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_fi.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_fr.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_fr.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_fr.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_fr.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_he.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_he.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_he.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_he.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_hr.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_hr.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_hr.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_hr.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_hu.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_hu.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_hu.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_hu.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_id.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_id.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_id.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_id.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_it.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_it.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_it.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_it.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ja.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ja.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ja.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ja.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ko.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ko.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ko.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ko.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_lt.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_lt.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_lt.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_lt.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_lv.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_lv.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_lv.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_lv.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_nl.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_nl.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_nl.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_nl.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_no.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_no.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_no.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_no.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pl.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pl.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pl.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pl.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pt-BR.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pt-BR.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pt-BR.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pt-BR.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pt-PT.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pt-PT.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pt-PT.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pt-PT.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ro.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ro.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ro.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ro.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ru.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ru.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ru.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ru.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sk.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sk.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sk.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sk.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sl.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sl.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sl.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sl.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sr.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sr.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sr.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sr.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sv.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sv.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sv.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sv.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_th.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_th.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_th.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_th.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_tr.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_tr.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_tr.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_tr.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_uk.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_uk.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_uk.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_uk.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_vi.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_vi.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_vi.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_vi.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-CN.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-CN.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-CN.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-CN.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-HK.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-HK.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-HK.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-HK.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-TW.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-TW.json index acc8187415b..1a9672643cc 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-TW.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-TW.json @@ -1,5 +1,8 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "row": "row", + "selected": "selected", + "unselected": "unselected", + "selectionColumn": "Selection column", + "keyboardSelect": "Press Enter or Space to select row", + "keyboardDeselect": "Press Enter or Space to deselect row" } diff --git a/packages/calcite-components/src/components/table-cell/table-cell.scss b/packages/calcite-components/src/components/table-cell/table-cell.scss index b525edb2bf4..5bc5c230c7a 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.scss +++ b/packages/calcite-components/src/components/table-cell/table-cell.scss @@ -21,6 +21,10 @@ @apply text-end; } +.assistive-text { + @apply sr-only; +} + td { @apply align-middle text-color-1; background: var(--calcite-table-cell-background-internal); diff --git a/packages/calcite-components/src/components/table-cell/table-cell.tsx b/packages/calcite-components/src/components/table-cell/table-cell.tsx index ce0fbe502fc..1de02466786 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.tsx +++ b/packages/calcite-components/src/components/table-cell/table-cell.tsx @@ -13,7 +13,13 @@ import { T9nComponent, updateMessages, } from "../../utils/t9n"; -import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; +import { + connectLocalized, + disconnectLocalized, + LocalizedComponent, + NumberingSystem, + numberStringFormatter, +} from "../../utils/locale"; import { TableCellMessages } from "./assets/table-cell/t9n"; import { CSS } from "./resources"; @@ -73,6 +79,31 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp */ @Prop() parentRowIsSelected: boolean; + /** + * @internal + */ + @Prop() parentRowPosition: number; + + /** + * @internal + */ + @Prop() totalRowCount: number; + + /** + * @internal + */ + @Prop() selectedRowCount: number; + + /** + * @internal + */ + @Prop() numberingSystem: NumberingSystem; + + /** + * @internal + */ + @Prop() groupSeparator: boolean; + /** * Made into a prop for testing purposes only * @@ -147,6 +178,28 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp await componentFocusable(this); this.focusableEl.focus(); } + // -------------------------------------------------------------------------- + // + // Private Methods + // + // -------------------------------------------------------------------------- + + private localizeNumber = (position): string => { + numberStringFormatter.numberFormatOptions = { + locale: this.effectiveLocale, + numberingSystem: this.numberingSystem, + useGrouping: this.groupSeparator, + }; + + return numberStringFormatter.localize(position?.toString()); + }; + + private getScreenReaderText(): string { + const localizedNumber = this.localizeNumber(this.parentRowPosition); + const selectedText = `${this.messages.row} ${localizedNumber} ${this.messages.selected} ${this.messages.keyboardDeselect}`; + const unselectedText = `${this.messages.row} ${localizedNumber} ${this.messages.unselected} ${this.messages.keyboardSelect}`; + return this.parentRowIsSelected ? selectedText : unselectedText; + } //-------------------------------------------------------------------------- // @@ -155,12 +208,9 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp //-------------------------------------------------------------------------- render(): VNode { - const prefix = this.parentRowIsSelected ? this.messages.selected : this.messages.unselected; - const describedBy = this.selectionCell ? `${prefix}. ${this.messages.toggleSelection}` : ""; return ( (this.focusableEl = el as HTMLDivElement)} > - {/* - - {this.value} - - */} + {this.selectionCell && ( + + {this.getScreenReaderText()} + + )} diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ar.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ar.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ar.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ar.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_bg.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_bg.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_bg.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_bg.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_bs.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_bs.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_bs.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_bs.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ca.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ca.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ca.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ca.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_cs.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_cs.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_cs.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_cs.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_da.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_da.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_da.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_da.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_de.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_de.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_de.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_de.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_el.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_el.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_el.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_el.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_en.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_en.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_en.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_en.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_es.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_es.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_es.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_es.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_et.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_et.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_et.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_et.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_fi.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_fi.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_fi.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_fi.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_fr.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_fr.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_fr.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_fr.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_he.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_he.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_he.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_he.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_hr.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_hr.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_hr.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_hr.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_hu.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_hu.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_hu.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_hu.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_id.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_id.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_id.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_id.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_it.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_it.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_it.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_it.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ja.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ja.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ja.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ja.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ko.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ko.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ko.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ko.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_lt.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_lt.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_lt.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_lt.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_lv.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_lv.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_lv.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_lv.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_nl.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_nl.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_nl.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_nl.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_no.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_no.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_no.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_no.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pl.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pl.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pl.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pl.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pt-BR.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pt-BR.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pt-BR.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pt-BR.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pt-PT.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pt-PT.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pt-PT.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pt-PT.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ro.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ro.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ro.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ro.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ru.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ru.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ru.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ru.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sk.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sk.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sk.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sk.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sl.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sl.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sl.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sl.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sr.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sr.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sr.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sr.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sv.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sv.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sv.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sv.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_th.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_th.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_th.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_th.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_tr.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_tr.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_tr.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_tr.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_uk.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_uk.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_uk.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_uk.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_vi.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_vi.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_vi.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_vi.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-CN.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-CN.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-CN.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-CN.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-HK.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-HK.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-HK.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-HK.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-TW.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-TW.json index d19978b68e3..f62fb4dc6a3 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-TW.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-TW.json @@ -1,9 +1,8 @@ { - "selected": "Column is selected", - "selectAll": "Select all", - "selectNone": "Deselect all", - "sortAscending": "Column is sorted ascending", - "sortDescending": "Column is sorted descending", - "sortNone": "Column is not sorted", + "selected": "selected", + "selectionColumn": "Selection column", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "all": "all", "rowNumber": "Row number" } diff --git a/packages/calcite-components/src/components/table-header/resources.ts b/packages/calcite-components/src/components/table-header/resources.ts index 6513673dfd8..e0d24984a05 100644 --- a/packages/calcite-components/src/components/table-header/resources.ts +++ b/packages/calcite-components/src/components/table-header/resources.ts @@ -6,4 +6,5 @@ export const CSS = { description: "description", multipleSelectionCell: "multiple-selection-cell", assistiveText: "assistive-text", + active: "active", }; diff --git a/packages/calcite-components/src/components/table-header/table-header.scss b/packages/calcite-components/src/components/table-header/table-header.scss index 2bfcd280c42..dfc756a8051 100644 --- a/packages/calcite-components/src/components/table-header/table-header.scss +++ b/packages/calcite-components/src/components/table-header/table-header.scss @@ -21,6 +21,10 @@ @apply text-end; } +.assistive-text { + @apply sr-only; +} + th { @apply text-color-1 focus-base text-start font-medium; border-inline-end: 1px solid var(--calcite-table-header-border-color-internal); @@ -50,6 +54,9 @@ th.is-in-body { min-inline-size: 2rem; } +.selection-cell calcite-icon.active { + color: var(--calcite-ui-brand); +} .number-cell calcite-icon, .selection-cell calcite-icon { @apply ms-auto me-auto align-middle; diff --git a/packages/calcite-components/src/components/table-header/table-header.tsx b/packages/calcite-components/src/components/table-header/table-header.tsx index 4788df0e038..3914f8eb531 100644 --- a/packages/calcite-components/src/components/table-header/table-header.tsx +++ b/packages/calcite-components/src/components/table-header/table-header.tsx @@ -12,7 +12,13 @@ import { T9nComponent, updateMessages, } from "../../utils/t9n"; -import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; +import { + connectLocalized, + disconnectLocalized, + LocalizedComponent, + NumberingSystem, + numberStringFormatter, +} from "../../utils/locale"; import { Alignment, Scale, SelectionMode } from "../interfaces"; import { TableHeaderMessages } from "./assets/table-header/t9n"; import { CSS } from "./resources"; @@ -73,6 +79,31 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo */ @Prop() isInBody = false; + /** + * @internal + */ + @Prop() parentRowPosition: number; + + /** + * @internal + */ + @Prop() totalRowCount: number; + + /** + * @internal + */ + @Prop() selectedRowCount: number; + + /** + * @internal + */ + @Prop() numberingSystem: NumberingSystem; + + /** + * @internal + */ + @Prop() groupSeparator: boolean; + /** * Made into a prop for testing purposes only * @@ -148,6 +179,37 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo this.focusableEl.focus(); } + // -------------------------------------------------------------------------- + // + // Private Methods + // + // -------------------------------------------------------------------------- + + private localizeNumber = (position): string => { + numberStringFormatter.numberFormatOptions = { + locale: this.effectiveLocale, + numberingSystem: this.numberingSystem, + useGrouping: this.groupSeparator, + }; + + return numberStringFormatter.localize(position?.toString()); + }; + + private getScreenReaderText(): string { + const localizedNumber = this.localizeNumber(this.selectedRowCount); + let text; + if (this.numberCell) { + return this.messages.rowNumber; + } else if (this.selectionMode === "single") { + text = `${this.messages.selectionColumn}. ${localizedNumber} ${this.messages.selected}`; + } else if (this.totalRowCount === this.selectedRowCount) { + text = `${this.messages.selectionColumn}. ${this.messages.all} ${localizedNumber} ${this.messages.selected} ${this.messages.keyboardDeselectAll}`; + } else { + text = `${this.messages.selectionColumn}. ${localizedNumber} ${this.messages.selected} ${this.messages.keyboardSelectAll}`; + } + return text; + } + //-------------------------------------------------------------------------- // // Render Methods @@ -163,16 +225,13 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo ? "row" : "col"; - const describedBy = this.selectionCell - ? this.messages.selectAll - : this.numberCell - ? this.messages.rowNumber - : ""; + const allSelected = this.selectedRowCount === this.totalRowCount; + const selectionIcon = allSelected ? "check-square-f" : "check-square"; + return ( {this.heading}
} {this.description &&
{this.description}
} {this.selectionCell && this.selectionMode === "multiple" && ( - + )} {(this.selectionCell || this.numberCell) && ( - {describedBy} + {this.getScreenReaderText()} )} diff --git a/packages/calcite-components/src/components/table-row/table-row.tsx b/packages/calcite-components/src/components/table-row/table-row.tsx index 3a43d53b545..f3eaa89b9cd 100644 --- a/packages/calcite-components/src/components/table-row/table-row.tsx +++ b/packages/calcite-components/src/components/table-row/table-row.tsx @@ -67,6 +67,16 @@ export class Table implements LocalizedComponent { */ @Prop() tableHeadRow = false; + /** + * @internal + */ + @Prop() totalRowCount: number; + + /** + * @internal + */ + @Prop() selectedRowCount: number; + /** * @internal */ @@ -74,8 +84,11 @@ export class Table implements LocalizedComponent { @Watch("selected") @Watch("selectionMode") + @Watch("selectedRowCount") + @Watch("totalRowCount") @Watch("numbered") handleCellChanges(): void { + // todo wait until the selection or number cell are present if (this.rowCells?.length > 0) { setTimeout(() => this.updateCells(), 60); } @@ -107,6 +120,8 @@ export class Table implements LocalizedComponent { @State() effectiveLocale = ""; + @State() localizedPosition = ""; + // -------------------------------------------------------------------------- // // Events @@ -209,7 +224,17 @@ export class Table implements LocalizedComponent { // //-------------------------------------------------------------------------- - emitTableRowFocusRequest = ( + private localizeNumber = (position): string => { + numberStringFormatter.numberFormatOptions = { + locale: this.effectiveLocale, + numberingSystem: this.numberingSystem, + useGrouping: this.groupSeparator, + }; + + return numberStringFormatter.localize(position?.toString()); + }; + + private emitTableRowFocusRequest = ( cellPosition: number, rowPosition: number, destination: FocusElementInGroupDestination @@ -221,7 +246,8 @@ export class Table implements LocalizedComponent { }); }; - updateCells = (): void => { + private updateCells = (): void => { + this.localizedPosition = this.localizeNumber(this.position); const slottedCells = this.tableRowSlotEl ?.assignedElements({ flatten: true }) .filter( @@ -247,11 +273,11 @@ export class Table implements LocalizedComponent { this.rowCells = cells || []; }; - handleSelectionOfRow = (): void => { + private handleSelectionOfRow = (): void => { this.calciteTableRowSelect.emit(); }; - handleKeyboardSelection = (event: KeyboardEvent): void => { + private handleKeyboardSelection = (event: KeyboardEvent): void => { if (event.key === "Enter" || event.key === " ") { if (event.key === " ") { event.preventDefault(); @@ -285,9 +311,10 @@ export class Table implements LocalizedComponent { alignment="center" onClick={this.selectionMode === "multiple" && this.handleSelectionOfRow} onKeyDown={this.selectionMode === "multiple" && this.handleKeyboardSelection} - position={0} + selectedRowCount={this.selectedRowCount} selectionCell selectionMode={this.selectionMode} + totalRowCount={this.totalRowCount} /> ) : ( {this.renderSelectionIcon()} @@ -304,18 +333,11 @@ export class Table implements LocalizedComponent { } renderNumberedCell(): VNode { - numberStringFormatter.numberFormatOptions = { - locale: this.effectiveLocale, - numberingSystem: this.numberingSystem, - useGrouping: this.groupSeparator, - }; - - const localizedPosition = numberStringFormatter.localize(this.position?.toString()); return this.tableHeadRow ? ( ) : ( - - {localizedPosition} + + {this.localizedPosition} ); } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_ar.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_ar.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_ar.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_ar.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_bg.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_bg.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_bg.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_bg.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_bs.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_bs.json index acc8187415b..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_bs.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_bs.json @@ -1,5 +1,7 @@ { - "selected": "Row is selected", - "unselected": "Row is unselected", - "toggleSelection": "Toggle row selection" + "selected": "Selected", + "clear": "Clear", + "row": "Row", + "page": "Page", + "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_ca.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_ca.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_ca.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_ca.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_cs.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_cs.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_cs.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_cs.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_da.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_da.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_da.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_da.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_de.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_de.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_de.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_de.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_el.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_el.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_el.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_el.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_en.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_en.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_en.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_en.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_es.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_es.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_es.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_es.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_et.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_et.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_et.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_et.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_fi.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_fi.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_fi.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_fi.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_fr.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_fr.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_fr.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_fr.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_he.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_he.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_he.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_he.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_hr.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_hr.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_hr.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_hr.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_hu.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_hu.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_hu.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_hu.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_id.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_id.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_id.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_id.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_it.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_it.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_it.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_it.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_ja.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_ja.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_ja.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_ja.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_ko.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_ko.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_ko.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_ko.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_lt.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_lt.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_lt.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_lt.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_lv.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_lv.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_lv.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_lv.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_nl.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_nl.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_nl.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_nl.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_no.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_no.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_no.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_no.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_pl.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_pl.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_pl.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_pl.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_pt-BR.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_pt-BR.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_pt-BR.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_pt-BR.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_pt-PT.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_pt-PT.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_pt-PT.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_pt-PT.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_ro.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_ro.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_ro.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_ro.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_ru.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_ru.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_ru.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_ru.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_sk.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_sk.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_sk.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_sk.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_sl.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_sl.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_sl.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_sl.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_sr.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_sr.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_sr.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_sr.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_sv.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_sv.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_sv.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_sv.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_th.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_th.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_th.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_th.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_tr.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_tr.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_tr.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_tr.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_uk.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_uk.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_uk.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_uk.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_vi.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_vi.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_vi.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_vi.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_zh-CN.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_zh-CN.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_zh-CN.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_zh-CN.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_zh-HK.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_zh-HK.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_zh-HK.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_zh-HK.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_zh-TW.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_zh-TW.json index 24475f75324..c078c9b7831 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_zh-TW.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_zh-TW.json @@ -1,6 +1,7 @@ { "selected": "Selected", "clear": "Clear", + "row": "Row", "page": "Page", "hiddenSelected": "Rows selected but out of view" } diff --git a/packages/calcite-components/src/components/table/table.e2e.ts b/packages/calcite-components/src/components/table/table.e2e.ts index c74ebfedd3a..9ff72e47470 100644 --- a/packages/calcite-components/src/components/table/table.e2e.ts +++ b/packages/calcite-components/src/components/table/table.e2e.ts @@ -418,6 +418,16 @@ describe("selection modes", () => { // make sure event emit correct elements }); + it("correctly emits 0 items after user clears selection via clear button", async () => { + // make sure rendered chip shows right number + // make sure event emit correct elements + }); + + it("correctly emits after user clears selection via select all button", async () => { + // make sure rendered chip shows right number + // make sure event emit correct elements + }); + it("correctly maintains selected items in count and event that have been navigated away from via pagination", async () => { // make sure rendered chip shows right number // make sure event emit correct elements @@ -438,3 +448,4 @@ describe("selection modes", () => { // page size updates re-create keyboard navigation arrays // ensure keyboard navigation works after page size updates and more rows visible +// correct assistive hidden text rendered for : table header number cell, table header single select, table header multiple select diff --git a/packages/calcite-components/src/components/table/table.tsx b/packages/calcite-components/src/components/table/table.tsx index 5bb41bfabaa..16d9988478b 100644 --- a/packages/calcite-components/src/components/table/table.tsx +++ b/packages/calcite-components/src/components/table/table.tsx @@ -145,6 +145,8 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen updateMessages(this, this.effectiveLocale); } + private allRows: HTMLCalciteTableRowElement[]; + private bodyRows: HTMLCalciteTableRowElement[]; private headRows: HTMLCalciteTableRowElement[]; @@ -249,6 +251,7 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen const rowPosition = allRows.indexOf(row); row.selectionMode = this.selectionMode; row.numberingSystem = this.numberingSystem; + row.totalRowCount = this.bodyRows?.length; row.groupSeparator = this.groupSeparator; row.numbered = this.numbered; row.tableHeadRow = headRows?.includes(row); @@ -256,6 +259,8 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen }); this.headRows = headRows; this.bodyRows = bodyRows; + this.allRows = allRows; + const colCount = this.headRows?.length > 0 ? this.headRows[0]?.querySelectorAll("calcite-table-header")?.length @@ -292,6 +297,10 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen const selectedItems = this.bodyRows?.filter((el) => el.selected); this.selectedItems = selectedItems; this.selectedCount = selectedItems?.length; + this.allRows?.forEach((row) => { + row.selectedRowCount = this.selectedCount; + }); + if (emit) { this.calciteTableSelect.emit(); } @@ -360,7 +369,7 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen kind="neutral" onClick={this.handleDeselectAllRows} round - title={`${this.messages.clear} ${selectionText}`} + title={`${this.messages.clear} ${selectionText} ${this.messages.row}`} > {this.messages.clear} From da96f91e0d2df19c999738c9184d394460e47c59 Mon Sep 17 00:00:00 2001 From: Adam Date: Fri, 25 Aug 2023 19:24:55 -0700 Subject: [PATCH 04/44] Clean up --- .../src/components/table-cell/table-cell.tsx | 21 ++++++----------- .../components/table-header/table-header.tsx | 23 +++++++------------ .../src/components/table-row/table-row.tsx | 7 +++--- 3 files changed, 19 insertions(+), 32 deletions(-) diff --git a/packages/calcite-components/src/components/table-cell/table-cell.tsx b/packages/calcite-components/src/components/table-cell/table-cell.tsx index 1de02466786..0732d8abdd2 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.tsx +++ b/packages/calcite-components/src/components/table-cell/table-cell.tsx @@ -18,7 +18,6 @@ import { disconnectLocalized, LocalizedComponent, NumberingSystem, - numberStringFormatter, } from "../../utils/locale"; import { TableCellMessages } from "./assets/table-cell/t9n"; import { CSS } from "./resources"; @@ -84,6 +83,11 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp */ @Prop() parentRowPosition: number; + /** + * @internal + */ + @Prop() parentRowPositionLocalized: string; + /** * @internal */ @@ -184,20 +188,9 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp // // -------------------------------------------------------------------------- - private localizeNumber = (position): string => { - numberStringFormatter.numberFormatOptions = { - locale: this.effectiveLocale, - numberingSystem: this.numberingSystem, - useGrouping: this.groupSeparator, - }; - - return numberStringFormatter.localize(position?.toString()); - }; - private getScreenReaderText(): string { - const localizedNumber = this.localizeNumber(this.parentRowPosition); - const selectedText = `${this.messages.row} ${localizedNumber} ${this.messages.selected} ${this.messages.keyboardDeselect}`; - const unselectedText = `${this.messages.row} ${localizedNumber} ${this.messages.unselected} ${this.messages.keyboardSelect}`; + const selectedText = `${this.messages.row} ${this.parentRowPositionLocalized} ${this.messages.selected} ${this.messages.keyboardDeselect}`; + const unselectedText = `${this.messages.row} ${this.parentRowPositionLocalized} ${this.messages.unselected} ${this.messages.keyboardSelect}`; return this.parentRowIsSelected ? selectedText : unselectedText; } diff --git a/packages/calcite-components/src/components/table-header/table-header.tsx b/packages/calcite-components/src/components/table-header/table-header.tsx index 3914f8eb531..7dd588cb9f2 100644 --- a/packages/calcite-components/src/components/table-header/table-header.tsx +++ b/packages/calcite-components/src/components/table-header/table-header.tsx @@ -17,7 +17,6 @@ import { disconnectLocalized, LocalizedComponent, NumberingSystem, - numberStringFormatter, } from "../../utils/locale"; import { Alignment, Scale, SelectionMode } from "../interfaces"; import { TableHeaderMessages } from "./assets/table-header/t9n"; @@ -94,6 +93,11 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo */ @Prop() selectedRowCount: number; + /** + * @internal + */ + @Prop() selectedRowCountLocalized: string; + /** * @internal */ @@ -185,27 +189,16 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo // // -------------------------------------------------------------------------- - private localizeNumber = (position): string => { - numberStringFormatter.numberFormatOptions = { - locale: this.effectiveLocale, - numberingSystem: this.numberingSystem, - useGrouping: this.groupSeparator, - }; - - return numberStringFormatter.localize(position?.toString()); - }; - private getScreenReaderText(): string { - const localizedNumber = this.localizeNumber(this.selectedRowCount); let text; if (this.numberCell) { return this.messages.rowNumber; } else if (this.selectionMode === "single") { - text = `${this.messages.selectionColumn}. ${localizedNumber} ${this.messages.selected}`; + text = `${this.messages.selectionColumn}. ${this.selectedRowCountLocalized} ${this.messages.selected}`; } else if (this.totalRowCount === this.selectedRowCount) { - text = `${this.messages.selectionColumn}. ${this.messages.all} ${localizedNumber} ${this.messages.selected} ${this.messages.keyboardDeselectAll}`; + text = `${this.messages.selectionColumn}. ${this.messages.all} ${this.selectedRowCountLocalized} ${this.messages.selected} ${this.messages.keyboardDeselectAll}`; } else { - text = `${this.messages.selectionColumn}. ${localizedNumber} ${this.messages.selected} ${this.messages.keyboardSelectAll}`; + text = `${this.messages.selectionColumn}. ${this.selectedRowCountLocalized} ${this.messages.selected} ${this.messages.keyboardSelectAll}`; } return text; } diff --git a/packages/calcite-components/src/components/table-row/table-row.tsx b/packages/calcite-components/src/components/table-row/table-row.tsx index f3eaa89b9cd..51f98c4dbff 100644 --- a/packages/calcite-components/src/components/table-row/table-row.tsx +++ b/packages/calcite-components/src/components/table-row/table-row.tsx @@ -231,7 +231,7 @@ export class Table implements LocalizedComponent { useGrouping: this.groupSeparator, }; - return numberStringFormatter.localize(position?.toString()); + return numberStringFormatter.localize(position.toString()); }; private emitTableRowFocusRequest = ( @@ -248,6 +248,7 @@ export class Table implements LocalizedComponent { private updateCells = (): void => { this.localizedPosition = this.localizeNumber(this.position); + const slottedCells = this.tableRowSlotEl ?.assignedElements({ flatten: true }) .filter( @@ -266,7 +267,6 @@ export class Table implements LocalizedComponent { cells?.forEach((cell, index) => { cell.position = index + 1; cell.parentRowPosition = this.position; - cell.parentRowIsSelected = this.selected; cell.isInBody = !this.tableHeadRow; }); } @@ -312,6 +312,7 @@ export class Table implements LocalizedComponent { onClick={this.selectionMode === "multiple" && this.handleSelectionOfRow} onKeyDown={this.selectionMode === "multiple" && this.handleKeyboardSelection} selectedRowCount={this.selectedRowCount} + selectedRowCountLocalized={this.localizeNumber(this.selectedRowCount)} selectionCell selectionMode={this.selectionMode} totalRowCount={this.totalRowCount} @@ -322,10 +323,10 @@ export class Table implements LocalizedComponent { onClick={this.handleSelectionOfRow} onKeyDown={this.handleKeyboardSelection} parentRowIsSelected={this.selected} + parentRowPositionLocalized={this.localizeNumber(this.position)} selectedRowCount={this.selectedRowCount} selectionCell totalRowCount={this.totalRowCount} - value="Selection cell" > {this.renderSelectionIcon()} From ede3338c7558f709d25ae886c01dea7d851b2f1b Mon Sep 17 00:00:00 2001 From: Adam Date: Fri, 25 Aug 2023 23:09:38 -0700 Subject: [PATCH 05/44] Clean up --- .../src/components/table-cell/table-cell.scss | 2 +- .../src/components/table-cell/table-cell.tsx | 18 +--- .../components/table-header/table-header.tsx | 86 +++++++------------ .../src/components/table-row/table-row.scss | 4 + .../src/components/table-row/table-row.tsx | 82 ++++++++---------- .../src/components/table/interfaces.ts | 1 + .../src/components/table/table.e2e.ts | 1 + .../src/components/table/table.scss | 6 +- .../src/components/table/table.tsx | 76 +++++++++++----- .../calcite-components/src/demos/table.html | 70 +++++++-------- 10 files changed, 171 insertions(+), 175 deletions(-) diff --git a/packages/calcite-components/src/components/table-cell/table-cell.scss b/packages/calcite-components/src/components/table-cell/table-cell.scss index 5bc5c230c7a..a604e5b3844 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.scss +++ b/packages/calcite-components/src/components/table-cell/table-cell.scss @@ -53,7 +53,7 @@ td { inset-inline-start: 2rem; } -.selected-cell { +.selected-cell:not(.number-cell) { --calcite-table-cell-background: var(--calcite-ui-foreground-current); background: var(--calcite-ui-foreground-current); } diff --git a/packages/calcite-components/src/components/table-cell/table-cell.tsx b/packages/calcite-components/src/components/table-cell/table-cell.tsx index 0732d8abdd2..4a4ccbbbaa6 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.tsx +++ b/packages/calcite-components/src/components/table-cell/table-cell.tsx @@ -88,16 +88,6 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp */ @Prop() parentRowPositionLocalized: string; - /** - * @internal - */ - @Prop() totalRowCount: number; - - /** - * @internal - */ - @Prop() selectedRowCount: number; - /** * @internal */ @@ -143,7 +133,7 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp updateMessages(this, this.effectiveLocale); } - private focusableEl: HTMLDivElement; + private tdEl: HTMLDivElement; // -------------------------------------------------------------------------- // @@ -176,11 +166,11 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp // // -------------------------------------------------------------------------- - /** Sets focus on the component's first focusable element. */ + /** Sets focus on the component. */ @Method() async setFocus(): Promise { await componentFocusable(this); - this.focusableEl.focus(); + this.tdEl.focus(); } // -------------------------------------------------------------------------- // @@ -214,7 +204,7 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp rowSpan={this.rowSpan} tabIndex={0} // eslint-disable-next-line react/jsx-sort-props - ref={(el) => (this.focusableEl = el as HTMLDivElement)} + ref={(el) => (this.tdEl = el as HTMLDivElement)} > {this.selectionCell && ( diff --git a/packages/calcite-components/src/components/table-header/table-header.tsx b/packages/calcite-components/src/components/table-header/table-header.tsx index 7dd588cb9f2..ea885bc20c0 100644 --- a/packages/calcite-components/src/components/table-header/table-header.tsx +++ b/packages/calcite-components/src/components/table-header/table-header.tsx @@ -53,60 +53,38 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo /** Specifies the number of rows the component should span. */ @Prop({ reflect: true }) rowSpan: number; - /** - * @internal - */ - @Prop() position: number; - - /** - * @internal - */ - @Prop() selectionCell = false; + /** @internal */ + @Prop() groupSeparator: boolean; - /** - * @internal - */ - @Prop() selectionMode: SelectionMode; + /** @internal */ + @Prop() isInBody = false; - /** - * @internal - */ + /** @internal */ @Prop() numberCell = false; - /** - * @internal - */ - @Prop() isInBody = false; + /** @internal */ + @Prop() numberingSystem: NumberingSystem; - /** - * @internal - */ + /** @internal */ @Prop() parentRowPosition: number; - /** - * @internal - */ - @Prop() totalRowCount: number; + /** @internal */ + @Prop() position: number; - /** - * @internal - */ + /** @internal */ @Prop() selectedRowCount: number; - /** - * @internal - */ + /** @internal */ @Prop() selectedRowCountLocalized: string; - /** - * @internal - */ - @Prop() numberingSystem: NumberingSystem; + /** @internal */ + @Prop() selectionCell = false; - /** - * @internal - */ - @Prop() groupSeparator: boolean; + /** @internal */ + @Prop() selectionMode: SelectionMode; + + /** @internal */ + @Prop() totalRowCount: number; /** * Made into a prop for testing purposes only @@ -127,15 +105,6 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo /* wired up by t9n util */ } - @State() defaultMessages: TableHeaderMessages; - - @State() effectiveLocale = ""; - - @Watch("effectiveLocale") - effectiveLocaleChange(): void { - updateMessages(this, this.effectiveLocale); - } - // -------------------------------------------------------------------------- // // Lifecycle @@ -168,7 +137,16 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo // -------------------------------------------------------------------------- @Element() el: HTMLCalciteTableHeaderElement; - private focusableEl: HTMLDivElement; + @State() defaultMessages: TableHeaderMessages; + + @State() effectiveLocale = ""; + + @Watch("effectiveLocale") + effectiveLocaleChange(): void { + updateMessages(this, this.effectiveLocale); + } + + private thEl: HTMLDivElement; // -------------------------------------------------------------------------- // @@ -176,11 +154,11 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo // // -------------------------------------------------------------------------- - /** Sets focus on the component's first focusable element. */ + /** Sets focus on the component. */ @Method() async setFocus(): Promise { await componentFocusable(this); - this.focusableEl.focus(); + this.thEl.focus(); } // -------------------------------------------------------------------------- @@ -237,7 +215,7 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo scope={scope} tabindex={0} // eslint-disable-next-line react/jsx-sort-props - ref={(el) => (this.focusableEl = el as HTMLDivElement)} + ref={(el) => (this.thEl = el as HTMLDivElement)} > {this.heading &&
{this.heading}
} {this.description &&
{this.description}
} diff --git a/packages/calcite-components/src/components/table-row/table-row.scss b/packages/calcite-components/src/components/table-row/table-row.scss index d14608c6646..5a849fc0892 100644 --- a/packages/calcite-components/src/components/table-row/table-row.scss +++ b/packages/calcite-components/src/components/table-row/table-row.scss @@ -19,6 +19,10 @@ @apply opacity-disabled pointer-events-none; } +:host([hidden]) { + @apply hidden; +} + tr { @apply table-row; border-block-start: 1px solid var(--calcite-table-row-border-color, var(--calcite-ui-border-3)); diff --git a/packages/calcite-components/src/components/table-row/table-row.tsx b/packages/calcite-components/src/components/table-row/table-row.tsx index 51f98c4dbff..3ec7a3a8653 100644 --- a/packages/calcite-components/src/components/table-row/table-row.tsx +++ b/packages/calcite-components/src/components/table-row/table-row.tsx @@ -42,53 +42,41 @@ export class Table implements LocalizedComponent { /** Is the component selected. */ @Prop({ reflect: true }) selected = false; - /** - * @internal - */ - @Prop() position: number; + /** @internal */ + @Prop() groupSeparator: boolean; - /** - * @internal - */ + /** @internal */ @Prop() numbered = false; - /** - * @internal - */ + /** @internal */ @Prop() numberingSystem: NumberingSystem; - /** - * @internal - */ - @Prop() groupSeparator: boolean; - - /** - * @internal - */ - @Prop() tableHeadRow = false; + /** @internal */ + @Prop() position: number; - /** - * @internal - */ - @Prop() totalRowCount: number; + /** @internal */ + @Prop() positionWithinAll: number; - /** - * @internal - */ + /** @internal */ @Prop() selectedRowCount: number; - /** - * @internal - */ + /** @internal */ @Prop() selectionMode: Extract<"multiple" | "single" | "none", SelectionMode> = "none"; + /** @internal */ + @Prop() tableHeadRow = false; + + /** @internal */ + @Prop() totalRowCount: number; + @Watch("selected") @Watch("selectionMode") @Watch("selectedRowCount") @Watch("totalRowCount") @Watch("numbered") handleCellChanges(): void { - // todo wait until the selection or number cell are present + // todo need to ensure conditionally rendered cells + // (number / selection) exist before setting properties on all cells if (this.rowCells?.length > 0) { setTimeout(() => this.updateCells(), 60); } @@ -150,11 +138,11 @@ export class Table implements LocalizedComponent { const rowPosition = event.detail.rowPosition; const destination = event.detail.destination; - if (rowPosition === this.position) { + if (rowPosition === this.positionWithinAll) { if (this.disabled) { const deflectDirection = destination === "last" ? "previous" : destination === "first" ? "next" : destination; - this.emitTableRowFocusRequest(position, this.position, deflectDirection); + this.emitTableRowFocusRequest(position, this.positionWithinAll, deflectDirection); return; } const cellPosition = (this.rowCells as any)?.find((_, index) => index + 1 === position); @@ -165,7 +153,13 @@ export class Table implements LocalizedComponent { } } - keyDownHandler(event: KeyboardEvent): void { + //-------------------------------------------------------------------------- + // + // Private Methods + // + //-------------------------------------------------------------------------- + + private keyDownHandler(event: KeyboardEvent): void { const el = event.target as HTMLCalciteTableCellElement | HTMLCalciteTableHeaderElement; const key = event.key; const isControl = event.ctrlKey; @@ -173,19 +167,19 @@ export class Table implements LocalizedComponent { if (el?.matches("calcite-table-cell") || el.matches("calcite-table-header")) { switch (key) { case "ArrowUp": - this.emitTableRowFocusRequest(el.position, this.position, "previous"); + this.emitTableRowFocusRequest(el.position, this.positionWithinAll, "previous"); event.preventDefault(); break; case "ArrowDown": - this.emitTableRowFocusRequest(el.position, this.position, "next"); + this.emitTableRowFocusRequest(el.position, this.positionWithinAll, "next"); event.preventDefault(); break; case "PageUp": - this.emitTableRowFocusRequest(el.position, this.position, "first"); + this.emitTableRowFocusRequest(el.position, this.positionWithinAll, "first"); event.preventDefault(); break; case "PageDown": - this.emitTableRowFocusRequest(el.position, this.position, "last"); + this.emitTableRowFocusRequest(el.position, this.positionWithinAll, "last"); event.preventDefault(); break; case "ArrowLeft": @@ -198,7 +192,7 @@ export class Table implements LocalizedComponent { break; case "Home": if (isControl) { - this.emitTableRowFocusRequest(1, this.position, "first"); + this.emitTableRowFocusRequest(1, this.positionWithinAll, "first"); event.preventDefault(); } else { focusElementInGroup(cells, el, "first", false); @@ -207,7 +201,7 @@ export class Table implements LocalizedComponent { break; case "End": if (isControl) { - this.emitTableRowFocusRequest(this.rowCells?.length, this.position, "last"); + this.emitTableRowFocusRequest(this.rowCells?.length, this.positionWithinAll, "last"); event.preventDefault(); } else { focusElementInGroup(cells, el, "last", false); @@ -218,12 +212,6 @@ export class Table implements LocalizedComponent { } } - //-------------------------------------------------------------------------- - // - // Private Methods - // - //-------------------------------------------------------------------------- - private localizeNumber = (position): string => { numberStringFormatter.numberFormatOptions = { locale: this.effectiveLocale, @@ -243,6 +231,7 @@ export class Table implements LocalizedComponent { cellPosition, rowPosition, destination, + fromHeader: this.tableHeadRow, }); }; @@ -267,6 +256,7 @@ export class Table implements LocalizedComponent { cells?.forEach((cell, index) => { cell.position = index + 1; cell.parentRowPosition = this.position; + cell.parentRowIsSelected = this.selected; cell.isInBody = !this.tableHeadRow; }); } @@ -324,9 +314,7 @@ export class Table implements LocalizedComponent { onKeyDown={this.handleKeyboardSelection} parentRowIsSelected={this.selected} parentRowPositionLocalized={this.localizeNumber(this.position)} - selectedRowCount={this.selectedRowCount} selectionCell - totalRowCount={this.totalRowCount} > {this.renderSelectionIcon()} diff --git a/packages/calcite-components/src/components/table/interfaces.ts b/packages/calcite-components/src/components/table/interfaces.ts index 05052f96f61..88724d53c63 100644 --- a/packages/calcite-components/src/components/table/interfaces.ts +++ b/packages/calcite-components/src/components/table/interfaces.ts @@ -4,6 +4,7 @@ export interface TableRowFocusEvent { cellPosition: number; rowPosition: number; destination: FocusElementInGroupDestination; + fromHeader: boolean; } export type TableAppearance = "bordered" | "simple" | "bordered-zebra" | "simple-zebra"; diff --git a/packages/calcite-components/src/components/table/table.e2e.ts b/packages/calcite-components/src/components/table/table.e2e.ts index 9ff72e47470..ce398b61c81 100644 --- a/packages/calcite-components/src/components/table/table.e2e.ts +++ b/packages/calcite-components/src/components/table/table.e2e.ts @@ -447,5 +447,6 @@ describe("selection modes", () => { }); // page size updates re-create keyboard navigation arrays +// can correctly keyboard navigate through two levels of headers to body rows and back // ensure keyboard navigation works after page size updates and more rows visible // correct assistive hidden text rendered for : table header number cell, table header single select, table header multiple select diff --git a/packages/calcite-components/src/components/table/table.scss b/packages/calcite-components/src/components/table/table.scss index 81ad102d8ad..2b450202991 100644 --- a/packages/calcite-components/src/components/table/table.scss +++ b/packages/calcite-components/src/components/table/table.scss @@ -64,7 +64,8 @@ thead { } .selection-area { - @apply flex flex-row items-center py-1; + @apply flex flex-row items-center; + padding-block: var(--calcite-table-cell-padding-internal); border-block-start: 1px solid var(--calcite-ui-border-3); } @@ -81,7 +82,8 @@ thead { } .pagination-area { - @apply flex flex-row py-2 w-full justify-center; + @apply flex flex-row w-full justify-center; + padding-block: var(--calcite-table-cell-padding-internal); border-block-end: 1px solid var(--calcite-ui-border-3); } diff --git a/packages/calcite-components/src/components/table/table.tsx b/packages/calcite-components/src/components/table/table.tsx index 16d9988478b..fe6b533a3fb 100644 --- a/packages/calcite-components/src/components/table/table.tsx +++ b/packages/calcite-components/src/components/table/table.tsx @@ -211,9 +211,12 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen const cellPosition = event["detail"].cellPosition; const rowPos = event["detail"].rowPosition; const destination = event["detail"].destination; - const fromHeader = rowPos === 0; - let rowPosition: number; + const fromHeader = event["detail"].fromHeader; + + const lastHeadTr = + this.headRows?.length > 0 ? this.headRows[this.headRows.length - 1].positionWithinAll : 0; + let rowPosition: number; switch (destination) { case "first": rowPosition = 0; @@ -222,13 +225,19 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen rowPosition = this.lastRowInPage; break; case "next": - rowPosition = fromHeader ? this.firstRowInPage : rowPos + 1; + rowPosition = fromHeader && !lastHeadTr ? this.firstRowInPage : rowPos + 1; break; case "previous": - rowPosition = fromHeader || rowPos <= this.firstRowInPage ? 0 : rowPos - 1; + const toEnd = !lastHeadTr && (fromHeader || rowPos <= this.firstRowInPage); + rowPosition = toEnd ? lastHeadTr : rowPos - 1; break; } - this.calciteInternalTableRowFocusChange.emit({ cellPosition, rowPosition, destination }); + this.calciteInternalTableRowFocusChange.emit({ + cellPosition, + rowPosition, + destination, + fromHeader, + }); } // -------------------------------------------------------------------------- // @@ -236,7 +245,7 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen // // -------------------------------------------------------------------------- - updateRows = (): void => { + private updateRows = (): void => { const headRows = this.tableHeadSlotEl ?.assignedElements({ flatten: true }) ?.filter((el) => el?.matches("calcite-table-row")) as HTMLCalciteTableRowElement[]; @@ -247,16 +256,27 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen const allRows = headRows?.length > 0 ? [...headRows, ...bodyRows] : bodyRows || []; - allRows?.forEach((row) => { - const rowPosition = allRows.indexOf(row); + headRows?.forEach((row) => { + row.tableHeadRow = true; + row.selectionMode = this.selectionMode; + row.numberingSystem = this.numberingSystem; + row.totalRowCount = this.bodyRows?.length; + row.groupSeparator = this.groupSeparator; + row.numbered = this.numbered; + row.position = headRows?.indexOf(row); + row.positionWithinAll = allRows?.indexOf(row); + }); + + bodyRows?.forEach((row) => { row.selectionMode = this.selectionMode; row.numberingSystem = this.numberingSystem; row.totalRowCount = this.bodyRows?.length; row.groupSeparator = this.groupSeparator; row.numbered = this.numbered; - row.tableHeadRow = headRows?.includes(row); - row.position = rowPosition; + row.position = bodyRows?.indexOf(row); + row.positionWithinAll = allRows?.indexOf(row); }); + this.headRows = headRows; this.bodyRows = bodyRows; this.allRows = allRows; @@ -270,13 +290,13 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen this.paginateRows(); }; - handlePaginationChange = (event: CustomEvent): void => { + private handlePaginationChange = (event: CustomEvent): void => { const requestedItem = (event.target as HTMLCalcitePaginationElement).startItem; this.currentPageStartRow = requestedItem || 1; this.updateRows(); }; - paginateRows = (): void => { + private paginateRows = (): void => { this.bodyRows?.forEach((row) => { const inView = row.position >= this.currentPageStartRow && @@ -285,15 +305,15 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen row.hidden = this.pageSize === 0 || inView; }); - const firstVisibleRow = this.bodyRows?.filter((row) => row.hidden)[0]?.position || 1; + const visibleRows = this.allRows?.filter((row) => row.hidden); + const firstVisibleRow = visibleRows[0]?.positionWithinAll || 1; + const lastVisibleRow = visibleRows[visibleRows?.length - 1]?.positionWithinAll; + this.firstRowInPage = firstVisibleRow; - this.lastRowInPage = - this.pageSize < 1 && this.bodyRows?.length > 0 - ? this.bodyRows[this.bodyRows?.length - 1].position - : firstVisibleRow + this.pageSize - 1; + this.lastRowInPage = lastVisibleRow; }; - updateSelectedItems = (emit?: boolean): void => { + private updateSelectedItems = (emit?: boolean): void => { const selectedItems = this.bodyRows?.filter((el) => el.selected); this.selectedItems = selectedItems; this.selectedCount = selectedItems?.length; @@ -306,14 +326,14 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen } }; - handleDeselectAllRows = (): void => { + private handleDeselectAllRows = (): void => { this.bodyRows?.forEach((row) => { row.selected = false; }); this.updateSelectedItems(true); }; - setSelectedItems = (elToMatch?: HTMLCalciteTableRowElement): void => { + private setSelectedItems = (elToMatch?: HTMLCalciteTableRowElement): void => { if (elToMatch?.tableHeadRow) { this.bodyRows?.forEach((el) => (el.selected = this.selectedCount !== this.bodyRows?.length)); } else if (elToMatch) { @@ -355,11 +375,20 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen return (
- 0 ? "brand" : "neutral"} value={selectionText}> + 0 ? "brand" : "neutral"} + scale={this.scale} + value={selectionText} + > {selectionText} {outOfViewCount > 0 && ( - + {localizedOutOfViewCount} )} @@ -369,6 +398,7 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen kind="neutral" onClick={this.handleDeselectAllRows} round + scale={this.scale} title={`${this.messages.clear} ${selectionText} ${this.messages.row}`} > {this.messages.clear} @@ -389,6 +419,7 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen numberingSystem={this.numberingSystem} onCalcitePaginationChange={(event) => this.handlePaginationChange(event)} pageSize={this.pageSize} + scale={this.scale} startItem={1} totalItems={this.bodyRows?.length} /> @@ -431,6 +462,7 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen aria-rowcount={this.bodyRows?.length} class={{ [this.appearance]: true, [CSS.tableFixed]: this.layout === "fixed" }} role="grid" + tabIndex={0} > {this.renderTHead()} {this.renderTBody()} diff --git a/packages/calcite-components/src/demos/table.html b/packages/calcite-components/src/demos/table.html index f393592ab53..02fb02289c1 100644 --- a/packages/calcite-components/src/demos/table.html +++ b/packages/calcite-components/src/demos/table.html @@ -313,11 +313,11 @@

Interactive

- cell - cell - cell - cell - cell + cell + cell + cell + cell + cell 34 HappyInteractive - cell - cell - cell - cell - cell + cell + cell + cell + cell + cell 53 HappyInteractive Another thing - cell - cell - cell - cell - cell + cell + cell + cell + cell + cell 25 HappyInteractive Another thing - cell - cell - cell - cell - cell + cell + cell + cell + cell + cell 63 HappyInteractive Another thing - cell - cell - cell - cell - cell + cell + cell + cell + cell + cell 1643 HappyInteractive - cell - cell - cell - cell - cell + cell + cell + cell + cell + cell 63 HappyInteractive - cell - cell - cell - cell - cell + cell + cell + cell + cell + cell 62 Happy Date: Sat, 26 Aug 2023 13:58:02 -0700 Subject: [PATCH 06/44] WIP - Table --- .../src/components/table-cell/resources.ts | 1 + .../src/components/table-cell/table-cell.scss | 9 +- .../src/components/table-cell/table-cell.tsx | 58 +--- .../src/components/table-header/resources.ts | 2 +- .../components/table-header/table-header.scss | 1 - .../components/table-header/table-header.tsx | 27 +- .../src/components/table-row/table-row.scss | 1 - .../src/components/table-row/table-row.tsx | 77 ++--- .../src/components/table/interfaces.ts | 3 +- .../src/components/table/table.e2e.ts | 10 + .../src/components/table/table.scss | 4 + .../src/components/table/table.tsx | 178 ++++++---- .../calcite-components/src/demos/table.html | 307 ++++++++++++++---- 13 files changed, 449 insertions(+), 229 deletions(-) diff --git a/packages/calcite-components/src/components/table-cell/resources.ts b/packages/calcite-components/src/components/table-cell/resources.ts index dd61c2e1b4a..14f52645e9b 100644 --- a/packages/calcite-components/src/components/table-cell/resources.ts +++ b/packages/calcite-components/src/components/table-cell/resources.ts @@ -1,5 +1,6 @@ export const CSS = { numberCell: "number-cell", + footerCell: "footer-cell", selectionCell: "selection-cell", selectedCell: "selected-cell", assistiveText: "assistive-text", diff --git a/packages/calcite-components/src/components/table-cell/table-cell.scss b/packages/calcite-components/src/components/table-cell/table-cell.scss index a604e5b3844..23cfd000eb6 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.scss +++ b/packages/calcite-components/src/components/table-cell/table-cell.scss @@ -29,7 +29,6 @@ td { @apply align-middle text-color-1; background: var(--calcite-table-cell-background-internal); border-inline-end: 1px solid var(--calcite-ui-border-3); - @apply text-start focus-base; &:focus { @apply focus-inset; @@ -41,6 +40,12 @@ td { @apply bg-foreground-2; } +.footer-cell { + @apply bg-background font-medium; + border-block-start: 1px solid var(--calcite-ui-border-3); + border-block-end: 1px solid var(--calcite-ui-border-3); +} + .number-cell, .selection-cell { border-inline-end: 1px solid var(--calcite-ui-border-3); @@ -53,7 +58,7 @@ td { inset-inline-start: 2rem; } -.selected-cell:not(.number-cell) { +.selected-cell:not(.number-cell):not(.footer-cell) { --calcite-table-cell-background: var(--calcite-ui-foreground-current); background: var(--calcite-ui-foreground-current); } diff --git a/packages/calcite-components/src/components/table-cell/table-cell.tsx b/packages/calcite-components/src/components/table-cell/table-cell.tsx index 4a4ccbbbaa6..79f0ac919dd 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.tsx +++ b/packages/calcite-components/src/components/table-cell/table-cell.tsx @@ -13,14 +13,10 @@ import { T9nComponent, updateMessages, } from "../../utils/t9n"; -import { - connectLocalized, - disconnectLocalized, - LocalizedComponent, - NumberingSystem, -} from "../../utils/locale"; +import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { TableCellMessages } from "./assets/table-cell/t9n"; import { CSS } from "./resources"; +import { RowType } from "../table/interfaces"; /** * @slot - A slot for adding content, usually text content. @@ -50,53 +46,26 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp /** Specifies the size of the component. */ @Prop({ reflect: true }) scale: Scale = "m"; - /** Provide a value to the component - used for accessible technology and column sorting */ + /** todo make it required - will be needed for sorting, a11y? */ @Prop() value: string; - /** - * @internal - */ - @Prop() position: number; - - /** - * @internal - */ - @Prop() selectionCell: boolean; - - /** - * @internal - */ - @Prop() selectionMode: SelectionMode; - - /** - * @internal - */ + /** @internal */ @Prop() numberCell: boolean; - /** - * @internal - */ + /** @internal */ @Prop() parentRowIsSelected: boolean; - /** - * @internal - */ - @Prop() parentRowPosition: number; - - /** - * @internal - */ + /** @internal */ @Prop() parentRowPositionLocalized: string; - /** - * @internal - */ - @Prop() numberingSystem: NumberingSystem; + /** @internal */ + @Prop() parentRowType: RowType; - /** - * @internal - */ - @Prop() groupSeparator: boolean; + /** @internal */ + @Prop() positionInRow: number; + + /** @internal */ + @Prop() selectionCell: boolean; /** * Made into a prop for testing purposes only @@ -195,6 +164,7 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp = "none"; /** @internal */ - @Prop() tableHeadRow = false; + @Prop() selectedRowCount: number; + + /** @internal */ + @Prop() selectedRowCountLocalized: string; /** @internal */ @Prop() totalRowCount: number; @@ -108,8 +111,6 @@ export class Table implements LocalizedComponent { @State() effectiveLocale = ""; - @State() localizedPosition = ""; - // -------------------------------------------------------------------------- // // Events @@ -138,11 +139,11 @@ export class Table implements LocalizedComponent { const rowPosition = event.detail.rowPosition; const destination = event.detail.destination; - if (rowPosition === this.positionWithinAll) { + if (rowPosition === this.positionAll) { if (this.disabled) { const deflectDirection = destination === "last" ? "previous" : destination === "first" ? "next" : destination; - this.emitTableRowFocusRequest(position, this.positionWithinAll, deflectDirection); + this.emitTableRowFocusRequest(position, this.positionAll, deflectDirection); return; } const cellPosition = (this.rowCells as any)?.find((_, index) => index + 1 === position); @@ -167,19 +168,19 @@ export class Table implements LocalizedComponent { if (el?.matches("calcite-table-cell") || el.matches("calcite-table-header")) { switch (key) { case "ArrowUp": - this.emitTableRowFocusRequest(el.position, this.positionWithinAll, "previous"); + this.emitTableRowFocusRequest(el.positionInRow, this.positionAll, "previous"); event.preventDefault(); break; case "ArrowDown": - this.emitTableRowFocusRequest(el.position, this.positionWithinAll, "next"); + this.emitTableRowFocusRequest(el.positionInRow, this.positionAll, "next"); event.preventDefault(); break; case "PageUp": - this.emitTableRowFocusRequest(el.position, this.positionWithinAll, "first"); + this.emitTableRowFocusRequest(el.positionInRow, this.positionAll, "first"); event.preventDefault(); break; case "PageDown": - this.emitTableRowFocusRequest(el.position, this.positionWithinAll, "last"); + this.emitTableRowFocusRequest(el.positionInRow, this.positionAll, "last"); event.preventDefault(); break; case "ArrowLeft": @@ -192,7 +193,7 @@ export class Table implements LocalizedComponent { break; case "Home": if (isControl) { - this.emitTableRowFocusRequest(1, this.positionWithinAll, "first"); + this.emitTableRowFocusRequest(1, this.positionAll, "first"); event.preventDefault(); } else { focusElementInGroup(cells, el, "first", false); @@ -201,7 +202,7 @@ export class Table implements LocalizedComponent { break; case "End": if (isControl) { - this.emitTableRowFocusRequest(this.rowCells?.length, this.positionWithinAll, "last"); + this.emitTableRowFocusRequest(this.rowCells?.length, this.positionAll, "last"); event.preventDefault(); } else { focusElementInGroup(cells, el, "last", false); @@ -212,16 +213,6 @@ export class Table implements LocalizedComponent { } } - private localizeNumber = (position): string => { - numberStringFormatter.numberFormatOptions = { - locale: this.effectiveLocale, - numberingSystem: this.numberingSystem, - useGrouping: this.groupSeparator, - }; - - return numberStringFormatter.localize(position.toString()); - }; - private emitTableRowFocusRequest = ( cellPosition: number, rowPosition: number, @@ -231,13 +222,10 @@ export class Table implements LocalizedComponent { cellPosition, rowPosition, destination, - fromHeader: this.tableHeadRow, }); }; private updateCells = (): void => { - this.localizedPosition = this.localizeNumber(this.position); - const slottedCells = this.tableRowSlotEl ?.assignedElements({ flatten: true }) .filter( @@ -254,13 +242,14 @@ export class Table implements LocalizedComponent { if (cells.length > 0) { cells?.forEach((cell, index) => { - cell.position = index + 1; - cell.parentRowPosition = this.position; + cell.positionInRow = index + 1; + cell.parentRowType = this.rowType; cell.parentRowIsSelected = this.selected; - cell.isInBody = !this.tableHeadRow; + cell.parentRowType = this.rowType; }); } this.rowCells = cells || []; + this.cellCount = cells.length; }; private handleSelectionOfRow = (): void => { @@ -296,37 +285,39 @@ export class Table implements LocalizedComponent { } renderSelectableCell(): VNode { - return this.tableHeadRow ? ( + return this.rowType === "head" ? ( - ) : ( + ) : this.rowType === "body" ? ( {this.renderSelectionIcon()} + ) : ( + ); } renderNumberedCell(): VNode { - return this.tableHeadRow ? ( + return this.rowType === "head" ? ( ) : ( - {this.localizedPosition} + {this.rowType === "body" && this.positionSectionLocalized} ); } @@ -335,9 +326,9 @@ export class Table implements LocalizedComponent { return ( this.keyDownHandler(event)} // eslint-disable-next-line react/jsx-sort-props ref={(el) => (this.tableRowEl = el)} diff --git a/packages/calcite-components/src/components/table/interfaces.ts b/packages/calcite-components/src/components/table/interfaces.ts index 88724d53c63..75a7dcfa350 100644 --- a/packages/calcite-components/src/components/table/interfaces.ts +++ b/packages/calcite-components/src/components/table/interfaces.ts @@ -4,9 +4,10 @@ export interface TableRowFocusEvent { cellPosition: number; rowPosition: number; destination: FocusElementInGroupDestination; - fromHeader: boolean; } +export type RowType = "head" | "body" | "foot"; + export type TableAppearance = "bordered" | "simple" | "bordered-zebra" | "simple-zebra"; export type TableLayout = "auto" | "fixed"; diff --git a/packages/calcite-components/src/components/table/table.e2e.ts b/packages/calcite-components/src/components/table/table.e2e.ts index ce398b61c81..133a0d7f286 100644 --- a/packages/calcite-components/src/components/table/table.e2e.ts +++ b/packages/calcite-components/src/components/table/table.e2e.ts @@ -393,6 +393,7 @@ describe("calcite-table", () => { describe("keyboard navigation", () => { it("navigates correctly when no pagination present", async () => { // + // press home expect }); it("navigates correctly when pagination present and first page displayed", async () => { // @@ -403,6 +404,15 @@ describe("keyboard navigation", () => { it("navigates correctly skipping disabled rows", async () => { // }); + it("navigates correctly when selection column present", async () => { + // + }); + it("navigates correctly when number column present", async () => { + // + }); + it("navigates correctly when number and selection column present", async () => { + // + }); it("navigates correctly skipping disabled rows when disabled rows in last position", async () => { // }); diff --git a/packages/calcite-components/src/components/table/table.scss b/packages/calcite-components/src/components/table/table.scss index 2b450202991..5bbd6ba61eb 100644 --- a/packages/calcite-components/src/components/table/table.scss +++ b/packages/calcite-components/src/components/table/table.scss @@ -40,6 +40,10 @@ thead { @apply sticky top-0 z-sticky; } +tfoot { + @apply sticky bottom-0 z-sticky; +} + .table-fixed-layout { @apply table-fixed; } diff --git a/packages/calcite-components/src/components/table/table.tsx b/packages/calcite-components/src/components/table/table.tsx index fe6b533a3fb..f5f8fcf523d 100644 --- a/packages/calcite-components/src/components/table/table.tsx +++ b/packages/calcite-components/src/components/table/table.tsx @@ -130,9 +130,13 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen @State() currentPageStartRow = 1; - @State() firstRowInPage = 1; + @State() firstRowInTable = 1; - @State() lastRowInPage: number; + @State() firstRowInBody = 1; + + @State() lastRowInBody: number; + + @State() lastRowInTable: number; @State() selectedCount = 0; @@ -147,13 +151,17 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen private allRows: HTMLCalciteTableRowElement[]; + private headRows: HTMLCalciteTableRowElement[]; + private bodyRows: HTMLCalciteTableRowElement[]; - private headRows: HTMLCalciteTableRowElement[]; + private footRows: HTMLCalciteTableRowElement[]; + + private tableHeadSlotEl: HTMLSlotElement; private tableBodySlotEl: HTMLSlotElement; - private tableHeadSlotEl: HTMLSlotElement; + private tableFootSlotEl: HTMLSlotElement; //-------------------------------------------------------------------------- // @@ -189,6 +197,9 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen /** Emits when the component's selection changes. */ @Event({ cancelable: false }) calciteTableSelect: EventEmitter; + /** Emits when the component's selection changes. */ + @Event({ cancelable: false }) calciteTablePageSelect: EventEmitter; + /** @internal */ @Event({ cancelable: false }) calciteInternalTableRowFocusChange: EventEmitter; @@ -211,10 +222,11 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen const cellPosition = event["detail"].cellPosition; const rowPos = event["detail"].rowPosition; const destination = event["detail"].destination; - const fromHeader = event["detail"].fromHeader; - - const lastHeadTr = - this.headRows?.length > 0 ? this.headRows[this.headRows.length - 1].positionWithinAll : 0; + const leavingHeader = destination === "next" && rowPos < this.firstRowInBody; + const leavingFooter = destination === "previous" && rowPos > this.lastRowInBody; + const enteringHeader = destination === "previous" && rowPos === this.firstRowInBody; + const enteringFooter = + this.footRows.length > 0 && destination === "next" && rowPos === this.lastRowInBody; let rowPosition: number; switch (destination) { @@ -222,21 +234,34 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen rowPosition = 0; break; case "last": - rowPosition = this.lastRowInPage; + rowPosition = this.lastRowInTable - 1; break; case "next": - rowPosition = fromHeader && !lastHeadTr ? this.firstRowInPage : rowPos + 1; + rowPosition = leavingHeader + ? this.firstRowInBody + : enteringFooter + ? this.footRows[0].positionAll + : rowPos + 1; break; case "previous": - const toEnd = !lastHeadTr && (fromHeader || rowPos <= this.firstRowInPage); - rowPosition = toEnd ? lastHeadTr : rowPos - 1; + rowPosition = leavingFooter + ? this.lastRowInBody + : enteringHeader + ? this.headRows[this.headRows.length - 1].positionAll + : rowPos - 1; + break; } + const destinationCount = this.allRows?.find( + (row) => row.positionAll === rowPosition + )?.cellCount; + + const adjustedPos = cellPosition > destinationCount ? destinationCount : cellPosition; + this.calciteInternalTableRowFocusChange.emit({ - cellPosition, + cellPosition: adjustedPos, rowPosition, destination, - fromHeader, }); } // -------------------------------------------------------------------------- @@ -245,47 +270,56 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen // // -------------------------------------------------------------------------- - private updateRows = (): void => { - const headRows = this.tableHeadSlotEl + private getSlottedRows = (el: HTMLSlotElement): HTMLCalciteTableRowElement[] => { + return el ?.assignedElements({ flatten: true }) ?.filter((el) => el?.matches("calcite-table-row")) as HTMLCalciteTableRowElement[]; + }; - const bodyRows = this.tableBodySlotEl - ?.assignedElements({ flatten: true }) - ?.filter((el) => el?.matches("calcite-table-row")) as HTMLCalciteTableRowElement[]; + private updateRows = (): void => { + const headRows = this.getSlottedRows(this.tableHeadSlotEl) || []; + const bodyRows = this.getSlottedRows(this.tableBodySlotEl) || []; + const footRows = this.getSlottedRows(this.tableFootSlotEl) || []; - const allRows = headRows?.length > 0 ? [...headRows, ...bodyRows] : bodyRows || []; + const allRows = [...headRows, ...bodyRows, ...footRows]; headRows?.forEach((row) => { - row.tableHeadRow = true; - row.selectionMode = this.selectionMode; - row.numberingSystem = this.numberingSystem; - row.totalRowCount = this.bodyRows?.length; - row.groupSeparator = this.groupSeparator; - row.numbered = this.numbered; - row.position = headRows?.indexOf(row); - row.positionWithinAll = allRows?.indexOf(row); + const position = headRows?.indexOf(row); + row.rowType = "head"; + row.positionSection = position; + row.positionSectionLocalized = this.localizeNumber((position + 1).toString()); }); bodyRows?.forEach((row) => { + const position = bodyRows?.indexOf(row); + row.rowType = "body"; + row.positionSection = position; + row.positionSectionLocalized = this.localizeNumber((position + 1).toString()); + }); + + footRows?.forEach((row) => { + const position = footRows?.indexOf(row); + row.rowType = "foot"; + row.positionSection = position; + row.positionSectionLocalized = this.localizeNumber((position + 1).toString()); + }); + + allRows?.forEach((row) => { row.selectionMode = this.selectionMode; - row.numberingSystem = this.numberingSystem; - row.totalRowCount = this.bodyRows?.length; - row.groupSeparator = this.groupSeparator; + row.totalRowCount = bodyRows?.length; + row.positionAll = allRows?.indexOf(row); row.numbered = this.numbered; - row.position = bodyRows?.indexOf(row); - row.positionWithinAll = allRows?.indexOf(row); }); + const colCount = + headRows?.length > 0 ? headRows[0]?.querySelectorAll("calcite-table-header")?.length : 0; + + this.colCount = colCount; this.headRows = headRows; this.bodyRows = bodyRows; + this.footRows = footRows; this.allRows = allRows; - const colCount = - this.headRows?.length > 0 - ? this.headRows[0]?.querySelectorAll("calcite-table-header")?.length - : 0; - this.colCount = colCount; this.updateSelectedItems(); this.paginateRows(); }; @@ -293,24 +327,28 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen private handlePaginationChange = (event: CustomEvent): void => { const requestedItem = (event.target as HTMLCalcitePaginationElement).startItem; this.currentPageStartRow = requestedItem || 1; + this.calciteTablePageSelect.emit(); this.updateRows(); }; private paginateRows = (): void => { this.bodyRows?.forEach((row) => { + const offsetBodyPos = row.positionSection + 1 + this.headRows?.length; const inView = - row.position >= this.currentPageStartRow && - row.position < this.currentPageStartRow + this.pageSize; - row.style.display = this.pageSize === 0 || inView ? "contents" : "none"; - row.hidden = this.pageSize === 0 || inView; + this.pageSize < 1 || + (offsetBodyPos > this.currentPageStartRow && + offsetBodyPos <= this.currentPageStartRow + this.pageSize); + + row.hidden = !inView && !this.footRows.includes(row); }); - const visibleRows = this.allRows?.filter((row) => row.hidden); - const firstVisibleRow = visibleRows[0]?.positionWithinAll || 1; - const lastVisibleRow = visibleRows[visibleRows?.length - 1]?.positionWithinAll; + const visibleBody = this.bodyRows?.filter((row) => !row.hidden); + const visibleAll = this.allRows?.filter((row) => !row.hidden); - this.firstRowInPage = firstVisibleRow; - this.lastRowInPage = lastVisibleRow; + this.firstRowInBody = visibleBody[0]?.positionSection + 1; + this.lastRowInBody = visibleBody[visibleBody?.length - 1]?.positionSection + 1; + this.firstRowInTable = visibleAll[0]?.positionAll + 1; + this.lastRowInTable = visibleAll[visibleAll?.length - 1]?.positionAll + 1; }; private updateSelectedItems = (emit?: boolean): void => { @@ -319,6 +357,7 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen this.selectedCount = selectedItems?.length; this.allRows?.forEach((row) => { row.selectedRowCount = this.selectedCount; + row.selectedRowCountLocalized = this.localizeNumber(this.selectedCount); }); if (emit) { @@ -334,9 +373,9 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen }; private setSelectedItems = (elToMatch?: HTMLCalciteTableRowElement): void => { - if (elToMatch?.tableHeadRow) { + if (elToMatch?.rowType === "head") { this.bodyRows?.forEach((el) => (el.selected = this.selectedCount !== this.bodyRows?.length)); - } else if (elToMatch) { + } else if (elToMatch?.rowType === "body") { this.bodyRows?.forEach((el) => { const matchingEl = elToMatch === el; switch (this.selectionMode) { @@ -354,6 +393,16 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen this.updateSelectedItems(true); }; + private localizeNumber = (value: number | string): string => { + numberStringFormatter.numberFormatOptions = { + locale: this.effectiveLocale, + numberingSystem: this.numberingSystem, + useGrouping: this.groupSeparator, + }; + + return numberStringFormatter.localize(value.toString()); + }; + // -------------------------------------------------------------------------- // // Render Methods @@ -367,9 +416,9 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen useGrouping: this.groupSeparator, }; - const outOfViewCount = this.selectedItems?.filter((el) => !el.hidden)?.length; - const localizedOutOfViewCount = numberStringFormatter.localize(outOfViewCount?.toString()); - const localizedSelectedCount = numberStringFormatter.localize(this.selectedCount?.toString()); + const outOfViewCount = this.selectedItems?.filter((el) => el.hidden)?.length; + const localizedOutOfViewCount = this.localizeNumber(outOfViewCount?.toString()); + const localizedSelectedCount = this.localizeNumber(this.selectedCount?.toString()); const selectionText = `${localizedSelectedCount} ${this.messages.selected}`; const outOfViewText = `${localizedOutOfViewCount} ${this.messages.hiddenSelected}`; @@ -429,7 +478,7 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen renderTHead(): VNode { return ( - + + (this.tableBodySlotEl = el as HTMLSlotElement)} @@ -450,23 +499,36 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen ); } + renderTFoot(): VNode { + return ( + + (this.tableFootSlotEl = el as HTMLSlotElement)} + /> + + ); + } + render(): VNode { return (
{this.selectionMode !== "none" && this.renderSelectionArea()} -
+
+ {this.renderTHead()} {this.renderTBody()} - + {this.renderTFoot()}
{this.caption}{this.caption}
{this.pageSize > 0 && this.renderPaginationArea()} diff --git a/packages/calcite-components/src/demos/table.html b/packages/calcite-components/src/demos/table.html index 02fb02289c1..814a7d8648b 100644 --- a/packages/calcite-components/src/demos/table.html +++ b/packages/calcite-components/src/demos/table.html @@ -313,12 +313,12 @@

Interactive

- cell - cell - cell - cell - cell - 34 + cell + cell + cell + cell + cell + test 1 Happy @@ -327,12 +327,12 @@

Interactive

 - cell - cell - cell - cell - cell - 53 + cell + cell + cell + cell + cell + test 2 Happy @@ -340,12 +340,12 @@

Interactive

Another thing - cell - cell - cell - cell - cell - 25 + cell + cell + cell + cell + cell + test 3 Happy @@ -353,12 +353,12 @@

Interactive

Another thing - cell - cell - cell - cell - cell - 63 + cell + cell + cell + cell + cell + test 4 Happy @@ -366,12 +366,12 @@

Interactive

Another thing - cell - cell - cell - cell - cell - 1643 + cell + cell + cell + cell + cell + test 5 Happy @@ -380,12 +380,12 @@

Interactive

 - cell - cell - cell - cell - cell - 63 + cell + cell + cell + cell + cell + test 6 Happy @@ -394,12 +394,12 @@

Interactive

 - cell - cell - cell - cell - cell - 62 + cell + cell + cell + cell + cell + test 7 Happy @@ -412,7 +412,7 @@

Interactive

cell cell cell - 6 + test 8 Happy @@ -426,7 +426,7 @@

Interactive

cell cell cell - 262 + test 9 Sad Another thing @@ -438,7 +438,7 @@

Interactive

cell cell cell - 63 + test 10 Happy @@ -452,7 +452,7 @@

Interactive

cell cell cell - 120 + test 11 Happy @@ -466,7 +466,7 @@

Interactive

cell cell cell - 987 + test 12 Happy @@ -480,7 +480,7 @@

Interactive

cell cell cell - 12 + test 13 Happy @@ -494,7 +494,7 @@

Interactive

cell cell cell - 78 + test 14 Happy @@ -507,7 +507,7 @@

Interactive

cell cell cell - 63 + test 15 Happy @@ -520,7 +520,7 @@

Interactive

cell cell cell - 1643 + test 16 Happy @@ -534,7 +534,7 @@

Interactive

cell cell cell - 63 + test 17 Happy @@ -548,7 +548,7 @@

Interactive

cell cell cell - 62 + test 18 Happy @@ -561,7 +561,7 @@

Interactive

cell cell cell - 6 + test 19 Happy @@ -575,7 +575,7 @@

Interactive

cell cell cell - 262 + test 20 Sad Another thing @@ -587,7 +587,7 @@

Interactive

cell cell cell - 63 + test 21 Happy @@ -601,7 +601,7 @@

Interactive

cell cell cell - 120 + test 22 Happy @@ -615,7 +615,7 @@

Interactive

cell cell cell - 987 + test 23 Happy @@ -2062,6 +2062,40 @@

Numbered

 +

Numbered

+ + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + foot + foot + foot + foot + + +

With rich cell content

@@ -2095,6 +2129,12 @@

With rich cell content

> + + foot + foot + foot + foot +

Layout fixed

@@ -2267,6 +2307,60 @@

Multiple headers using col-span

+

Complex keyboard test with multiple headers, selection, pagination using col-span

+ + + + + + + + + + + + + cell + cell + + + cell + cell + + + cell + cell + + + cell + cell + cell + + + cell + cell + cell + + + cell + cell + + + cell + cell + + + cell + cell + + + foot + foot + foot + foot + + +

Headers in rows

@@ -2327,6 +2421,12 @@

Headers in rows and table-head

cell cell + + foot + foot + foot + foot +

selection-mode single

@@ -2361,7 +2461,7 @@

selection-mode single

-

selection-mode multiple and numbered including out of view

+

selection-mode multiple with selected at load

@@ -2391,9 +2491,16 @@

selection-mode multiple and numbered including out of view

cell cell + + foot + foot + foot + foot + -

selection-mode multiple with selected at load

+

selection-mode multiple and numbered including out of view

+ selection-mode multiple with selected at load +

selection-mode multiple and numbered including out of view and footer

+ + + + + + + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + + 24,212 + 58% happiness + + + +

With selection-mode multiple and rich cell content

@@ -2581,6 +2764,10 @@

console.log(event.target.selectedItems); }); + table.addEventListener("calciteTablePageSelect", (event) => { + console.log("page select event"); + }); + pageSizeInput.addEventListener("calciteInputNumberInput", (event) => { table.pageSize = event.target.value; }); From 44c4f8aec0e0f671c0bd8986c365359cd165a294 Mon Sep 17 00:00:00 2001 From: Adam Date: Sat, 26 Aug 2023 15:51:58 -0700 Subject: [PATCH 07/44] WIP - Table --- .../src/components/table-cell/table-cell.scss | 2 +- .../components/table-header/table-header.scss | 2 +- .../components/table-header/table-header.tsx | 6 +- .../src/components/table-row/table-row.tsx | 6 +- .../src/components/table/table.stories.ts | 272 ++++++++++++++++++ .../src/components/table/table.tsx | 83 ++---- .../calcite-components/src/demos/table.html | 88 ++++++ 7 files changed, 398 insertions(+), 61 deletions(-) diff --git a/packages/calcite-components/src/components/table-cell/table-cell.scss b/packages/calcite-components/src/components/table-cell/table-cell.scss index 23cfd000eb6..d7add7e2d12 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.scss +++ b/packages/calcite-components/src/components/table-cell/table-cell.scss @@ -41,7 +41,7 @@ td { } .footer-cell { - @apply bg-background font-medium; + @apply bg-background font-medium text-color-1; border-block-start: 1px solid var(--calcite-ui-border-3); border-block-end: 1px solid var(--calcite-ui-border-3); } diff --git a/packages/calcite-components/src/components/table-header/table-header.scss b/packages/calcite-components/src/components/table-header/table-header.scss index a8dfcbee786..2ae1d967097 100644 --- a/packages/calcite-components/src/components/table-header/table-header.scss +++ b/packages/calcite-components/src/components/table-header/table-header.scss @@ -62,7 +62,7 @@ th.is-in-body { } .heading { - @apply text-color-2; + @apply text-color-1; } .description { diff --git a/packages/calcite-components/src/components/table-header/table-header.tsx b/packages/calcite-components/src/components/table-header/table-header.tsx index c138a9b6b90..6b94c0013eb 100644 --- a/packages/calcite-components/src/components/table-header/table-header.tsx +++ b/packages/calcite-components/src/components/table-header/table-header.tsx @@ -74,7 +74,7 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo @Prop() selectionMode: SelectionMode; /** @internal */ - @Prop() totalRowCount: number; + @Prop() bodyRowCount: number; /** * Made into a prop for testing purposes only @@ -163,7 +163,7 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo return this.messages.rowNumber; } else if (this.selectionMode === "single") { text = `${this.messages.selectionColumn}. ${this.selectedRowCountLocalized} ${this.messages.selected}`; - } else if (this.totalRowCount === this.selectedRowCount) { + } else if (this.bodyRowCount === this.selectedRowCount) { text = `${this.messages.selectionColumn}. ${this.messages.all} ${this.selectedRowCountLocalized} ${this.messages.selected} ${this.messages.keyboardDeselectAll}`; } else { text = `${this.messages.selectionColumn}. ${this.selectedRowCountLocalized} ${this.messages.selected} ${this.messages.keyboardSelectAll}`; @@ -186,7 +186,7 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo ? "row" : "col"; - const allSelected = this.selectedRowCount === this.totalRowCount; + const allSelected = this.selectedRowCount === this.bodyRowCount; const selectionIcon = allSelected ? "check-square-f" : "check-square"; // test this.focusable and reading screen text in safari diff --git a/packages/calcite-components/src/components/table-row/table-row.tsx b/packages/calcite-components/src/components/table-row/table-row.tsx index 9be12b633e7..8e6c59fd556 100644 --- a/packages/calcite-components/src/components/table-row/table-row.tsx +++ b/packages/calcite-components/src/components/table-row/table-row.tsx @@ -70,12 +70,12 @@ export class Table implements LocalizedComponent { @Prop() selectedRowCountLocalized: string; /** @internal */ - @Prop() totalRowCount: number; + @Prop() bodyRowCount: number; @Watch("selected") @Watch("selectionMode") @Watch("selectedRowCount") - @Watch("totalRowCount") + @Watch("bodyRowCount") @Watch("numbered") handleCellChanges(): void { // todo need to ensure conditionally rendered cells @@ -288,13 +288,13 @@ export class Table implements LocalizedComponent { return this.rowType === "head" ? ( ) : this.rowType === "body" ? ( html` `; +export const complexWithFooter_TestOnly = (): string => html` + + + + + + + + + + + + cell + cell + + + cell + cell + + + cell + cell + + + cell + cell + cell + + + cell + cell + cell + + + cell + cell + + + cell + cell + + + cell + cell + + + foot + foot + foot + foot + + + foot + foot + +`; + +export const headersInRows_TestOnly = (): string => html` + + + cell + cell + cell + + + + cell + cell + cell + + + + cell + cell + cell + + + + cell + cell + cell + +`; + +export const headersInRowsAndHeadAndFooter_TestOnly = (): string => html` + + + + + + + + + cell + cell + cell + + + + cell + cell + cell + + + + cell + cell + cell + + + + cell + cell + cell + + + foot + foot + foot + foot + +`; + +export const complexNestingMultipleHeaderAndFooter = (): string => html` + + + + + + + + + + + + cell + cell + + + cell + cell + + + cell + cell + + + cell + cell + cell + + + cell + cell + cell + + + cell + cell + + + cell + cell + + + cell + cell + + + foot + foot + foot + foot + + + foot + foot + +`; + export const singleSelection_TestOnly = (): string => html` html` `; +export const selectionModeAndSelectedOnLoadWithMultipleFooterAndHeader_TestOnly = (): string => html` + + + + + + + + + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + + 58% happiness + + + + 24,212 + 58% happiness + + +`; + export const localized_TestOnly = (): string => html` this.lastRowInBody; - const enteringHeader = destination === "previous" && rowPos === this.firstRowInBody; - const enteringFooter = - this.footRows.length > 0 && destination === "next" && rowPos === this.lastRowInBody; + + const visibleBody = this.bodyRows?.filter((row) => !row.hidden); + const visibleAll = this.allRows?.filter((row) => !row.hidden); + + const firstBodyRow = visibleBody[0]?.positionAll; + const firstFootRow = this.footRows[0]?.positionAll; + const lastBodyRow = visibleBody[visibleBody.length - 1]?.positionAll; + const lastTableRow = visibleAll[visibleAll.length - 1]?.positionAll; + const lastHeadRow = this.headRows[this.headRows.length - 1]?.positionAll; + const leavingHeader = destination === "next" && rowPos === lastHeadRow; + const leavingFooter = destination === "previous" && rowPos === firstFootRow; + const enteringHeader = destination === "previous" && rowPos === firstBodyRow; + const enteringFooter = destination === "next" && rowPos === lastBodyRow; let rowPosition: number; + switch (destination) { case "first": rowPosition = 0; break; case "last": - rowPosition = this.lastRowInTable - 1; + rowPosition = lastTableRow; break; case "next": - rowPosition = leavingHeader - ? this.firstRowInBody - : enteringFooter - ? this.footRows[0].positionAll - : rowPos + 1; + rowPosition = leavingHeader ? firstBodyRow : enteringFooter ? firstFootRow : rowPos + 1; break; case "previous": - rowPosition = leavingFooter - ? this.lastRowInBody - : enteringHeader - ? this.headRows[this.headRows.length - 1].positionAll - : rowPos - 1; - + rowPosition = leavingFooter ? lastBodyRow : enteringHeader ? lastHeadRow : rowPos - 1; break; } const destinationCount = this.allRows?.find( @@ -257,12 +249,13 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen )?.cellCount; const adjustedPos = cellPosition > destinationCount ? destinationCount : cellPosition; - - this.calciteInternalTableRowFocusChange.emit({ - cellPosition: adjustedPos, - rowPosition, - destination, - }); + if (rowPosition !== undefined) { + this.calciteInternalTableRowFocusChange.emit({ + cellPosition: adjustedPos, + rowPosition, + destination, + }); + } } // -------------------------------------------------------------------------- // @@ -280,7 +273,6 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen const headRows = this.getSlottedRows(this.tableHeadSlotEl) || []; const bodyRows = this.getSlottedRows(this.tableBodySlotEl) || []; const footRows = this.getSlottedRows(this.tableFootSlotEl) || []; - const allRows = [...headRows, ...bodyRows, ...footRows]; headRows?.forEach((row) => { @@ -306,13 +298,13 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen allRows?.forEach((row) => { row.selectionMode = this.selectionMode; - row.totalRowCount = bodyRows?.length; + row.bodyRowCount = bodyRows?.length; row.positionAll = allRows?.indexOf(row); row.numbered = this.numbered; }); const colCount = - headRows?.length > 0 ? headRows[0]?.querySelectorAll("calcite-table-header")?.length : 0; + headRows[0]?.cellCount || headRows[0]?.querySelectorAll("calcite-table-header")?.length; this.colCount = colCount; this.headRows = headRows; @@ -338,17 +330,8 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen this.pageSize < 1 || (offsetBodyPos > this.currentPageStartRow && offsetBodyPos <= this.currentPageStartRow + this.pageSize); - row.hidden = !inView && !this.footRows.includes(row); }); - - const visibleBody = this.bodyRows?.filter((row) => !row.hidden); - const visibleAll = this.allRows?.filter((row) => !row.hidden); - - this.firstRowInBody = visibleBody[0]?.positionSection + 1; - this.lastRowInBody = visibleBody[visibleBody?.length - 1]?.positionSection + 1; - this.firstRowInTable = visibleAll[0]?.positionAll + 1; - this.lastRowInTable = visibleAll[visibleAll?.length - 1]?.positionAll + 1; }; private updateSelectedItems = (emit?: boolean): void => { @@ -359,7 +342,6 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen row.selectedRowCount = this.selectedCount; row.selectedRowCountLocalized = this.localizeNumber(this.selectedCount); }); - if (emit) { this.calciteTableSelect.emit(); } @@ -417,10 +399,10 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen }; const outOfViewCount = this.selectedItems?.filter((el) => el.hidden)?.length; - const localizedOutOfViewCount = this.localizeNumber(outOfViewCount?.toString()); + const localizedOutOfView = this.localizeNumber(outOfViewCount?.toString()); const localizedSelectedCount = this.localizeNumber(this.selectedCount?.toString()); const selectionText = `${localizedSelectedCount} ${this.messages.selected}`; - const outOfViewText = `${localizedOutOfViewCount} ${this.messages.hiddenSelected}`; + const outOfView = `${localizedOutOfView} ${this.messages.hiddenSelected}`; return (
@@ -432,13 +414,8 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen {selectionText} {outOfViewCount > 0 && ( - - {localizedOutOfViewCount} + + {localizedOutOfView} )} {this.selectedCount > 0 && ( diff --git a/packages/calcite-components/src/demos/table.html b/packages/calcite-components/src/demos/table.html index 814a7d8648b..41044162260 100644 --- a/packages/calcite-components/src/demos/table.html +++ b/packages/calcite-components/src/demos/table.html @@ -2359,6 +2359,10 @@

Complex keyboard test with multiple headers, selection, pagination using col foot foot + + foot + foot +

Headers in rows

@@ -2642,7 +2646,91 @@

selection-mode multiple and numbered including out of view and footer

+

selection-mode multiple and numbered including out of view and multiple header and footer

+ + + + + + + + + + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + + 58% happiness + + + + 24,212 + 58% happiness + + +

With selection-mode multiple and rich cell content

From ec94f09d20d3871a58aecd363f3ff571e5a53ba8 Mon Sep 17 00:00:00 2001 From: Adam Date: Sat, 26 Aug 2023 17:57:08 -0700 Subject: [PATCH 08/44] WIP - Table --- .../components/table-header/table-header.tsx | 1 - .../src/components/table-row/table-row.tsx | 12 +++- .../src/components/table/interfaces.ts | 1 + .../src/components/table/table.scss | 6 +- .../src/components/table/table.stories.ts | 60 ------------------- .../src/components/table/table.tsx | 9 ++- 6 files changed, 22 insertions(+), 67 deletions(-) diff --git a/packages/calcite-components/src/components/table-header/table-header.tsx b/packages/calcite-components/src/components/table-header/table-header.tsx index 6b94c0013eb..4a1a621f02d 100644 --- a/packages/calcite-components/src/components/table-header/table-header.tsx +++ b/packages/calcite-components/src/components/table-header/table-header.tsx @@ -189,7 +189,6 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo const allSelected = this.selectedRowCount === this.bodyRowCount; const selectionIcon = allSelected ? "check-square-f" : "check-square"; - // test this.focusable and reading screen text in safari return ( index + 1 === position); + const cellPosition = lastCell + ? this.rowCells[this.rowCells.length - 1] + : (this.rowCells as any)?.find((_, index) => index + 1 === position); + if (cellPosition) { cellPosition.setFocus(); } @@ -202,7 +206,7 @@ export class Table implements LocalizedComponent { break; case "End": if (isControl) { - this.emitTableRowFocusRequest(this.rowCells?.length, this.positionAll, "last"); + this.emitTableRowFocusRequest(this.rowCells?.length, this.positionAll, "last", true); event.preventDefault(); } else { focusElementInGroup(cells, el, "last", false); @@ -216,12 +220,14 @@ export class Table implements LocalizedComponent { private emitTableRowFocusRequest = ( cellPosition: number, rowPosition: number, - destination: FocusElementInGroupDestination + destination: FocusElementInGroupDestination, + lastCell?: boolean ): void => { this.calciteInternalTableRowFocusRequest.emit({ cellPosition, rowPosition, destination, + lastCell, }); }; diff --git a/packages/calcite-components/src/components/table/interfaces.ts b/packages/calcite-components/src/components/table/interfaces.ts index 75a7dcfa350..90f24e94c7f 100644 --- a/packages/calcite-components/src/components/table/interfaces.ts +++ b/packages/calcite-components/src/components/table/interfaces.ts @@ -4,6 +4,7 @@ export interface TableRowFocusEvent { cellPosition: number; rowPosition: number; destination: FocusElementInGroupDestination; + lastCell: boolean; } export type RowType = "head" | "body" | "foot"; diff --git a/packages/calcite-components/src/components/table/table.scss b/packages/calcite-components/src/components/table/table.scss index 5bbd6ba61eb..30c55c2af23 100644 --- a/packages/calcite-components/src/components/table/table.scss +++ b/packages/calcite-components/src/components/table/table.scss @@ -36,6 +36,10 @@ table { border-block-end: 1px solid var(--calcite-ui-border-3); } +tbody { + border-block-end: 1px solid var(--calcite-ui-border-3); +} + thead { @apply sticky top-0 z-sticky; } @@ -88,7 +92,7 @@ tfoot { .pagination-area { @apply flex flex-row w-full justify-center; padding-block: var(--calcite-table-cell-padding-internal); - border-block-end: 1px solid var(--calcite-ui-border-3); + border-block: 1px solid var(--calcite-ui-border-3); } @include base-component(); diff --git a/packages/calcite-components/src/components/table/table.stories.ts b/packages/calcite-components/src/components/table/table.stories.ts index 176774b5062..251bac6cada 100644 --- a/packages/calcite-components/src/components/table/table.stories.ts +++ b/packages/calcite-components/src/components/table/table.stories.ts @@ -532,66 +532,6 @@ export const headersInRowsAndHeadAndFooter_TestOnly = (): string => html` `; -export const complexNestingMultipleHeaderAndFooter = (): string => html` - - - - - - - - - - - - cell - cell - - - cell - cell - - - cell - cell - - - cell - cell - cell - - - cell - cell - cell - - - cell - cell - - - cell - cell - - - cell - cell - - - foot - foot - foot - foot - - - foot - foot - -`; - export const singleSelection_TestOnly = (): string => html` !row.hidden); const visibleAll = this.allRows?.filter((row) => !row.hidden); + const lastHeadRow = this.headRows[this.headRows.length - 1]?.positionAll; const firstBodyRow = visibleBody[0]?.positionAll; - const firstFootRow = this.footRows[0]?.positionAll; const lastBodyRow = visibleBody[visibleBody.length - 1]?.positionAll; + const firstFootRow = this.footRows[0]?.positionAll; const lastTableRow = visibleAll[visibleAll.length - 1]?.positionAll; - const lastHeadRow = this.headRows[this.headRows.length - 1]?.positionAll; + const leavingHeader = destination === "next" && rowPos === lastHeadRow; const leavingFooter = destination === "previous" && rowPos === firstFootRow; const enteringHeader = destination === "previous" && rowPos === firstBodyRow; @@ -244,16 +246,19 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen rowPosition = leavingFooter ? lastBodyRow : enteringHeader ? lastHeadRow : rowPos - 1; break; } + const destinationCount = this.allRows?.find( (row) => row.positionAll === rowPosition )?.cellCount; const adjustedPos = cellPosition > destinationCount ? destinationCount : cellPosition; + if (rowPosition !== undefined) { this.calciteInternalTableRowFocusChange.emit({ cellPosition: adjustedPos, rowPosition, destination, + lastCell, }); } } From 66ed20e711664aba9fe0b513cd50cccd919af426 Mon Sep 17 00:00:00 2001 From: Adam Date: Sat, 26 Aug 2023 20:57:21 -0700 Subject: [PATCH 09/44] WIP - Table --- .../src/components/table/table.e2e.ts | 357 ++++++++++++++++-- .../src/components/table/table.scss | 3 +- .../src/components/table/table.tsx | 6 - .../calcite-components/src/demos/table.html | 6 +- 4 files changed, 323 insertions(+), 49 deletions(-) diff --git a/packages/calcite-components/src/components/table/table.e2e.ts b/packages/calcite-components/src/components/table/table.e2e.ts index 133a0d7f286..4094a7f315c 100644 --- a/packages/calcite-components/src/components/table/table.e2e.ts +++ b/packages/calcite-components/src/components/table/table.e2e.ts @@ -1,6 +1,8 @@ // import { newE2EPage } from "@stencil/core/testing"; +import { E2EPage, newE2EPage } from "@stencil/core/testing"; import { html } from "../../../support/formatting"; import { accessible, renders, hidden, defaults, reflects } from "../../tests/commonTests"; +import { GlobalTestProps } from "../../tests/utils"; describe("calcite-table", () => { describe("renders", () => { @@ -390,10 +392,282 @@ describe("calcite-table", () => { }); }); +describe("selection modes", () => { + it("selection mode single allows one or no rows to be selected", async () => { + const page = await newE2EPage(); + await page.setContent( + html` + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + ` + ); + + await assertSelectedItems.setUpEvents(page); + + const element = await page.find("calcite-table"); + const row1 = await page.find("#row-1"); + const row2 = await page.find("#row-2"); + const row3 = await page.find("#row-3"); + + const tableSelectSpy = await element.spyOnEvent("calciteTableSelect"); + const rowSelectSpy1 = await row1.spyOnEvent("calciteTableRowSelect"); + const rowSelectSpy2 = await row2.spyOnEvent("calciteTableRowSelect"); + const rowSelectSpy3 = await row3.spyOnEvent("calciteTableRowSelect"); + + await page.waitForChanges(); + expect(tableSelectSpy).toHaveReceivedEventTimes(0); + expect(rowSelectSpy1).toHaveReceivedEventTimes(0); + expect(rowSelectSpy2).toHaveReceivedEventTimes(0); + expect(rowSelectSpy3).toHaveReceivedEventTimes(0); + + expect(await element.getProperty("selectedItems")).toHaveLength(1); + await assertSelectedItems(page, { expectedItemIds: [row3.id] }); + + await page.$eval("calcite-table", () => { + const row = document.getElementById("row-1"); + const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child") as HTMLCalciteTableCellElement; + cell.click(); + }); + + await page.waitForChanges(); + expect(await tableSelectSpy).toHaveReceivedEventTimes(1); + expect(await rowSelectSpy1).toHaveReceivedEventTimes(1); + expect(await rowSelectSpy2).toHaveReceivedEventTimes(0); + expect(await rowSelectSpy3).toHaveReceivedEventTimes(0); + expect(await row1.getProperty("selected")).toBe(true); + expect(await row2.getProperty("selected")).toBe(false); + expect(await row3.getProperty("selected")).toBe(false); + expect(await element.getProperty("selectedItems")).toHaveLength(1); + await assertSelectedItems(page, { expectedItemIds: [row1.id] }); + + await page.$eval("calcite-table", () => { + const row = document.getElementById("row-2"); + const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child") as HTMLCalciteTableCellElement; + cell.click(); + }); + + await page.waitForChanges(); + expect(tableSelectSpy).toHaveReceivedEventTimes(2); + expect(rowSelectSpy1).toHaveReceivedEventTimes(1); + expect(rowSelectSpy2).toHaveReceivedEventTimes(1); + expect(rowSelectSpy3).toHaveReceivedEventTimes(0); + expect(await row1.getProperty("selected")).toBe(false); + expect(await row2.getProperty("selected")).toBe(true); + expect(await row3.getProperty("selected")).toBe(false); + expect(await element.getProperty("selectedItems")).toHaveLength(1); + await assertSelectedItems(page, { expectedItemIds: [row2.id] }); + + await page.$eval("calcite-table", () => { + const row = document.getElementById("row-3"); + const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child") as HTMLCalciteTableCellElement; + cell.click(); + }); + + await page.waitForChanges(); + expect(tableSelectSpy).toHaveReceivedEventTimes(3); + expect(rowSelectSpy1).toHaveReceivedEventTimes(1); + expect(rowSelectSpy2).toHaveReceivedEventTimes(1); + expect(rowSelectSpy3).toHaveReceivedEventTimes(1); + expect(await row1.getProperty("selected")).toBe(false); + expect(await row2.getProperty("selected")).toBe(false); + expect(await row3.getProperty("selected")).toBe(true); + expect(await element.getProperty("selectedItems")).toHaveLength(1); + await assertSelectedItems(page, { expectedItemIds: [row3.id] }); + + await page.$eval("calcite-table", () => { + const row = document.getElementById("row-3"); + const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child") as HTMLCalciteTableCellElement; + cell.click(); + }); + + await page.waitForChanges(); + expect(tableSelectSpy).toHaveReceivedEventTimes(4); + expect(rowSelectSpy1).toHaveReceivedEventTimes(1); + expect(rowSelectSpy2).toHaveReceivedEventTimes(1); + expect(rowSelectSpy3).toHaveReceivedEventTimes(2); + expect(await row1.getProperty("selected")).toBe(false); + expect(await row2.getProperty("selected")).toBe(false); + expect(await row3.getProperty("selected")).toBe(false); + + expect(await element.getProperty("selectedItems")).toEqual([]); + await assertSelectedItems(page, { expectedItemIds: [] }); + }); + + it("selection mode multiple allows one, multiple, or no rows to be selected", async () => { + const page = await newE2EPage(); + await page.setContent( + html` + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + ` + ); + + await assertSelectedItems.setUpEvents(page); + + const element = await page.find("calcite-table"); + const row1 = await page.find("#row-1"); + const row2 = await page.find("#row-2"); + const row3 = await page.find("#row-3"); + + const tableSelectSpy = await element.spyOnEvent("calciteTableSelect"); + const rowSelectSpy1 = await row1.spyOnEvent("calciteTableRowSelect"); + const rowSelectSpy2 = await row2.spyOnEvent("calciteTableRowSelect"); + const rowSelectSpy3 = await row3.spyOnEvent("calciteTableRowSelect"); + + await page.waitForChanges(); + + expect(tableSelectSpy).toHaveReceivedEventTimes(0); + expect(rowSelectSpy1).toHaveReceivedEventTimes(0); + expect(rowSelectSpy2).toHaveReceivedEventTimes(0); + expect(rowSelectSpy3).toHaveReceivedEventTimes(0); + + expect(await element.getProperty("selectedItems")).toHaveLength(2); + await assertSelectedItems(page, { expectedItemIds: [row2.id, row3.id] }); + + await page.$eval("calcite-table", () => { + const row = document.getElementById("row-1"); + const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child") as HTMLCalciteTableCellElement; + cell.click(); + }); + + await page.waitForChanges(); + expect(await tableSelectSpy).toHaveReceivedEventTimes(1); + expect(await rowSelectSpy1).toHaveReceivedEventTimes(1); + expect(await rowSelectSpy2).toHaveReceivedEventTimes(0); + expect(await rowSelectSpy3).toHaveReceivedEventTimes(0); + expect(await row1.getProperty("selected")).toBe(true); + expect(await row2.getProperty("selected")).toBe(true); + expect(await row3.getProperty("selected")).toBe(true); + expect(await element.getProperty("selectedItems")).toHaveLength(3); + await assertSelectedItems(page, { expectedItemIds: [row1.id, row2.id, row3.id] }); + + await page.$eval("calcite-table", () => { + const row = document.getElementById("row-2"); + const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child") as HTMLCalciteTableCellElement; + cell.click(); + }); + + await page.waitForChanges(); + expect(tableSelectSpy).toHaveReceivedEventTimes(2); + expect(rowSelectSpy1).toHaveReceivedEventTimes(1); + expect(rowSelectSpy2).toHaveReceivedEventTimes(1); + expect(rowSelectSpy3).toHaveReceivedEventTimes(0); + expect(await row1.getProperty("selected")).toBe(true); + expect(await row2.getProperty("selected")).toBe(false); + expect(await row3.getProperty("selected")).toBe(true); + expect(await element.getProperty("selectedItems")).toHaveLength(2); + await assertSelectedItems(page, { expectedItemIds: [row1.id, row3.id] }); + + await page.$eval("calcite-table", () => { + const row = document.getElementById("row-3"); + const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child") as HTMLCalciteTableCellElement; + cell.click(); + }); + + await page.waitForChanges(); + expect(tableSelectSpy).toHaveReceivedEventTimes(3); + expect(rowSelectSpy1).toHaveReceivedEventTimes(1); + expect(rowSelectSpy2).toHaveReceivedEventTimes(1); + expect(rowSelectSpy3).toHaveReceivedEventTimes(1); + expect(await row1.getProperty("selected")).toBe(true); + expect(await row2.getProperty("selected")).toBe(false); + expect(await row3.getProperty("selected")).toBe(false); + expect(await element.getProperty("selectedItems")).toHaveLength(1); + await assertSelectedItems(page, { expectedItemIds: [row1.id] }); + + await page.$eval("calcite-table", () => { + const row = document.getElementById("row-1"); + const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child") as HTMLCalciteTableCellElement; + cell.click(); + }); + + await page.waitForChanges(); + expect(tableSelectSpy).toHaveReceivedEventTimes(4); + expect(rowSelectSpy1).toHaveReceivedEventTimes(2); + expect(rowSelectSpy2).toHaveReceivedEventTimes(1); + expect(rowSelectSpy3).toHaveReceivedEventTimes(1); + expect(await row1.getProperty("selected")).toBe(false); + expect(await row2.getProperty("selected")).toBe(false); + expect(await row3.getProperty("selected")).toBe(false); + + expect(await element.getProperty("selectedItems")).toEqual([]); + await assertSelectedItems(page, { expectedItemIds: [] }); + }); + + it("correctly has no selected items after user clears selection via clear button", async () => { + // + }); + + it("correctly has all items selected after user uses select all cell while none selected", async () => { + // + }); + + it("correctly has all items selected after user uses select all cell while some selected", async () => { + // + }); + + it("correctly has no items selected after user uses select none cell while all selected", async () => { + // + }); + + it("correctly maintains selected items if they are paginated out of view", async () => { + // + }); +}); + +describe("pagination event", () => { + it("correctly emits table page event on user interaction with pagination", async () => { + // + }); +}); + describe("keyboard navigation", () => { it("navigates correctly when no pagination present", async () => { // - // press home expect }); it("navigates correctly when pagination present and first page displayed", async () => { // @@ -416,47 +690,54 @@ describe("keyboard navigation", () => { it("navigates correctly skipping disabled rows when disabled rows in last position", async () => { // }); -}); - -describe("selection modes", () => { - it("allows one item to be selected in single selection mode with correct events", async () => { - // make sure rendered chip shows right number - // make sure event emit correct elements + it("navigates correctly when multiple header and multiple footer rows", async () => { + // }); - it("allows none, one, or multiple items to be selected in multiple selection mode with correct events", async () => { - // make sure rendered chip shows right number - // make sure event emit correct elements + it("navigates correctly after changing page size and updating visible rows", async () => { + // }); +}); - it("correctly emits 0 items after user clears selection via clear button", async () => { - // make sure rendered chip shows right number - // make sure event emit correct elements - }); +// Borrowed from Dropdown until a generic utility is set up. +interface SelectedItemsAssertionOptions { + /** + * IDs from items to assert selection + */ + expectedItemIds: string[]; +} - it("correctly emits after user clears selection via select all button", async () => { - // make sure rendered chip shows right number - // make sure event emit correct elements +/** + * Test helper for selected calcite-table-row items. Expects items to have IDs to test against. + * + * Note: assertSelectedItems.setUpEvents must be called before using this method + * + * @param page + * @param root0 + * @param root0.expectedItemIds + */ +async function assertSelectedItems(page: E2EPage, { expectedItemIds }: SelectedItemsAssertionOptions): Promise { + await page.waitForTimeout(100); + const selectedItemIds = await page.evaluate(() => { + const table = document.querySelector("calcite-table"); + return table.selectedItems.map((item) => item.id); }); - it("correctly maintains selected items in count and event that have been navigated away from via pagination", async () => { - // make sure rendered chip shows right number - // make sure event emit correct elements - // change page - // make sure rendered chip shows right number - // make sure "out of view" chip visible and shows right number - // make sure event emit correct elements - // change page to third page - // make sure rendered chip shows right number - // make sure "out of view" chip visible and shows right number - // make sure event emit correct elements - // change page to third page - // make sure rendered chip shows right number - // make sure "out of view" chip visible and shows right number - // make sure event emit correct elements - }); -}); + expect(selectedItemIds).toHaveLength(expectedItemIds.length); + + expectedItemIds.forEach((itemId, index) => expect(selectedItemIds[index]).toEqual(itemId)); +} -// page size updates re-create keyboard navigation arrays -// can correctly keyboard navigate through two levels of headers to body rows and back -// ensure keyboard navigation works after page size updates and more rows visible -// correct assistive hidden text rendered for : table header number cell, table header single select, table header multiple select +type SelectionEventTestWindow = GlobalTestProps<{ eventDetail: Selection }>; + +/** + * Helper to wire up the page to assert on the event detail + * + * @param page + */ +assertSelectedItems.setUpEvents = async (page: E2EPage) => { + await page.evaluate(() => { + document.addEventListener("calciteTableSelect", ({ detail }: CustomEvent) => { + (window as SelectionEventTestWindow).eventDetail = detail; + }); + }); +}; diff --git a/packages/calcite-components/src/components/table/table.scss b/packages/calcite-components/src/components/table/table.scss index 30c55c2af23..a6f8b442d48 100644 --- a/packages/calcite-components/src/components/table/table.scss +++ b/packages/calcite-components/src/components/table/table.scss @@ -74,7 +74,6 @@ tfoot { .selection-area { @apply flex flex-row items-center; padding-block: var(--calcite-table-cell-padding-internal); - border-block-start: 1px solid var(--calcite-ui-border-3); } .selection-area calcite-chip:last-of-type { @@ -92,7 +91,7 @@ tfoot { .pagination-area { @apply flex flex-row w-full justify-center; padding-block: var(--calcite-table-cell-padding-internal); - border-block: 1px solid var(--calcite-ui-border-3); + border-block-start: 1px solid var(--calcite-ui-border-3); } @include base-component(); diff --git a/packages/calcite-components/src/components/table/table.tsx b/packages/calcite-components/src/components/table/table.tsx index 2e0e427312c..3d01f89ea42 100644 --- a/packages/calcite-components/src/components/table/table.tsx +++ b/packages/calcite-components/src/components/table/table.tsx @@ -397,12 +397,6 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen // -------------------------------------------------------------------------- renderSelectionArea(): VNode { - numberStringFormatter.numberFormatOptions = { - locale: this.effectiveLocale, - numberingSystem: this.numberingSystem, - useGrouping: this.groupSeparator, - }; - const outOfViewCount = this.selectedItems?.filter((el) => el.hidden)?.length; const localizedOutOfView = this.localizeNumber(outOfViewCount?.toString()); const localizedSelectedCount = this.localizeNumber(this.selectedCount?.toString()); diff --git a/packages/calcite-components/src/demos/table.html b/packages/calcite-components/src/demos/table.html index 41044162260..385cee309f4 100644 --- a/packages/calcite-components/src/demos/table.html +++ b/packages/calcite-components/src/demos/table.html @@ -230,7 +230,7 @@ - +

Interactive

@@ -2414,7 +2414,7 @@

Headers in rows and table-head

cell - + cell cell cell @@ -2426,7 +2426,7 @@

Headers in rows and table-head

cell - foot + foot foot foot From e41291031b4f1b06fb7f6476448b99647169a309 Mon Sep 17 00:00:00 2001 From: Adam Date: Sun, 27 Aug 2023 08:44:47 -0700 Subject: [PATCH 10/44] WIP - Table --- .../src/components/table/table.e2e.ts | 1237 +++++++++++++++-- .../src/components/table/table.tsx | 13 +- .../calcite-components/src/demos/table.html | 44 +- 3 files changed, 1144 insertions(+), 150 deletions(-) diff --git a/packages/calcite-components/src/components/table/table.e2e.ts b/packages/calcite-components/src/components/table/table.e2e.ts index 4094a7f315c..f70536ceb30 100644 --- a/packages/calcite-components/src/components/table/table.e2e.ts +++ b/packages/calcite-components/src/components/table/table.e2e.ts @@ -11,26 +11,18 @@ describe("calcite-table", () => { - - cell cell - cell - cell cell cell - cell - cell cell cell - cell - cell `, { display: "table" } @@ -102,26 +94,18 @@ describe("calcite-table", () => { - - cell cell - cell - cell cell cell - cell - cell cell cell - cell - cell ` ); @@ -133,26 +117,18 @@ describe("calcite-table", () => { - - cell cell - cell - cell cell cell - cell - cell cell cell - cell - cell ` ); @@ -164,26 +140,18 @@ describe("calcite-table", () => { - - cell cell - cell - cell cell cell - cell - cell cell cell - cell - cell ` ); @@ -195,26 +163,18 @@ describe("calcite-table", () => { - - cell cell - cell - cell cell cell - cell - cell cell cell - cell - cell ` ); @@ -226,26 +186,18 @@ describe("calcite-table", () => { - - cell cell - cell - cell cell cell - cell - cell cell cell - cell - cell ` ); @@ -257,26 +209,18 @@ describe("calcite-table", () => { - - cell cell - cell - cell cell cell - cell - cell cell cell - cell - cell ` ); @@ -287,50 +231,34 @@ describe("calcite-table", () => { - - cell cell - cell - cell cell cell - cell - cell cell cell - cell - cell cell cell - cell - cell cell cell - cell - cell cell cell - cell - cell cell cell - cell - cell ` ); @@ -341,50 +269,34 @@ describe("calcite-table", () => { - - cell cell - cell - cell cell cell - cell - cell cell cell - cell - cell cell cell - cell - cell cell cell - cell - cell cell cell - cell - cell cell cell - cell - cell ` ); @@ -400,26 +312,18 @@ describe("selection modes", () => { - - cell cell - cell - cell cell cell - cell - cell cell cell - cell - cell ` ); @@ -522,26 +426,18 @@ describe("selection modes", () => { - - cell cell - cell - cell cell cell - cell - cell cell cell - cell - cell ` ); @@ -639,61 +535,1120 @@ describe("selection modes", () => { }); it("correctly has no selected items after user clears selection via clear button", async () => { - // + const page = await newE2EPage(); + await page.setContent( + html` + + + + + + cell + cell + + + cell + cell + + + cell + cell + + ` + ); + + await assertSelectedItems.setUpEvents(page); + const element = await page.find("calcite-table"); + const row1 = await page.find("#row-1"); + const row2 = await page.find("#row-2"); + const row3 = await page.find("#row-3"); + + const tableSelectSpy = await element.spyOnEvent("calciteTableSelect"); + await page.waitForChanges(); + + expect(tableSelectSpy).toHaveReceivedEventTimes(0); + expect(await element.getProperty("selectedItems")).toHaveLength(2); + await assertSelectedItems(page, { expectedItemIds: [row2.id, row3.id] }); + + await page.$eval("calcite-table", () => { + const table = document.querySelector("calcite-table"); + const button = table?.shadowRoot.querySelector("calcite-button"); + button?.click(); + }); + + await page.waitForChanges(); + expect(tableSelectSpy).toHaveReceivedEventTimes(1); + expect(await row1.getProperty("selected")).toBe(false); + expect(await row2.getProperty("selected")).toBe(false); + expect(await row3.getProperty("selected")).toBe(false); + expect(await element.getProperty("selectedItems")).toHaveLength(0); + await assertSelectedItems(page, { expectedItemIds: [] }); }); it("correctly has all items selected after user uses select all cell while none selected", async () => { - // - }); + const page = await newE2EPage(); + await page.setContent( + html` + + + + + + cell + cell + + + cell + cell + + + cell + cell + + ` + ); - it("correctly has all items selected after user uses select all cell while some selected", async () => { - // - }); + await assertSelectedItems.setUpEvents(page); + const element = await page.find("calcite-table"); + const row1 = await page.find("#row-1"); + const row2 = await page.find("#row-2"); + const row3 = await page.find("#row-3"); - it("correctly has no items selected after user uses select none cell while all selected", async () => { - // - }); + const tableSelectSpy = await element.spyOnEvent("calciteTableSelect"); + await page.waitForChanges(); - it("correctly maintains selected items if they are paginated out of view", async () => { - // - }); -}); + expect(tableSelectSpy).toHaveReceivedEventTimes(0); + expect(await element.getProperty("selectedItems")).toHaveLength(0); + await assertSelectedItems(page, { expectedItemIds: [] }); -describe("pagination event", () => { - it("correctly emits table page event on user interaction with pagination", async () => { - // - }); -}); + await page.$eval("calcite-table", () => { + const row = document.getElementById("row-head"); + const cell = row.shadowRoot.querySelector("calcite-table-header:first-child") as HTMLCalciteTableHeaderElement; + cell.click(); + }); -describe("keyboard navigation", () => { - it("navigates correctly when no pagination present", async () => { - // - }); - it("navigates correctly when pagination present and first page displayed", async () => { - // - }); - it("navigates correctly when pagination present, and navigation to another page occurs", async () => { - // - }); - it("navigates correctly skipping disabled rows", async () => { - // + await page.waitForChanges(); + expect(tableSelectSpy).toHaveReceivedEventTimes(1); + expect(await row1.getProperty("selected")).toBe(true); + expect(await row2.getProperty("selected")).toBe(true); + expect(await row3.getProperty("selected")).toBe(true); + expect(await element.getProperty("selectedItems")).toHaveLength(3); + await assertSelectedItems(page, { expectedItemIds: [row1.id, row2.id, row3.id] }); }); - it("navigates correctly when selection column present", async () => { - // + + it("correctly has all items selected after user uses select all cell while none selected and multiple pages", async () => { + const page = await newE2EPage(); + await page.setContent( + html` + + + + + + cell + cell + + + cell + cell + + + cell + cell + + ` + ); + + await assertSelectedItems.setUpEvents(page); + const element = await page.find("calcite-table"); + const row1 = await page.find("#row-1"); + const row2 = await page.find("#row-2"); + const row3 = await page.find("#row-3"); + + const tableSelectSpy = await element.spyOnEvent("calciteTableSelect"); + await page.waitForChanges(); + + expect(tableSelectSpy).toHaveReceivedEventTimes(0); + expect(await element.getProperty("selectedItems")).toHaveLength(0); + await assertSelectedItems(page, { expectedItemIds: [] }); + + await page.$eval("calcite-table", () => { + const row = document.getElementById("row-head"); + const cell = row.shadowRoot.querySelector("calcite-table-header:first-child") as HTMLCalciteTableHeaderElement; + cell.click(); + }); + + await page.waitForChanges(); + expect(tableSelectSpy).toHaveReceivedEventTimes(1); + expect(await row1.getProperty("selected")).toBe(true); + expect(await row2.getProperty("selected")).toBe(true); + expect(await row3.getProperty("selected")).toBe(true); + expect(await element.getProperty("selectedItems")).toHaveLength(3); + await assertSelectedItems(page, { expectedItemIds: [row1.id, row2.id, row3.id] }); }); - it("navigates correctly when number column present", async () => { + + it("correctly has all items selected after user uses select all cell while some selected", async () => { + const page = await newE2EPage(); + await page.setContent( + html` + + + + + + cell + cell + + + cell + cell + + + cell + cell + + ` + ); + + await assertSelectedItems.setUpEvents(page); + const element = await page.find("calcite-table"); + const row1 = await page.find("#row-1"); + const row2 = await page.find("#row-2"); + const row3 = await page.find("#row-3"); + + const tableSelectSpy = await element.spyOnEvent("calciteTableSelect"); + await page.waitForChanges(); + + expect(tableSelectSpy).toHaveReceivedEventTimes(0); + expect(await row1.getProperty("selected")).toBe(false); + expect(await row2.getProperty("selected")).toBe(true); + expect(await row3.getProperty("selected")).toBe(false); + expect(await element.getProperty("selectedItems")).toHaveLength(1); + await assertSelectedItems(page, { expectedItemIds: [row2.id] }); + + await page.$eval("calcite-table", () => { + const row = document.getElementById("row-head"); + const cell = row.shadowRoot.querySelector("calcite-table-header:first-child") as HTMLCalciteTableHeaderElement; + cell.click(); + }); + + await page.waitForChanges(); + expect(await tableSelectSpy).toHaveReceivedEventTimes(1); + expect(await row1.getProperty("selected")).toBe(true); + expect(await row2.getProperty("selected")).toBe(true); + expect(await row3.getProperty("selected")).toBe(true); + expect(await element.getProperty("selectedItems")).toHaveLength(3); + await assertSelectedItems(page, { expectedItemIds: [row1.id, row2.id, row3.id] }); + }); + + it("correctly has no items selected after user uses select none cell while all selected", async () => { + const page = await newE2EPage(); + await page.setContent( + html` + + + + + + cell + cell + + + cell + cell + + + cell + cell + + ` + ); + + await assertSelectedItems.setUpEvents(page); + const element = await page.find("calcite-table"); + const row1 = await page.find("#row-1"); + const row2 = await page.find("#row-2"); + const row3 = await page.find("#row-3"); + + const tableSelectSpy = await element.spyOnEvent("calciteTableSelect"); + await page.waitForChanges(); + + expect(tableSelectSpy).toHaveReceivedEventTimes(0); + expect(await row1.getProperty("selected")).toBe(true); + expect(await row2.getProperty("selected")).toBe(true); + expect(await row3.getProperty("selected")).toBe(true); + expect(await element.getProperty("selectedItems")).toHaveLength(3); + await assertSelectedItems(page, { expectedItemIds: [row1.id, row2.id, row3.id] }); + + await page.$eval("calcite-table", () => { + const row = document.getElementById("row-head"); + const cell = row.shadowRoot.querySelector("calcite-table-header:first-child") as HTMLCalciteTableHeaderElement; + cell.click(); + }); + + await page.waitForChanges(); + expect(await tableSelectSpy).toHaveReceivedEventTimes(1); + expect(await row1.getProperty("selected")).toBe(false); + expect(await row2.getProperty("selected")).toBe(false); + expect(await row3.getProperty("selected")).toBe(false); + expect(await element.getProperty("selectedItems")).toHaveLength(0); + await assertSelectedItems(page, { expectedItemIds: [] }); + }); + + it("correctly maintains selected items if they are paginated out of view", async () => { + const page = await newE2EPage(); + await page.setContent( + html` + + + + + + cell + cell + + + cell + cell + + + cell + cell + + ` + ); + + await assertSelectedItems.setUpEvents(page); + const element = await page.find("calcite-table"); + const row1 = await page.find("#row-1"); + const row2 = await page.find("#row-2"); + const row3 = await page.find("#row-3"); + + const tableSelectSpy = await element.spyOnEvent("calciteTableSelect"); + const tablePaginateSpy = await element.spyOnEvent("calciteTablePageSelect"); + + await page.waitForChanges(); + + expect(tableSelectSpy).toHaveReceivedEventTimes(0); + expect(tablePaginateSpy).toHaveReceivedEventTimes(0); + expect(await row1.getProperty("selected")).toBe(true); + expect(await row2.getProperty("selected")).toBe(false); + expect(await row3.getProperty("selected")).toBe(false); + expect(await element.getProperty("selectedItems")).toHaveLength(1); + await assertSelectedItems(page, { expectedItemIds: [row1.id] }); + + await page.$eval("calcite-table", () => { + const table = document.querySelector("calcite-table"); + const pagination = table?.shadowRoot.querySelector("calcite-pagination"); + const button = pagination?.shadowRoot.querySelector("button.page:nth-of-type(2)") as HTMLButtonElement; + button?.click(); + }); + + await page.waitForChanges(); + expect(tableSelectSpy).toHaveReceivedEventTimes(0); + expect(tablePaginateSpy).toHaveReceivedEventTimes(1); + expect(await row1.getProperty("selected")).toBe(true); + expect(await row2.getProperty("selected")).toBe(false); + expect(await row3.getProperty("selected")).toBe(false); + expect(await element.getProperty("selectedItems")).toHaveLength(1); + await assertSelectedItems(page, { expectedItemIds: [row1.id] }); + }); +}); + +describe("pagination event", () => { + it("correctly emits pagination event", async () => { + const page = await newE2EPage(); + await page.setContent( + html` + + + + + + cell + cell + + + cell + cell + + + cell + cell + + ` + ); + + await assertSelectedItems.setUpEvents(page); + const element = await page.find("calcite-table"); + const tablePaginateSpy = await element.spyOnEvent("calciteTablePageSelect"); + await page.waitForChanges(); + + expect(tablePaginateSpy).toHaveReceivedEventTimes(0); + + await page.$eval("calcite-table", () => { + const table = document.querySelector("calcite-table"); + const pagination = table?.shadowRoot.querySelector("calcite-pagination"); + const button = pagination?.shadowRoot.querySelector("button:nth-of-type(2)") as HTMLButtonElement; + button?.click(); + }); + + await page.waitForChanges(); + expect(tablePaginateSpy).toHaveReceivedEventTimes(1); + + await page.$eval("calcite-table", () => { + const table = document.querySelector("calcite-table"); + const pagination = table?.shadowRoot.querySelector("calcite-pagination"); + const button = pagination?.shadowRoot.querySelector("button:nth-of-type(3)") as HTMLButtonElement; + button?.click(); + }); + + await page.waitForChanges(); + expect(tablePaginateSpy).toHaveReceivedEventTimes(2); + + await page.$eval("calcite-table", () => { + const table = document.querySelector("calcite-table"); + const pagination = table?.shadowRoot.querySelector("calcite-pagination"); + const button = pagination?.shadowRoot.querySelector("button:nth-of-type(4)") as HTMLButtonElement; + button?.click(); + }); + + await page.waitForChanges(); + expect(tablePaginateSpy).toHaveReceivedEventTimes(3); + }); +}); + +describe("keyboard navigation", () => { + it("navigates correctly when no pagination or selection present", async () => { + const page = await newE2EPage(); + await page.setContent( + html` + + + + + + cell + cell + + + cell + cell + + + cell + cell + + ` + ); + + await page.keyboard.press("Tab"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + await page.keyboard.press("ArrowRight"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1b"); + await page.keyboard.press("PageDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-3b"); + await page.keyboard.press("Home"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-3a"); + await page.keyboard.press("PageUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + await page.keyboard.press("PageUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + await page.keyboard.press("ArrowDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-1a"); + await page.keyboard.press("ArrowDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2a"); + await page.keyboard.press("End"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2b"); + await page.keyboard.press("Home"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2a"); + page.keyboard.press("ControlLeft"); + await page.keyboard.press("End"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-3b"); + page.keyboard.press("ControlLeft"); + await page.keyboard.press("Home"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + page.keyboard.press("ControlRight"); + await page.keyboard.press("End"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-3b"); + page.keyboard.press("ControlRight"); + await page.keyboard.press("Home"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + }); + + it("navigates correctly when pagination present and first page displayed", async () => { + const page = await newE2EPage(); + await page.setContent( + html` + + + + + + cell + cell + + + cell + cell + + + cell + cell + + + cell + cell + + + cell + cell + + ` + ); + + await page.keyboard.press("Tab"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + await page.keyboard.press("ArrowRight"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1b"); + await page.keyboard.press("PageDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2b"); + await page.keyboard.press("Home"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2a"); + await page.keyboard.press("PageUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + await page.keyboard.press("PageUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + await page.keyboard.press("ArrowDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-1a"); + await page.keyboard.press("ArrowDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2a"); + await page.keyboard.press("ArrowDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2a"); + await page.keyboard.press("End"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2b"); + page.keyboard.press("ControlLeft"); + await page.keyboard.press("End"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2b"); + page.keyboard.press("ControlLeft"); + await page.keyboard.press("Home"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + }); + + it("navigates correctly when pagination present, and navigation to two other pages occurs", async () => { + const page = await newE2EPage(); + await page.setContent( + html` + + + + + + cell + cell + + + cell + cell + + + cell + cell + + + cell + cell + + + cell + cell + + ` + ); + + await page.keyboard.press("Tab"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + await page.keyboard.press("ArrowRight"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1b"); + await page.keyboard.press("PageDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2b"); + await page.keyboard.press("Home"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2a"); + await page.keyboard.press("PageUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + await page.keyboard.press("PageUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + await page.keyboard.press("ArrowDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-1a"); + await page.keyboard.press("ArrowDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2a"); + await page.keyboard.press("ArrowDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2a"); + await page.keyboard.press("End"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2b"); + page.keyboard.press("ControlLeft"); + await page.keyboard.press("End"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2b"); + page.keyboard.press("ControlLeft"); + await page.keyboard.press("Home"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + + await page.$eval("calcite-table", () => { + const table = document.querySelector("calcite-table"); + const headerCell = document.getElementById("head-1a"); + + const pagination = table?.shadowRoot.querySelector("calcite-pagination"); + const button = pagination?.shadowRoot.querySelector("button.page:nth-of-type(3)") as HTMLButtonElement; + button?.click(); + (headerCell as HTMLCalciteTableHeaderElement).setFocus(); + }); + + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + await page.keyboard.press("ArrowRight"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1b"); + await page.keyboard.press("PageDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-4b"); + await page.keyboard.press("Home"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-4a"); + await page.keyboard.press("PageUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + await page.keyboard.press("PageUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + await page.keyboard.press("ArrowDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-3a"); + await page.keyboard.press("ArrowDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-4a"); + await page.keyboard.press("ArrowDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-4a"); + await page.keyboard.press("End"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-4b"); + page.keyboard.press("ControlRight"); + await page.keyboard.press("Home"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + page.keyboard.press("ControlRight"); + await page.keyboard.press("End"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-4b"); + + await page.$eval("calcite-table", () => { + const table = document.querySelector("calcite-table"); + const headerCell = document.getElementById("head-1a"); + + const pagination = table?.shadowRoot.querySelector("calcite-pagination"); + const button = pagination?.shadowRoot.querySelector("button.page:nth-of-type(4)") as HTMLButtonElement; + button?.click(); + (headerCell as HTMLCalciteTableHeaderElement).setFocus(); + }); + + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + await page.keyboard.press("ArrowRight"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1b"); + await page.keyboard.press("PageDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-5b"); + await page.keyboard.press("Home"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-5a"); + await page.keyboard.press("PageUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + await page.keyboard.press("PageUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + await page.keyboard.press("ArrowDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-5a"); + await page.keyboard.press("ArrowDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-5a"); + await page.keyboard.press("ArrowDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-5a"); + await page.keyboard.press("End"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-5b"); + page.keyboard.press("ControlRight"); + await page.keyboard.press("Home"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + page.keyboard.press("ControlRight"); + await page.keyboard.press("End"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-5b"); + }); + + it("navigates correctly skipping disabled rows", async () => { + const page = await newE2EPage(); + await page.setContent( + html` + + + + + + cell + cell + + + cell + cell + + + cell + cell + + + cell + cell + + ` + ); + + await page.keyboard.press("Tab"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + await page.keyboard.press("ArrowRight"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1b"); + await page.keyboard.press("PageDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-4b"); + await page.keyboard.press("Home"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-4a"); + await page.keyboard.press("ArrowUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-1a"); + await page.keyboard.press("End"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-1b"); + await page.keyboard.press("ArrowDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-4b"); + await page.keyboard.press("ArrowUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-1b"); + }); + + it("navigates correctly skipping disabled rows when disabled rows in last body position", async () => { + const page = await newE2EPage(); + await page.setContent( + html` + + + + + + cell + cell + + + cell + cell + + + cell + cell + + + cell + cell + + ` + ); + + await page.keyboard.press("Tab"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + await page.keyboard.press("ArrowRight"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1b"); + await page.keyboard.press("PageDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-3b"); + await page.keyboard.press("Home"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-3a"); + await page.keyboard.press("ArrowUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-1a"); + await page.keyboard.press("End"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-1b"); + await page.keyboard.press("ArrowDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-3b"); + await page.keyboard.press("ArrowDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-3b"); + await page.keyboard.press("PageUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1b"); + page.keyboard.press("ControlRight"); + await page.keyboard.press("End"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-3b"); + }); + + it("navigates correctly when multiple header and multiple footer rows", async () => { + const page = await newE2EPage(); + await page.setContent( + html` + + + + + + + + + + + + cell + cell + + + cell + cell + + + cell + cell + + + cell + cell + + + foot + foot + foot + foot + + + foot + foot + + + >;` + ); + + await page.keyboard.press("Tab"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + await page.keyboard.press("ArrowRight"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1b"); + await page.keyboard.press("PageDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-2b"); + await page.keyboard.press("Home"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-2a"); + await page.keyboard.press("ArrowUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-1a"); + await page.keyboard.press("ArrowUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-4a"); + await page.keyboard.press("ArrowUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-3a"); + await page.keyboard.press("ArrowUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2a"); + await page.keyboard.press("ArrowUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-1a"); + await page.keyboard.press("ArrowUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-2a"); + await page.keyboard.press("End"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-2d"); + page.keyboard.press("ControlRight"); + await page.keyboard.press("End"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-2b"); + await page.keyboard.press("PageUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1b"); + await page.keyboard.press("ArrowDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-2b"); + await page.keyboard.press("ArrowDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-1b"); + await page.keyboard.press("ArrowDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2b"); + page.keyboard.press("ControlRight"); + await page.keyboard.press("Home"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + }); + + it("navigates correctly when multiple header and multiple footer rows, pagination present, and navigation to other page occurs", async () => { + const page = await newE2EPage(); + await page.setContent( + html` + + + + + + + + + + + + cell + cell + + + cell + cell + + + cell + cell + + + cell + cell + + + foot + foot + foot + foot + + + foot + foot + + + >;` + ); + + await page.keyboard.press("Tab"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + await page.keyboard.press("ArrowRight"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1b"); + await page.keyboard.press("PageDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-2b"); + await page.keyboard.press("Home"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-2a"); + await page.keyboard.press("ArrowUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-1a"); + await page.keyboard.press("ArrowUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2a"); + await page.keyboard.press("ArrowUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-1a"); + await page.keyboard.press("ArrowUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-2a"); + await page.keyboard.press("ArrowUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + await page.keyboard.press("ArrowDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-2a"); + await page.keyboard.press("ArrowDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-1a"); + await page.keyboard.press("ArrowUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-2a"); + await page.keyboard.press("End"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-2d"); + page.keyboard.press("ControlRight"); + await page.keyboard.press("End"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-2b"); + await page.keyboard.press("Home"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-2a"); + await page.keyboard.press("ArrowDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-2a"); + await page.keyboard.press("ArrowUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-1a"); + await page.keyboard.press("ArrowUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2a"); + await page.keyboard.press("ArrowUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-1a"); + await page.keyboard.press("ArrowUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-2a"); + page.keyboard.press("ControlRight"); + await page.keyboard.press("Home"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + page.keyboard.press("ControlRight"); + await page.keyboard.press("End"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-2b"); + + await page.$eval("calcite-table", () => { + const table = document.querySelector("calcite-table"); + const headerCell = document.getElementById("head-1a"); + + const pagination = table?.shadowRoot.querySelector("calcite-pagination"); + const button = pagination?.shadowRoot.querySelector("button.page:nth-of-type(3)") as HTMLButtonElement; + button?.click(); + (headerCell as HTMLCalciteTableHeaderElement).setFocus(); + }); + + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + await page.keyboard.press("ArrowRight"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1b"); + await page.keyboard.press("PageDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-2b"); + await page.keyboard.press("Home"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-2a"); + await page.keyboard.press("ArrowUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-1a"); + await page.keyboard.press("ArrowUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-4a"); + await page.keyboard.press("ArrowUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-3a"); + await page.keyboard.press("ArrowUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-2a"); + await page.keyboard.press("ArrowDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-3a"); + await page.keyboard.press("ArrowUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-2a"); + await page.keyboard.press("End"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-2d"); + page.keyboard.press("ControlRight"); + await page.keyboard.press("End"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-2b"); + await page.keyboard.press("Home"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-2a"); + await page.keyboard.press("ArrowDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-2a"); + await page.keyboard.press("ArrowUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-1a"); + await page.keyboard.press("ArrowUp"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-4a"); + await page.keyboard.press("ArrowDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-1a"); + await page.keyboard.press("ArrowDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-2a"); + await page.keyboard.press("End"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-2b"); + page.keyboard.press("ControlRight"); + await page.keyboard.press("Home"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + await page.keyboard.press("ArrowDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-2a"); + await page.keyboard.press("ArrowDown"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-3a"); + }); + + it("navigates correctly when selection column present", async () => { // }); - it("navigates correctly when number and selection column present", async () => { + it("navigates correctly when number column present", async () => { // }); - it("navigates correctly skipping disabled rows when disabled rows in last position", async () => { + + it("navigates correctly when number and selection column present", async () => { // }); - it("navigates correctly when multiple header and multiple footer rows", async () => { + + it("navigates correctly when pagination present and selection and number and first page displayed", async () => { // }); - it("navigates correctly after changing page size and updating visible rows", async () => { + + it("navigates correctly when pagination present, and selection and number and navigation to two other pages occurs", async () => { // }); }); diff --git a/packages/calcite-components/src/components/table/table.tsx b/packages/calcite-components/src/components/table/table.tsx index 3d01f89ea42..28f0470208d 100644 --- a/packages/calcite-components/src/components/table/table.tsx +++ b/packages/calcite-components/src/components/table/table.tsx @@ -128,7 +128,7 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen @State() colCount = 0; - @State() currentPageStartRow = 1; + @State() pageStartRow = 1; @State() selectedCount = 0; @@ -323,19 +323,16 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen private handlePaginationChange = (event: CustomEvent): void => { const requestedItem = (event.target as HTMLCalcitePaginationElement).startItem; - this.currentPageStartRow = requestedItem || 1; + this.pageStartRow = requestedItem || 1; this.calciteTablePageSelect.emit(); this.updateRows(); }; private paginateRows = (): void => { this.bodyRows?.forEach((row) => { - const offsetBodyPos = row.positionSection + 1 + this.headRows?.length; - const inView = - this.pageSize < 1 || - (offsetBodyPos > this.currentPageStartRow && - offsetBodyPos <= this.currentPageStartRow + this.pageSize); - row.hidden = !inView && !this.footRows.includes(row); + const rowPos = row.positionSection + 1; + const inView = rowPos >= this.pageStartRow && rowPos < this.pageStartRow + this.pageSize; + row.hidden = this.pageSize > 0 && !inView && !this.footRows.includes(row); }); }; diff --git a/packages/calcite-components/src/demos/table.html b/packages/calcite-components/src/demos/table.html index 385cee309f4..3cdb53bf8c8 100644 --- a/packages/calcite-components/src/demos/table.html +++ b/packages/calcite-components/src/demos/table.html @@ -230,9 +230,10 @@ - +

Interactive

+
Appearance @@ -2503,6 +2504,47 @@

selection-mode multiple with selected at load

+

selection-mode multiple with multiple headers, footers, pageSize

+ + + + + + + + + + + + + + cell + cell + + + cell + cell + + + cell + cell + + + cell + cell + + + foot + foot + foot + foot + + + foot + foot + + +

selection-mode multiple and numbered including out of view

Date: Sun, 27 Aug 2023 15:23:38 -0700 Subject: [PATCH 11/44] WIP - Table --- .../src/components/table-cell/table-cell.tsx | 25 +- .../src/components/table-row/table-row.scss | 1 - .../src/components/table/table.tsx | 4 +- .../calcite-components/src/demos/table.html | 1810 ++++++++--------- 4 files changed, 819 insertions(+), 1021 deletions(-) diff --git a/packages/calcite-components/src/components/table-cell/table-cell.tsx b/packages/calcite-components/src/components/table-cell/table-cell.tsx index 79f0ac919dd..b61582455a4 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.tsx +++ b/packages/calcite-components/src/components/table-cell/table-cell.tsx @@ -17,6 +17,7 @@ import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../.. import { TableCellMessages } from "./assets/table-cell/t9n"; import { CSS } from "./resources"; import { RowType } from "../table/interfaces"; +import { getUserAgentString } from "../../utils/browser"; /** * @slot - A slot for adding content, usually text content. @@ -46,9 +47,6 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp /** Specifies the size of the component. */ @Prop({ reflect: true }) scale: Scale = "m"; - /** todo make it required - will be needed for sorting, a11y? */ - @Prop() value: string; - /** @internal */ @Prop() numberCell: boolean; @@ -93,6 +91,12 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp // -------------------------------------------------------------------------- @Element() el: HTMLCalciteTableCellElement; + /* Workaround for Safari https://bugs.webkit.org/show_bug.cgi?id=258430 https://bugs.webkit.org/show_bug.cgi?id=239478 */ + /* Fixed with latest Safari Tech Preview */ + @State() isSafari: boolean; + + @State() safariText = ""; + @State() defaultMessages: TableCellMessages; @State() effectiveLocale = ""; @@ -113,6 +117,8 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp async componentWillLoad(): Promise { setUpLoadableComponent(this); await setUpMessages(this); + this.isSafari = /safari/i.test(getUserAgentString()); + await this.updateSafariText; } componentDidLoad(): void { @@ -153,6 +159,10 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp return this.parentRowIsSelected ? selectedText : unselectedText; } + private updateSafariText = (): void => { + this.safariText = this.el.textContent; + }; + //-------------------------------------------------------------------------- // // Render Methods @@ -174,14 +184,15 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp rowSpan={this.rowSpan} tabIndex={0} // eslint-disable-next-line react/jsx-sort-props - ref={(el) => (this.tdEl = el as HTMLDivElement)} + ref={(el) => (this.tdEl = el)} > - {this.selectionCell && ( + {(this.selectionCell || this.isSafari) && ( - {this.getScreenReaderText()} + {this.selectionCell && this.getScreenReaderText()} + {this.isSafari && !this.selectionCell && this.safariText} )} - + ); diff --git a/packages/calcite-components/src/components/table-row/table-row.scss b/packages/calcite-components/src/components/table-row/table-row.scss index 29b1f06d592..00791f8f12f 100644 --- a/packages/calcite-components/src/components/table-row/table-row.scss +++ b/packages/calcite-components/src/components/table-row/table-row.scss @@ -24,7 +24,6 @@ } tr { - @apply table-row; border-block-end: 1px solid var(--calcite-table-row-border-color-internal); background-color: var(--calcite-table-row-background-internal); } diff --git a/packages/calcite-components/src/components/table/table.tsx b/packages/calcite-components/src/components/table/table.tsx index 28f0470208d..bcdb4a7faa7 100644 --- a/packages/calcite-components/src/components/table/table.tsx +++ b/packages/calcite-components/src/components/table/table.tsx @@ -186,10 +186,10 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen // //-------------------------------------------------------------------------- - /** Emits when the component's selection changes. */ + /** Emits when the component's selected rows change. */ @Event({ cancelable: false }) calciteTableSelect: EventEmitter; - /** Emits when the component's selection changes. */ + /** Emits when the component's page selection changes. */ @Event({ cancelable: false }) calciteTablePageSelect: EventEmitter; /** @internal */ diff --git a/packages/calcite-components/src/demos/table.html b/packages/calcite-components/src/demos/table.html index 3cdb53bf8c8..4fe8cce7d06 100644 --- a/packages/calcite-components/src/demos/table.html +++ b/packages/calcite-components/src/demos/table.html @@ -314,1364 +314,1180 @@

Interactive

- cell - cell - cell - cell - cell - test 1 - Happy + cell + cell + cell + cell + cell + test 1 + Happy Another thing - cell - cell - cell - cell - cell - test 2 - Happy + cell + cell + cell + cell + cell + test 2 + Happy Another thing - cell - cell - cell - cell - cell - test 3 - Happy + cell + cell + cell + cell + cell + test 3 + Happy Another thing - cell - cell - cell - cell - cell - test 4 - Happy + cell + cell + cell + cell + cell + test 4 + Happy Another thing - cell - cell - cell - cell - cell - test 5 - Happy + cell + cell + cell + cell + cell + test 5 + Happy Another thing - cell - cell - cell - cell - cell - test 6 - Happy + cell + cell + cell + cell + cell + test 6 + Happy Another thing - cell - cell - cell - cell - cell - test 7 - Happy + cell + cell + cell + cell + cell + test 7 + Happy Another thing - cell - cell - cell - cell - cell - test 8 - Happy + cell + cell + cell + cell + cell + test 8 + Happy Another thing - cell - cell - cell - cell - cell - test 9 - Sad + cell + cell + cell + cell + cell + test 9 + Sad Another thing - cell - cell - cell - cell - cell - test 10 - Happy + cell + cell + cell + cell + cell + test 10 + Happy Another thing - cell - cell - cell - cell - cell - test 11 - Happy + cell + cell + cell + cell + cell + test 11 + Happy Another thing - cell - cell - cell - cell - cell - test 12 - Happy + cell + cell + cell + cell + cell + test 12 + Happy Another thing - cell - cell - cell - cell - cell - test 13 - Happy + cell + cell + cell + cell + cell + test 13 + Happy Another thing - cell - cell - cell - cell - cell - test 14 - Happy + cell + cell + cell + cell + cell + test 14 + Happy Another thing - cell - cell - cell - cell - cell - test 15 - Happy + cell + cell + cell + cell + cell + test 15 + Happy Another thing - cell - cell - cell - cell - cell - test 16 - Happy + cell + cell + cell + cell + cell + test 16 + Happy Another thing - cell - cell - cell - cell - cell - test 17 - Happy + cell + cell + cell + cell + cell + test 17 + Happy Another thing - cell - cell - cell - cell - cell - test 18 - Happy + cell + cell + cell + cell + cell + test 18 + Happy Another thing - cell - cell - cell - cell - cell - test 19 - Happy + cell + cell + cell + cell + cell + test 19 + Happy Another thing - cell - cell - cell - cell - cell - test 20 - Sad + cell + cell + cell + cell + cell + test 20 + Sad Another thing - cell - cell - cell - cell - cell - test 21 - Happy + cell + cell + cell + cell + cell + test 21 + Happy Another thing - cell - cell - cell - cell - cell - test 22 - Happy + cell + cell + cell + cell + cell + test 22 + Happy Another thing - cell - cell - cell - cell - cell - test 23 - Happy + cell + cell + cell + cell + cell + test 23 + Happy Another thing - cell - cell - cell - cell - cell - 12 - Happy + cell + cell + cell + cell + cell + 12 + Happy Another thing - cell - cell - cell - cell - cell - 78 - Happy + cell + cell + cell + cell + cell + 78 + Happy Another thing - cell - cell - cell - cell - cell - 62 - Happy + cell + cell + cell + cell + cell + 62 + Happy Another thing - cell - cell - cell - cell - cell - 63 - Happy + cell + cell + cell + cell + cell + 63 + Happy Another thing - cell - cell - cell - cell - cell - 1643 - Happy + cell + cell + cell + cell + cell + 1643 + Happy Another thing - cell - cell - cell - cell - cell - 63 - Happy + cell + cell + cell + cell + cell + 63 + Happy Another thing - cell - cell - cell - cell - cell - 62 - Happy + cell + cell + cell + cell + cell + 62 + Happy Another thing - cell - cell - cell - cell - cell - 6 - Happy + cell + cell + cell + cell + cell + 6 + Happy Another thing - cell - cell - cell - cell - cell - 262 - Sad + cell + cell + cell + cell + cell + 262 + Sad Another thing - cell - cell - cell - cell - cell - 63 - Happy + cell + cell + cell + cell + cell + 63 + Happy Another thing - cell - cell - cell - cell - cell - 53 - Happy + cell + cell + cell + cell + cell + 53 + Happy Another thing - cell - cell - cell - cell - cell - 25 - Happy + cell + cell + cell + cell + cell + 25 + Happy Another thing - cell - cell - cell - cell - cell - 63 - Happy + cell + cell + cell + cell + cell + 63 + Happy Another thing - cell - cell - cell - cell - cell - 1643 - Happy + cell + cell + cell + cell + cell + 1643 + Happy Another thing - cell - cell - cell - cell - cell - 63 - Happy + cell + cell + cell + cell + cell + 63 + Happy Another thing - cell - cell - cell - cell - cell - 62 - Happy + cell + cell + cell + cell + cell + 62 + Happy Another thing - cell - cell - cell - cell - cell - 6 - Happy + cell + cell + cell + cell + cell + 6 + Happy Another thing - cell - cell - cell - cell - cell - 262 - Sad + cell + cell + cell + cell + cell + 262 + Sad Another thing - cell - cell - cell - cell - cell - 63 - Happy + cell + cell + cell + cell + cell + 63 + Happy Another thing - cell - cell - cell - cell - cell - 120 - Happy + cell + cell + cell + cell + cell + 120 + Happy Another thing - cell - cell - cell - cell - cell - 987 - Happy + cell + cell + cell + cell + cell + 987 + Happy Another thing - cell - cell - cell - cell - cell - 12 - Happy + cell + cell + cell + cell + cell + 12 + Happy Another thing - cell - cell - cell - cell - cell - 78 - Happy + cell + cell + cell + cell + cell + 78 + Happy Another thing - cell - cell - cell - cell - cell - 63 - Happy + cell + cell + cell + cell + cell + 63 + Happy Another thing - cell - cell - cell - cell - cell - 1643 - Happy + cell + cell + cell + cell + cell + 1643 + Happy Another thing - cell - cell - cell - cell - cell - 63 - Happy + cell + cell + cell + cell + cell + 63 + Happy Another thing - cell - cell - cell - cell - cell - 62 - Happy + cell + cell + cell + cell + cell + 62 + Happy Another thing - cell - cell - cell - cell - cell - 6 - Happy + cell + cell + cell + cell + cell + 6 + Happy Another thing - cell - cell - cell - cell - cell - 262 - Sad + cell + cell + cell + cell + cell + 262 + Sad Another thing - cell - cell - cell - cell - cell - 63 - Happy + cell + cell + cell + cell + cell + 63 + Happy Another thing - cell - cell - cell - cell - cell - 120 - Happy + cell + cell + cell + cell + cell + 120 + Happy Another thing - cell - cell - cell - cell - cell - 987 - Happy + cell + cell + cell + cell + cell + 987 + Happy Another thing - cell - cell - cell - cell - cell - 12 - Happy + cell + cell + cell + cell + cell + 12 + Happy Another thing - cell - cell - cell - cell - cell - 78 - Happy + cell + cell + cell + cell + cell + 78 + Happy Another thing - cell - cell - cell - cell - cell - 62 - Happy + cell + cell + cell + cell + cell + 62 + Happy Another thing - cell - cell - cell - cell - cell - 63 - Happy + cell + cell + cell + cell + cell + 63 + Happy Another thing - cell - cell - cell - cell - cell - 1643 - Happy + cell + cell + cell + cell + cell + 1643 + Happy Another thing - cell - cell - cell - cell - cell - 63 - Happy + cell + cell + cell + cell + cell + 63 + Happy Another thing - cell - cell - cell - cell - cell - 62 - Happy + cell + cell + cell + cell + cell + 62 + Happy Another thing - cell - cell - cell - cell - cell - 6 - Happy + cell + cell + cell + cell + cell + 6 + Happy Another thing - cell - cell - cell - cell - cell - 262 - Sad + cell + cell + cell + cell + cell + 262 + Sad Another thing - cell - cell - cell - cell - cell - 63 - Happy + cell + cell + cell + cell + cell + 63 + Happy Another thing - cell - cell - cell - cell - cell - 53 - Happy + cell + cell + cell + cell + cell + 53 + Happy Another thing - cell - cell - cell - cell - cell - 25 - Happy + cell + cell + cell + cell + cell + 25 + Happy Another thing - cell - cell - cell - cell - cell - 63 - Happy + cell + cell + cell + cell + cell + 63 + Happy Another thing - cell - cell - cell - cell - cell - 1643 - Happy + cell + cell + cell + cell + cell + 1643 + Happy Another thing - cell - cell - cell - cell - cell - 63 - Happy + cell + cell + cell + cell + cell + 63 + Happy Another thing - cell - cell - cell - cell - cell - 62 - Happy + cell + cell + cell + cell + cell + 62 + Happy Another thing - cell - cell - cell - cell - cell - 6 - Happy + cell + cell + cell + cell + cell + 6 + Happy Another thing - cell - cell - cell - cell - cell - 262 - Sad + cell + cell + cell + cell + cell + 262 + Sad Another thing - cell - cell - cell - cell - cell - 63 - Happy + cell + cell + cell + cell + cell + 63 + Happy Another thing - cell - cell - cell - cell - cell - 120 - Happy + cell + cell + cell + cell + cell + 120 + Happy Another thing - cell - cell - cell - cell - cell - 987 - Happy + cell + cell + cell + cell + cell + 987 + Happy Another thing - cell - cell - cell - cell - cell - 12 - Happy + cell + cell + cell + cell + cell + 12 + Happy Another thing - cell - cell - cell - cell - cell - 78 - Happy + cell + cell + cell + cell + cell + 78 + Happy Another thing - cell - cell - cell - cell - cell - 63 - Happy + cell + cell + cell + cell + cell + 63 + Happy Another thing - cell - cell - cell - cell - cell - 1643 - Happy + cell + cell + cell + cell + cell + 1643 + Happy Another thing - cell - cell - cell - cell - cell - 63 - Happy + cell + cell + cell + cell + cell + 63 + Happy Another thing - cell - cell - cell - cell - cell - 62 - Happy + cell + cell + cell + cell + cell + 62 + Happy Another thing - cell - cell - cell - cell - cell - 6 - Happy + cell + cell + cell + cell + cell + 6 + Happy Another thing - cell - cell - cell - cell - cell - 262 - Sad + cell + cell + cell + cell + cell + 262 + Sad Another thing - cell - cell - cell - cell - cell - 63 - Happy + cell + cell + cell + cell + cell + 63 + Happy Another thing - cell - cell - cell - cell - cell - 120 - Happy + cell + cell + cell + cell + cell + 120 + Happy Another thing - cell - cell - cell - cell - cell - 987 - Happy + cell + cell + cell + cell + cell + 987 + Happy Another thing - cell - cell - cell - cell - cell - 12 - Happy + cell + cell + cell + cell + cell + 12 + Happy Another thing - cell - cell - cell - cell - cell - 78 - Happy + cell + cell + cell + cell + cell + 78 + Happy Another thing - cell - cell - cell - cell - cell - 62 - Happy + cell + cell + cell + cell + cell + 62 + Happy Another thing - cell - cell - cell - cell - cell - 63 - Happy + cell + cell + cell + cell + cell + 63 + Happy Another thing - cell - cell - cell - cell - cell - 1643 - Happy + cell + cell + cell + cell + cell + 1643 + Happy Another thing - cell - cell - cell - cell - cell - 63 - Happy + cell + cell + cell + cell + cell + 63 + Happy Another thing - cell - cell - cell - cell - cell - 62 - Happy + cell + cell + cell + cell + cell + 62 + Happy Another thing - cell - cell - cell - cell - cell - 6 - Happy + cell + cell + cell + cell + cell + 6 + Happy Another thing - cell - cell - cell - cell - cell - 262 - Sad + cell + cell + cell + cell + cell + 262 + Sad Another thing - cell - cell - cell - cell - cell - 63 - Happy + cell + cell + cell + cell + cell + 63 + Happy Another thing - cell - cell - cell - cell - cell - 120 - Happy + cell + cell + cell + cell + cell + 120 + Happy Another thing - cell - cell - cell - cell - cell - 987 - Happy + cell + cell + cell + cell + cell + 987 + Happy Another thing - cell - cell - cell - cell - cell - 12 - Happy + cell + cell + cell + cell + cell + 12 + Happy Another thing - cell - cell - cell - cell - cell - 78 - Happy + cell + cell + cell + cell + cell + 78 + Happy Another thing @@ -1705,163 +1521,141 @@

Localized numbers

 - cell - cell - cell - cell - cell - 34 - Happy + cell + cell + cell + cell + cell + 34 + Happy Another thing - cell - cell - cell - cell - cell - 53 - Happy + cell + cell + cell + cell + cell + 53 + Happy Another thing - cell - cell - cell - cell - cell - 25 - Happy + cell + cell + cell + cell + cell + 25 + Happy Another thing - cell - cell - cell - cell - cell - 63 - Happy + cell + cell + cell + cell + cell + 63 + Happy Another thing - cell - cell - cell - cell - cell - 1643 - Happy + cell + cell + cell + cell + cell + 1643 + Happy Another thing - cell - cell - cell - cell - cell - 63 - Happy + cell + cell + cell + cell + cell + 63 + Happy Another thing - cell - cell - cell - cell - cell - 62 - Happy + cell + cell + cell + cell + cell + 62 + Happy Another thing - cell - cell - cell - cell - cell - 6 - Happy + cell + cell + cell + cell + cell + 6 + Happy Another thing - cell - cell - cell - cell - cell - 262 - Sad + cell + cell + cell + cell + cell + 262 + Sad Another thing - cell - cell - cell - cell - cell - 63 - Happy + cell + cell + cell + cell + cell + 63 + Happy Another thing - cell - cell - cell - cell - cell - 120 - Happy + cell + cell + cell + cell + cell + 120 + Happy Another thing - cell - cell - cell - cell - cell - 987 - Happy + cell + cell + cell + cell + cell + 987 + Happy Another thing @@ -2680,11 +2474,9 @@

selection-mode multiple and numbered including out of view and footer

cell - - 24,212 - 58% happiness + + 24,212 + 58% happiness @@ -2759,17 +2551,13 @@

selection-mode multiple and numbered including out of view and multiple head cell - - 58% happiness + + 58% happiness - - 24,212 - 58% happiness + + 24,212 + 58% happiness From dbde9eb54bde7e2ac55a8c3b2124f87818de2ae4 Mon Sep 17 00:00:00 2001 From: Adam Tirella Date: Mon, 28 Aug 2023 09:54:35 -0700 Subject: [PATCH 12/44] Clean up --- .../src/components/table-cell/table-cell.tsx | 2 +- .../src/components/table/table.e2e.ts | 515 +++++++++++++++++- .../src/components/table/table.tsx | 1 + 3 files changed, 510 insertions(+), 8 deletions(-) diff --git a/packages/calcite-components/src/components/table-cell/table-cell.tsx b/packages/calcite-components/src/components/table-cell/table-cell.tsx index b61582455a4..c9d36138126 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.tsx +++ b/packages/calcite-components/src/components/table-cell/table-cell.tsx @@ -92,7 +92,7 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp @Element() el: HTMLCalciteTableCellElement; /* Workaround for Safari https://bugs.webkit.org/show_bug.cgi?id=258430 https://bugs.webkit.org/show_bug.cgi?id=239478 */ - /* Fixed with latest Safari Tech Preview */ + /* q - should this be a state on a parent table and passed via internal prop? */ @State() isSafari: boolean; @State() safariText = ""; diff --git a/packages/calcite-components/src/components/table/table.e2e.ts b/packages/calcite-components/src/components/table/table.e2e.ts index f70536ceb30..b0fe43198d4 100644 --- a/packages/calcite-components/src/components/table/table.e2e.ts +++ b/packages/calcite-components/src/components/table/table.e2e.ts @@ -3,6 +3,8 @@ import { E2EPage, newE2EPage } from "@stencil/core/testing"; import { html } from "../../../support/formatting"; import { accessible, renders, hidden, defaults, reflects } from "../../tests/commonTests"; import { GlobalTestProps } from "../../tests/utils"; +import { CSS } from "../table-header/resources"; +import { CSS as CELLCSS } from "../table-cell/resources"; describe("calcite-table", () => { describe("renders", () => { @@ -1634,22 +1636,521 @@ describe("keyboard navigation", () => { }); it("navigates correctly when selection column present", async () => { - // + const page = await newE2EPage(); + await page.setContent( + html` + + + + + + cell + cell + + + cell + cell + + + cell + cell + + + foot + foot + + ` + ); + + const rowHead = await page.find("#row-head"); + const rowFoot = await page.find("#row-foot"); + const row3 = await page.find("#row-3"); + + await page.keyboard.press("Tab"); + await page.waitForChanges(); + + expect( + await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList) + ).toEqual({ "0": CSS.selectionCell, "1": CSS.multipleSelectionCell }); + + await page.keyboard.press("ArrowRight"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + + await page.keyboard.press("ArrowRight"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1b"); + + await page.keyboard.press("Home"); + await page.waitForChanges(); + expect( + await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList) + ).toEqual({ "0": CSS.selectionCell, "1": CSS.multipleSelectionCell }); + + await page.keyboard.press("PageDown"); + await page.waitForChanges(); + expect( + await page.$eval(`#${rowFoot.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList) + ).toEqual({ "0": CELLCSS.footerCell, "1": CSS.selectionCell }); + + await page.keyboard.press("ArrowUp"); + await page.waitForChanges(); + expect( + await page.$eval(`#${row3.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList) + ).toEqual({ "0": CSS.selectionCell }); + + await page.keyboard.press("ArrowRight"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-3a"); + + page.keyboard.press("ControlRight"); + await page.keyboard.press("End"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-1b"); + + page.keyboard.press("ControlLeft"); + await page.keyboard.press("Home"); + await page.waitForChanges(); + expect( + await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList) + ).toEqual({ "0": CSS.selectionCell, "1": CSS.multipleSelectionCell }); }); + it("navigates correctly when number column present", async () => { - // + const page = await newE2EPage(); + await page.setContent( + html` + + + + + + cell + cell + + + cell + cell + + + cell + cell + + + foot + foot + + ` + ); + + const rowHead = await page.find("#row-head"); + const rowFoot = await page.find("#row-foot"); + const row3 = await page.find("#row-3"); + + await page.keyboard.press("Tab"); + await page.waitForChanges(); + + expect( + await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList) + ).toEqual({ "0": CSS.numberCell }); + + await page.keyboard.press("ArrowRight"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + + await page.keyboard.press("ArrowRight"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1b"); + + await page.keyboard.press("Home"); + await page.waitForChanges(); + expect( + await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList) + ).toEqual({ "0": CSS.numberCell }); + + await page.keyboard.press("PageDown"); + await page.waitForChanges(); + expect( + await page.$eval(`#${rowFoot.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList) + ).toEqual({ "0": CELLCSS.footerCell, "1": CSS.numberCell }); + + await page.keyboard.press("ArrowUp"); + await page.waitForChanges(); + expect( + await page.$eval(`#${row3.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList) + ).toEqual({ "0": CSS.numberCell }); + + await page.keyboard.press("ArrowRight"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-3a"); + + page.keyboard.press("ControlRight"); + await page.keyboard.press("End"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-1b"); + + page.keyboard.press("ControlLeft"); + await page.keyboard.press("Home"); + await page.waitForChanges(); + expect( + await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList) + ).toEqual({ "0": CSS.numberCell }); }); - it("navigates correctly when number and selection column present", async () => { - // + it("navigates correctly when number and selection column present numbered", async () => { + const page = await newE2EPage(); + await page.setContent( + html` + + + + + + cell + cell + + + cell + cell + + + cell + cell + + + foot + foot + + ` + ); + + const rowHead = await page.find("#row-head"); + const rowFoot = await page.find("#row-foot"); + const row3 = await page.find("#row-3"); + + await page.keyboard.press("Tab"); + await page.waitForChanges(); + + expect( + await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList) + ).toEqual({ "0": CSS.numberCell }); + + await page.keyboard.press("ArrowRight"); + await page.waitForChanges(); + + expect( + await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList) + ).toEqual({ "0": CSS.selectionCell }); + + await page.keyboard.press("ArrowRight"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + + await page.keyboard.press("ArrowLeft"); + await page.waitForChanges(); + expect( + await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList) + ).toEqual({ "0": CSS.selectionCell }); + + await page.keyboard.press("PageDown"); + await page.waitForChanges(); + expect( + await page.$eval(`#${rowFoot.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList) + ).toEqual({ "0": CELLCSS.footerCell, "1": CSS.selectionCell }); + + await page.keyboard.press("ArrowUp"); + await page.waitForChanges(); + expect( + await page.$eval(`#${row3.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList) + ).toEqual({ "0": CSS.selectionCell }); + + await page.keyboard.press("ArrowLeft"); + await page.waitForChanges(); + expect( + await page.$eval(`#${row3.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList) + ).toEqual({ "0": CSS.numberCell }); + + await page.keyboard.press("ArrowRight"); + await page.waitForChanges(); + await page.keyboard.press("ArrowRight"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-3a"); + + page.keyboard.press("ControlRight"); + await page.keyboard.press("Home"); + await page.waitForChanges(); + expect( + await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList) + ).toEqual({ "0": CSS.numberCell }); }); - it("navigates correctly when pagination present and selection and number and first page displayed", async () => { - // + it("navigates correctly when pagination present and selection and number and first page displayed", async () => { + const page = await newE2EPage(); + await page.setContent( + html` + + + + + + cell + cell + + + cell + cell + + + cell + cell + + + cell + cell + + + foot + foot + + ` + ); + + const rowHead = await page.find("#row-head"); + const rowFoot = await page.find("#row-foot"); + const row2 = await page.find("#row-2"); + + await page.keyboard.press("Tab"); + await page.waitForChanges(); + + expect( + await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList) + ).toEqual({ "0": CSS.numberCell }); + + await page.keyboard.press("ArrowRight"); + await page.waitForChanges(); + + expect( + await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList) + ).toEqual({ "0": CSS.selectionCell, "1": CSS.multipleSelectionCell }); + + await page.keyboard.press("ArrowRight"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + + await page.keyboard.press("ArrowLeft"); + await page.waitForChanges(); + expect( + await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList) + ).toEqual({ "0": CSS.selectionCell, "1": CSS.multipleSelectionCell }); + + await page.keyboard.press("PageDown"); + await page.waitForChanges(); + expect( + await page.$eval(`#${rowFoot.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList) + ).toEqual({ "0": CELLCSS.footerCell, "1": CSS.selectionCell }); + + await page.keyboard.press("ArrowUp"); + await page.waitForChanges(); + expect( + await page.$eval(`#${row2.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList) + ).toEqual({ "0": CSS.selectionCell }); + + await page.keyboard.press("ArrowRight"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2a"); + + page.keyboard.press("ControlRight"); + await page.keyboard.press("End"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-1b"); + + await page.keyboard.press("Home"); + await page.waitForChanges(); + expect( + await page.$eval(`#${rowFoot.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList) + ).toEqual({ "0": CELLCSS.footerCell, "1": CSS.numberCell }); + + page.keyboard.press("ControlLeft"); + await page.keyboard.press("Home"); + await page.waitForChanges(); + expect( + await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList) + ).toEqual({ "0": CSS.numberCell }); }); it("navigates correctly when pagination present, and selection and number and navigation to two other pages occurs", async () => { - // + const page = await newE2EPage(); + await page.setContent( + html` + + + + + + cell + cell + + + cell + cell + + + cell + cell + + + cell + cell + + + foot + foot + + ` + ); + + const rowHead = await page.find("#row-head"); + const rowFoot = await page.find("#row-foot"); + const row1 = await page.find("#row-1"); + const row2 = await page.find("#row-2"); + const row3 = await page.find("#row-3"); + const row4 = await page.find("#row-4"); + + await page.keyboard.press("Tab"); + await page.waitForChanges(); + + expect( + await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList) + ).toEqual({ "0": CSS.numberCell }); + + await page.keyboard.press("ArrowRight"); + await page.waitForChanges(); + + expect( + await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList) + ).toEqual({ "0": CSS.selectionCell }); + + await page.keyboard.press("ArrowRight"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + + await page.keyboard.press("ArrowLeft"); + await page.waitForChanges(); + expect( + await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList) + ).toEqual({ "0": CSS.selectionCell }); + + await page.keyboard.press("ArrowDown"); + await page.waitForChanges(); + expect( + await page.$eval(`#${row1.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList) + ).toEqual({ "0": CSS.selectionCell }); + + await page.keyboard.press("ArrowLeft"); + await page.waitForChanges(); + expect( + await page.$eval(`#${row1.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList) + ).toEqual({ "0": CSS.numberCell }); + + await page.keyboard.press("PageDown"); + await page.waitForChanges(); + expect( + await page.$eval(`#${rowFoot.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList) + ).toEqual({ "0": CELLCSS.footerCell, "1": CSS.numberCell }); + + await page.keyboard.press("ArrowUp"); + await page.waitForChanges(); + expect( + await page.$eval(`#${row2.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList) + ).toEqual({ "0": CSS.numberCell }); + + await page.keyboard.press("ArrowRight"); + await page.waitForChanges(); + expect( + await page.$eval(`#${row2.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList) + ).toEqual({ "0": CSS.selectionCell }); + + page.keyboard.press("ControlRight"); + await page.keyboard.press("End"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-1b"); + + await page.keyboard.press("Home"); + await page.waitForChanges(); + expect( + await page.$eval(`#${rowFoot.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList) + ).toEqual({ "0": CELLCSS.footerCell, "1": CSS.numberCell }); + + page.keyboard.press("ControlRight"); + + await page.keyboard.press("Home"); + await page.waitForChanges(); + expect( + await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList) + ).toEqual({ "0": CSS.numberCell }); + + await page.$eval("calcite-table", () => { + const table = document.querySelector("calcite-table"); + const headerCell = document.getElementById("head-1a"); + + const pagination = table?.shadowRoot.querySelector("calcite-pagination"); + const button = pagination?.shadowRoot.querySelector("button.page:nth-of-type(3)") as HTMLButtonElement; + button?.click(); + (headerCell as HTMLCalciteTableHeaderElement).setFocus(); + }); + + await page.waitForChanges(); + + await page.keyboard.press("ArrowRight"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1b"); + + await page.keyboard.press("Home"); + await page.waitForChanges(); + expect( + await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList) + ).toEqual({ "0": CSS.numberCell }); + + await page.keyboard.press("ArrowDown"); + await page.waitForChanges(); + expect( + await page.$eval(`#${row3.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList) + ).toEqual({ "0": CSS.numberCell }); + + await page.keyboard.press("ArrowRight"); + await page.waitForChanges(); + expect( + await page.$eval(`#${row3.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList) + ).toEqual({ "0": CSS.selectionCell }); + + await page.keyboard.press("PageDown"); + await page.waitForChanges(); + expect( + await page.$eval(`#${rowFoot.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList) + ).toEqual({ "0": CELLCSS.footerCell, "1": CSS.selectionCell }); + + await page.keyboard.press("ArrowUp"); + await page.waitForChanges(); + expect( + await page.$eval(`#${row4.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList) + ).toEqual({ "0": CSS.selectionCell }); + + await page.keyboard.press("ArrowLeft"); + await page.waitForChanges(); + expect( + await page.$eval(`#${row4.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList) + ).toEqual({ "0": CSS.numberCell }); + + page.keyboard.press("ControlRight"); + await page.keyboard.press("End"); + await page.waitForChanges(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-1b"); + + await page.keyboard.press("Home"); + await page.waitForChanges(); + expect( + await page.$eval(`#${rowFoot.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList) + ).toEqual({ "0": CELLCSS.footerCell, "1": CSS.numberCell }); }); }); diff --git a/packages/calcite-components/src/components/table/table.tsx b/packages/calcite-components/src/components/table/table.tsx index bcdb4a7faa7..3ec7c81839f 100644 --- a/packages/calcite-components/src/components/table/table.tsx +++ b/packages/calcite-components/src/components/table/table.tsx @@ -128,6 +128,7 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen @State() colCount = 0; + // this could probably also be a public property for setting the currently active page on load @State() pageStartRow = 1; @State() selectedCount = 0; From 6e64da8bb0b0b5a12fe3a635d88e25291cc3288b Mon Sep 17 00:00:00 2001 From: Adam Date: Mon, 28 Aug 2023 11:32:28 -0700 Subject: [PATCH 13/44] Clean up --- .../calcite-components/src/components/table/table.scss | 8 -------- 1 file changed, 8 deletions(-) diff --git a/packages/calcite-components/src/components/table/table.scss b/packages/calcite-components/src/components/table/table.scss index a6f8b442d48..bad64b05337 100644 --- a/packages/calcite-components/src/components/table/table.scss +++ b/packages/calcite-components/src/components/table/table.scss @@ -40,14 +40,6 @@ tbody { border-block-end: 1px solid var(--calcite-ui-border-3); } -thead { - @apply sticky top-0 z-sticky; -} - -tfoot { - @apply sticky bottom-0 z-sticky; -} - .table-fixed-layout { @apply table-fixed; } From a26591c383dd562125a6d25a4940afa8caca9315 Mon Sep 17 00:00:00 2001 From: Adam Date: Mon, 28 Aug 2023 15:28:26 -0700 Subject: [PATCH 14/44] Clean up --- .../src/components/table-cell/table-cell.tsx | 6 +++++- .../src/components/table-row/table-row.tsx | 2 ++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/table-cell/table-cell.tsx b/packages/calcite-components/src/components/table-cell/table-cell.tsx index c9d36138126..e9885759d4b 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.tsx +++ b/packages/calcite-components/src/components/table-cell/table-cell.tsx @@ -47,6 +47,9 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp /** Specifies the size of the component. */ @Prop({ reflect: true }) scale: Scale = "m"; + /** @internal */ + @Prop() disabled: boolean; + /** @internal */ @Prop() numberCell: boolean; @@ -173,6 +176,7 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp return ( (this.tdEl = el)} > diff --git a/packages/calcite-components/src/components/table-row/table-row.tsx b/packages/calcite-components/src/components/table-row/table-row.tsx index afb72fa440b..fb8b7d9b828 100644 --- a/packages/calcite-components/src/components/table-row/table-row.tsx +++ b/packages/calcite-components/src/components/table-row/table-row.tsx @@ -252,6 +252,7 @@ export class Table implements LocalizedComponent { cell.parentRowType = this.rowType; cell.parentRowIsSelected = this.selected; cell.parentRowType = this.rowType; + cell.disabled = this.disabled; }); } this.rowCells = cells || []; @@ -332,6 +333,7 @@ export class Table implements LocalizedComponent { return ( Date: Mon, 28 Aug 2023 16:40:57 -0700 Subject: [PATCH 15/44] Clean up --- .../src/components/table-header/table-header.tsx | 9 ++++----- .../calcite-components/src/components/table/table.tsx | 10 +++++++--- 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/packages/calcite-components/src/components/table-header/table-header.tsx b/packages/calcite-components/src/components/table-header/table-header.tsx index 4a1a621f02d..f6c226f959d 100644 --- a/packages/calcite-components/src/components/table-header/table-header.tsx +++ b/packages/calcite-components/src/components/table-header/table-header.tsx @@ -158,17 +158,16 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo // -------------------------------------------------------------------------- private getScreenReaderText(): string { - let text; + const sharedText = `${this.selectedRowCountLocalized} ${this.messages.selected}`; if (this.numberCell) { return this.messages.rowNumber; } else if (this.selectionMode === "single") { - text = `${this.messages.selectionColumn}. ${this.selectedRowCountLocalized} ${this.messages.selected}`; + return `${this.messages.selectionColumn}. ${sharedText}`; } else if (this.bodyRowCount === this.selectedRowCount) { - text = `${this.messages.selectionColumn}. ${this.messages.all} ${this.selectedRowCountLocalized} ${this.messages.selected} ${this.messages.keyboardDeselectAll}`; + return `${this.messages.selectionColumn}. ${this.messages.all} ${sharedText} ${this.messages.keyboardDeselectAll}`; } else { - text = `${this.messages.selectionColumn}. ${this.selectedRowCountLocalized} ${this.messages.selected} ${this.messages.keyboardSelectAll}`; + return `${this.messages.selectionColumn}. ${sharedText} ${this.messages.keyboardSelectAll}`; } - return text; } //-------------------------------------------------------------------------- diff --git a/packages/calcite-components/src/components/table/table.tsx b/packages/calcite-components/src/components/table/table.tsx index 3ec7c81839f..caa2dca30f9 100644 --- a/packages/calcite-components/src/components/table/table.tsx +++ b/packages/calcite-components/src/components/table/table.tsx @@ -142,6 +142,8 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen updateMessages(this, this.effectiveLocale); } + private paginationEl: HTMLCalcitePaginationElement; + private allRows: HTMLCalciteTableRowElement[]; private headRows: HTMLCalciteTableRowElement[]; @@ -322,8 +324,8 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen this.paginateRows(); }; - private handlePaginationChange = (event: CustomEvent): void => { - const requestedItem = (event.target as HTMLCalcitePaginationElement).startItem; + private handlePaginationChange = (): void => { + const requestedItem = this.paginationEl?.startItem; this.pageStartRow = requestedItem || 1; this.calciteTablePageSelect.emit(); this.updateRows(); @@ -440,11 +442,13 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen this.handlePaginationChange(event)} + onCalcitePaginationChange={this.handlePaginationChange} pageSize={this.pageSize} scale={this.scale} startItem={1} totalItems={this.bodyRows?.length} + // eslint-disable-next-line react/jsx-sort-props + ref={(el) => (this.paginationEl = el)} />

); From c42dfeac939c47414570f8f9d26575cbd357c7f1 Mon Sep 17 00:00:00 2001 From: Adam Tirella Date: Mon, 28 Aug 2023 20:37:53 -0700 Subject: [PATCH 16/44] Clean up --- .../src/components/table-cell/table-cell.scss | 3 +- .../src/components/table-cell/table-cell.tsx | 6 +- .../components/table-header/table-header.tsx | 12 +- .../src/components/table-row/table-row.tsx | 16 +- .../src/components/table/table.e2e.ts | 242 ++++++++++++++++++ .../src/components/table/table.tsx | 33 +-- 6 files changed, 276 insertions(+), 36 deletions(-) diff --git a/packages/calcite-components/src/components/table-cell/table-cell.scss b/packages/calcite-components/src/components/table-cell/table-cell.scss index d7add7e2d12..c5baf26fa0c 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.scss +++ b/packages/calcite-components/src/components/table-cell/table-cell.scss @@ -26,10 +26,9 @@ } td { - @apply align-middle text-color-1; + @apply text-start focus-base align-middle text-color-1; background: var(--calcite-table-cell-background-internal); border-inline-end: 1px solid var(--calcite-ui-border-3); - @apply text-start focus-base; &:focus { @apply focus-inset; } diff --git a/packages/calcite-components/src/components/table-cell/table-cell.tsx b/packages/calcite-components/src/components/table-cell/table-cell.tsx index e9885759d4b..d910bfb3205 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.tsx +++ b/packages/calcite-components/src/components/table-cell/table-cell.tsx @@ -44,9 +44,6 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp /** Specifies the number of rows the component should span. */ @Prop({ reflect: true }) rowSpan: number; - /** Specifies the size of the component. */ - @Prop({ reflect: true }) scale: Scale = "m"; - /** @internal */ @Prop() disabled: boolean; @@ -65,6 +62,9 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp /** @internal */ @Prop() positionInRow: number; + /** @internal */ + @Prop() scale: Scale = "m"; + /** @internal */ @Prop() selectionCell: boolean; diff --git a/packages/calcite-components/src/components/table-header/table-header.tsx b/packages/calcite-components/src/components/table-header/table-header.tsx index f6c226f959d..de04a7f8498 100644 --- a/packages/calcite-components/src/components/table-header/table-header.tsx +++ b/packages/calcite-components/src/components/table-header/table-header.tsx @@ -31,9 +31,6 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo // //-------------------------------------------------------------------------- - /** Specifies the size of the component. */ - @Prop({ reflect: true }) scale: Scale = "m"; - /** Specifies the alignment of the component. */ @Prop({ reflect: true }) alignment: Alignment = "start"; @@ -61,6 +58,9 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo /** @internal */ @Prop() positionInRow: number; + /** @internal */ + @Prop() scale: Scale; + /** @internal */ @Prop() selectedRowCount: number; @@ -209,7 +209,11 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo {this.heading &&
{this.heading}
} {this.description &&
{this.description}
} {this.selectionCell && this.selectionMode === "multiple" && ( - + )} {(this.selectionCell || this.numberCell) && ( diff --git a/packages/calcite-components/src/components/table-row/table-row.tsx b/packages/calcite-components/src/components/table-row/table-row.tsx index fb8b7d9b828..342eb700bb3 100644 --- a/packages/calcite-components/src/components/table-row/table-row.tsx +++ b/packages/calcite-components/src/components/table-row/table-row.tsx @@ -36,9 +36,6 @@ export class Table implements LocalizedComponent { /** When `true`, interaction is prevented and the component is displayed with lower opacity. */ @Prop({ reflect: true }) disabled = false; - /** Specifies the size of the component. */ - @Prop({ reflect: true }) scale: Scale = "m"; - /** Is the component selected. */ @Prop({ reflect: true }) selected = false; @@ -60,6 +57,9 @@ export class Table implements LocalizedComponent { /** @internal */ @Prop() positionAll: number; + /** @internal */ + @Prop() scale: Scale; + /** @internal */ @Prop() selectionMode: Extract<"multiple" | "single" | "none", SelectionMode> = "none"; @@ -72,11 +72,12 @@ export class Table implements LocalizedComponent { /** @internal */ @Prop() bodyRowCount: number; - @Watch("selected") - @Watch("selectionMode") - @Watch("selectedRowCount") @Watch("bodyRowCount") @Watch("numbered") + @Watch("scale") + @Watch("selected") + @Watch("selectedRowCount") + @Watch("selectionMode") handleCellChanges(): void { // todo need to ensure conditionally rendered cells // (number / selection) exist before setting properties on all cells @@ -253,6 +254,7 @@ export class Table implements LocalizedComponent { cell.parentRowIsSelected = this.selected; cell.parentRowType = this.rowType; cell.disabled = this.disabled; + cell.scale = this.scale; }); } this.rowCells = cells || []; @@ -288,7 +290,7 @@ export class Table implements LocalizedComponent { ? "circle-f" : "circle"; - return ; + return ; } renderSelectableCell(): VNode { diff --git a/packages/calcite-components/src/components/table/table.e2e.ts b/packages/calcite-components/src/components/table/table.e2e.ts index b0fe43198d4..de7f5888080 100644 --- a/packages/calcite-components/src/components/table/table.e2e.ts +++ b/packages/calcite-components/src/components/table/table.e2e.ts @@ -536,6 +536,248 @@ describe("selection modes", () => { await assertSelectedItems(page, { expectedItemIds: [] }); }); + it("selection mode single allows one or no rows to be selected with keyboard", async () => { + const page = await newE2EPage(); + await page.setContent( + html` + + + + + + cell + cell + + + cell + cell + + + cell + cell + + ` + ); + + await assertSelectedItems.setUpEvents(page); + + const element = await page.find("calcite-table"); + const row1 = await page.find("#row-1"); + const row2 = await page.find("#row-2"); + const row3 = await page.find("#row-3"); + + const tableSelectSpy = await element.spyOnEvent("calciteTableSelect"); + const rowSelectSpy1 = await row1.spyOnEvent("calciteTableRowSelect"); + const rowSelectSpy2 = await row2.spyOnEvent("calciteTableRowSelect"); + const rowSelectSpy3 = await row3.spyOnEvent("calciteTableRowSelect"); + + await page.waitForChanges(); + expect(tableSelectSpy).toHaveReceivedEventTimes(0); + expect(rowSelectSpy1).toHaveReceivedEventTimes(0); + expect(rowSelectSpy2).toHaveReceivedEventTimes(0); + expect(rowSelectSpy3).toHaveReceivedEventTimes(0); + + expect(await element.getProperty("selectedItems")).toHaveLength(1); + await assertSelectedItems(page, { expectedItemIds: [row3.id] }); + + await page.$eval("calcite-table", () => { + const row = document.getElementById("row-1"); + const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child") as HTMLCalciteTableCellElement; + cell.setFocus(); + }); + + await page.keyboard.press("Space"); + await page.waitForChanges(); + expect(await tableSelectSpy).toHaveReceivedEventTimes(1); + expect(await rowSelectSpy1).toHaveReceivedEventTimes(1); + expect(await rowSelectSpy2).toHaveReceivedEventTimes(0); + expect(await rowSelectSpy3).toHaveReceivedEventTimes(0); + expect(await row1.getProperty("selected")).toBe(true); + expect(await row2.getProperty("selected")).toBe(false); + expect(await row3.getProperty("selected")).toBe(false); + expect(await element.getProperty("selectedItems")).toHaveLength(1); + await assertSelectedItems(page, { expectedItemIds: [row1.id] }); + + await page.$eval("calcite-table", () => { + const row = document.getElementById("row-2"); + const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child") as HTMLCalciteTableCellElement; + cell.setFocus(); + }); + + await page.waitForChanges(); + await page.keyboard.press("Enter"); + await page.waitForChanges(); + + expect(tableSelectSpy).toHaveReceivedEventTimes(2); + expect(rowSelectSpy1).toHaveReceivedEventTimes(1); + expect(rowSelectSpy2).toHaveReceivedEventTimes(1); + expect(rowSelectSpy3).toHaveReceivedEventTimes(0); + expect(await row1.getProperty("selected")).toBe(false); + expect(await row2.getProperty("selected")).toBe(true); + expect(await row3.getProperty("selected")).toBe(false); + expect(await element.getProperty("selectedItems")).toHaveLength(1); + await assertSelectedItems(page, { expectedItemIds: [row2.id] }); + + await page.$eval("calcite-table", () => { + const row = document.getElementById("row-3"); + const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child") as HTMLCalciteTableCellElement; + cell.setFocus(); + }); + + await page.waitForChanges(); + await page.keyboard.press("Enter"); + await page.waitForChanges(); + expect(tableSelectSpy).toHaveReceivedEventTimes(3); + expect(rowSelectSpy1).toHaveReceivedEventTimes(1); + expect(rowSelectSpy2).toHaveReceivedEventTimes(1); + expect(rowSelectSpy3).toHaveReceivedEventTimes(1); + expect(await row1.getProperty("selected")).toBe(false); + expect(await row2.getProperty("selected")).toBe(false); + expect(await row3.getProperty("selected")).toBe(true); + expect(await element.getProperty("selectedItems")).toHaveLength(1); + await assertSelectedItems(page, { expectedItemIds: [row3.id] }); + + await page.$eval("calcite-table", () => { + const row = document.getElementById("row-3"); + const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child") as HTMLCalciteTableCellElement; + cell.setFocus(); + }); + + await page.waitForChanges(); + await page.keyboard.press("Space"); + await page.waitForChanges(); + expect(tableSelectSpy).toHaveReceivedEventTimes(4); + expect(rowSelectSpy1).toHaveReceivedEventTimes(1); + expect(rowSelectSpy2).toHaveReceivedEventTimes(1); + expect(rowSelectSpy3).toHaveReceivedEventTimes(2); + expect(await row1.getProperty("selected")).toBe(false); + expect(await row2.getProperty("selected")).toBe(false); + expect(await row3.getProperty("selected")).toBe(false); + + expect(await element.getProperty("selectedItems")).toEqual([]); + await assertSelectedItems(page, { expectedItemIds: [] }); + }); + + it("selection mode multiple allows one, multiple, or no rows to be selected with keyboard", async () => { + const page = await newE2EPage(); + await page.setContent( + html` + + + + + + cell + cell + + + cell + cell + + + cell + cell + + ` + ); + + await assertSelectedItems.setUpEvents(page); + + const element = await page.find("calcite-table"); + const row1 = await page.find("#row-1"); + const row2 = await page.find("#row-2"); + const row3 = await page.find("#row-3"); + + const tableSelectSpy = await element.spyOnEvent("calciteTableSelect"); + const rowSelectSpy1 = await row1.spyOnEvent("calciteTableRowSelect"); + const rowSelectSpy2 = await row2.spyOnEvent("calciteTableRowSelect"); + const rowSelectSpy3 = await row3.spyOnEvent("calciteTableRowSelect"); + + await page.waitForChanges(); + + expect(tableSelectSpy).toHaveReceivedEventTimes(0); + expect(rowSelectSpy1).toHaveReceivedEventTimes(0); + expect(rowSelectSpy2).toHaveReceivedEventTimes(0); + expect(rowSelectSpy3).toHaveReceivedEventTimes(0); + + expect(await element.getProperty("selectedItems")).toHaveLength(2); + await assertSelectedItems(page, { expectedItemIds: [row2.id, row3.id] }); + + await page.$eval("calcite-table", () => { + const row = document.getElementById("row-1"); + const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child") as HTMLCalciteTableCellElement; + cell.setFocus(); + }); + + await page.waitForChanges(); + await page.keyboard.press("Enter"); + await page.waitForChanges(); + expect(await tableSelectSpy).toHaveReceivedEventTimes(1); + expect(await rowSelectSpy1).toHaveReceivedEventTimes(1); + expect(await rowSelectSpy2).toHaveReceivedEventTimes(0); + expect(await rowSelectSpy3).toHaveReceivedEventTimes(0); + expect(await row1.getProperty("selected")).toBe(true); + expect(await row2.getProperty("selected")).toBe(true); + expect(await row3.getProperty("selected")).toBe(true); + expect(await element.getProperty("selectedItems")).toHaveLength(3); + await assertSelectedItems(page, { expectedItemIds: [row1.id, row2.id, row3.id] }); + + await page.$eval("calcite-table", () => { + const row = document.getElementById("row-2"); + const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child") as HTMLCalciteTableCellElement; + cell.setFocus(); + }); + await page.waitForChanges(); + await page.keyboard.press("Space"); + await page.waitForChanges(); + expect(tableSelectSpy).toHaveReceivedEventTimes(2); + expect(rowSelectSpy1).toHaveReceivedEventTimes(1); + expect(rowSelectSpy2).toHaveReceivedEventTimes(1); + expect(rowSelectSpy3).toHaveReceivedEventTimes(0); + expect(await row1.getProperty("selected")).toBe(true); + expect(await row2.getProperty("selected")).toBe(false); + expect(await row3.getProperty("selected")).toBe(true); + expect(await element.getProperty("selectedItems")).toHaveLength(2); + await assertSelectedItems(page, { expectedItemIds: [row1.id, row3.id] }); + + await page.$eval("calcite-table", () => { + const row = document.getElementById("row-3"); + const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child") as HTMLCalciteTableCellElement; + cell.setFocus(); + }); + await page.waitForChanges(); + await page.keyboard.press("Enter"); + await page.waitForChanges(); + expect(tableSelectSpy).toHaveReceivedEventTimes(3); + expect(rowSelectSpy1).toHaveReceivedEventTimes(1); + expect(rowSelectSpy2).toHaveReceivedEventTimes(1); + expect(rowSelectSpy3).toHaveReceivedEventTimes(1); + expect(await row1.getProperty("selected")).toBe(true); + expect(await row2.getProperty("selected")).toBe(false); + expect(await row3.getProperty("selected")).toBe(false); + expect(await element.getProperty("selectedItems")).toHaveLength(1); + await assertSelectedItems(page, { expectedItemIds: [row1.id] }); + + await page.$eval("calcite-table", () => { + const row = document.getElementById("row-1"); + const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child") as HTMLCalciteTableCellElement; + cell.setFocus(); + }); + + await page.waitForChanges(); + await page.keyboard.press("Space"); + await page.waitForChanges(); + expect(tableSelectSpy).toHaveReceivedEventTimes(4); + expect(rowSelectSpy1).toHaveReceivedEventTimes(2); + expect(rowSelectSpy2).toHaveReceivedEventTimes(1); + expect(rowSelectSpy3).toHaveReceivedEventTimes(1); + expect(await row1.getProperty("selected")).toBe(false); + expect(await row2.getProperty("selected")).toBe(false); + expect(await row3.getProperty("selected")).toBe(false); + + expect(await element.getProperty("selectedItems")).toEqual([]); + await assertSelectedItems(page, { expectedItemIds: [] }); + }); it("correctly has no selected items after user clears selection via clear button", async () => { const page = await newE2EPage(); await page.setContent( diff --git a/packages/calcite-components/src/components/table/table.tsx b/packages/calcite-components/src/components/table/table.tsx index caa2dca30f9..d3a01720241 100644 --- a/packages/calcite-components/src/components/table/table.tsx +++ b/packages/calcite-components/src/components/table/table.tsx @@ -83,11 +83,12 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen @Prop({ reflect: true }) selectionMode: Extract<"none" | "multiple" | "single", SelectionMode> = "none"; - @Watch("pageSize") + @Watch("groupSeparator") @Watch("numbered") - @Watch("selectionMode") @Watch("numberingSystem") - @Watch("groupSeparator") + @Watch("pageSize") + @Watch("scale") + @Watch("selectionMode") handleNumberedChange(): void { this.updateRows(); } @@ -309,6 +310,7 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen row.bodyRowCount = bodyRows?.length; row.positionAll = allRows?.indexOf(row); row.numbered = this.numbered; + row.scale = this.scale; }); const colCount = @@ -360,23 +362,14 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen }; private setSelectedItems = (elToMatch?: HTMLCalciteTableRowElement): void => { - if (elToMatch?.rowType === "head") { - this.bodyRows?.forEach((el) => (el.selected = this.selectedCount !== this.bodyRows?.length)); - } else if (elToMatch?.rowType === "body") { - this.bodyRows?.forEach((el) => { - const matchingEl = elToMatch === el; - switch (this.selectionMode) { - case "multiple": - if (matchingEl) { - el.selected = !el.selected; - } - break; - case "single": - el.selected = matchingEl ? !el.selected : false; - break; - } - }); - } + this.bodyRows?.forEach((el) => { + if (elToMatch?.rowType === "head") { + el.selected = this.selectedCount !== this.bodyRows?.length; + } else { + el.selected = + elToMatch === el ? !el.selected : this.selectionMode === "multiple" ? el.selected : false; + } + }); this.updateSelectedItems(true); }; From 35a21ad06d6b6d3bde79fd18ba0895a14d8a7f28 Mon Sep 17 00:00:00 2001 From: Adam Date: Tue, 29 Aug 2023 11:02:55 -0700 Subject: [PATCH 17/44] Pr feedback --- .../src/components/table-cell/table-cell.tsx | 6 +++--- .../src/components/table-header/table-header.tsx | 6 +++--- .../src/components/table-row/table-row.tsx | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/calcite-components/src/components/table-cell/table-cell.tsx b/packages/calcite-components/src/components/table-cell/table-cell.tsx index d910bfb3205..7c9142feca9 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.tsx +++ b/packages/calcite-components/src/components/table-cell/table-cell.tsx @@ -109,7 +109,7 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp updateMessages(this, this.effectiveLocale); } - private tdEl: HTMLDivElement; + private containerEl: HTMLTableCellElement; // -------------------------------------------------------------------------- // @@ -148,7 +148,7 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp @Method() async setFocus(): Promise { await componentFocusable(this); - this.tdEl.focus(); + this.containerEl.focus(); } // -------------------------------------------------------------------------- // @@ -188,7 +188,7 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp rowSpan={this.rowSpan} tabIndex={this.disabled ? -1 : 0} // eslint-disable-next-line react/jsx-sort-props - ref={(el) => (this.tdEl = el)} + ref={(el) => (this.containerEl = el)} > {(this.selectionCell || this.isSafari) && ( diff --git a/packages/calcite-components/src/components/table-header/table-header.tsx b/packages/calcite-components/src/components/table-header/table-header.tsx index de04a7f8498..a488161dbee 100644 --- a/packages/calcite-components/src/components/table-header/table-header.tsx +++ b/packages/calcite-components/src/components/table-header/table-header.tsx @@ -136,7 +136,7 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo updateMessages(this, this.effectiveLocale); } - private thEl: HTMLDivElement; + private containerEl: HTMLTableCellElement; // -------------------------------------------------------------------------- // @@ -148,7 +148,7 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo @Method() async setFocus(): Promise { await componentFocusable(this); - this.thEl.focus(); + this.containerEl.focus(); } // -------------------------------------------------------------------------- @@ -204,7 +204,7 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo scope={scope} tabindex={0} // eslint-disable-next-line react/jsx-sort-props - ref={(el) => (this.thEl = el as HTMLDivElement)} + ref={(el) => (this.containerEl = el)} > {this.heading &&
{this.heading}
} {this.description &&
{this.description}
} diff --git a/packages/calcite-components/src/components/table-row/table-row.tsx b/packages/calcite-components/src/components/table-row/table-row.tsx index 342eb700bb3..bee3ac11e9d 100644 --- a/packages/calcite-components/src/components/table-row/table-row.tsx +++ b/packages/calcite-components/src/components/table-row/table-row.tsx @@ -26,7 +26,7 @@ import { CSS } from "./resources"; styleUrl: "table-row.scss", shadow: true, }) -export class Table implements LocalizedComponent { +export class TableRow implements LocalizedComponent { //-------------------------------------------------------------------------- // // Properties From 4e5f5cf55a64b08a59bad403e4e76d30c9fd2fd3 Mon Sep 17 00:00:00 2001 From: Adam Date: Tue, 29 Aug 2023 17:55:59 -0700 Subject: [PATCH 18/44] Pr feedback --- .../src/components/table-header/resources.ts | 4 +- .../components/table-header/table-header.scss | 4 +- .../src/components/table-row/resources.ts | 3 - .../src/components/table-row/table-row.tsx | 3 - .../src/components/table/resources.ts | 8 +- .../src/components/table/table.e2e.ts | 87 ++++++++++--------- .../src/components/table/table.scss | 2 +- .../src/components/table/table.tsx | 10 +-- .../calcite-components/src/demos/table.html | 30 +++++++ 9 files changed, 91 insertions(+), 60 deletions(-) delete mode 100644 packages/calcite-components/src/components/table-row/resources.ts diff --git a/packages/calcite-components/src/components/table-header/resources.ts b/packages/calcite-components/src/components/table-header/resources.ts index 246cca5e6b3..bbf53102f12 100644 --- a/packages/calcite-components/src/components/table-header/resources.ts +++ b/packages/calcite-components/src/components/table-header/resources.ts @@ -1,10 +1,10 @@ export const CSS = { numberCell: "number-cell", selectionCell: "selection-cell", - bodyRow: "is-in-body", + bodyRow: "body-row", heading: "heading", description: "description", - multipleSelectionCell: "multiple-selection-cell", + multipleSelectionCell: "cell--multiple-selection", assistiveText: "assistive-text", active: "active", }; diff --git a/packages/calcite-components/src/components/table-header/table-header.scss b/packages/calcite-components/src/components/table-header/table-header.scss index 2ae1d967097..0e4f0292a18 100644 --- a/packages/calcite-components/src/components/table-header/table-header.scss +++ b/packages/calcite-components/src/components/table-header/table-header.scss @@ -37,13 +37,13 @@ th { } } -th.is-in-body { +th.body-row { border-inline-end: 1px solid var(--calcite-table-header-border-color-internal); border-block-end: 0; border-block-start: 0; } -.multiple-selection-cell { +.cell--multiple-selection { @apply cursor-pointer align-middle text-color-3; } diff --git a/packages/calcite-components/src/components/table-row/resources.ts b/packages/calcite-components/src/components/table-row/resources.ts deleted file mode 100644 index 22dc39109f4..00000000000 --- a/packages/calcite-components/src/components/table-row/resources.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const CSS = { - isInTableHead: "is-in-table-head", -}; diff --git a/packages/calcite-components/src/components/table-row/table-row.tsx b/packages/calcite-components/src/components/table-row/table-row.tsx index bee3ac11e9d..2ce9b0336d1 100644 --- a/packages/calcite-components/src/components/table-row/table-row.tsx +++ b/packages/calcite-components/src/components/table-row/table-row.tsx @@ -15,7 +15,6 @@ import { LocalizedComponent } from "../../utils/locale"; import { Scale, SelectionMode } from "../interfaces"; import { focusElementInGroup, FocusElementInGroupDestination } from "../../utils/dom"; import { RowType, TableRowFocusEvent } from "../table/interfaces"; -import { CSS } from "./resources"; /** * @slot - A slot for adding `calcite-table-cell` or `calcite-table-header` elements. @@ -158,7 +157,6 @@ export class TableRow implements LocalizedComponent { } } } - //-------------------------------------------------------------------------- // // Private Methods @@ -338,7 +336,6 @@ export class TableRow implements LocalizedComponent { aria-disabled={this.disabled} aria-rowindex={this.positionAll + 1} aria-selected={this.selected} - class={{ [CSS.isInTableHead]: this.rowType === "head" }} onKeyDown={(event) => this.keyDownHandler(event)} // eslint-disable-next-line react/jsx-sort-props ref={(el) => (this.tableRowEl = el)} diff --git a/packages/calcite-components/src/components/table/resources.ts b/packages/calcite-components/src/components/table/resources.ts index 511b67e9ee1..2b40b029bf7 100644 --- a/packages/calcite-components/src/components/table/resources.ts +++ b/packages/calcite-components/src/components/table/resources.ts @@ -7,7 +7,13 @@ export const CSS = { paginationArea: "pagination-area", container: "container", tableContainer: "table-container", - tableFixed: "table-fixed-layout", + tableFixed: "table--fixed", assistiveText: "assistive-text", selectionActions: "selection-actions", }; + +export const SLOTS = { + selectionActions: "selection-actions", + tableHead: "table-head", + tableFoot: "table-foot", +}; diff --git a/packages/calcite-components/src/components/table/table.e2e.ts b/packages/calcite-components/src/components/table/table.e2e.ts index de7f5888080..c3cc1bd4e7c 100644 --- a/packages/calcite-components/src/components/table/table.e2e.ts +++ b/packages/calcite-components/src/components/table/table.e2e.ts @@ -5,12 +5,13 @@ import { accessible, renders, hidden, defaults, reflects } from "../../tests/com import { GlobalTestProps } from "../../tests/utils"; import { CSS } from "../table-header/resources"; import { CSS as CELLCSS } from "../table-cell/resources"; +import { SLOTS } from "../table/resources"; describe("calcite-table", () => { describe("renders", () => { renders( html` - + @@ -93,7 +94,7 @@ describe("calcite-table", () => { describe("is accessible simple", () => { accessible( html` - + @@ -116,7 +117,7 @@ describe("calcite-table", () => { describe("is accessible with selection mode multiple", () => { accessible( html` - + @@ -139,7 +140,7 @@ describe("calcite-table", () => { describe("is accessible with selection mode multiple selected at load", () => { accessible( html` - + @@ -162,7 +163,7 @@ describe("calcite-table", () => { describe("is accessible with selection mode single", () => { accessible( html` - + @@ -185,7 +186,7 @@ describe("calcite-table", () => { describe("is accessible with numbered", () => { accessible( html` - + @@ -208,7 +209,7 @@ describe("calcite-table", () => { describe("is accessible with numbered and selection", () => { accessible( html` - + @@ -230,7 +231,7 @@ describe("calcite-table", () => { describe("is accessible with pagination", () => { accessible( html` - + @@ -268,7 +269,7 @@ describe("calcite-table", () => { describe("is accessible with pagination and selection mode", () => { accessible( html` - + @@ -311,7 +312,7 @@ describe("selection modes", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -425,7 +426,7 @@ describe("selection modes", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -540,7 +541,7 @@ describe("selection modes", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -662,7 +663,7 @@ describe("selection modes", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -782,7 +783,7 @@ describe("selection modes", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -833,7 +834,7 @@ describe("selection modes", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -884,7 +885,7 @@ describe("selection modes", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -935,7 +936,7 @@ describe("selection modes", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -989,7 +990,7 @@ describe("selection modes", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -1043,7 +1044,7 @@ describe("selection modes", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -1104,7 +1105,7 @@ describe("pagination event", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -1167,7 +1168,7 @@ describe("keyboard navigation", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -1238,7 +1239,7 @@ describe("keyboard navigation", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -1309,7 +1310,7 @@ describe("keyboard navigation", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -1476,7 +1477,7 @@ describe("keyboard navigation", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -1529,7 +1530,7 @@ describe("keyboard navigation", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -1589,11 +1590,11 @@ describe("keyboard navigation", () => { const page = await newE2EPage(); await page.setContent( html` - + - + @@ -1615,13 +1616,13 @@ describe("keyboard navigation", () => { cell cell - + foot foot foot foot - + foot foot @@ -1688,11 +1689,11 @@ describe("keyboard navigation", () => { const page = await newE2EPage(); await page.setContent( html` - + - + @@ -1714,13 +1715,13 @@ describe("keyboard navigation", () => { cell cell - + foot foot foot foot - + foot foot @@ -1881,7 +1882,7 @@ describe("keyboard navigation", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -1897,7 +1898,7 @@ describe("keyboard navigation", () => { cell cell - + foot foot @@ -1962,7 +1963,7 @@ describe("keyboard navigation", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -1978,7 +1979,7 @@ describe("keyboard navigation", () => { cell cell - + foot foot @@ -2043,7 +2044,7 @@ describe("keyboard navigation", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -2059,7 +2060,7 @@ describe("keyboard navigation", () => { cell cell - + foot foot @@ -2130,7 +2131,7 @@ describe("keyboard navigation", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -2150,7 +2151,7 @@ describe("keyboard navigation", () => { cell cell - + foot foot @@ -2224,7 +2225,7 @@ describe("keyboard navigation", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -2244,7 +2245,7 @@ describe("keyboard navigation", () => { cell cell - + foot foot diff --git a/packages/calcite-components/src/components/table/table.scss b/packages/calcite-components/src/components/table/table.scss index bad64b05337..f45ce702174 100644 --- a/packages/calcite-components/src/components/table/table.scss +++ b/packages/calcite-components/src/components/table/table.scss @@ -40,7 +40,7 @@ tbody { border-block-end: 1px solid var(--calcite-ui-border-3); } -.table-fixed-layout { +.table--fixed { @apply table-fixed; } diff --git a/packages/calcite-components/src/components/table/table.tsx b/packages/calcite-components/src/components/table/table.tsx index d3a01720241..c494237cfe9 100644 --- a/packages/calcite-components/src/components/table/table.tsx +++ b/packages/calcite-components/src/components/table/table.tsx @@ -32,7 +32,7 @@ import { NumberingSystem, } from "../../utils/locale"; import { TableAppearance, TableLayout, TableRowFocusEvent } from "./interfaces"; -import { CSS } from "./resources"; +import { CSS, SLOTS } from "./resources"; import { TableMessages } from "./assets/table/t9n"; /** @@ -129,7 +129,7 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen @State() colCount = 0; - // this could probably also be a public property for setting the currently active page on load + // Follow up - Have a public start row property for setting initial page @State() pageStartRow = 1; @State() selectedCount = 0; @@ -423,7 +423,7 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen )}
- +
); @@ -451,7 +451,7 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen return ( (this.tableHeadSlotEl = el as HTMLSlotElement)} /> @@ -474,7 +474,7 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen return ( (this.tableFootSlotEl = el as HTMLSlotElement)} /> diff --git a/packages/calcite-components/src/demos/table.html b/packages/calcite-components/src/demos/table.html index 4fe8cce7d06..be7db53396c 100644 --- a/packages/calcite-components/src/demos/table.html +++ b/packages/calcite-components/src/demos/table.html @@ -1809,6 +1809,30 @@

Disabled rows

 + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + cell cell @@ -1827,6 +1851,12 @@

Disabled rows

cell cell + + cell + cell + cell + cell +

Numbered

From 4024b8eafbcae5aea9bd3eb6030e9344c564d5fd Mon Sep 17 00:00:00 2001 From: Adam Tirella Date: Tue, 29 Aug 2023 20:28:57 -0700 Subject: [PATCH 19/44] Pr feedback --- .../src/components/table-cell/table-cell.tsx | 27 ++--- .../src/components/table-row/table-row.tsx | 4 + .../src/components/table/table.tsx | 6 + .../calcite-components/src/demos/table.html | 112 +++++++++--------- 4 files changed, 78 insertions(+), 71 deletions(-) diff --git a/packages/calcite-components/src/components/table-cell/table-cell.tsx b/packages/calcite-components/src/components/table-cell/table-cell.tsx index 7c9142feca9..d7304d645af 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.tsx +++ b/packages/calcite-components/src/components/table-cell/table-cell.tsx @@ -17,7 +17,6 @@ import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../.. import { TableCellMessages } from "./assets/table-cell/t9n"; import { CSS } from "./resources"; import { RowType } from "../table/interfaces"; -import { getUserAgentString } from "../../utils/browser"; /** * @slot - A slot for adding content, usually text content. @@ -62,6 +61,9 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp /** @internal */ @Prop() positionInRow: number; + /** @internal */ + @Prop() readCellContentsToAT: boolean; + /** @internal */ @Prop() scale: Scale = "m"; @@ -94,11 +96,7 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp // -------------------------------------------------------------------------- @Element() el: HTMLCalciteTableCellElement; - /* Workaround for Safari https://bugs.webkit.org/show_bug.cgi?id=258430 https://bugs.webkit.org/show_bug.cgi?id=239478 */ - /* q - should this be a state on a parent table and passed via internal prop? */ - @State() isSafari: boolean; - - @State() safariText = ""; + @State() contentsText = ""; @State() defaultMessages: TableCellMessages; @@ -120,8 +118,7 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp async componentWillLoad(): Promise { setUpLoadableComponent(this); await setUpMessages(this); - this.isSafari = /safari/i.test(getUserAgentString()); - await this.updateSafariText; + await this.updateScreenReaderContentsText; } componentDidLoad(): void { @@ -156,14 +153,14 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp // // -------------------------------------------------------------------------- - private getScreenReaderText(): string { + private updateScreenReaderSelectionText(): string { const selectedText = `${this.messages.row} ${this.parentRowPositionLocalized} ${this.messages.selected} ${this.messages.keyboardDeselect}`; const unselectedText = `${this.messages.row} ${this.parentRowPositionLocalized} ${this.messages.unselected} ${this.messages.keyboardSelect}`; return this.parentRowIsSelected ? selectedText : unselectedText; } - private updateSafariText = (): void => { - this.safariText = this.el.textContent; + private updateScreenReaderContentsText = (): void => { + this.contentsText = this.el.textContent; }; //-------------------------------------------------------------------------- @@ -190,13 +187,13 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp // eslint-disable-next-line react/jsx-sort-props ref={(el) => (this.containerEl = el)} > - {(this.selectionCell || this.isSafari) && ( + {(this.selectionCell || this.readCellContentsToAT) && ( - {this.selectionCell && this.getScreenReaderText()} - {this.isSafari && !this.selectionCell && this.safariText} + {this.selectionCell && this.updateScreenReaderSelectionText()} + {this.readCellContentsToAT && !this.selectionCell && this.contentsText} )} - + ); diff --git a/packages/calcite-components/src/components/table-row/table-row.tsx b/packages/calcite-components/src/components/table-row/table-row.tsx index 2ce9b0336d1..c4b845f8ebd 100644 --- a/packages/calcite-components/src/components/table-row/table-row.tsx +++ b/packages/calcite-components/src/components/table-row/table-row.tsx @@ -56,6 +56,9 @@ export class TableRow implements LocalizedComponent { /** @internal */ @Prop() positionAll: number; + /** @internal */ + @Prop() readCellContentsToAT: boolean; + /** @internal */ @Prop() scale: Scale; @@ -253,6 +256,7 @@ export class TableRow implements LocalizedComponent { cell.parentRowType = this.rowType; cell.disabled = this.disabled; cell.scale = this.scale; + cell.readCellContentsToAT = this.readCellContentsToAT; }); } this.rowCells = cells || []; diff --git a/packages/calcite-components/src/components/table/table.tsx b/packages/calcite-components/src/components/table/table.tsx index c494237cfe9..1bc0dbb9a83 100644 --- a/packages/calcite-components/src/components/table/table.tsx +++ b/packages/calcite-components/src/components/table/table.tsx @@ -34,6 +34,7 @@ import { import { TableAppearance, TableLayout, TableRowFocusEvent } from "./interfaces"; import { CSS, SLOTS } from "./resources"; import { TableMessages } from "./assets/table/t9n"; +import { getUserAgentString } from "../../utils/browser"; /** * @slot - A slot for adding `calcite-table-row` or nested `calcite-table` elements. Content placed here will be rendered in a `table-body` tag. @@ -134,6 +135,9 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen @State() selectedCount = 0; + /* Workaround for Safari https://bugs.webkit.org/show_bug.cgi?id=258430 https://bugs.webkit.org/show_bug.cgi?id=239478 */ + @State() readCellContentsToAT: boolean; + @State() defaultMessages: TableMessages; @State() effectiveLocale = ""; @@ -168,6 +172,7 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen async componentWillLoad(): Promise { setUpLoadableComponent(this); await setUpMessages(this); + this.readCellContentsToAT = /safari/i.test(getUserAgentString()); this.updateRows(); } @@ -311,6 +316,7 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen row.positionAll = allRows?.indexOf(row); row.numbered = this.numbered; row.scale = this.scale; + row.readCellContentsToAT = this.readCellContentsToAT; }); const colCount = diff --git a/packages/calcite-components/src/demos/table.html b/packages/calcite-components/src/demos/table.html index be7db53396c..c863a68cd09 100644 --- a/packages/calcite-components/src/demos/table.html +++ b/packages/calcite-components/src/demos/table.html @@ -326,7 +326,7 @@

Interactive

- cell + cell cell cell @@ -371,7 +371,7 @@

Interactive

 - cell + cell cell cell @@ -383,7 +383,7 @@

Interactive

 - cell + cell cell cell @@ -406,7 +406,7 @@

Interactive

 - cell + cell cell cell @@ -418,7 +418,7 @@

Interactive

 - cell + cell cell cell @@ -430,7 +430,7 @@

Interactive

 - cell + cell cell cell @@ -466,7 +466,7 @@

Interactive

 - cell + cell cell cell @@ -500,7 +500,7 @@

Interactive

 - cell + cell cell cell @@ -512,7 +512,7 @@

Interactive

 - cell + cell cell cell @@ -535,7 +535,7 @@

Interactive

 - cell + cell cell cell @@ -547,7 +547,7 @@

Interactive

 - cell + cell cell cell @@ -559,7 +559,7 @@

Interactive

 - cell + cell cell cell @@ -595,7 +595,7 @@

Interactive

 - cell + cell cell cell @@ -640,7 +640,7 @@

Interactive

 - cell + cell cell cell @@ -652,7 +652,7 @@

Interactive

 - cell + cell cell cell @@ -675,7 +675,7 @@

Interactive

 - cell + cell cell cell @@ -687,7 +687,7 @@

Interactive

 - cell + cell cell cell @@ -699,7 +699,7 @@

Interactive

 - cell + cell cell cell @@ -744,7 +744,7 @@

Interactive

 - cell + cell cell cell @@ -756,7 +756,7 @@

Interactive

 - cell + cell cell cell @@ -779,7 +779,7 @@

Interactive

 - cell + cell cell cell @@ -791,7 +791,7 @@

Interactive

 - cell + cell cell cell @@ -803,7 +803,7 @@

Interactive

 - cell + cell cell cell @@ -839,7 +839,7 @@

Interactive

 - cell + cell cell cell @@ -873,7 +873,7 @@

Interactive

 - cell + cell cell cell @@ -885,7 +885,7 @@

Interactive

 - cell + cell cell cell @@ -908,7 +908,7 @@

Interactive

 - cell + cell cell cell @@ -920,7 +920,7 @@

Interactive

 - cell + cell cell cell @@ -932,7 +932,7 @@

Interactive

 - cell + cell cell cell @@ -968,7 +968,7 @@

Interactive

 - cell + cell cell cell @@ -1013,7 +1013,7 @@

Interactive

 - cell + cell cell cell @@ -1025,7 +1025,7 @@

Interactive

 - cell + cell cell cell @@ -1048,7 +1048,7 @@

Interactive

 - cell + cell cell cell @@ -1060,7 +1060,7 @@

Interactive

 - cell + cell cell cell @@ -1072,7 +1072,7 @@

Interactive

 - cell + cell cell cell @@ -1117,7 +1117,7 @@

Interactive

 - cell + cell cell cell @@ -1129,7 +1129,7 @@

Interactive

 - cell + cell cell cell @@ -1152,7 +1152,7 @@

Interactive

 - cell + cell cell cell @@ -1164,7 +1164,7 @@

Interactive

 - cell + cell cell cell @@ -1176,7 +1176,7 @@

Interactive

 - cell + cell cell cell @@ -1212,7 +1212,7 @@

Interactive

 - cell + cell cell cell @@ -1246,7 +1246,7 @@

Interactive

 - cell + cell cell cell @@ -1258,7 +1258,7 @@

Interactive

 - cell + cell cell cell @@ -1281,7 +1281,7 @@

Interactive

 - cell + cell cell cell @@ -1293,7 +1293,7 @@

Interactive

 - cell + cell cell cell @@ -1305,7 +1305,7 @@

Interactive

 - cell + cell cell cell @@ -1341,7 +1341,7 @@

Interactive

 - cell + cell cell cell @@ -1386,7 +1386,7 @@

Interactive

 - cell + cell cell cell @@ -1398,7 +1398,7 @@

Interactive

 - cell + cell cell cell @@ -1421,7 +1421,7 @@

Interactive

 - cell + cell cell cell @@ -1433,7 +1433,7 @@

Interactive

 - cell + cell cell cell @@ -1445,7 +1445,7 @@

Interactive

 - cell + cell cell cell @@ -1481,7 +1481,7 @@

Interactive

 - cell + cell cell cell @@ -1521,7 +1521,7 @@

Localized numbers

 - cell + cell cell cell @@ -1578,7 +1578,7 @@

Localized numbers

 - cell + cell cell cell @@ -1613,7 +1613,7 @@

Localized numbers

 - cell + cell cell cell From a81af8a22d1ccb608a69189ed94480c957ef986d Mon Sep 17 00:00:00 2001 From: Adam Tirella Date: Wed, 30 Aug 2023 14:24:09 -0700 Subject: [PATCH 20/44] Pr feedback --- .../src/components/table-cell/table-cell.scss | 2 +- .../src/components/table-header/table-header.scss | 5 +++-- .../src/components/table/table.scss | 15 +++++++++++---- .../src/components/table/table.tsx | 4 ++-- 4 files changed, 17 insertions(+), 9 deletions(-) diff --git a/packages/calcite-components/src/components/table-cell/table-cell.scss b/packages/calcite-components/src/components/table-cell/table-cell.scss index c5baf26fa0c..3072be86824 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.scss +++ b/packages/calcite-components/src/components/table-cell/table-cell.scss @@ -29,6 +29,7 @@ td { @apply text-start focus-base align-middle text-color-1; background: var(--calcite-table-cell-background-internal); border-inline-end: 1px solid var(--calcite-ui-border-3); + font-size: var(--calcite-table-cell-font-size-internal); &:focus { @apply focus-inset; } @@ -42,7 +43,6 @@ td { .footer-cell { @apply bg-background font-medium text-color-1; border-block-start: 1px solid var(--calcite-ui-border-3); - border-block-end: 1px solid var(--calcite-ui-border-3); } .number-cell, diff --git a/packages/calcite-components/src/components/table-header/table-header.scss b/packages/calcite-components/src/components/table-header/table-header.scss index 0e4f0292a18..203d0d0d991 100644 --- a/packages/calcite-components/src/components/table-header/table-header.scss +++ b/packages/calcite-components/src/components/table-header/table-header.scss @@ -26,7 +26,8 @@ } th { - @apply text-color-1 focus-base text-start font-medium; + @apply text-color-1 focus-base text-start font-medium align-middle; + font-size: var(--calcite-table-cell-font-size-internal); border-inline-end: 1px solid var(--calcite-table-header-border-color-internal); border-block-end: 1px solid var(--calcite-table-header-border-color-internal); padding-block: calc(var(--calcite-table-cell-padding-internal) * 1.5); @@ -38,7 +39,6 @@ th { } th.body-row { - border-inline-end: 1px solid var(--calcite-table-header-border-color-internal); border-block-end: 0; border-block-start: 0; } @@ -67,4 +67,5 @@ th.body-row { .description { @apply text-color-3; + font-size: var(--calcite-table-cell-font-size-secondary-internal); } diff --git a/packages/calcite-components/src/components/table/table.scss b/packages/calcite-components/src/components/table/table.scss index f45ce702174..407b8cd21db 100644 --- a/packages/calcite-components/src/components/table/table.scss +++ b/packages/calcite-components/src/components/table/table.scss @@ -1,14 +1,17 @@ :host([scale="s"]) { --calcite-table-cell-padding-internal: 0.25rem; - font-size: var(--calcite-font-size--2); + --calcite-table-cell-font-size-internal: var(--calcite-font-size--2); + --calcite-table-cell-font-size-secondary-internal: var(--calcite-font-size--3); } :host([scale="m"]) { --calcite-table-cell-padding-internal: 0.5rem; - font-size: var(--calcite-font-size--1); + --calcite-table-cell-font-size-internal: var(--calcite-font-size--1); + --calcite-table-cell-font-size-secondary-internal: var(--calcite-font-size--2); } :host([scale="l"]) { --calcite-table-cell-padding-internal: 1rem; - font-size: var(--calcite-font-size-0); + --calcite-table-cell-font-size-internal: var(--calcite-font-size-0); + --calcite-table-cell-font-size-secondary-internal: var(--calcite-font-size--1); } :host { @@ -44,6 +47,11 @@ tbody { @apply table-fixed; } +.simple, +.simple-zebra { + border-block-end: 1px solid var(--calcite-ui-border-3); +} + .bordered, .bordered-zebra { ::slotted(calcite-table-row) { @@ -83,7 +91,6 @@ tbody { .pagination-area { @apply flex flex-row w-full justify-center; padding-block: var(--calcite-table-cell-padding-internal); - border-block-start: 1px solid var(--calcite-ui-border-3); } @include base-component(); diff --git a/packages/calcite-components/src/components/table/table.tsx b/packages/calcite-components/src/components/table/table.tsx index 1bc0dbb9a83..d01a9390e2e 100644 --- a/packages/calcite-components/src/components/table/table.tsx +++ b/packages/calcite-components/src/components/table/table.tsx @@ -493,13 +493,13 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen
{this.selectionMode !== "none" && this.renderSelectionArea()} -
+
From e06a7990f9d596b8a86158592345206680cec848 Mon Sep 17 00:00:00 2001 From: Adam Tirella Date: Wed, 30 Aug 2023 14:36:01 -0700 Subject: [PATCH 21/44] Pr feedback --- .../src/components/table-header/resources.ts | 1 + .../components/table-header/table-header.scss | 8 ++++--- .../components/table-header/table-header.tsx | 1 + .../calcite-components/src/demos/table.html | 24 ++++++++++++++++++- 4 files changed, 30 insertions(+), 4 deletions(-) diff --git a/packages/calcite-components/src/components/table-header/resources.ts b/packages/calcite-components/src/components/table-header/resources.ts index bbf53102f12..23a28bf059d 100644 --- a/packages/calcite-components/src/components/table-header/resources.ts +++ b/packages/calcite-components/src/components/table-header/resources.ts @@ -2,6 +2,7 @@ export const CSS = { numberCell: "number-cell", selectionCell: "selection-cell", bodyRow: "body-row", + footerRow: "footer-row", heading: "heading", description: "description", multipleSelectionCell: "cell--multiple-selection", diff --git a/packages/calcite-components/src/components/table-header/table-header.scss b/packages/calcite-components/src/components/table-header/table-header.scss index 203d0d0d991..6b1e2632c7a 100644 --- a/packages/calcite-components/src/components/table-header/table-header.scss +++ b/packages/calcite-components/src/components/table-header/table-header.scss @@ -38,11 +38,13 @@ th { } } -th.body-row { +th.body-row, +th.footer-row { border-block-end: 0; - border-block-start: 0; } - +th.footer-row { + border-block-start: 1px solid var(--calcite-table-header-border-color-internal); +} .cell--multiple-selection { @apply cursor-pointer align-middle text-color-3; } diff --git a/packages/calcite-components/src/components/table-header/table-header.tsx b/packages/calcite-components/src/components/table-header/table-header.tsx index a488161dbee..4e04654c857 100644 --- a/packages/calcite-components/src/components/table-header/table-header.tsx +++ b/packages/calcite-components/src/components/table-header/table-header.tsx @@ -194,6 +194,7 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo aria-colindex={this.parentRowType !== "body" ? this.positionInRow : ""} class={{ [CSS.bodyRow]: this.parentRowType === "body", + [CSS.footerRow]: this.parentRowType === "foot", [CSS.numberCell]: this.numberCell, [CSS.selectionCell]: this.selectionCell, [CSS.multipleSelectionCell]: this.selectionMode === "multiple", diff --git a/packages/calcite-components/src/demos/table.html b/packages/calcite-components/src/demos/table.html index c863a68cd09..c2bcc953284 100644 --- a/packages/calcite-components/src/demos/table.html +++ b/packages/calcite-components/src/demos/table.html @@ -2220,6 +2220,12 @@

Headers in rows

Headers in rows and table-head

+ + + + + + @@ -2239,7 +2245,7 @@

Headers in rows and table-head

cell - + cell cell cell @@ -2256,6 +2262,12 @@

Headers in rows and table-head

foot foot + + + foot + foot + foot +

selection-mode single

@@ -2367,6 +2379,16 @@

selection-mode multiple with multiple headers, footers, pageSize

foot foot + + + foot + foot + foot + + + + foot +

selection-mode multiple and numbered including out of view

From fa7da05450489a43cb7c4842a9c0639443810f76 Mon Sep 17 00:00:00 2001 From: Adam Tirella Date: Wed, 30 Aug 2023 15:18:53 -0700 Subject: [PATCH 22/44] Pr feedback --- .../src/components/table/resources.ts | 4 +- .../src/components/table/table.e2e.ts | 16 +++---- .../src/components/table/table.scss | 15 +++--- .../src/components/table/table.stories.ts | 30 ++++++------ .../src/components/table/table.tsx | 17 +++++-- .../calcite-components/src/demos/table.html | 46 ++++++------------- 6 files changed, 57 insertions(+), 71 deletions(-) diff --git a/packages/calcite-components/src/components/table/resources.ts b/packages/calcite-components/src/components/table/resources.ts index 2b40b029bf7..5dd4c761bb4 100644 --- a/packages/calcite-components/src/components/table/resources.ts +++ b/packages/calcite-components/src/components/table/resources.ts @@ -1,8 +1,6 @@ export const CSS = { bordered: "bordered", - simple: "simple", - borderedZebra: "bordered-zebra", - simpleZebra: "simple-zebra", + zebra: "zebra", selectionArea: "selection-area", paginationArea: "pagination-area", container: "container", diff --git a/packages/calcite-components/src/components/table/table.e2e.ts b/packages/calcite-components/src/components/table/table.e2e.ts index c3cc1bd4e7c..f32481b2cc2 100644 --- a/packages/calcite-components/src/components/table/table.e2e.ts +++ b/packages/calcite-components/src/components/table/table.e2e.ts @@ -35,8 +35,8 @@ describe("calcite-table", () => { describe("defaults", () => { defaults("calcite-table", [ { - propertyName: "appearance", - defaultValue: "simple", + propertyName: "bordered", + defaultValue: false, }, { propertyName: "groupSeparator", @@ -62,15 +62,15 @@ describe("calcite-table", () => { propertyName: "selectionMode", defaultValue: "none", }, + { + propertyName: "zebra", + defaultValue: false, + }, ]); }); describe("reflects", () => { reflects("calcite-table", [ - { - propertyName: "appearance", - value: "simple", - }, { propertyName: "layout", value: "auto", @@ -1589,7 +1589,7 @@ describe("keyboard navigation", () => { it("navigates correctly when multiple header and multiple footer rows", async () => { const page = await newE2EPage(); await page.setContent( - html` + html` @@ -1688,7 +1688,7 @@ describe("keyboard navigation", () => { it("navigates correctly when multiple header and multiple footer rows, pagination present, and navigation to other page occurs", async () => { const page = await newE2EPage(); await page.setContent( - html` + html` diff --git a/packages/calcite-components/src/components/table/table.scss b/packages/calcite-components/src/components/table/table.scss index 407b8cd21db..148cd396e54 100644 --- a/packages/calcite-components/src/components/table/table.scss +++ b/packages/calcite-components/src/components/table/table.scss @@ -27,6 +27,10 @@ @apply overflow-x-scroll whitespace-nowrap; } +.table-container:not(.bordered) { + border-block-end: 1px solid var(--calcite-ui-border-3); +} + .assistive-text { @apply sr-only; } @@ -47,20 +51,13 @@ tbody { @apply table-fixed; } -.simple, -.simple-zebra { - border-block-end: 1px solid var(--calcite-ui-border-3); -} - -.bordered, -.bordered-zebra { +.bordered { ::slotted(calcite-table-row) { --calcite-table-row-border-color: var(--calcite-ui-border-3); } } -.simple-zebra, -.bordered-zebra { +.zebra { ::slotted(calcite-table-row:nth-child(2n + 1)) { --calcite-table-row-background: var(--calcite-ui-foreground-2); } diff --git a/packages/calcite-components/src/components/table/table.stories.ts b/packages/calcite-components/src/components/table/table.stories.ts index 251bac6cada..e214848daaf 100644 --- a/packages/calcite-components/src/components/table/table.stories.ts +++ b/packages/calcite-components/src/components/table/table.stories.ts @@ -17,10 +17,11 @@ export const simple = (): string => page-size="${number("page-size", 0)}" selection-mode="${select("selection-mode", ["none", "single", "multiple"], "none")}" scale="${select("scale", ["s", "m", "l"], "m")}" - appearance="${select("appearance", ["simple", "simple-zebra", "bordered", "bordered-zebra"], "simple")}" layout="${select("layout", ["auto", "fixed"], "auto")}" caption="${text("caption", "Simple table")}" ${boolean("numbered", false)} + ${boolean("bordered", false)} + ${boolean("zebra", false)} caption="Simple table" > @@ -49,10 +50,7 @@ export const simple = (): string => `; -export const simpleZebra_TestOnly = (): string => html` +export const simpleZebra_TestOnly = (): string => html` @@ -79,7 +77,7 @@ export const simpleZebra_TestOnly = (): string => html` `; -export const bordered_TestOnly = (): string => html` +export const bordered_TestOnly = (): string => html` @@ -106,10 +104,7 @@ export const bordered_TestOnly = (): string => html` +export const borderedZebra_TestOnly = (): string => html` @@ -163,7 +158,7 @@ export const alignments_TestOnly = (): string => html` `; -export const displayedRows_TestOnly = (): string => html` +export const disabledRows_TestOnly = (): string => html` @@ -282,7 +277,8 @@ export const layoutFixed_TestOnly = (): string => html` @@ -321,7 +317,8 @@ export const rowSpanAndColSpan_TestOnly = (): string => html``; export const rowSpanAndColSpan2_TestOnly = (): string => html` @@ -361,7 +358,8 @@ export const rowSpanAndColSpan2_TestOnly = (): string => html``; export const rowSpanAndColSpan3_TestOnly = (): string => html` @@ -406,7 +404,7 @@ export const rowSpanAndColSpan3_TestOnly = (): string => html` html` @@ -883,7 +881,7 @@ export const localized_TestOnly = (): string => html``; export const darkModeRTL_TestOnly = (): string => - html` + html` diff --git a/packages/calcite-components/src/components/table/table.tsx b/packages/calcite-components/src/components/table/table.tsx index d01a9390e2e..5bb5a582051 100644 --- a/packages/calcite-components/src/components/table/table.tsx +++ b/packages/calcite-components/src/components/table/table.tsx @@ -31,7 +31,7 @@ import { numberStringFormatter, NumberingSystem, } from "../../utils/locale"; -import { TableAppearance, TableLayout, TableRowFocusEvent } from "./interfaces"; +import { TableLayout, TableRowFocusEvent } from "./interfaces"; import { CSS, SLOTS } from "./resources"; import { TableMessages } from "./assets/table/t9n"; import { getUserAgentString } from "../../utils/browser"; @@ -56,8 +56,8 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen // //-------------------------------------------------------------------------- - /** Specifies the appearance of the component. */ - @Prop({ reflect: true }) appearance: TableAppearance = "simple"; + /** When `true`, displays borders in the table */ + @Prop({ reflect: true }) bordered = false; /** Specifies an accessible title for the component. */ @Prop() caption!: string; @@ -84,6 +84,9 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen @Prop({ reflect: true }) selectionMode: Extract<"none" | "multiple" | "single", SelectionMode> = "none"; + /** When `true`, displays zebra styling in the table */ + @Prop({ reflect: true }) zebra = false; + @Watch("groupSeparator") @Watch("numbered") @Watch("numberingSystem") @@ -493,7 +496,13 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen
{this.selectionMode !== "none" && this.renderSelectionArea()} -
+
{this.caption}
Interactive
- Appearance - - simple - simple-zebra - bordered - bordered-zebra + Features + + Numbered + Zebra + Bordered
@@ -272,11 +271,8 @@

Interactive

- Features - - Numbered -
+
Themes @@ -1689,8 +1685,8 @@

Simple

-

Simple-zebra

- +

zebra

+ @@ -1718,7 +1714,7 @@

Simple-zebra

Bordered

- + @@ -1746,7 +1742,7 @@

Bordered

Bordered-zebra

- + @@ -1991,7 +1987,7 @@

Layout fixed

Using row-span and col-span

- + @@ -2028,7 +2024,7 @@

Using row-span and col-span

Using row-span and col-span and numbered

- + @@ -2065,7 +2061,7 @@

Using row-span and col-span and numbered

Using row-span and col-span

- + @@ -2133,7 +2129,7 @@

Multiple headers using col-span

Complex keyboard test with multiple headers, selection, pagination using col-span

- + @@ -2342,7 +2338,7 @@

selection-mode multiple with selected at load

selection-mode multiple with multiple headers, footers, pageSize

- + @@ -2718,7 +2714,6 @@

const chipGroup = document.getElementById("preview-chips"); const chipGroupTheme = document.getElementById("theme-chips"); const chipGroupScale = document.getElementById("scale-chips"); - const chipGroupAppearance = document.getElementById("appearance-chips"); const chipGroupSelectionMode = document.getElementById("selection-mode-chips"); const chipGroupLayout = document.getElementById("layout-chips"); const pageSizeInput = document.getElementById("page-size-input"); @@ -2726,7 +2721,6 @@

const calciteChips = document.querySelectorAll("#preview-chips calcite-chip"); const calciteChipsTheme = document.querySelectorAll("#theme-chips calcite-chip"); const calciteChipsScale = document.querySelectorAll("#scale-chips calcite-chip"); - const calciteChipsAppearance = document.querySelectorAll("#appearance-chips calcite-chip"); const calciteChipsSelectionMode = document.querySelectorAll("#selection-mode-chips calcite-chip"); const calciteChipsLayout = document.querySelectorAll("#layout-chips calcite-chip"); @@ -2752,16 +2746,6 @@

}); }); - chipGroupAppearance.addEventListener("calciteChipGroupSelect", (event) => { - calciteChipsAppearance.forEach((chip) => { - if (event.target.selectedItems.includes(chip)) { - table.appearance = chip.value; - } else { - return; - } - }); - }); - chipGroupLayout.addEventListener("calciteChipGroupSelect", (event) => { calciteChipsLayout.forEach((chip) => { if (event.target.selectedItems.includes(chip)) { From 7b26d84bcbd15cdd9fda0feda1963df325908109 Mon Sep 17 00:00:00 2001 From: Adam Tirella Date: Wed, 30 Aug 2023 15:41:45 -0700 Subject: [PATCH 23/44] Pr feedback --- .../src/components/table-cell/table-cell.scss | 2 +- .../src/components/table-header/table-header.scss | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/components/table-cell/table-cell.scss b/packages/calcite-components/src/components/table-cell/table-cell.scss index 3072be86824..a8d9718026b 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.scss +++ b/packages/calcite-components/src/components/table-cell/table-cell.scss @@ -72,6 +72,6 @@ td { .selection-cell { @apply align-middle; & ::slotted(calcite-icon) { - margin-block-start: 0.3rem; + @apply pointer-events-none mt-1; } } diff --git a/packages/calcite-components/src/components/table-header/table-header.scss b/packages/calcite-components/src/components/table-header/table-header.scss index 6b1e2632c7a..5cf98dfc928 100644 --- a/packages/calcite-components/src/components/table-header/table-header.scss +++ b/packages/calcite-components/src/components/table-header/table-header.scss @@ -26,7 +26,7 @@ } th { - @apply text-color-1 focus-base text-start font-medium align-middle; + @apply text-color-1 focus-base text-start font-medium align-top; font-size: var(--calcite-table-cell-font-size-internal); border-inline-end: 1px solid var(--calcite-table-header-border-color-internal); border-block-end: 1px solid var(--calcite-table-header-border-color-internal); @@ -40,11 +40,14 @@ th { th.body-row, th.footer-row { + @apply align-middle; border-block-end: 0; } + th.footer-row { border-block-start: 1px solid var(--calcite-table-header-border-color-internal); } + .cell--multiple-selection { @apply cursor-pointer align-middle text-color-3; } From 12b81bb50224142833a699df0e98f1629280bfd9 Mon Sep 17 00:00:00 2001 From: Adam Tirella Date: Wed, 30 Aug 2023 16:21:35 -0700 Subject: [PATCH 24/44] Pr feedback --- .../src/components/table-cell/table-cell.tsx | 6 ++++-- .../src/components/table-header/table-header.tsx | 2 +- packages/calcite-components/src/components/table/table.tsx | 1 - 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/calcite-components/src/components/table-cell/table-cell.tsx b/packages/calcite-components/src/components/table-cell/table-cell.tsx index d7304d645af..a79e26b7b16 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.tsx +++ b/packages/calcite-components/src/components/table-cell/table-cell.tsx @@ -98,6 +98,8 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp @State() contentsText = ""; + @State() selectionText = ""; + @State() defaultMessages: TableCellMessages; @State() effectiveLocale = ""; @@ -153,10 +155,10 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp // // -------------------------------------------------------------------------- - private updateScreenReaderSelectionText(): string { + private updateScreenReaderSelectionText(): void { const selectedText = `${this.messages.row} ${this.parentRowPositionLocalized} ${this.messages.selected} ${this.messages.keyboardDeselect}`; const unselectedText = `${this.messages.row} ${this.parentRowPositionLocalized} ${this.messages.unselected} ${this.messages.keyboardSelect}`; - return this.parentRowIsSelected ? selectedText : unselectedText; + this.selectionText = this.parentRowIsSelected ? selectedText : unselectedText; } private updateScreenReaderContentsText = (): void => { diff --git a/packages/calcite-components/src/components/table-header/table-header.tsx b/packages/calcite-components/src/components/table-header/table-header.tsx index 4e04654c857..a567333a15b 100644 --- a/packages/calcite-components/src/components/table-header/table-header.tsx +++ b/packages/calcite-components/src/components/table-header/table-header.tsx @@ -203,7 +203,7 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo role="columnheader" rowSpan={this.rowSpan} scope={scope} - tabindex={0} + tabIndex={0} // eslint-disable-next-line react/jsx-sort-props ref={(el) => (this.containerEl = el)} > diff --git a/packages/calcite-components/src/components/table/table.tsx b/packages/calcite-components/src/components/table/table.tsx index 5bb5a582051..6b9dbe1ee68 100644 --- a/packages/calcite-components/src/components/table/table.tsx +++ b/packages/calcite-components/src/components/table/table.tsx @@ -133,7 +133,6 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen @State() colCount = 0; - // Follow up - Have a public start row property for setting initial page @State() pageStartRow = 1; @State() selectedCount = 0; From 7bc63c2326edcb16f3bddd3284f14ed70d9a38a7 Mon Sep 17 00:00:00 2001 From: Adam Tirella Date: Wed, 30 Aug 2023 16:54:29 -0700 Subject: [PATCH 25/44] Pr feedback --- .../src/components/table-row/table-row.tsx | 8 +- .../src/components/table/table.tsx | 12 +- .../calcite-components/src/demos/table.html | 108 +++++++++--------- 3 files changed, 62 insertions(+), 66 deletions(-) diff --git a/packages/calcite-components/src/components/table-row/table-row.tsx b/packages/calcite-components/src/components/table-row/table-row.tsx index c4b845f8ebd..5d7b8b16073 100644 --- a/packages/calcite-components/src/components/table-row/table-row.tsx +++ b/packages/calcite-components/src/components/table-row/table-row.tsx @@ -35,7 +35,7 @@ export class TableRow implements LocalizedComponent { /** When `true`, interaction is prevented and the component is displayed with lower opacity. */ @Prop({ reflect: true }) disabled = false; - /** Is the component selected. */ + /** When `true`, the component is selected. */ @Prop({ reflect: true }) selected = false; /** @internal */ @@ -81,11 +81,7 @@ export class TableRow implements LocalizedComponent { @Watch("selectedRowCount") @Watch("selectionMode") handleCellChanges(): void { - // todo need to ensure conditionally rendered cells - // (number / selection) exist before setting properties on all cells - if (this.rowCells?.length > 0) { - setTimeout(() => this.updateCells(), 60); - } + this.updateCells(); } //-------------------------------------------------------------------------- diff --git a/packages/calcite-components/src/components/table/table.tsx b/packages/calcite-components/src/components/table/table.tsx index 6b9dbe1ee68..b64291dd1e8 100644 --- a/packages/calcite-components/src/components/table/table.tsx +++ b/packages/calcite-components/src/components/table/table.tsx @@ -37,10 +37,10 @@ import { TableMessages } from "./assets/table/t9n"; import { getUserAgentString } from "../../utils/browser"; /** - * @slot - A slot for adding `calcite-table-row` or nested `calcite-table` elements. Content placed here will be rendered in a `table-body` tag. + * @slot - A slot for adding `calcite-table-row` or nested `calcite-table` elements. * @slot table-head- A slot for adding `calcite-table-row` and nested `calcite-table-header` elements. * @slot table-foot- A slot for adding `calcite-table-row` and nested `calcite-table-header` elements. - * @slot selection-actions - A slot for adding a `calcite-action` or other element to display when `selectionMode !== "none"` and `calcite-table-row` are selected. + * @slot selection-actions - A slot for adding a `calcite-action-bar` or other components to display when `selectionMode` is not `"none"` and one or more `calcite-table-row` is selected. */ @Component({ @@ -56,7 +56,7 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen // //-------------------------------------------------------------------------- - /** When `true`, displays borders in the table */ + /** When `true`, displays borders in the component. */ @Prop({ reflect: true }) bordered = false; /** Specifies an accessible title for the component. */ @@ -68,13 +68,13 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen /** Specifies the layout of the component. */ @Prop({ reflect: true }) layout: TableLayout = "auto"; - /** When `true`, displays the position of the row in numeric form */ + /** When `true`, displays the position of the row in numeric form. */ @Prop({ reflect: true }) numbered = false; /** Specifies the Unicode numeral system used by the component for localization. */ @Prop({ reflect: true }) numberingSystem?: NumberingSystem; - /** Specifies the page size of the component. When true, renders pagination. */ + /** Specifies the page size of the component. When `true`, renders `calcite-pagination` */ @Prop({ reflect: true }) pageSize = 0; /** Specifies the size of the component. */ @@ -84,7 +84,7 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen @Prop({ reflect: true }) selectionMode: Extract<"none" | "multiple" | "single", SelectionMode> = "none"; - /** When `true`, displays zebra styling in the table */ + /** When `true`, displays zebra styling in the component. */ @Prop({ reflect: true }) zebra = false; @Watch("groupSeparator") diff --git a/packages/calcite-components/src/demos/table.html b/packages/calcite-components/src/demos/table.html index dff4f453cc9..69baba91dfd 100644 --- a/packages/calcite-components/src/demos/table.html +++ b/packages/calcite-components/src/demos/table.html @@ -322,7 +322,7 @@

Interactive

- + cell cell cell cell @@ -367,7 +367,7 @@

Interactive

 - + cell cell cell cell @@ -379,7 +379,7 @@

Interactive

 - + cell cell cell cell @@ -402,7 +402,7 @@

Interactive

 - + cell cell cell cell @@ -414,7 +414,7 @@

Interactive

 - + cell cell cell cell @@ -426,7 +426,7 @@

Interactive

 - + cell cell cell cell @@ -462,7 +462,7 @@

Interactive

 - + cell cell cell cell @@ -496,7 +496,7 @@

Interactive

 - + cell cell cell cell @@ -508,7 +508,7 @@

Interactive

 - + cell cell cell cell @@ -531,7 +531,7 @@

Interactive

 - + cell cell cell cell @@ -543,7 +543,7 @@

Interactive

 - + cell cell cell cell @@ -555,7 +555,7 @@

Interactive

 - + cell cell cell cell @@ -591,7 +591,7 @@

Interactive

 - + cell cell cell cell @@ -636,7 +636,7 @@

Interactive

 - + cell cell cell cell @@ -648,7 +648,7 @@

Interactive

 - + cell cell cell cell @@ -671,7 +671,7 @@

Interactive

 - + cell cell cell cell @@ -683,7 +683,7 @@

Interactive

 - + cell cell cell cell @@ -695,7 +695,7 @@

Interactive

 - + cell cell cell cell @@ -740,7 +740,7 @@

Interactive

 - + cell cell cell cell @@ -752,7 +752,7 @@

Interactive

 - + cell cell cell cell @@ -775,7 +775,7 @@

Interactive

 - + cell cell cell cell @@ -787,7 +787,7 @@

Interactive

 - + cell cell cell cell @@ -799,7 +799,7 @@

Interactive

 - + cell cell cell cell @@ -835,7 +835,7 @@

Interactive

 - + cell cell cell cell @@ -869,7 +869,7 @@

Interactive

 - + cell cell cell cell @@ -881,7 +881,7 @@

Interactive

 - + cell cell cell cell @@ -904,7 +904,7 @@

Interactive

 - + cell cell cell cell @@ -916,7 +916,7 @@

Interactive

 - + cell cell cell cell @@ -928,7 +928,7 @@

Interactive

 - + cell cell cell cell @@ -964,7 +964,7 @@

Interactive

 - + cell cell cell cell @@ -1009,7 +1009,7 @@

Interactive

 - + cell cell cell cell @@ -1021,7 +1021,7 @@

Interactive

 - + cell cell cell cell @@ -1044,7 +1044,7 @@

Interactive

 - + cell cell cell cell @@ -1056,7 +1056,7 @@

Interactive

 - + cell cell cell cell @@ -1068,7 +1068,7 @@

Interactive

 - + cell cell cell cell @@ -1113,7 +1113,7 @@

Interactive

 - + cell cell cell cell @@ -1125,7 +1125,7 @@

Interactive

 - + cell cell cell cell @@ -1148,7 +1148,7 @@

Interactive

 - + cell cell cell cell @@ -1160,7 +1160,7 @@

Interactive

 - + cell cell cell cell @@ -1172,7 +1172,7 @@

Interactive

 - + cell cell cell cell @@ -1208,7 +1208,7 @@

Interactive

 - + cell cell cell cell @@ -1242,7 +1242,7 @@

Interactive

 - + cell cell cell cell @@ -1254,7 +1254,7 @@

Interactive

 - + cell cell cell cell @@ -1277,7 +1277,7 @@

Interactive

 - + cell cell cell cell @@ -1289,7 +1289,7 @@

Interactive

 - + cell cell cell cell @@ -1301,7 +1301,7 @@

Interactive

 - + cell cell cell cell @@ -1337,7 +1337,7 @@

Interactive

 - + cell cell cell cell @@ -1382,7 +1382,7 @@

Interactive

 - + cell cell cell cell @@ -1394,7 +1394,7 @@

Interactive

 - + cell cell cell cell @@ -1417,7 +1417,7 @@

Interactive

 - + cell cell cell cell @@ -1429,7 +1429,7 @@

Interactive

 - + cell cell cell cell @@ -1441,7 +1441,7 @@

Interactive

 - + cell cell cell cell @@ -1477,7 +1477,7 @@

Interactive

 - + cell cell cell cell @@ -1517,7 +1517,7 @@

Localized numbers

 - + cell cell cell cell From 8dd9777bdb7383bd05783f90d9465e8673d60b57 Mon Sep 17 00:00:00 2001 From: Adam Tirella Date: Wed, 30 Aug 2023 17:26:23 -0700 Subject: [PATCH 26/44] Add usage files --- .../src/components/table/usage/Advanced.md | 70 +++++++++++++++++++ .../src/components/table/usage/Basic.md | 30 ++++++++ 2 files changed, 100 insertions(+) create mode 100644 packages/calcite-components/src/components/table/usage/Advanced.md create mode 100644 packages/calcite-components/src/components/table/usage/Basic.md diff --git a/packages/calcite-components/src/components/table/usage/Advanced.md b/packages/calcite-components/src/components/table/usage/Advanced.md new file mode 100644 index 00000000000..95b79d76271 --- /dev/null +++ b/packages/calcite-components/src/components/table/usage/Advanced.md @@ -0,0 +1,70 @@ +A complex table component, with selection modes and slotted actions, pagination, and various display options configured. + +```html + + + + + + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + + 24,212 + 58% happiness + + + +``` diff --git a/packages/calcite-components/src/components/table/usage/Basic.md b/packages/calcite-components/src/components/table/usage/Basic.md new file mode 100644 index 00000000000..2c80896c114 --- /dev/null +++ b/packages/calcite-components/src/components/table/usage/Basic.md @@ -0,0 +1,30 @@ +A simple meter component. + +```html + + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + +``` From 39a438a3c0211a328a2a4682e2299ca6b8f4468a Mon Sep 17 00:00:00 2001 From: Adam Tirella Date: Wed, 30 Aug 2023 21:06:34 -0700 Subject: [PATCH 27/44] Pr feedback --- .../table-cell/assets/table-cell/t9n/messages.json | 6 +++--- .../table-cell/assets/table-cell/t9n/messages_ar.json | 6 +++--- .../table-cell/assets/table-cell/t9n/messages_bg.json | 6 +++--- .../table-cell/assets/table-cell/t9n/messages_bs.json | 6 +++--- .../table-cell/assets/table-cell/t9n/messages_ca.json | 6 +++--- .../table-cell/assets/table-cell/t9n/messages_cs.json | 6 +++--- .../table-cell/assets/table-cell/t9n/messages_da.json | 6 +++--- .../table-cell/assets/table-cell/t9n/messages_de.json | 6 +++--- .../table-cell/assets/table-cell/t9n/messages_el.json | 6 +++--- .../table-cell/assets/table-cell/t9n/messages_en.json | 6 +++--- .../table-cell/assets/table-cell/t9n/messages_es.json | 6 +++--- .../table-cell/assets/table-cell/t9n/messages_et.json | 6 +++--- .../table-cell/assets/table-cell/t9n/messages_fi.json | 6 +++--- .../table-cell/assets/table-cell/t9n/messages_fr.json | 6 +++--- .../table-cell/assets/table-cell/t9n/messages_he.json | 6 +++--- .../table-cell/assets/table-cell/t9n/messages_hr.json | 6 +++--- .../table-cell/assets/table-cell/t9n/messages_hu.json | 6 +++--- .../table-cell/assets/table-cell/t9n/messages_id.json | 6 +++--- .../table-cell/assets/table-cell/t9n/messages_it.json | 6 +++--- .../table-cell/assets/table-cell/t9n/messages_ja.json | 6 +++--- .../table-cell/assets/table-cell/t9n/messages_ko.json | 6 +++--- .../table-cell/assets/table-cell/t9n/messages_lt.json | 6 +++--- .../table-cell/assets/table-cell/t9n/messages_lv.json | 6 +++--- .../table-cell/assets/table-cell/t9n/messages_nl.json | 6 +++--- .../table-cell/assets/table-cell/t9n/messages_no.json | 6 +++--- .../table-cell/assets/table-cell/t9n/messages_pl.json | 6 +++--- .../assets/table-cell/t9n/messages_pt-BR.json | 6 +++--- .../assets/table-cell/t9n/messages_pt-PT.json | 6 +++--- .../table-cell/assets/table-cell/t9n/messages_ro.json | 6 +++--- .../table-cell/assets/table-cell/t9n/messages_ru.json | 6 +++--- .../table-cell/assets/table-cell/t9n/messages_sk.json | 6 +++--- .../table-cell/assets/table-cell/t9n/messages_sl.json | 6 +++--- .../table-cell/assets/table-cell/t9n/messages_sr.json | 6 +++--- .../table-cell/assets/table-cell/t9n/messages_sv.json | 6 +++--- .../table-cell/assets/table-cell/t9n/messages_th.json | 6 +++--- .../table-cell/assets/table-cell/t9n/messages_tr.json | 6 +++--- .../table-cell/assets/table-cell/t9n/messages_uk.json | 6 +++--- .../table-cell/assets/table-cell/t9n/messages_vi.json | 6 +++--- .../assets/table-cell/t9n/messages_zh-CN.json | 6 +++--- .../assets/table-cell/t9n/messages_zh-HK.json | 6 +++--- .../assets/table-cell/t9n/messages_zh-TW.json | 6 +++--- .../table-header/assets/table-header/t9n/messages.json | 10 +++++----- .../assets/table-header/t9n/messages_ar.json | 10 +++++----- .../assets/table-header/t9n/messages_bg.json | 10 +++++----- .../assets/table-header/t9n/messages_bs.json | 10 +++++----- .../assets/table-header/t9n/messages_ca.json | 10 +++++----- .../assets/table-header/t9n/messages_cs.json | 10 +++++----- .../assets/table-header/t9n/messages_da.json | 10 +++++----- .../assets/table-header/t9n/messages_de.json | 10 +++++----- .../assets/table-header/t9n/messages_el.json | 10 +++++----- .../assets/table-header/t9n/messages_en.json | 10 +++++----- .../assets/table-header/t9n/messages_es.json | 10 +++++----- .../assets/table-header/t9n/messages_et.json | 10 +++++----- .../assets/table-header/t9n/messages_fi.json | 10 +++++----- .../assets/table-header/t9n/messages_fr.json | 10 +++++----- .../assets/table-header/t9n/messages_he.json | 10 +++++----- .../assets/table-header/t9n/messages_hr.json | 10 +++++----- .../assets/table-header/t9n/messages_hu.json | 10 +++++----- .../assets/table-header/t9n/messages_id.json | 10 +++++----- .../assets/table-header/t9n/messages_it.json | 10 +++++----- .../assets/table-header/t9n/messages_ja.json | 10 +++++----- .../assets/table-header/t9n/messages_ko.json | 10 +++++----- .../assets/table-header/t9n/messages_lt.json | 10 +++++----- .../assets/table-header/t9n/messages_lv.json | 10 +++++----- .../assets/table-header/t9n/messages_nl.json | 10 +++++----- .../assets/table-header/t9n/messages_no.json | 10 +++++----- .../assets/table-header/t9n/messages_pl.json | 10 +++++----- .../assets/table-header/t9n/messages_pt-BR.json | 10 +++++----- .../assets/table-header/t9n/messages_pt-PT.json | 10 +++++----- .../assets/table-header/t9n/messages_ro.json | 10 +++++----- .../assets/table-header/t9n/messages_ru.json | 10 +++++----- .../assets/table-header/t9n/messages_sk.json | 10 +++++----- .../assets/table-header/t9n/messages_sl.json | 10 +++++----- .../assets/table-header/t9n/messages_sr.json | 10 +++++----- .../assets/table-header/t9n/messages_sv.json | 10 +++++----- .../assets/table-header/t9n/messages_th.json | 10 +++++----- .../assets/table-header/t9n/messages_tr.json | 10 +++++----- .../assets/table-header/t9n/messages_uk.json | 10 +++++----- .../assets/table-header/t9n/messages_vi.json | 10 +++++----- .../assets/table-header/t9n/messages_zh-CN.json | 10 +++++----- .../assets/table-header/t9n/messages_zh-HK.json | 10 +++++----- .../assets/table-header/t9n/messages_zh-TW.json | 10 +++++----- .../components/table/assets/table/t9n/messages.json | 6 +++--- .../components/table/assets/table/t9n/messages_ar.json | 6 +++--- .../components/table/assets/table/t9n/messages_bg.json | 6 +++--- .../components/table/assets/table/t9n/messages_bs.json | 6 +++--- .../components/table/assets/table/t9n/messages_ca.json | 6 +++--- .../components/table/assets/table/t9n/messages_cs.json | 6 +++--- .../components/table/assets/table/t9n/messages_da.json | 6 +++--- .../components/table/assets/table/t9n/messages_de.json | 6 +++--- .../components/table/assets/table/t9n/messages_el.json | 6 +++--- .../components/table/assets/table/t9n/messages_en.json | 6 +++--- .../components/table/assets/table/t9n/messages_es.json | 6 +++--- .../components/table/assets/table/t9n/messages_et.json | 6 +++--- .../components/table/assets/table/t9n/messages_fi.json | 6 +++--- .../components/table/assets/table/t9n/messages_fr.json | 6 +++--- .../components/table/assets/table/t9n/messages_he.json | 6 +++--- .../components/table/assets/table/t9n/messages_hr.json | 6 +++--- .../components/table/assets/table/t9n/messages_hu.json | 6 +++--- .../components/table/assets/table/t9n/messages_id.json | 6 +++--- .../components/table/assets/table/t9n/messages_it.json | 6 +++--- .../components/table/assets/table/t9n/messages_ja.json | 6 +++--- .../components/table/assets/table/t9n/messages_ko.json | 6 +++--- .../components/table/assets/table/t9n/messages_lt.json | 6 +++--- .../components/table/assets/table/t9n/messages_lv.json | 6 +++--- .../components/table/assets/table/t9n/messages_nl.json | 6 +++--- .../components/table/assets/table/t9n/messages_no.json | 6 +++--- .../components/table/assets/table/t9n/messages_pl.json | 6 +++--- .../table/assets/table/t9n/messages_pt-BR.json | 6 +++--- .../table/assets/table/t9n/messages_pt-PT.json | 6 +++--- .../components/table/assets/table/t9n/messages_ro.json | 6 +++--- .../components/table/assets/table/t9n/messages_ru.json | 6 +++--- .../components/table/assets/table/t9n/messages_sk.json | 6 +++--- .../components/table/assets/table/t9n/messages_sl.json | 6 +++--- .../components/table/assets/table/t9n/messages_sr.json | 6 +++--- .../components/table/assets/table/t9n/messages_sv.json | 6 +++--- .../components/table/assets/table/t9n/messages_th.json | 6 +++--- .../components/table/assets/table/t9n/messages_tr.json | 6 +++--- .../components/table/assets/table/t9n/messages_uk.json | 6 +++--- .../components/table/assets/table/t9n/messages_vi.json | 6 +++--- .../table/assets/table/t9n/messages_zh-CN.json | 6 +++--- .../table/assets/table/t9n/messages_zh-HK.json | 6 +++--- .../table/assets/table/t9n/messages_zh-TW.json | 6 +++--- 123 files changed, 451 insertions(+), 451 deletions(-) diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ar.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ar.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ar.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ar.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_bg.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_bg.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_bg.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_bg.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_bs.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_bs.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_bs.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_bs.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ca.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ca.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ca.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ca.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_cs.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_cs.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_cs.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_cs.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_da.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_da.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_da.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_da.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_de.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_de.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_de.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_de.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_el.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_el.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_el.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_el.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_en.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_en.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_en.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_en.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_es.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_es.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_es.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_es.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_et.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_et.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_et.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_et.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_fi.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_fi.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_fi.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_fi.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_fr.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_fr.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_fr.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_fr.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_he.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_he.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_he.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_he.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_hr.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_hr.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_hr.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_hr.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_hu.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_hu.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_hu.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_hu.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_id.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_id.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_id.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_id.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_it.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_it.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_it.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_it.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ja.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ja.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ja.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ja.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ko.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ko.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ko.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ko.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_lt.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_lt.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_lt.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_lt.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_lv.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_lv.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_lv.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_lv.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_nl.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_nl.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_nl.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_nl.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_no.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_no.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_no.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_no.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pl.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pl.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pl.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pl.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pt-BR.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pt-BR.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pt-BR.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pt-BR.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pt-PT.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pt-PT.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pt-PT.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pt-PT.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ro.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ro.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ro.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ro.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ru.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ru.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ru.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ru.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sk.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sk.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sk.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sk.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sl.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sl.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sl.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sl.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sr.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sr.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sr.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sr.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sv.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sv.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sv.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sv.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_th.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_th.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_th.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_th.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_tr.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_tr.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_tr.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_tr.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_uk.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_uk.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_uk.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_uk.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_vi.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_vi.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_vi.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_vi.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-CN.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-CN.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-CN.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-CN.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-HK.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-HK.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-HK.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-HK.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-TW.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-TW.json index 1a9672643cc..45923e6df8b 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-TW.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-TW.json @@ -1,8 +1,8 @@ { + "keyboardDeselect": "Press Enter or Space to deselect row", + "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "unselected": "unselected", "selectionColumn": "Selection column", - "keyboardSelect": "Press Enter or Space to select row", - "keyboardDeselect": "Press Enter or Space to deselect row" + "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ar.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ar.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ar.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ar.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_bg.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_bg.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_bg.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_bg.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_bs.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_bs.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_bs.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_bs.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ca.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ca.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ca.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ca.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_cs.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_cs.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_cs.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_cs.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_da.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_da.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_da.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_da.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_de.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_de.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_de.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_de.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_el.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_el.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_el.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_el.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_en.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_en.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_en.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_en.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_es.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_es.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_es.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_es.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_et.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_et.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_et.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_et.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_fi.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_fi.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_fi.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_fi.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_fr.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_fr.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_fr.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_fr.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_he.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_he.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_he.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_he.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_hr.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_hr.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_hr.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_hr.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_hu.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_hu.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_hu.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_hu.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_id.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_id.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_id.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_id.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_it.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_it.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_it.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_it.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ja.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ja.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ja.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ja.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ko.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ko.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ko.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ko.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_lt.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_lt.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_lt.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_lt.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_lv.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_lv.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_lv.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_lv.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_nl.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_nl.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_nl.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_nl.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_no.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_no.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_no.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_no.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pl.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pl.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pl.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pl.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pt-BR.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pt-BR.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pt-BR.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pt-BR.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pt-PT.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pt-PT.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pt-PT.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pt-PT.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ro.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ro.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ro.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ro.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ru.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ru.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ru.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ru.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sk.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sk.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sk.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sk.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sl.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sl.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sl.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sl.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sr.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sr.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sr.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sr.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sv.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sv.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sv.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sv.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_th.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_th.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_th.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_th.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_tr.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_tr.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_tr.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_tr.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_uk.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_uk.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_uk.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_uk.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_vi.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_vi.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_vi.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_vi.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-CN.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-CN.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-CN.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-CN.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-HK.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-HK.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-HK.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-HK.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-TW.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-TW.json index f62fb4dc6a3..c3e9bff67f9 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-TW.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-TW.json @@ -1,8 +1,8 @@ { - "selected": "selected", - "selectionColumn": "Selection column", - "keyboardSelectAll": "Press Enter or Space to select all rows", - "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "all": "all", - "rowNumber": "Row number" + "keyboardDeselectAll": "Press Enter or Space to deselect all rows", + "keyboardSelectAll": "Press Enter or Space to select all rows", + "rowNumber": "Row number", + "selected": "selected", + "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_ar.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_ar.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_ar.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_ar.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_bg.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_bg.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_bg.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_bg.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_bs.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_bs.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_bs.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_bs.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_ca.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_ca.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_ca.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_ca.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_cs.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_cs.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_cs.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_cs.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_da.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_da.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_da.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_da.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_de.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_de.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_de.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_de.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_el.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_el.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_el.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_el.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_en.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_en.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_en.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_en.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_es.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_es.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_es.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_es.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_et.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_et.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_et.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_et.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_fi.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_fi.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_fi.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_fi.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_fr.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_fr.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_fr.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_fr.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_he.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_he.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_he.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_he.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_hr.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_hr.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_hr.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_hr.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_hu.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_hu.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_hu.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_hu.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_id.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_id.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_id.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_id.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_it.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_it.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_it.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_it.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_ja.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_ja.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_ja.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_ja.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_ko.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_ko.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_ko.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_ko.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_lt.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_lt.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_lt.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_lt.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_lv.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_lv.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_lv.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_lv.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_nl.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_nl.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_nl.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_nl.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_no.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_no.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_no.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_no.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_pl.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_pl.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_pl.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_pl.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_pt-BR.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_pt-BR.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_pt-BR.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_pt-BR.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_pt-PT.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_pt-PT.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_pt-PT.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_pt-PT.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_ro.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_ro.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_ro.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_ro.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_ru.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_ru.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_ru.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_ru.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_sk.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_sk.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_sk.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_sk.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_sl.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_sl.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_sl.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_sl.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_sr.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_sr.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_sr.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_sr.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_sv.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_sv.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_sv.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_sv.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_th.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_th.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_th.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_th.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_tr.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_tr.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_tr.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_tr.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_uk.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_uk.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_uk.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_uk.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_vi.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_vi.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_vi.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_vi.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_zh-CN.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_zh-CN.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_zh-CN.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_zh-CN.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_zh-HK.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_zh-HK.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_zh-HK.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_zh-HK.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } diff --git a/packages/calcite-components/src/components/table/assets/table/t9n/messages_zh-TW.json b/packages/calcite-components/src/components/table/assets/table/t9n/messages_zh-TW.json index c078c9b7831..76931e75ab2 100644 --- a/packages/calcite-components/src/components/table/assets/table/t9n/messages_zh-TW.json +++ b/packages/calcite-components/src/components/table/assets/table/t9n/messages_zh-TW.json @@ -1,7 +1,7 @@ { - "selected": "Selected", "clear": "Clear", - "row": "Row", + "hiddenSelected": "Rows selected but out of view", "page": "Page", - "hiddenSelected": "Rows selected but out of view" + "row": "Row", + "selected": "Selected" } From 7fed6e138682634b84e7cd8f43dab3f9822e0bab Mon Sep 17 00:00:00 2001 From: Adam Tirella Date: Wed, 30 Aug 2023 21:18:46 -0700 Subject: [PATCH 28/44] Pr feedback --- .../src/components/table/table.e2e.ts | 23 +-- .../src/components/table/table.stories.ts | 171 +++++++++--------- 2 files changed, 98 insertions(+), 96 deletions(-) diff --git a/packages/calcite-components/src/components/table/table.e2e.ts b/packages/calcite-components/src/components/table/table.e2e.ts index f32481b2cc2..af0c876c881 100644 --- a/packages/calcite-components/src/components/table/table.e2e.ts +++ b/packages/calcite-components/src/components/table/table.e2e.ts @@ -1,10 +1,9 @@ -// import { newE2EPage } from "@stencil/core/testing"; import { E2EPage, newE2EPage } from "@stencil/core/testing"; import { html } from "../../../support/formatting"; import { accessible, renders, hidden, defaults, reflects } from "../../tests/commonTests"; import { GlobalTestProps } from "../../tests/utils"; import { CSS } from "../table-header/resources"; -import { CSS as CELLCSS } from "../table-cell/resources"; +import { CSS as CELL_CSS } from "../table-cell/resources"; import { SLOTS } from "../table/resources"; describe("calcite-table", () => { @@ -228,6 +227,7 @@ describe("calcite-table", () => { ` ); }); + describe("is accessible with pagination", () => { accessible( html` @@ -266,6 +266,7 @@ describe("calcite-table", () => { ` ); }); + describe("is accessible with pagination and selection mode", () => { accessible( html` @@ -1934,7 +1935,7 @@ describe("keyboard navigation", () => { await page.waitForChanges(); expect( await page.$eval(`#${rowFoot.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList) - ).toEqual({ "0": CELLCSS.footerCell, "1": CSS.selectionCell }); + ).toEqual({ "0": CELL_CSS.footerCell, "1": CSS.selectionCell }); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); @@ -2015,7 +2016,7 @@ describe("keyboard navigation", () => { await page.waitForChanges(); expect( await page.$eval(`#${rowFoot.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList) - ).toEqual({ "0": CELLCSS.footerCell, "1": CSS.numberCell }); + ).toEqual({ "0": CELL_CSS.footerCell, "1": CSS.numberCell }); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); @@ -2099,7 +2100,7 @@ describe("keyboard navigation", () => { await page.waitForChanges(); expect( await page.$eval(`#${rowFoot.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList) - ).toEqual({ "0": CELLCSS.footerCell, "1": CSS.selectionCell }); + ).toEqual({ "0": CELL_CSS.footerCell, "1": CSS.selectionCell }); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); @@ -2190,7 +2191,7 @@ describe("keyboard navigation", () => { await page.waitForChanges(); expect( await page.$eval(`#${rowFoot.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList) - ).toEqual({ "0": CELLCSS.footerCell, "1": CSS.selectionCell }); + ).toEqual({ "0": CELL_CSS.footerCell, "1": CSS.selectionCell }); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); @@ -2211,7 +2212,7 @@ describe("keyboard navigation", () => { await page.waitForChanges(); expect( await page.$eval(`#${rowFoot.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList) - ).toEqual({ "0": CELLCSS.footerCell, "1": CSS.numberCell }); + ).toEqual({ "0": CELL_CSS.footerCell, "1": CSS.numberCell }); page.keyboard.press("ControlLeft"); await page.keyboard.press("Home"); @@ -2299,7 +2300,7 @@ describe("keyboard navigation", () => { await page.waitForChanges(); expect( await page.$eval(`#${rowFoot.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList) - ).toEqual({ "0": CELLCSS.footerCell, "1": CSS.numberCell }); + ).toEqual({ "0": CELL_CSS.footerCell, "1": CSS.numberCell }); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); @@ -2322,7 +2323,7 @@ describe("keyboard navigation", () => { await page.waitForChanges(); expect( await page.$eval(`#${rowFoot.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList) - ).toEqual({ "0": CELLCSS.footerCell, "1": CSS.numberCell }); + ).toEqual({ "0": CELL_CSS.footerCell, "1": CSS.numberCell }); page.keyboard.press("ControlRight"); @@ -2370,7 +2371,7 @@ describe("keyboard navigation", () => { await page.waitForChanges(); expect( await page.$eval(`#${rowFoot.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList) - ).toEqual({ "0": CELLCSS.footerCell, "1": CSS.selectionCell }); + ).toEqual({ "0": CELL_CSS.footerCell, "1": CSS.selectionCell }); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); @@ -2393,7 +2394,7 @@ describe("keyboard navigation", () => { await page.waitForChanges(); expect( await page.$eval(`#${rowFoot.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList) - ).toEqual({ "0": CELLCSS.footerCell, "1": CSS.numberCell }); + ).toEqual({ "0": CELL_CSS.footerCell, "1": CSS.numberCell }); }); }); diff --git a/packages/calcite-components/src/components/table/table.stories.ts b/packages/calcite-components/src/components/table/table.stories.ts index e214848daaf..4ce94e3cef2 100644 --- a/packages/calcite-components/src/components/table/table.stories.ts +++ b/packages/calcite-components/src/components/table/table.stories.ts @@ -316,7 +316,7 @@ export const rowSpanAndColSpan_TestOnly = (): string => html` `; -export const rowSpanAndColSpan2_TestOnly = (): string => html` html` html` `; -export const selectionModeAndSelectedOnLoad_TestOnly = (): string => html` html` html` `; -export const selectionModeAndSelectedOnLoadWithMultipleFooterAndHeader_TestOnly = (): string => html` - - - - - - - - - - - - - - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - - 58% happiness - - - - 24,212 - 58% happiness - - -`; +export const selectionModeMultipleAndSelectedOnLoadWithMultipleFooterAndHeader_TestOnly = + (): string => html` + + + + + + + + + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + + 58% happiness + + + + 24,212 + 58% happiness + + + `; export const localized_TestOnly = (): string => html` Date: Wed, 30 Aug 2023 21:45:17 -0700 Subject: [PATCH 29/44] Pr feedback --- .../src/components/table-cell/table-cell.scss | 12 +-- .../src/components/table-cell/table-cell.tsx | 8 +- .../components/table-header/table-header.scss | 21 ++-- .../components/table-header/table-header.tsx | 2 +- .../src/components/table-row/table-row.scss | 20 ++-- .../src/components/table-row/table-row.tsx | 24 ++--- .../src/components/table/resources.ts | 4 +- .../src/components/table/table.e2e.ts | 90 ++++++++--------- .../src/components/table/table.scss | 23 +++-- .../src/components/table/table.stories.ts | 52 +++++----- .../src/components/table/table.tsx | 25 ++--- .../src/components/table/usage/Advanced.md | 4 +- .../src/components/table/usage/Basic.md | 2 +- .../calcite-components/src/demos/table.html | 96 +++++++++---------- 14 files changed, 193 insertions(+), 190 deletions(-) diff --git a/packages/calcite-components/src/components/table-cell/table-cell.scss b/packages/calcite-components/src/components/table-cell/table-cell.scss index a8d9718026b..66f70c60228 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.scss +++ b/packages/calcite-components/src/components/table-cell/table-cell.scss @@ -8,8 +8,8 @@ */ :host { - --calcite-table-cell-background-internal: var(--calcite-table-cell-background, transparent); - --calcite-table-cell-border-color-internal: var(--calcite-table-cell-border-color, transparent); + --calcite-internal-table-cell-background-internal: var(--calcite-table-cell-background, transparent); + --calcite-internal-table-cell-border-color-internal: var(--calcite-table-cell-border-color, transparent); @apply contents; } @@ -27,13 +27,13 @@ td { @apply text-start focus-base align-middle text-color-1; - background: var(--calcite-table-cell-background-internal); + background: var(--calcite-internal-table-cell-background); border-inline-end: 1px solid var(--calcite-ui-border-3); - font-size: var(--calcite-table-cell-font-size-internal); + font-size: var(--calcite-internal-table-cell-font-size); &:focus { @apply focus-inset; } - padding: var(--calcite-table-cell-padding-internal); + padding: var(--calcite-internal-table-cell-padding); } .number-cell { @@ -53,7 +53,7 @@ td { } .selection-cell { - @apply cursor-pointer; + @apply cursor-pointer text-color-3; inset-inline-start: 2rem; } diff --git a/packages/calcite-components/src/components/table-cell/table-cell.tsx b/packages/calcite-components/src/components/table-cell/table-cell.tsx index a79e26b7b16..ea4010a77c4 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.tsx +++ b/packages/calcite-components/src/components/table-cell/table-cell.tsx @@ -94,16 +94,17 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp // Private Properties // // -------------------------------------------------------------------------- + @Element() el: HTMLCalciteTableCellElement; @State() contentsText = ""; - @State() selectionText = ""; - @State() defaultMessages: TableCellMessages; @State() effectiveLocale = ""; + @State() selectionText = ""; + @Watch("effectiveLocale") effectiveLocaleChange(): void { updateMessages(this, this.effectiveLocale); @@ -149,6 +150,7 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp await componentFocusable(this); this.containerEl.focus(); } + // -------------------------------------------------------------------------- // // Private Methods @@ -186,7 +188,7 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp role="gridcell" rowSpan={this.rowSpan} tabIndex={this.disabled ? -1 : 0} - // eslint-disable-next-line react/jsx-sort-props + // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530) ref={(el) => (this.containerEl = el)} > {(this.selectionCell || this.readCellContentsToAT) && ( diff --git a/packages/calcite-components/src/components/table-header/table-header.scss b/packages/calcite-components/src/components/table-header/table-header.scss index 5cf98dfc928..bd167b5d4ea 100644 --- a/packages/calcite-components/src/components/table-header/table-header.scss +++ b/packages/calcite-components/src/components/table-header/table-header.scss @@ -8,8 +8,8 @@ */ :host { - --calcite-table-header-background-internal: var(--calcite-table-header-background, var(--calcite-ui-foreground-2)); - --calcite-table-header-border-color-internal: var(--calcite-table-border-color, var(--calcite-ui-border-3)); + --calcite-internal-table-header-background: var(--calcite-table-header-background, var(--calcite-ui-foreground-2)); + --calcite-internal-table-header-border-color: var(--calcite-table-border-color, var(--calcite-ui-border-3)); @apply contents; } @@ -27,12 +27,12 @@ th { @apply text-color-1 focus-base text-start font-medium align-top; - font-size: var(--calcite-table-cell-font-size-internal); - border-inline-end: 1px solid var(--calcite-table-header-border-color-internal); - border-block-end: 1px solid var(--calcite-table-header-border-color-internal); - padding-block: calc(var(--calcite-table-cell-padding-internal) * 1.5); - padding-inline: var(--calcite-table-cell-padding-internal); - background-color: var(--calcite-table-header-background-internal); + font-size: var(--calcite-internal-table-cell-font-size); + border-inline-end: 1px solid var(--calcite-internal-table-header-border-color); + border-block-end: 1px solid var(--calcite-internal-table-header-border-color); + padding-block: calc(var(--calcite-internal-table-cell-padding) * 1.5); + padding-inline: var(--calcite-internal-table-cell-padding); + background-color: var(--calcite-internal-table-header-background); &:focus-within { @apply focus-inset; } @@ -45,7 +45,7 @@ th.footer-row { } th.footer-row { - border-block-start: 1px solid var(--calcite-table-header-border-color-internal); + border-block-start: 1px solid var(--calcite-internal-table-header-border-color); } .cell--multiple-selection { @@ -54,6 +54,7 @@ th.footer-row { .number-cell, .selection-cell { + @apply text-color-2; inline-size: 2rem; min-inline-size: 2rem; } @@ -72,5 +73,5 @@ th.footer-row { .description { @apply text-color-3; - font-size: var(--calcite-table-cell-font-size-secondary-internal); + font-size: var(--calcite-internal-table-cell-font-size-secondary); } diff --git a/packages/calcite-components/src/components/table-header/table-header.tsx b/packages/calcite-components/src/components/table-header/table-header.tsx index a567333a15b..3e2f28d4a39 100644 --- a/packages/calcite-components/src/components/table-header/table-header.tsx +++ b/packages/calcite-components/src/components/table-header/table-header.tsx @@ -204,7 +204,7 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo rowSpan={this.rowSpan} scope={scope} tabIndex={0} - // eslint-disable-next-line react/jsx-sort-props + // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530) ref={(el) => (this.containerEl = el)} > {this.heading &&
{this.heading}
} diff --git a/packages/calcite-components/src/components/table-row/table-row.scss b/packages/calcite-components/src/components/table-row/table-row.scss index 00791f8f12f..4b2454beb89 100644 --- a/packages/calcite-components/src/components/table-row/table-row.scss +++ b/packages/calcite-components/src/components/table-row/table-row.scss @@ -7,23 +7,21 @@ * @prop --calcite-table-row-border-color: Specifies the border color of the component. */ -@include disabled(); - :host { - --calcite-table-row-background-internal: var(--calcite-table-row-background, var(--calcite-ui-foreground-1)); - --calcite-table-row-border-color-internal: var(--calcite-table-row-border-color, transparent); + --calcite-internal-table-row-background: var(--calcite-table-row-background, var(--calcite-ui-foreground-1)); + --calcite-internal-table-row-border-color: var(--calcite-table-row-border-color, transparent); @apply contents; } -:host([disabled]) tr { - @apply opacity-disabled pointer-events-none; -} +@include base-component(); -:host([hidden]) { - @apply hidden; +@include disabled() { + tr { + @apply opacity-disabled pointer-events-none; + } } tr { - border-block-end: 1px solid var(--calcite-table-row-border-color-internal); - background-color: var(--calcite-table-row-background-internal); + border-block-end: 1px solid var(--calcite-internal-table-row-border-color); + background-color: var(--calcite-internal-table-row-background); } diff --git a/packages/calcite-components/src/components/table-row/table-row.tsx b/packages/calcite-components/src/components/table-row/table-row.tsx index 5d7b8b16073..63e403dac0c 100644 --- a/packages/calcite-components/src/components/table-row/table-row.tsx +++ b/packages/calcite-components/src/components/table-row/table-row.tsx @@ -15,6 +15,7 @@ import { LocalizedComponent } from "../../utils/locale"; import { Scale, SelectionMode } from "../interfaces"; import { focusElementInGroup, FocusElementInGroupDestination } from "../../utils/dom"; import { RowType, TableRowFocusEvent } from "../table/interfaces"; +import { isActivationKey } from "../../utils/key"; /** * @slot - A slot for adding `calcite-table-cell` or `calcite-table-header` elements. @@ -102,11 +103,11 @@ export class TableRow implements LocalizedComponent { @Element() el: HTMLCalciteTableRowElement; - private tableRowSlotEl: HTMLSlotElement; + private rowCells: (HTMLCalciteTableCellElement | HTMLCalciteTableHeaderElement)[] = []; private tableRowEl: HTMLTableRowElement; - private rowCells: (HTMLCalciteTableCellElement | HTMLCalciteTableHeaderElement)[] = []; + private tableRowSlotEl: HTMLSlotElement; @State() effectiveLocale = ""; @@ -148,7 +149,7 @@ export class TableRow implements LocalizedComponent { } const cellPosition = lastCell ? this.rowCells[this.rowCells.length - 1] - : (this.rowCells as any)?.find((_, index) => index + 1 === position); + : this.rowCells?.find((_, index) => index + 1 === position); if (cellPosition) { cellPosition.setFocus(); @@ -156,6 +157,7 @@ export class TableRow implements LocalizedComponent { } } } + //-------------------------------------------------------------------------- // // Private Methods @@ -167,7 +169,7 @@ export class TableRow implements LocalizedComponent { const key = event.key; const isControl = event.ctrlKey; const cells = this.rowCells; - if (el?.matches("calcite-table-cell") || el.matches("calcite-table-header")) { + if (el.matches("calcite-table-cell") || el.matches("calcite-table-header")) { switch (key) { case "ArrowUp": this.emitTableRowFocusRequest(el.positionInRow, this.positionAll, "previous"); @@ -264,7 +266,7 @@ export class TableRow implements LocalizedComponent { }; private handleKeyboardSelection = (event: KeyboardEvent): void => { - if (event.key === "Enter" || event.key === " ") { + if (isActivationKey(event.key)) { if (event.key === " ") { event.preventDefault(); } @@ -300,7 +302,7 @@ export class TableRow implements LocalizedComponent { onKeyDown={this.selectionMode === "multiple" && this.handleKeyboardSelection} selectedRowCount={this.selectedRowCount} selectedRowCountLocalized={this.selectedRowCountLocalized} - selectionCell + selectionCell={true} selectionMode={this.selectionMode} /> ) : this.rowType === "body" ? ( @@ -310,20 +312,20 @@ export class TableRow implements LocalizedComponent { onKeyDown={this.handleKeyboardSelection} parentRowIsSelected={this.selected} parentRowPositionLocalized={this.positionSectionLocalized} - selectionCell + selectionCell={true} > {this.renderSelectionIcon()} ) : ( - + ); } renderNumberedCell(): VNode { return this.rowType === "head" ? ( - + ) : ( - + {this.rowType === "body" && this.positionSectionLocalized} ); @@ -337,7 +339,7 @@ export class TableRow implements LocalizedComponent { aria-rowindex={this.positionAll + 1} aria-selected={this.selected} onKeyDown={(event) => this.keyDownHandler(event)} - // eslint-disable-next-line react/jsx-sort-props + // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530) ref={(el) => (this.tableRowEl = el)} > {this.numbered && this.renderNumberedCell()} diff --git a/packages/calcite-components/src/components/table/resources.ts b/packages/calcite-components/src/components/table/resources.ts index 5dd4c761bb4..93646dda10f 100644 --- a/packages/calcite-components/src/components/table/resources.ts +++ b/packages/calcite-components/src/components/table/resources.ts @@ -12,6 +12,6 @@ export const CSS = { export const SLOTS = { selectionActions: "selection-actions", - tableHead: "table-head", - tableFoot: "table-foot", + tableHeader: "table-header", + tableFooter: "table-footer", }; diff --git a/packages/calcite-components/src/components/table/table.e2e.ts b/packages/calcite-components/src/components/table/table.e2e.ts index af0c876c881..eaae9793586 100644 --- a/packages/calcite-components/src/components/table/table.e2e.ts +++ b/packages/calcite-components/src/components/table/table.e2e.ts @@ -10,7 +10,7 @@ describe("calcite-table", () => { describe("renders", () => { renders( html` - + @@ -93,7 +93,7 @@ describe("calcite-table", () => { describe("is accessible simple", () => { accessible( html` - + @@ -116,7 +116,7 @@ describe("calcite-table", () => { describe("is accessible with selection mode multiple", () => { accessible( html` - + @@ -139,7 +139,7 @@ describe("calcite-table", () => { describe("is accessible with selection mode multiple selected at load", () => { accessible( html` - + @@ -162,7 +162,7 @@ describe("calcite-table", () => { describe("is accessible with selection mode single", () => { accessible( html` - + @@ -185,7 +185,7 @@ describe("calcite-table", () => { describe("is accessible with numbered", () => { accessible( html` - + @@ -208,7 +208,7 @@ describe("calcite-table", () => { describe("is accessible with numbered and selection", () => { accessible( html` - + @@ -231,7 +231,7 @@ describe("calcite-table", () => { describe("is accessible with pagination", () => { accessible( html` - + @@ -270,7 +270,7 @@ describe("calcite-table", () => { describe("is accessible with pagination and selection mode", () => { accessible( html` - + @@ -313,7 +313,7 @@ describe("selection modes", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -427,7 +427,7 @@ describe("selection modes", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -542,7 +542,7 @@ describe("selection modes", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -664,7 +664,7 @@ describe("selection modes", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -784,7 +784,7 @@ describe("selection modes", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -835,7 +835,7 @@ describe("selection modes", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -886,7 +886,7 @@ describe("selection modes", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -937,7 +937,7 @@ describe("selection modes", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -991,7 +991,7 @@ describe("selection modes", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -1045,7 +1045,7 @@ describe("selection modes", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -1071,7 +1071,7 @@ describe("selection modes", () => { const row3 = await page.find("#row-3"); const tableSelectSpy = await element.spyOnEvent("calciteTableSelect"); - const tablePaginateSpy = await element.spyOnEvent("calciteTablePageSelect"); + const tablePaginateSpy = await element.spyOnEvent("calciteTablePageChange"); await page.waitForChanges(); @@ -1106,7 +1106,7 @@ describe("pagination event", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -1127,7 +1127,7 @@ describe("pagination event", () => { await assertSelectedItems.setUpEvents(page); const element = await page.find("calcite-table"); - const tablePaginateSpy = await element.spyOnEvent("calciteTablePageSelect"); + const tablePaginateSpy = await element.spyOnEvent("calciteTablePageChange"); await page.waitForChanges(); expect(tablePaginateSpy).toHaveReceivedEventTimes(0); @@ -1169,7 +1169,7 @@ describe("keyboard navigation", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -1240,7 +1240,7 @@ describe("keyboard navigation", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -1311,7 +1311,7 @@ describe("keyboard navigation", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -1478,7 +1478,7 @@ describe("keyboard navigation", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -1531,7 +1531,7 @@ describe("keyboard navigation", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -1591,11 +1591,11 @@ describe("keyboard navigation", () => { const page = await newE2EPage(); await page.setContent( html` - + - + @@ -1617,13 +1617,13 @@ describe("keyboard navigation", () => { cell cell - + foot foot foot foot - + foot foot @@ -1690,11 +1690,11 @@ describe("keyboard navigation", () => { const page = await newE2EPage(); await page.setContent( html` - + - + @@ -1716,13 +1716,13 @@ describe("keyboard navigation", () => { cell cell - + foot foot foot foot - + foot foot @@ -1883,7 +1883,7 @@ describe("keyboard navigation", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -1899,7 +1899,7 @@ describe("keyboard navigation", () => { cell cell - + foot foot @@ -1964,7 +1964,7 @@ describe("keyboard navigation", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -1980,7 +1980,7 @@ describe("keyboard navigation", () => { cell cell - + foot foot @@ -2045,7 +2045,7 @@ describe("keyboard navigation", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -2061,7 +2061,7 @@ describe("keyboard navigation", () => { cell cell - + foot foot @@ -2132,7 +2132,7 @@ describe("keyboard navigation", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -2152,7 +2152,7 @@ describe("keyboard navigation", () => { cell cell - + foot foot @@ -2226,7 +2226,7 @@ describe("keyboard navigation", () => { const page = await newE2EPage(); await page.setContent( html` - + @@ -2246,7 +2246,7 @@ describe("keyboard navigation", () => { cell cell - + foot foot diff --git a/packages/calcite-components/src/components/table/table.scss b/packages/calcite-components/src/components/table/table.scss index 148cd396e54..9e69391bfa0 100644 --- a/packages/calcite-components/src/components/table/table.scss +++ b/packages/calcite-components/src/components/table/table.scss @@ -1,17 +1,17 @@ :host([scale="s"]) { - --calcite-table-cell-padding-internal: 0.25rem; - --calcite-table-cell-font-size-internal: var(--calcite-font-size--2); - --calcite-table-cell-font-size-secondary-internal: var(--calcite-font-size--3); + --calcite-internal-table-cell-padding: 0.25rem; + --calcite-internal-table-cell-font-size: var(--calcite-font-size--2); + --calcite-internal-table-cell-font-size-secondary: var(--calcite-font-size--3); } :host([scale="m"]) { - --calcite-table-cell-padding-internal: 0.5rem; - --calcite-table-cell-font-size-internal: var(--calcite-font-size--1); - --calcite-table-cell-font-size-secondary-internal: var(--calcite-font-size--2); + --calcite-internal-table-cell-padding: 0.5rem; + --calcite-internal-table-cell-font-size: var(--calcite-font-size--1); + --calcite-internal-table-cell-font-size-secondary: var(--calcite-font-size--2); } :host([scale="l"]) { - --calcite-table-cell-padding-internal: 1rem; - --calcite-table-cell-font-size-internal: var(--calcite-font-size-0); - --calcite-table-cell-font-size-secondary-internal: var(--calcite-font-size--1); + --calcite-internal-table-cell-padding: 1rem; + --calcite-internal-table-cell-font-size: var(--calcite-font-size-0); + --calcite-internal-table-cell-font-size-secondary: var(--calcite-font-size--1); } :host { @@ -62,7 +62,6 @@ tbody { --calcite-table-row-background: var(--calcite-ui-foreground-2); } } - .selection-actions { @apply flex flex-row; margin-inline-start: auto; @@ -70,7 +69,7 @@ tbody { .selection-area { @apply flex flex-row items-center; - padding-block: var(--calcite-table-cell-padding-internal); + padding-block: var(--calcite-internal-table-cell-padding); } .selection-area calcite-chip:last-of-type { @@ -87,7 +86,7 @@ tbody { .pagination-area { @apply flex flex-row w-full justify-center; - padding-block: var(--calcite-table-cell-padding-internal); + padding-block: var(--calcite-internal-table-cell-padding); } @include base-component(); diff --git a/packages/calcite-components/src/components/table/table.stories.ts b/packages/calcite-components/src/components/table/table.stories.ts index 4ce94e3cef2..cf2fdd79ab1 100644 --- a/packages/calcite-components/src/components/table/table.stories.ts +++ b/packages/calcite-components/src/components/table/table.stories.ts @@ -24,7 +24,7 @@ export const simple = (): string => ${boolean("zebra", false)} caption="Simple table" > - + @@ -51,7 +51,7 @@ export const simple = (): string => `; export const simpleZebra_TestOnly = (): string => html` - + @@ -78,7 +78,7 @@ export const simpleZebra_TestOnly = (): string => html``; export const bordered_TestOnly = (): string => html` - + @@ -105,7 +105,7 @@ export const bordered_TestOnly = (): string => html``; export const borderedZebra_TestOnly = (): string => html` - + @@ -132,7 +132,7 @@ export const borderedZebra_TestOnly = (): string => html``; export const alignments_TestOnly = (): string => html` - + @@ -159,7 +159,7 @@ export const alignments_TestOnly = (): string => html` `; export const disabledRows_TestOnly = (): string => html` - + @@ -186,7 +186,7 @@ export const disabledRows_TestOnly = (): string => html` - + @@ -216,7 +216,7 @@ export const richCellContent_TestOnly = (): string => html` - + @@ -250,7 +250,7 @@ export const richCellContent_TestOnly = (): string => html` `; export const layoutFixed_TestOnly = (): string => html` - + @@ -281,7 +281,7 @@ export const rowSpanAndColSpan_TestOnly = (): string => html` - + @@ -322,7 +322,7 @@ export const rowSpanAndColSpanNumbered_TestOnly = (): string => html` - + @@ -362,7 +362,7 @@ export const rowSpanAndColSpan3_TestOnly = (): string => html` - + @@ -406,11 +406,11 @@ export const complexWithFooter_TestOnly = (): string => html` - + - + @@ -450,13 +450,13 @@ export const complexWithFooter_TestOnly = (): string => html`cell cell - + foot foot foot foot - + foot foot @@ -492,7 +492,7 @@ export const headersInRows_TestOnly = (): string => html` html` - + @@ -522,7 +522,7 @@ export const headersInRowsAndHeadAndFooter_TestOnly = (): string => html` cell cell - + foot foot foot @@ -538,7 +538,7 @@ export const singleSelection_TestOnly = (): string => html` - + @@ -574,7 +574,7 @@ export const selectionModeMultipleAndSelectedOnLoad_TestOnly = (): string => htm - + @@ -641,11 +641,11 @@ export const selectionModeMultipleAndSelectedOnLoadWithMultipleFooterAndHeader_T - + - + @@ -699,13 +699,13 @@ export const selectionModeMultipleAndSelectedOnLoadWithMultipleFooterAndHeader_T cell cell - + 58% happiness - + 24,212 html` - + @@ -883,7 +883,7 @@ export const localized_TestOnly = (): string => html` html` - + diff --git a/packages/calcite-components/src/components/table/table.tsx b/packages/calcite-components/src/components/table/table.tsx index b64291dd1e8..3a21d4b02a3 100644 --- a/packages/calcite-components/src/components/table/table.tsx +++ b/packages/calcite-components/src/components/table/table.tsx @@ -38,8 +38,8 @@ import { getUserAgentString } from "../../utils/browser"; /** * @slot - A slot for adding `calcite-table-row` or nested `calcite-table` elements. - * @slot table-head- A slot for adding `calcite-table-row` and nested `calcite-table-header` elements. - * @slot table-foot- A slot for adding `calcite-table-row` and nested `calcite-table-header` elements. + * @slot table-header - A slot for adding `calcite-table-row` and nested `calcite-table-header` elements. + * @slot table-footer - A slot for adding `calcite-table-row` and nested `calcite-table-header` elements. * @slot selection-actions - A slot for adding a `calcite-action-bar` or other components to display when `selectionMode` is not `"none"` and one or more `calcite-table-row` is selected. */ @@ -138,6 +138,7 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen @State() selectedCount = 0; /* Workaround for Safari https://bugs.webkit.org/show_bug.cgi?id=258430 https://bugs.webkit.org/show_bug.cgi?id=239478 */ + // ⚠️ browser-sniffing is not a best practice and should be avoided ⚠️ @State() readCellContentsToAT: boolean; @State() defaultMessages: TableMessages; @@ -149,20 +150,20 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen updateMessages(this, this.effectiveLocale); } - private paginationEl: HTMLCalcitePaginationElement; - private allRows: HTMLCalciteTableRowElement[]; - private headRows: HTMLCalciteTableRowElement[]; - private bodyRows: HTMLCalciteTableRowElement[]; + private headRows: HTMLCalciteTableRowElement[]; + private footRows: HTMLCalciteTableRowElement[]; - private tableHeadSlotEl: HTMLSlotElement; + private paginationEl: HTMLCalcitePaginationElement; private tableBodySlotEl: HTMLSlotElement; + private tableHeadSlotEl: HTMLSlotElement; + private tableFootSlotEl: HTMLSlotElement; //-------------------------------------------------------------------------- @@ -201,7 +202,7 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen @Event({ cancelable: false }) calciteTableSelect: EventEmitter; /** Emits when the component's page selection changes. */ - @Event({ cancelable: false }) calciteTablePageSelect: EventEmitter; + @Event({ cancelable: false }) calciteTablePageChange: EventEmitter; /** @internal */ @Event({ cancelable: false }) @@ -337,7 +338,7 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen private handlePaginationChange = (): void => { const requestedItem = this.paginationEl?.startItem; this.pageStartRow = requestedItem || 1; - this.calciteTablePageSelect.emit(); + this.calciteTablePageChange.emit(); this.updateRows(); }; @@ -448,7 +449,7 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen scale={this.scale} startItem={1} totalItems={this.bodyRows?.length} - // eslint-disable-next-line react/jsx-sort-props + // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530) ref={(el) => (this.paginationEl = el)} />

@@ -459,7 +460,7 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen return (
(this.tableHeadSlotEl = el as HTMLSlotElement)} /> @@ -482,7 +483,7 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen return ( (this.tableFootSlotEl = el as HTMLSlotElement)} /> diff --git a/packages/calcite-components/src/components/table/usage/Advanced.md b/packages/calcite-components/src/components/table/usage/Advanced.md index 95b79d76271..1fe9eb68b24 100644 --- a/packages/calcite-components/src/components/table/usage/Advanced.md +++ b/packages/calcite-components/src/components/table/usage/Advanced.md @@ -6,7 +6,7 @@ A complex table component, with selection modes and slotted actions, pagination, - + @@ -60,7 +60,7 @@ A complex table component, with selection modes and slotted actions, pagination, cell cell - + 24,212 58% happiness diff --git a/packages/calcite-components/src/components/table/usage/Basic.md b/packages/calcite-components/src/components/table/usage/Basic.md index 2c80896c114..46f49fa287b 100644 --- a/packages/calcite-components/src/components/table/usage/Basic.md +++ b/packages/calcite-components/src/components/table/usage/Basic.md @@ -2,7 +2,7 @@ A simple meter component. ```html - + diff --git a/packages/calcite-components/src/demos/table.html b/packages/calcite-components/src/demos/table.html index 69baba91dfd..639e59a2043 100644 --- a/packages/calcite-components/src/demos/table.html +++ b/packages/calcite-components/src/demos/table.html @@ -297,7 +297,7 @@

Interactive

- + @@ -1504,7 +1504,7 @@

Localized numbers

- + @@ -1659,7 +1659,7 @@

Localized numbers

Simple

- + @@ -1687,7 +1687,7 @@

Simple

zebra

- + @@ -1715,7 +1715,7 @@

zebra

Bordered

- + @@ -1743,7 +1743,7 @@

Bordered

Bordered-zebra

- + @@ -1771,7 +1771,7 @@

Bordered-zebra

Various alignments

- + @@ -1799,7 +1799,7 @@

Various alignments

Disabled rows

- + @@ -1847,7 +1847,7 @@

Disabled rows

cell cell - + cell cell cell @@ -1857,7 +1857,7 @@

Disabled rows

Numbered

- + @@ -1885,7 +1885,7 @@

Numbered

Numbered

- + @@ -1909,7 +1909,7 @@

Numbered

cell cell - + foot foot foot @@ -1919,7 +1919,7 @@

Numbered

With rich cell content

- + @@ -1950,7 +1950,7 @@

With rich cell content

> - + foot foot foot @@ -1960,7 +1960,7 @@

With rich cell content

Layout fixed

- + @@ -1988,7 +1988,7 @@

Layout fixed

Using row-span and col-span

- + @@ -2025,7 +2025,7 @@

Using row-span and col-span

Using row-span and col-span and numbered

- + @@ -2062,7 +2062,7 @@

Using row-span and col-span and numbered

Using row-span and col-span

- + @@ -2104,11 +2104,11 @@

Using row-span and col-span

Multiple headers using col-span

- + - + @@ -2130,11 +2130,11 @@

Multiple headers using col-span

Complex keyboard test with multiple headers, selection, pagination using col-span

- + - + @@ -2174,13 +2174,13 @@

Complex keyboard test with multiple headers, selection, pagination using col cell cell - + foot foot foot foot - + foot foot @@ -2216,13 +2216,13 @@

Headers in rows

Headers in rows and table-head

- + - + @@ -2252,13 +2252,13 @@

Headers in rows and table-head

cell cell - + foot foot foot - + foot foot @@ -2272,7 +2272,7 @@

selection-mode single

- + @@ -2304,7 +2304,7 @@

selection-mode multiple with selected at load

- + @@ -2328,7 +2328,7 @@

selection-mode multiple with selected at load

cell cell - + foot foot foot @@ -2339,11 +2339,11 @@

selection-mode multiple with selected at load

selection-mode multiple with multiple headers, footers, pageSize

- + - + @@ -2365,25 +2365,25 @@

selection-mode multiple with multiple headers, footers, pageSize

cell cell - + foot foot foot foot - + foot foot - + foot foot foot - + - foot + foot @@ -2399,7 +2399,7 @@

selection-mode multiple and numbered including out of view

- + @@ -2467,7 +2467,7 @@

selection-mode multiple and numbered including out of view and footer

- + @@ -2521,7 +2521,7 @@

selection-mode multiple and numbered including out of view and footer

cell cell - + 24,212 58% happiness @@ -2540,11 +2540,11 @@

selection-mode multiple and numbered including out of view and multiple head - + - + @@ -2598,11 +2598,11 @@

selection-mode multiple and numbered including out of view and multiple head cell cell - + 58% happiness - + 24,212 58% happiness @@ -2611,7 +2611,7 @@

selection-mode multiple and numbered including out of view and multiple head

With selection-mode multiple and rich cell content

- + @@ -2655,7 +2655,7 @@

- + @@ -2728,7 +2728,7 @@

console.log(event.target.selectedItems); }); - table.addEventListener("calciteTablePageSelect", (event) => { + table.addEventListener("calciteTablePageChange", (event) => { console.log("page select event"); }); From 5a5e844185ac60be58b87b2ed4c78a22d84c9f81 Mon Sep 17 00:00:00 2001 From: Adam Date: Wed, 30 Aug 2023 21:52:36 -0700 Subject: [PATCH 30/44] Pr feedback --- .../src/components/table-cell/table-cell.tsx | 5 +++-- .../src/components/table-row/table-row.tsx | 22 +++++++++++++------ 2 files changed, 18 insertions(+), 9 deletions(-) diff --git a/packages/calcite-components/src/components/table-cell/table-cell.tsx b/packages/calcite-components/src/components/table-cell/table-cell.tsx index ea4010a77c4..250d0734fef 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.tsx +++ b/packages/calcite-components/src/components/table-cell/table-cell.tsx @@ -121,7 +121,8 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp async componentWillLoad(): Promise { setUpLoadableComponent(this); await setUpMessages(this); - await this.updateScreenReaderContentsText; + this.updateScreenReaderContentsText; + this.updateScreenReaderSelectionText; } componentDidLoad(): void { @@ -193,7 +194,7 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp > {(this.selectionCell || this.readCellContentsToAT) && ( - {this.selectionCell && this.updateScreenReaderSelectionText()} + {this.selectionCell && this.selectionText} {this.readCellContentsToAT && !this.selectionCell && this.contentsText} )} diff --git a/packages/calcite-components/src/components/table-row/table-row.tsx b/packages/calcite-components/src/components/table-row/table-row.tsx index 63e403dac0c..5e507458c83 100644 --- a/packages/calcite-components/src/components/table-row/table-row.tsx +++ b/packages/calcite-components/src/components/table-row/table-row.tsx @@ -82,7 +82,9 @@ export class TableRow implements LocalizedComponent { @Watch("selectedRowCount") @Watch("selectionMode") handleCellChanges(): void { - this.updateCells(); + if (this.tableRowEl && this.rowCells.length > 0) { + this.updateCells(); + } } //-------------------------------------------------------------------------- @@ -92,7 +94,9 @@ export class TableRow implements LocalizedComponent { //-------------------------------------------------------------------------- componentDidLoad(): void { - this.updateCells(); + if (this.tableRowEl && this.rowCells.length > 0) { + this.updateCells(); + } } //-------------------------------------------------------------------------- @@ -298,6 +302,7 @@ export class TableRow implements LocalizedComponent { ) : ( - + ); } renderNumberedCell(): VNode { return this.rowType === "head" ? ( - - ) : ( - - {this.rowType === "body" && this.positionSectionLocalized} + + ) : this.rowType === "body" ? ( + + {this.positionSectionLocalized} + ) : ( + ); } From 455d7e6124ebd1aceef082fddbb89d42e8089a69 Mon Sep 17 00:00:00 2001 From: Adam Date: Wed, 30 Aug 2023 22:01:22 -0700 Subject: [PATCH 31/44] Pr feedback --- .../src/components/table-cell/table-cell.tsx | 17 +++++++++++++++- .../src/components/table-row/table-row.tsx | 20 ++++++++++++++++++- 2 files changed, 35 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/components/table-cell/table-cell.tsx b/packages/calcite-components/src/components/table-cell/table-cell.tsx index 250d0734fef..101391a8daa 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.tsx +++ b/packages/calcite-components/src/components/table-cell/table-cell.tsx @@ -13,6 +13,13 @@ import { T9nComponent, updateMessages, } from "../../utils/t9n"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction, +} from "../../utils/interactive"; + import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { TableCellMessages } from "./assets/table-cell/t9n"; import { CSS } from "./resources"; @@ -27,7 +34,9 @@ import { RowType } from "../table/interfaces"; shadow: true, assetsDirs: ["assets"], }) -export class TableCell implements LocalizedComponent, LoadableComponent, T9nComponent { +export class TableCell + implements InteractiveComponent, LocalizedComponent, LoadableComponent, T9nComponent +{ //-------------------------------------------------------------------------- // // Properties @@ -132,11 +141,17 @@ export class TableCell implements LocalizedComponent, LoadableComponent, T9nComp connectedCallback(): void { connectLocalized(this); connectMessages(this); + connectInteractive(this); + } + + componentDidRender(): void { + updateHostInteraction(this); } disconnectedCallback(): void { disconnectLocalized(this); disconnectMessages(this); + disconnectInteractive(this); } //-------------------------------------------------------------------------- diff --git a/packages/calcite-components/src/components/table-row/table-row.tsx b/packages/calcite-components/src/components/table-row/table-row.tsx index 5e507458c83..a9e4fd8666e 100644 --- a/packages/calcite-components/src/components/table-row/table-row.tsx +++ b/packages/calcite-components/src/components/table-row/table-row.tsx @@ -16,6 +16,12 @@ import { Scale, SelectionMode } from "../interfaces"; import { focusElementInGroup, FocusElementInGroupDestination } from "../../utils/dom"; import { RowType, TableRowFocusEvent } from "../table/interfaces"; import { isActivationKey } from "../../utils/key"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction, +} from "../../utils/interactive"; /** * @slot - A slot for adding `calcite-table-cell` or `calcite-table-header` elements. @@ -26,7 +32,7 @@ import { isActivationKey } from "../../utils/key"; styleUrl: "table-row.scss", shadow: true, }) -export class TableRow implements LocalizedComponent { +export class TableRow implements InteractiveComponent, LocalizedComponent { //-------------------------------------------------------------------------- // // Properties @@ -99,6 +105,18 @@ export class TableRow implements LocalizedComponent { } } + connectedCallback(): void { + connectInteractive(this); + } + + componentDidRender(): void { + updateHostInteraction(this); + } + + disconnectedCallback(): void { + disconnectInteractive(this); + } + //-------------------------------------------------------------------------- // // Private Properties From a3697c5921d68f14613d78f72b43253fafe02479 Mon Sep 17 00:00:00 2001 From: Adam Date: Wed, 30 Aug 2023 22:13:39 -0700 Subject: [PATCH 32/44] Pr feedback --- .../src/components/table/table.e2e.ts | 97 +++++++------------ 1 file changed, 37 insertions(+), 60 deletions(-) diff --git a/packages/calcite-components/src/components/table/table.e2e.ts b/packages/calcite-components/src/components/table/table.e2e.ts index eaae9793586..b7d776e1ea7 100644 --- a/packages/calcite-components/src/components/table/table.e2e.ts +++ b/packages/calcite-components/src/components/table/table.e2e.ts @@ -568,6 +568,10 @@ describe("selection modes", () => { const row2 = await page.find("#row-2"); const row3 = await page.find("#row-3"); + const selectionCell1 = await page.find("#row-1 >>> calcite-table-cell:first-child"); + const selectionCell2 = await page.find("#row-2 >>> calcite-table-cell:first-child"); + const selectionCell3 = await page.find("#row-3 >>> calcite-table-cell:first-child"); + const tableSelectSpy = await element.spyOnEvent("calciteTableSelect"); const rowSelectSpy1 = await row1.spyOnEvent("calciteTableRowSelect"); const rowSelectSpy2 = await row2.spyOnEvent("calciteTableRowSelect"); @@ -581,15 +585,12 @@ describe("selection modes", () => { expect(await element.getProperty("selectedItems")).toHaveLength(1); await assertSelectedItems(page, { expectedItemIds: [row3.id] }); - - await page.$eval("calcite-table", () => { - const row = document.getElementById("row-1"); - const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child") as HTMLCalciteTableCellElement; - cell.setFocus(); - }); + await selectionCell1.callMethod("setFocus"); + await page.waitForChanges(); await page.keyboard.press("Space"); await page.waitForChanges(); + expect(await tableSelectSpy).toHaveReceivedEventTimes(1); expect(await rowSelectSpy1).toHaveReceivedEventTimes(1); expect(await rowSelectSpy2).toHaveReceivedEventTimes(0); @@ -600,12 +601,7 @@ describe("selection modes", () => { expect(await element.getProperty("selectedItems")).toHaveLength(1); await assertSelectedItems(page, { expectedItemIds: [row1.id] }); - await page.$eval("calcite-table", () => { - const row = document.getElementById("row-2"); - const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child") as HTMLCalciteTableCellElement; - cell.setFocus(); - }); - + await selectionCell2.callMethod("setFocus"); await page.waitForChanges(); await page.keyboard.press("Enter"); await page.waitForChanges(); @@ -620,15 +616,11 @@ describe("selection modes", () => { expect(await element.getProperty("selectedItems")).toHaveLength(1); await assertSelectedItems(page, { expectedItemIds: [row2.id] }); - await page.$eval("calcite-table", () => { - const row = document.getElementById("row-3"); - const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child") as HTMLCalciteTableCellElement; - cell.setFocus(); - }); - + await selectionCell3.callMethod("setFocus"); await page.waitForChanges(); await page.keyboard.press("Enter"); await page.waitForChanges(); + expect(tableSelectSpy).toHaveReceivedEventTimes(3); expect(rowSelectSpy1).toHaveReceivedEventTimes(1); expect(rowSelectSpy2).toHaveReceivedEventTimes(1); @@ -639,11 +631,7 @@ describe("selection modes", () => { expect(await element.getProperty("selectedItems")).toHaveLength(1); await assertSelectedItems(page, { expectedItemIds: [row3.id] }); - await page.$eval("calcite-table", () => { - const row = document.getElementById("row-3"); - const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child") as HTMLCalciteTableCellElement; - cell.setFocus(); - }); + await selectionCell3.callMethod("setFocus"); await page.waitForChanges(); await page.keyboard.press("Space"); @@ -689,6 +677,9 @@ describe("selection modes", () => { const row1 = await page.find("#row-1"); const row2 = await page.find("#row-2"); const row3 = await page.find("#row-3"); + const selectionCell1 = await page.find("#row-1 >>> calcite-table-cell:first-child"); + const selectionCell2 = await page.find("#row-2 >>> calcite-table-cell:first-child"); + const selectionCell3 = await page.find("#row-3 >>> calcite-table-cell:first-child"); const tableSelectSpy = await element.spyOnEvent("calciteTableSelect"); const rowSelectSpy1 = await row1.spyOnEvent("calciteTableRowSelect"); @@ -705,11 +696,7 @@ describe("selection modes", () => { expect(await element.getProperty("selectedItems")).toHaveLength(2); await assertSelectedItems(page, { expectedItemIds: [row2.id, row3.id] }); - await page.$eval("calcite-table", () => { - const row = document.getElementById("row-1"); - const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child") as HTMLCalciteTableCellElement; - cell.setFocus(); - }); + await selectionCell1.callMethod("setFocus"); await page.waitForChanges(); await page.keyboard.press("Enter"); @@ -724,11 +711,8 @@ describe("selection modes", () => { expect(await element.getProperty("selectedItems")).toHaveLength(3); await assertSelectedItems(page, { expectedItemIds: [row1.id, row2.id, row3.id] }); - await page.$eval("calcite-table", () => { - const row = document.getElementById("row-2"); - const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child") as HTMLCalciteTableCellElement; - cell.setFocus(); - }); + await selectionCell2.callMethod("setFocus"); + await page.waitForChanges(); await page.keyboard.press("Space"); await page.waitForChanges(); @@ -742,11 +726,8 @@ describe("selection modes", () => { expect(await element.getProperty("selectedItems")).toHaveLength(2); await assertSelectedItems(page, { expectedItemIds: [row1.id, row3.id] }); - await page.$eval("calcite-table", () => { - const row = document.getElementById("row-3"); - const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child") as HTMLCalciteTableCellElement; - cell.setFocus(); - }); + await selectionCell3.callMethod("setFocus"); + await page.waitForChanges(); await page.keyboard.press("Enter"); await page.waitForChanges(); @@ -760,11 +741,7 @@ describe("selection modes", () => { expect(await element.getProperty("selectedItems")).toHaveLength(1); await assertSelectedItems(page, { expectedItemIds: [row1.id] }); - await page.$eval("calcite-table", () => { - const row = document.getElementById("row-1"); - const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child") as HTMLCalciteTableCellElement; - cell.setFocus(); - }); + await selectionCell1.callMethod("setFocus"); await page.waitForChanges(); await page.keyboard.press("Space"); @@ -818,7 +795,7 @@ describe("selection modes", () => { await page.$eval("calcite-table", () => { const table = document.querySelector("calcite-table"); - const button = table?.shadowRoot.querySelector("calcite-button"); + const button = table.shadowRoot.querySelector("calcite-button"); button?.click(); }); @@ -1085,8 +1062,8 @@ describe("selection modes", () => { await page.$eval("calcite-table", () => { const table = document.querySelector("calcite-table"); - const pagination = table?.shadowRoot.querySelector("calcite-pagination"); - const button = pagination?.shadowRoot.querySelector("button.page:nth-of-type(2)") as HTMLButtonElement; + const pagination = table.shadowRoot.querySelector("calcite-pagination"); + const button = pagination.shadowRoot.querySelector("button.page:nth-of-type(2)") as HTMLButtonElement; button?.click(); }); @@ -1134,8 +1111,8 @@ describe("pagination event", () => { await page.$eval("calcite-table", () => { const table = document.querySelector("calcite-table"); - const pagination = table?.shadowRoot.querySelector("calcite-pagination"); - const button = pagination?.shadowRoot.querySelector("button:nth-of-type(2)") as HTMLButtonElement; + const pagination = table.shadowRoot.querySelector("calcite-pagination"); + const button = pagination.shadowRoot.querySelector("button:nth-of-type(2)") as HTMLButtonElement; button?.click(); }); @@ -1144,8 +1121,8 @@ describe("pagination event", () => { await page.$eval("calcite-table", () => { const table = document.querySelector("calcite-table"); - const pagination = table?.shadowRoot.querySelector("calcite-pagination"); - const button = pagination?.shadowRoot.querySelector("button:nth-of-type(3)") as HTMLButtonElement; + const pagination = table.shadowRoot.querySelector("calcite-pagination"); + const button = pagination.shadowRoot.querySelector("button:nth-of-type(3)") as HTMLButtonElement; button?.click(); }); @@ -1154,8 +1131,8 @@ describe("pagination event", () => { await page.$eval("calcite-table", () => { const table = document.querySelector("calcite-table"); - const pagination = table?.shadowRoot.querySelector("calcite-pagination"); - const button = pagination?.shadowRoot.querySelector("button:nth-of-type(4)") as HTMLButtonElement; + const pagination = table.shadowRoot.querySelector("calcite-pagination"); + const button = pagination.shadowRoot.querySelector("button:nth-of-type(4)") as HTMLButtonElement; button?.click(); }); @@ -1381,8 +1358,8 @@ describe("keyboard navigation", () => { const table = document.querySelector("calcite-table"); const headerCell = document.getElementById("head-1a"); - const pagination = table?.shadowRoot.querySelector("calcite-pagination"); - const button = pagination?.shadowRoot.querySelector("button.page:nth-of-type(3)") as HTMLButtonElement; + const pagination = table.shadowRoot.querySelector("calcite-pagination"); + const button = pagination.shadowRoot.querySelector("button.page:nth-of-type(3)") as HTMLButtonElement; button?.click(); (headerCell as HTMLCalciteTableHeaderElement).setFocus(); }); @@ -1429,8 +1406,8 @@ describe("keyboard navigation", () => { const table = document.querySelector("calcite-table"); const headerCell = document.getElementById("head-1a"); - const pagination = table?.shadowRoot.querySelector("calcite-pagination"); - const button = pagination?.shadowRoot.querySelector("button.page:nth-of-type(4)") as HTMLButtonElement; + const pagination = table.shadowRoot.querySelector("calcite-pagination"); + const button = pagination.shadowRoot.querySelector("button.page:nth-of-type(4)") as HTMLButtonElement; button?.click(); (headerCell as HTMLCalciteTableHeaderElement).setFocus(); }); @@ -1804,8 +1781,8 @@ describe("keyboard navigation", () => { const table = document.querySelector("calcite-table"); const headerCell = document.getElementById("head-1a"); - const pagination = table?.shadowRoot.querySelector("calcite-pagination"); - const button = pagination?.shadowRoot.querySelector("button.page:nth-of-type(3)") as HTMLButtonElement; + const pagination = table.shadowRoot.querySelector("calcite-pagination"); + const button = pagination.shadowRoot.querySelector("button.page:nth-of-type(3)") as HTMLButtonElement; button?.click(); (headerCell as HTMLCalciteTableHeaderElement).setFocus(); }); @@ -2337,8 +2314,8 @@ describe("keyboard navigation", () => { const table = document.querySelector("calcite-table"); const headerCell = document.getElementById("head-1a"); - const pagination = table?.shadowRoot.querySelector("calcite-pagination"); - const button = pagination?.shadowRoot.querySelector("button.page:nth-of-type(3)") as HTMLButtonElement; + const pagination = table.shadowRoot.querySelector("calcite-pagination"); + const button = pagination.shadowRoot.querySelector("button.page:nth-of-type(3)") as HTMLButtonElement; button?.click(); (headerCell as HTMLCalciteTableHeaderElement).setFocus(); }); From ed567aafcc02e602db69f3e95e0ada5ad4b9a132 Mon Sep 17 00:00:00 2001 From: Adam Date: Wed, 30 Aug 2023 22:27:06 -0700 Subject: [PATCH 33/44] Pr feedback --- .../src/components/table-row/table-row.tsx | 2 +- .../src/components/table/table.e2e.ts | 367 +++++++++--------- 2 files changed, 188 insertions(+), 181 deletions(-) diff --git a/packages/calcite-components/src/components/table-row/table-row.tsx b/packages/calcite-components/src/components/table-row/table-row.tsx index a9e4fd8666e..d01a519d191 100644 --- a/packages/calcite-components/src/components/table-row/table-row.tsx +++ b/packages/calcite-components/src/components/table-row/table-row.tsx @@ -259,7 +259,7 @@ export class TableRow implements InteractiveComponent, LocalizedComponent { .filter( (el) => el?.matches("calcite-table-cell") || el?.matches("calcite-table-header") ) as any; - + // todo any const renderedCells = Array.from( this.tableRowEl?.querySelectorAll("calcite-table-header, calcite-table-cell") ).filter( diff --git a/packages/calcite-components/src/components/table/table.e2e.ts b/packages/calcite-components/src/components/table/table.e2e.ts index b7d776e1ea7..407f0868e34 100644 --- a/packages/calcite-components/src/components/table/table.e2e.ts +++ b/packages/calcite-components/src/components/table/table.e2e.ts @@ -1,7 +1,7 @@ import { E2EPage, newE2EPage } from "@stencil/core/testing"; import { html } from "../../../support/formatting"; import { accessible, renders, hidden, defaults, reflects } from "../../tests/commonTests"; -import { GlobalTestProps } from "../../tests/utils"; +import { GlobalTestProps, getFocusedElementProp } from "../../tests/utils"; import { CSS } from "../table-header/resources"; import { CSS as CELL_CSS } from "../table-cell/resources"; import { SLOTS } from "../table/resources"; @@ -355,7 +355,8 @@ describe("selection modes", () => { await page.$eval("calcite-table", () => { const row = document.getElementById("row-1"); - const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child") as HTMLCalciteTableCellElement; + const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child"); + cell.click(); }); @@ -372,7 +373,7 @@ describe("selection modes", () => { await page.$eval("calcite-table", () => { const row = document.getElementById("row-2"); - const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child") as HTMLCalciteTableCellElement; + const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child"); cell.click(); }); @@ -389,7 +390,7 @@ describe("selection modes", () => { await page.$eval("calcite-table", () => { const row = document.getElementById("row-3"); - const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child") as HTMLCalciteTableCellElement; + const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child"); cell.click(); }); @@ -406,7 +407,7 @@ describe("selection modes", () => { await page.$eval("calcite-table", () => { const row = document.getElementById("row-3"); - const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child") as HTMLCalciteTableCellElement; + const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child"); cell.click(); }); @@ -470,7 +471,7 @@ describe("selection modes", () => { await page.$eval("calcite-table", () => { const row = document.getElementById("row-1"); - const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child") as HTMLCalciteTableCellElement; + const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child"); cell.click(); }); @@ -487,7 +488,7 @@ describe("selection modes", () => { await page.$eval("calcite-table", () => { const row = document.getElementById("row-2"); - const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child") as HTMLCalciteTableCellElement; + const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child"); cell.click(); }); @@ -504,7 +505,7 @@ describe("selection modes", () => { await page.$eval("calcite-table", () => { const row = document.getElementById("row-3"); - const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child") as HTMLCalciteTableCellElement; + const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child"); cell.click(); }); @@ -521,7 +522,7 @@ describe("selection modes", () => { await page.$eval("calcite-table", () => { const row = document.getElementById("row-1"); - const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child") as HTMLCalciteTableCellElement; + const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child"); cell.click(); }); @@ -846,7 +847,7 @@ describe("selection modes", () => { await page.$eval("calcite-table", () => { const row = document.getElementById("row-head"); - const cell = row.shadowRoot.querySelector("calcite-table-header:first-child") as HTMLCalciteTableHeaderElement; + const cell = row.shadowRoot.querySelector("calcite-table-header:first-child"); cell.click(); }); @@ -897,7 +898,7 @@ describe("selection modes", () => { await page.$eval("calcite-table", () => { const row = document.getElementById("row-head"); - const cell = row.shadowRoot.querySelector("calcite-table-header:first-child") as HTMLCalciteTableHeaderElement; + const cell = row.shadowRoot.querySelector("calcite-table-header:first-child"); cell.click(); }); @@ -951,7 +952,7 @@ describe("selection modes", () => { await page.$eval("calcite-table", () => { const row = document.getElementById("row-head"); - const cell = row.shadowRoot.querySelector("calcite-table-header:first-child") as HTMLCalciteTableHeaderElement; + const cell = row.shadowRoot.querySelector("calcite-table-header:first-child"); cell.click(); }); @@ -1005,7 +1006,7 @@ describe("selection modes", () => { await page.$eval("calcite-table", () => { const row = document.getElementById("row-head"); - const cell = row.shadowRoot.querySelector("calcite-table-header:first-child") as HTMLCalciteTableHeaderElement; + const cell = row.shadowRoot.querySelector("calcite-table-header:first-child"); cell.click(); }); @@ -1063,7 +1064,8 @@ describe("selection modes", () => { await page.$eval("calcite-table", () => { const table = document.querySelector("calcite-table"); const pagination = table.shadowRoot.querySelector("calcite-pagination"); - const button = pagination.shadowRoot.querySelector("button.page:nth-of-type(2)") as HTMLButtonElement; + const button = pagination.shadowRoot.querySelector("button.page:nth-of-type(2)"); + button?.click(); }); @@ -1112,7 +1114,8 @@ describe("pagination event", () => { await page.$eval("calcite-table", () => { const table = document.querySelector("calcite-table"); const pagination = table.shadowRoot.querySelector("calcite-pagination"); - const button = pagination.shadowRoot.querySelector("button:nth-of-type(2)") as HTMLButtonElement; + const button = pagination.shadowRoot.querySelector("button.page:nth-of-type(2)"); + button?.click(); }); @@ -1122,7 +1125,8 @@ describe("pagination event", () => { await page.$eval("calcite-table", () => { const table = document.querySelector("calcite-table"); const pagination = table.shadowRoot.querySelector("calcite-pagination"); - const button = pagination.shadowRoot.querySelector("button:nth-of-type(3)") as HTMLButtonElement; + const button = pagination.shadowRoot.querySelector("button.page:nth-of-type(3)"); + button?.click(); }); @@ -1132,7 +1136,8 @@ describe("pagination event", () => { await page.$eval("calcite-table", () => { const table = document.querySelector("calcite-table"); const pagination = table.shadowRoot.querySelector("calcite-pagination"); - const button = pagination.shadowRoot.querySelector("button:nth-of-type(4)") as HTMLButtonElement; + const button = pagination.shadowRoot.querySelector("button.page:nth-of-type(4)"); + button?.click(); }); @@ -1167,50 +1172,50 @@ describe("keyboard navigation", () => { await page.keyboard.press("Tab"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1a"); await page.keyboard.press("ArrowRight"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1b"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1b"); await page.keyboard.press("PageDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-3b"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-3b"); await page.keyboard.press("Home"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-3a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-3a"); await page.keyboard.press("PageUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1a"); await page.keyboard.press("PageUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1a"); await page.keyboard.press("ArrowDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-1a"); await page.keyboard.press("ArrowDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-2a"); await page.keyboard.press("End"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2b"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-2b"); await page.keyboard.press("Home"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-2a"); page.keyboard.press("ControlLeft"); await page.keyboard.press("End"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-3b"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-3b"); page.keyboard.press("ControlLeft"); await page.keyboard.press("Home"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1a"); page.keyboard.press("ControlRight"); await page.keyboard.press("End"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-3b"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-3b"); page.keyboard.press("ControlRight"); await page.keyboard.press("Home"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1a"); }); it("navigates correctly when pagination present and first page displayed", async () => { @@ -1246,42 +1251,42 @@ describe("keyboard navigation", () => { await page.keyboard.press("Tab"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1a"); await page.keyboard.press("ArrowRight"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1b"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1b"); await page.keyboard.press("PageDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2b"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-2b"); await page.keyboard.press("Home"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-2a"); await page.keyboard.press("PageUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1a"); await page.keyboard.press("PageUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1a"); await page.keyboard.press("ArrowDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-1a"); await page.keyboard.press("ArrowDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-2a"); await page.keyboard.press("ArrowDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-2a"); await page.keyboard.press("End"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2b"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-2b"); page.keyboard.press("ControlLeft"); await page.keyboard.press("End"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2b"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-2b"); page.keyboard.press("ControlLeft"); await page.keyboard.press("Home"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1a"); }); it("navigates correctly when pagination present, and navigation to two other pages occurs", async () => { @@ -1317,138 +1322,139 @@ describe("keyboard navigation", () => { await page.keyboard.press("Tab"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1a"); await page.keyboard.press("ArrowRight"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1b"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1b"); await page.keyboard.press("PageDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2b"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-2b"); await page.keyboard.press("Home"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-2a"); await page.keyboard.press("PageUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1a"); await page.keyboard.press("PageUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1a"); await page.keyboard.press("ArrowDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-1a"); await page.keyboard.press("ArrowDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-2a"); await page.keyboard.press("ArrowDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-2a"); await page.keyboard.press("End"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2b"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-2b"); page.keyboard.press("ControlLeft"); await page.keyboard.press("End"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2b"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-2b"); page.keyboard.press("ControlLeft"); await page.keyboard.press("Home"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1a"); await page.$eval("calcite-table", () => { const table = document.querySelector("calcite-table"); const headerCell = document.getElementById("head-1a"); const pagination = table.shadowRoot.querySelector("calcite-pagination"); - const button = pagination.shadowRoot.querySelector("button.page:nth-of-type(3)") as HTMLButtonElement; + const button = pagination.shadowRoot.querySelector("button.page:nth-of-type(3)"); button?.click(); (headerCell as HTMLCalciteTableHeaderElement).setFocus(); }); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1a"); await page.keyboard.press("ArrowRight"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1b"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1b"); await page.keyboard.press("PageDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-4b"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-4b"); await page.keyboard.press("Home"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-4a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-4a"); await page.keyboard.press("PageUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1a"); await page.keyboard.press("PageUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1a"); await page.keyboard.press("ArrowDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-3a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-3a"); await page.keyboard.press("ArrowDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-4a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-4a"); await page.keyboard.press("ArrowDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-4a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-4a"); await page.keyboard.press("End"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-4b"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-4b"); page.keyboard.press("ControlRight"); await page.keyboard.press("Home"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1a"); page.keyboard.press("ControlRight"); await page.keyboard.press("End"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-4b"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-4b"); await page.$eval("calcite-table", () => { const table = document.querySelector("calcite-table"); const headerCell = document.getElementById("head-1a"); const pagination = table.shadowRoot.querySelector("calcite-pagination"); - const button = pagination.shadowRoot.querySelector("button.page:nth-of-type(4)") as HTMLButtonElement; + const button = pagination.shadowRoot.querySelector("button.page:nth-of-type(4)"); + button?.click(); (headerCell as HTMLCalciteTableHeaderElement).setFocus(); }); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1a"); await page.keyboard.press("ArrowRight"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1b"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1b"); await page.keyboard.press("PageDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-5b"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-5b"); await page.keyboard.press("Home"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-5a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-5a"); await page.keyboard.press("PageUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1a"); await page.keyboard.press("PageUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1a"); await page.keyboard.press("ArrowDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-5a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-5a"); await page.keyboard.press("ArrowDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-5a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-5a"); await page.keyboard.press("ArrowDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-5a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-5a"); await page.keyboard.press("End"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-5b"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-5b"); page.keyboard.press("ControlRight"); await page.keyboard.press("Home"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1a"); page.keyboard.press("ControlRight"); await page.keyboard.press("End"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-5b"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-5b"); }); it("navigates correctly skipping disabled rows", async () => { @@ -1480,28 +1486,28 @@ describe("keyboard navigation", () => { await page.keyboard.press("Tab"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1a"); await page.keyboard.press("ArrowRight"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1b"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1b"); await page.keyboard.press("PageDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-4b"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-4b"); await page.keyboard.press("Home"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-4a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-4a"); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-1a"); await page.keyboard.press("End"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-1b"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-1b"); await page.keyboard.press("ArrowDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-4b"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-4b"); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-1b"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-1b"); }); it("navigates correctly skipping disabled rows when disabled rows in last body position", async () => { @@ -1533,35 +1539,35 @@ describe("keyboard navigation", () => { await page.keyboard.press("Tab"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1a"); await page.keyboard.press("ArrowRight"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1b"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1b"); await page.keyboard.press("PageDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-3b"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-3b"); await page.keyboard.press("Home"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-3a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-3a"); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-1a"); await page.keyboard.press("End"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-1b"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-1b"); await page.keyboard.press("ArrowDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-3b"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-3b"); await page.keyboard.press("ArrowDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-3b"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-3b"); await page.keyboard.press("PageUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1b"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1b"); page.keyboard.press("ControlRight"); await page.keyboard.press("End"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-3b"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-3b"); }); it("navigates correctly when multiple header and multiple footer rows", async () => { @@ -1610,57 +1616,57 @@ describe("keyboard navigation", () => { await page.keyboard.press("Tab"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1a"); await page.keyboard.press("ArrowRight"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1b"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1b"); await page.keyboard.press("PageDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-2b"); + expect(await getFocusedElementProp(page, "id")).toBe("foot-2b"); await page.keyboard.press("Home"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-2a"); + expect(await getFocusedElementProp(page, "id")).toBe("foot-2a"); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("foot-1a"); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-4a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-4a"); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-3a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-3a"); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-2a"); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-1a"); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-2a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-2a"); await page.keyboard.press("End"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-2d"); + expect(await getFocusedElementProp(page, "id")).toBe("head-2d"); page.keyboard.press("ControlRight"); await page.keyboard.press("End"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-2b"); + expect(await getFocusedElementProp(page, "id")).toBe("foot-2b"); await page.keyboard.press("PageUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1b"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1b"); await page.keyboard.press("ArrowDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-2b"); + expect(await getFocusedElementProp(page, "id")).toBe("head-2b"); await page.keyboard.press("ArrowDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-1b"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-1b"); await page.keyboard.press("ArrowDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2b"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-2b"); page.keyboard.press("ControlRight"); await page.keyboard.press("Home"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1a"); }); it("navigates correctly when multiple header and multiple footer rows, pagination present, and navigation to other page occurs", async () => { @@ -1709,151 +1715,152 @@ describe("keyboard navigation", () => { await page.keyboard.press("Tab"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1a"); await page.keyboard.press("ArrowRight"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1b"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1b"); await page.keyboard.press("PageDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-2b"); + expect(await getFocusedElementProp(page, "id")).toBe("foot-2b"); await page.keyboard.press("Home"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-2a"); + expect(await getFocusedElementProp(page, "id")).toBe("foot-2a"); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("foot-1a"); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-2a"); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-1a"); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-2a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-2a"); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1a"); await page.keyboard.press("ArrowDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-2a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-2a"); await page.keyboard.press("ArrowDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-1a"); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-2a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-2a"); await page.keyboard.press("End"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-2d"); + expect(await getFocusedElementProp(page, "id")).toBe("head-2d"); page.keyboard.press("ControlRight"); await page.keyboard.press("End"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-2b"); + expect(await getFocusedElementProp(page, "id")).toBe("foot-2b"); await page.keyboard.press("Home"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-2a"); + expect(await getFocusedElementProp(page, "id")).toBe("foot-2a"); await page.keyboard.press("ArrowDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-2a"); + expect(await getFocusedElementProp(page, "id")).toBe("foot-2a"); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("foot-1a"); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-2a"); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-1a"); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-2a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-2a"); page.keyboard.press("ControlRight"); await page.keyboard.press("Home"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1a"); page.keyboard.press("ControlRight"); await page.keyboard.press("End"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-2b"); + expect(await getFocusedElementProp(page, "id")).toBe("foot-2b"); await page.$eval("calcite-table", () => { const table = document.querySelector("calcite-table"); const headerCell = document.getElementById("head-1a"); const pagination = table.shadowRoot.querySelector("calcite-pagination"); - const button = pagination.shadowRoot.querySelector("button.page:nth-of-type(3)") as HTMLButtonElement; + const button = pagination.shadowRoot.querySelector("button.page:nth-of-type(3)"); + button?.click(); (headerCell as HTMLCalciteTableHeaderElement).setFocus(); }); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1a"); await page.keyboard.press("ArrowRight"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1b"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1b"); await page.keyboard.press("PageDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-2b"); + expect(await getFocusedElementProp(page, "id")).toBe("foot-2b"); await page.keyboard.press("Home"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-2a"); + expect(await getFocusedElementProp(page, "id")).toBe("foot-2a"); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("foot-1a"); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-4a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-4a"); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-3a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-3a"); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-2a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-2a"); await page.keyboard.press("ArrowDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-3a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-3a"); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-2a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-2a"); await page.keyboard.press("End"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-2d"); + expect(await getFocusedElementProp(page, "id")).toBe("head-2d"); page.keyboard.press("ControlRight"); await page.keyboard.press("End"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-2b"); + expect(await getFocusedElementProp(page, "id")).toBe("foot-2b"); await page.keyboard.press("Home"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-2a"); + expect(await getFocusedElementProp(page, "id")).toBe("foot-2a"); await page.keyboard.press("ArrowDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-2a"); + expect(await getFocusedElementProp(page, "id")).toBe("foot-2a"); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("foot-1a"); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-4a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-4a"); await page.keyboard.press("ArrowDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("foot-1a"); await page.keyboard.press("ArrowDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-2a"); + expect(await getFocusedElementProp(page, "id")).toBe("foot-2a"); await page.keyboard.press("End"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-2b"); + expect(await getFocusedElementProp(page, "id")).toBe("foot-2b"); page.keyboard.press("ControlRight"); await page.keyboard.press("Home"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1a"); await page.keyboard.press("ArrowDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-2a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-2a"); await page.keyboard.press("ArrowDown"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-3a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-3a"); }); it("navigates correctly when selection column present", async () => { @@ -1896,11 +1903,11 @@ describe("keyboard navigation", () => { await page.keyboard.press("ArrowRight"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1a"); await page.keyboard.press("ArrowRight"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1b"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1b"); await page.keyboard.press("Home"); await page.waitForChanges(); @@ -1922,12 +1929,12 @@ describe("keyboard navigation", () => { await page.keyboard.press("ArrowRight"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-3a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-3a"); page.keyboard.press("ControlRight"); await page.keyboard.press("End"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-1b"); + expect(await getFocusedElementProp(page, "id")).toBe("foot-1b"); page.keyboard.press("ControlLeft"); await page.keyboard.press("Home"); @@ -1977,11 +1984,11 @@ describe("keyboard navigation", () => { await page.keyboard.press("ArrowRight"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1a"); await page.keyboard.press("ArrowRight"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1b"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1b"); await page.keyboard.press("Home"); await page.waitForChanges(); @@ -2003,12 +2010,12 @@ describe("keyboard navigation", () => { await page.keyboard.press("ArrowRight"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-3a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-3a"); page.keyboard.press("ControlRight"); await page.keyboard.press("End"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-1b"); + expect(await getFocusedElementProp(page, "id")).toBe("foot-1b"); page.keyboard.press("ControlLeft"); await page.keyboard.press("Home"); @@ -2065,7 +2072,7 @@ describe("keyboard navigation", () => { await page.keyboard.press("ArrowRight"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1a"); await page.keyboard.press("ArrowLeft"); await page.waitForChanges(); @@ -2095,7 +2102,7 @@ describe("keyboard navigation", () => { await page.waitForChanges(); await page.keyboard.press("ArrowRight"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-3a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-3a"); page.keyboard.press("ControlRight"); await page.keyboard.press("Home"); @@ -2156,7 +2163,7 @@ describe("keyboard navigation", () => { await page.keyboard.press("ArrowRight"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1a"); await page.keyboard.press("ArrowLeft"); await page.waitForChanges(); @@ -2178,12 +2185,12 @@ describe("keyboard navigation", () => { await page.keyboard.press("ArrowRight"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("cell-2a"); + expect(await getFocusedElementProp(page, "id")).toBe("cell-2a"); page.keyboard.press("ControlRight"); await page.keyboard.press("End"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-1b"); + expect(await getFocusedElementProp(page, "id")).toBe("foot-1b"); await page.keyboard.press("Home"); await page.waitForChanges(); @@ -2199,7 +2206,7 @@ describe("keyboard navigation", () => { ).toEqual({ "0": CSS.numberCell }); }); - it("navigates correctly when pagination present, and selection and number and navigation to two other pages occurs", async () => { + it("navigates correctly when pagination present, and selection and number and navigation to two other pages occurs", async () => { const page = await newE2EPage(); await page.setContent( html` @@ -2253,7 +2260,7 @@ describe("keyboard navigation", () => { await page.keyboard.press("ArrowRight"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1a"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1a"); await page.keyboard.press("ArrowLeft"); await page.waitForChanges(); @@ -2294,7 +2301,7 @@ describe("keyboard navigation", () => { page.keyboard.press("ControlRight"); await page.keyboard.press("End"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-1b"); + expect(await getFocusedElementProp(page, "id")).toBe("foot-1b"); await page.keyboard.press("Home"); await page.waitForChanges(); @@ -2315,7 +2322,7 @@ describe("keyboard navigation", () => { const headerCell = document.getElementById("head-1a"); const pagination = table.shadowRoot.querySelector("calcite-pagination"); - const button = pagination.shadowRoot.querySelector("button.page:nth-of-type(3)") as HTMLButtonElement; + const button = pagination.shadowRoot.querySelector("button.page:nth-of-type(3)"); button?.click(); (headerCell as HTMLCalciteTableHeaderElement).setFocus(); }); @@ -2324,7 +2331,7 @@ describe("keyboard navigation", () => { await page.keyboard.press("ArrowRight"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("head-1b"); + expect(await getFocusedElementProp(page, "id")).toBe("head-1b"); await page.keyboard.press("Home"); await page.waitForChanges(); @@ -2365,7 +2372,7 @@ describe("keyboard navigation", () => { page.keyboard.press("ControlRight"); await page.keyboard.press("End"); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("foot-1b"); + expect(await getFocusedElementProp(page, "id")).toBe("foot-1b"); await page.keyboard.press("Home"); await page.waitForChanges(); From b6a328d866ddc2275dd4bc3f40f5d32ea9a36475 Mon Sep 17 00:00:00 2001 From: Adam Date: Wed, 30 Aug 2023 22:34:18 -0700 Subject: [PATCH 34/44] Clean up --- packages/calcite-components/src/components/table/table.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/components/table/table.tsx b/packages/calcite-components/src/components/table/table.tsx index 3a21d4b02a3..cebaa86c466 100644 --- a/packages/calcite-components/src/components/table/table.tsx +++ b/packages/calcite-components/src/components/table/table.tsx @@ -38,8 +38,8 @@ import { getUserAgentString } from "../../utils/browser"; /** * @slot - A slot for adding `calcite-table-row` or nested `calcite-table` elements. - * @slot table-header - A slot for adding `calcite-table-row` and nested `calcite-table-header` elements. - * @slot table-footer - A slot for adding `calcite-table-row` and nested `calcite-table-header` elements. + * @slot table-header - A slot for adding `calcite-table-row` containing `calcite-table-header` elements. + * @slot table-footer - A slot for adding `calcite-table-row` containing `calcite-table-cell` or `calcite-table-header` elements. * @slot selection-actions - A slot for adding a `calcite-action-bar` or other components to display when `selectionMode` is not `"none"` and one or more `calcite-table-row` is selected. */ From 69a78ce391de7f49e330b3032a5e07c2d9cc0142 Mon Sep 17 00:00:00 2001 From: Adam Date: Wed, 30 Aug 2023 22:52:49 -0700 Subject: [PATCH 35/44] Clean up --- .../src/components/table-row/table-row.tsx | 30 +++++++++++-------- 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/packages/calcite-components/src/components/table-row/table-row.tsx b/packages/calcite-components/src/components/table-row/table-row.tsx index d01a519d191..7b93f0c6d22 100644 --- a/packages/calcite-components/src/components/table-row/table-row.tsx +++ b/packages/calcite-components/src/components/table-row/table-row.tsx @@ -256,31 +256,37 @@ export class TableRow implements InteractiveComponent, LocalizedComponent { private updateCells = (): void => { const slottedCells = this.tableRowSlotEl ?.assignedElements({ flatten: true }) - .filter( - (el) => el?.matches("calcite-table-cell") || el?.matches("calcite-table-header") - ) as any; - // todo any + ?.filter( + (el: HTMLCalciteTableCellElement | HTMLCalciteTableHeaderElement) => + el.matches("calcite-table-cell") || el.matches("calcite-table-header") + ); + const renderedCells = Array.from( this.tableRowEl?.querySelectorAll("calcite-table-header, calcite-table-cell") - ).filter( + )?.filter( (el: HTMLCalciteTableCellElement | HTMLCalciteTableHeaderElement) => el.numberCell || el.selectionCell ); + const cells = renderedCells ? renderedCells.concat(slottedCells) : slottedCells; if (cells.length > 0) { - cells?.forEach((cell, index) => { + cells?.forEach((cell: HTMLCalciteTableCellElement | HTMLCalciteTableHeaderElement, index) => { cell.positionInRow = index + 1; cell.parentRowType = this.rowType; - cell.parentRowIsSelected = this.selected; - cell.parentRowType = this.rowType; - cell.disabled = this.disabled; cell.scale = this.scale; - cell.readCellContentsToAT = this.readCellContentsToAT; + + if (cell.nodeName === "calcite-table-cell") { + (cell as HTMLCalciteTableCellElement).readCellContentsToAT = this.readCellContentsToAT; + (cell as HTMLCalciteTableCellElement).disabled = this.disabled; + (cell as HTMLCalciteTableCellElement).parentRowIsSelected = this.selected; + } }); } - this.rowCells = cells || []; - this.cellCount = cells.length; + + this.rowCells = + (cells as (HTMLCalciteTableCellElement | HTMLCalciteTableHeaderElement)[]) || []; + this.cellCount = cells?.length; }; private handleSelectionOfRow = (): void => { From 90c8b65ca218b45b85ccbc0f6000d17b88860f84 Mon Sep 17 00:00:00 2001 From: Adam Date: Wed, 30 Aug 2023 23:26:09 -0700 Subject: [PATCH 36/44] Clean up --- .../calcite-components/src/components/table-row/table-row.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/table-row/table-row.tsx b/packages/calcite-components/src/components/table-row/table-row.tsx index 7b93f0c6d22..cedd8f792c1 100644 --- a/packages/calcite-components/src/components/table-row/table-row.tsx +++ b/packages/calcite-components/src/components/table-row/table-row.tsx @@ -276,7 +276,7 @@ export class TableRow implements InteractiveComponent, LocalizedComponent { cell.parentRowType = this.rowType; cell.scale = this.scale; - if (cell.nodeName === "calcite-table-cell") { + if (cell.nodeName === "CALCITE-TABLE-CELL") { (cell as HTMLCalciteTableCellElement).readCellContentsToAT = this.readCellContentsToAT; (cell as HTMLCalciteTableCellElement).disabled = this.disabled; (cell as HTMLCalciteTableCellElement).parentRowIsSelected = this.selected; From 7aa5a306f13f47b6de7abbd18624171152510eff Mon Sep 17 00:00:00 2001 From: Adam Tirella Date: Thu, 31 Aug 2023 09:39:42 -0700 Subject: [PATCH 37/44] Clean up --- .../calcite-components/src/demos/table.html | 1200 +++++++++++++++++ 1 file changed, 1200 insertions(+) diff --git a/packages/calcite-components/src/demos/table.html b/packages/calcite-components/src/demos/table.html index 639e59a2043..dcf13348328 100644 --- a/packages/calcite-components/src/demos/table.html +++ b/packages/calcite-components/src/demos/table.html @@ -232,6 +232,1206 @@ +

A11y testing

+ + + + + + + + + + + slot + + + + + + + + + cell + cell + cell + cell + cell + test 1 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 2 + Happy + + Another thing + + cell + cell + cell + cell + cell + test 3 + Happy + + Another thing + + cell + cell + cell + cell + cell + test 4 + Happy + + Another thing + + cell + cell + cell + cell + cell + test 5 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 7 + Happy + + Another thing + + cell + cell + cell + cell + cell + test 8 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 9 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + test 10 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 11 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 13 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 14 + Happy + + Another thing + + cell + cell + cell + cell + cell + test 15 + Happy + + Another thing + + cell + cell + cell + cell + cell + test 16 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 17 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 18 + Happy + + Another thing + + cell + cell + cell + cell + cell + test 19 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 20 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + test 21 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 22 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 23 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 53 + Happy + + Another thing + + cell + cell + cell + cell + cell + 25 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 120 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 987 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 120 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 987 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 53 + Happy + + Another thing + + cell + cell + cell + cell + cell + 25 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 120 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 987 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 120 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 987 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 120 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 987 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + + +

Interactive

From cb1436035b93c72b7b1716e276babf732610b9c2 Mon Sep 17 00:00:00 2001 From: Adam Tirella Date: Thu, 31 Aug 2023 09:47:55 -0700 Subject: [PATCH 38/44] Clean up --- .../src/components/table-cell/table-cell.tsx | 4 ++-- packages/calcite-components/src/demos/table.html | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/calcite-components/src/components/table-cell/table-cell.tsx b/packages/calcite-components/src/components/table-cell/table-cell.tsx index 101391a8daa..ada29c141c2 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.tsx +++ b/packages/calcite-components/src/components/table-cell/table-cell.tsx @@ -130,8 +130,8 @@ export class TableCell async componentWillLoad(): Promise { setUpLoadableComponent(this); await setUpMessages(this); - this.updateScreenReaderContentsText; - this.updateScreenReaderSelectionText; + this.updateScreenReaderContentsText(); + this.updateScreenReaderSelectionText(); } componentDidLoad(): void { diff --git a/packages/calcite-components/src/demos/table.html b/packages/calcite-components/src/demos/table.html index dcf13348328..e402b84e3ad 100644 --- a/packages/calcite-components/src/demos/table.html +++ b/packages/calcite-components/src/demos/table.html @@ -234,7 +234,7 @@

A11y testing

- + From 275cfe66e2ec2cfefd35caeef9db988c5e170baa Mon Sep 17 00:00:00 2001 From: Adam Tirella Date: Thu, 31 Aug 2023 09:57:16 -0700 Subject: [PATCH 39/44] Clean up --- .../src/components/table-cell/table-cell.tsx | 4 ++-- .../components/table-header/table-header.tsx | 17 +++++++++++------ .../src/components/table-row/table-row.tsx | 2 +- 3 files changed, 14 insertions(+), 9 deletions(-) diff --git a/packages/calcite-components/src/components/table-cell/table-cell.tsx b/packages/calcite-components/src/components/table-cell/table-cell.tsx index ada29c141c2..2a85b7e3e50 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.tsx +++ b/packages/calcite-components/src/components/table-cell/table-cell.tsx @@ -110,10 +110,10 @@ export class TableCell @State() defaultMessages: TableCellMessages; - @State() effectiveLocale = ""; - @State() selectionText = ""; + @State() effectiveLocale = ""; + @Watch("effectiveLocale") effectiveLocaleChange(): void { updateMessages(this, this.effectiveLocale); diff --git a/packages/calcite-components/src/components/table-header/table-header.tsx b/packages/calcite-components/src/components/table-header/table-header.tsx index 3e2f28d4a39..f06593671d1 100644 --- a/packages/calcite-components/src/components/table-header/table-header.tsx +++ b/packages/calcite-components/src/components/table-header/table-header.tsx @@ -104,6 +104,7 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo async componentWillLoad(): Promise { setUpLoadableComponent(this); await setUpMessages(this); + this.updateScreenReaderText(); } componentDidLoad(): void { @@ -129,6 +130,8 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo @State() defaultMessages: TableHeaderMessages; + @State() screenReaderText = ""; + @State() effectiveLocale = ""; @Watch("effectiveLocale") @@ -157,17 +160,19 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo // // -------------------------------------------------------------------------- - private getScreenReaderText(): string { + private updateScreenReaderText(): void { + let text = ""; const sharedText = `${this.selectedRowCountLocalized} ${this.messages.selected}`; if (this.numberCell) { - return this.messages.rowNumber; + text = this.messages.rowNumber; } else if (this.selectionMode === "single") { - return `${this.messages.selectionColumn}. ${sharedText}`; + text = `${this.messages.selectionColumn}. ${sharedText}`; } else if (this.bodyRowCount === this.selectedRowCount) { - return `${this.messages.selectionColumn}. ${this.messages.all} ${sharedText} ${this.messages.keyboardDeselectAll}`; + text = `${this.messages.selectionColumn}. ${this.messages.all} ${sharedText} ${this.messages.keyboardDeselectAll}`; } else { - return `${this.messages.selectionColumn}. ${sharedText} ${this.messages.keyboardSelectAll}`; + text = `${this.messages.selectionColumn}. ${sharedText} ${this.messages.keyboardSelectAll}`; } + this.screenReaderText = text; } //-------------------------------------------------------------------------- @@ -218,7 +223,7 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo )} {(this.selectionCell || this.numberCell) && ( - {this.getScreenReaderText()} + {this.screenReaderText} )} diff --git a/packages/calcite-components/src/components/table-row/table-row.tsx b/packages/calcite-components/src/components/table-row/table-row.tsx index cedd8f792c1..fb904936593 100644 --- a/packages/calcite-components/src/components/table-row/table-row.tsx +++ b/packages/calcite-components/src/components/table-row/table-row.tsx @@ -89,7 +89,7 @@ export class TableRow implements InteractiveComponent, LocalizedComponent { @Watch("selectionMode") handleCellChanges(): void { if (this.tableRowEl && this.rowCells.length > 0) { - this.updateCells(); + setTimeout(() => this.updateCells(), 120); } } From b40ed597871446085641521bc6b9f569cb4eee02 Mon Sep 17 00:00:00 2001 From: Adam Tirella Date: Thu, 31 Aug 2023 09:59:19 -0700 Subject: [PATCH 40/44] Clean up --- .../src/components/table-row/table-row.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/components/table-row/table-row.tsx b/packages/calcite-components/src/components/table-row/table-row.tsx index fb904936593..677734b6905 100644 --- a/packages/calcite-components/src/components/table-row/table-row.tsx +++ b/packages/calcite-components/src/components/table-row/table-row.tsx @@ -82,12 +82,18 @@ export class TableRow implements InteractiveComponent, LocalizedComponent { @Prop() bodyRowCount: number; @Watch("bodyRowCount") - @Watch("numbered") @Watch("scale") @Watch("selected") @Watch("selectedRowCount") - @Watch("selectionMode") handleCellChanges(): void { + if (this.tableRowEl && this.rowCells.length > 0) { + this.updateCells(); + } + } + + @Watch("numbered") + @Watch("selectionMode") + handleDelayedCellChanges(): void { if (this.tableRowEl && this.rowCells.length > 0) { setTimeout(() => this.updateCells(), 120); } From e956c192e3bf3a0aa9849e3908d66b66ef044f04 Mon Sep 17 00:00:00 2001 From: Adam Tirella Date: Thu, 31 Aug 2023 10:05:24 -0700 Subject: [PATCH 41/44] Clean up --- .../calcite-components/src/components/table-row/table-row.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/table-row/table-row.tsx b/packages/calcite-components/src/components/table-row/table-row.tsx index 677734b6905..79be55a2f7b 100644 --- a/packages/calcite-components/src/components/table-row/table-row.tsx +++ b/packages/calcite-components/src/components/table-row/table-row.tsx @@ -95,7 +95,7 @@ export class TableRow implements InteractiveComponent, LocalizedComponent { @Watch("selectionMode") handleDelayedCellChanges(): void { if (this.tableRowEl && this.rowCells.length > 0) { - setTimeout(() => this.updateCells(), 120); + requestAnimationFrame(() => this.updateCells()); } } From dd5d1f9a5700903085559fbb1a34b09b04ff4a33 Mon Sep 17 00:00:00 2001 From: Adam Tirella Date: Thu, 31 Aug 2023 10:27:09 -0700 Subject: [PATCH 42/44] Clean up --- .../src/components/table-header/table-header.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/calcite-components/src/components/table-header/table-header.tsx b/packages/calcite-components/src/components/table-header/table-header.tsx index f06593671d1..f33fb509e4f 100644 --- a/packages/calcite-components/src/components/table-header/table-header.tsx +++ b/packages/calcite-components/src/components/table-header/table-header.tsx @@ -67,6 +67,12 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo /** @internal */ @Prop() selectedRowCountLocalized: string; + @Watch("selectedRowCount") + @Watch("selectedRowCountLocalized") + onSelectedChange(): void { + this.updateScreenReaderText(); + } + /** @internal */ @Prop() selectionCell = false; From a67ec8462ba2351528d2cf5f0b3b18be010fa3ba Mon Sep 17 00:00:00 2001 From: Adam Tirella Date: Thu, 31 Aug 2023 11:09:36 -0700 Subject: [PATCH 43/44] Clean up --- .../table-cell/assets/table-cell/t9n/messages.json | 1 - .../table-cell/assets/table-cell/t9n/messages_ar.json | 1 - .../table-cell/assets/table-cell/t9n/messages_bg.json | 1 - .../table-cell/assets/table-cell/t9n/messages_bs.json | 1 - .../table-cell/assets/table-cell/t9n/messages_ca.json | 1 - .../table-cell/assets/table-cell/t9n/messages_cs.json | 1 - .../table-cell/assets/table-cell/t9n/messages_da.json | 1 - .../table-cell/assets/table-cell/t9n/messages_de.json | 1 - .../table-cell/assets/table-cell/t9n/messages_el.json | 1 - .../table-cell/assets/table-cell/t9n/messages_en.json | 1 - .../table-cell/assets/table-cell/t9n/messages_es.json | 1 - .../table-cell/assets/table-cell/t9n/messages_et.json | 1 - .../table-cell/assets/table-cell/t9n/messages_fi.json | 1 - .../table-cell/assets/table-cell/t9n/messages_fr.json | 1 - .../table-cell/assets/table-cell/t9n/messages_he.json | 1 - .../table-cell/assets/table-cell/t9n/messages_hr.json | 1 - .../table-cell/assets/table-cell/t9n/messages_hu.json | 1 - .../table-cell/assets/table-cell/t9n/messages_id.json | 1 - .../table-cell/assets/table-cell/t9n/messages_it.json | 1 - .../table-cell/assets/table-cell/t9n/messages_ja.json | 1 - .../table-cell/assets/table-cell/t9n/messages_ko.json | 1 - .../table-cell/assets/table-cell/t9n/messages_lt.json | 1 - .../table-cell/assets/table-cell/t9n/messages_lv.json | 1 - .../table-cell/assets/table-cell/t9n/messages_nl.json | 1 - .../table-cell/assets/table-cell/t9n/messages_no.json | 1 - .../table-cell/assets/table-cell/t9n/messages_pl.json | 1 - .../assets/table-cell/t9n/messages_pt-BR.json | 1 - .../assets/table-cell/t9n/messages_pt-PT.json | 1 - .../table-cell/assets/table-cell/t9n/messages_ro.json | 1 - .../table-cell/assets/table-cell/t9n/messages_ru.json | 1 - .../table-cell/assets/table-cell/t9n/messages_sk.json | 1 - .../table-cell/assets/table-cell/t9n/messages_sl.json | 1 - .../table-cell/assets/table-cell/t9n/messages_sr.json | 1 - .../table-cell/assets/table-cell/t9n/messages_sv.json | 1 - .../table-cell/assets/table-cell/t9n/messages_th.json | 1 - .../table-cell/assets/table-cell/t9n/messages_tr.json | 1 - .../table-cell/assets/table-cell/t9n/messages_uk.json | 1 - .../table-cell/assets/table-cell/t9n/messages_vi.json | 1 - .../assets/table-cell/t9n/messages_zh-CN.json | 1 - .../assets/table-cell/t9n/messages_zh-HK.json | 1 - .../assets/table-cell/t9n/messages_zh-TW.json | 1 - .../src/components/table-cell/table-cell.tsx | 9 +++++++-- .../assets/table-header/t9n/messages.json | 2 +- .../assets/table-header/t9n/messages_ar.json | 2 +- .../assets/table-header/t9n/messages_bg.json | 2 +- .../assets/table-header/t9n/messages_bs.json | 2 +- .../assets/table-header/t9n/messages_ca.json | 2 +- .../assets/table-header/t9n/messages_cs.json | 2 +- .../assets/table-header/t9n/messages_da.json | 2 +- .../assets/table-header/t9n/messages_de.json | 2 +- .../assets/table-header/t9n/messages_el.json | 2 +- .../assets/table-header/t9n/messages_en.json | 2 +- .../assets/table-header/t9n/messages_es.json | 2 +- .../assets/table-header/t9n/messages_et.json | 2 +- .../assets/table-header/t9n/messages_fi.json | 2 +- .../assets/table-header/t9n/messages_fr.json | 2 +- .../assets/table-header/t9n/messages_he.json | 2 +- .../assets/table-header/t9n/messages_hr.json | 2 +- .../assets/table-header/t9n/messages_hu.json | 2 +- .../assets/table-header/t9n/messages_id.json | 2 +- .../assets/table-header/t9n/messages_it.json | 2 +- .../assets/table-header/t9n/messages_ja.json | 2 +- .../assets/table-header/t9n/messages_ko.json | 2 +- .../assets/table-header/t9n/messages_lt.json | 2 +- .../assets/table-header/t9n/messages_lv.json | 2 +- .../assets/table-header/t9n/messages_nl.json | 2 +- .../assets/table-header/t9n/messages_no.json | 2 +- .../assets/table-header/t9n/messages_pl.json | 2 +- .../assets/table-header/t9n/messages_pt-BR.json | 2 +- .../assets/table-header/t9n/messages_pt-PT.json | 2 +- .../assets/table-header/t9n/messages_ro.json | 2 +- .../assets/table-header/t9n/messages_ru.json | 2 +- .../assets/table-header/t9n/messages_sk.json | 2 +- .../assets/table-header/t9n/messages_sl.json | 2 +- .../assets/table-header/t9n/messages_sr.json | 2 +- .../assets/table-header/t9n/messages_sv.json | 2 +- .../assets/table-header/t9n/messages_th.json | 2 +- .../assets/table-header/t9n/messages_tr.json | 2 +- .../assets/table-header/t9n/messages_uk.json | 2 +- .../assets/table-header/t9n/messages_vi.json | 2 +- .../assets/table-header/t9n/messages_zh-CN.json | 2 +- .../assets/table-header/t9n/messages_zh-HK.json | 2 +- .../assets/table-header/t9n/messages_zh-TW.json | 2 +- .../src/components/table-header/table-header.tsx | 11 +++++------ 84 files changed, 53 insertions(+), 90 deletions(-) diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ar.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ar.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ar.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ar.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_bg.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_bg.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_bg.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_bg.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_bs.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_bs.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_bs.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_bs.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ca.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ca.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ca.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ca.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_cs.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_cs.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_cs.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_cs.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_da.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_da.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_da.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_da.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_de.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_de.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_de.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_de.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_el.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_el.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_el.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_el.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_en.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_en.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_en.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_en.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_es.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_es.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_es.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_es.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_et.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_et.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_et.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_et.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_fi.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_fi.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_fi.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_fi.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_fr.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_fr.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_fr.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_fr.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_he.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_he.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_he.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_he.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_hr.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_hr.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_hr.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_hr.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_hu.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_hu.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_hu.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_hu.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_id.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_id.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_id.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_id.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_it.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_it.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_it.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_it.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ja.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ja.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ja.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ja.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ko.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ko.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ko.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ko.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_lt.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_lt.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_lt.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_lt.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_lv.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_lv.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_lv.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_lv.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_nl.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_nl.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_nl.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_nl.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_no.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_no.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_no.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_no.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pl.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pl.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pl.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pl.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pt-BR.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pt-BR.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pt-BR.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pt-BR.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pt-PT.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pt-PT.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pt-PT.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_pt-PT.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ro.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ro.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ro.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ro.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ru.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ru.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ru.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_ru.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sk.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sk.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sk.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sk.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sl.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sl.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sl.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sl.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sr.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sr.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sr.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sr.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sv.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sv.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sv.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_sv.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_th.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_th.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_th.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_th.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_tr.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_tr.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_tr.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_tr.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_uk.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_uk.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_uk.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_uk.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_vi.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_vi.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_vi.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_vi.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-CN.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-CN.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-CN.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-CN.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-HK.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-HK.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-HK.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-HK.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-TW.json b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-TW.json index 45923e6df8b..d8845d0a69a 100644 --- a/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-TW.json +++ b/packages/calcite-components/src/components/table-cell/assets/table-cell/t9n/messages_zh-TW.json @@ -3,6 +3,5 @@ "keyboardSelect": "Press Enter or Space to select row", "row": "row", "selected": "selected", - "selectionColumn": "Selection column", "unselected": "unselected" } diff --git a/packages/calcite-components/src/components/table-cell/table-cell.tsx b/packages/calcite-components/src/components/table-cell/table-cell.tsx index 2a85b7e3e50..09056e9e993 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.tsx +++ b/packages/calcite-components/src/components/table-cell/table-cell.tsx @@ -61,6 +61,11 @@ export class TableCell /** @internal */ @Prop() parentRowIsSelected: boolean; + @Watch("parentRowIsSelected") + onSelectedChange(): void { + this.updateScreenReaderSelectionText(); + } + /** @internal */ @Prop() parentRowPositionLocalized: string; @@ -174,8 +179,8 @@ export class TableCell // -------------------------------------------------------------------------- private updateScreenReaderSelectionText(): void { - const selectedText = `${this.messages.row} ${this.parentRowPositionLocalized} ${this.messages.selected} ${this.messages.keyboardDeselect}`; - const unselectedText = `${this.messages.row} ${this.parentRowPositionLocalized} ${this.messages.unselected} ${this.messages.keyboardSelect}`; + const selectedText = `${this.messages?.row} ${this.parentRowPositionLocalized} ${this.messages?.selected} ${this.messages?.keyboardDeselect}`; + const unselectedText = `${this.messages?.row} ${this.parentRowPositionLocalized} ${this.messages?.unselected} ${this.messages?.keyboardSelect}`; this.selectionText = this.parentRowIsSelected ? selectedText : unselectedText; } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ar.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ar.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ar.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ar.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_bg.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_bg.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_bg.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_bg.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_bs.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_bs.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_bs.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_bs.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ca.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ca.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ca.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ca.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_cs.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_cs.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_cs.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_cs.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_da.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_da.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_da.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_da.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_de.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_de.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_de.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_de.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_el.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_el.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_el.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_el.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_en.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_en.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_en.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_en.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_es.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_es.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_es.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_es.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_et.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_et.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_et.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_et.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_fi.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_fi.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_fi.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_fi.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_fr.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_fr.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_fr.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_fr.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_he.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_he.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_he.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_he.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_hr.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_hr.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_hr.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_hr.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_hu.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_hu.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_hu.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_hu.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_id.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_id.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_id.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_id.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_it.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_it.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_it.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_it.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ja.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ja.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ja.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ja.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ko.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ko.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ko.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ko.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_lt.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_lt.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_lt.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_lt.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_lv.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_lv.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_lv.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_lv.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_nl.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_nl.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_nl.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_nl.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_no.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_no.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_no.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_no.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pl.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pl.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pl.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pl.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pt-BR.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pt-BR.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pt-BR.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pt-BR.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pt-PT.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pt-PT.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pt-PT.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_pt-PT.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ro.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ro.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ro.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ro.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ru.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ru.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ru.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_ru.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sk.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sk.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sk.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sk.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sl.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sl.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sl.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sl.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sr.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sr.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sr.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sr.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sv.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sv.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sv.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_sv.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_th.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_th.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_th.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_th.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_tr.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_tr.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_tr.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_tr.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_uk.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_uk.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_uk.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_uk.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_vi.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_vi.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_vi.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_vi.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-CN.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-CN.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-CN.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-CN.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-HK.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-HK.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-HK.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-HK.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-TW.json b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-TW.json index c3e9bff67f9..b73b48a09cf 100644 --- a/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-TW.json +++ b/packages/calcite-components/src/components/table-header/assets/table-header/t9n/messages_zh-TW.json @@ -3,6 +3,6 @@ "keyboardDeselectAll": "Press Enter or Space to deselect all rows", "keyboardSelectAll": "Press Enter or Space to select all rows", "rowNumber": "Row number", - "selected": "selected", + "selected": "rows selected", "selectionColumn": "Selection column" } diff --git a/packages/calcite-components/src/components/table-header/table-header.tsx b/packages/calcite-components/src/components/table-header/table-header.tsx index f33fb509e4f..e376f84d7a4 100644 --- a/packages/calcite-components/src/components/table-header/table-header.tsx +++ b/packages/calcite-components/src/components/table-header/table-header.tsx @@ -67,7 +67,6 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo /** @internal */ @Prop() selectedRowCountLocalized: string; - @Watch("selectedRowCount") @Watch("selectedRowCountLocalized") onSelectedChange(): void { this.updateScreenReaderText(); @@ -168,15 +167,15 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo private updateScreenReaderText(): void { let text = ""; - const sharedText = `${this.selectedRowCountLocalized} ${this.messages.selected}`; + const sharedText = `${this.selectedRowCountLocalized} ${this.messages?.selected}`; if (this.numberCell) { - text = this.messages.rowNumber; + text = this.messages?.rowNumber; } else if (this.selectionMode === "single") { - text = `${this.messages.selectionColumn}. ${sharedText}`; + text = `${this.messages?.selectionColumn}. ${sharedText}`; } else if (this.bodyRowCount === this.selectedRowCount) { - text = `${this.messages.selectionColumn}. ${this.messages.all} ${sharedText} ${this.messages.keyboardDeselectAll}`; + text = `${this.messages?.selectionColumn}. ${this.messages?.all} ${sharedText} ${this.messages?.keyboardDeselectAll}`; } else { - text = `${this.messages.selectionColumn}. ${sharedText} ${this.messages.keyboardSelectAll}`; + text = `${this.messages?.selectionColumn}. ${sharedText} ${this.messages?.keyboardSelectAll}`; } this.screenReaderText = text; } From 1cd2fcf4bedafd59d31297439bfc8bcb27c52a38 Mon Sep 17 00:00:00 2001 From: Adam Tirella Date: Thu, 31 Aug 2023 11:21:39 -0700 Subject: [PATCH 44/44] Clean up --- .../src/components/table-cell/table-cell.tsx | 14 +++++++++++++- .../src/components/table-header/table-header.tsx | 1 + 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/table-cell/table-cell.tsx b/packages/calcite-components/src/components/table-cell/table-cell.tsx index 09056e9e993..15d34f01ca7 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.tsx +++ b/packages/calcite-components/src/components/table-cell/table-cell.tsx @@ -115,6 +115,8 @@ export class TableCell @State() defaultMessages: TableCellMessages; + @State() focused = false; + @State() selectionText = ""; @State() effectiveLocale = ""; @@ -188,6 +190,14 @@ export class TableCell this.contentsText = this.el.textContent; }; + private onContainerBlur = (): void => { + this.focused = false; + }; + + private onContainerFocus = (): void => { + this.focused = true; + }; + //-------------------------------------------------------------------------- // // Render Methods @@ -206,13 +216,15 @@ export class TableCell [CSS.selectedCell]: this.parentRowIsSelected, }} colSpan={this.colSpan} + onBlur={this.onContainerBlur} + onFocus={this.onContainerFocus} role="gridcell" rowSpan={this.rowSpan} tabIndex={this.disabled ? -1 : 0} // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530) ref={(el) => (this.containerEl = el)} > - {(this.selectionCell || this.readCellContentsToAT) && ( + {(this.selectionCell || this.readCellContentsToAT) && this.focused && ( {this.selectionCell && this.selectionText} {this.readCellContentsToAT && !this.selectionCell && this.contentsText} diff --git a/packages/calcite-components/src/components/table-header/table-header.tsx b/packages/calcite-components/src/components/table-header/table-header.tsx index e376f84d7a4..f28eede7402 100644 --- a/packages/calcite-components/src/components/table-header/table-header.tsx +++ b/packages/calcite-components/src/components/table-header/table-header.tsx @@ -67,6 +67,7 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo /** @internal */ @Prop() selectedRowCountLocalized: string; + @Watch("selectedRowCount") @Watch("selectedRowCountLocalized") onSelectedChange(): void { this.updateScreenReaderText();