From d1f4ac5c8bab4163b86f69aa7a8af7e715e5c5ad Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 27 May 2024 12:24:31 +0300
Subject: [PATCH] Refactor #5785

---
 api-generator/components/column.js            |  6 +-
 api-generator/components/datatable.js         |  2 +-
 api-generator/components/fieldset.js          |  2 +-
 api-generator/components/organizationchart.js |  2 +-
 api-generator/components/panel.js             |  2 +-
 api-generator/components/tree.js              |  2 +-
 api-generator/components/treeselect.js        |  2 +-
 api-generator/components/treetable.js         |  2 +-
 components/lib/datatable/DataTable.vue        |  2 +-
 .../organizationchart/OrganizationChart.d.ts  | 11 +++
 .../OrganizationChartNode.vue                 |  3 +-
 components/lib/tree/Tree.d.ts                 | 34 ++++++++-
 components/lib/tree/TreeNode.vue              |  8 ++-
 components/lib/tree/style/TreeStyle.d.ts      |  4 --
 components/lib/tree/style/TreeStyle.js        |  1 -
 components/lib/treeselect/TreeSelect.d.ts     | 15 ++++
 components/lib/treeselect/TreeSelect.vue      |  6 +-
 doc/common/apidoc/index.json                  | 69 ++++++++++++++++---
 18 files changed, 138 insertions(+), 35 deletions(-)

