@redacto.io/consent-sdk-react 5.3.0 → 6.0.0

package/src/RedactoPrivacyCenter/styles/injectStyles.ts

@@ -100,6 +100,8 @@ export const injectPCStyles = () => {
         --pc-z-popover: 1060;
         --pc-z-tooltip: 1070;
         --pc-icon-filter: 0;
+        --pc-consent-toolbar-control-height: 2rem;
+        --pc-navbar-actions-control-height: var(--pc-consent-toolbar-control-height);
         --pc-sidebar-mobile-width: 280px;
         --pc-sidebar-collapsed-width: 80px;
         --pc-sidebar-expanded-width: 300px;
@@ -135,6 +137,8 @@ export const injectPCStyles = () => {
         --pc-border-color-focus: #60a5fa;
         --pc-sidebar-shadow: 14px 0 36px rgba(2, 6, 23, 0.42), 1px 0 0 rgba(148, 163, 184, 0.08);
         --pc-icon-filter: 1;
+        --pc-consent-toolbar-control-height: 2rem;
+        --pc-navbar-actions-control-height: var(--pc-consent-toolbar-control-height);
       }
     `;
     document.head.appendChild(variablesStyle);
@@ -970,6 +974,516 @@ export const injectPCStyles = () => {
       }
     }
 
+    .pc-navbar-actions {
+      align-items: center !important;
+    }
+    .pc-navbar-language-select {
+      width: auto !important;
+      min-width: 120px !important;
+      max-width: min(65vw, 320px) !important;
+    }
+    .pc-navbar-language-select .pc-select {
+      box-sizing: border-box !important;
+      height: var(--pc-navbar-actions-control-height, var(--pc-consent-toolbar-control-height, 2rem)) !important;
+      min-height: var(--pc-navbar-actions-control-height, var(--pc-consent-toolbar-control-height, 2rem)) !important;
+      max-height: var(--pc-navbar-actions-control-height, var(--pc-consent-toolbar-control-height, 2rem)) !important;
+      padding: 0 0.625rem !important;
+      border-color: var(--pc-border-color) !important;
+      border-radius: 0.5rem !important;
+      background-color: var(--pc-bg-primary) !important;
+      box-shadow: none !important;
+      font-size: 0.8125rem !important;
+      line-height: 1 !important;
+    }
+    .pc-navbar-language-select .pc-select > span:nth-child(2) {
+      line-height: 1.25 !important;
+    }
+    .pc-navbar-language-select .pc-select svg {
+      width: 12px;
+      height: 12px;
+    }
+    .pc-navbar-icon-btn {
+      box-sizing: border-box !important;
+      width: var(--pc-navbar-actions-control-height, var(--pc-consent-toolbar-control-height, 2rem)) !important;
+      height: var(--pc-navbar-actions-control-height, var(--pc-consent-toolbar-control-height, 2rem)) !important;
+      min-width: var(--pc-navbar-actions-control-height, var(--pc-consent-toolbar-control-height, 2rem)) !important;
+      min-height: var(--pc-navbar-actions-control-height, var(--pc-consent-toolbar-control-height, 2rem)) !important;
+      border: 1px solid var(--pc-border-color) !important;
+      border-radius: 0.5rem !important;
+      background-color: var(--pc-bg-primary) !important;
+      color: var(--pc-text-primary) !important;
+      padding: 0 !important;
+    }
+    .pc-navbar-icon-btn:hover:not(:disabled) {
+      background-color: var(--pc-bg-hover) !important;
+      border-color: var(--pc-border-color-hover) !important;
+    }
+
+    /* Manage Consent specific shell + table polish */
+    .pc-consent-manager-surface {
+      width: 100%;
+      margin: 0;
+      padding-top: 0.25rem;
+    }
+    .pc-consent-shell-card .pc-consent-tabs-row {
+      align-items: center !important;
+      justify-content: space-between !important;
+      padding-top: 0.125rem !important;
+      padding-bottom: 0.375rem !important;
+    }
+    .pc-consent-shell-card .pc-consent-tabs-left {
+      display: flex !important;
+      align-items: center !important;
+      min-width: 0 !important;
+    }
+    .pc-consent-shell-card .pc-consent-view-toggle {
+      margin-left: auto !important;
+      display: flex !important;
+      align-items: center !important;
+      gap: 0.625rem !important;
+      padding-right: 0.5rem !important;
+      flex-shrink: 0 !important;
+      margin-bottom: 0.0625rem !important;
+    }
+    .pc-consent-shell-card .pc-consent-view-toggle-label {
+      white-space: nowrap !important;
+      font-size: 0.75rem !important;
+      color: var(--pc-text-secondary) !important;
+    }
+    .pc-consent-shell-card .pc-consent-view-toggle-group {
+      box-shadow: none !important;
+      border: 1px solid var(--pc-border-color) !important;
+      background-color: var(--pc-bg-secondary) !important;
+    }
+    .pc-consent-shell-card .pc-consent-view-toggle-btn {
+      color: var(--pc-text-secondary);
+    }
+    .pc-consent-shell-card .pc-consent-view-toggle-btn:hover:not(.is-active) {
+      background-color: var(--pc-bg-hover) !important;
+      color: var(--pc-text-primary) !important;
+    }
+    .pc-consent-shell-card .pc-consent-view-toggle-btn.is-active {
+      background-color: var(--pc-primary) !important;
+      color: var(--pc-text-inverse) !important;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important;
+    }
+    .pc-consent-shell-card .pc-filters-responsive {
+      gap: 0.75rem !important;
+    }
+    @media (min-width: 768px) {
+      .pc-consent-shell-card .pc-filters-responsive {
+        align-items: center !important;
+      }
+    }
+    .pc-consent-shell-card .pc-search-responsive {
+      max-width: none !important;
+    }
+    .pc-consent-shell-card .pc-search-responsive > div {
+      width: 100% !important;
+    }
+    .pc-consent-shell-card .pc-search-responsive [style*="border"] {
+      border-color: var(--pc-border-color) !important;
+      box-shadow: none !important;
+    }
+    .pc-consent-shell-card .pc-search-responsive .pc-input-affix {
+      box-sizing: border-box !important;
+      height: var(--pc-consent-toolbar-control-height, 2rem) !important;
+      min-height: var(--pc-consent-toolbar-control-height, 2rem) !important;
+      max-height: var(--pc-consent-toolbar-control-height, 2rem) !important;
+      align-items: stretch !important;
+    }
+    .pc-consent-shell-card .pc-search-responsive .pc-input-affix > span:first-of-type,
+    .pc-consent-shell-card .pc-search-responsive .pc-input-affix > button {
+      align-self: center !important;
+    }
+    .pc-consent-shell-card .pc-search-responsive .pc-input {
+      box-sizing: border-box !important;
+      height: 100% !important;
+      min-height: 0 !important;
+      max-height: none !important;
+      padding: 0.25rem 0.5rem !important;
+      line-height: 1.25 !important;
+      font-size: 0.75rem !important;
+    }
+    .pc-consent-shell-card .pc-filter-select .pc-select {
+      box-sizing: border-box !important;
+      height: var(--pc-consent-toolbar-control-height, 2rem) !important;
+      min-height: var(--pc-consent-toolbar-control-height, 2rem) !important;
+      max-height: var(--pc-consent-toolbar-control-height, 2rem) !important;
+      padding: 0.25rem 0.5rem !important;
+      line-height: 1 !important;
+      font-size: 0.75rem !important;
+    }
+    .pc-consent-shell-card .pc-filter-select .pc-select > span:nth-child(2) {
+      line-height: 1.25 !important;
+    }
+    .pc-consent-shell-card .pc-filters-summary {
+      font-size: 0.6875rem !important;
+      color: var(--pc-text-secondary) !important;
+    }
+    .pc-consent-desktop-view {
+      display: block;
+    }
+    .pc-consent-mobile-view {
+      display: none;
+    }
+    .pc-consent-mobile-list {
+      display: flex;
+      flex-direction: column;
+      gap: 0.625rem;
+    }
+    .pc-consent-mobile-card {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      border: 1px solid var(--pc-border-color);
+      border-radius: var(--pc-border-radius-lg);
+      background-color: var(--pc-bg-primary);
+      padding: 0.625rem 0.75rem;
+      box-shadow: none;
+    }
+    .pc-consent-mobile-card-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 0.5rem;
+      flex-wrap: wrap;
+    }
+    .pc-consent-mobile-product-head {
+      display: flex;
+      align-items: flex-start;
+      gap: 0.5rem;
+      min-width: 0;
+      flex: 1 1 180px;
+    }
+    .pc-consent-mobile-avatar {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      border-radius: 0.4375rem;
+      font-size: 0.6875rem;
+      font-weight: 700;
+      line-height: 1;
+      flex-shrink: 0;
+    }
+    .pc-consent-mobile-subtle-text {
+      margin: 0 !important;
+      margin-top: 0.125rem !important;
+      font-size: 0.6875rem !important;
+      line-height: 1.2 !important;
+      color: var(--pc-text-secondary) !important;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      word-break: break-word;
+    }
+    .pc-consent-mobile-chip-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.375rem;
+    }
+    .pc-consent-mobile-status-chip {
+      font-size: 0.65625rem !important;
+      font-weight: 600 !important;
+      padding: 0.125rem 0.4375rem !important;
+    }
+    .pc-consent-mobile-activity-row {
+      display: flex;
+      flex-direction: column;
+      gap: 0.125rem;
+      min-width: 0;
+    }
+    .pc-consent-mobile-meta-grid {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 0.5rem 0.625rem;
+    }
+    .pc-consent-mobile-meta-label {
+      margin: 0 !important;
+      margin-bottom: 0.1875rem !important;
+      font-size: 0.625rem !important;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--pc-text-tertiary) !important;
+    }
+    .pc-consent-mobile-action-cell {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: flex-end;
+    }
+    .pc-consent-mobile-expand-btn {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border: 1px solid var(--pc-border-color);
+      border-radius: var(--pc-border-radius-md);
+      background-color: var(--pc-bg-secondary);
+      color: var(--pc-text-primary);
+      font-size: 0.75rem;
+      font-weight: 600;
+      padding: 0.375rem 0.5rem;
+      cursor: pointer;
+    }
+    .pc-consent-mobile-purpose-list {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      padding-top: 0.125rem;
+    }
+    .pc-consent-mobile-purpose-item {
+      border: 1px solid var(--pc-border-color);
+      border-radius: var(--pc-border-radius-md);
+      background-color: var(--pc-bg-secondary);
+      padding: 0.5rem;
+    }
+    .pc-consent-mobile-purpose-head {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 0.5rem;
+      margin-bottom: 0.375rem;
+    }
+    .pc-consent-mobile-empty {
+      border: 1px solid var(--pc-border-color);
+      border-radius: var(--pc-border-radius-lg);
+      background-color: var(--pc-bg-primary);
+      padding: 0.75rem;
+    }
+    .pc-consent-shell-card .pc-export-button-responsive {
+      display: inline-flex !important;
+      align-items: center !important;
+    }
+    .pc-consent-shell-card .pc-export-button-responsive button {
+      box-sizing: border-box !important;
+      height: var(--pc-consent-toolbar-control-height, 2rem) !important;
+      min-height: var(--pc-consent-toolbar-control-height, 2rem) !important;
+      max-height: var(--pc-consent-toolbar-control-height, 2rem) !important;
+      padding: 0 0.625rem !important;
+      line-height: 1 !important;
+      border-color: var(--pc-border-color) !important;
+      box-shadow: none !important;
+      font-size: 0.75rem !important;
+    }
+    .pc-consent-shell-card .pc-filters-row-responsive {
+      gap: 0.5rem !important;
+    }
+    @media (min-width: 768px) {
+      .pc-consent-shell-card .pc-search-responsive {
+        width: 310px !important;
+        min-width: 310px !important;
+        flex: 0 0 310px !important;
+      }
+      .pc-consent-shell-card .pc-filters-row-responsive {
+        align-items: center !important;
+        justify-content: flex-start !important;
+        margin-left: 0 !important;
+        flex: 1 1 auto !important;
+        width: auto !important;
+      }
+      .pc-consent-shell-card .pc-filter-select {
+        width: auto !important;
+        min-width: 0 !important;
+        flex: 0 0 auto !important;
+      }
+      .pc-consent-shell-card .pc-filter-select:first-child {
+        width: 128px !important;
+        min-width: 128px !important;
+      }
+      .pc-consent-shell-card .pc-filter-select:nth-child(2) {
+        width: 136px !important;
+        min-width: 136px !important;
+      }
+      .pc-consent-shell-card .pc-filters-summary {
+        margin-left: auto !important;
+      }
+    }
+    @media (max-width: 767px) {
+      .pc-consent-desktop-view {
+        display: none;
+      }
+      .pc-consent-mobile-view {
+        display: block;
+      }
+      .pc-consent-shell-card .pc-consent-tabs-row {
+        flex-wrap: wrap !important;
+        padding-bottom: 0.375rem !important;
+      }
+      .pc-consent-shell-card .pc-consent-view-toggle-label {
+        display: none !important;
+      }
+      .pc-consent-shell-card .pc-consent-view-toggle {
+        width: 100% !important;
+        justify-content: flex-end !important;
+        padding-right: 0 !important;
+        margin-bottom: 0 !important;
+      }
+      .pc-consent-shell-card .pc-filters-row-responsive {
+        width: 100% !important;
+      }
+      .pc-consent-shell-card .pc-filters-summary {
+        align-self: flex-start !important;
+      }
+      .pc-consent-pagination-wrap {
+        margin-top: 0.5rem;
+      }
+    }
+    @media (min-width: 768px) {
+      .pc-consent-desktop-view {
+        display: block;
+      }
+      .pc-consent-mobile-view {
+        display: none;
+      }
+    }
+    @media (max-width: 420px) {
+      .pc-consent-mobile-meta-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .pc-consent-table-container {
+      border: 1px solid var(--pc-border-color) !important;
+      border-bottom: none !important;
+      border-radius: var(--pc-border-radius-lg) var(--pc-border-radius-lg) 0 0 !important;
+      box-shadow: none !important;
+      overflow: hidden !important;
+    }
+    .pc-consent-table {
+      table-layout: fixed;
+      width: 100%;
+    }
+    .pc-consent-table th:first-child,
+    .pc-consent-table td:first-child {
+      width: 32px !important;
+      min-width: 32px !important;
+      max-width: 32px !important;
+    }
+    .pc-consent-table th:nth-child(2),
+    .pc-consent-table td:nth-child(2) {
+      width: 38% !important;
+      min-width: 260px !important;
+    }
+    .pc-consent-table th:nth-child(3),
+    .pc-consent-table td:nth-child(3) {
+      width: 15% !important;
+      min-width: 120px !important;
+    }
+    .pc-consent-table th:nth-child(4),
+    .pc-consent-table td:nth-child(4) {
+      width: 20% !important;
+      min-width: 160px !important;
+    }
+    .pc-consent-table th:last-child,
+    .pc-consent-table td:last-child {
+      width: 27% !important;
+      min-width: 180px !important;
+    }
+    .pc-consent-table-purpose th:first-child,
+    .pc-consent-table-purpose td:first-child {
+      width: 28% !important;
+      min-width: 220px !important;
+      max-width: none !important;
+      text-align: left !important;
+      padding-left: 0.875rem !important;
+      padding-right: 0.875rem !important;
+    }
+    .pc-consent-table-purpose th:nth-child(2),
+    .pc-consent-table-purpose td:nth-child(2) {
+      width: 18% !important;
+      min-width: 140px !important;
+    }
+    .pc-consent-table-purpose th:nth-child(3),
+    .pc-consent-table-purpose td:nth-child(3) {
+      width: 14% !important;
+      min-width: 110px !important;
+    }
+    .pc-consent-table-purpose th:nth-child(4),
+    .pc-consent-table-purpose td:nth-child(4) {
+      width: 16% !important;
+      min-width: 140px !important;
+    }
+    .pc-consent-table-purpose th:nth-child(5),
+    .pc-consent-table-purpose td:nth-child(5) {
+      width: 14% !important;
+      min-width: 120px !important;
+    }
+    .pc-consent-table-purpose th:nth-child(6),
+    .pc-consent-table-purpose td:nth-child(6) {
+      width: 10% !important;
+      min-width: 90px !important;
+    }
+    .pc-consent-table-purpose th:nth-child(7),
+    .pc-consent-table-purpose td:nth-child(7) {
+      width: 10% !important;
+      min-width: 90px !important;
+      text-align: right !important;
+    }
+    .pc-consent-table-purpose .pc-consent-table-head-cell:first-child,
+    .pc-consent-table-purpose .pc-consent-table-row td:first-child {
+      text-align: left !important;
+      padding-left: 0.875rem !important;
+      padding-right: 0.875rem !important;
+    }
+    .pc-consent-table-head-cell {
+      font-size: 0.65rem !important;
+      letter-spacing: 0.06em !important;
+      text-transform: uppercase !important;
+      color: var(--pc-text-primary) !important;
+      font-weight: 600 !important;
+      padding-top: 0.625rem !important;
+      padding-bottom: 0.625rem !important;
+      background-color: var(--pc-bg-secondary) !important;
+    }
+    .pc-consent-table-row td {
+      padding-top: 0.5rem !important;
+      padding-bottom: 0.5rem !important;
+      vertical-align: middle !important;
+      -webkit-user-select: none !important;
+      user-select: none !important;
+    }
+    .pc-consent-table-head-cell:first-child,
+    .pc-consent-table-row td:first-child {
+      text-align: center !important;
+      padding-left: 0.375rem !important;
+      padding-right: 0.375rem !important;
+    }
+    .pc-consent-table-expanded-row:hover {
+      background-color: transparent !important;
+    }
+    .pc-consent-table-expanded-row td {
+      border-top: none !important;
+    }
+    .pc-consent-table-expanded-cell {
+      padding: 0 !important;
+      background-color: transparent !important;
+    }
+    /* Keep parent + expanded child hover in sync */
+    .pc-consent-table-row:hover + .pc-consent-table-expanded-row .pc-consent-expanded-surface,
+    .pc-consent-table-row:hover + .pc-consent-table-expanded-row .pc-consent-expanded-card,
+    .pc-consent-table-row:hover + .pc-consent-table-expanded-row .pc-consent-expanded-card th,
+    .pc-consent-table-row:hover + .pc-consent-table-expanded-row .pc-consent-expanded-card td,
+    .pc-consent-table-expanded-row:hover .pc-consent-expanded-surface,
+    .pc-consent-table-expanded-row:hover .pc-consent-expanded-card,
+    .pc-consent-table-expanded-row:hover .pc-consent-expanded-card th,
+    .pc-consent-table-expanded-row:hover .pc-consent-expanded-card td {
+      background-color: var(--pc-bg-hover) !important;
+    }
+
+    .pc-consent-pagination-wrap {
+      border-top: none !important;
+      border-left: 1px solid var(--pc-border-color);
+      border-right: 1px solid var(--pc-border-color);
+      border-bottom: 1px solid var(--pc-border-color);
+      border-radius: 0 0 var(--pc-border-radius-lg) var(--pc-border-radius-lg);
+      padding: 0.125rem 0.75rem 0.375rem;
+      background-color: var(--pc-bg-primary);
+    }
+
     /* ─── Case Details Page ───────────────────────────────────────────────── */
 
     .pc-case-page {
@@ -1885,19 +2399,27 @@ export const injectPCStyles = () => {
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 32px;
-      height: 32px;
-      border: none;
-      background: none;
+      box-sizing: border-box;
+      width: var(--pc-navbar-actions-control-height, var(--pc-consent-toolbar-control-height, 2rem));
+      height: var(--pc-navbar-actions-control-height, var(--pc-consent-toolbar-control-height, 2rem));
+      min-width: var(--pc-navbar-actions-control-height, var(--pc-consent-toolbar-control-height, 2rem));
+      min-height: var(--pc-navbar-actions-control-height, var(--pc-consent-toolbar-control-height, 2rem));
+      border: 1px solid var(--pc-border-color);
+      background: var(--pc-bg-primary);
       cursor: pointer;
       border-radius: 0.5rem;
       color: var(--pc-text-primary);
-      transition: color 0.3s ease, background-color 0.15s ease;
+      transition: color 0.3s ease, background-color 0.15s ease, border-color 0.15s ease;
       padding: 0;
     }
+    .pc-notification-bell-btn svg {
+      width: 14px;
+      height: 14px;
+    }
 
     .pc-notification-bell-btn:hover {
       background-color: var(--pc-bg-hover);
+      border-color: var(--pc-border-color-hover);
     }
 
     .pc-notification-filter-tab {

package/src/RedactoPrivacyCenter/styles/variables.css

@@ -89,6 +89,11 @@
   
   /* Icon filters for dark theme */
   --pc-icon-filter: 0;
+
+  /* Manage Consent toolbar: search, filters, export */
+  --pc-consent-toolbar-control-height: 2rem;
+  /* Header: language, notifications, theme (same pixel row as compact controls) */
+  --pc-navbar-actions-control-height: var(--pc-consent-toolbar-control-height);
 }
 
 [data-theme="dark"] {

package/src/RedactoPrivacyCenter/table/AdvancedTable.tsx

@@ -67,6 +67,7 @@ export default function AdvancedTable<TData extends Record<string, any>>({
   expandedComponent,
 }: AdvancedTableProps<TData>) {
   const { t } = useTranslation();
+  const [hoveredRowId, setHoveredRowId] = React.useState<string | null>(null);
   if (!table) return null;
 
   return (
@@ -111,8 +112,7 @@ export default function AdvancedTable<TData extends Record<string, any>>({
               const onRowClick = meta.onRowClick;
               const handleRowClick = onRowClick
                 ? (e: React.MouseEvent) => {
-                  e.preventDefault();
-                  onRowClick(row.original);
+                  onRowClick(row.original, row);
                 }
                 : undefined;
 
@@ -124,8 +124,23 @@ export default function AdvancedTable<TData extends Record<string, any>>({
                 <React.Fragment key={row.id}>
                   <PCTable.Row
                     className={classNames?.rowClassName}
-                    style={onRowClick ? { cursor: 'pointer' } : {}}
+                    style={{
+                      ...(onRowClick ? { cursor: 'pointer' } : {}),
+                      ...(row.getIsExpanded() ? { borderBottom: 'none' } : {}),
+                      ...(hoveredRowId === row.id
+                        ? { backgroundColor: getVar('--pc-bg-hover') }
+                        : {}),
+                    }}
                     onClick={handleRowClick}
+                    onMouseEnter={() => setHoveredRowId(row.id)}
+                    onMouseLeave={(e) => {
+                      const nextSibling = e.currentTarget.nextElementSibling;
+                      const relatedTarget = e.relatedTarget as Node | null;
+                      if (nextSibling && relatedTarget && nextSibling.contains(relatedTarget)) {
+                        return;
+                      }
+                      setHoveredRowId((prev) => (prev === row.id ? null : prev));
+                    }}
                   >
                     {row.getVisibleCells().map((cell) => (
                       <TableCellBasic
@@ -141,12 +156,16 @@ export default function AdvancedTable<TData extends Record<string, any>>({
                     <PCTable.Row
                       className={classNames?.expandedRowClassName}
                       style={{
-                        overflow: 'hidden',
-                        transition: 'all 0.3s ease-in-out',
-                        maxHeight: row.getIsExpanded() ? '2000px' : '0',
-                        opacity: row.getIsExpanded() ? 1 : 0,
-                        height: row.getIsExpanded() ? 'auto' : '0',
-                        minHeight: row.getIsExpanded() ? 'auto' : '0',
+                        pointerEvents: row.getIsExpanded() ? 'auto' : 'none',
+                      }}
+                      onMouseEnter={() => setHoveredRowId(row.id)}
+                      onMouseLeave={(e) => {
+                        const previousSibling = e.currentTarget.previousElementSibling;
+                        const relatedTarget = e.relatedTarget as Node | null;
+                        if (previousSibling && relatedTarget && previousSibling.contains(relatedTarget)) {
+                          return;
+                        }
+                        setHoveredRowId((prev) => (prev === row.id ? null : prev));
                       }}
                     >
                       <PCTable.Cell
@@ -154,18 +173,19 @@ export default function AdvancedTable<TData extends Record<string, any>>({
                         className={classNames?.expandedCellClassName}
                         style={{
                           padding: row.getIsExpanded() ? undefined : '0',
-                          transition: 'all 0.3s ease-in-out',
-                          height: row.getIsExpanded() ? 'auto' : '0',
-                          paddingTop: row.getIsExpanded() ? undefined : '0',
-                          paddingBottom: row.getIsExpanded() ? undefined : '0',
+                          height: row.getIsExpanded() ? undefined : '0',
+                          border: 'none',
                         }}
                       >
                         <div
                           style={{
-                            transition: 'all 0.3s ease-in-out',
-                            transform: row.getIsExpanded() ? 'translateY(0)' : 'translateY(-8px)',
+                            overflow: 'hidden',
+                            maxHeight: row.getIsExpanded() ? '1200px' : '0',
                             opacity: row.getIsExpanded() ? 1 : 0,
-                            height: row.getIsExpanded() ? 'auto' : '0',
+                            transform: row.getIsExpanded() ? 'translateY(0)' : 'translateY(-6px)',
+                            transition:
+                              'max-height 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease, transform 220ms ease',
+                            willChange: 'max-height, opacity, transform',
                           }}
                         >
                           {rowExpandedComponent(row)}