From 12e98446f6f8d6261b4a528a06ca3749be036ef2 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sun, 7 Apr 2024 12:39:33 +0300
Subject: [PATCH] Refactored Dropdown styles

---
 .../lib/dropdown/style/DropdownStyle.js       | 47 +++++++------
 .../themes/primeone/base/dropdown/index.js    | 69 +++++++++----------
 2 files changed, 57 insertions(+), 59 deletions(-)

diff --git a/components/lib/dropdown/style/DropdownStyle.js b/components/lib/dropdown/style/DropdownStyle.js
index ff21c4281..3b62ce22d 100644
--- a/components/lib/dropdown/style/DropdownStyle.js
+++ b/components/lib/dropdown/style/DropdownStyle.js
@@ -2,55 +2,54 @@ import BaseStyle from 'primevue/base/style';
 
 const classes = {
     root: ({ instance, props, state }) => [
-        'p-dropdown p-component p-inputwrapper',
+        'p-select p-component p-inputwrapper',
         {
             'p-disabled': props.disabled,
             'p-invalid': props.invalid,
             'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled',
-            'p-dropdown-clearable': props.showClear,
             'p-focus': state.focused,
             'p-inputwrapper-filled': instance.hasSelectedOption,
             'p-inputwrapper-focus': state.focused || state.overlayVisible,
-            'p-overlay-open': state.overlayVisible
+            'p-select-open': state.overlayVisible
         }
     ],
     input: ({ instance, props }) => [
-        'p-dropdown-label',
+        'p-select-label',
         {
             'p-placeholder': !props.editable && instance.label === props.placeholder,
-            'p-dropdown-label-empty': !props.editable && !instance.$slots['value'] && (instance.label === 'p-emptylabel' || instance.label.length === 0)
+            'p-select-label-empty': !props.editable && !instance.$slots['value'] && (instance.label === 'p-emptylabel' || instance.label.length === 0)
         }
     ],
-    clearIcon: 'p-dropdown-clear-icon',
-    trigger: 'p-dropdown-trigger',
-    loadingicon: 'p-dropdown-trigger-icon',
-    dropdownIcon: 'p-dropdown-trigger-icon',
+    clearIcon: 'p-select-clear-icon',
+    trigger: 'p-select-dropdown',
+    loadingicon: 'p-select-loading-icon',
+    dropdownIcon: 'p-select-dropdown-icon',
     panel: ({ instance }) => [
-        'p-dropdown-panel p-component',
+        'p-select-overlay p-component',
         {
             'p-ripple-disabled': instance.$primevue.config.ripple === false
         }
     ],
-    header: 'p-dropdown-header',
-    filterContainer: 'p-dropdown-filter-container',
-    filterInput: 'p-dropdown-filter',
-    filterIcon: 'p-dropdown-filter-icon',
-    wrapper: 'p-dropdown-items-wrapper',
-    list: 'p-dropdown-items',
-    itemGroup: 'p-dropdown-item-group',
-    itemGroupLabel: 'p-dropdown-item-group-label',
+    header: 'p-select-header',
+    filterContainer: 'p-select-filter-container',
+    filterInput: 'p-select-filter',
+    filterIcon: 'p-select-filter-icon',
+    wrapper: 'p-select-list-container',
+    list: 'p-select-list',
+    itemGroup: 'p-select-option-group',
+    itemGroupLabel: 'p-select-option-group-label',
     item: ({ instance, props, state, option, focusedOption }) => [
-        'p-dropdown-item',
+        'p-select-option',
         {
-            'p-highlight': instance.isSelected(option) && props.highlightOnSelect,
+            'p-select-option-selected': instance.isSelected(option) && props.highlightOnSelect,
             'p-focus': state.focusedOptionIndex === focusedOption,
             'p-disabled': instance.isOptionDisabled(option)
         }
     ],
-    itemLabel: 'p-dropdown-item-label',
-    checkIcon: 'p-dropdown-check-icon',
-    blankIcon: 'p-dropdown-blank-icon',
-    emptyMessage: 'p-dropdown-empty-message'
+    itemLabel: 'p-select-option-label',
+    checkIcon: 'p-select-option-check-icon',
+    blankIcon: 'p-select-option-blank-icon',
+    emptyMessage: 'p-select-empty-message'
 };
 
 export default BaseStyle.extend({
diff --git a/components/lib/themes/primeone/base/dropdown/index.js b/components/lib/themes/primeone/base/dropdown/index.js
index 6cea478ea..f917cac70 100644
--- a/components/lib/themes/primeone/base/dropdown/index.js
+++ b/components/lib/themes/primeone/base/dropdown/index.js
@@ -1,6 +1,6 @@
 export default {
     css: ({ dt }) => `
-.p-dropdown {
+.p-select {
     display: inline-flex;
     cursor: pointer;
     position: relative;
@@ -13,33 +13,33 @@ export default {
     box-shadow: ${dt('dropdown.box.shadow')};
 }
 
-.p-dropdown:not(.p-disabled):hover {
+.p-select:not(.p-disabled):hover {
     border-color: ${dt('dropdown.hover.border.color')};
 }
 
-.p-dropdown:not(.p-disabled).p-focus {
+.p-select:not(.p-disabled).p-focus {
     border-color:${dt('dropdown.focus.border.color')};
     outline: 0 none;
 }
 
-.p-dropdown.p-variant-filled {
+.p-select.p-variant-filled {
     background: ${dt('dropdown.filled.background')};
 }
 
-.p-dropdown.p-variant-filled.p-focus {
+.p-select.p-variant-filled.p-focus {
     background: ${dt('dropdown.filled.focus.background')};
 }
 
-.p-dropdown.p-invalid {
+.p-select.p-invalid {
     border-color: ${dt('dropdown.invalid.border.color')};
 }
 
-.p-dropdown.p-disabled {
+.p-select.p-disabled {
     opacity: 1;
     background: ${dt('dropdown.disabled.background')};
 }
 
-.p-dropdown-clear-icon {
+.p-select-clear-icon {
     position: absolute;
     top: 50%;
     margin-top: -0.5rem;
@@ -47,7 +47,7 @@ export default {
     right: 2.5rem;
 }
 
-.p-dropdown-trigger {
+.p-select-dropdown {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -59,7 +59,7 @@ export default {
     border-bottom-right-radius: ${dt('rounded.base')};
 }
 
-.p-dropdown-label {
+.p-select-label {
     display: block;
     white-space: nowrap;
     overflow: hidden;
@@ -74,32 +74,32 @@ export default {
     outline: 0 none;
 }
 
-.p-dropdown-label.p-placeholder {
+.p-select-label.p-placeholder {
     color: ${dt('dropdown.placeholder.color')};
 }
 
-.p-dropdown-clearable .p-dropdown-label {
+.p-select:has(.p-select-clear-icon) .p-select-label {
     padding-right: 1.75rem;
 }
 
-.p-dropdown.p-disabled .p-dropdown-label {
+.p-select.p-disabled .p-select-label {
     color: ${dt('dropdown.disabled.color')};
 }
 
-.p-dropdown-label-empty {
+.p-select-label-empty {
     overflow: hidden;
     opacity: 0;
 }
 
-input.p-dropdown-label {
+input.p-select-label {
     cursor: default;
 }
 
-.p-dropdown .p-dropdown-panel {
+.p-select .p-select-overlay {
     min-width: 100%;
 }
 
-.p-dropdown-panel {
+.p-select-overlay {
     position: absolute;
     top: 0;
     left: 0;
@@ -110,22 +110,21 @@ input.p-dropdown-label {
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
 }
 
-
-.p-dropdown-panel .p-dropdown-header {
+.p-select-header {
     padding: 0.5rem 0.5rem 0 0.5rem;
 }
 
-.p-dropdown-filter {
+.p-select-filter {
     width: 100%;
     padding-right: 1.75rem;
     margin-right: -1.75rem;
 }
 
-.p-dropdown-filter-container {
+.p-select-filter-container {
     position: relative;
 }
 
-.p-dropdown-filter-icon {
+.p-select-filter-icon {
     position: absolute;
     top: 50%;
     margin-top: -0.5rem;
@@ -133,11 +132,11 @@ input.p-dropdown-label {
     color: ${dt('dropdown.filter.icon.color')};
 }
 
-.p-dropdown-items-wrapper {
+.p-select-list-container {
     overflow: auto;
 }
 
-.p-dropdown-item-group {
+.p-select-option-group {
     cursor: auto;
     margin: 0;
     padding: 0.5rem 0.75rem;
@@ -146,14 +145,14 @@ input.p-dropdown-label {
     font-weight: 600;
 }
 
-.p-dropdown-items {
+.p-select-list {
     margin: 0;
     padding: 0;
     list-style-type: none;
     padding: 0.25rem 0.25rem;
 }
 
-.p-dropdown-item {
+.p-select-option {
     cursor: pointer;
     font-weight: normal;
     white-space: nowrap;
@@ -170,46 +169,46 @@ input.p-dropdown-label {
     border-radius: ${dt('rounded.sm')};
 }
 
-.p-dropdown-item:first-child {
+.p-select-option:first-child {
     margin-top: 0;
 }
 
-.p-dropdown-item:last-child {
+.p-select-option:last-child {
     margin-bottom: 0;
 }
 
-.p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+.p-select-option:not(.p-select-option-selected):not(.p-disabled).p-focus {
     background: ${dt('dropdown.item.focus.background')};
     color: ${dt('dropdown.item.focus.color')};
 }
 
-.p-dropdown-item.p-highlight {
+.p-select-option.p-select-option-selected {
     background: ${dt('dropdown.item.selected.background')};
     color: ${dt('dropdown.item.selected.color')};
 }
 
-.p-dropdown-item.p-highlight.p-focus {
+.p-select-option.p-select-option-selected.p-focus {
     background: ${dt('dropdown.item.selected.focus.background')};
     color: ${dt('dropdown.item.selected.focus.color')};
 }
 
-.p-dropdown-check-icon {
+.p-select-option-check-icon {
     position: relative;
     margin-left: -0.375rem;
     margin-right: 0.375rem;
     color: ${dt('dropdown.checkmark.color')};
 }
 
-.p-dropdown-empty-message {
+.p-select-empty-message {
     padding: 0.5rem 0.75rem;
     background: transparent;
 }
 
-.p-fluid .p-dropdown {
+.p-fluid .p-select {
     display: flex;
 }
 
-.p-fluid .p-dropdown .p-dropdown-label {
+.p-fluid .p-select .p-select-label {
     width: 1%;
 }
 `