From 05ba34ac978084351e2b58c73685069cb1e3eb55 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Thu, 5 Dec 2024 15:00:28 -0500
Subject: [PATCH] fix(*): replace useuniqueid with useid [KHCP-14269]

---
 src/components/KCatalog/KCatalog.vue         | 5 ++---
 src/components/KCheckbox/KCheckbox.vue       | 5 ++---
 src/components/KCollapse/KCollapse.vue       | 5 ++---
 src/components/KCopy/KCopy.vue               | 5 ++---
 src/components/KFileUpload/KFileUpload.vue   | 5 ++---
 src/components/KInput/KInput.vue             | 7 +++----
 src/components/KInputSwitch/KInputSwitch.vue | 5 ++---
 src/components/KLabel/KLabel.vue             | 5 ++---
 src/components/KMultiselect/KMultiselect.vue | 9 ++++-----
 src/components/KPop/KPop.vue                 | 7 +++----
 src/components/KRadio/KRadio.vue             | 5 ++---
 src/components/KSelect/KSelect.vue           | 9 ++++-----
 src/components/KTable/KTable.vue             | 5 ++---
 src/components/KTableData/KTableData.vue     | 5 ++---
 src/components/KTextArea/KTextArea.vue       | 5 ++---
 src/components/KToaster/ToastManager.ts      | 5 ++---
 src/components/KTooltip/KTooltip.vue         | 5 ++---
 src/composables/useUniqueId.ts               | 3 ---
 18 files changed, 40 insertions(+), 60 deletions(-)
 delete mode 100644 src/composables/useUniqueId.ts

diff --git a/src/components/KCatalog/KCatalog.vue b/src/components/KCatalog/KCatalog.vue
index a4135c3dec..12a83a3dbc 100644
--- a/src/components/KCatalog/KCatalog.vue
+++ b/src/components/KCatalog/KCatalog.vue
@@ -154,7 +154,7 @@
 
 <script setup lang="ts">
 import type { PropType } from 'vue'
