primevue 4.3.2 → 4.3.3

package/autocomplete/AutoComplete.vue

@@ -1,5 +1,5 @@
 <template>
-    <div ref="container" :class="cx('root')" :style="sx('root')" @click="onContainerClick" v-bind="ptmi('root')">
+    <div ref="container" :class="cx('root')" :style="sx('root')" @click="onContainerClick" :data-p="containerDataP" v-bind="ptmi('root')">
         <InputText
             v-if="!multiple"
             ref="focusInput"
@@ -31,6 +31,7 @@
             @input="onInput"
             @change="onChange"
             :unstyled="unstyled"
+            :data-p-has-dropdown="dropdown"
             :pt="ptm('pcInputText')"
         />
         <ul
@@ -44,6 +45,8 @@
             @focus="onMultipleContainerFocus"
             @blur="onMultipleContainerBlur"
             @keydown="onMultipleContainerKeyDown"
+            :data-p-has-dropdown="dropdown"
+            :data-p="inputMultipleDataP"
             v-bind="ptm('inputMultiple')"
         >
             <li
@@ -60,7 +63,16 @@
             >
                 <slot name="chip" :class="cx('pcChip')" :value="option" :index="i" :removeCallback="(event) => removeOption(event, i)" v-bind="ptm('pcChip')">
                     <!-- TODO: removetokenicon and removeTokenIcon  deprecated since v4.0. Use chipicon slot and chipIcon prop-->
-                    <Chip :class="cx('pcChip')" :label="getOptionLabel(option)" :removeIcon="chipIcon || removeTokenIcon" removable :unstyled="unstyled" @remove="removeOption($event, i)" :pt="ptm('pcChip')">
+                    <Chip
+                        :class="cx('pcChip')"
+                        :label="getOptionLabel(option)"
+                        :removeIcon="chipIcon || removeTokenIcon"
+                        removable
+                        :unstyled="unstyled"
+                        @remove="removeOption($event, i)"
+                        :data-p-focused="focusedMultipleOptionIndex === i"
+                        :pt="ptm('pcChip')"
+                    >
                         <template #removeicon>
                             <slot :name="$slots.chipicon ? 'chipicon' : 'removetokenicon'" :class="cx('chipIcon')" :index="i" :removeCallback="(event) => removeOption(event, i)" />
                         </template>
@@ -97,8 +109,8 @@
             </li>
         </ul>
         <slot v-if="searching || loading" :class="cx('loader')" :name="$slots.loader ? 'loader' : 'loadingicon'">
-            <i v-if="loader || loadingIcon" :class="['pi-spin', cx('loader'), loader, loadingIcon]" aria-hidden="true" v-bind="ptm('loader')" />
-            <SpinnerIcon v-else :class="cx('loader')" spin aria-hidden="true" v-bind="ptm('loader')" />
+            <i v-if="loader || loadingIcon" :class="['pi-spin', cx('loader'), loader, loadingIcon]" aria-hidden="true" :data-p-has-dropdown="dropdown" v-bind="ptm('loader')" />
+            <SpinnerIcon v-else :class="cx('loader')" spin aria-hidden="true" :data-p-has-dropdown="dropdown" v-bind="ptm('loader')" />
         </slot>
         <slot :name="$slots.dropdown ? 'dropdown' : 'dropdownbutton'" :toggleCallback="(event) => onDropdownClick(event)">
             <button
@@ -118,12 +130,22 @@
                 </slot>
             </button>
         </slot>
-        <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSearchResult')" :data-p-hidden-accessible="true">
+        <span v-if="typeahead" role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSearchResult')" :data-p-hidden-accessible="true">
             {{ searchResultMessageText }}
         </span>
         <Portal :appendTo="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="ptm('transition')">
-                <div v-if="overlayVisible" :ref="overlayRef" :id="panelId" :class="[cx('overlay'), panelClass, overlayClass]" :style="{ ...panelStyle, ...overlayStyle }" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="ptm('overlay')">
+                <div
+                    v-if="overlayVisible"
+                    :ref="overlayRef"
+                    :id="panelId"
+                    :class="[cx('overlay'), panelClass, overlayClass]"
+                    :style="{ ...panelStyle, ...overlayStyle }"
+                    @click="onOverlayClick"
+                    @keydown="onOverlayKeyDown"
+                    :data-p="overlayDataP"
+                    v-bind="ptm('overlay')"
+                >
                     <slot name="header" :value="d_value" :suggestions="visibleOptions"></slot>
                     <div :class="cx('listContainer')" :style="{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }" v-bind="ptm('listContainer')">
                         <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :style="{ height: scrollHeight }" :items="visibleOptions" :tabindex="-1" :disabled="virtualScrollerDisabled" :pt="ptm('virtualScroller')">
