From 916825df76a10f37d94c4f727013249f9b134c33 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 8 Apr 2024 15:20:42 +0300
Subject: [PATCH 1/4] Refactor #5548 - For AutoComplete

---
 components/lib/autocomplete/AutoComplete.d.ts |  6 +-
 components/lib/autocomplete/AutoComplete.vue  | 17 +++---
 components/lib/chip/Chip.d.ts                 | 18 +++---
 doc/common/apidoc/index.json                  | 57 +++++++++++++------
 nuxt-vite.config.js                           |  1 +
 rollup.config.js                              |  1 +
 6 files changed, 64 insertions(+), 36 deletions(-)

diff --git a/components/lib/autocomplete/AutoComplete.d.ts b/components/lib/autocomplete/AutoComplete.d.ts
index 9c8dcac9b..9530c7ec9 100755
--- a/components/lib/autocomplete/AutoComplete.d.ts
+++ b/components/lib/autocomplete/AutoComplete.d.ts
@@ -9,6 +9,7 @@
  */
 import { TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
+import { ChipPassThroughOptions } from '../chip';
 import { InputTextPassThroughOptions } from '../inputtext';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, DesignToken, GlobalComponentConstructor, HintedString, Nullable, PassThrough } from '../ts-helpers';
@@ -156,9 +157,10 @@ export interface AutoCompletePassThroughOptions {
      */
     token?: AutoCompletePassThroughOptionType;
     /**
-     * Used to pass attributes to the token label's DOM element.
+     * Used to pass attributes to the Chip.
+     * @see {@link ChipPassThroughOptions}
      */
-    tokenLabel?: AutoCompletePassThroughOptionType;
+    tokenLabel?: ChipPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the remove token icon's DOM element.
      */
diff --git a/components/lib/autocomplete/AutoComplete.vue b/components/lib/autocomplete/AutoComplete.vue
index 090a7df33..dd4e47436 100755
--- a/components/lib/autocomplete/AutoComplete.vue
+++ b/components/lib/autocomplete/AutoComplete.vue
@@ -45,7 +45,7 @@
         >
             <li
                 v-for="(option, i) of modelValue"
-                :key="i"
+                :key="`${i}_${getOptionLabel(option)}`"
                 :id="id + '_multiple_option_' + i"
                 :class="cx('token', { i })"
                 role="option"
@@ -55,11 +55,12 @@
                 :aria-posinset="i + 1"
                 v-bind="ptm('token')"
             >
-                <slot name="chip" :value="option">
-                    <span :class="cx('tokenLabel')" v-bind="ptm('tokenLabel')">{{ getOptionLabel(option) }}</span>
-                </slot>
-                <slot name="removetokenicon" :class="cx('removeTokenIcon')" :index="i" :onClick="(event) => removeOption(event, i)" :removeCallback="(event) => removeOption(event, i)">
-                    <component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="[cx('removeTokenIcon'), removeTokenIcon]" @click="removeOption($event, i)" aria-hidden="true" v-bind="ptm('removeTokenIcon')" />
+                <slot name="chip" :value="option" :index="i" :removeCallback="(event) => removeOption(event, i)">
+                    <Chip :class="cx('tokenLabel')" :label="getOptionLabel(option)" :removeIcon="removeTokenIcon" removable @remove="removeOption($event, i)" :pt="ptm('tokenLabel')">
+                        <template #removeicon>
+                            <slot name="removetokenicon" :class="cx('removeTokenIcon')" :index="i" :removeCallback="(event) => removeOption(event, i)" />
+                        </template>
+                    </Chip>
                 </slot>
             </li>
             <li :class="cx('inputToken')" role="option" v-bind="ptm('inputToken')">
@@ -182,9 +183,9 @@
 </template>
 
 <script>
+import Chip from 'primevue/chip';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import SpinnerIcon from 'primevue/icons/spinner';
-import TimesCircleIcon from 'primevue/icons/timescircle';
 import InputText from 'primevue/inputtext';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
@@ -968,7 +969,7 @@ export default {
         Portal,
         ChevronDownIcon,
         SpinnerIcon,
-        TimesCircleIcon
+        Chip
     },
     directives: {
         ripple: Ripple
diff --git a/components/lib/chip/Chip.d.ts b/components/lib/chip/Chip.d.ts
index 6061f5186..a2bd4f633 100644
--- a/components/lib/chip/Chip.d.ts
+++ b/components/lib/chip/Chip.d.ts
@@ -12,12 +12,12 @@ import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
-export declare type ChipPassThroughOptionType = ChipPassThroughAttributes | ((options: ChipPassThroughMethodOptions) => ChipPassThroughAttributes | string) | string | null | undefined;
+export declare type ChipPassThroughOptionType<T = any> = ChipPassThroughAttributes | ((options: ChipPassThroughMethodOptions<T>) => ChipPassThroughAttributes | string) | string | null | undefined;
 
 /**
  * Custom passthrough(pt) option method.
  */
-export interface ChipPassThroughMethodOptions {
+export interface ChipPassThroughMethodOptions<T> {
     /**
      * Defines instance.
      */
@@ -37,7 +37,7 @@ export interface ChipPassThroughMethodOptions {
     /**
      * Defines parent options.
      */
-    parent: any;
+    parent: T;
     /**
      * Defines passthrough(pt) options in global config.
      */
@@ -48,27 +48,27 @@ export interface ChipPassThroughMethodOptions {
  * Custom passthrough(pt) options.
  * @see {@link ChipProps.pt}
  */
-export interface ChipPassThroughOptions {
+export interface ChipPassThroughOptions<T = any> {
     /**
      * Used to pass attributes to the root's DOM element.
      */
-    root?: ChipPassThroughOptionType;
+    root?: ChipPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the image's DOM element.
      */
-    image?: ChipPassThroughOptionType;
+    image?: ChipPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the icon's DOM element.
      */
-    icon?: ChipPassThroughOptionType;
+    icon?: ChipPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the label' DOM element.
      */
-    label?: ChipPassThroughOptionType;
+    label?: ChipPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the removeIcon's DOM element.
      */
-    removeIcon?: ChipPassThroughOptionType;
+    removeIcon?: ChipPassThroughOptionType<T>;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index 195b04299..edfc0cd71 100644
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
@@ -3313,9 +3313,9 @@
                             "name": "tokenLabel",
                             "optional": true,
                             "readonly": false,
-                            "type": "AutoCompletePassThroughOptionType",
+                            "type": "ChipPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions>",
                             "default": "",
-                            "description": "Used to pass attributes to the token label's DOM element."
+                            "description": "Used to pass attributes to the Chip."
                         },
                         {
                             "name": "removeTokenIcon",
@@ -11969,7 +11969,7 @@
                             "name": "parent",
                             "optional": false,
                             "readonly": false,
-                            "type": "any",
+                            "type": "T",
                             "default": "",
                             "description": "Defines parent options."
                         },
@@ -11992,7 +11992,7 @@
                             "name": "root",
                             "optional": true,
                             "readonly": false,
-                            "type": "ChipPassThroughOptionType",
+                            "type": "ChipPassThroughOptionType<T>",
                             "default": "",
                             "description": "Used to pass attributes to the root's DOM element."
                         },
@@ -12000,7 +12000,7 @@
                             "name": "image",
                             "optional": true,
                             "readonly": false,
-                            "type": "ChipPassThroughOptionType",
+                            "type": "ChipPassThroughOptionType<T>",
                             "default": "",
                             "description": "Used to pass attributes to the image's DOM element."
                         },
@@ -12008,7 +12008,7 @@
                             "name": "icon",
                             "optional": true,
                             "readonly": false,
-                            "type": "ChipPassThroughOptionType",
+                            "type": "ChipPassThroughOptionType<T>",
                             "default": "",
                             "description": "Used to pass attributes to the icon's DOM element."
                         },
@@ -12016,7 +12016,7 @@
                             "name": "label",
                             "optional": true,
                             "readonly": false,
-                            "type": "ChipPassThroughOptionType",
+                            "type": "ChipPassThroughOptionType<T>",
                             "default": "",
                             "description": "Used to pass attributes to the label' DOM element."
                         },
@@ -12024,7 +12024,7 @@
                             "name": "removeIcon",
                             "optional": true,
                             "readonly": false,
-                            "type": "ChipPassThroughOptionType",
+                            "type": "ChipPassThroughOptionType<T>",
                             "default": "",
                             "description": "Used to pass attributes to the removeIcon's DOM element."
                         },
@@ -12125,7 +12125,7 @@
                             "name": "pt",
                             "optional": true,
                             "readonly": false,
-                            "type": "PassThrough<ChipPassThroughOptions>",
+                            "type": "PassThrough<ChipPassThroughOptions<any>>",
                             "default": "",
                             "description": "Used to pass attributes to DOM elements inside the component."
                         },
@@ -12342,6 +12342,29 @@
                     ],
                     "methods": []
                 },
