From 2b1400a615c17e8349d08c0183fee9104f270eb5 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Wed, 24 Jan 2024 10:50:41 +0000
Subject: [PATCH] Refactor #5141

---
 components/lib/dropdown/Dropdown.d.ts          | 6 +++++-
 components/lib/dropdown/Dropdown.vue           | 6 ++++--
 components/lib/dropdown/style/DropdownStyle.js | 2 ++
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/components/lib/dropdown/Dropdown.d.ts b/components/lib/dropdown/Dropdown.d.ts
index 52c75157e..f99debf03 100755
--- a/components/lib/dropdown/Dropdown.d.ts
+++ b/components/lib/dropdown/Dropdown.d.ts
@@ -139,6 +139,10 @@ export interface DropdownPassThroughOptions<T = any> {
      * Used to pass attributes to the item group's DOM element.
      */
     itemGroup?: DropdownPassThroughOptionType<T>;
+    /**
+     * Used to pass attributes to the item group label's DOM element.
+     */
+    itemGroupLabel?: DropdownPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the item's DOM element.
      */
@@ -431,7 +435,7 @@ export interface DropdownProps {
      */
     focusOnHover?: boolean | undefined;
     /**
-     *  Highlights automatically the first item.
+     *  Whether the selected option will be add highlight class.
      *  @defaultValue false
      */
     highlightOnSelect?: boolean | undefined;
diff --git a/components/lib/dropdown/Dropdown.vue b/components/lib/dropdown/Dropdown.vue
index 90b5d33d1..6c74e0128 100755
--- a/components/lib/dropdown/Dropdown.vue
+++ b/components/lib/dropdown/Dropdown.vue
@@ -106,7 +106,9 @@
                                 <ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="[cx('list'), styleClass]" :style="contentStyle" role="listbox" v-bind="ptm('list')">
                                     <template v-for="(option, i) of items" :key="getOptionRenderKey(option, getOptionIndex(i, getItemOptions))">
                                         <li v-if="isOptionGroup(option)" :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{ height: itemSize ? itemSize + 'px' : undefined }" :class="cx('itemGroup')" role="option" v-bind="ptm('itemGroup')">
-                                            <slot name="optiongroup" :option="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{ getOptionGroupLabel(option.optionGroup) }}</slot>
+                                            <slot name="optiongroup" :option="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">
+                                                <span :class="cx('itemGroupLabel')" v-bind="ptm('itemGroupLabel')">{{ getOptionGroupLabel(option.optionGroup) }}</span>
+                                            </slot>
                                         </li>
                                         <li
                                             v-else
@@ -132,7 +134,7 @@
                                                 <BlankIcon v-else :class="cx('blankIcon')" v-bind="ptm('blankIcon')" />
                                             </template>
                                             <slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">
-                                                <span v-bind="ptm('itemLabel')">{{ getOptionLabel(option) }}</span>
+                                                <span :class="cx('itemLabel')" v-bind="ptm('itemLabel')">{{ getOptionLabel(option) }}</span>
                                             </slot>
                                         </li>
                                     </template>
diff --git a/components/lib/dropdown/style/DropdownStyle.js b/components/lib/dropdown/style/DropdownStyle.js
index 95ee34469..60da6d0d4 100644
--- a/components/lib/dropdown/style/DropdownStyle.js
+++ b/components/lib/dropdown/style/DropdownStyle.js
@@ -136,6 +136,7 @@ const classes = {
     wrapper: 'p-dropdown-items-wrapper',
     list: 'p-dropdown-items',
     itemGroup: 'p-dropdown-item-group',
+    itemGroupLabel: 'p-dropdown-item-group-label',
     item: ({ instance, props, state, option, focusedOption }) => [
         'p-dropdown-item',
         {
@@ -144,6 +145,7 @@ const classes = {
             'p-disabled': instance.isOptionDisabled(option)
         }
     ],
+    itemLabel: 'p-dropdown-item-label',
     tickIcon: 'p-dropdown-tick-icon',
     blankIcon: 'p-dropdown-blank-icon',
     emptyMessage: 'p-dropdown-empty-message'