@semcore/data-table 17.0.0-prerelease.36 → 17.0.0-prerelease.39

package/lib/esm/components/DataTable/DataTable.mjs

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { createComponent, Component, lastInteraction, sstyled, assignProps } from "@semcore/core";
-import { ScrollArea, Box, ScreenReaderOnly } from "@semcore/base-components";
+import { sstyled, Component, lastInteraction, assignProps, createComponent } from "@semcore/core";
+import { Box, ScrollArea } from "@semcore/base-components";
 import canUseDOM from "@semcore/core/lib/utils/canUseDOM";
 import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
 import findComponent from "@semcore/core/lib/utils/findComponent";
@@ -16,7 +16,8 @@ import { localizedMessages } from "../../translations/__intergalactic-dynamic-lo
 import { Body } from "../Body/Body.mjs";
 import { MergedRowsCell, MergedColumnsCell } from "../Body/MergedCells.mjs";
 import { Head } from "../Head/Head.mjs";
-/*!__reshadow-styles__:"./dataTable.shadow.css"*/
+import { SRAnnouncer } from "../RowSelector/SRAnnouncer.mjs";
+import { SRReactiveAnnouncer } from "../RowSelector/SRReactiveAnnouncer.mjs";
 const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
@@ -36,7 +37,6 @@ const style = (
     "--gridTemplateRows": "--gridTemplateRows_wo0cb"
   })
 );
-/*!__reshadow-styles__:"../../style/scroll-shadows.shadow.css"*/
 const scrollStyles = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
@@ -64,13 +64,13 @@ const scrollStyles = (
     "_rightOffset": "__rightOffset_j4820_gg_"
   })
 );