+                "ChipsSharedPassThroughMethodOptions": {
+                    "description": "Custom shared passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ChipsProps",
+                            "default": "",
+                            "description": "Defines valid properties."
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ChipsState",
+                            "default": "",
+                            "description": "Defines current inline state."
+                        }
+                    ],
+                    "methods": []
+                },
                 "ChipsAddEvent": {
                     "description": "Custom add event.",
                     "relatedProp": "ChipsEmits.add",
@@ -12422,9 +12445,9 @@
                             "name": "label",
                             "optional": true,
                             "readonly": false,
-                            "type": "ChipsPassThroughOptionType",
+                            "type": "ChipPassThroughOptions<ChipsSharedPassThroughMethodOptions>",
                             "default": "",
-                            "description": "Used to pass attributes to the label's DOM element."
+                            "description": "Used to pass attributes to the Chip component."
                         },
                         {
                             "name": "removeTokenIcon",
@@ -15330,7 +15353,7 @@
                             "name": "chip",
                             "optional": true,
                             "readonly": false,
-                            "type": "DefaultPassThrough<ChipPassThroughOptions>",
+                            "type": "DefaultPassThrough<ChipPassThroughOptions<any>>",
                             "default": ""
                         },
                         {
@@ -37960,9 +37983,9 @@
                             "name": "tokenLabel",
                             "optional": true,
                             "readonly": false,
-                            "type": "MultiSelectPassThroughOptionType",
+                            "type": "ChipPassThroughOptions<MultiSelectSharedPassThroughMethodOptions>",
                             "default": "",
-                            "description": "Used to pass attributes to the token label's DOM element."
+                            "description": "Used to pass attributes to the Chip."
                         },
                         {
                             "name": "removeTokenIcon",
@@ -58228,9 +58251,9 @@
                             "name": "tokenLabel",
                             "optional": true,
                             "readonly": false,
-                            "type": "TreeSelectPassThroughOptionType",
+                            "type": "ChipPassThroughOptions<TreeSelectSharedPassThroughMethodOptions>",
                             "default": "",
-                            "description": "Used to pass attributes to the token label's DOM element."
+                            "description": "Used to pass attributes to the Chip."
                         },
                         {
                             "name": "trigger",
@@ -61544,4 +61567,4 @@
             }
         }
     }
