react-glide-table 1.1.1 → 1.1.3

package/dist/index.cjs

@@ -18,8 +18,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var index_exports = {};
-__export(index_exports, {
+var src_exports = {};
+__export(src_exports, {
   CELL_SELECTION_EDGES_CLASS: () => CELL_SELECTION_EDGES_CLASS,
   DEFAULT_DATA_TABLE_LABELS: () => DEFAULT_DATA_TABLE_LABELS,
   DEFAULT_TREE_CHILDREN_FIELD: () => DEFAULT_TREE_CHILDREN_FIELD,
@@ -53,7 +53,7 @@ __export(index_exports, {
   useConvertTreeData: () => useConvertTreeData,
   useGlideTable: () => useGlideTable
 });
-module.exports = __toCommonJS(index_exports);
+module.exports = __toCommonJS(src_exports);
 
 // src/core/labels.ts
 var DEFAULT_DATA_TABLE_LABELS = {
@@ -1178,6 +1178,7 @@ function useGlideTable(options) {
 
 // src/components/ui/table/components/DataTable/DataTable.tsx
 var import_react_table3 = require("@tanstack/react-table");
+var import_react7 = require("react");
 
 // src/components/ui/table/components/DataTable/DataTableRow.tsx
 var import_react_table2 = require("@tanstack/react-table");
@@ -1368,7 +1369,7 @@ function DataTableRow({
   virtualIndex,
   measureElement
 }) {
-  const { rowSpan, selection, cellSelection, cellEdit, expand } = useDataTableRowContext();
+  const { classNames, rowSpan, selection, cellSelection, cellEdit, expand } = useDataTableRowContext();
   const {
     enableRowSpan,
     primaryRowSpanKey,
@@ -1446,12 +1447,17 @@ function DataTableRow({
     {
       ref: measureElement,
       "data-index": virtualIndex,
+      "data-selected": isRowSelected ? "" : void 0,
+      "data-hovered": isRowHovered || isGroupHovered ? "" : void 0,
+      "data-expandable": enableExpand && canExpand ? "" : void 0,
+      "data-expanded": isExpanded ? "" : void 0,
       className: cn(
         "DataTableRowJSX",
         !enableRowSpan && ROW_HOVER_CLASS,
         enableRowSpan && isRowHovered && !isRowSelected && ROW_HOVERED_BG_CLASS,
         isRowSelected && "is-selected",
         enableExpand && canExpand && "is-expandable",
+        classNames?.row,
         getRowClassName?.(rowData, rowIndex)
       ),
       onMouseEnter: () => onRowHover(rowIndex, rowData),
@@ -1502,10 +1508,19 @@ function DataTableRow({
           isVisuallySelectedAt
         );
         const resolveCellRowIndex = (clientY, element) => getRowIndexInMergedCell(clientY, element, rowIndex, cellRowSpan);
+        const hasSelectionEdges = hasCellSelectionEdges(selectionEdgeStyle);
         return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
           "td",
           {
             rowSpan: rowSpanInfo && rowSpanInfo.rowSpan > 1 ? rowSpanInfo.rowSpan : void 0,
+            "data-merged": isMerged && cellIndex > 0 ? "" : void 0,
+            "data-merged-edge-right": showMergedRightEdge ? "" : void 0,
+            "data-group-selected": enableRowSpan && showCellSelected ? "" : void 0,
+            "data-group-hovered": enableRowSpan && showCellHover && !showCellSelected ? "" : void 0,
+            "data-selection-fill": isCellDragSelected ? "" : void 0,
+            "data-selection-edges": hasSelectionEdges ? "" : void 0,
+            "data-editable": editable ? "" : void 0,
+            "data-editing": isEditing ? "" : void 0,
             onMouseDown: (event) => {
               if (isEditing) {
                 event.stopPropagation();
@@ -1549,8 +1564,9 @@ function DataTableRow({
               enableRowSpan && showCellSelected && "is-group-selected",
               enableRowSpan && showCellHover && !showCellSelected && "is-group-hovered",
               isCellDragSelected && CELL_SELECTION_FILL_CLASS,
-              hasCellSelectionEdges(selectionEdgeStyle) && CELL_SELECTION_EDGES_CLASS,
-              editable && "is-editable"
+              hasSelectionEdges && CELL_SELECTION_EDGES_CLASS,
+              editable && "is-editable",
+              classNames?.cell
             ),
             children: [
               isEditing ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -1559,7 +1575,11 @@ function DataTableRow({
                   ref: editInputRef,
                   type: editType === "number" ? "number" : "text",
                   defaultValue: draftValue,
-                  className: cn("cell-edit-input", CELL_ALIGN_CLASS[align]),
+                  className: cn(
+                    "cell-edit-input",
+                    CELL_ALIGN_CLASS[align],
+                    classNames?.cellEditInput
+                  ),
                   onChange: (event) => onDraftValueChange(event.target.value),
                   onMouseDown: (event) => event.stopPropagation(),
                   onClick: (event) => event.stopPropagation(),
@@ -1577,23 +1597,69 @@ function DataTableRow({
                     onCommitEdit(event.currentTarget.value);
                   }
                 }
-              ) : isExpandCell && enableExpand ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "expand-cell", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "expand-cell-content", children: [
-                  rowLevel > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "expand-cell-indent", children: "\xB7" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "expand-cell-value", children: (0, import_react_table2.flexRender)(cell.column.columnDef.cell, cell.getContext()) })
-                ] }),
+              ) : isExpandCell && enableExpand ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn("expand-cell", classNames?.expandCell), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "div",
+                  {
+                    className: cn(
+                      "expand-cell-content",
+                      classNames?.expandCellContent
+                    ),
+                    children: [
+                      rowLevel > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "span",
+                        {
+                          className: cn(
+                            "expand-cell-indent",
+                            classNames?.expandCellIndent
+                          ),
+                          children: "\xB7"
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "div",
+                        {
+                          className: cn(
+                            "expand-cell-value",
+                            classNames?.expandCellValue
+                          ),
+                          children: (0, import_react_table2.flexRender)(cell.column.columnDef.cell, cell.getContext())
+                        }
+                      )
+                    ]
+                  }
+                ),
                 canExpand && expandKey && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "button",
                   {
                     type: "button",
                     "aria-label": isExpanded ? collapseRowLabel : expandRowLabel,
-                    className: "expand-toggle-button",
+                    className: cn(
+                      "expand-toggle-button",
+                      classNames?.expandToggle
+                    ),
                     onClick: (event) => {
                       event.stopPropagation();
                       onToggleExpand?.(expandKey);
                     },
                     onMouseDown: (event) => event.stopPropagation(),
-                    children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChevronUp, { className: "expand-toggle-icon" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChevronDown, { className: "expand-toggle-icon" })
+                    children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      ChevronUp,
+                      {
+                        className: cn(
+                          "expand-toggle-icon",
+                          classNames?.expandToggleIcon
+                        )
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      ChevronDown,
+                      {
+                        className: cn(
+                          "expand-toggle-icon",
+                          classNames?.expandToggleIcon
+                        )
+                      }
+                    )
                   }
                 )
               ] }) : (0, import_react_table2.flexRender)(cell.column.columnDef.cell, cell.getContext()),
@@ -1601,7 +1667,7 @@ function DataTableRow({
                 "div",
                 {
                   role: "presentation",
-                  className: "fill-handle",
+                  className: cn("fill-handle", classNames?.fillHandle),
                   onMouseDown: (event) => {
                     event.stopPropagation();
                     event.preventDefault();
@@ -1627,7 +1693,8 @@ function DataTableToolbar({
   selectedCount,
   selectionLabel,
   toolbar,
-  className
+  className,
+  classNames
 }) {
   const displayFiltered = filteredCount ?? totalCount;
   const hasCount = displayFiltered !== void 0 || totalCount !== void 0;
@@ -1636,9 +1703,9 @@ function DataTableToolbar({
   const selectionContent = selectionLabel?.(selectedCount) ?? null;
   const hasSelectionContent = selectionContent !== null && selectionContent !== false && selectionContent !== void 0 && typeof selectionContent !== "boolean";
   if (!hasLeftContent && !hasToolbar && !hasSelectionContent) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn("DataTableToolbarJSX", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "toolbar-left", children: [
-      hasCount && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "toolbar-count", children: displayFiltered !== void 0 && totalCount !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn("DataTableToolbarJSX", classNames?.toolbar, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn("toolbar-left", classNames?.toolbarLeft), children: [
+      hasCount && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: cn("toolbar-count", classNames?.toolbarCount), children: displayFiltered !== void 0 && totalCount !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "toolbar-count-primary", children: displayFiltered }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "toolbar-count-placeholder", children: [
           " / ",
@@ -1647,9 +1714,9 @@ function DataTableToolbar({
       ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "toolbar-count-primary", children: displayFiltered ?? totalCount }) }),
       summary
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "toolbar-right", children: [
-      hasSelectionContent && (typeof selectionContent === "string" || typeof selectionContent === "number" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "toolbar-selection", children: selectionContent }) : selectionContent),
-      hasToolbar && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "toolbar-actions", children: toolbar })
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn("toolbar-right", classNames?.toolbarRight), children: [
+      hasSelectionContent && (typeof selectionContent === "string" || typeof selectionContent === "number" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: cn("toolbar-selection", classNames?.toolbarSelection), children: selectionContent }) : selectionContent),
+      hasToolbar && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn("toolbar-actions", classNames?.toolbarActions), children: toolbar })
     ] })
   ] });
 }
@@ -1658,15 +1725,36 @@ function DataTableToolbar({
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function DefaultPending({
   loadingText,
-  className
+  className,
+  classNames
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: cn("DataTableJSX", "DataTableJSX--pending", className), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "data-table-loading-text", children: loadingText }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
+    {
+      className: cn(
+        "DataTableJSX",
+        "DataTableJSX--pending",
+        classNames?.root,
+        classNames?.pending,
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: cn("data-table-loading-text", classNames?.loadingText), children: loadingText })
+    }
+  );
 }
 function DefaultEmpty({
   emptyText,
-  columnCount
+  columnCount,
+  classNames
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { colSpan: columnCount, className: "data-table-empty-cell", children: emptyText }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "td",
+    {
+      colSpan: columnCount,
+      className: cn("data-table-empty-cell", classNames?.emptyCell),
+      children: emptyText
+    }
+  ) });
 }
 function DataTable({
   isPending = false,
@@ -1675,6 +1763,7 @@ function DataTable({
   filteredCount,
   totalCount,
   className,
+  classNames,
   slots,
   ...glideOptions
 }) {
@@ -1702,8 +1791,19 @@ function DataTable({
   const RowSlot = slots?.Row ?? DataTableRow;
   const PendingSlot = slots?.Pending ?? DefaultPending;
   const EmptySlot = slots?.Empty ?? DefaultEmpty;
+  const contextValue = (0, import_react7.useMemo)(
+    () => ({ ...rowContextValue, classNames }),
+    [rowContextValue, classNames]
+  );
   if (isPending) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PendingSlot, { loadingText, className });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      PendingSlot,
+      {
+        loadingText,
+        className,
+        classNames
+      }
+    );
   }
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
@@ -1711,6 +1811,7 @@ function DataTable({
       className: cn(
         "DataTableJSX",
         !enableCellSelection && "DataTableJSX--no-cell-selection",
+        classNames?.root,
         className
       ),
       children: [
@@ -1722,71 +1823,120 @@ function DataTable({
             summary,
             selectedCount,
             selectionLabel,
-            toolbar
+            toolbar,
+            classNames
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: scrollRef, className: "data-table-scroll", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: scrollRef, className: cn("data-table-scroll", classNames?.scroll), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
           "table",
           {
-            className: "data-table",
+            className: cn("data-table", classNames?.table),
             onDragStart: enableCellSelection ? (event) => event.preventDefault() : void 0,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("thead", { className: "data-table-head", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { className: "data-table-head-row", children: headerGroup.headers.map((header) => {
-                const align = header.column.columnDef.meta?.align ?? "center";
-                const headerClassName = header.column.columnDef.meta?.headerClassName;
-                return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                  "th",
-                  {
-                    style: { width: header.getSize() !== 150 ? header.getSize() : void 0 },
-                    className: cn(
-                      "data-table-head-cell",
-                      CELL_ALIGN_CLASS[align],
-                      headerClassName
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("thead", { className: cn("data-table-head", classNames?.head), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "tr",
+                {
+                  className: cn("data-table-head-row", classNames?.headRow),
+                  children: headerGroup.headers.map((header) => {
+                    const align = header.column.columnDef.meta?.align ?? "center";
+                    const headerClassName = header.column.columnDef.meta?.headerClassName;
+                    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                      "th",
+                      {
+                        style: { width: header.getSize() !== 150 ? header.getSize() : void 0 },
+                        className: cn(
+                          "data-table-head-cell",
+                          CELL_ALIGN_CLASS[align],
+                          classNames?.headCell,
+                          headerClassName
+                        ),
+                        children: header.isPlaceholder ? null : (0, import_react_table3.flexRender)(header.column.columnDef.header, header.getContext())
+                      },
+                      header.id
+                    );
+                  })
+                },
+                headerGroup.id
+              )) }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DataTableContextProvider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "tbody",
+                {
+                  onMouseLeave: clearHover,
+                  className: cn("data-table-body", classNames?.body),
+                  children: rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    EmptySlot,
+                    {
+                      emptyText,
+                      columnCount,
+                      classNames
+                    }
+                  ) : shouldVirtualize ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+                    paddingTop > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                      "tr",
+                      {
+                        "aria-hidden": true,
+                        className: cn(
+                          "data-table-virtual-spacer",
+                          classNames?.virtualSpacer
+                        ),
+                        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                          "td",
+                          {
+                            colSpan: columnCount,
+                            style: { height: paddingTop },
+                            className: cn(
+                              "data-table-virtual-spacer-cell",
+                              classNames?.virtualSpacerCell
+                            )
+                          }
+                        )
+                      }
                     ),
-                    children: header.isPlaceholder ? null : (0, import_react_table3.flexRender)(header.column.columnDef.header, header.getContext())
-                  },
-                  header.id
-                );
-              }) }, headerGroup.id)) }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DataTableContextProvider, { value: rowContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tbody", { onMouseLeave: clearHover, className: "data-table-body", children: rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(EmptySlot, { emptyText, columnCount }) : shouldVirtualize ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-                paddingTop > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { "aria-hidden": true, className: "data-table-virtual-spacer", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                  "td",
-                  {
-                    colSpan: columnCount,
-                    style: { height: paddingTop },
-                    className: "data-table-virtual-spacer-cell"
-                  }
-                ) }),
-                virtualRows.map((virtualRow) => {
-                  const row = rows[virtualRow.index];
-                  if (!row) return null;
-                  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    virtualRows.map((virtualRow) => {
+                      const row = rows[virtualRow.index];
+                      if (!row) return null;
+                      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                        RowSlot,
+                        {
+                          row,
+                          virtualIndex: virtualRow.index,
+                          measureElement: rowVirtualizer.measureElement,
+                          onToggleSelect: () => handleToggleSelect(row)
+                        },
+                        row.id
+                      );
+                    }),
+                    paddingBottom > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                      "tr",
+                      {
+                        "aria-hidden": true,
+                        className: cn(
+                          "data-table-virtual-spacer",
+                          classNames?.virtualSpacer
+                        ),
+                        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                          "td",
+                          {
+                            colSpan: columnCount,
+                            style: { height: paddingBottom },
+                            className: cn(
+                              "data-table-virtual-spacer-cell",
+                              classNames?.virtualSpacerCell
+                            )
+                          }
+                        )
+                      }
+                    )
+                  ] }) : rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     RowSlot,
                     {
                       row,
-                      virtualIndex: virtualRow.index,
-                      measureElement: rowVirtualizer.measureElement,
                       onToggleSelect: () => handleToggleSelect(row)
                     },
                     row.id
