From 2fc05735774f0ad1a08be791054dcd9cf1812af6 Mon Sep 17 00:00:00 2001
From: i7slegend <fordik4@gmail.com>
Date: Fri, 10 May 2024 17:16:53 +0300
Subject: [PATCH] refactor(unique-id): use composition api to generate
 component unique id

---
 components/lib/accordion/Accordion.vue        | 16 ++++++-------
 components/lib/autocomplete/AutoComplete.vue  | 16 ++++++-------
 components/lib/calendar/BaseCalendar.vue      |  4 ----
 components/lib/calendar/Calendar.vue          | 20 ++++++++--------
 .../lib/cascadeselect/CascadeSelect.vue       | 16 ++++++-------
 components/lib/chips/Chips.vue                | 18 +++++++-------
 components/lib/contextmenu/ContextMenu.vue    | 16 ++++++-------
 components/lib/datatable/ColumnFilter.vue     | 18 +++++++-------
 components/lib/dialog/Dialog.vue              | 18 +++++++-------
 components/lib/dock/DockSub.vue               | 18 +++++++-------
 components/lib/dropdown/Dropdown.vue          | 16 ++++++-------
 components/lib/fieldset/Fieldset.vue          | 16 ++++++-------
 components/lib/galleria/GalleriaContent.vue   | 16 ++++++-------
 components/lib/listbox/Listbox.vue            | 16 ++++++-------
 components/lib/megamenu/MegaMenu.vue          | 16 ++++++-------
 components/lib/menu/Menu.vue                  | 18 +++++++-------
 components/lib/menubar/Menubar.vue            | 16 ++++++-------
 components/lib/multiselect/MultiSelect.vue    | 16 ++++++-------
 components/lib/orderlist/OrderList.vue        | 18 +++++++-------
 components/lib/panel/Panel.vue                | 16 ++++++-------
 components/lib/panelmenu/PanelMenu.vue        | 18 +++++++-------
 components/lib/password/Password.vue          | 18 +++++++-------
 components/lib/picklist/PickList.vue          | 16 ++++++-------
 components/lib/rating/Rating.vue              | 18 +++++++-------
 components/lib/scrollpanel/ScrollPanel.vue    | 18 +++++++-------
 components/lib/speeddial/SpeedDial.vue        | 16 ++++++-------
 components/lib/splitbutton/SplitButton.vue    | 18 +++++++-------
 components/lib/stepper/Stepper.vue            | 16 ++++++-------
 components/lib/tabview/TabView.vue            | 16 ++++++-------
 components/lib/tieredmenu/TieredMenu.vue      | 16 ++++++-------
 components/lib/treeselect/TreeSelect.vue      | 16 ++++++-------
 components/lib/utils/Utils.d.ts               |  3 +++
 components/lib/utils/Utils.js                 |  3 ++-
 components/lib/utils/useUniqueId.js           | 24 +++++++++++++++++++
 34 files changed, 271 insertions(+), 269 deletions(-)
 create mode 100644 components/lib/utils/useUniqueId.js

diff --git a/components/lib/accordion/Accordion.vue b/components/lib/accordion/Accordion.vue
index 534e9b37f5..453134a4d2 100755
--- a/components/lib/accordion/Accordion.vue
+++ b/components/lib/accordion/Accordion.vue
@@ -57,7 +57,7 @@
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import ChevronRightIcon from 'primevue/icons/chevronright';
 import Ripple from 'primevue/ripple';
-import { DomHandler, UniqueComponentId } from 'primevue/utils';
+import { DomHandler, useUniqueId } from 'primevue/utils';
 import { mergeProps } from 'vue';
 import BaseAccordion from './BaseAccordion.vue';
 
@@ -66,19 +66,19 @@ export default {
     extends: BaseAccordion,
     inheritAttrs: false,
     emits: ['update:activeIndex', 'tab-open', 'tab-close', 'tab-click'],
+    setup() {
+        const { id } = useUniqueId();
+
+        return {
+            id
+        }
+    },
     data() {
         return {
-            id: this.$attrs.id,
             d_activeIndex: this.activeIndex
         };
     },
     watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
-        },
         activeIndex(newValue) {
             this.d_activeIndex = newValue;
         }
