Refactor #3907 - options have changed as context

components/lib/contextmenu/ContextMenu.d.ts

@@ -20,7 +20,7 @@ export declare type ContextMenuPassThroughOptionType = ContextMenuPassThroughAtt
 export interface ContextMenuPassThroughMethodOptions {
     props: ContextMenuProps;
     state: ContextMenuState;
-    options: ContextMenuOptions;
+    context: ContextMenuContext;
 }
 
 /**
@@ -129,7 +129,7 @@ export interface ContextMenuState {
 /**
  * Defines current options in ContextMenu component.
  */
-export interface ContextMenuOptions {
+export interface ContextMenuContext {
     /**
      * Current active state of menuitem as a boolean.
      * @defaultValue false

components/lib/contextmenu/ContextMenuSub.vue

@@ -149,7 +149,7 @@ export default {
         },
         getPTOptions(processedItem, key) {
             return this.ptm(key, {
-                options: {
+                context: {
                     active: this.isItemActive(processedItem),
                     focused: this.isItemFocused(processedItem)
                 }

components/lib/dock/Dock.d.ts

@@ -19,6 +19,7 @@ export declare type DockPassThroughOptionType = DockPassThroughAttributes | ((op
 export interface DockPassThroughMethodOptions {
     props: DockProps;
     state: DockState;
+    context: DockContext;
 }
 
 /**
@@ -88,6 +89,17 @@ export interface DockState {
     focusedOptionIndex: number;
 }
 
+/**
+ * Defines current options in Dock component.
+ */
+export interface DockContext {
+    /**
+     * Current active state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+}
+
 /**
  * Defines tooltip options
  */

components/lib/dock/DockSub.vue

@@ -25,9 +25,9 @@
                     :aria-disabled="disabled(processedItem)"
                     @click="onItemClick($event, processedItem)"
                     @mouseenter="onItemMouseEnter(index)"
-                    v-bind="ptm('menuitem')"
+                    v-bind="getPTOptions(getItemId(index), 'menuitem')"
                 >
-                    <div class="p-menuitem-content" v-bind="ptm('content')">
+                    <div class="p-menuitem-content" v-bind="getPTOptions(getItemId(index), 'content')">
                         <template v-if="!templates['item']">
                             <router-link v-if="processedItem.to && !disabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="processedItem.to" custom>
                                 <a
@@ -38,10 +38,10 @@
                                     tabindex="-1"
                                     aria-hidden="true"
                                     @click="onItemActionClick($event, processedItem, navigate)"
-                                    v-bind="ptm('action')"
+                                    v-bind="getPTOptions(getItemId(index), 'action')"
                                 >
                                     <template v-if="!templates['icon']">
-                                        <span v-ripple :class="['p-dock-icon', processedItem.icon]" v-bind="ptm('icon')"></span>
+                                        <span v-ripple :class="['p-dock-icon', processedItem.icon]" v-bind="getPTOptions(getItemId(index), 'icon')"></span>
                                     </template>
                                     <component v-else :is="templates['icon']" :item="processedItem"></component>
                                 </a>
@@ -54,10 +54,10 @@
                                 :target="processedItem.target"
                                 tabindex="-1"
                                 aria-hidden="true"
-                                v-bind="ptm('action')"
+                                v-bind="getPTOptions(getItemId(index), 'action')"
                             >
                                 <template v-if="!templates['icon']">
-                                    <span v-ripple :class="['p-dock-icon', processedItem.icon]" v-bind="ptm('icon')"></span>
+                                    <span v-ripple :class="['p-dock-icon', processedItem.icon]" v-bind="getPTOptions(getItemId(index), 'icon')"></span>
                                 </template>
                                 <component v-else :is="templates['icon']" :item="processedItem"></component>
                             </a>
@@ -138,9 +138,19 @@ export default {
         getItemProp(processedItem, name) {
             return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name]) : undefined;
         },
+        getPTOptions(id, key) {
+            return this.ptm(key, {
+                context: {
+                    active: this.isItemActive(id)
+                }
+            });
+        },
         isSameMenuItem(event) {
             return event.currentTarget && (event.currentTarget.isSameNode(event.target) || event.currentTarget.isSameNode(event.target.closest('.p-menuitem')));
         },
+        isItemActive(id) {
+            return id === this.focusedOptionIndex;
+        },
         onListMouseLeave() {
             this.currentIndex = -3;
         },
@@ -262,7 +272,7 @@ export default {
             return [
                 'p-dock-item',
                 {
-                    'p-focus': id === this.focusedOptionIndex,
+                    'p-focus': this.isItemActive(id),
                     'p-disabled': this.disabled(item),
                     'p-dock-item-second-prev': this.currentIndex - 2 === index,
                     'p-dock-item-prev': this.currentIndex - 1 === index,

components/lib/megamenu/MegaMenu.d.ts

@@ -19,7 +19,7 @@ export declare type MegaMenuPassThroughOptionType = MegaMenuPassThroughAttribute
 export interface MegaMenuPassThroughMethodOptions {
     props: MegaMenuProps;
     state: MegaMenuState;
-    options: MegaMenuOptions;
+    context: MegaMenuContext;
 }
 
 /**
@@ -142,7 +142,7 @@ export interface MegaMenuState {
 /**
  * Defines current options in MegaMenu component.
  */
-export interface MegaMenuOptions {
+export interface MegaMenuContext {
     /**
      * Current active state of menuitem as a boolean.
      * @defaultValue false

components/lib/megamenu/MegaMenuSub.vue

@@ -153,7 +153,7 @@ export default {
         },
         getPTOptions(processedItem, key) {
             return this.ptm(key, {
-                options: {
+                context: {
                     active: this.isItemActive(processedItem),
                     focused: this.isItemFocused(processedItem)
                 }

components/lib/menu/Menu.d.ts

@@ -19,6 +19,7 @@ export declare type MenuPassThroughOptionType = MenuPassThroughAttributes | ((op
 export interface MenuPassThroughMethodOptions {
     props: MenuProps;
     state: MenuState;
+    context: MenuContext;
 }
 
 /**
@@ -107,6 +108,17 @@ export interface MenuState {
     selectedOptionIndex: number;
 }
 
+/**
+ * Defines current options in Menu component.
+ */
+export interface MenuContext {
+    /**
+     * Current focused state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+}
+
 /**
  * Defines valid properties in Menu component.
  */

components/lib/menu/Menuitem.vue

@@ -43,7 +43,7 @@ export default {
         },
         getPTOptions(key) {
             return this.ptm(key, {
-                options: {
+                context: {
                     focused: this.isItemFocused()
                 }
             });

components/lib/menubar/Menubar.d.ts

@@ -19,7 +19,7 @@ export declare type MenubarPassThroughOptionType = MenubarPassThroughAttributes
 export interface MenubarPassThroughMethodOptions {
     props: MenubarProps;
     state: MenubarState;
-    options: MenubarOptions;
+    context: MenubarContext;
 }
 
 /**
@@ -139,7 +139,7 @@ export interface MenubarState {
 /**
  * Defines current options in Menubar component.
  */
-export interface MenubarOptions {
+export interface MenubarContext {
     /**
      * Current active state of menuitem as a boolean.
      * @defaultValue false

components/lib/menubar/MenubarSub.vue

@@ -144,7 +144,7 @@ export default {
         },
         getPTOptions(processedItem, key) {
             return this.ptm(key, {
-                options: {
+                context: {
                     active: this.isItemActive(processedItem),
                     focused: this.isItemFocused(processedItem)
                 }

components/lib/panelmenu/PanelMenu.d.ts

@@ -19,6 +19,7 @@ export declare type PanelMenuPassThroughOptionType = PanelMenuPassThroughAttribu
 export interface PanelMenuPassThroughMethodOptions {
     props: PanelMenuProps;
     state: PanelMenuState;
+    context: PanelMenuContext;
 }
 
 /**
@@ -122,6 +123,22 @@ export interface PanelMenuState {
     activeItem: MenuItem[];
 }
 
+/**
+ * Defines current options in PanelMenu component.
+ */
+export interface PanelMenuContext {
+    /**
+     * Current active state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+    /**
+     * Current focused state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+}
+
 /**
  * Custom expanded keys metadata.
  * @see {@link PanelMenuProps.expandedKeys}

components/lib/panelmenu/PanelMenuSub.vue

@@ -124,7 +124,7 @@ export default {
         },
         getPTOptions(processedItem, key) {
             return this.ptm(key, {
-                options: {
+                context: {
                     active: this.isItemActive(processedItem),
                     focused: this.isItemFocused(processedItem)
                 }

components/lib/tabmenu/TabMenu.d.ts

@@ -19,7 +19,7 @@ export declare type TabMenuPassThroughOptionType = TabMenuPassThroughAttributes
 export interface TabMenuPassThroughMethodOptions {
     props: TabMenuProps;
     state: TabMenuState;
-    options: TabMenuOptions;
+    context: TabMenuContext;
 }
 
 /**
@@ -78,7 +78,7 @@ export interface TabMenuState {
 /**
  * Defines current options in TabMenu component.
  */
-export interface TabMenuOptions {
+export interface TabMenuContext {
     /**
      * Order of the menuitem
      */

components/lib/tabmenu/TabMenu.vue

@@ -99,7 +99,7 @@ export default {
     methods: {
         getPTOptions(key, index) {
             return this.ptm(key, {
-                options: {
+                context: {
                     order: index
                 }
             });

components/lib/tieredmenu/TieredMenu.d.ts

@@ -19,7 +19,7 @@ export declare type TieredMenuPassThroughOptionType = TieredMenuPassThroughAttri
 export interface TieredMenuPassThroughMethodOptions {
     props: TieredMenuProps;
     state: TieredMenuState;
-    options: TieredMenuOptions;
+    context: TieredMenuContext;
 }
 
 /**
@@ -123,7 +123,7 @@ export interface TieredMenuState {
 /**
  * Defines current options in TieredMenu component.
  */
-export interface TieredMenuOptions {
+export interface TieredMenuContext {
     /**
      * Current active state of menuitem as a boolean.
      * @defaultValue false

components/lib/tieredmenu/TieredMenuSub.vue

@@ -130,7 +130,7 @@ export default {
         },
         getPTOptions(processedItem, key) {
             return this.ptm(key, {
-                options: {
+                context: {
                     active: this.isItemActive(processedItem),
                     focused: this.isItemFocused(processedItem)
                 }