-const ACCORDION = Symbol("accordion");
-const ROW_GROUP = Symbol("ROW_GROUP");
-const UNIQ_ROW_KEY = Symbol("UNIQ_ROW_KEY");
-const IS_EMPTY_DATA_ROW = Symbol("IS_EMPTY_DATA_ROW");
-const SELECT_ALL = Symbol("SELECT_ALL");
-const ROW_INDEX = Symbol("ROW_INDEX");
-const GRID_ROW_INDEX = Symbol("GRID_ROW_INDEX");
+const ACCORDION = /* @__PURE__ */ Symbol("accordion");
+const ROW_GROUP = /* @__PURE__ */ Symbol("ROW_GROUP");
+const UNIQ_ROW_KEY = /* @__PURE__ */ Symbol("UNIQ_ROW_KEY");
+const IS_EMPTY_DATA_ROW = /* @__PURE__ */ Symbol("IS_EMPTY_DATA_ROW");
+const SELECT_ALL = /* @__PURE__ */ Symbol("SELECT_ALL");
+const ROW_INDEX = /* @__PURE__ */ Symbol("ROW_INDEX");
+const GRID_ROW_INDEX = /* @__PURE__ */ Symbol("GRID_ROW_INDEX");
 const SCROLL_BAR_HEIGHT = 12;
 class DataTableRoot extends Component {
   static getDerivedStateFromProps(props, state) {
@@ -103,7 +103,6 @@ class DataTableRoot extends Component {
       gridTemplateColumns: [],
       gridTemplateAreas: []
     });
-    _defineProperty(this, "selectAllMessageTimer", 0);
     _defineProperty(this, "headerNodesMap", /* @__PURE__ */ new Map());
     _defineProperty(this, "selectedRowsContainer", void 0);
     _defineProperty(this, "lastSelectedRowKey", void 0);
@@ -115,7 +114,6 @@ class DataTableRoot extends Component {
       expandedRows: /* @__PURE__ */ new Set()
     });
     _defineProperty(this, "handleDocumentScroll", trottle(() => {
-      var _a;
       const tableContainer = this.tableContainerRef.current;
       if (!tableContainer) return;
       const tableContainerTop = tableContainer.getBoundingClientRect().top;
@@ -123,12 +121,12 @@ class DataTableRoot extends Component {
         headerProps
       } = this.asProps;
       const headerContainer = this.headerRef.current;
-      const elements = headerContainer == null ? void 0 : headerContainer.querySelectorAll('[role="columnheader"], [data-ui-name="Head.Group"]');
-      const top = tableContainerTop - ((headerProps == null ? void 0 : headerProps.top) ?? 0);
-      const headerScrollBar = (headerProps == null ? void 0 : headerProps.withScrollBar) ? (_a = this.scrollAreaRef.current) == null ? void 0 : _a.querySelector(`[role=scrollbar][aria-orientation=horizontal]`) : void 0;
+      const elements = headerContainer?.querySelectorAll('[role="columnheader"], [data-ui-name="Head.Group"]');
+      const top = tableContainerTop - (headerProps?.top ?? 0);
+      const headerScrollBar = headerProps?.withScrollBar ? this.scrollAreaRef.current?.querySelector(`[role=scrollbar][aria-orientation=horizontal]`) : void 0;
       if (top && top < 0) {
         const translate = `translateY(${Math.abs(top)}px)`;
-        elements == null ? void 0 : elements.forEach((column) => {
+        elements?.forEach((column) => {
           if (column instanceof HTMLElement) {
             column.style.setProperty("transform", translate);
           }
@@ -137,7 +135,7 @@ class DataTableRoot extends Component {
           headerScrollBar.style.setProperty("transform", translate);
         }
       } else {
-        elements == null ? void 0 : elements.forEach((column) => {
+        elements?.forEach((column) => {
           if (column instanceof HTMLElement) {
             column.style.removeProperty("transform");
           }
@@ -205,26 +203,8 @@ class DataTableRoot extends Component {
         row
       });
     });
-    _defineProperty(this, "setSelectAllMessage", (selectedAll) => {
-      if (this.selectAllMessageTimer) {
-        clearTimeout(this.selectAllMessageTimer);
-      }
-      const {
-        getI18nText
-      } = this.asProps;
-      const message = getI18nText(selectedAll ? "DataTable.allItemsSelected:aria-live" : "DataTable.allItemsDeselected:aria-live");
-      this.setState({
-        selectAllMessage: message
-      });
-      this.selectAllMessageTimer = window.setTimeout(() => {
-        this.setState({
-          selectAllMessage: ""
-        });
-      }, 5e3);
-    });
     _defineProperty(this, "getRow", (index) => {
-      var _a;
-      return (_a = this.tableRef.current) == null ? void 0 : _a.querySelector(`:scope [aria-rowindex="${index + 1}"]:not([aria-hidden="true"]):not(:scope [data-ui-name="DataTable"] [aria-rowindex="${index + 1}"]:not([aria-hidden="true"])`);
+      return this.tableRef.current?.querySelector(`:scope [aria-rowindex="${index + 1}"]:not([aria-hidden="true"]):not(:scope [data-ui-name="DataTable"] [aria-rowindex="${index + 1}"]:not([aria-hidden="true"])`);
     });
     _defineProperty(this, "hasFocusableInHeader", () => {
       return this.headerRef.current && hasFocusableIn(this.headerRef.current) || this.columns.some((column) => column.sortable);
@@ -237,10 +217,10 @@ class DataTableRoot extends Component {
       const expandedRows = this.state.expandedRows;
       if (expandedRows.has(expandedRow[UNIQ_ROW_KEY])) {
         expandedRows.delete(expandedRow[UNIQ_ROW_KEY]);
-        onAccordionToggle == null ? void 0 : onAccordionToggle("close", expandedRow[UNIQ_ROW_KEY], expandedRow[ROW_INDEX]);
+        onAccordionToggle?.("close", expandedRow[UNIQ_ROW_KEY], expandedRow[ROW_INDEX]);
       } else {
         expandedRows.add(expandedRow[UNIQ_ROW_KEY]);
-        onAccordionToggle == null ? void 0 : onAccordionToggle("open", expandedRow[UNIQ_ROW_KEY], expandedRow[ROW_INDEX]);
+        onAccordionToggle?.("open", expandedRow[UNIQ_ROW_KEY], expandedRow[ROW_INDEX]);
         if (accordionMode === "toggle") {
           const rowIndex = expandedRow[ROW_INDEX];
           const colIndex = this.focusedCell[1];
@@ -249,17 +229,16 @@ class DataTableRoot extends Component {
       }
     });
     _defineProperty(this, "changeFocusCell", (rowIndex, colIndex, direction) => {
-      var _a, _b, _c, _d;
       const {
         limit
       } = this.asProps;
       const hasFocusable = this.hasFocusableInHeader();
       const maxCol = this.columns.length - 1;
       const maxRow = this.totalRows || 1;
-      const currentRow = (_a = this.tableRef.current) == null ? void 0 : _a.querySelector(`[aria-rowindex="${this.focusedCell[0] + 1}"]`);
-      const headerCells = (_b = this.tableRef.current) == null ? void 0 : _b.querySelectorAll("[role=columnheader]");
-      const currentCell = currentRow == null ? void 0 : currentRow.querySelector(`[role=gridcell][aria-colindex='${this.focusedCell[1] + 1}']`);
-      const currentHeaderCell = headerCells == null ? void 0 : headerCells.item(this.focusedCell[1]);
+      const currentRow = this.tableRef.current?.querySelector(`[aria-rowindex="${this.focusedCell[0] + 1}"]`);
+      const headerCells = this.tableRef.current?.querySelectorAll("[role=columnheader]");
+      const currentCell = currentRow?.querySelector(`[role=gridcell][aria-colindex='${this.focusedCell[1] + 1}']`);
+      const currentHeaderCell = headerCells?.item(this.focusedCell[1]);
       let changed = true;
       const newRow = this.focusedCell[0] + rowIndex;
       const newCol = this.focusedCell[1] + colIndex;
@@ -271,26 +250,26 @@ class DataTableRoot extends Component {
       }
       if (!changed) return;
       const row = this.getRow(newRow);
-      const cell = row == null ? void 0 : row.querySelector(`:scope > div > [role=gridcell][aria-colindex="${newCol + 1}"]:not([aria-hidden="true"]), :scope > [role=columnheader][aria-colindex="${newCol + 1}"]:not([aria-hidden="true"]), :scope > div > [role=columnheader][aria-colindex="${newCol + 1}"]:not([aria-hidden="true"])`);
+      const cell = row?.querySelector(`:scope > div > [role=gridcell][aria-colindex="${newCol + 1}"]:not([aria-hidden="true"]), :scope > [role=columnheader][aria-colindex="${newCol + 1}"]:not([aria-hidden="true"]), :scope > div > [role=columnheader][aria-colindex="${newCol + 1}"]:not([aria-hidden="true"])`);
       if (cell instanceof HTMLElement && currentCell !== cell) {
         this.focusedCell = [newRow, newCol];
-        currentCell == null ? void 0 : currentCell.setAttribute("inert", "");
+        currentCell?.setAttribute("inert", "");
         if (currentCell !== currentHeaderCell) {
-          currentCell == null ? void 0 : currentCell.removeAttribute("aria-describedby");
+          currentCell?.removeAttribute("aria-describedby");
         }
-        const headerCell = headerCells == null ? void 0 : headerCells.item(newCol);
-        const describedBy = headerCell == null ? void 0 : headerCell.getAttribute("aria-describedby");
+        const headerCell = headerCells?.item(newCol);
+        const describedBy = headerCell?.getAttribute("aria-describedby");
         cell.removeAttribute("inert");
         if (headerCell !== cell && describedBy) {
           cell.setAttribute("aria-describedby", describedBy);
         }
-        cell == null ? void 0 : cell.focus({
+        cell?.focus({
           focusVisible: true
         });
         if (newRow !== 0) {
-          currentHeaderCell == null ? void 0 : currentHeaderCell.setAttribute("inert", "");
-          const headerCell2 = headerCells == null ? void 0 : headerCells.item(newCol);
-          headerCell2 == null ? void 0 : headerCell2.removeAttribute("inert");
+          currentHeaderCell?.setAttribute("inert", "");
+          const headerCell2 = headerCells?.item(newCol);
+          headerCell2?.removeAttribute("inert");
         }
       } else if (cell === null && currentCell instanceof HTMLElement) {
         let rowI = rowIndex;
@@ -298,20 +277,20 @@ class DataTableRoot extends Component {
         const colspan = Number(currentCell.getAttribute("aria-colspan"));
         const rowspan = Number(currentCell.getAttribute("aria-rowspan"));
         if (direction === "left" || direction === "right") {
-          if (((_d = (_c = currentCell.parentElement) == null ? void 0 : _c.parentElement) == null ? void 0 : _d.dataset.uiName) === "Collapse") {
+          if (currentCell.parentElement?.parentElement?.dataset.uiName === "Collapse") {
             return;
           }
-          if ((limit == null ? void 0 : limit.fromRow) !== void 0 && limit.fromColumn === void 0 && newCol === limit.fromRow) {
+          if (limit?.fromRow !== void 0 && limit.fromColumn === void 0 && newCol === limit.fromRow) {
             return;
           }
           const hasRowSpanUpper = row instanceof HTMLElement && Number(row.dataset.filledColumns) < this.columns.length;
           if (colspan > 0) {
-            if (direction === "right" && (limit == null ? void 0 : limit.fromColumn) !== void 0 && newCol === limit.fromColumn) {
+            if (direction === "right" && limit?.fromColumn !== void 0 && newCol === limit.fromColumn) {
               rowI = rowI - 1;
             } else {
               colI = direction === "left" ? colI - colspan + 1 : colI + colspan - 1;
             }
-          } else if (hasRowSpanUpper || direction === "right" && ((limit == null ? void 0 : limit.fromColumn) !== void 0 || (limit == null ? void 0 : limit.fromRow) !== void 0)) {
+          } else if (hasRowSpanUpper || direction === "right" && (limit?.fromColumn !== void 0 || limit?.fromRow !== void 0)) {
             rowI = rowI - 1;
           } else {
             colI = direction === "left" ? colI - 1 : colI + 1;
@@ -322,8 +301,8 @@ class DataTableRoot extends Component {
           } else if (Number(currentCell.getAttribute("aria-colindex")) === 1) {
             rowI = direction === "up" ? rowI - 1 : rowI + 1;
           } else {
-            const areLimitsDefined = (limit == null ? void 0 : limit.fromRow) !== void 0 || (limit == null ? void 0 : limit.fromColumn) !== void 0;
-            if (areLimitsDefined && newRow > ((limit == null ? void 0 : limit.fromRow) ?? 0) + 1) {
+            const areLimitsDefined = limit?.fromRow !== void 0 || limit?.fromColumn !== void 0;
+            if (areLimitsDefined && newRow > (limit?.fromRow ?? 0) + 1) {
               return;
             }
             const hasRowSpanUpper = row instanceof HTMLElement && currentRow instanceof HTMLElement && row.dataset.filledColumns !== currentRow.dataset.filledColumns;
@@ -402,8 +381,8 @@ class DataTableRoot extends Component {
       const roundedScroll = Math.round(scrollLeft);
       const roundedMaxScroll = Math.round(maxScrollRight);
       let shadow = "";
-      if (roundedMaxScroll <= 0) ;
-      else if (roundedScroll <= 0) {
+      if (roundedMaxScroll <= 0) {
+      } else if (roundedScroll <= 0) {
         shadow = "end";
       } else if (roundedScroll >= roundedMaxScroll) {
         shadow = "start";
@@ -415,12 +394,11 @@ class DataTableRoot extends Component {
       });
     });
     _defineProperty(this, "handleFocus", (e) => {
-      var _a, _b, _c, _d, _e;
       if (this.asProps.loading) {
-        (_a = this.spinnerRef.current) == null ? void 0 : _a.focus();
+        this.spinnerRef.current?.focus();
         e.currentTarget.setAttribute("tabIndex", "-1");
         if (this.isDataEmpty) {
-          (_b = this.headerRef.current) == null ? void 0 : _b.setAttribute("tabIndex", "-1");
+          this.headerRef.current?.setAttribute("tabIndex", "-1");
         }
       } else if ((!e.relatedTarget || !isFocusInside(e.currentTarget, e.relatedTarget)) && lastInteraction.isKeyboard()) {
         if (this.focusedCell[0] === -1 && this.focusedCell[1] === -1) {
@@ -433,8 +411,8 @@ class DataTableRoot extends Component {
           row = this.getRow(this.focusedCell[0]);
         }
         if (!row && this.asProps.virtualScroll) {
-          const firstAvailableCell = (_c = this.tableRef.current) == null ? void 0 : _c.querySelector(`[role="gridcell"]`);
-          const firstAvailableRow = (_d = firstAvailableCell == null ? void 0 : firstAvailableCell.parentElement) == null ? void 0 : _d.parentElement;
+          const firstAvailableCell = this.tableRef.current?.querySelector(`[role="gridcell"]`);
+          const firstAvailableRow = firstAvailableCell?.parentElement?.parentElement;
           if (firstAvailableCell && firstAvailableRow) {
             const colIndex = Number(firstAvailableCell.getAttribute("aria-colindex") ?? 1) - 1;
             const rowIndex = Number(firstAvailableRow.getAttribute("aria-rowindex") ?? 1) - 1;
@@ -444,8 +422,8 @@ class DataTableRoot extends Component {
           }
         }
         const colindex = this.focusedCell[1];
-        const cell = colindex > -1 ? row == null ? void 0 : row.querySelector(`[role=gridcell][aria-colindex="${colindex + 1}"]:not([aria-hidden="true"]), [role=columnheader][aria-colindex="${colindex + 1}"]:not([aria-hidden="true"])`) : void 0;
-        cell == null ? void 0 : cell.removeAttribute("inert");
+        const cell = colindex > -1 ? row?.querySelector(`[role=gridcell][aria-colindex="${colindex + 1}"]:not([aria-hidden="true"]), [role=columnheader][aria-colindex="${colindex + 1}"]:not([aria-hidden="true"])`) : void 0;
+        cell?.removeAttribute("inert");
         if (cell instanceof HTMLElement) {
           if (hasParent(e.target, cell) && !e.target.dataset.skipTargetFocus) {
             e.target.focus({
@@ -458,20 +436,19 @@ class DataTableRoot extends Component {
           }
         }
         if (this.isDataEmpty) {
-          (_e = this.headerRef.current) == null ? void 0 : _e.setAttribute("tabIndex", "-1");
+          this.headerRef.current?.setAttribute("tabIndex", "-1");
         }
         e.currentTarget.setAttribute("tabIndex", "-1");
       }
     });
     _defineProperty(this, "handleBlur", (e) => {
-      var _a;
       const relatedTarget = e.relatedTarget;
       const tableElement = this.tableRef.current;
       if (tableElement && (!relatedTarget || !isFocusInside(tableElement, relatedTarget) || !lastInteraction.isKeyboard())) {
         this.setInert(false);
         tableElement.setAttribute("tabIndex", "0");
         if (this.isDataEmpty) {
-          (_a = this.headerRef.current) == null ? void 0 : _a.setAttribute("tabIndex", "0");
+          this.headerRef.current?.setAttribute("tabIndex", "0");
         }
       }
     });
@@ -483,12 +460,11 @@ class DataTableRoot extends Component {
       this.changeFocusCell(-1, cellIndex === -1 ? 0 : cellIndex, "up");
     });
     _defineProperty(this, "handleContainerResizeEnd", (entries, observer) => {
-      var _a, _b;
       if (this.containerResizeEndTimeoutId) {
         clearTimeout(this.containerResizeEndTimeoutId);
       }
       this.containerResizeEndTimeoutId = setTimeout(this.calculateVerticalShadow, 0);
-      (_b = (_a = this.asProps).onResize) == null ? void 0 : _b.call(_a, entries, observer);
+      this.asProps.onResize?.(entries, observer);
     });
     _defineProperty(this, "getScrollOffsetValue", () => {
       if (!this.headerRef.current) {
@@ -516,12 +492,11 @@ class DataTableRoot extends Component {
         }
       });
       return this.columns.reduce((acc, column) => {
-        var _a, _b;
         if (column.fixed === "left") {
-          acc[0] += ((_a = this.headerNodesMap.get(column.name)) == null ? void 0 : _a.getBoundingClientRect().width) ?? 0;
+          acc[0] += this.headerNodesMap.get(column.name)?.getBoundingClientRect().width ?? 0;
         }
         if (column.fixed === "right") {
-          acc[1] += ((_b = this.headerNodesMap.get(column.name)) == null ? void 0 : _b.getBoundingClientRect().width) ?? 0;
+          acc[1] += this.headerNodesMap.get(column.name)?.getBoundingClientRect().width ?? 0;
         }
         return acc;
       }, [0, 0]);
@@ -547,10 +522,7 @@ class DataTableRoot extends Component {
       };
       const columnsFixed = this.columns.slice(startIndexSideMap[side], endIndexSideMap[side]);
       if (columnsFixed.length < 1) return [side, 0];
-      const sum = columnsFixed.reduce((acc, column) => {
-        var _a;
-        return acc + ((_a = this.headerNodesMap.get(column.name)) == null ? void 0 : _a.getBoundingClientRect().width);
-      }, 0);
+      const sum = columnsFixed.reduce((acc, column) => acc + this.headerNodesMap.get(column.name)?.getBoundingClientRect().width, 0);
       return [side, `${sum}px`];
     });
     const cols = this.calculateColumnsFromConfig();
@@ -570,13 +542,13 @@ class DataTableRoot extends Component {
       headerProps,
       loading
     } = this.asProps;
-    if ((headerProps == null ? void 0 : headerProps.sticky) && !headerProps.h || loading || this.hasFixedColumn) {
+    if (headerProps?.sticky && !headerProps.h || loading || this.hasFixedColumn) {
       requestAnimationFrame(() => {
         this.forceUpdate();
         this.calculateVerticalShadow();
       });
     }
-    if ((headerProps == null ? void 0 : headerProps.sticky) && canUseDOM() && this.scrollDirection === "horizontal") {
+    if (headerProps?.sticky && canUseDOM() && this.scrollDirection === "horizontal") {
       document.addEventListener("scroll", this.handleDocumentScroll);
     }
   }
@@ -597,33 +569,15 @@ class DataTableRoot extends Component {
         this.calculateVerticalShadow();
       }
     }
-    if (prevProps.selectedRows !== selectedRows && selectedRows !== void 0 && Array.isArray(selectedRows)) {
-      const selectedRowsSet = new Set(selectedRows);
-      const allChecked = [];
-      const allUnchecked = [];
-      this.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 === data.length) {
-        this.setSelectAllMessage(true);
-      } else if (allUnchecked.length === data.length) {
-        this.setSelectAllMessage(false);
-      }
-    }
     if (prevProps.selectedRows !== selectedRows && selectedRows !== void 0 && !Array.isArray(selectedRows)) {
       this.selectedRowsContainer = selectedRows;
     }
   }
   componentWillUnmount() {
-    var _a;
     if (canUseDOM()) {
       document.removeEventListener("scroll", this.handleDocumentScroll);
     }
-    (_a = this.state.expandedRows) == null ? void 0 : _a.clear();
+    this.state.expandedRows?.clear();
   }
   get totalRows() {
     const {
@@ -710,7 +664,7 @@ class DataTableRoot extends Component {
       onSortChange,
       getI18nText,
       uid,
-      ref: (headerProps == null ? void 0 : headerProps.ref) ? forkRef(this.headerRef, headerProps.ref) : this.headerRef,
+      ref: headerProps?.ref ? forkRef(this.headerRef, headerProps.ref) : this.headerRef,
       gridAreaGroupMap: this.gridAreaGroupMap,
       gridTemplateColumns,
       gridTemplateAreas,
@@ -769,7 +723,7 @@ class DataTableRoot extends Component {
       gridTemplateAreas,
       loading,
       headerHeight: this.getHeaderHeight(),
-      stickyHeader: headerProps == null ? void 0 : headerProps.sticky,
+      stickyHeader: headerProps?.sticky,
       getI18nText,
       expandedRows: this.state.expandedRows,
       onExpandRow: this.onExpandRow,
@@ -800,9 +754,8 @@ class DataTableRoot extends Component {
     };
   }
   setInert(value) {
-    var _a;
-    const cells = (_a = this.tableRef.current) == null ? void 0 : _a.querySelectorAll("[role=gridcell], [role=columnheader]");
-    cells == null ? void 0 : cells.forEach((cell) => {
+    const cells = this.tableRef.current?.querySelectorAll("[role=gridcell], [role=columnheader]");
+    cells?.forEach((cell) => {
       if (value === true) {
         cell.setAttribute("inert", "");
       } else {
@@ -812,8 +765,8 @@ class DataTableRoot extends Component {
   }
   initFocusableCell(initCell) {
     const hasFocusable = this.hasFocusableInHeader();
-    const initRow = (initCell == null ? void 0 : initCell[0]) ?? 0;
-    const initCol = (initCell == null ? void 0 : initCell[1]) ?? 0;
+    const initRow = initCell?.[0] ?? 0;
+    const initCol = initCell?.[1] ?? 0;
     if (hasFocusable) {
       this.focusedCell = [initRow, initCol];
     } else {
@@ -836,7 +789,9 @@ class DataTableRoot extends Component {
       children,
       headerProps,
       loading,
-      selectedRows
+      selectedRows,
+      getI18nText,
+      data
     } = this.asProps;
     const [offsetLeftSum, offsetRightSum] = this.getScrollOffsetValue();
     const {
@@ -844,9 +799,9 @@ class DataTableRoot extends Component {
       gridTemplateAreas
     } = this.gridSettings;
     const Head2 = findComponent(Children, ["DataTable.Head"]);
-    const headerPropsToCheck = headerProps ?? (Head2 == null ? void 0 : Head2.props);
-    const headerHeight = (headerProps == null ? void 0 : headerProps.h) || this.getHeaderHeight();
-    const topOffset = (headerPropsToCheck == null ? void 0 : headerPropsToCheck.sticky) || (headerPropsToCheck == null ? void 0 : headerPropsToCheck.withScrollBar) ? headerHeight : void 0;
+    const headerPropsToCheck = headerProps ?? Head2?.props;
+    const headerHeight = headerProps?.h || this.getHeaderHeight();
+    const topOffset = headerPropsToCheck?.sticky || headerPropsToCheck?.withScrollBar ? headerHeight : void 0;
     const width = w ?? (this.columns.some((c) => c.gtcWidth === "auto" || c.gtcWidth === "1fr") ? "100%" : void 0);
     let gridTemplateRows = void 0;
     if (virtualScroll && typeof virtualScroll !== "boolean" && "rowHeight" in virtualScroll) {
@@ -901,7 +856,7 @@ class DataTableRoot extends Component {
         "use:hMax": void 0,
         "use:hMin": void 0
       }, _ref)
-    }), children ? /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {})) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DataTable.Head, null), /* @__PURE__ */ React.createElement(DataTable.Body, null)))), (headerPropsToCheck == null ? void 0 : headerPropsToCheck.withScrollBar) && topOffset && !loading && /* @__PURE__ */ React.createElement(ScrollArea.Bar, {
+    }), children ? /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {})) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DataTable.Head, null), /* @__PURE__ */ React.createElement(DataTable.Body, null)))), headerPropsToCheck?.withScrollBar && topOffset && !loading && /* @__PURE__ */ React.createElement(ScrollArea.Bar, {
       orientation: "horizontal",
       top: topOffset - SCROLL_BAR_HEIGHT,
       zIndex: 20
@@ -911,10 +866,15 @@ class DataTableRoot extends Component {
     }), /* @__PURE__ */ React.createElement(ScrollArea.Bar, {
       orientation: "vertical",
       zIndex: 20
-    })), selectedRows !== void 0 && /* @__PURE__ */ React.createElement(ScreenReaderOnly, _ref2.cn("ScreenReaderOnly", {
-      "aria-live": "polite",
-      "role": "status"
-    }), this.state.selectAllMessage));
+    })), selectedRows !== void 0 && !Array.isArray(selectedRows) && /* @__PURE__ */ React.createElement(SRReactiveAnnouncer, _ref2.cn("SRReactiveAnnouncer", {
+      "selectedRows": selectedRows,
+      "getI18nText": getI18nText
+    })), selectedRows !== void 0 && Array.isArray(selectedRows) && /* @__PURE__ */ React.createElement(SRAnnouncer, _ref2.cn("SRAnnouncer", {
+      "selectedRows": selectedRows,
+      "getI18nText": getI18nText,
+      "data": data,
+      "flatRows": this.flatRows
+    })));
   }
   calculateColumnsFromConfig() {
     const {
@@ -942,13 +902,13 @@ class DataTableRoot extends Component {
       calculatedColumns.push(column);
     }
     const makeColumn = (columnElement, parent, isFirst, isLast, hasGroups) => {
-      const leftBordersFromParent = isFirst && ((parent == null ? void 0 : parent.borders) === "both" || (parent == null ? void 0 : parent.borders) === "left") ? "left" : void 0;
-      const rightBordersFromParent = isLast && ((parent == null ? void 0 : parent.borders) === "both" || (parent == null ? void 0 : parent.borders) === "right") ? "right" : void 0;
+      const leftBordersFromParent = isFirst && (parent?.borders === "both" || parent?.borders === "left") ? "left" : void 0;
+      const rightBordersFromParent = isLast && (parent?.borders === "both" || parent?.borders === "right") ? "right" : void 0;
       const column = {
         ...columnElement,
         name: childIsColumn(columnElement) ? columnElement.name : "",
         gtcWidth: childIsColumn(columnElement) ? calculateGridTemplateColumn(columnElement) : "",
-        fixed: columnElement.fixed ?? (hasGroups ? parent == null ? void 0 : parent.fixed : void 0),
+        fixed: columnElement.fixed ?? (hasGroups ? parent?.fixed : void 0),
         borders: columnElement.borders ?? leftBordersFromParent ?? rightBordersFromParent,
         parent
       };
@@ -992,7 +952,6 @@ class DataTableRoot extends Component {
         Group.columns = [];
         Group.children = child.children;
         child.columns.forEach((child2, j) => {
-          var _a;
           const isFirst = j === 0;
           const isLast = j === childCount - 1;
           const col = makeColumn(child2, Group, isFirst, isLast, this.hasGroups);
@@ -1008,7 +967,7 @@ class DataTableRoot extends Component {
           if (isFirst && i > 0) {
             setShowShadows(col, i);
           }
-          (_a = Group.columns) == null ? void 0 : _a.push(col);
+          Group.columns?.push(col);
         });
         treeColumns.push(Group);
         this.gridAreaGroupMap.set(groupIndex, `1 / ${initGridColumn} / 2 / ${gridColumnIndex}`);
@@ -1091,7 +1050,7 @@ class DataTableRoot extends Component {
             columns2.delete(value2);
           });
         }
-        if (value == null ? void 0 : value[ACCORDION]) {
+        if (value?.[ACCORDION]) {
           accordionInCell = value[ACCORDION];
         }
         return acc;
@@ -1107,7 +1066,7 @@ class DataTableRoot extends Component {
       } else if (accordionInCell) {
         gridRowIndex++;
       }
-      excludeColumns == null ? void 0 : excludeColumns.forEach((value) => {
+      excludeColumns?.forEach((value) => {
         columns2.delete(value);
       });
       if (columns2.size > 0) {
@@ -1141,7 +1100,6 @@ class DataTableRoot extends Component {
           [ROW_INDEX]: -1
         });
         groupedRows.forEach((childRow, index) => {
-          var _a, _b;
           let dtRow;
           if (index === 0) {
             const rowData = {
@@ -1152,7 +1110,7 @@ class DataTableRoot extends Component {
             dtRow[ROW_GROUP] = /* @__PURE__ */ new Set();
           } else {
             dtRow = makeDtRow(childRow, groupedKeys);
-            (_b = (_a = innerRows[0]) == null ? void 0 : _a[ROW_GROUP]) == null ? void 0 : _b.add(dtRow[UNIQ_ROW_KEY]);
+            innerRows[0]?.[ROW_GROUP]?.add(dtRow[UNIQ_ROW_KEY]);
           }
           innerRows.push(dtRow);
           if (index === groupedRows.length - 1 && row[ACCORDION]) {
@@ -1161,7 +1119,7 @@ class DataTableRoot extends Component {
           rowIndex++;
         });
         rows.push(innerRows);
-      } else if ((groupedRows == null ? void 0 : groupedRows.length) === 1) {
+      } else if (groupedRows?.length === 1) {
         const dtRow = makeDtRow({
           ...groupedRows[0],
           ...row
@@ -1184,15 +1142,14 @@ class DataTableRoot extends Component {
     return (/* @__PURE__ */ React.isValidElement(c) ? c.props.gtcWidth : c.gtcWidth) ?? this.props.defaultGridTemplateColumnWidth;
   }
   getHeaderHeight() {
-    var _a, _b, _c;
-    const header = (_a = this.headerRef.current) == null ? void 0 : _a.children;
+    const header = this.headerRef.current?.children;
     let height = 0;
-    for (let i = 0; i < ((header == null ? void 0 : header.length) ?? 0); i++) {
-      const item = header == null ? void 0 : header.item(i);
-      let columnHeight = item == null ? void 0 : item.getBoundingClientRect().height;
+    for (let i = 0; i < (header?.length ?? 0); i++) {
+      const item = header?.item(i);
+      let columnHeight = item?.getBoundingClientRect().height;
       if (item instanceof HTMLElement && item.dataset.groupContainer) {
-        const groupHeight = ((_b = item.children.item(0)) == null ? void 0 : _b.getBoundingClientRect().height) ?? 0;
-        const cellHeight = ((_c = item.children.item(1)) == null ? void 0 : _c.getBoundingClientRect().height) ?? 0;
+        const groupHeight = item.children.item(0)?.getBoundingClientRect().height ?? 0;
+        const cellHeight = item.children.item(1)?.getBoundingClientRect().height ?? 0;
         columnHeight = groupHeight + cellHeight;
       }
       if (columnHeight) {