diff --git a/api-generator/components/column.js b/api-generator/components/column.js
index dc142833a..7018f8ae5 100644
--- a/api-generator/components/column.js
+++ b/api-generator/components/column.js
@@ -301,11 +301,7 @@ const ColumnSlots = [
         description: 'Custom loading template.'
     },
     {
-        name: 'rowtogglericon',
-        description: 'Custom row toggler icon template.'
-    },
-    {
-        name: 'rowtogglericon',
+        name: 'rowtoggleicon',
         description: 'Custom row toggler icon template.'
     },
     {
diff --git a/api-generator/components/datatable.js b/api-generator/components/datatable.js
index 0ff00b8c0..d9396113c 100644
--- a/api-generator/components/datatable.js
+++ b/api-generator/components/datatable.js
@@ -1177,7 +1177,7 @@ const DataTableSlots = [
         description: 'Custom reorder indicator down icon template.'
     },
     {
-        name: 'rowgrouptogglericon',
+        name: 'rowgrouptoggleicon',
         description: 'Custom rowgroup toggler icon template.'
     },
     {
diff --git a/api-generator/components/fieldset.js b/api-generator/components/fieldset.js
index c14b42828..a15a03b05 100644
--- a/api-generator/components/fieldset.js
+++ b/api-generator/components/fieldset.js
@@ -62,7 +62,7 @@ const FieldsetSlots = [
         description: 'Custom legend template.'
     },
     {
-        name: 'togglericon',
+        name: 'toggleicon',
         description: 'Custom toggler icon template.'
     }
 ];
diff --git a/api-generator/components/organizationchart.js b/api-generator/components/organizationchart.js
index c96c59765..696712895 100644
--- a/api-generator/components/organizationchart.js
+++ b/api-generator/components/organizationchart.js
@@ -92,7 +92,7 @@ const OrganizationChartEvents = [
 
 const OrganizationChartSlots = [
     {
-        name: 'togglericon',
+        name: 'toggleicon',
         description: 'Custom toggler icon template.'
     }
 ];
diff --git a/api-generator/components/panel.js b/api-generator/components/panel.js
index fc6c55e0a..f49cb01b4 100644
--- a/api-generator/components/panel.js
+++ b/api-generator/components/panel.js
@@ -66,7 +66,7 @@ const PanelSlots = [
         description: "Custom content for the header's icon."
     },
     {
-        name: 'togglericon',
+        name: 'toggleicon',
         description: "Custom content for the component's toggler icon."
     },
     {
diff --git a/api-generator/components/tree.js b/api-generator/components/tree.js
index f38735277..f0cba052c 100644
--- a/api-generator/components/tree.js
+++ b/api-generator/components/tree.js
@@ -155,7 +155,7 @@ const TreeSlots = [
         description: 'Custom search icon template.'
     },
     {
-        name: 'togglericon',
+        name: 'toggleicon',
         description: 'Custom toggler icon template.'
     },
     {
diff --git a/api-generator/components/treeselect.js b/api-generator/components/treeselect.js
index 5d77a42a7..3a210341b 100644
--- a/api-generator/components/treeselect.js
+++ b/api-generator/components/treeselect.js
@@ -224,7 +224,7 @@ const TreeSelectSlots = [
         description: 'Custom content for the dropdown indicator'
     },
     {
-        name: 'itemtogglericon',
+        name: 'itemtoggleicon',
         description: 'Custom item toggler icon template.'
     },
     {
diff --git a/api-generator/components/treetable.js b/api-generator/components/treetable.js
index a85a360ba..0f1c6d42b 100644
--- a/api-generator/components/treetable.js
+++ b/api-generator/components/treetable.js
@@ -478,7 +478,7 @@ const TreeTableSlots = [
         description: 'Custom loading icon template.'
     },
     {
-        name: 'togglericon',
+        name: 'toggleicon',
         description: 'Custom toggler icon template.'
     },
     {
diff --git a/components/lib/datatable/DataTable.vue b/components/lib/datatable/DataTable.vue
index 6c3c1a37c..491a4f422 100755
--- a/components/lib/datatable/DataTable.vue
+++ b/components/lib/datatable/DataTable.vue
@@ -792,7 +792,7 @@ export default {
             this.rowTouched = false;
 
             if (focusedItem) {
-                if (event.target?.getAttribute('data-pc-section') === 'rowtogglericon' || event.target?.parentElement?.getAttribute('data-pc-section') === 'rowtogglericon') return;
+                if (event.target?.getAttribute('data-pc-section') === 'rowtoggleicon' || event.target?.parentElement?.getAttribute('data-pc-section') === 'rowtoggleicon') return;
 
                 const targetRow = event.target?.closest('tr[data-p-selectable-row="true"]');
 
diff --git a/components/lib/organizationchart/OrganizationChart.d.ts b/components/lib/organizationchart/OrganizationChart.d.ts
index c6269ebf2..80df84341 100755
--- a/components/lib/organizationchart/OrganizationChart.d.ts
+++ b/components/lib/organizationchart/OrganizationChart.d.ts
@@ -293,6 +293,7 @@ export interface OrganizationChartSlots {
      */
     [key: string]: (node: any) => VNode[];
     /**
+     * @deprecated since v4.0. Use 'toggleicon' slot instead.
      * Custom toggler icon template.
      * @param {Object} scope - togglericon slot's params.
      */
@@ -302,6 +303,16 @@ export interface OrganizationChartSlots {
          */
         expanded: boolean;
     }): VNode[];
+    /**
+     * Custom toggler icon template.
+     * @param {Object} scope - togglericon slot's params.
+     */
+    toggleicon(scope: {
+        /**
+         * Curent state of the node
+         */
+        expanded: boolean;
+    }): VNode[];
 }
 
 /**
diff --git a/components/lib/organizationchart/OrganizationChartNode.vue b/components/lib/organizationchart/OrganizationChartNode.vue
index b8fc71ee0..08d9882e3 100755
--- a/components/lib/organizationchart/OrganizationChartNode.vue
+++ b/components/lib/organizationchart/OrganizationChartNode.vue
@@ -6,7 +6,8 @@
                     <div :class="[cx('node'), node.styleClass]" @click="onNodeClick" v-bind="getPTOptions('node')">
                         <component :is="templates[node.type] || templates['default']" :node="node" />
                         <a v-if="toggleable" tabindex="0" :class="cx('nodeToggleButton')" @click="toggleNode" @keydown="onKeydown" v-bind="getPTOptions('nodeToggleButton')">
-                            <component v-if="templates.togglericon" :is="templates.togglericon" :expanded="expanded" :class="cx('nodeToggleButtonIcon')" v-bind="getPTOptions('nodeToggleButtonIcon')" />
+                            <!--TODO: togglericon deprecated since v4.0-->
+                            <component v-if="templates.toggleicon || templates.togglericon" :is="templates.toggleicon || templates.togglericon" :expanded="expanded" :class="cx('nodeToggleButtonIcon')" v-bind="getPTOptions('nodeToggleButtonIcon')" />
                             <component v-else :is="expanded ? 'ChevronDownIcon' : 'ChevronUpIcon'" :class="cx('nodeToggleButtonIcon')" v-bind="getPTOptions('nodeToggleButtonIcon')" />
                         </a>
                     </div>
diff --git a/components/lib/tree/Tree.d.ts b/components/lib/tree/Tree.d.ts
index 85fcafa93..cbbeaafb6 100755
--- a/components/lib/tree/Tree.d.ts
+++ b/components/lib/tree/Tree.d.ts
@@ -378,8 +378,9 @@ export interface TreeSlots {
         class: string;
     }): VNode[];
     /**
-     * Custom toggler icon template.
-     * @param {Object} scope - togglericon slot's params.
+     * @deprecated since v4.0. Use 'nodetoggleicon' slot instead.
+     * Custom toggle icon template.
+     * @param {Object} scope - toggleicon slot's params.
      */
     togglericon(scope: {
         /**
@@ -391,6 +392,35 @@ export interface TreeSlots {
          */
         expanded: boolean;
     }): VNode[];
+    /**
+     * @deprecated since v4.0. Use 'nodetoggleicon' slot instead.
+     * Custom node toggle icon template.
+     * @param {Object} scope - toggleicon slot's params.
+     */
+    nodetogglericon(scope: {
+        /**
+         * Tree node instance
+         */
+        node: TreeNode;
+        /**
+         * Expanded state of the node
+         */
+        expanded: boolean;
+    }): VNode[];
+    /**
+     * Custom node toggle icon template.
+     * @param {Object} scope - toggleicon slot's params.
+     */
+    nodetoggleicon(scope: {
+        /**
+         * Tree node instance
+         */
+        node: TreeNode;
+        /**
+         * Expanded state of the node
+         */
+        expanded: boolean;
+    }): VNode[];
     /**
      * Custom node icon template.
      * @param {Object} scope - nodeicon slot's params.
diff --git a/components/lib/tree/TreeNode.vue b/components/lib/tree/TreeNode.vue
index aabc290bf..ad7446e4c 100755
--- a/components/lib/tree/TreeNode.vue
+++ b/components/lib/tree/TreeNode.vue
@@ -17,11 +17,13 @@
         <div :class="cx('nodeContent')" @click="onClick" @touchend="onTouchEnd" :style="node.style" v-bind="getPTOptions('nodeContent')" :data-p-selected="checkboxMode ? checked : selected" :data-p-selectable="selectable">
             <button v-ripple type="button" :class="cx('nodeToggleButton')" @click="toggle" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('nodeToggleButton')">
                 <template v-if="node.loading && loadingMode === 'icon'">
-                    <component v-if="templates['nodetogglericon']" :is="templates['nodetogglericon']" :class="cx('nodetogglericon')" />
-                    <SpinnerIcon v-else spin :class="cx('nodetogglericon')" v-bind="ptm('nodetogglericon')" />
+                    <!-- TODO: nodetogglericon deprecated since v4.0-->
+                    <component v-if="templates['nodetoggleicon'] || templates['nodetogglericon']" :is="templates['nodetoggleicon'] || templates['nodetogglericon']" :class="cx('nodeToggleIcon')" />
+                    <SpinnerIcon v-else spin :class="cx('nodetogglericon')" v-bind="ptm('nodeToggleIcon')" />
                 </template>
                 <template v-else>
-                    <component v-if="templates['togglericon']" :is="templates['togglericon']" :node="node" :expanded="expanded" :class="cx('nodeToggleIcon')" />
+                    <!-- TODO: togglericon deprecated since v4.0-->
+                    <component v-if="templates['nodetoggleicon'] || templates['togglericon']" :is="templates['nodetoggleicon'] || templates['togglericon']" :node="node" :expanded="expanded" :class="cx('nodeToggleIcon')" />
                     <component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" :class="cx('nodeToggleIcon')" v-bind="getPTOptions('nodeToggleIcon')" />
                     <component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" :class="cx('nodeToggleIcon')" v-bind="getPTOptions('nodeToggleIcon')" />
                 </template>
diff --git a/components/lib/tree/style/TreeStyle.d.ts b/components/lib/tree/style/TreeStyle.d.ts
index 7a35f4f7e..a56d2f8b0 100644
--- a/components/lib/tree/style/TreeStyle.d.ts
+++ b/components/lib/tree/style/TreeStyle.d.ts
@@ -50,10 +50,6 @@ export enum TreeClasses {
      * Class name of the node toggle icon element
      */
     nodeToggleIcon = 'p-tree-node-toggle-icon',
-    /**
-     * Class name of the node toggler icon element
-     */
-    nodeTogglerIcon = 'p-tree-node-toggler-icon',
     /**
      * Class name of the node checkbox element
      */
diff --git a/components/lib/tree/style/TreeStyle.js b/components/lib/tree/style/TreeStyle.js
index 4790dc0d1..3c6e712f4 100644
--- a/components/lib/tree/style/TreeStyle.js
+++ b/components/lib/tree/style/TreeStyle.js
@@ -176,7 +176,6 @@ const classes = {
     ],
     nodeToggleButton: 'p-tree-node-toggle-button',
     nodeToggleIcon: 'p-tree-node-toggle-icon',
-    nodeTogglerIcon: 'p-tree-node-toggler-icon', //TODO: discuss
     nodeCheckbox: 'p-tree-node-checkbox',
     nodeIcon: 'p-tree-node-icon',
     nodeLabel: 'p-tree-node-label',
diff --git a/components/lib/treeselect/TreeSelect.d.ts b/components/lib/treeselect/TreeSelect.d.ts
index 7e76b9323..4f71a7ee6 100644
--- a/components/lib/treeselect/TreeSelect.d.ts
+++ b/components/lib/treeselect/TreeSelect.d.ts
@@ -346,6 +346,7 @@ export interface TreeSelectSlots {
         class: string;
     }): VNode[];
     /**
+     * @deprecated since v4.0. Use 'itemtoggleicon' slot instead.
      * Custom item toggler icon template.
      * @param {Object} scope - item toggler icon slot's params.
      */
@@ -359,6 +360,20 @@ export interface TreeSelectSlots {
          */
         expanded: TreeNode[];
     }): VNode[];
+    /**
+     * Custom item toggle icon template.
+     * @param {Object} scope - item toggle icon slot's params.
+     */
+    itemtoggleicon(scope: {
+        /**
+         * Node instance
+         */
+        node: TreeNode | any;
+        /**
+         * Expanded state of the node
+         */
+        expanded: TreeNode[];
+    }): VNode[];
     /**
      * Custom item checkbox icon template.
      * @param {Object} scope - item checkbox icon slot's params.
diff --git a/components/lib/treeselect/TreeSelect.vue b/components/lib/treeselect/TreeSelect.vue
index 726794472..d178adb86 100644
--- a/components/lib/treeselect/TreeSelect.vue
+++ b/components/lib/treeselect/TreeSelect.vue
@@ -77,7 +77,11 @@
                             :unstyled="unstyled"
                             :pt="ptm('pcTree')"
                         >
-                            <template v-if="$slots.itemtogglericon" #togglericon="iconProps">
+                            <template v-if="$slots.itemtoggleicon" #toggleicon="iconProps">
+                                <slot name="itemtoggleicon" :node="iconProps.node" :expanded="iconProps.expanded" :class="iconProps.class" />
+                            </template>
+                            <!--TODO: itemtogglericon deprecated since v4.0-->
+                            <template v-else-if="$slots.itemtogglericon" #togglericon="iconProps">
                                 <slot name="itemtogglericon" :node="iconProps.node" :expanded="iconProps.expanded" :class="iconProps.class" />
                             </template>
                             <template v-if="$slots.itemcheckboxicon" #checkboxicon="iconProps">
diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index d586b2f14..fe97803c4 100644
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
@@ -51794,6 +51794,20 @@
                                 }
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "",
+                            "deprecated": "since v4.0. Use 'toggleicon' slot instead.\nCustom toggler icon template."
+                        },
+                        {
+                            "name": "toggleicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">expanded</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Curent state of the node</span>\n }",
+                                    "description": "togglericon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom toggler icon template."
                         }
                     ]
@@ -102515,11 +102529,39 @@
                                     "name": "scope",
                                     "optional": false,
                                     "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">node</span>: <span class=\"doc-option-parameter-type\">TreeNode</span>, <span class=\"doc-option-parameter-type\">// Tree node instance</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">expanded</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Expanded state of the node</span>\n }",
-                                    "description": "togglericon slot's params."
+                                    "description": "toggleicon slot's params."
                                 }
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
-                            "description": "Custom toggler icon template."
+                            "description": "",
+                            "deprecated": "since v4.0. Use 'nodetoggleicon' slot instead.\nCustom toggle icon template."
+                        },
+                        {
+                            "name": "nodetogglericon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">node</span>: <span class=\"doc-option-parameter-type\">TreeNode</span>, <span class=\"doc-option-parameter-type\">// Tree node instance</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">expanded</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Expanded state of the node</span>\n }",
+                                    "description": "toggleicon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "",
+                            "deprecated": "since v4.0. Use 'nodetoggleicon' slot instead.\nCustom node toggle icon template."
+                        },
+                        {
+                            "name": "nodetoggleicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">node</span>: <span class=\"doc-option-parameter-type\">TreeNode</span>, <span class=\"doc-option-parameter-type\">// Tree node instance</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">expanded</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Expanded state of the node</span>\n }",
+                                    "description": "toggleicon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom node toggle icon template."
                         },
                         {
                             "name": "nodeicon",
@@ -102855,13 +102897,6 @@
                             "value": "\"p-tree-node-toggle-icon\"",
                             "description": "Class name of the node toggle icon element"
                         },
-                        {
-                            "name": "nodeTogglerIcon",
-                            "optional": false,
-                            "readonly": false,
-                            "value": "\"p-tree-node-toggler-icon\"",
-                            "description": "Class name of the node toggler icon element"
-                        },
                         {
                             "name": "nodeCheckbox",
                             "optional": false,
@@ -103585,7 +103620,21 @@
                                 }
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
-                            "description": "Custom item toggler icon template."
+                            "description": "",
+                            "deprecated": "since v4.0. Use 'itemtoggleicon' slot instead.\nCustom item toggler icon template."
+                        },
+                        {
+                            "name": "itemtoggleicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">node</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Node instance</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">expanded</span>: <span class=\"doc-option-parameter-type\">TreeNode</span>, <span class=\"doc-option-parameter-type\">// Expanded state of the node</span>\n }",
+                                    "description": "item toggle icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom item toggle icon template."
                         },
                         {
                             "name": "itemcheckboxicon",