@@ -155,7 +177,7 @@
                                             @click="onOptionSelect($event, option)"
                                             @mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
                                             :data-p-selected="isSelected(option)"
-                                            :data-p-focus="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
+                                            :data-p-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
                                             :data-p-disabled="isOptionDisabled(option)"
                                             v-bind="getPTOptions(option, getItemOptions, i, 'option')"
                                         >
@@ -183,6 +205,7 @@
 </template>
 
 <script>
+import { cn } from '@primeuix/utils';
 import { absolutePosition, addStyle, findSingle, focus, getOuterWidth, isTouchDevice, relativePosition } from '@primeuix/utils/dom';
 import { equals, findLastIndex, isEmpty, isNotEmpty, resolveFieldData } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
@@ -689,8 +712,10 @@ export default {
         onEnterKey(event) {
             if (!this.typeahead) {
                 if (this.multiple) {
-                    this.updateModel(event, [...(this.d_value || []), event.target.value]);
-                    this.$refs.focusInput.value = '';
+                    if (event.target.value.trim()) {
+                        this.updateModel(event, [...(this.d_value || []), event.target.value.trim()]);
+                        this.$refs.focusInput.value = '';
+                    }
                 }
             } else {
                 if (!this.overlayVisible) {
@@ -762,7 +787,7 @@ export default {
         onOverlayEnter(el) {
             ZIndex.set('overlay', el, this.$primevue.config.zIndex.overlay);
 
-            addStyle(el, { position: 'absolute', top: '0', left: '0' });
+            addStyle(el, { position: 'absolute', top: '0' });
             this.alignOverlay();
         },
         onOverlayAfterEnter() {
@@ -1062,6 +1087,27 @@ export default {
         },
         panelId() {
             return this.$id + '_panel';
+        },
+        containerDataP() {
+            return cn({
+                fluid: this.$fluid
+            });
+        },
+        overlayDataP() {
+            return cn({
+                ['portal-' + this.appendTo]: 'portal-' + this.appendTo
+            });
+        },
+        inputMultipleDataP() {
+            return cn({
+                invalid: this.$invalid,
+                disabled: this.disabled,
+                focus: this.focused,
+                fluid: this.$fluid,
+                filled: this.$variant === 'filled',
+                empty: !this.$filled,
+                [this.size]: this.size
+            });
         }
     },
     components: {

package/autocomplete/index.mjs

@@ -1,3 +1,4 @@
+import { cn } from '@primeuix/utils';
 import { findSingle, focus, isTouchDevice, relativePosition, getOuterWidth, absolutePosition, addStyle } from '@primeuix/utils/dom';
 import { isNotEmpty, findLastIndex, equals, isEmpty, resolveFieldData } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
@@ -12,7 +13,7 @@ import Ripple from 'primevue/ripple';
 import VirtualScroller from 'primevue/virtualscroller';
 import BaseInput from '@primevue/core/baseinput';
 import AutoCompleteStyle from 'primevue/autocomplete/style';
-import { resolveComponent, resolveDirective, createElementBlock, openBlock, mergeProps, createBlock, createCommentVNode, renderSlot, createElementVNode, createVNode, normalizeStyle, normalizeClass, Fragment, renderList, withCtx, resolveDynamicComponent, toDisplayString, Transition, createSlots, withDirectives, createTextVNode } from 'vue';
+import { resolveComponent, resolveDirective, createElementBlock, openBlock, mergeProps, createBlock, createCommentVNode, renderSlot, createVNode, normalizeStyle, normalizeClass, createElementVNode, Fragment, renderList, withCtx, resolveDynamicComponent, toDisplayString, Transition, createSlots, withDirectives, createTextVNode } from 'vue';
 
 var script$1 = {
   name: 'BaseAutoComplete',
@@ -192,6 +193,9 @@ var script$1 = {
   }
 };
 
+function _defineProperty$1(e, r, t) { return (r = _toPropertyKey$1(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
+function _toPropertyKey$1(t) { var i = _toPrimitive$1(t, "string"); return "symbol" == _typeof$1(i) ? i : i + ""; }
+function _toPrimitive$1(t, r) { if ("object" != _typeof$1(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof$1(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _typeof$1(o) { "@babel/helpers - typeof"; return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$1(o); }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -643,8 +647,10 @@ var script = {
     onEnterKey: function onEnterKey(event) {
       if (!this.typeahead) {
         if (this.multiple) {
-          this.updateModel(event, [].concat(_toConsumableArray(this.d_value || []), [event.target.value]));
-          this.$refs.focusInput.value = '';
+          if (event.target.value.trim()) {
+            this.updateModel(event, [].concat(_toConsumableArray(this.d_value || []), [event.target.value.trim()]));
+            this.$refs.focusInput.value = '';
+          }
         }
       } else {
         if (!this.overlayVisible) {
@@ -718,8 +724,7 @@ var script = {
       ZIndex.set('overlay', el, this.$primevue.config.zIndex.overlay);
       addStyle(el, {
         position: 'absolute',
-        top: '0',
-        left: '0'
+        top: '0'
       });
       this.alignOverlay();
     },
@@ -1057,6 +1062,24 @@ var script = {
     },
     panelId: function panelId() {
       return this.$id + '_panel';
+    },
+    containerDataP: function containerDataP() {
+      return cn({
+        fluid: this.$fluid
+      });
+    },
+    overlayDataP: function overlayDataP() {
+      return cn(_defineProperty$1({}, 'portal-' + this.appendTo, 'portal-' + this.appendTo));
+    },
+    inputMultipleDataP: function inputMultipleDataP() {
+      return cn(_defineProperty$1({
+        invalid: this.$invalid,
+        disabled: this.disabled,
+        focus: this.focused,
+        fluid: this.$fluid,
+        filled: this.$variant === 'filled',
+        empty: !this.$filled
+      }, this.size, this.size));
     }
   },
   components: {
@@ -1078,14 +1101,16 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-var _hoisted_1 = ["aria-activedescendant"];
-var _hoisted_2 = ["id", "aria-label", "aria-setsize", "aria-posinset"];
-var _hoisted_3 = ["id", "placeholder", "tabindex", "disabled", "aria-label", "aria-labelledby", "aria-expanded", "aria-controls", "aria-activedescendant", "aria-invalid"];
-var _hoisted_4 = ["disabled", "aria-expanded", "aria-controls"];
-var _hoisted_5 = ["id"];
-var _hoisted_6 = ["id", "aria-label"];
-var _hoisted_7 = ["id"];
-var _hoisted_8 = ["id", "aria-label", "aria-selected", "aria-disabled", "aria-setsize", "aria-posinset", "onClick", "onMousemove", "data-p-selected", "data-p-focus", "data-p-disabled"];
+var _hoisted_1 = ["data-p"];
+var _hoisted_2 = ["aria-activedescendant", "data-p-has-dropdown", "data-p"];
+var _hoisted_3 = ["id", "aria-label", "aria-setsize", "aria-posinset"];
+var _hoisted_4 = ["id", "placeholder", "tabindex", "disabled", "aria-label", "aria-labelledby", "aria-expanded", "aria-controls", "aria-activedescendant", "aria-invalid"];
+var _hoisted_5 = ["data-p-has-dropdown"];
+var _hoisted_6 = ["disabled", "aria-expanded", "aria-controls"];
+var _hoisted_7 = ["id", "data-p"];
+var _hoisted_8 = ["id", "aria-label"];
+var _hoisted_9 = ["id"];
+var _hoisted_10 = ["id", "aria-label", "aria-selected", "aria-disabled", "aria-setsize", "aria-posinset", "onClick", "onMousemove", "data-p-selected", "data-p-focused", "data-p-disabled"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_InputText = resolveComponent("InputText");
   var _component_Chip = resolveComponent("Chip");
@@ -1099,7 +1124,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     style: _ctx.sx('root'),
     onClick: _cache[11] || (_cache[11] = function () {
       return $options.onContainerClick && $options.onContainerClick.apply($options, arguments);
-    })
+    }),
+    "data-p": $options.containerDataP
   }, _ctx.ptmi('root')), [!_ctx.multiple ? (openBlock(), createBlock(_component_InputText, {
     key: 0,
     ref: "focusInput",
@@ -1131,8 +1157,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     onInput: $options.onInput,
     onChange: $options.onChange,
     unstyled: _ctx.unstyled,
+    "data-p-has-dropdown": _ctx.dropdown,
     pt: _ctx.ptm('pcInputText')
-  }, null, 8, ["id", "name", "class", "style", "value", "placeholder", "tabindex", "fluid", "disabled", "size", "invalid", "variant", "aria-label", "aria-labelledby", "aria-expanded", "aria-controls", "aria-activedescendant", "onFocus", "onBlur", "onKeydown", "onInput", "onChange", "unstyled", "pt"])) : createCommentVNode("", true), _ctx.multiple ? (openBlock(), createElementBlock("ul", mergeProps({
+  }, null, 8, ["id", "name", "class", "style", "value", "placeholder", "tabindex", "fluid", "disabled", "size", "invalid", "variant", "aria-label", "aria-labelledby", "aria-expanded", "aria-controls", "aria-activedescendant", "onFocus", "onBlur", "onKeydown", "onInput", "onChange", "unstyled", "data-p-has-dropdown", "pt"])) : createCommentVNode("", true), _ctx.multiple ? (openBlock(), createElementBlock("ul", mergeProps({
     key: 1,
     ref: "multiContainer",
     "class": _ctx.cx('inputMultiple'),
@@ -1148,7 +1175,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     }),
     onKeydown: _cache[7] || (_cache[7] = function () {
       return $options.onMultipleContainerKeyDown && $options.onMultipleContainerKeyDown.apply($options, arguments);
-    })
+    }),
+    "data-p-has-dropdown": _ctx.dropdown,
+    "data-p": $options.inputMultipleDataP
   }, _ctx.ptm('inputMultiple')), [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.d_value, function (option, i) {
     return openBlock(), createElementBlock("li", mergeProps({
       key: "".concat(i, "_").concat($options.getOptionLabel(option)),
@@ -1180,6 +1209,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         onRemove: function onRemove($event) {
           return $options.removeOption($event, i);
         },
+        "data-p-focused": $data.focusedMultipleOptionIndex === i,
         pt: _ctx.ptm('pcChip')
       }, {
         removeicon: withCtx(function () {
@@ -1192,8 +1222,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           })];
         }),
         _: 2
-      }, 1032, ["class", "label", "removeIcon", "unstyled", "onRemove", "pt"])];
-    })], 16, _hoisted_2);
+      }, 1032, ["class", "label", "removeIcon", "unstyled", "onRemove", "data-p-focused", "pt"])];
+    })], 16, _hoisted_3);
   }), 128)), createElementVNode("li", mergeProps({
     "class": _ctx.cx('inputChip'),
     role: "option"
@@ -1231,20 +1261,22 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     onChange: _cache[4] || (_cache[4] = function () {
       return $options.onChange && $options.onChange.apply($options, arguments);
     })
-  }, _ctx.ptm('input')), null, 16, _hoisted_3)], 16)], 16, _hoisted_1)) : createCommentVNode("", true), $data.searching || _ctx.loading ? renderSlot(_ctx.$slots, _ctx.$slots.loader ? 'loader' : 'loadingicon', {
+  }, _ctx.ptm('input')), null, 16, _hoisted_4)], 16)], 16, _hoisted_2)) : createCommentVNode("", true), $data.searching || _ctx.loading ? renderSlot(_ctx.$slots, _ctx.$slots.loader ? 'loader' : 'loadingicon', {
     key: 2,
     "class": normalizeClass(_ctx.cx('loader'))
   }, function () {
     return [_ctx.loader || _ctx.loadingIcon ? (openBlock(), createElementBlock("i", mergeProps({
       key: 0,
       "class": ['pi-spin', _ctx.cx('loader'), _ctx.loader, _ctx.loadingIcon],
-      "aria-hidden": "true"
-    }, _ctx.ptm('loader')), null, 16)) : (openBlock(), createBlock(_component_SpinnerIcon, mergeProps({
+      "aria-hidden": "true",
+      "data-p-has-dropdown": _ctx.dropdown
+    }, _ctx.ptm('loader')), null, 16, _hoisted_5)) : (openBlock(), createBlock(_component_SpinnerIcon, mergeProps({
       key: 1,
       "class": _ctx.cx('loader'),
       spin: "",
-      "aria-hidden": "true"
-    }, _ctx.ptm('loader')), null, 16, ["class"]))];
+      "aria-hidden": "true",
+      "data-p-has-dropdown": _ctx.dropdown
+    }, _ctx.ptm('loader')), null, 16, ["class", "data-p-has-dropdown"]))];
   }) : createCommentVNode("", true), renderSlot(_ctx.$slots, _ctx.$slots.dropdown ? 'dropdown' : 'dropdownbutton', {
     toggleCallback: function toggleCallback(event) {
       return $options.onDropdownClick(event);
@@ -1268,14 +1300,15 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.dropdownIcon ? 'span' : 'ChevronDownIcon'), mergeProps({
         "class": _ctx.dropdownIcon
       }, _ctx.ptm('dropdownIcon')), null, 16, ["class"]))];