-                  );
-                }),
-                paddingBottom > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { "aria-hidden": true, className: "data-table-virtual-spacer", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                  "td",
-                  {
-                    colSpan: columnCount,
-                    style: { height: paddingBottom },
-                    className: "data-table-virtual-spacer-cell"
-                  }
-                ) })
-              ] }) : rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                RowSlot,
-                {
-                  row,
-                  onToggleSelect: () => handleToggleSelect(row)
-                },
-                row.id
-              )) }) })
+                  ))
+                }
+              ) })
             ]
           }
         ) })
@@ -1796,7 +1946,7 @@ function DataTable({
 }
 
 // src/components/ui/table/components/Table/Table.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/components/ui/table/components/Table/buildColumnDef.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
@@ -1866,10 +2016,10 @@ function buildColumnDef(props, sort, onSort) {
 }
 
 // src/components/ui/table/components/Table/parseTableChildren.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/components/ui/table/components/Table/tableChildTypes.ts
-var import_react7 = require("react");
+var import_react8 = require("react");
 var TABLE_HEADER_DISPLAY_NAME = "Table.Header";
 var TABLE_BODY_DISPLAY_NAME = "Table.Body";
 var TABLE_COLUMN_DISPLAY_NAME = "Table.Column";
@@ -1881,16 +2031,16 @@ function getComponentDisplayName(type) {
   return void 0;
 }
 function isTableHeaderElement(child) {
-  return (0, import_react7.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_HEADER_DISPLAY_NAME;
+  return (0, import_react8.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_HEADER_DISPLAY_NAME;
 }
 function isTableBodyElement(child) {
-  return (0, import_react7.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_BODY_DISPLAY_NAME;
+  return (0, import_react8.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_BODY_DISPLAY_NAME;
 }
 function isTableColumnElement(child) {
-  return (0, import_react7.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_COLUMN_DISPLAY_NAME;
+  return (0, import_react8.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_COLUMN_DISPLAY_NAME;
 }
 function isTablePaginationElement(child) {
-  return (0, import_react7.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_PAGINATION_DISPLAY_NAME;
+  return (0, import_react8.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_PAGINATION_DISPLAY_NAME;
 }
 
 // src/components/ui/table/components/Table/parseTableChildren.ts
@@ -1900,7 +2050,7 @@ function parseTableChildren(children) {
     body: null,
     pagination: null
   };
-  for (const child of import_react8.Children.toArray(children)) {
+  for (const child of import_react9.Children.toArray(children)) {
     if (isTableHeaderElement(child)) {
       slots.header = child;
       continue;
@@ -1918,7 +2068,7 @@ function parseTableChildren(children) {
 function extractColumnElements(header) {
   if (!header) return [];
   const { children } = header.props;
-  return import_react8.Children.toArray(children).filter(isTableColumnElement);
+  return import_react9.Children.toArray(children).filter(isTableColumnElement);
 }
 
 // src/components/ui/table/components/Table/TableBody.tsx
@@ -2025,12 +2175,12 @@ function TableRoot({
   filteredCount,
   ...dataTableProps
 }) {
-  const { header, pagination: paginationElement } = (0, import_react9.useMemo)(
+  const { header, pagination: paginationElement } = (0, import_react10.useMemo)(
     () => parseTableChildren(children),
     [children]
   );
-  const [sort, setSort] = (0, import_react9.useState)(null);
-  const handleSort = (0, import_react9.useCallback)((field) => {
+  const [sort, setSort] = (0, import_react10.useState)(null);
+  const handleSort = (0, import_react10.useCallback)((field) => {
     setSort((previous) => {
       if (previous?.field !== field) {
         return { field, direction: "asc" };
@@ -2041,7 +2191,7 @@ function TableRoot({
       return null;
     });
   }, []);
-  const columns = (0, import_react9.useMemo)(() => {
+  const columns = (0, import_react10.useMemo)(() => {
     return extractColumnElements(header).map(
       (columnElement) => buildColumnDef(columnElement.props, sort, handleSort)
     );
@@ -2050,7 +2200,7 @@ function TableRoot({
   const pageSize = paginationProps?.pageSize ?? 10;
   const page = paginationProps?.page ?? 1;
   const resolvedTotalCount = paginationProps?.totalCount ?? totalCount ?? data.length;
-  const tableData = (0, import_react9.useMemo)(() => {
+  const tableData = (0, import_react10.useMemo)(() => {
     const sortedData = sortTableData(data, sort);
     if (!paginationProps) return sortedData;
     return paginateTableData(sortedData, page, pageSize);