@semcore/data-table 17.0.0-prerelease.37 → 17.0.0-prerelease.42

package/lib/esm/components/RowSelector/SRAnnouncer.mjs

@@ -0,0 +1,44 @@
+import { ScreenReaderOnly } from "@semcore/base-components";
+import React__default from "react";
+import { UNIQ_ROW_KEY } from "../DataTable/DataTable.mjs";
+function SRAnnouncer(props) {
+  const [ariaMessage, setAriaMessage] = React__default.useState("");
+  const [selectedAll, setSelectedAll] = React__default.useState(false);
+  React__default.useEffect(() => {
+    const selectedRowsSet = new Set(props.selectedRows);
+    const allChecked = [];
+    const allUnchecked = [];
+    props.flatRows.forEach((row) => {
+      if (selectedRowsSet.has(row[UNIQ_ROW_KEY])) {
+        allChecked.push(row[UNIQ_ROW_KEY]);
+      } else {
+        allUnchecked.push(row[UNIQ_ROW_KEY]);
+      }
+    });
+    if (allChecked.length === props.data.length) {
+      setSelectedAll(true);
+    } else if (allUnchecked.length === props.data.length) {
+      setSelectedAll(false);
+    }
+  }, [props.selectedRows, props.data, props.flatRows]);
+  React__default.useEffect(() => {
+    const {
+      getI18nText
+    } = props;
+    const message = getI18nText(selectedAll ? "DataTable.allItemsSelected:aria-live" : "DataTable.allItemsDeselected:aria-live");
+    setAriaMessage(message);
+    const timeout = setTimeout(() => setAriaMessage(""), 5e3);
+    return () => clearTimeout(timeout);
+  }, [selectedAll, props.getI18nText]);
+  React__default.useEffect(() => {
+    const timer = setTimeout(() => setAriaMessage(""), 1e3);
+    return () => clearTimeout(timer);
+  }, [ariaMessage]);
+  return /* @__PURE__ */ React__default.createElement(ScreenReaderOnly, {
+    role: "status",
+    "aria-live": "polite"
+  }, ariaMessage);
+}
+export {
+  SRAnnouncer
+};

package/lib/esm/components/RowSelector/SRReactiveAnnouncer.mjs

@@ -0,0 +1,26 @@
+import { ScreenReaderOnly } from "@semcore/base-components";
+import React__default from "react";
+import { SelectableRows } from "../../store/SelectableRows.mjs";
+function SRReactiveAnnouncer(props) {
+  const [ariaMessage, setAriaMessage] = React__default.useState("");
+  const setAriaCallback = React__default.useCallback(() => {
+    const isAllSelected = props.selectedRows.isAllSelected();
+    const message = props.getI18nText(isAllSelected ? "DataTable.allItemsSelected:aria-live" : "DataTable.allItemsDeselected:aria-live");
+    setAriaMessage(message);
+  }, [props.selectedRows]);
+  React__default.useEffect(() => {
+    const unsubscribe = props.selectedRows.on(SelectableRows.SELECT_ALL_EVENT, setAriaCallback);
+    return unsubscribe;
+  }, [props.selectedRows]);
+  React__default.useEffect(() => {
+    const timer = setTimeout(() => setAriaMessage(""), 1e3);
+    return () => clearTimeout(timer);
+  }, [ariaMessage]);
+  return /* @__PURE__ */ React__default.createElement(ScreenReaderOnly, {
+    role: "status",
+    "aria-live": "polite"
+  }, ariaMessage);
+}
+export {
+  SRReactiveAnnouncer
+};

package/lib/esm/store/SelectableRows.mjs

