Remove the need to provide dropdownCollection

We simplify the component interactions and rely on the `dropdownContext` instead

Signed-off-by: Phillip Rak <[email protected]>

pkg/rancher-components/src/components/RcDropdown/RcDropdown.vue

@@ -2,27 +2,19 @@
 import { useTemplateRef } from 'vue';
 import { useClickOutside } from '@shell/composables/useClickOutside';
 import { useDropdownContext } from '@components/RcDropdown/useDropdownContext';
-import { useDropdownCollection } from '@components/RcDropdown/useDropdownCollection';
 
 defineProps<{
   ariaLabel?: string
 }>();
 
-const {
-  firstDropdownItem,
-  provideDropdownCollection,
-  registerDropdownCollection
-} = useDropdownCollection();
-
-provideDropdownCollection();
-
 const {
   isMenuOpen,
   showMenu,
   returnFocus,
   setFocus,
   provideDropdownContext,
-} = useDropdownContext(firstDropdownItem);
+  registerDropdownCollection,
+} = useDropdownContext();
 
 provideDropdownContext();
 

pkg/rancher-components/src/components/RcDropdown/RcDropdownItem.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { inject } from 'vue';
-import { DropdownCollection, defaultCollection, DropdownContext, defaultContext } from './types';
+import { DropdownContext, defaultContext } from './types';
 
 const props = defineProps({ disabled: Boolean });
 const emits = defineEmits(['click']);
 
-const { dropdownItems } = inject<DropdownCollection>('dropdownCollection') || defaultCollection;
-const { close } = inject<DropdownContext>('dropdownContext') || defaultContext;
+const { close, dropdownItems } = inject<DropdownContext>('dropdownContext') || defaultContext;
 
 /**
  * Handles keydown events to navigate between dropdown items.

pkg/rancher-components/src/components/RcDropdown/types.ts

@@ -5,6 +5,7 @@ export type DropdownContext = {
   handleKeydown: () => void;
   showMenu: (show: boolean) => void;
   registerTrigger: (triggerRef: RcButtonType | null) => void;
+  dropdownItems: Ref<Element[]>;
   focusFirstElement: () => void;
   isMenuOpen: Ref<boolean>;
   close: () => void;
@@ -14,13 +15,8 @@ export const defaultContext: DropdownContext = {
   handleKeydown:     () => null,
   showMenu:          (_show: boolean | null) => null,
   registerTrigger:   (_triggerRef: RcButtonType | null) => null,
+  dropdownItems:     ref([]),
   focusFirstElement: () => null,
   isMenuOpen:        ref(false),
   close:             () => null,
 };
-
-export type DropdownCollection = {
-  dropdownItems: Ref<Element[]>;
-};
-
-export const defaultCollection: DropdownCollection = { dropdownItems: ref([]) };

pkg/rancher-components/src/components/RcDropdown/useDropdownCollection.ts

@@ -1,4 +1,4 @@
-import { provide, ref } from 'vue';
+import { ref } from 'vue';
 
 /**
  * Manages a collection of dropdown items. Includes methods for registering
@@ -37,17 +37,9 @@ export const useDropdownCollection = () => {
     });
   };
 
-  /**
-   * Provides the dropdown collection data to descendants. Can be accessed
-   * in descendants with the `inject()` function.
-   */
-  const provideDropdownCollection = () => {
-    provide('dropdownCollection', { dropdownItems });
-  };
-
   return {
+    dropdownItems,
     firstDropdownItem,
-    provideDropdownCollection,
     registerDropdownCollection,
   };
 };

pkg/rancher-components/src/components/RcDropdown/useDropdownContext.ts

@@ -1,4 +1,5 @@
-import { ref, provide, Ref, nextTick } from 'vue';
+import { ref, provide, nextTick } from 'vue';
+import { useDropdownCollection } from './useDropdownCollection';
 import { RcButtonType } from '@components/RcButton';
 
 /**
@@ -10,7 +11,8 @@ import { RcButtonType } from '@components/RcButton';
  * @returns Dropdown context methods and state. Used for programmatic
  * interactions and setting focus.
  */
-export const useDropdownContext = (firstDropdownItem: Ref<HTMLElement | null>) => {
+export const useDropdownContext = () => {
+  const { dropdownItems, firstDropdownItem, registerDropdownCollection } = useDropdownCollection();
   /**
    * Tracks if a keydown event has occurred. Important for distinguishing keyboard
    * events from mouse events.
@@ -78,6 +80,7 @@ export const useDropdownContext = (firstDropdownItem: Ref<HTMLElement | null>) =
       showMenu,
       registerTrigger,
       isMenuOpen,
+      dropdownItems,
       close:             () => returnFocus(),
       focusFirstElement: () => {
         handleKeydown();
@@ -93,5 +96,6 @@ export const useDropdownContext = (firstDropdownItem: Ref<HTMLElement | null>) =
     returnFocus,
     setFocus,
     provideDropdownContext,
+    registerDropdownCollection,
   };
 };