From 94c6e7d19ff2b39775e2ce583a82a7de26129a07 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 29 Apr 2024 11:32:53 +0300
Subject: [PATCH] Restored row toggler

---
 .../lib/datatable/style/DataTableStyle.js     |  8 ++---
 .../themes/primeone/base/datatable/index.js   | 33 +++++++++++++++++++
 2 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/components/lib/datatable/style/DataTableStyle.js b/components/lib/datatable/style/DataTableStyle.js
index 5e2193e8f..d04116e01 100644
--- a/components/lib/datatable/style/DataTableStyle.js
+++ b/components/lib/datatable/style/DataTableStyle.js
@@ -88,8 +88,8 @@ const classes = {
     filterApplyButton: 'p-datatable-filter-apply-button',
     tbody: ({ props }) => (props.frozenRow ? 'p-datatable-tbody p-datatable-frozen-tbody' : 'p-datatable-tbody'),
     rowgroupHeader: 'p-datatable-row-group-header',
-    rowGroupToggler: 'p-datatable-row-group-toggle',
-    rowGroupTogglerIcon: 'p-row-toggler-icon', //TODO: Remove
+    rowGroupToggler: 'p-datatable-row-toggle-button',
+    rowGroupTogglerIcon: 'p-datatable-row-toggle-icon',
     row: ({ instance, props, index, columnSelectionMode }) => {
         let rowStyleClass = [];
 
@@ -123,8 +123,8 @@ const classes = {
     ],
     columnTitle: 'p-column-title', //TODO: Remove due to stacked mode
     rowReorderIcon: 'p-datatable-reorderable-row-handle',
-    rowToggler: 'p-datatable-row-toggle',
-    rowTogglerIcon: 'p-row-toggler-icon', //TODO: Remove
+    rowToggler: 'p-datatable-row-toggle-button',
+    rowTogglerIcon: 'p-datatable-row-toggle-icon',
     rowEditorInitButton: 'p-datatable-row-editor-init',
     rowEditorInitIcon: 'p-row-editor-init-icon', //TODO: Remove
     rowEditorSaveButton: 'p-datatable-row-editor-save',
diff --git a/components/lib/themes/primeone/base/datatable/index.js b/components/lib/themes/primeone/base/datatable/index.js
index 512a6fb03..9dc37bf02 100644
--- a/components/lib/themes/primeone/base/datatable/index.js
+++ b/components/lib/themes/primeone/base/datatable/index.js
@@ -544,5 +544,38 @@ p-datatable-gridlines .p-datatable-tbody > tr:last-child>td {
 .p-datatable.p-datatable-lg .p-datatable-footer {
     padding: 0.9375rem 1.25rem;
 }
+
+.p-datatable-row-toggle-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    width: 1.75rem;
+    height: 1.75rem;
+    color: ${dt('datatable.row.action.color')};
+    border: 0 none;
+    background: transparent;
+    cursor: pointer;
+    border-radius: 50%;
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    outline-color: transparent;
+    user-select: none;
+}
+
+.p-datatable-row-toggle-button:enabled:hover {
+    color: ${dt('datatable.row.action.hover.color')};
+    background: ${dt('datatable.row.action.hover.background')};
+}
+
+.p-datatable-row-toggle-button:focus-visible {
+    outline: 1px solid ${dt('focus.ring.color')};
+    outline-offset: 2px;
+}
+
+.p-datatable-tbody > tr.p-datatable-row-select .p-datatable-row-toggle-button:hover{
+    background: ${dt('datatable.row.action.highlight.hover.background')};
+    color: inherit;
+}
 `
 };