@@ -97,16 +97,16 @@ class SelectableRows extends EventEmitter {
   }
   toggleOneRow(isSelected, key) {
     if (isSelected) {
-      if (this.values.size === 0) {
-        this.emit(SelectableRows.SELECT_ALL_EVENT);
+      if (!this.isIndeterminate()) {
+        this.emit(SelectableRows.SET_INDETERMINATE_EVENT);
       }
       this.values.add(key);
-      if (this.values.size === this.availableKeys.size) {
+      if (this.isAllSelected()) {
         this.emit(SelectableRows.SELECT_ALL_EVENT);
       }
     } else {
-      if (this.values.size === this.availableKeys.size) {
-        this.emit(SelectableRows.SELECT_ALL_EVENT);
+      if (this.isAllSelected()) {
+        this.emit(SelectableRows.SET_INDETERMINATE_EVENT);
       }
       this.values.delete(key);
       if (this.values.size === 0) {
@@ -118,6 +118,7 @@ class SelectableRows extends EventEmitter {
 }
 _defineProperty(SelectableRows, "TOGGLE_EVENT", "toggle_selected_row");
 _defineProperty(SelectableRows, "SELECT_ALL_EVENT", "select_all_selected_rows");
+_defineProperty(SelectableRows, "SET_INDETERMINATE_EVENT", "set_indeterminate");
 export {
   SelectableRows
 };

package/lib/esm/translations/de.json.mjs

@@ -1,6 +1,11 @@
 const sortableColumn = "Sortierbar";
 const de = {
-  sortableColumn
+  sortableColumn,
+  "DataTable.Cell.AccordionToggle.expand:aria-label": "Details einblenden",
+  "DataTable.Cell.AccordionToggle.collapse:aria-label": "Details ausblenden",
+  "DataTable.Header.selectAllCheckbox:aria-label": "Alle Elemente",
+  "DataTable.allItemsSelected:aria-live": "Alle Elemente ausgewählt",
+  "DataTable.allItemsDeselected:aria-live": "Alle Elemente nicht ausgewählt"
 };
 export {
   de as default,

package/lib/esm/translations/es.json.mjs

@@ -1,6 +1,11 @@
 const sortableColumn = "Ordenable";
 const es = {
-  sortableColumn
+  sortableColumn,
+  "DataTable.Cell.AccordionToggle.expand:aria-label": "Mostrar detalles",
+  "DataTable.Cell.AccordionToggle.collapse:aria-label": "Ocultar detalles",
+  "DataTable.Header.selectAllCheckbox:aria-label": "Todos los elementos",
+  "DataTable.allItemsSelected:aria-live": "Todos los elementos seleccionados",
+  "DataTable.allItemsDeselected:aria-live": "Todos los elementos deseleccionados"
 };
 export {
   es as default,

package/lib/esm/translations/fr.json.mjs

@@ -1,6 +1,11 @@
 const sortableColumn = "Triable";
 const fr = {
-  sortableColumn
+  sortableColumn,
+  "DataTable.Cell.AccordionToggle.expand:aria-label": "Afficher les détails",
+  "DataTable.Cell.AccordionToggle.collapse:aria-label": "Masquer les détails",
+  "DataTable.Header.selectAllCheckbox:aria-label": "Tous les éléments",
+  "DataTable.allItemsSelected:aria-live": "Tous les éléments sélectionnés",
+  "DataTable.allItemsDeselected:aria-live": "Tous les éléments désélectionnés"
 };
 export {
   fr as default,

package/lib/esm/translations/it.json.mjs

@@ -1,6 +1,11 @@
 const sortableColumn = "Ordinabile";
 const it = {
-  sortableColumn
+  sortableColumn,
+  "DataTable.Cell.AccordionToggle.expand:aria-label": "Mostra dettagli",
+  "DataTable.Cell.AccordionToggle.collapse:aria-label": "Nascondi dettagli",
+  "DataTable.Header.selectAllCheckbox:aria-label": "Tutti gli elementi",
+  "DataTable.allItemsSelected:aria-live": "Tutti gli elementi selezionati",
+  "DataTable.allItemsDeselected:aria-live": "Tutti gli elementi deselezionati"
 };
 export {
   it as default,

package/lib/esm/translations/ja.json.mjs

@@ -1,6 +1,11 @@
 const sortableColumn = "分類可能";
 const ja = {
-  sortableColumn
+  sortableColumn,
+  "DataTable.Cell.AccordionToggle.expand:aria-label": "詳細を表示する",
+  "DataTable.Cell.AccordionToggle.collapse:aria-label": "詳細を非表示にする",
+  "DataTable.Header.selectAllCheckbox:aria-label": "すべての項目",
+  "DataTable.allItemsSelected:aria-live": "すべての項目が選択されました",
+  "DataTable.allItemsDeselected:aria-live": "すべての項目が選択解除されました"
 };
 export {
   ja as default,

package/lib/esm/translations/ko.json.mjs

@@ -1,6 +1,11 @@
 const sortableColumn = "정렬 가능";
 const ko = {
-  sortableColumn
+  sortableColumn,
+  "DataTable.Cell.AccordionToggle.expand:aria-label": "세부 정보 표시",
+  "DataTable.Cell.AccordionToggle.collapse:aria-label": "세부 정보 숨기기",
+  "DataTable.Header.selectAllCheckbox:aria-label": "모든 항목",
+  "DataTable.allItemsSelected:aria-live": "모든 항목이 선택됨",
+  "DataTable.allItemsDeselected:aria-live": "모든 항목이 선택 해제됨"
 };
 export {
   ko as default,

package/lib/esm/translations/nl.json.mjs

@@ -1,6 +1,11 @@
 const sortableColumn = "Sorteerbaar";
 const nl = {
-  sortableColumn
+  sortableColumn,
+  "DataTable.Cell.AccordionToggle.expand:aria-label": "Details tonen",
+  "DataTable.Cell.AccordionToggle.collapse:aria-label": "Details verbergen",
+  "DataTable.Header.selectAllCheckbox:aria-label": "Alle items",
+  "DataTable.allItemsSelected:aria-live": "Alle items geselecteerd",
+  "DataTable.allItemsDeselected:aria-live": "Alle items niet geselecteerd"
 };
 export {
   nl as default,

package/lib/esm/translations/pl.json.mjs

@@ -1,6 +1,11 @@
 const sortableColumn = "Umożliwia sortowanie";
 const pl = {
-  sortableColumn
+  sortableColumn,
+  "DataTable.Cell.AccordionToggle.expand:aria-label": "Pokaż szczegóły",
+  "DataTable.Cell.AccordionToggle.collapse:aria-label": "Ukryj szczegóły",
+  "DataTable.Header.selectAllCheckbox:aria-label": "Wszystkie przedmioty",
+  "DataTable.allItemsSelected:aria-live": "Wszystkie przedmioty wybrane",
+  "DataTable.allItemsDeselected:aria-live": "Wszystkie przedmioty odznaczone"
 };
 export {
   pl as default,

package/lib/esm/translations/pt.json.mjs

@@ -1,6 +1,11 @@
 const sortableColumn = "Classificável";
 const pt = {
-  sortableColumn
+  sortableColumn,
+  "DataTable.Cell.AccordionToggle.expand:aria-label": "Exibir detalhes",
+  "DataTable.Cell.AccordionToggle.collapse:aria-label": "Ocultar detalhes",
+  "DataTable.Header.selectAllCheckbox:aria-label": "Todos os itens",
+  "DataTable.allItemsSelected:aria-live": "Todos os itens selecionados",
+  "DataTable.allItemsDeselected:aria-live": "Todos os itens desmarcados"
 };
 export {
   pt as default,

package/lib/esm/translations/sv.json.mjs

@@ -1,6 +1,11 @@
 const sortableColumn = "Sorterbar";
 const sv = {
-  sortableColumn
+  sortableColumn,
+  "DataTable.Cell.AccordionToggle.expand:aria-label": "Visa detaljer",
+  "DataTable.Cell.AccordionToggle.collapse:aria-label": "Dölj detaljer",
+  "DataTable.Header.selectAllCheckbox:aria-label": "Alla objekt",
+  "DataTable.allItemsSelected:aria-live": "Alla objekt valda",
+  "DataTable.allItemsDeselected:aria-live": "Alla objekt avmarkerade"
 };
 export {
   sv as default,

package/lib/esm/translations/tr.json.mjs

@@ -1,6 +1,11 @@
 const sortableColumn = "Sıralanabilir";
 const tr = {
-  sortableColumn
+  sortableColumn,
+  "DataTable.Cell.AccordionToggle.expand:aria-label": "Detayları göster",
+  "DataTable.Cell.AccordionToggle.collapse:aria-label": "Detayları gizle",
+  "DataTable.Header.selectAllCheckbox:aria-label": "Tüm öğeler",
+  "DataTable.allItemsSelected:aria-live": "Tüm öğeler seçildi",
+  "DataTable.allItemsDeselected:aria-live": "Tüm öğeler seçilmedi"
 };
 export {
   tr as default,

package/lib/esm/translations/vi.json.mjs

@@ -1,6 +1,11 @@
 const sortableColumn = "Có thể sắp xếp";
 const vi = {
-  sortableColumn
+  sortableColumn,
+  "DataTable.Cell.AccordionToggle.expand:aria-label": "Hiển thị chi tiết",
+  "DataTable.Cell.AccordionToggle.collapse:aria-label": "Ẩn bớt",
+  "DataTable.Header.selectAllCheckbox:aria-label": "Tất cả các mục",
+  "DataTable.allItemsSelected:aria-live": "Tất cả các mục đã được chọn",
+  "DataTable.allItemsDeselected:aria-live": "Tất cả các mục đã được bỏ chọn"
 };
 export {
   vi as default,

package/lib/esm/translations/zh.json.mjs

@@ -1,6 +1,11 @@
 const sortableColumn = "可排序";
 const zh = {
-  sortableColumn
+  sortableColumn,
+  "DataTable.Cell.AccordionToggle.expand:aria-label": "显示详细信息",
+  "DataTable.Cell.AccordionToggle.collapse:aria-label": "隐藏详细信息",
+  "DataTable.Header.selectAllCheckbox:aria-label": "所有项目",
+  "DataTable.allItemsSelected:aria-live": "所有项目已选择",
+  "DataTable.allItemsDeselected:aria-live": "所有项目已取消选择"
 };
 export {
   zh as default,

package/lib/types/components/RowSelector/SRAnnouncer.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { DTRow } from '../Body/Row.types';
+type Props<UniqKey> = {
+    selectedRows: Array<UniqKey>;
+    getI18nText: (key: string) => string;
+    flatRows: DTRow<UniqKey>[];
+    data: unknown[];
+};
+export declare function SRAnnouncer<UniqKey>(props: Props<UniqKey>): React.JSX.Element;
+export {};

package/lib/types/components/RowSelector/SRReactiveAnnouncer.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ISelectedRows } from '../../store/SelectableRows';
+type Props<UniqKey> = {
+    selectedRows: ISelectedRows<UniqKey>;
+    getI18nText: (key: string) => string;
+};
+export declare function SRReactiveAnnouncer<UniqKey>(props: Props<UniqKey>): React.JSX.Element;
+export {};

package/lib/types/store/SelectableRows.d.ts

@@ -26,11 +26,14 @@ export interface ISelectedRows<UniqKeyType> {
     /** Check if at least one row selected */
     isIndeterminate(): boolean;
     /** Subscribe to changes */
-    subscribe: EventEmitter<Events<UniqKeyType>>['subscribe'];
+    on: EventEmitter<Events<UniqKeyType>>['on'];
+    /** Unsubscribe to changes */
+    off: EventEmitter<Events<UniqKeyType>>['off'];
 }
 type Events<UniqRowKeyType> = {
     [SelectableRows.TOGGLE_EVENT]: (val: UniqRowKeyType) => void;
     [SelectableRows.SELECT_ALL_EVENT]: () => void;
+    [SelectableRows.SET_INDETERMINATE_EVENT]: () => void;
 };
 export declare class SelectableRows<UniqRowKeyType> extends EventEmitter<Events<UniqRowKeyType>> implements ISelectedRows<UniqRowKeyType> {
     private readonly values;
@@ -38,6 +41,7 @@ export declare class SelectableRows<UniqRowKeyType> extends EventEmitter<Events<
     private lastSelectedRow;
     static TOGGLE_EVENT: "toggle_selected_row";
     static SELECT_ALL_EVENT: "select_all_selected_rows";
+    static SET_INDETERMINATE_EVENT: "set_indeterminate";
     isPressedShift: boolean;
     constructor(initValues?: UniqRowKeyType[]);
     setAvailableKeys(value: UniqRowKeyType[]): void;

package/lib/types/translations/__intergalactic-dynamic-locales.d.ts

@@ -1,6 +1,11 @@
 export declare const localizedMessages: {
     de: {
         sortableColumn: string;
+        "DataTable.Cell.AccordionToggle.expand:aria-label": string;
+        "DataTable.Cell.AccordionToggle.collapse:aria-label": string;
+        "DataTable.Header.selectAllCheckbox:aria-label": string;
+        "DataTable.allItemsSelected:aria-live": string;
+        "DataTable.allItemsDeselected:aria-live": string;
     };
     en: {
         sortableColumn: string;
@@ -12,38 +17,98 @@ export declare const localizedMessages: {
     };
     es: {
         sortableColumn: string;
+        "DataTable.Cell.AccordionToggle.expand:aria-label": string;
+        "DataTable.Cell.AccordionToggle.collapse:aria-label": string;
+        "DataTable.Header.selectAllCheckbox:aria-label": string;
+        "DataTable.allItemsSelected:aria-live": string;
+        "DataTable.allItemsDeselected:aria-live": string;
     };
     fr: {
         sortableColumn: string;
+        "DataTable.Cell.AccordionToggle.expand:aria-label": string;
+        "DataTable.Cell.AccordionToggle.collapse:aria-label": string;
+        "DataTable.Header.selectAllCheckbox:aria-label": string;
+        "DataTable.allItemsSelected:aria-live": string;
+        "DataTable.allItemsDeselected:aria-live": string;
     };
     it: {
         sortableColumn: string;
+        "DataTable.Cell.AccordionToggle.expand:aria-label": string;
+        "DataTable.Cell.AccordionToggle.collapse:aria-label": string;
+        "DataTable.Header.selectAllCheckbox:aria-label": string;
+        "DataTable.allItemsSelected:aria-live": string;
+        "DataTable.allItemsDeselected:aria-live": string;
     };
     ja: {
         sortableColumn: string;
+        "DataTable.Cell.AccordionToggle.expand:aria-label": string;
+        "DataTable.Cell.AccordionToggle.collapse:aria-label": string;
+        "DataTable.Header.selectAllCheckbox:aria-label": string;
+        "DataTable.allItemsSelected:aria-live": string;
+        "DataTable.allItemsDeselected:aria-live": string;
     };
     ko: {
         sortableColumn: string;
+        "DataTable.Cell.AccordionToggle.expand:aria-label": string;
+        "DataTable.Cell.AccordionToggle.collapse:aria-label": string;
+        "DataTable.Header.selectAllCheckbox:aria-label": string;
+        "DataTable.allItemsSelected:aria-live": string;
+        "DataTable.allItemsDeselected:aria-live": string;
     };
     nl: {
         sortableColumn: string;
+        "DataTable.Cell.AccordionToggle.expand:aria-label": string;
+        "DataTable.Cell.AccordionToggle.collapse:aria-label": string;
+        "DataTable.Header.selectAllCheckbox:aria-label": string;
+        "DataTable.allItemsSelected:aria-live": string;
+        "DataTable.allItemsDeselected:aria-live": string;
     };
     pt: {
         sortableColumn: string;
+        "DataTable.Cell.AccordionToggle.expand:aria-label": string;
+        "DataTable.Cell.AccordionToggle.collapse:aria-label": string;
+        "DataTable.Header.selectAllCheckbox:aria-label": string;
+        "DataTable.allItemsSelected:aria-live": string;
+        "DataTable.allItemsDeselected:aria-live": string;
     };
     tr: {
         sortableColumn: string;
+        "DataTable.Cell.AccordionToggle.expand:aria-label": string;
+        "DataTable.Cell.AccordionToggle.collapse:aria-label": string;
+        "DataTable.Header.selectAllCheckbox:aria-label": string;
+        "DataTable.allItemsSelected:aria-live": string;
+        "DataTable.allItemsDeselected:aria-live": string;
     };
     vi: {
         sortableColumn: string;
+        "DataTable.Cell.AccordionToggle.expand:aria-label": string;
+        "DataTable.Cell.AccordionToggle.collapse:aria-label": string;
+        "DataTable.Header.selectAllCheckbox:aria-label": string;
+        "DataTable.allItemsSelected:aria-live": string;
+        "DataTable.allItemsDeselected:aria-live": string;
     };
     zh: {
         sortableColumn: string;
+        "DataTable.Cell.AccordionToggle.expand:aria-label": string;
+        "DataTable.Cell.AccordionToggle.collapse:aria-label": string;
+        "DataTable.Header.selectAllCheckbox:aria-label": string;
+        "DataTable.allItemsSelected:aria-live": string;
+        "DataTable.allItemsDeselected:aria-live": string;
     };
     pl: {
         sortableColumn: string;
+        "DataTable.Cell.AccordionToggle.expand:aria-label": string;
+        "DataTable.Cell.AccordionToggle.collapse:aria-label": string;
+        "DataTable.Header.selectAllCheckbox:aria-label": string;
+        "DataTable.allItemsSelected:aria-live": string;
+        "DataTable.allItemsDeselected:aria-live": string;
     };
     sv: {
         sortableColumn: string;
+        "DataTable.Cell.AccordionToggle.expand:aria-label": string;
+        "DataTable.Cell.AccordionToggle.collapse:aria-label": string;
+        "DataTable.Header.selectAllCheckbox:aria-label": string;
+        "DataTable.allItemsSelected:aria-live": string;
+        "DataTable.allItemsDeselected:aria-live": string;
     };
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/data-table",
   "description": "Semrush DataTable Component",
-  "version": "17.0.0-prerelease.37",
+  "version": "17.0.0-prerelease.42",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -9,33 +9,33 @@
   "author": "UI-kit team <ui-kit-team@semrush.com>",
   "license": "MIT",
   "exports": {
-    "require": "./lib/cjs/index.js",
+    "types": "./lib/types/index.d.ts",
     "import": "./lib/esm/index.mjs",
-    "types": "./lib/types/index.d.ts"
+    "require": "./lib/cjs/index.js"
   },
   "dependencies": {
-    "@semcore/button": "^17.0.0-prerelease.37",
-    "@semcore/checkbox": "^17.0.0-prerelease.37",
-    "@semcore/spin": "^17.0.0-prerelease.37",
-    "@semcore/tooltip": "^17.0.0-prerelease.37",
-    "@semcore/widget-empty": "^17.0.0-prerelease.37"
+    "@semcore/button": "^17.0.0-prerelease.42",
+    "@semcore/checkbox": "^17.0.0-prerelease.42",
+    "@semcore/spin": "^17.0.0-prerelease.42",
+    "@semcore/tooltip": "^17.0.0-prerelease.42",
+    "@semcore/widget-empty": "^17.0.0-prerelease.42"
   },
   "devDependencies": {
     "@types/node": "18.16.15",
     "csstype": "3.1.3",
+    "@semcore/base-trigger": "17.0.0-prerelease.42",
+    "@semcore/dropdown-menu": "17.0.0-prerelease.42",
     "@semcore/testing-utils": "1.0.0",
-    "@semcore/dropdown-menu": "17.0.0-prerelease.37",
-    "@semcore/typography": "17.0.0-prerelease.37",
-    "@semcore/base-trigger": "17.0.0-prerelease.37",
-    "@semcore/accordion": "17.0.0-prerelease.37",
-    "@semcore/divider": "17.0.0-prerelease.37",
-    "@semcore/progress-bar": "17.0.0-prerelease.37",
-    "@semcore/skeleton": "17.0.0-prerelease.37",
-    "@semcore/spin": "17.0.0-prerelease.37",
-    "@semcore/spin-container": "17.0.0-prerelease.37",
-    "@semcore/tooltip": "17.0.0-prerelease.37",
-    "@semcore/base-components": "17.0.0-prerelease.37",
-    "@semcore/icon": "16.7.2-prerelease.37"
+    "@semcore/typography": "17.0.0-prerelease.42",
+    "@semcore/accordion": "17.0.0-prerelease.42",
+    "@semcore/divider": "17.0.0-prerelease.42",
+    "@semcore/progress-bar": "17.0.0-prerelease.42",
+    "@semcore/spin": "17.0.0-prerelease.42",
+    "@semcore/skeleton": "17.0.0-prerelease.42",
+    "@semcore/spin-container": "17.0.0-prerelease.42",
+    "@semcore/tooltip": "17.0.0-prerelease.42",
+    "@semcore/base-components": "17.0.0-prerelease.42",
+    "@semcore/icon": "17.0.0-prerelease.42"
   },
   "peerDependencies": {
     "@semcore/base-components": "^17.0.0 || ^17.0.0-0",