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

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, ScreenReaderOnly } 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,6 @@ 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"*/
 const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
@@ -36,7 +35,6 @@ const style = (
     "--gridTemplateRows": "--gridTemplateRows_wo0cb"
   })
 );
-/*!__reshadow-styles__:"../../style/scroll-shadows.shadow.css"*/
 const scrollStyles = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
@@ -64,13 +62,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) {
@@ -115,7 +113,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 +120,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 +134,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");
           }
@@ -223,8 +220,7 @@ class DataTableRoot extends Component {
       }, 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 +233,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 +245,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 +266,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 +293,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 +317,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 +397,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 +410,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 +427,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 +438,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 +452,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 +476,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 +508,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 +538,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 +558,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);
     }
   }
@@ -619,11 +607,10 @@ class DataTableRoot extends Component {
     }
   }
   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 +697,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 +756,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 +787,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 +798,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 {
@@ -844,9 +830,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 +887,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
@@ -942,13 +928,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 +978,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 +993,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 +1076,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 +1092,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 +1126,6 @@ class DataTableRoot extends Component {
           [ROW_INDEX]: -1
         });
         groupedRows.forEach((childRow, index) => {
-          var _a, _b;
           let dtRow;
           if (index === 0) {
             const rowData = {
@@ -1152,7 +1136,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 +1145,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 +1168,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) {

package/lib/esm/components/Head/Column.mjs

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { Component, lastInteraction, sstyled, assignProps } from "@semcore/core";
+import { sstyled, Component, lastInteraction, assignProps } from "@semcore/core";
 import { Flex } from "@semcore/base-components";
 import { ButtonLink } from "@semcore/button";
 import canUseDOM from "@semcore/core/lib/utils/canUseDOM";
@@ -11,7 +11,6 @@ import SortAsc from "@semcore/icon/SortAsc/m";
 import SortDesc from "@semcore/icon/SortDesc/m";
 import * as React from "react";
 import { handleKeydownFocusCell, handleFocusCell } from "../../enhancers/focusableCell.mjs";
-/*!__reshadow-styles__:"./style.shadow.css"*/
 const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
@@ -82,7 +81,6 @@ class Column extends Component {
       sortVisible: false
     });
     _defineProperty(this, "calculateActiveColumnMinWidth", () => {
-      var _a;
       const node = this.columnRef.current;
       if (node) {
         const clonedColumn = document.createElement("div");
@@ -101,7 +99,7 @@ class Column extends Component {
         document.body.appendChild(clonedColumn);
         const computedWidth = Math.ceil(clonedColumn.getBoundingClientRect().width);
         document.body.removeChild(clonedColumn);
-        const defaultNodeWidth = ((_a = this.columnRef.current) == null ? void 0 : _a.clientWidth) ?? 0;
+        const defaultNodeWidth = this.columnRef.current?.clientWidth ?? 0;
         if (computedWidth >= defaultNodeWidth) {
           return defaultNodeWidth + SORT_ICON_WIDTH;
         } else {
@@ -139,7 +137,7 @@ class Column extends Component {
         sortable
       } = this.asProps;
       if (sortable && onSortChange) {
-        const sortDirection = (sort == null ? void 0 : sort[0]) === name ? reversedSortDirection[sort[1]] : this.defaultDirection;
+        const sortDirection = sort?.[0] === name ? reversedSortDirection[sort[1]] : this.defaultDirection;
         onSortChange([name, sortDirection], e);
       }
     });
@@ -153,7 +151,6 @@ class Column extends Component {
       handleKeydownFocusCell(this.lockedCell, e);
     });
     _defineProperty(this, "handleFocusableCellFocus", (e) => {
-      var _a;
       const cellElement = e.currentTarget;
       const target = e.target;
       if (lastInteraction.isKeyboard()) {
@@ -163,7 +160,7 @@ class Column extends Component {
           handleFocusCell(this.lockedCell, target, cellElement);
         });
       } else {
-        const focusableChildren = Array.from(((_a = this.columnRef.current) == null ? void 0 : _a.children) ?? []).flatMap((node) => getFocusableIn(node));
+        const focusableChildren = Array.from(this.columnRef.current?.children ?? []).flatMap((node) => getFocusableIn(node));
         if (isInteractiveElement(e.target) && this.columnRef.current && focusableChildren.length > 1) {
           this.lockedCell[0] = this.columnRef.current;
           this.lockedCell[1] = true;
@@ -171,7 +168,6 @@ class Column extends Component {
       }
     });
     _defineProperty(this, "handleClick", (e) => {
-      var _a;
       const {
         sortable,
         onClick,
@@ -180,19 +176,18 @@ class Column extends Component {
       if (sortable) {
         this.handleSort(e);
       }
-      const focusableChildren = Array.from(((_a = this.columnRef.current) == null ? void 0 : _a.children) ?? []).flatMap((node) => getFocusableIn(node));
+      const focusableChildren = Array.from(this.columnRef.current?.children ?? []).flatMap((node) => getFocusableIn(node));
       if (isInteractiveElement(e.target) && this.columnRef.current && focusableChildren.length > 1) {
         this.lockedCell[0] = this.columnRef.current;
         this.lockedCell[1] = true;
       }
-      onClick == null ? void 0 : onClick(e, {
+      onClick?.(e, {
         rowIndex: -1,
         colIndex: columnIndex
       });
     });
   }
   componentDidMount() {
-    var _a;
     const {
       parent,
       sticky,
@@ -203,18 +198,17 @@ class Column extends Component {
     } = this.asProps;
     if (parent && sticky && scrollDirection !== "horizontal") {
       const columnElement = this.columnRef.current;
-      const groupElement = (_a = columnElement == null ? void 0 : columnElement.parentElement) == null ? void 0 : _a.children.item(0);
-      const groupRectHeight = (groupElement == null ? void 0 : groupElement.getBoundingClientRect().height) ?? 0;
+      const groupElement = columnElement?.parentElement?.children.item(0);
+      const groupRectHeight = groupElement?.getBoundingClientRect().height ?? 0;
       const topOffset = groupElement instanceof HTMLElement ? cssToIntDefault(groupElement.style.top) : 0;
-      columnElement == null ? void 0 : columnElement.style.setProperty("top", `${groupRectHeight + topOffset}px`);
+      columnElement?.style.setProperty("top", `${groupRectHeight + topOffset}px`);
     }
-    if (canUseDOM() && changeSortSize && (sort == null ? void 0 : sort[0]) === name) {
+    if (canUseDOM() && changeSortSize && sort?.[0] === name) {
       this.changeTemplateColumnBySort();
     }
   }
   componentDidUpdate(prevProps) {
-    var _a, _b;
-    if (this.asProps.changeSortSize && canUseDOM() && ((_a = prevProps.sort) == null ? void 0 : _a[0]) !== ((_b = this.asProps.sort) == null ? void 0 : _b[0])) {
+    if (this.asProps.changeSortSize && canUseDOM() && prevProps.sort?.[0] !== this.asProps.sort?.[0]) {
       this.changeTemplateColumnBySort();
     }
   }
@@ -226,7 +220,7 @@ class Column extends Component {
       sort,
       name
     } = this.asProps;
-    if ((sort == null ? void 0 : sort[0]) === name) {
+    if (sort?.[0] === name) {
       const newWidth = this.calculateActiveColumnMinWidth();
       setTimeout(() => {
         if (tableRef.current && newWidth !== null) {
@@ -238,7 +232,7 @@ class Column extends Component {
           }).join(" "));
         }
       });
-    } else if ((sort == null ? void 0 : sort[0]) !== name) {
+    } else if (sort?.[0] !== name) {
       setTimeout(() => {
         if (tableRef.current) {
           const currentGridTemplateColumns = tableRef.current.style.getPropertyValue("grid-template-columns");

package/lib/esm/components/Head/Group.mjs

@@ -1,11 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { Component, sstyled, assignProps } from "@semcore/core";
+import { sstyled, Component, assignProps } from "@semcore/core";
 import { Box } from "@semcore/base-components";
 import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
 import React__default from "react";
 import { DataTable } from "../DataTable/DataTable.mjs";
-/*!__reshadow-styles__:"./style.shadow.css"*/
 const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(