fix(ToggleGroup): implemented workaround for cyclic dependency in use functions

Author: mtorromeo

packages/core/src/components/ToggleGroup/ToggleGroup.vue

@@ -17,7 +17,7 @@ export interface Props extends OUIAProps {
 }
 </script>
 
-<script lang="ts" setup generic="T = string | number | (string | number)[]">
+<script lang="ts" setup generic="T extends string | number | (string | number)[] = string | number | (string | number)[]">
 import styles from '@patternfly/react-styles/css/components/ToggleGroup/toggle-group';
 import { type InjectionKey, provide, computed, type ComputedRef, type Ref } from 'vue';
 import { useOUIAProps, type OUIAProps } from '../../helpers/ouia';

packages/core/src/components/ToggleGroup/ToggleGroupItem.vue

@@ -35,7 +35,7 @@ export interface Props<T> extends OUIAProps, /* @vue-ignore */ HTMLAttributes {
 }
 </script>
 
-<script lang="ts" setup generic="T = string | number">
+<script lang="ts" setup generic="T extends string | number = string | number">
 import styles from '@patternfly/react-styles/css/components/ToggleGroup/toggle-group';
 import { useOUIAProps, type OUIAProps } from '../../helpers/ouia';
 import { inject, computed, ref, type HTMLAttributes, type Ref } from 'vue';
@@ -63,7 +63,7 @@ defineSlots<{
 }>();
 
 const injectedDisabled = inject(ToggleGroupDisabledKey, undefined);
-const selection: Ref<T | undefined> | undefined = inject(ToggleGroupSelectionKey, undefined) as any;
+const selection: Ref<T | T[] | undefined> | undefined = inject(ToggleGroupSelectionKey, undefined) as any;
 
 const innerSelected = ref(false);
 
@@ -83,7 +83,7 @@ const effectiveSelected = computed({
     }
 
     if (Array.isArray(selection.value)) {
-      return selection.value.includes(value);
+      return selection.value.includes(value as T);
     }
     return selection.value === value;
   },
@@ -107,11 +107,11 @@ const effectiveSelected = computed({
 
     if (Array.isArray(selection.value)) {
       if (to) {
-        if (!selection.value.includes(value)) {
-          selection.value = [...selection.value, value] as T;
+        if (!selection.value.includes(value as T)) {
+          selection.value = [...selection.value, value] as T[];
         }
       } else {
-        const idx = selection.value.indexOf(value);
+        const idx = selection.value.indexOf(value as T);
         if (idx >= 0) {
           selection.value.splice(idx, 1);
         }

packages/core/src/components/ToggleGroup/index.ts

@@ -1,12 +1,3 @@
-import PfToggleGroup from './ToggleGroup.vue';
-import PfToggleGroupItem from './ToggleGroupItem.vue';
-
-export { PfToggleGroup, PfToggleGroupItem };
-
-export function useSingleToggleGroup<T>() {
-  return [PfToggleGroup<T | undefined | null>, PfToggleGroupItem<T>];
-}
-
-export function useMultiToggleGroup<T>() {
-  return [PfToggleGroup<T[]>, PfToggleGroupItem<T>];
-}
+export { default as PfToggleGroup } from './ToggleGroup.vue';
+export { default as PfToggleGroupItem } from './ToggleGroupItem.vue';
+export * from './use.vue';

packages/core/src/components/ToggleGroup/use.vue

@@ -0,0 +1,23 @@
+<template>
+  <!-- DO NOT USE -->
+  <div />
+</template>
+
+<script lang="ts">
+import PfToggleGroup from './ToggleGroup.vue';
+import PfToggleGroupItem from './ToggleGroupItem.vue';
+
+export function useSingleToggleGroup<T extends string | number>(): [typeof PfToggleGroup<T[]>, typeof PfToggleGroupItem<T>] {
+  return [PfToggleGroup, PfToggleGroupItem];
+}
+
+export function useMultiToggleGroup<T extends string | number>(): [typeof PfToggleGroup<T[]>, typeof PfToggleGroupItem<T>] {
+  return [PfToggleGroup, PfToggleGroupItem];
+}
+</script>
+
+<script lang="ts" setup>
+defineOptions({
+  name: 'DoNotUse',
+});
+</script>