From eb46928d85406ca271caed54aa8b43b0e93060e7 Mon Sep 17 00:00:00 2001
From: "ilia.brauer" <ilia.brauer@semrush.com>
Date: Tue, 18 Aug 2026 11:26:39 +0200
Subject: [PATCH] [core, data-table] use CellWrapper as simple div instead of
 Box

---
 semcore/core/src/styled/sstyled.tsx            | 18 +++++++++++++++---
 .../data-table/src/components/Body/Cell.tsx    |  2 +-
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/semcore/core/src/styled/sstyled.tsx b/semcore/core/src/styled/sstyled.tsx
index 5fc815d248..1af1ab3c4a 100644
--- a/semcore/core/src/styled/sstyled.tsx
+++ b/semcore/core/src/styled/sstyled.tsx
@@ -3,6 +3,7 @@ import type React from 'react';
 
 /** @ts-ignore */
 import { getStyles as reshadowGetStyles } from './reshadow-core';
+import { validAttr } from '../utils/propsForElement';
 
 const RESHADOW_ID = '__reshadow__';
 
@@ -68,12 +69,12 @@ function merge(s1 = {}, s2 = {}) {
   }, Object.assign({}, s1));
 }
 
-function getClassAndVars(styles: any, name: any, props: any) {
+function getClassAndVars(styles: [key: string, value: unknown][], name: any, props: any) {
   function getPropValue(key: any, props: any) {
     return props[`use:${key}`] ?? props[key];
   }
 
-  return Object.entries(styles).reduce(
+  return styles.reduce(
     (acc, [key, value]) => {
       if (key.startsWith('--')) {
         // @ts-ignore
@@ -128,7 +129,8 @@ function sstyled(styles = {}): ((ReactNode: any) => React.ReactNode) & {
   // @ts-ignore
   return {
     cn(name, props) {
-      const [classes, style] = getClassAndVars(reshadowToShadow(styles), name, props);
+      const shadowStyles = Object.entries(reshadowToShadow(styles));
+      const [classes, style] = getClassAndVars(shadowStyles, name, props);
 
       if (Object.keys(classes).length) {
         props.className = cn(props.className, classes);
@@ -138,6 +140,16 @@ function sstyled(styles = {}): ((ReactNode: any) => React.ReactNode) & {
         props.style = Object.assign(style, props.style);
       }
 
+      shadowStyles.forEach(([key]) => {
+        if (!key.startsWith('--')) {
+          const compareKey = key.split('=')[0];
+
+          if (!validAttr(compareKey)) {
+            delete props[compareKey];
+          }
+        }
+      });
+
       return props;
     },
   };
diff --git a/semcore/data-table/src/components/Body/Cell.tsx b/semcore/data-table/src/components/Body/Cell.tsx
index 735d3cee01..7c44d2847a 100644
--- a/semcore/data-table/src/components/Body/Cell.tsx
+++ b/semcore/data-table/src/components/Body/Cell.tsx
@@ -62,7 +62,7 @@ class CellRoot<Data extends DataTableData, UniqKeyType>
   };
 
   render() {
-    const SCellWrapper = Box;
+    const SCellWrapper = 'div';
     const SCell = Root;
     const {
       Children,