diff --git a/components/lib/autocomplete/AutoComplete.vue b/components/lib/autocomplete/AutoComplete.vue
index ee5b848a74..635315785a 100755
--- a/components/lib/autocomplete/AutoComplete.vue
+++ b/components/lib/autocomplete/AutoComplete.vue
@@ -173,7 +173,7 @@ import TimesCircleIcon from 'primevue/icons/timescircle';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
-import { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
+import { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, ZIndexUtils, useUniqueId } from 'primevue/utils';
 import VirtualScroller from 'primevue/virtualscroller';
 import BaseAutoComplete from './BaseAutoComplete.vue';
 
@@ -189,9 +189,15 @@ export default {
     virtualScroller: null,
     searchTimeout: null,
     dirty: false,
+    setup() {
+        const { id } = useUniqueId();
+
+        return {
+            id
+        }
+    },
     data() {
         return {
-            id: this.$attrs.id,
             clicked: false,
             focused: false,
             focusedOptionIndex: -1,
@@ -201,12 +207,6 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
-        },
         suggestions() {
             if (this.searching) {
                 this.show();
diff --git a/components/lib/calendar/BaseCalendar.vue b/components/lib/calendar/BaseCalendar.vue
index 6b0e7940f9..01dd216862 100644
--- a/components/lib/calendar/BaseCalendar.vue
+++ b/components/lib/calendar/BaseCalendar.vue
@@ -196,10 +196,6 @@ export default {
             type: String,
             default: null
         },
-        id: {
-            type: String,
-            default: null
-        },
         inputId: {
             type: String,
             default: null
diff --git a/components/lib/calendar/Calendar.vue b/components/lib/calendar/Calendar.vue
index 82dabdba3c..353ea2417a 100755
--- a/components/lib/calendar/Calendar.vue
+++ b/components/lib/calendar/Calendar.vue
@@ -1,5 +1,5 @@
 <template>
-    <span ref="container" :id="d_id" :class="cx('root')" :style="sx('root')" v-bind="ptmi('root')">
+    <span ref="container" :id="id" :class="cx('root')" :style="sx('root')" v-bind="ptmi('root')">
         <input
             v-if="!inline"
             :ref="inputRef"
@@ -520,7 +520,7 @@ import ChevronUpIcon from 'primevue/icons/chevronup';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
-import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
+import { ConnectedOverlayScrollHandler, DomHandler, ZIndexUtils, UniqueComponentId, useUniqueId } from 'primevue/utils';
 import BaseCalendar from './BaseCalendar.vue';
 
 export default {
@@ -543,9 +543,15 @@ export default {
     timePickerTimer: null,
     preventFocus: false,
     typeUpdate: false,
+    setup() {
+        const { id } = useUniqueId();
+
+        return {
+            id
+        }
+    },
     data() {
         return {
-            d_id: this.id,
             currentMonth: null,
             currentYear: null,
             currentHour: null,
@@ -560,12 +566,6 @@ export default {
         };
     },
     watch: {
-        id: {
-            immediate: true,
-            handler: function (newValue) {
-                this.d_id = newValue || UniqueComponentId();
-            }
-        },
         modelValue(newValue) {
             this.updateCurrentMetaData();
 
@@ -3010,7 +3010,7 @@ export default {
             return this.numberOfMonths > 1 || this.disabled;
         },
         panelId() {
-            return this.d_id + '_panel';
+            return this.id + '_panel';
         }
     },
     components: {
diff --git a/components/lib/cascadeselect/CascadeSelect.vue b/components/lib/cascadeselect/CascadeSelect.vue
index f154895d8a..d7285c5a49 100644
--- a/components/lib/cascadeselect/CascadeSelect.vue
+++ b/components/lib/cascadeselect/CascadeSelect.vue
@@ -83,7 +83,7 @@ import ChevronDownIcon from 'primevue/icons/chevrondown';
 import SpinnerIcon from 'primevue/icons/spinner';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
-import { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
+import { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, ZIndexUtils, useUniqueId } from 'primevue/utils';
 import BaseCascadeSelect from './BaseCascadeSelect.vue';
 import CascadeSelectSub from './CascadeSelectSub.vue';
 
@@ -98,9 +98,15 @@ export default {
     overlay: null,
     searchTimeout: null,
     searchValue: null,
+    setup() {
+        const { id } = useUniqueId();
+
+        return {
+            id
+        }
+    },
     data() {
         return {
-            id: this.$attrs.id,
             clicked: false,
             focused: false,
             focusedOptionInfo: { index: -1, level: 0, parentKey: '' },
@@ -110,12 +116,6 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
-        },
         options() {
             this.autoUpdateModel();
         }
diff --git a/components/lib/chips/Chips.vue b/components/lib/chips/Chips.vue
index ddce4478ec..5fad934b63 100755
--- a/components/lib/chips/Chips.vue
+++ b/components/lib/chips/Chips.vue
@@ -59,30 +59,28 @@
 
 <script>
 import TimesCircleIcon from 'primevue/icons/timescircle';
-import { UniqueComponentId } from 'primevue/utils';
 import BaseChips from './BaseChips.vue';
+import { useUniqueId } from 'primevue/utils';
 
 export default {
     name: 'Chips',
     extends: BaseChips,
     inheritAttrs: false,
     emits: ['update:modelValue', 'add', 'remove', 'focus', 'blur'],
+    setup() {
+        const { id } = useUniqueId();
+
+        return {
+            id
+        }
+    },
     data() {
         return {
-            id: this.$attrs.id,
             inputValue: null,
             focused: false,
             focusedIndex: null
         };
     },
-    watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
-        }
-    },
     methods: {
         onWrapperClick() {
             this.$refs.input.focus();
diff --git a/components/lib/contextmenu/ContextMenu.vue b/components/lib/contextmenu/ContextMenu.vue
index ddd0c46246..3b49deebaa 100755
--- a/components/lib/contextmenu/ContextMenu.vue
+++ b/components/lib/contextmenu/ContextMenu.vue
@@ -36,7 +36,7 @@
 
 <script>
 import Portal from 'primevue/portal';
-import { DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
+import { DomHandler, ObjectUtils, ZIndexUtils, useUniqueId } from 'primevue/utils';
 import BaseContextMenu from './BaseContextMenu.vue';
 import ContextMenuSub from './ContextMenuSub.vue';
 
@@ -53,9 +53,15 @@ export default {
     pageY: null,
     container: null,
     list: null,
+    setup() {
+        const { id } = useUniqueId();
+
+        return {
+            id
+        }
+    },
     data() {
         return {
-            id: this.$attrs.id,
             focused: false,
             focusedItemInfo: { index: -1, level: 0, parentKey: '' },
             activeItemPath: [],
@@ -64,12 +70,6 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
-        },
         activeItemPath(newPath) {
             if (ObjectUtils.isNotEmpty(newPath)) {
                 this.bindOutsideClickListener();
diff --git a/components/lib/datatable/ColumnFilter.vue b/components/lib/datatable/ColumnFilter.vue
index 6f7d23b8eb..5cba9843ac 100644
--- a/components/lib/datatable/ColumnFilter.vue
+++ b/components/lib/datatable/ColumnFilter.vue
@@ -162,7 +162,7 @@ import PlusIcon from 'primevue/icons/plus';
 import TrashIcon from 'primevue/icons/trash';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
-import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
+import { ConnectedOverlayScrollHandler, DomHandler, ZIndexUtils, useUniqueId } from 'primevue/utils';
 import { mergeProps } from 'vue';
 
 export default {
@@ -170,6 +170,13 @@ export default {
     hostName: 'DataTable',
     extends: BaseComponent,
     emits: ['filter-change', 'filter-apply', 'operator-change', 'matchmode-change', 'constraint-add', 'constraint-remove', 'filter-clear', 'apply-click'],
+    setup() {
+        const { id } = useUniqueId();
+
+        return {
+            id
+        }
+    },
     props: {
         field: {
             type: String,
@@ -279,20 +286,11 @@ export default {
     },
     data() {
         return {
-            id: this.$attrs.id,
             overlayVisible: false,
             defaultMatchMode: null,
             defaultOperator: null
         };
     },
-    watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
-        }
-    },
     overlay: null,
     selfClick: false,
     overlayEventListener: null,
diff --git a/components/lib/dialog/Dialog.vue b/components/lib/dialog/Dialog.vue
index 708044f70c..1171c8f9f5 100755
--- a/components/lib/dialog/Dialog.vue
+++ b/components/lib/dialog/Dialog.vue
@@ -64,7 +64,7 @@ import WindowMaximizeIcon from 'primevue/icons/windowmaximize';
 import WindowMinimizeIcon from 'primevue/icons/windowminimize';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
-import { DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
+import { DomHandler, ZIndexUtils, UniqueComponentId, useUniqueId } from 'primevue/utils';
 import { computed } from 'vue';
 import BaseDialog from './BaseDialog.vue';
 
@@ -73,6 +73,13 @@ export default {
     extends: BaseDialog,
     inheritAttrs: false,
     emits: ['update:visible', 'show', 'hide', 'after-hide', 'maximize', 'unmaximize', 'dragend'],
+    setup() {
+        const { id } = useUniqueId();
+
+        return {
+            id
+        }
+    },
     provide() {
         return {
             dialogRef: computed(() => this._instance)
@@ -80,21 +87,12 @@ export default {
     },
     data() {
         return {
-            id: this.$attrs.id,
             containerVisible: this.visible,
             maximized: false,
             focusableMax: null,
             focusableClose: null
         };
     },
-    watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
-        }
-    },
     documentKeydownListener: null,
     container: null,
     mask: null,
diff --git a/components/lib/dock/DockSub.vue b/components/lib/dock/DockSub.vue
index 2b4cb368ea..7628623097 100644
--- a/components/lib/dock/DockSub.vue
+++ b/components/lib/dock/DockSub.vue
@@ -58,7 +58,7 @@
 import BaseComponent from 'primevue/basecomponent';
 import Ripple from 'primevue/ripple';
 import Tooltip from 'primevue/tooltip';
-import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
+import { DomHandler, ObjectUtils, useUniqueId } from 'primevue/utils';
 import { mergeProps } from 'vue';
 
 export default {
@@ -66,6 +66,13 @@ export default {
     hostName: 'Dock',
     extends: BaseComponent,
     emits: ['focus', 'blur'],
+    setup(props) {
+        const { id } = useUniqueId(toRef(props, 'menuId'));
+
+        return {
+            id
+        }
+    },
     props: {
         position: {
             type: String,
@@ -99,20 +106,11 @@ export default {
     },
     data() {
         return {
-            id: this.menuId,
             currentIndex: -3,
             focused: false,
             focusedOptionIndex: -1
         };
     },
-    watch: {
-        menuId: {
-            immediate: true,
-            handler(newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
-        }
-    },
     methods: {
         getItemId(index) {
             return `${this.id}_${index}`;
diff --git a/components/lib/dropdown/Dropdown.vue b/components/lib/dropdown/Dropdown.vue
index 9a223bac1f..742a255b9c 100755
--- a/components/lib/dropdown/Dropdown.vue
+++ b/components/lib/dropdown/Dropdown.vue
@@ -188,7 +188,7 @@ import TimesIcon from 'primevue/icons/times';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
-import { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
+import { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, ZIndexUtils, useUniqueId } from 'primevue/utils';
 import VirtualScroller from 'primevue/virtualscroller';
 import BaseDropdown from './BaseDropdown.vue';
 
@@ -207,9 +207,15 @@ export default {
     searchTimeout: null,
     searchValue: null,
     isModelValueChanged: false,
+    setup() {
+        const { id } = useUniqueId();
+
+        return {
+            id
+        }
+    },
     data() {
         return {
-            id: this.$attrs.id,
             clicked: false,
             focused: false,
             focusedOptionIndex: -1,
@@ -218,12 +224,6 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
-        },
         modelValue() {
             this.isModelValueChanged = true;
         },
diff --git a/components/lib/fieldset/Fieldset.vue b/components/lib/fieldset/Fieldset.vue
index 22ecc2303e..9c14e78ac5 100755
--- a/components/lib/fieldset/Fieldset.vue
+++ b/components/lib/fieldset/Fieldset.vue
@@ -39,27 +39,27 @@
 import MinusIcon from 'primevue/icons/minus';
 import PlusIcon from 'primevue/icons/plus';
 import Ripple from 'primevue/ripple';
-import { UniqueComponentId } from 'primevue/utils';
 import BaseFieldset from './BaseFieldset.vue';
+import { useUniqueId } from 'primevue/utils';
 
 export default {
     name: 'Fieldset',
     extends: BaseFieldset,
     inheritAttrs: false,
     emits: ['update:collapsed', 'toggle'],
+    setup() {
+        const { id } = useUniqueId();
+
+        return {
+            id
+        }
+    },
     data() {
         return {
-            id: this.$attrs.id,
             d_collapsed: this.collapsed
         };
     },
     watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
-        },
         collapsed(newValue) {
             this.d_collapsed = newValue;
         }
diff --git a/components/lib/galleria/GalleriaContent.vue b/components/lib/galleria/GalleriaContent.vue
index de8e91df01..793c6bee3f 100755
--- a/components/lib/galleria/GalleriaContent.vue
+++ b/components/lib/galleria/GalleriaContent.vue
@@ -63,9 +63,9 @@
 import BaseComponent from 'primevue/basecomponent';
 import TimesIcon from 'primevue/icons/times';
 import Ripple from 'primevue/ripple';
-import { UniqueComponentId } from 'primevue/utils';
 import GalleriaItem from './GalleriaItem.vue';
 import GalleriaThumbnails from './GalleriaThumbnails.vue';
+import { useUniqueId } from 'primevue/utils';
 
 export default {
     name: 'GalleriaContent',
@@ -74,21 +74,21 @@ export default {
     inheritAttrs: false,
     interval: null,
     emits: ['activeitem-change', 'mask-hide'],
+    setup() {
+        const { id } = useUniqueId();
+
+        return {
+            id
+        }
+    },
     data() {
         return {
-            id: this.$attrs.id,
             activeIndex: this.$attrs.activeIndex,
             numVisible: this.$attrs.numVisible,
             slideShowActive: false
         };
     },
     watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
-        },
         '$attrs.value': function (newVal) {
             if (newVal && newVal.length < this.numVisible) {
                 this.numVisible = newVal.length;
diff --git a/components/lib/listbox/Listbox.vue b/components/lib/listbox/Listbox.vue
index 0134c3f497..30028ffa7f 100755
--- a/components/lib/listbox/Listbox.vue
+++ b/components/lib/listbox/Listbox.vue
@@ -125,7 +125,7 @@
 import { FilterService } from 'primevue/api';
 import SearchIcon from 'primevue/icons/search';
 import Ripple from 'primevue/ripple';
-import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
+import { DomHandler, ObjectUtils, useUniqueId } from 'primevue/utils';
 import VirtualScroller from 'primevue/virtualscroller';
 import BaseListbox from './BaseListbox.vue';
 
@@ -140,21 +140,21 @@ export default {
     startRangeIndex: -1,
     searchTimeout: null,
     searchValue: '',
+    setup() {
+        const { id } = useUniqueId();
+
+        return {
+            id
+        }
+    },
     data() {
         return {
-            id: this.$attrs.id,
             filterValue: null,
             focused: false,
             focusedOptionIndex: -1
         };
     },
     watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
-        },
         options() {
             this.autoUpdateModel();
         }
diff --git a/components/lib/megamenu/MegaMenu.vue b/components/lib/megamenu/MegaMenu.vue
index 4e9ee68790..008603199c 100755
--- a/components/lib/megamenu/MegaMenu.vue
+++ b/components/lib/megamenu/MegaMenu.vue
@@ -57,7 +57,7 @@
 
 <script>
 import BarsIcon from 'primevue/icons/bars';
-import { DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
+import { DomHandler, ObjectUtils, ZIndexUtils, useUniqueId } from 'primevue/utils';
 import BaseMegaMenu from './BaseMegaMenu.vue';
 import MegaMenuSub from './MegaMenuSub.vue';
 
@@ -73,9 +73,15 @@ export default {
     menubar: null,
     searchTimeout: null,
     searchValue: null,
+    setup() {
+        const { id } = useUniqueId();
+
+        return {
+            id
+        }
+    },
     data() {
         return {
-            id: this.$attrs.id,
             mobileActive: false,
             focused: false,
             focusedItemInfo: { index: -1, key: '', parentKey: '' },
@@ -86,12 +92,6 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
-        },
         activeItem(newItem) {
             if (ObjectUtils.isNotEmpty(newItem)) {
                 this.bindOutsideClickListener();
diff --git a/components/lib/menu/Menu.vue b/components/lib/menu/Menu.vue
index ece3fa0781..0a4337134d 100644
--- a/components/lib/menu/Menu.vue
+++ b/components/lib/menu/Menu.vue
@@ -53,7 +53,7 @@
 <script>
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
-import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
+import { ConnectedOverlayScrollHandler, DomHandler, ZIndexUtils, useUniqueId } from 'primevue/utils';
 import BaseMenu from './BaseMenu.vue';
 import Menuitem from './Menuitem.vue';
 
@@ -62,23 +62,21 @@ export default {
     extends: BaseMenu,
     inheritAttrs: false,
     emits: ['show', 'hide', 'focus', 'blur'],
+    setup() {
+        const { id } = useUniqueId();
+
+        return {
+            id
+        }
+    },
     data() {
         return {
-            id: this.$attrs.id,
             overlayVisible: false,
             focused: false,
             focusedOptionIndex: -1,
             selectedOptionIndex: -1
         };
     },
-    watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
-        }
-    },
     target: null,
     outsideClickListener: null,
     scrollHandler: null,
diff --git a/components/lib/menubar/Menubar.vue b/components/lib/menubar/Menubar.vue
index be2aece2da..5347bbd1a1 100755
--- a/components/lib/menubar/Menubar.vue
+++ b/components/lib/menubar/Menubar.vue
@@ -56,7 +56,7 @@
 
 <script>
 import BarsIcon from 'primevue/icons/bars';
-import { DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
+import { DomHandler, ObjectUtils, ZIndexUtils, useUniqueId } from 'primevue/utils';
 import BaseMenubar from './BaseMenubar.vue';
 import MenubarSub from './MenubarSub.vue';
 
@@ -66,9 +66,15 @@ export default {
     inheritAttrs: false,
     emits: ['focus', 'blur'],
     matchMediaListener: null,
+    setup() {
+        const { id } = useUniqueId();
+
+        return {
+            id
+        }
+    },
     data() {
         return {
-            id: this.$attrs.id,
             mobileActive: false,
             focused: false,
             focusedItemInfo: { index: -1, level: 0, parentKey: '' },
@@ -79,12 +85,6 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
-        },
         activeItemPath(newPath) {
             if (ObjectUtils.isNotEmpty(newPath)) {
                 this.bindOutsideClickListener();
diff --git a/components/lib/multiselect/MultiSelect.vue b/components/lib/multiselect/MultiSelect.vue
index dffaf637ad..47041cebb2 100755
--- a/components/lib/multiselect/MultiSelect.vue
+++ b/components/lib/multiselect/MultiSelect.vue
@@ -208,7 +208,7 @@ import TimesCircleIcon from 'primevue/icons/timescircle';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
-import { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
+import { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, ZIndexUtils, useUniqueId } from 'primevue/utils';
 import VirtualScroller from 'primevue/virtualscroller';
 import BaseMultiSelect from './BaseMultiSelect.vue';
 
@@ -227,9 +227,15 @@ export default {
     searchTimeout: null,
     searchValue: '',
     selectOnFocus: false,
+    setup() {
+        const { id } = useUniqueId();
+
+        return {
+            id
+        }
+    },
     data() {
         return {
-            id: this.$attrs.id,
             clicked: false,
             focused: false,
             focusedOptionIndex: -1,
@@ -238,12 +244,6 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
-        },
         options() {
             this.autoUpdateModel();
         }
diff --git a/components/lib/orderlist/OrderList.vue b/components/lib/orderlist/OrderList.vue
index 4e649f94e9..d6c90e11be 100755
--- a/components/lib/orderlist/OrderList.vue
+++ b/components/lib/orderlist/OrderList.vue
@@ -84,7 +84,7 @@ import AngleDoubleUpIcon from 'primevue/icons/angledoubleup';
 import AngleDownIcon from 'primevue/icons/angledown';
 import AngleUpIcon from 'primevue/icons/angleup';
 import Ripple from 'primevue/ripple';
-import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
+import { DomHandler, ObjectUtils, UniqueComponentId, useUniqueId } from 'primevue/utils';
 import BaseOrderList from './BaseOrderList.vue';
 
 export default {
@@ -96,22 +96,20 @@ export default {
     reorderDirection: null,
     styleElement: null,
     list: null,
+    setup() {
+        const { id } = useUniqueId();
+
+        return {
+            id
+        }
+    },
     data() {
         return {
-            id: this.$attrs.id,
             d_selection: this.selection,
             focused: false,
             focusedOptionIndex: -1
         };
     },
-    watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
-        }
-    },
     beforeUnmount() {
         this.destroyStyle();
     },
diff --git a/components/lib/panel/Panel.vue b/components/lib/panel/Panel.vue
index 91aaff1ba0..a647328f30 100755
--- a/components/lib/panel/Panel.vue
+++ b/components/lib/panel/Panel.vue
@@ -43,27 +43,27 @@
 import MinusIcon from 'primevue/icons/minus';
 import PlusIcon from 'primevue/icons/plus';
 import Ripple from 'primevue/ripple';
-import { UniqueComponentId } from 'primevue/utils';
 import BasePanel from './BasePanel.vue';
+import { useUniqueId } from 'primevue/utils';
 
 export default {
     name: 'Panel',
     extends: BasePanel,
     inheritAttrs: false,
     emits: ['update:collapsed', 'toggle'],
+    setup() {
+        const { id } = useUniqueId();
+
+        return {
+            id
+        }
+    },
     data() {
         return {
-            id: this.$attrs.id,
             d_collapsed: this.collapsed
         };
     },
     watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
-        },
         collapsed(newValue) {
             this.d_collapsed = newValue;
         }
diff --git a/components/lib/panelmenu/PanelMenu.vue b/components/lib/panelmenu/PanelMenu.vue
index 03f7573df7..7afaad7c90 100644
--- a/components/lib/panelmenu/PanelMenu.vue
+++ b/components/lib/panelmenu/PanelMenu.vue
@@ -55,7 +55,7 @@
 <script>
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import ChevronRightIcon from 'primevue/icons/chevronright';
-import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
+import { DomHandler, ObjectUtils, useUniqueId } from 'primevue/utils';
 import { mergeProps } from 'vue';
 import BasePanelMenu from './BasePanelMenu.vue';
 import PanelMenuList from './PanelMenuList.vue';
@@ -65,21 +65,19 @@ export default {
     extends: BasePanelMenu,
     inheritAttrs: false,
     emits: ['update:expandedKeys', 'panel-open', 'panel-close'],
+    setup() {
+        const { id } = useUniqueId();
+
+        return {
+            id
+        }
+    },
     data() {
         return {
-            id: this.$attrs.id,
             activeItem: null,
             activeItems: []
         };
     },
-    watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
-        }
-    },
     methods: {
         getItemProp(item, name) {
             return item ? ObjectUtils.getItemValue(item[name]) : undefined;
diff --git a/components/lib/password/Password.vue b/components/lib/password/Password.vue
index c0fd068dd0..813acfe7ed 100755
--- a/components/lib/password/Password.vue
+++ b/components/lib/password/Password.vue
@@ -58,7 +58,7 @@ import EyeSlashIcon from 'primevue/icons/eyeslash';
 import InputText from 'primevue/inputtext';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
-import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
+import { ConnectedOverlayScrollHandler, DomHandler, ZIndexUtils, useUniqueId } from 'primevue/utils';
 import BasePassword from './BasePassword.vue';
 
 export default {
@@ -66,9 +66,15 @@ export default {
     extends: BasePassword,
     inheritAttrs: false,
     emits: ['update:modelValue', 'change', 'focus', 'blur', 'invalid'],
+    setup() {
+        const { id } = useUniqueId();
+
+        return {
+            id
+        }
+    },
     data() {
         return {
-            id: this.$attrs.id,
             overlayVisible: false,
             meter: null,
             infoText: null,
@@ -76,14 +82,6 @@ export default {
             unmasked: false
         };
     },
-    watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
-        }
-    },
     mediumCheckRegExp: null,
     strongCheckRegExp: null,
     resizeListener: null,
diff --git a/components/lib/picklist/PickList.vue b/components/lib/picklist/PickList.vue
index 85df8dee2a..ffcf8e01f8 100755
--- a/components/lib/picklist/PickList.vue
+++ b/components/lib/picklist/PickList.vue
@@ -195,7 +195,7 @@ import AngleLeftIcon from 'primevue/icons/angleleft';
 import AngleRightIcon from 'primevue/icons/angleright';
 import AngleUpIcon from 'primevue/icons/angleup';
 import Ripple from 'primevue/ripple';
-import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
+import { DomHandler, ObjectUtils, UniqueComponentId, useUniqueId } from 'primevue/utils';
 import BasePickList from './BasePickList.vue';
 
 export default {
@@ -208,9 +208,15 @@ export default {
     styleElement: null,
     media: null,
     mediaChangeListener: null,
+    setup() {
+        const { id } = useUniqueId();
+
+        return {
+            id
+        }
+    },
     data() {
         return {
-            id: this.$attrs.id,
             d_selection: this.selection,
             focused: {
                 sourceList: false,
@@ -221,12 +227,6 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
-        },
         selection(newValue) {
             this.d_selection = newValue;
         },
diff --git a/components/lib/rating/Rating.vue b/components/lib/rating/Rating.vue
index 485fb0bc0a..bde64347fb 100755
--- a/components/lib/rating/Rating.vue
+++ b/components/lib/rating/Rating.vue
@@ -52,7 +52,7 @@
 import BanIcon from 'primevue/icons/ban';
 import StarIcon from 'primevue/icons/star';
 import StarFillIcon from 'primevue/icons/starfill';
-import { DomHandler, UniqueComponentId } from 'primevue/utils';
+import { DomHandler, useUniqueId } from 'primevue/utils';
 import BaseRating from './BaseRating.vue';
 
 export default {
@@ -60,21 +60,19 @@ export default {
     extends: BaseRating,
     inheritAttrs: false,
     emits: ['update:modelValue', 'change', 'focus', 'blur'],
+    setup(props, { attrs }) {
+        const { id } = useUniqueId(() => attrs.name);
+
+        return {
+            name: id
+        }
+    },
     data() {
         return {
-            name: this.$attrs.name,
             focusedOptionIndex: -1,
             isFocusVisibleItem: true
         };
     },
-    watch: {
-        '$attrs.name': {
-            immediate: true,
-            handler: function (newValue) {
-                this.name = newValue || UniqueComponentId();
-            }
-        }
-    },
     methods: {
         getPTOptions(key, value) {
             return this.ptm(key, {
diff --git a/components/lib/scrollpanel/ScrollPanel.vue b/components/lib/scrollpanel/ScrollPanel.vue
index 1adef1ee61..403080675e 100644
--- a/components/lib/scrollpanel/ScrollPanel.vue
+++ b/components/lib/scrollpanel/ScrollPanel.vue
@@ -40,7 +40,7 @@
 </template>
 
 <script>
-import { DomHandler, UniqueComponentId } from 'primevue/utils';
+import { DomHandler, useUniqueId } from 'primevue/utils';
 import BaseScrollPanel from './BaseScrollPanel.vue';
 
 export default {
@@ -60,22 +60,20 @@ export default {
     lastPageY: null,
     timer: null,
     outsideClickListener: null,
+    setup() {
+        const { id } = useUniqueId();
+
+        return {
+            id
+        }
+    },
     data() {
         return {
-            id: this.$attrs.id,
             orientation: 'vertical',
             lastScrollTop: 0,
             lastScrollLeft: 0
         };
     },
-    watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
-        }
-    },
     mounted() {
         if (this.$el.offsetParent) {
             this.initialize();
diff --git a/components/lib/speeddial/SpeedDial.vue b/components/lib/speeddial/SpeedDial.vue
index 79b8107a15..43c693fd4d 100644
--- a/components/lib/speeddial/SpeedDial.vue
+++ b/components/lib/speeddial/SpeedDial.vue
@@ -57,7 +57,7 @@ import Button from 'primevue/button';
 import PlusIcon from 'primevue/icons/plus';
 import Ripple from 'primevue/ripple';
 import Tooltip from 'primevue/tooltip';
-import { DomHandler, UniqueComponentId } from 'primevue/utils';
+import { DomHandler, useUniqueId } from 'primevue/utils';
 import BaseSpeedDial from './BaseSpeedDial.vue';
 
 export default {
@@ -68,9 +68,15 @@ export default {
     documentClickListener: null,
     container: null,
     list: null,
+    setup() {
+        const { id } = useUniqueId();
+
+        return {
+            id
+        }
+    },
     data() {
         return {
-            id: this.$attrs.id,
             d_visible: this.visible,
             isItemClicked: false,
             focused: false,
@@ -78,12 +84,6 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
-        },
         visible(newValue) {
             this.d_visible = newValue;
         }
diff --git a/components/lib/splitbutton/SplitButton.vue b/components/lib/splitbutton/SplitButton.vue
index fcd0a1c4ca..6a70b04879 100755
--- a/components/lib/splitbutton/SplitButton.vue
+++ b/components/lib/splitbutton/SplitButton.vue
@@ -63,28 +63,26 @@
 import Button from 'primevue/button';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import TieredMenu from 'primevue/tieredmenu';
-import { UniqueComponentId } from 'primevue/utils';
 import BaseSplitButton from './BaseSplitButton.vue';
+import { useUniqueId } from 'primevue/utils';
 
 export default {
     name: 'SplitButton',
     extends: BaseSplitButton,
     inheritAttrs: false,
     emits: ['click'],
+    setup() {
+        const { id } = useUniqueId();
+
+        return {
+            id
+        }
+    },
     data() {
         return {
-            id: this.$attrs.id,
             isExpanded: false
         };
     },
-    watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
-        }
-    },
     mounted() {
         this.$watch('$refs.menu.visible', (newValue) => {
             this.isExpanded = newValue;
diff --git a/components/lib/stepper/Stepper.vue b/components/lib/stepper/Stepper.vue
index 532108d0f8..b7b66dd704 100644
--- a/components/lib/stepper/Stepper.vue
+++ b/components/lib/stepper/Stepper.vue
@@ -135,31 +135,31 @@
 </template>
 
 <script>
-import { UniqueComponentId } from 'primevue/utils';
 import { mergeProps } from 'vue';
 import BaseStepper from './BaseStepper.vue';
 import StepperContent from './StepperContent.vue';
 import StepperHeader from './StepperHeader.vue';
 import StepperSeparator from './StepperSeparator.vue';
+import { useUniqueId } from 'primevue/utils';
 
 export default {
     name: 'Stepper',
     extends: BaseStepper,
     inheritAttrs: false,
     emits: ['update:activeStep', 'step-change'],
+    setup() {
+        const { id } = useUniqueId();
+
+        return {
+            id
+        }
+    },
     data() {
         return {
-            id: this.$attrs.id,
             d_activeStep: this.activeStep
         };
     },
     watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
-        },
         activeStep(newValue) {
             this.d_activeStep = newValue;
         }
diff --git a/components/lib/tabview/TabView.vue b/components/lib/tabview/TabView.vue
index 39ea5b4613..02ba1026ad 100755
--- a/components/lib/tabview/TabView.vue
+++ b/components/lib/tabview/TabView.vue
@@ -95,7 +95,7 @@
 import ChevronLeftIcon from 'primevue/icons/chevronleft';
 import ChevronRightIcon from 'primevue/icons/chevronright';
 import Ripple from 'primevue/ripple';
-import { DomHandler, UniqueComponentId } from 'primevue/utils';
+import { DomHandler, useUniqueId } from 'primevue/utils';
 import { mergeProps } from 'vue';
 import BaseTabView from './BaseTabView.vue';
 
@@ -104,21 +104,21 @@ export default {
     extends: BaseTabView,
     inheritAttrs: false,
     emits: ['update:activeIndex', 'tab-change', 'tab-click'],
+    setup() {
+        const { id } = useUniqueId();
+
+        return {
+            id
+        }
+    },
     data() {
         return {
-            id: this.$attrs.id,
             d_activeIndex: this.activeIndex,
             isPrevButtonDisabled: true,
             isNextButtonDisabled: false
         };
     },
     watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
-        },
         activeIndex(newValue) {
             this.d_activeIndex = newValue;
 
diff --git a/components/lib/tieredmenu/TieredMenu.vue b/components/lib/tieredmenu/TieredMenu.vue
index 2ccedef029..529bab9176 100755
--- a/components/lib/tieredmenu/TieredMenu.vue
+++ b/components/lib/tieredmenu/TieredMenu.vue
@@ -42,7 +42,7 @@
 <script>
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
-import { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
+import { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, ZIndexUtils, useUniqueId } from 'primevue/utils';
 import BaseTieredMenu from './BaseTieredMenu.vue';
 import TieredMenuSub from './TieredMenuSub.vue';
 
@@ -59,9 +59,15 @@ export default {
     menubar: null,
     searchTimeout: null,
     searchValue: null,
+    setup() {
+        const { id } = useUniqueId();
+
+        return {
+            id
+        }
+    },
     data() {
         return {
-            id: this.$attrs.id,
             focused: false,
             focusedItemInfo: { index: -1, level: 0, parentKey: '' },
             activeItemPath: [],
@@ -71,12 +77,6 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
-        },
         activeItemPath(newPath) {
             if (!this.popup) {
                 if (ObjectUtils.isNotEmpty(newPath)) {
diff --git a/components/lib/treeselect/TreeSelect.vue b/components/lib/treeselect/TreeSelect.vue
index ffe72d09e0..8680845d9d 100644
--- a/components/lib/treeselect/TreeSelect.vue
+++ b/components/lib/treeselect/TreeSelect.vue
@@ -111,7 +111,7 @@ import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
 import Tree from 'primevue/tree';
-import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
+import { ConnectedOverlayScrollHandler, DomHandler, ZIndexUtils, useUniqueId } from 'primevue/utils';
 import BaseTreeSelect from './BaseTreeSelect.vue';
 
 export default {
@@ -119,21 +119,21 @@ export default {
     extends: BaseTreeSelect,
     inheritAttrs: false,
     emits: ['update:modelValue', 'before-show', 'before-hide', 'change', 'show', 'hide', 'node-select', 'node-unselect', 'node-expand', 'node-collapse', 'focus', 'blur'],
+    setup() {
+        const { id } = useUniqueId();
+
+        return {
+            id
+        }
+    },
     data() {
         return {
-            id: this.$attrs.id,
             focused: false,
             overlayVisible: false,
             expandedKeys: {}
         };
     },
     watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
-        },
         modelValue: {
             handler: function () {
                 if (!this.selfChange) {
diff --git a/components/lib/utils/Utils.d.ts b/components/lib/utils/Utils.d.ts
index 84379242cb..e1b6e8a046 100644
--- a/components/lib/utils/Utils.d.ts
+++ b/components/lib/utils/Utils.d.ts
@@ -1,3 +1,5 @@
+import type { ComponentPublicInstance, Ref, MaybeRefOrGetter } from 'vue';
+
 export declare class ConnectedOverlayScrollHandler {
     constructor(element: any, listener?: () => void);
     bindScrollListener(): void;
@@ -119,6 +121,7 @@ export declare namespace ZIndexUtils {
 }
 
 export declare function UniqueComponentId(prefix?: string): string;
+export declare function useUniqueId(refOrGetter?: MaybeRefOrGetter): { id: Ref<string> };
 
 export declare function EventBus(): {
     on(type: string, fn: any): void;
diff --git a/components/lib/utils/Utils.js b/components/lib/utils/Utils.js
index 9ca36d7f06..176770e5a7 100644
--- a/components/lib/utils/Utils.js
+++ b/components/lib/utils/Utils.js
@@ -4,6 +4,7 @@ import EventBus from './EventBus';
 import HelperSet from './HelperSet';
 import ObjectUtils from './ObjectUtils';
 import UniqueComponentId from './UniqueComponentId';
+import { useUniqueId } from './useUniqueId';
 import ZIndexUtils from './ZIndexUtils';
 
-export { ConnectedOverlayScrollHandler, DomHandler, EventBus, HelperSet, ObjectUtils, UniqueComponentId, ZIndexUtils };
+export { ConnectedOverlayScrollHandler, DomHandler, EventBus, HelperSet, ObjectUtils, UniqueComponentId, ZIndexUtils, useUniqueId };
diff --git a/components/lib/utils/useUniqueId.js b/components/lib/utils/useUniqueId.js
new file mode 100644
index 0000000000..d0f2087df8
--- /dev/null
+++ b/components/lib/utils/useUniqueId.js
@@ -0,0 +1,24 @@
+import { getCurrentInstance, watch, ref, computed } from 'vue';
+import UniqueComponentId from './UniqueComponentId';
+
+function useUniqueId(refOrGetter = undefined) {
+    const instance = getCurrentInstance()
+
+    refOrGetter ??= computed(() => instance?.proxy.$attrs.id);
+
+    const componentId = ref('');
+
+    watch(
+        refOrGetter,
+        (value) => {
+            componentId.value = value || UniqueComponentId();
+        },
+        { immediate: true }
+    );
+
+    return {
+        id: componentId,
+    };
+}
+
+export { useUniqueId as default, useUniqueId }