Refactor #3922 - For AutoComplete

components/lib/autocomplete/AutoComplete.d.ts

@@ -20,6 +20,7 @@ export declare type AutoCompletePassThroughOptionType = AutoCompletePassThroughA
 export interface AutoCompletePassThroughMethodOptions {
     props: AutoCompleteProps;
     state: AutoCompleteState;
+    context: AutoCompleteContext;
 }
 
 /**
@@ -173,10 +174,55 @@ export interface AutoCompletePassThroughAttributes {
  */
 export interface AutoCompleteState {
     /**
-     * Current collapsed state as a boolean.
+     * Current id state as a string.
+     */
+    id: string;
+    /**
+     * Current focused state as a boolean.
      * @defaultValue false
      */
-    d_collapsed: boolean;
+    focused: boolean;
+    /**
+     * Current focused item index as a number.
+     * @defaultvalue -1
+     */
+    focusedOptionIndex: number;
+    /**
+     * Current focused item index as a number.
+     * @defaultvalue -1
+     */
+    focusedMultipleOptionIndex: number;
+    /**
+     * Current overlay visible state as a boolean.
+     * @defaultValue false
+     */
+    overlayVisible: boolean;
+    /**
+     * Current search state as a boolean.
+     * @defaultValue false
+     */
+    searching: boolean;
+}
+
+/**
+ * Defines current options in AutoComplete component.
+ */
+export interface AutoCompleteContext {
+    /**
+     * Current selection state of the item as a boolean.
+     * @defaultValue false
+     */
+    selected: boolean;
+    /**
+     * Current focus state of the item as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current disabled state of the item as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
 }
 
 /**

components/lib/autocomplete/AutoComplete.vue

@@ -98,7 +98,7 @@
                 </slot>
             </template>
         </Button>
-        <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('searchResultMessage')">
+        <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSearchResult')">
             {{ searchResultMessageText }}
         </span>
         <Portal :appendTo="appendTo">
@@ -141,7 +141,7 @@
                                         :aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))"
                                         @click="onOptionSelect($event, option)"
                                         @mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
-                                        v-bind="ptm('item')"
+                                        v-bind="getPTOptions(option, getItemOptions, i, 'item')"
                                     >
                                         <slot v-if="$slots.option" name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
                                         <slot v-else name="item" :item="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
@@ -158,7 +158,7 @@
                         </template>
                     </VirtualScroller>
                     <slot name="footer" :value="modelValue" :suggestions="visibleOptions"></slot>
-                    <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('selectedMessage')">
+                    <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSelectedMessage')">
                         {{ selectedMessageText }}
                     </span>
                 </div>
@@ -409,6 +409,15 @@ export default {
         getOptionRenderKey(option, index) {
             return (this.dataKey ? ObjectUtils.resolveFieldData(option, this.dataKey) : this.getOptionLabel(option)) + '_' + index;
         },
+        getPTOptions(option, itemOptions, index, key) {
+            return this.ptm(key, {
+                context: {
+                    selected: this.isSelected(option),
+                    focused: this.focusedOptionIndex === this.getOptionIndex(index, itemOptions),
+                    disabled: this.isOptionDisabled(option)
+                }
+            });
+        },
         isOptionDisabled(option) {
             return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false;
         },