Refactor #5683 - For AutoComplete

components/lib/autocomplete/AutoComplete.d.ts

@@ -182,9 +182,9 @@ export interface AutoCompletePassThroughOptions {
      */
     dropdownIcon?: AutoCompletePassThroughOptionType;
     /**
-     * Used to pass attributes to the panel's DOM element.
+     * Used to pass attributes to the overlay's DOM element.
      */
-    panel?: AutoCompletePassThroughOptionType;
+    overlay?: AutoCompletePassThroughOptionType;
     /**
      * Used to pass attributes to the VirtualScroller component.
      * @see {@link VirtualScrollerPassThroughOptionType}
@@ -327,7 +327,7 @@ export interface AutoCompleteProps {
      */
     optionGroupChildren?: string | ((data: any) => any[]) | undefined;
     /**
-     * Maximum height of the suggestions panel.
+     * Maximum height of the suggestions overlay.
      * @defaultValue 14rem
      */
     scrollHeight?: string | undefined;
@@ -419,13 +419,21 @@ export interface AutoCompleteProps {
      */
     inputClass?: string | object | undefined;
     /**
-     * Inline style of the overlay panel.
+     * Inline style of the overlay.
      */
     panelStyle?: object | undefined;
     /**
-     * Style class of the overlay panel.
+     * Style class of the overlay.
      */
     panelClass?: string | object | undefined;
+    /**
+     * Inline style of the overlay overlay.
+     */
+    overlayStyle?: object | undefined;
+    /**
+     * Style class of the overlay overlay.
+     */
+    overlayClass?: string | object | undefined;
     /**
      * Icon to display in the dropdown.
      * @deprecated since v3.27.0. Use 'dropdownicon' slot.
@@ -459,7 +467,7 @@ export interface AutoCompleteProps {
      */
     virtualScrollerOptions?: VirtualScrollerProps;
     /**
-     * Whether to focus on the first visible or selected element when the overlay panel is shown.
+     * Whether to focus on the first visible or selected element when the overlay is shown.
      * @defaultValue false
      */
     autoOptionFocus?: boolean | undefined;

components/lib/autocomplete/AutoComplete.vue

@@ -124,11 +124,11 @@
                     v-if="overlayVisible"
                     :ref="overlayRef"
                     :id="panelId"
-                    :class="[cx('panel'), panelClass]"
-                    :style="{ ...panelStyle, 'max-height': virtualScrollerDisabled ? scrollHeight : '' }"
+                    :class="[cx('overlay'), panelClass, overlayClass]"
+                    :style="{ ...panelStyle, ...overlayStyle, 'max-height': virtualScrollerDisabled ? scrollHeight : '' }"
                     @click="onOverlayClick"
                     @keydown="onOverlayKeyDown"
-                    v-bind="ptm('panel')"
+                    v-bind="ptm('overlay')"
                 >
                     <slot name="header" :value="modelValue" :suggestions="visibleOptions"></slot>
                     <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :style="{ height: scrollHeight }" :items="visibleOptions" :tabindex="-1" :disabled="virtualScrollerDisabled" :pt="ptm('virtualScroller')">

components/lib/autocomplete/BaseAutoComplete.vue

@@ -105,6 +105,14 @@ export default {
             type: [String, Object],
             default: null
         },
+        overlayStyle: {
+            type: Object,
+            default: null
+        },
+        overlayClass: {
+            type: [String, Object],
+            default: null
+        },
         dropdownIcon: {
             type: String,
             default: null

components/lib/autocomplete/style/AutoCompleteStyle.js

@@ -262,7 +262,7 @@ const classes = {
     inputChip: 'p-autocomplete-input-chip',
     loader: 'p-autocomplete-loader',
     dropdown: 'p-autocomplete-dropdown',
-    panel: 'p-autocomplete-overlay p-component',
+    overlay: 'p-autocomplete-overlay p-component',
     list: 'p-autocomplete-list',
     optionGroup: 'p-autocomplete-option-group',
     option: ({ instance, option, i, getItemOptions }) => [