Expose panels - only use injected panels if they match

src/components/CascadeMenu/PCascadePanels.vue

@@ -20,7 +20,7 @@
   import { inject } from 'vue'
   import { PCascadePanel } from '@/components'
   import { CascadePanel, CascadePanelId, cascadePanelsKey, useCascadePanels } from '@/compositions'
-  import { kebabCase } from '@/utilities'
+  import { isDefined, kebabCase } from '@/utilities'
 
   const props = withDefaults(defineProps<{
     panels: CascadePanel[],
@@ -31,40 +31,48 @@
     transitionName: 'p-cascade-panels__transition',
   })
 
-  // Calling inject with a nullish coallescing operator while providing a default value of
+  function getBaseSlotName(panelId: CascadePanelId): string {
+    return `${kebabCase(panelId.toString())}`
+  }
+
+  // Calling inject while providing a default value of
   // undefined allows callers to use the `useCascadePanels` composition function while
   // ensuring that the composition state is the same.
+  const injectedCascadePanels = inject(cascadePanelsKey, undefined)
+
+  const useInjectedCascadePanels = isDefined(injectedCascadePanels)
+    && injectedCascadePanels.panels.value.every((panel) => props.panels.find(({ id }) => id === panel.id))
+    && props.panels.every((panel) => injectedCascadePanels.panels.value.find(({ id }) => id === panel.id))
+
   const {
     close,
     closeAll,
     closePanelById,
     getPanelById,
+    getPanelIsOpenById,
     isOpen,
     open,
     openPanelById,
     openPanels,
-    getPanelIsOpenById,
+    panels,
     toggle,
     togglePanelById,
-  } = inject(cascadePanelsKey, undefined) ?? useCascadePanels(() => props.panels)
+  } = useInjectedCascadePanels ? injectedCascadePanels : useCascadePanels(() => props.panels)
 
   defineExpose({
     close,
     closeAll,
     closePanelById,
     getPanelById,
+    getPanelIsOpenById,
     isOpen,
     open,
     openPanelById,
     openPanels,
-    getPanelIsOpenById,
+    panels,
     toggle,
     togglePanelById,
   })
-
-  function getBaseSlotName(panelId: CascadePanelId): string {
-    return `${kebabCase(panelId.toString())}`
-  }
 </script>
 
 <style>

src/compositions/cascade/useCascadePanels.ts

@@ -25,6 +25,7 @@ function getInjectedCascadePanels(): UseCascadePanels {
 
 export type UseCascadePanels = {
   openPanels: ComputedRef<CascadePanel[]>,
+  panels: Ref<CascadePanel[]>,
   state: Readonly<CascadeState>,
   isOpen: Ref<boolean>,
   getPanelById: (id: CascadePanelId) => CascadePanel | undefined,
@@ -43,6 +44,7 @@ export type UseCascadePanels = {
  *
  * @param {CascadePanel[]} panelsRefOrGetter - Initial array of panel definitions.
  * @returns {UseCascadePanels} - An object including:
+ *   - `panels`: Ref array of panel definitions.
  *   - `openPanels`: Computed array of open panels.
  *   - `state`: Readonly object tracking the open/close state of each panel by id.
  *   - `isOpen`: Ref boolean indicating whether the cascade panel group is open.
@@ -160,6 +162,7 @@ export function useCascadePanels(panelsRefOrGetter?: MaybeRefOrGetter<CascadePan
   }
 
   const cascadePanels: UseCascadePanels = {
+    panels,
     openPanels,
     isOpen,
     state: readonly(state),