-import { ref, computed, onMounted, watch, useSlots } from 'vue'
+import { ref, computed, onMounted, watch, useSlots, useId } from 'vue'
 import type {
   CatalogItem,
   CatalogPreferences,
@@ -177,7 +177,6 @@ import KEmptyState from '@/components/KEmptyState/KEmptyState.vue'
 import KButton from '@/components/KButton/KButton.vue'
 import KPagination from '@/components/KPagination/KPagination.vue'
 import KCatalogItem from './KCatalogItem.vue'
-import useUniqueId from '@/composables/useUniqueId'
 
 const { useRequest, useDebounce, useSwrvState } = useUtilities()
 const DEFAULT_PAGE_SIZE = 15
@@ -372,7 +371,7 @@ const emit = defineEmits<{
 
 const slots = useSlots()
 
-const catalogId = useUniqueId()
+const catalogId = useId()
 
 const getInitialPageSize = (): number => {
   const initialPageSize = props.paginationPageSizes?.[0]
diff --git a/src/components/KCheckbox/KCheckbox.vue b/src/components/KCheckbox/KCheckbox.vue
index 064b83d2c7..aa6e2ee4fe 100644
--- a/src/components/KCheckbox/KCheckbox.vue
+++ b/src/components/KCheckbox/KCheckbox.vue
@@ -63,12 +63,11 @@
 
 <script lang="ts" setup>
 import type { PropType } from 'vue'
-import { computed, useAttrs, useSlots } from 'vue'
+import { computed, useAttrs, useId, useSlots } from 'vue'
 import type { LabelAttributes } from '@/types'
 import KLabel from '@/components/KLabel/KLabel.vue'
 import { CheckSmallIcon, IndeterminateSmallIcon } from '@kong/icons'
 import { KUI_ICON_SIZE_40 } from '@kong/design-tokens'
-import useUniqueId from '@/composables/useUniqueId'
 
 const props = defineProps({
   modelValue: {
@@ -110,7 +109,7 @@ const emit = defineEmits<{
 const slots = useSlots()
 const attrs = useAttrs()
 
-const inputId = attrs.id ? String(attrs.id) : useUniqueId()
+const inputId = attrs.id ? String(attrs.id) : useId()
 const hasLabel = computed((): boolean => !!(props.label || slots.default))
 const isDisabled = computed((): boolean => attrs?.disabled !== undefined && String(attrs?.disabled) !== 'false')
 
diff --git a/src/components/KCollapse/KCollapse.vue b/src/components/KCollapse/KCollapse.vue
index 84fa5222d3..f6f4ccba13 100644
--- a/src/components/KCollapse/KCollapse.vue
+++ b/src/components/KCollapse/KCollapse.vue
@@ -71,12 +71,11 @@
 
 <script lang="ts" setup>
 import type { PropType } from 'vue'
-import { computed, ref, useSlots, watch } from 'vue'
+import { computed, ref, useId, useSlots, watch } from 'vue'
 import type { TriggerAlignment, HeaderTag } from '@/types'
 import { TriggerAlignmentArray, HeaderTags } from '@/types'
 import { ChevronRightIcon } from '@kong/icons'
 import { KUI_ICON_SIZE_40 } from '@kong/design-tokens'
-import useUniqueId from '@/composables/useUniqueId'
 
 const props = defineProps({
   // Is the KCollapse collapsed? Defaults to true-->
@@ -113,7 +112,7 @@ const emit = defineEmits<{
   (e: 'update:modelValue', value: boolean): void;
 }>()
 
-const contentId = useUniqueId()
+const contentId = useId()
 
 const isCollapsed = ref<boolean>(true)
 const modelValueChanged = ref<boolean>(false)
diff --git a/src/components/KCopy/KCopy.vue b/src/components/KCopy/KCopy.vue
index e222409fad..b35f29af0f 100644
--- a/src/components/KCopy/KCopy.vue
+++ b/src/components/KCopy/KCopy.vue
@@ -56,13 +56,12 @@
 
 <script setup lang="ts">
 import type { PropType } from 'vue'
-import { computed, ref, watch, onMounted, onUnmounted } from 'vue'
+import { computed, ref, watch, onMounted, onUnmounted, useId } from 'vue'
 import { ResizeObserverHelper } from '@/utilities/resizeObserverHelper'
 import { CopyIcon } from '@kong/icons'
 import KClipboardProvider from '@/components/KClipboardProvider'
 import KTooltip from '@/components/KTooltip/KTooltip.vue'
 import { KUI_ICON_SIZE_30 } from '@kong/design-tokens'
-import useUniqueId from '@/composables/useUniqueId'
 
 const props = defineProps({
   /**
@@ -140,7 +139,7 @@ const props = defineProps({
   },
 })
 
-const copyButtonElementId = useUniqueId()
+const copyButtonElementId = useId()
 
 const tooltipText = ref<string>('')
 const nonSuccessText = computed((): string => {
diff --git a/src/components/KFileUpload/KFileUpload.vue b/src/components/KFileUpload/KFileUpload.vue
index 7dedc4bef9..f49b555e22 100644
--- a/src/components/KFileUpload/KFileUpload.vue
+++ b/src/components/KFileUpload/KFileUpload.vue
@@ -74,12 +74,11 @@ defineOptions({
 })
 
 import type { PropType } from 'vue'
-import { computed, ref, useAttrs, useSlots, watch } from 'vue'
+import { computed, ref, useAttrs, useId, useSlots, watch } from 'vue'
 import KLabel from '@/components/KLabel/KLabel.vue'
 import KInput from '@/components/KInput/KInput.vue'
 import KButton from '@/components/KButton/KButton.vue'
 import useUtilities from '@/composables/useUtilities'
-import useUniqueId from '@/composables/useUniqueId'
 
 const props = defineProps({
   labelAttributes: {
@@ -135,7 +134,7 @@ const emit = defineEmits<{
 
 const { stripRequiredLabel } = useUtilities()
 
-const fileInputId = attrs.id ? String(attrs.id) : useUniqueId()
+const fileInputId = attrs.id ? String(attrs.id) : useId()
 
 const modifiedAttrs = computed(() => {
   const $attrs = { ...attrs }
diff --git a/src/components/KInput/KInput.vue b/src/components/KInput/KInput.vue
index 953d9c94e0..acf00fed59 100644
--- a/src/components/KInput/KInput.vue
+++ b/src/components/KInput/KInput.vue
@@ -89,13 +89,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch, useSlots, useAttrs, onMounted, nextTick } from 'vue'
+import { computed, ref, watch, useSlots, useAttrs, onMounted, nextTick, useId } from 'vue'
 import type { PropType } from 'vue'
 import type { LabelAttributes, LimitExceededData } from '@/types'
 import useUtilities from '@/composables/useUtilities'
 import KLabel from '@/components/KLabel/KLabel.vue'
 import { KUI_ICON_SIZE_40 } from '@kong/design-tokens'
-import useUniqueId from '@/composables/useUniqueId'
 import { VisibilityIcon, VisibilityOffIcon } from '@kong/icons'
 
 const props = defineProps({
@@ -176,8 +175,8 @@ const slots = useSlots()
 const attrs = useAttrs()
 
 const isRequired = computed((): boolean => attrs?.required !== undefined && String(attrs?.required) !== 'false')
-const inputId = attrs.id ? String(attrs.id) : useUniqueId()
-const helpTextId = useUniqueId()
+const inputId = attrs.id ? String(attrs.id) : useId()
+const helpTextId = useId()
 const strippedLabel = computed((): string => stripRequiredLabel(props.label, isRequired.value))
 const hasLabelTooltip = computed((): boolean => !!(props.labelAttributes?.info || slots['label-tooltip']))
 
diff --git a/src/components/KInputSwitch/KInputSwitch.vue b/src/components/KInputSwitch/KInputSwitch.vue
index 6d1a25280d..0f020867dd 100644
--- a/src/components/KInputSwitch/KInputSwitch.vue
+++ b/src/components/KInputSwitch/KInputSwitch.vue
@@ -49,8 +49,7 @@
 
 <script lang="ts" setup>
 import type { PropType } from 'vue'
-import { computed, ref, useAttrs } from 'vue'
-import useUniqueId from '@/composables/useUniqueId'
+import { computed, ref, useAttrs, useId } from 'vue'
 
 const props = defineProps({
   /**
@@ -100,7 +99,7 @@ const attrs = useAttrs()
 
 const switchInputElement = ref<HTMLInputElement | null>(null)
 
-const inputId = attrs.id ? String(attrs.id) : useUniqueId()
+const inputId = attrs.id ? String(attrs.id) : useId()
 
 /**
 * Strips falsy `disabled` attribute, so it does not fall onto native <a> elements.
diff --git a/src/components/KLabel/KLabel.vue b/src/components/KLabel/KLabel.vue
index 9fc5df68ff..eca8dfb906 100644
--- a/src/components/KLabel/KLabel.vue
+++ b/src/components/KLabel/KLabel.vue
@@ -26,12 +26,11 @@
 
 <script setup lang="ts">
 import type { PropType } from 'vue'
-import { computed, useSlots } from 'vue'
+import { computed, useId, useSlots } from 'vue'
 import KTooltip from '@/components/KTooltip/KTooltip.vue'
 import type { TooltipAttributes } from '@/types'
 import { InfoIcon } from '@kong/icons'
 import { KUI_COLOR_TEXT_NEUTRAL } from '@kong/design-tokens'
-import useUniqueId from '@/composables/useUniqueId'
 
 const props = defineProps({
   info: {
@@ -66,7 +65,7 @@ const slots = useSlots()
 
 const hasTooltip = computed((): boolean => !!(props.help || props.info || slots.tooltip))
 
-const tooltipId = useUniqueId()
+const tooltipId = useId()
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/KMultiselect/KMultiselect.vue b/src/components/KMultiselect/KMultiselect.vue
index 367dbe8364..ee40c163ea 100644
--- a/src/components/KMultiselect/KMultiselect.vue
+++ b/src/components/KMultiselect/KMultiselect.vue
@@ -285,7 +285,7 @@
 
 <script lang="ts">
 import type { Ref, PropType } from 'vue'
-import { ref, computed, watch, nextTick, onMounted, onUnmounted, useAttrs, useSlots } from 'vue'
+import { ref, computed, watch, nextTick, onMounted, onUnmounted, useAttrs, useSlots, useId } from 'vue'
 import useUtilities from '@/composables/useUtilities'
 import KBadge from '@/components/KBadge/KBadge.vue'
 import KInput from '@/components/KInput/KInput.vue'
@@ -300,7 +300,6 @@ import { KUI_ICON_SIZE_40 } from '@kong/design-tokens'
 import { ResizeObserverHelper } from '@/utilities/resizeObserverHelper'
 import { sanitizeInput } from '@/utilities/sanitizeInput'
 import { useEventListener } from '@vueuse/core'
-import useUniqueId from '@/composables/useUniqueId'
 
 // functions used in prop validators
 const getValues = (items: MultiselectItem[]) => {
@@ -495,8 +494,8 @@ const defaultKPopAttributes = {
 const key = ref(0)
 const stagingKey = ref(0)
 
-const multiselectWrapperId = attrs.id ? String(attrs.id) : useUniqueId() // unique id for the KLabel `for` attribute
-const multiselectKey = useUniqueId()
+const multiselectWrapperId = attrs.id ? String(attrs.id) : useId() // unique id for the KLabel `for` attribute
+const multiselectKey = useId()
 
 const multiselectElement = ref<HTMLDivElement | null>(null)
 const multiselectInputElement = ref<InstanceType<typeof KInput> | null>(null)
@@ -835,7 +834,7 @@ const handleAddItem = (): void => {
   const pos = unfilteredItems.value.length + 1
   const item: MultiselectItem = {
     label: sanitizeInput(filterString.value + ''),
-    value: useUniqueId(),
+    value: useId(),
     key: `${sanitizeInput(filterString.value).replace(/ /gi, '-')?.replace(/[^a-z0-9-_]/gi, '')}-${pos}`,
   }
   emit('item-added', item)
diff --git a/src/components/KPop/KPop.vue b/src/components/KPop/KPop.vue
index fe331fe967..f23407b28b 100644
--- a/src/components/KPop/KPop.vue
+++ b/src/components/KPop/KPop.vue
@@ -83,7 +83,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, computed, watch } from 'vue'
+import { ref, onMounted, onBeforeUnmount, computed, watch, useId } from 'vue'
 import type { PropType } from 'vue'
 import { useFloating, autoUpdate, autoPlacement, flip, shift } from '@floating-ui/vue'
 import type { PopPlacements, PopTrigger } from '@/types'
@@ -92,7 +92,6 @@ import KButton from '@/components/KButton/KButton.vue'
 import useUtilities from '@/composables/useUtilities'
 import { CloseIcon } from '@kong/icons'
 import { KUI_ICON_SIZE_30 } from '@kong/design-tokens'
-import useUniqueId from '@/composables/useUniqueId'
 
 const props = defineProps({
   buttonText: {
@@ -163,8 +162,8 @@ const emit = defineEmits(['open', 'close', 'popover-click'])
 
 const { getSizeFromString } = useUtilities()
 
-const popoverId = useUniqueId()
-const titleId = useUniqueId()
+const popoverId = useId()
+const titleId = useId()
 const kPopoverElement = ref<HTMLElement | null>(null)
 const triggerWrapperElement = ref<HTMLElement | null>(null)
 const popoverElement = ref<HTMLElement | null>(null)
diff --git a/src/components/KRadio/KRadio.vue b/src/components/KRadio/KRadio.vue
index 3b66da9bc9..7c94a949e8 100644
--- a/src/components/KRadio/KRadio.vue
+++ b/src/components/KRadio/KRadio.vue
@@ -89,11 +89,10 @@
 
 <script lang="ts">
 import type { PropType } from 'vue'
-import { computed, useAttrs, useSlots } from 'vue'
+import { computed, useAttrs, useId, useSlots } from 'vue'
 import type { RadioTypes, LabelAttributes } from '@/types'
 import { RadioTypesArray } from '@/types'
 import KLabel from '@/components/KLabel/KLabel.vue'
-import useUniqueId from '@/composables/useUniqueId'
 
 export default {
   inheritAttrs: false,
@@ -177,7 +176,7 @@ const props = defineProps({
 const slots = useSlots()
 const attrs = useAttrs()
 
-const inputId = attrs.id ? String(attrs.id) : useUniqueId()
+const inputId = attrs.id ? String(attrs.id) : useId()
 const isDisabled = computed((): boolean => attrs?.disabled !== undefined && String(attrs?.disabled) !== 'false')
 const hasLabel = computed((): boolean => !!(props.label || slots.default))
 // for regular radio we only show description if there is a label or default slot
diff --git a/src/components/KSelect/KSelect.vue b/src/components/KSelect/KSelect.vue
index f40f791988..afe0962766 100644
--- a/src/components/KSelect/KSelect.vue
+++ b/src/components/KSelect/KSelect.vue
@@ -203,7 +203,7 @@
 
 <script setup lang="ts">
 import type { Ref, PropType } from 'vue'
-import { ref, computed, watch, nextTick, useAttrs, useSlots, onUnmounted, onMounted } from 'vue'
+import { ref, computed, watch, nextTick, useAttrs, useSlots, onUnmounted, onMounted, useId } from 'vue'
 import useUtilities from '@/composables/useUtilities'
 import KLabel from '@/components/KLabel/KLabel.vue'
 import KInput from '@/components/KInput/KInput.vue'
@@ -220,7 +220,6 @@ import type {
 import { ChevronDownIcon, CloseIcon, ProgressIcon } from '@kong/icons'
 import { ResizeObserverHelper } from '@/utilities/resizeObserverHelper'
 import { sanitizeInput } from '@/utilities/sanitizeInput'
-import useUniqueId from '@/composables/useUniqueId'
 import { useEventListener } from '@vueuse/core'
 
 defineOptions({
@@ -364,7 +363,7 @@ const emit = defineEmits<{
 const attrs = useAttrs()
 const slots = useSlots()
 
-const selectInputId = attrs.id ? String(attrs.id) : useUniqueId()
+const selectInputId = attrs.id ? String(attrs.id) : useId()
 
 const isDropdownOpen = ref<boolean>(false)
 
@@ -405,7 +404,7 @@ const uniqueFilterQuery = computed((): boolean => {
   return true
 })
 
-const selectWrapperId = useUniqueId() // unique id for the KPop target
+const selectWrapperId = useId() // unique id for the KPop target
 const selectedItem = ref<SelectItem | null>(null)
 const selectItems = ref<SelectItem[]>([])
 const inputFocused = ref<boolean>(false)
@@ -506,7 +505,7 @@ const handleAddItem = (): void => {
   const pos = (selectItems.value?.length || 0) + 1
   const item: SelectItem = {
     label: sanitizeInput(filterQuery.value),
-    value: useUniqueId(),
+    value: useId(),
     key: `${sanitizeInput(filterQuery.value).replace(/ /gi, '-')?.replace(/[^a-z0-9-_]/gi, '')}-${pos}`,
     custom: true,
   }
diff --git a/src/components/KTable/KTable.vue b/src/components/KTable/KTable.vue
index 3ca77ab2d1..2e21e4dfc4 100644
--- a/src/components/KTable/KTable.vue
+++ b/src/components/KTable/KTable.vue
@@ -250,7 +250,7 @@
 
 <script setup lang="ts">
 import type { Ref, PropType } from 'vue'
-import { ref, watch, computed, onMounted, useAttrs, useSlots } from 'vue'
+import { ref, watch, computed, onMounted, useAttrs, useSlots, useId } from 'vue'
 import KButton from '@/components/KButton/KButton.vue'
 import KEmptyState from '@/components/KEmptyState/KEmptyState.vue'
 import KSkeleton from '@/components/KSkeleton/KSkeleton.vue'
@@ -276,7 +276,6 @@ import type {
 import { EmptyStateIconVariants } from '@/types'
 import { KUI_COLOR_TEXT_NEUTRAL, KUI_ICON_SIZE_30 } from '@kong/design-tokens'
 import ColumnVisibilityMenu from './../KTableView/ColumnVisibilityMenu.vue'
-import useUniqueId from '@/composables/useUniqueId'
 
 const { useDebounce, useRequest, useSwrvState, clientSideSorter: defaultClientSideSorter, getSizeFromString } = useUtilities()
 
@@ -512,7 +511,7 @@ const emit = defineEmits<{
 const attrs = useAttrs()
 const slots = useSlots()
 
-const tableId = useUniqueId()
+const tableId = useId()
 const defaultFetcherProps = {
   pageSize: 15,
   page: 1,
diff --git a/src/components/KTableData/KTableData.vue b/src/components/KTableData/KTableData.vue
index a5f5fab547..cf9bd6aa29 100644
--- a/src/components/KTableData/KTableData.vue
+++ b/src/components/KTableData/KTableData.vue
@@ -155,7 +155,7 @@
 
 <script setup lang="ts">
 import type { Ref } from 'vue'
-import { ref, watch, computed, onMounted, useSlots } from 'vue'
+import { ref, watch, computed, onMounted, useSlots, useId } from 'vue'
 import KTableView from '@/components/KTableView/KTableView.vue'
 import useUtilities from '@/composables/useUtilities'
 import type {
@@ -178,7 +178,6 @@ import type {
   RowExpandPayload,
 } from '@/types'
 import { EmptyStateIconVariants } from '@/types'
-import useUniqueId from '@/composables/useUniqueId'
 import { getInitialPageSize, DEFAULT_PAGE_SIZE } from '@/utilities'
 
 const props = withDefaults(defineProps<TableDataProps>(), {
@@ -236,7 +235,7 @@ const emit = defineEmits<{
   (e: 'update:row-expanded', data: RowExpandPayload): void
 }>()
 
-const tableId = useUniqueId()
+const tableId = useId()
 
 const tableData = ref<Record<string, any>[]>([])
 const tableHeaders = computed((): TableDataHeader[] => props.sortable ? props.headers : props.headers.map((header) => ({ ...header, sortable: false })))
diff --git a/src/components/KTextArea/KTextArea.vue b/src/components/KTextArea/KTextArea.vue
index 32409455ae..302ad22ae8 100644
--- a/src/components/KTextArea/KTextArea.vue
+++ b/src/components/KTextArea/KTextArea.vue
@@ -45,11 +45,10 @@
 </template>
 
 <script lang="ts">
-import { ref, computed, watch, useAttrs, useSlots } from 'vue'
+import { ref, computed, watch, useAttrs, useSlots, useId } from 'vue'
 import useUtilities from '@/composables/useUtilities'
 import KLabel from '@/components/KLabel/KLabel.vue'
 import type { TextAreaLimitExceed } from '@/types'
-import useUniqueId from '@/composables/useUniqueId'
 
 const DEFAULT_CHARACTER_LIMIT = 2048
 
@@ -161,7 +160,7 @@ const value = computed({
   },
 })
 
-const textAreaId = attrs.id ? String(attrs.id) : useUniqueId()
+const textAreaId = attrs.id ? String(attrs.id) : useId()
 
 const modifiedAttrs = computed((): Record<string, any> => {
   const $attrs = { ...attrs }
diff --git a/src/components/KToaster/ToastManager.ts b/src/components/KToaster/ToastManager.ts
index 81bd960a1f..b6b75c9452 100644
--- a/src/components/KToaster/ToastManager.ts
+++ b/src/components/KToaster/ToastManager.ts
@@ -1,9 +1,8 @@
-import { createVNode, render, ref } from 'vue'
+import { createVNode, render, ref, useId } from 'vue'
 import type { Ref, VNode } from 'vue'
 import type { Toast, ToasterAppearance, ToasterOptions } from '@/types'
 import { ToasterAppearances } from '@/types'
 import KToaster from '@/components/KToaster/KToaster.vue'
-import useUniqueId from '@/composables/useUniqueId'
 
 const toasterContainerId = 'kongponents-toaster-container'
 
@@ -51,7 +50,7 @@ export default class ToastManager {
     // @ts-ignore
     const { key, timeoutMilliseconds, appearance, message, title } = args
 
-    const toastKey: any = key || useUniqueId()
+    const toastKey: any = key || useId()
     const toastAppearance: ToasterAppearance = (appearance && Object.keys(ToasterAppearances).indexOf(appearance) !== -1) ? appearance : toasterDefaults.appearance
     const timer: number = this.setTimer(key, timeoutMilliseconds || toasterDefaults.timeoutMilliseconds)
     const toasterMessage = typeof args === 'string' ? args : message
diff --git a/src/components/KTooltip/KTooltip.vue b/src/components/KTooltip/KTooltip.vue
index 0ff3ca2b8b..83343f4df3 100644
--- a/src/components/KTooltip/KTooltip.vue
+++ b/src/components/KTooltip/KTooltip.vue
@@ -35,12 +35,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed, useSlots } from 'vue'
+import { computed, useId, useSlots } from 'vue'
 import type { PropType } from 'vue'
 import KPop from '@/components/KPop/KPop.vue'
 import type { PopPlacements } from '@/types'
 import { PopPlacementsArray } from '@/types'
-import useUniqueId from '@/composables/useUniqueId'
 
 defineOptions({
   inheritAttrs: false,
@@ -95,7 +94,7 @@ const slots = useSlots()
 
 const showTooltip = computed((): boolean => !!props.text || !!props.label || !!slots.content)
 
-const randomTooltipId = useUniqueId()
+const randomTooltipId = useId()
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/composables/useUniqueId.ts b/src/composables/useUniqueId.ts
deleted file mode 100644
index f1cea44cd0..0000000000
--- a/src/composables/useUniqueId.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { useId } from 'vue'
-
-export default useId as () => string