-}
+}
\ No newline at end of file
diff --git a/nuxt-vite.config.js b/nuxt-vite.config.js
index 9cc276dd5..ab9e086bc 100644
--- a/nuxt-vite.config.js
+++ b/nuxt-vite.config.js
@@ -255,6 +255,7 @@ export default {
             'primevue/badge': path.resolve(__dirname, './components/lib/badge/Badge.vue'),
             'primevue/togglebutton': path.resolve(__dirname, './components/lib/togglebutton/ToggleButton.vue'),
             'primevue/listbox': path.resolve(__dirname, './components/lib/listbox/Listbox.vue'),
+            'primevue/chip': path.resolve(__dirname, './components/lib/chip/Chip.vue'),
             'primevue/confirmationeventbus': path.resolve(__dirname, './components/lib/confirmationeventbus/ConfirmationEventBus.js'),
             'primevue/toasteventbus': path.resolve(__dirname, './components/lib/toasteventbus/ToastEventBus.js'),
             'primevue/overlayeventbus': path.resolve(__dirname, './components/lib/overlayeventbus/OverlayEventBus.js'),
diff --git a/rollup.config.js b/rollup.config.js
index a77c0f093..f517461ad 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -265,6 +265,7 @@ const CORE_DEPENDENCIES = {
     'primevue/tieredmenu': 'primevue.tieredmenu',
     'primevue/badge': 'primevue.badge',
     'primevue/listbox': 'primevue.listbox',
+    'primevue/chip': 'primevue.chip',
     'primevue/togglebutton': 'primevue.togglebutton',
     ...CORE_PASSTHROUGH_DEPENDENCIES,
     ...CORE_THEME_DEPENDENCIES

From e53d18f32302d9af6e271f69336e59fb779f386b Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 8 Apr 2024 15:20:51 +0300
Subject: [PATCH 2/4] Refactor #5548 - For Chips

---
 components/lib/chips/Chips.d.ts | 20 ++++++++++++++++++--
 components/lib/chips/Chips.vue  | 15 ++++++++-------
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/components/lib/chips/Chips.d.ts b/components/lib/chips/Chips.d.ts
index ddc10817d..af5d242bd 100755
--- a/components/lib/chips/Chips.d.ts
+++ b/components/lib/chips/Chips.d.ts
@@ -9,6 +9,7 @@
  */
 import { InputHTMLAttributes, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
+import { ChipPassThroughOptions } from '../chip';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
@@ -44,6 +45,20 @@ export interface ChipsPassThroughMethodOptions {
     global: object | undefined;
 }
 
+/**
+ * Custom shared passthrough(pt) option method.
+ */
+export interface ChipsSharedPassThroughMethodOptions {
+    /**
+     * Defines valid properties.
+     */
+    props: ChipsProps;
+    /**
+     * Defines current inline state.
+     */
+    state: ChipsState;
+}
+
 /**
  * Custom add event.
  * @see {@link ChipsEmits.add}
@@ -84,9 +99,10 @@ export interface ChipsPassThroughOptions {
      */
     token?: ChipsPassThroughOptionType;
     /**
-     * Used to pass attributes to the label's DOM element.
+     * Used to pass attributes to the Chip component.
+     * @see {@link ChipPassThroughOptions}
      */
-    label?: ChipsPassThroughOptionType;
+    label?: ChipPassThroughOptions<ChipsSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the remove token icon's DOM element.
      */
diff --git a/components/lib/chips/Chips.vue b/components/lib/chips/Chips.vue
index ddce4478e..7a16d400d 100755
--- a/components/lib/chips/Chips.vue
+++ b/components/lib/chips/Chips.vue
@@ -28,11 +28,12 @@
                 v-bind="ptm('token')"
                 :data-p-focused="focusedIndex === i"
             >
-                <slot name="chip" :class="cx('label')" :value="val">
-                    <span :class="cx('label')" v-bind="ptm('label')">{{ val }}</span>
-                </slot>
-                <slot name="removetokenicon" :class="cx('removeTokenIcon')" :index="i" :onClick="(event) => removeItem(event, i)" :removeCallback="(event) => removeItem(event, i)">
-                    <component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="[cx('removeTokenIcon'), removeTokenIcon]" @click="removeItem($event, i)" aria-hidden="true" v-bind="ptm('removeTokenIcon')" />
+                <slot name="chip" :class="cx('label')" :index="i" :value="val" :removeCallback="(event) => removeOption(event, i)">
+                    <Chip :class="cx('label')" :label="val" :removeIcon="removeTokenIcon" removable @remove="removeItem($event, i)" :pt="ptm('label')">
+                        <template #removeicon>
+                            <slot name="removetokenicon" :class="cx('removeTokenIcon')" :index="i" :removeCallback="(event) => removeItem(event, i)" />
+                        </template>
+                    </Chip>
                 </slot>
             </li>
             <li :class="cx('inputToken')" role="option" v-bind="ptm('inputToken')">
@@ -58,7 +59,7 @@
 </template>
 
 <script>
-import TimesCircleIcon from 'primevue/icons/timescircle';
+import Chip from 'primevue/chip';
 import { UniqueComponentId } from 'primevue/utils';
 import BaseChips from './BaseChips.vue';
 
@@ -262,7 +263,7 @@ export default {
         }
     },
     components: {
-        TimesCircleIcon: TimesCircleIcon
+        Chip
     }
 };
 </script>

From 81383c0f0cd49e0fa22fc945516fc877ca763304 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 8 Apr 2024 15:21:00 +0300
Subject: [PATCH 3/4] Refactor #5548 - For MultiSelect

---
 components/lib/multiselect/MultiSelect.d.ts |  6 ++++--
 components/lib/multiselect/MultiSelect.vue  | 17 +++++++++--------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/components/lib/multiselect/MultiSelect.d.ts b/components/lib/multiselect/MultiSelect.d.ts
index e0f60ad35..e4fa398c2 100755
--- a/components/lib/multiselect/MultiSelect.d.ts
+++ b/components/lib/multiselect/MultiSelect.d.ts
@@ -9,6 +9,7 @@
  */
 import { TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
+import { ChipPassThroughOptions } from '../chip';
 import { InputTextPassThroughOptions } from '../inputtext';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, DesignToken, GlobalComponentConstructor, HintedString, PassThrough } from '../ts-helpers';
@@ -133,9 +134,10 @@ export interface MultiSelectPassThroughOptions {
      */
     token?: MultiSelectPassThroughOptionType;
     /**
-     * Used to pass attributes to the token label's DOM element.
+     * Used to pass attributes to the Chip.
+     * @see {@link ChipPassThroughOptions}
      */
-    tokenLabel?: MultiSelectPassThroughOptionType;
+    tokenLabel?: ChipPassThroughOptions<MultiSelectSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the remove token icon's DOM element.
      */
diff --git a/components/lib/multiselect/MultiSelect.vue b/components/lib/multiselect/MultiSelect.vue
index 93d3c461a..583c306c2 100755
--- a/components/lib/multiselect/MultiSelect.vue
+++ b/components/lib/multiselect/MultiSelect.vue
@@ -31,12 +31,12 @@
                     </template>
                     <template v-else-if="display === 'chip'">
                         <div v-for="item of chipSelectedItems" :key="getLabelByValue(item)" :class="cx('token')" v-bind="ptm('token')">
-                            <slot name="chip" :value="item">
-                                <span :class="cx('tokenLabel')" v-bind="ptm('tokenLabel')">{{ getLabelByValue(item) }}</span>
-                            </slot>
-                            <slot v-if="!disabled" name="removetokenicon" :class="cx('removeTokenIcon')" :item="item" :onClick="(event) => removeOption(event, item)" :removeCallback="(event) => removeOption(event, item)">
-                                <span v-if="removeTokenIcon" :class="[cx('removeTokenIcon'), removeTokenIcon]" @click.stop="removeOption($event, item)" v-bind="ptm('removeTokenIcon')" />
-                                <TimesCircleIcon v-else :class="cx('removeTokenIcon')" @click.stop="removeOption($event, item)" v-bind="ptm('removeTokenIcon')" />
+                            <slot name="chip" :value="item" :removeCallback="(event) => removeOption(event, item)">
+                                <Chip :class="cx('tokenLabel')" :label="getLabelByValue(item)" :removeIcon="removeTokenIcon" removable @remove="removeOption($event, item)" :pt="ptm('tokenLabel')">
+                                    <template #removeicon>
+                                        <slot name="removetokenicon" :class="cx('removeTokenIcon')" :item="item" :removeCallback="(event) => removeOption(event, item)" />
+                                    </template>
+                                </Chip>
                             </slot>
                         </div>
                         <template v-if="!modelValue || modelValue.length === 0">{{ placeholder || 'empty' }}</template>
@@ -197,12 +197,12 @@
 <script>
 import { FilterService } from 'primevue/api';
 import Checkbox from 'primevue/checkbox';
+import Chip from 'primevue/chip';
 import CheckIcon from 'primevue/icons/check';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import SearchIcon from 'primevue/icons/search';
 import SpinnerIcon from 'primevue/icons/spinner';
 import TimesIcon from 'primevue/icons/times';
-import TimesCircleIcon from 'primevue/icons/timescircle';
 import InputText from 'primevue/inputtext';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
@@ -802,6 +802,7 @@ export default {
             }
         },
         removeOption(event, optionValue) {
+            event.stopPropagation();
             let value = this.modelValue.filter((val) => !ObjectUtils.equals(val, optionValue, this.equalityKey));
 
             this.updateModel(event, value);
@@ -1095,9 +1096,9 @@ export default {
         Checkbox,
         VirtualScroller,
         Portal,
+        Chip,
         TimesIcon,
         SearchIcon,
-        TimesCircleIcon,
         ChevronDownIcon,
         SpinnerIcon,
         CheckIcon

From 1a6be3235d8b969a5c639e38086700f255c1efa3 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 8 Apr 2024 15:21:07 +0300
Subject: [PATCH 4/4] Refactor #5548 - For TreeSelect

---
 components/lib/treeselect/TreeSelect.d.ts | 6 ++++--
 components/lib/treeselect/TreeSelect.vue  | 4 +++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/components/lib/treeselect/TreeSelect.d.ts b/components/lib/treeselect/TreeSelect.d.ts
index 407b1c09e..c52cc101c 100644
--- a/components/lib/treeselect/TreeSelect.d.ts
+++ b/components/lib/treeselect/TreeSelect.d.ts
@@ -9,6 +9,7 @@
  */
 import { InputHTMLAttributes, TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
+import { ChipPassThroughOptions } from '../chip';
 import { PassThroughOptions } from '../passthrough';
 import { TreeExpandedKeys, TreePassThroughOptions } from '../tree';
 import { TreeNode } from '../treenode';
@@ -84,9 +85,10 @@ export interface TreeSelectPassThroughOptions {
      */
     token?: TreeSelectPassThroughOptionType;
     /**
-     * Used to pass attributes to the token label's DOM element.
+     * Used to pass attributes to the Chip.
+     * @see {@link ChipPassThroughOptions}
      */
-    tokenLabel?: TreeSelectPassThroughOptionType;
+    tokenLabel?: ChipPassThroughOptions<TreeSelectSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the trigger's DOM element.
      */
diff --git a/components/lib/treeselect/TreeSelect.vue b/components/lib/treeselect/TreeSelect.vue
index ffe72d09e..6127c3527 100644
--- a/components/lib/treeselect/TreeSelect.vue
+++ b/components/lib/treeselect/TreeSelect.vue
@@ -30,7 +30,7 @@
                     </template>
                     <template v-else-if="display === 'chip'">
                         <div v-for="node of selectedNodes" :key="node.key" :class="cx('token')" v-bind="ptm('token')">
-                            <span :class="cx('tokenLabel')" v-bind="ptm('tokenLabel')">{{ node.label }}</span>
+                            <Chip :class="cx('tokenLabel')" :label="node.label" :pt="ptm('tokenLabel')" />
                         </div>
                         <template v-if="emptyValue">{{ placeholder || 'empty' }}</template>
                     </template>
@@ -106,6 +106,7 @@
 </template>
 
 <script>
+import Chip from 'primevue/chip';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
@@ -500,6 +501,7 @@ export default {
     },
     components: {
         TSTree: Tree,
+        Chip,
         Portal: Portal,
         ChevronDownIcon: ChevronDownIcon
     },