-    })], 16, _hoisted_4)) : createCommentVNode("", true)];
-  }), createElementVNode("span", mergeProps({
+    })], 16, _hoisted_6)) : createCommentVNode("", true)];
+  }), _ctx.typeahead ? (openBlock(), createElementBlock("span", mergeProps({
+    key: 3,
     role: "status",
     "aria-live": "polite",
     "class": "p-hidden-accessible"
   }, _ctx.ptm('hiddenSearchResult'), {
     "data-p-hidden-accessible": true
-  }), toDisplayString($options.searchResultMessageText), 17), createVNode(_component_Portal, {
+  }), toDisplayString($options.searchResultMessageText), 17)) : createCommentVNode("", true), createVNode(_component_Portal, {
     appendTo: _ctx.appendTo
   }, {
     "default": withCtx(function () {
@@ -1298,7 +1331,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             }),
             onKeydown: _cache[10] || (_cache[10] = function () {
               return $options.onOverlayKeyDown && $options.onOverlayKeyDown.apply($options, arguments);
-            })
+            }),
+            "data-p": $options.overlayDataP
           }, _ctx.ptm('overlay')), [renderSlot(_ctx.$slots, "header", {
             value: _ctx.d_value,
             suggestions: $options.visibleOptions
@@ -1351,7 +1385,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   index: $options.getOptionIndex(i, getItemOptions)
                 }, function () {
                   return [createTextVNode(toDisplayString($options.getOptionGroupLabel(option.optionGroup)), 1)];
-                })], 16, _hoisted_7)) : withDirectives((openBlock(), createElementBlock("li", mergeProps({
+                })], 16, _hoisted_9)) : withDirectives((openBlock(), createElementBlock("li", mergeProps({
                   key: 1,
                   id: _ctx.$id + '_' + $options.getOptionIndex(i, getItemOptions),
                   style: {
@@ -1375,7 +1409,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                     return $options.onOptionMouseMove($event, $options.getOptionIndex(i, getItemOptions));
                   },
                   "data-p-selected": $options.isSelected(option),
-                  "data-p-focus": $data.focusedOptionIndex === $options.getOptionIndex(i, getItemOptions),
+                  "data-p-focused": $data.focusedOptionIndex === $options.getOptionIndex(i, getItemOptions),
                   "data-p-disabled": $options.isOptionDisabled(option),
                   ref_for: true
                 }, $options.getPTOptions(option, getItemOptions, i, 'option')), [renderSlot(_ctx.$slots, "option", {
@@ -1383,14 +1417,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   index: $options.getOptionIndex(i, getItemOptions)
                 }, function () {
                   return [createTextVNode(toDisplayString($options.getOptionLabel(option)), 1)];
-                })], 16, _hoisted_8)), [[_directive_ripple]])], 64);
+                })], 16, _hoisted_10)), [[_directive_ripple]])], 64);
               }), 128)), _ctx.showEmptyMessage && (!items || items && items.length === 0) ? (openBlock(), createElementBlock("li", mergeProps({
                 key: 0,
                 "class": _ctx.cx('emptyMessage'),
                 role: "option"
               }, _ctx.ptm('emptyMessage')), [renderSlot(_ctx.$slots, "empty", {}, function () {
                 return [createTextVNode(toDisplayString($options.searchResultMessageText), 1)];
-              })], 16)) : createCommentVNode("", true)], 16, _hoisted_6)];
+              })], 16)) : createCommentVNode("", true)], 16, _hoisted_8)];
             }),
             _: 2
           }, [_ctx.$slots.loader ? {
@@ -1411,13 +1445,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             "class": "p-hidden-accessible"
           }, _ctx.ptm('hiddenSelectedMessage'), {
             "data-p-hidden-accessible": true
-          }), toDisplayString($options.selectedMessageText), 17)], 16, _hoisted_5)) : createCommentVNode("", true)];
+          }), toDisplayString($options.selectedMessageText), 17)], 16, _hoisted_7)) : createCommentVNode("", true)];
         }),
         _: 3
       }, 16, ["onEnter", "onAfterEnter", "onLeave", "onAfterLeave"])];
     }),
     _: 3
-  }, 8, ["appendTo"])], 16);
+  }, 8, ["appendTo"])], 16, _hoisted_1);
 }
 
 script.render = render;