primevue 4.3.2 → 4.3.4

package/multiselect/index.mjs

@@ -1,3 +1,4 @@
+import { cn } from '@primeuix/utils';
 import { findSingle, getFocusableElements, isTouchDevice, relativePosition, getOuterWidth, absolutePosition, addStyle, focus, getLastFocusableElement, getFirstFocusableElement } from '@primeuix/utils/dom';
 import { isNotEmpty, isEmpty, findLastIndex, equals, isPrintableCharacter, resolveFieldData } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
@@ -659,13 +660,15 @@ var script = {
       ZIndex.set('overlay', el, this.$primevue.config.zIndex.overlay);
       addStyle(el, {
         position: 'absolute',
-        top: '0',
-        left: '0'
+        top: '0'
       });
       this.alignOverlay();
       this.scrollInView();
       this.autoFilterFocus && focus(this.$refs.filterInput.$el);
       this.autoUpdateModel();
+
+      // Issue: #7508
+      this.$attrSelector && el.setAttribute(this.$attrSelector, '');
     },
     onOverlayAfterEnter: function onOverlayAfterEnter() {
       this.bindOutsideClickListener();
@@ -761,7 +764,7 @@ var script = {
       return selectedItemsLabel;
     },
     onToggleAll: function onToggleAll(event) {
-      var _this10 = this;
+      var _this0 = this;
       if (this.selectAll !== null) {
         this.$emit('selectall-change', {
           originalEvent: event,
@@ -769,18 +772,18 @@ var script = {
         });
       } else {
         var value = this.allSelected ? [] : this.visibleOptions.filter(function (option) {
-          return _this10.isValidOption(option);
+          return _this0.isValidOption(option);
         }).map(function (option) {
-          return _this10.getOptionValue(option);
+          return _this0.getOptionValue(option);
         });
         this.updateModel(event, value);
       }
     },
     removeOption: function removeOption(event, optionValue) {
-      var _this11 = this;
+      var _this1 = this;
       event.stopPropagation();
       var value = this.d_value.filter(function (val) {
-        return !equals(val, optionValue, _this11.equalityKey);
+        return !equals(val, optionValue, _this1.equalityKey);
       });
       this.updateModel(event, value);
     },
@@ -804,45 +807,45 @@ var script = {
       return equals(value1, value2, this.equalityKey);
     },
     isSelected: function isSelected(option) {
-      var _this12 = this;
+      var _this10 = this;
       var optionValue = this.getOptionValue(option);
       return (this.d_value || []).some(function (value) {
-        return _this12.isEquals(value, optionValue);
+        return _this10.isEquals(value, optionValue);
       });
     },
     findFirstOptionIndex: function findFirstOptionIndex() {
-      var _this13 = this;
+      var _this11 = this;
       return this.visibleOptions.findIndex(function (option) {
-        return _this13.isValidOption(option);
+        return _this11.isValidOption(option);
       });
     },
     findLastOptionIndex: function findLastOptionIndex() {
-      var _this14 = this;
+      var _this12 = this;
       return findLastIndex(this.visibleOptions, function (option) {
-        return _this14.isValidOption(option);
+        return _this12.isValidOption(option);
       });
     },
     findNextOptionIndex: function findNextOptionIndex(index) {
-      var _this15 = this;
+      var _this13 = this;
       var matchedOptionIndex = index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex(function (option) {
-        return _this15.isValidOption(option);
+        return _this13.isValidOption(option);
       }) : -1;
       return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;
     },
     findPrevOptionIndex: function findPrevOptionIndex(index) {
-      var _this16 = this;
+      var _this14 = this;
       var matchedOptionIndex = index > 0 ? findLastIndex(this.visibleOptions.slice(0, index), function (option) {
-        return _this16.isValidOption(option);
+        return _this14.isValidOption(option);
       }) : -1;
       return matchedOptionIndex > -1 ? matchedOptionIndex : index;
     },
     findSelectedOptionIndex: function findSelectedOptionIndex() {
-      var _this17 = this;
+      var _this15 = this;
       if (this.$filled) {
         var _loop = function _loop() {
-            var value = _this17.d_value[index];
-            var matchedOptionIndex = _this17.visibleOptions.findIndex(function (option) {
-              return _this17.isValidSelectedOption(option) && _this17.isEquals(value, _this17.getOptionValue(option));
+            var value = _this15.d_value[index];
+            var matchedOptionIndex = _this15.visibleOptions.findIndex(function (option) {
+              return _this15.isValidSelectedOption(option) && _this15.isEquals(value, _this15.getOptionValue(option));
             });
             if (matchedOptionIndex > -1) return {
               v: matchedOptionIndex
@@ -857,28 +860,28 @@ var script = {
       return -1;
     },
     findFirstSelectedOptionIndex: function findFirstSelectedOptionIndex() {
-      var _this18 = this;
+      var _this16 = this;
       return this.$filled ? this.visibleOptions.findIndex(function (option) {
-        return _this18.isValidSelectedOption(option);
+        return _this16.isValidSelectedOption(option);
       }) : -1;
     },
     findLastSelectedOptionIndex: function findLastSelectedOptionIndex() {
-      var _this19 = this;
+      var _this17 = this;
       return this.$filled ? findLastIndex(this.visibleOptions, function (option) {
-        return _this19.isValidSelectedOption(option);
+        return _this17.isValidSelectedOption(option);
       }) : -1;
     },
     findNextSelectedOptionIndex: function findNextSelectedOptionIndex(index) {
-      var _this20 = this;
+      var _this18 = this;
       var matchedOptionIndex = this.$filled && index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex(function (option) {
-        return _this20.isValidSelectedOption(option);
+        return _this18.isValidSelectedOption(option);
       }) : -1;
       return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : -1;
     },
     findPrevSelectedOptionIndex: function findPrevSelectedOptionIndex(index) {
-      var _this21 = this;
+      var _this19 = this;
       var matchedOptionIndex = this.$filled && index > 0 ? findLastIndex(this.visibleOptions.slice(0, index), function (option) {
-        return _this21.isValidSelectedOption(option);
+        return _this19.isValidSelectedOption(option);
       }) : -1;
       return matchedOptionIndex > -1 ? matchedOptionIndex : -1;
     },
@@ -897,7 +900,7 @@ var script = {
       return matchedOptionIndex > -1 ? matchedOptionIndex : index;
     },
     findFirstFocusedOptionIndex: function findFirstFocusedOptionIndex() {
-      var selectedIndex = this.findSelectedOptionIndex();
+      var selectedIndex = this.findFirstSelectedOptionIndex();
       return selectedIndex < 0 ? this.findFirstOptionIndex() : selectedIndex;
     },
     findLastFocusedOptionIndex: function findLastFocusedOptionIndex() {
@@ -905,20 +908,20 @@ var script = {
       return selectedIndex < 0 ? this.findLastOptionIndex() : selectedIndex;
     },
     searchOptions: function searchOptions(event) {
-      var _this22 = this;
+      var _this20 = this;
       this.searchValue = (this.searchValue || '') + event.key;
       var optionIndex = -1;
       if (isNotEmpty(this.searchValue)) {
         if (this.focusedOptionIndex !== -1) {
           optionIndex = this.visibleOptions.slice(this.focusedOptionIndex).findIndex(function (option) {
-            return _this22.isOptionMatched(option);
+            return _this20.isOptionMatched(option);
           });
           optionIndex = optionIndex === -1 ? this.visibleOptions.slice(0, this.focusedOptionIndex).findIndex(function (option) {
-            return _this22.isOptionMatched(option);
+            return _this20.isOptionMatched(option);
           }) : optionIndex + this.focusedOptionIndex;
         } else {
           optionIndex = this.visibleOptions.findIndex(function (option) {
-            return _this22.isOptionMatched(option);
+            return _this20.isOptionMatched(option);
           });
         }
         if (optionIndex === -1 && this.focusedOptionIndex === -1) {
@@ -932,8 +935,8 @@ var script = {
         clearTimeout(this.searchTimeout);
       }
       this.searchTimeout = setTimeout(function () {
-        _this22.searchValue = '';
-        _this22.searchTimeout = null;
+        _this20.searchValue = '';
+        _this20.searchTimeout = null;
       }, 500);
     },
     changeFocusedOptionIndex: function changeFocusedOptionIndex(event, index) {
@@ -946,18 +949,18 @@ var script = {
       }
     },
     scrollInView: function scrollInView() {
-      var _this23 = this;
+      var _this21 = this;
       var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
       this.$nextTick(function () {
-        var id = index !== -1 ? "".concat(_this23.$id, "_").concat(index) : _this23.focusedOptionId;
-        var element = findSingle(_this23.list, "li[id=\"".concat(id, "\"]"));
+        var id = index !== -1 ? "".concat(_this21.$id, "_").concat(index) : _this21.focusedOptionId;
+        var element = findSingle(_this21.list, "li[id=\"".concat(id, "\"]"));
         if (element) {
           element.scrollIntoView && element.scrollIntoView({
             block: 'nearest',
             inline: 'nearest'
           });
-        } else if (!_this23.virtualScrollerDisabled) {
-          _this23.virtualScroller && _this23.virtualScroller.scrollToIndex(index !== -1 ? index : _this23.focusedOptionIndex);
+        } else if (!_this21.virtualScrollerDisabled) {
+          _this21.virtualScroller && _this21.virtualScroller.scrollToIndex(index !== -1 ? index : _this21.focusedOptionIndex);
         }
       });
     },
@@ -978,14 +981,14 @@ var script = {
       });
     },
     flatOptions: function flatOptions(options) {
-      var _this24 = this;
+      var _this22 = this;
       return (options || []).reduce(function (result, option, index) {
         result.push({
           optionGroup: option,
           group: true,
           index: index
         });
-        var optionGroupChildren = _this24.getOptionGroupChildren(option);
+        var optionGroupChildren = _this22.getOptionGroupChildren(option);
         optionGroupChildren && optionGroupChildren.forEach(function (o) {
           return result.push(o);
         });
@@ -1005,7 +1008,7 @@ var script = {
   },
   computed: {
     visibleOptions: function visibleOptions() {
-      var _this25 = this;
+      var _this23 = this;
       var options = this.optionGroupLabel ? this.flatOptions(this.options) : this.options || [];
       if (this.filterValue) {
         var filteredOptions = FilterService.filter(options, this.searchFields, this.filterValue, this.filterMatchMode, this.filterLocale);
@@ -1013,11 +1016,11 @@ var script = {
           var optionGroups = this.options || [];
           var filtered = [];
           optionGroups.forEach(function (group) {
-            var groupChildren = _this25.getOptionGroupChildren(group);
+            var groupChildren = _this23.getOptionGroupChildren(group);
             var filteredItems = groupChildren.filter(function (item) {
               return filteredOptions.includes(item);
             });
-            if (filteredItems.length > 0) filtered.push(_objectSpread(_objectSpread({}, group), {}, _defineProperty$1({}, typeof _this25.optionGroupChildren === 'string' ? _this25.optionGroupChildren : 'items', _toConsumableArray(filteredItems))));
+            if (filteredItems.length > 0) filtered.push(_objectSpread(_objectSpread({}, group), {}, _defineProperty$1({}, typeof _this23.optionGroupChildren === 'string' ? _this23.optionGroupChildren : 'items', _toConsumableArray(filteredItems))));
           });
           return this.flatOptions(filtered);
         }
@@ -1049,9 +1052,9 @@ var script = {
       return isNotEmpty(this.maxSelectedLabels) && this.d_value && this.d_value.length > this.maxSelectedLabels;
     },
     allSelected: function allSelected() {
-      var _this26 = this;
+      var _this24 = this;
       return this.selectAll !== null ? this.selectAll : isNotEmpty(this.visibleOptions) && this.visibleOptions.every(function (option) {
-        return _this26.isOptionGroup(option) || _this26.isOptionDisabled(option) || _this26.isSelected(option);
+        return _this24.isOptionGroup(option) || _this24.isOptionDisabled(option) || _this24.isSelected(option);
       });
     },
     // @deprecated use $filled instead.
@@ -1092,9 +1095,9 @@ var script = {
       return this.focusedOptionIndex !== -1 ? "".concat(this.$id, "_").concat(this.focusedOptionIndex) : null;
     },
     ariaSetSize: function ariaSetSize() {
-      var _this27 = this;
+      var _this25 = this;
       return this.visibleOptions.filter(function (option) {
-        return !_this27.isOptionGroup(option);
+        return !_this25.isOptionGroup(option);
       }).length;
     },
     toggleAllAriaLabel: function toggleAllAriaLabel() {
@@ -1111,6 +1114,28 @@ var script = {
     },
     isClearIconVisible: function isClearIconVisible() {
       return this.showClear && this.d_value && this.d_value.length && this.d_value != null && isNotEmpty(this.options);
+    },
+    containerDataP: function containerDataP() {
+      return cn(_defineProperty$1({
+        invalid: this.$invalid,
+        disabled: this.disabled,
+        focus: this.focused,
+        fluid: this.$fluid,
+        filled: this.$variant === 'filled'
+      }, this.size, this.size));
+    },
+    labelDataP: function labelDataP() {
+      return cn(_defineProperty$1(_defineProperty$1(_defineProperty$1({
+        placeholder: this.label === this.placeholder,
+        clearable: this.showClear,
+        disabled: this.disabled
+      }, this.size, this.size), 'has-chip', this.display === 'chip' && this.d_value && this.d_value.length && (this.maxSelectedLabels ? this.d_value.length <= this.maxSelectedLabels : true)), "empty", !this.placeholder && !this.$filled));
+    },
+    dropdownIconDataP: function dropdownIconDataP() {
+      return cn(_defineProperty$1({}, this.size, this.size));
+    },
+    overlayDataP: function overlayDataP() {
+      return cn(_defineProperty$1({}, 'portal-' + this.appendTo, 'portal-' + this.appendTo));
     }
   },
   directives: {
@@ -1136,13 +1161,16 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 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 = ["id", "disabled", "placeholder", "tabindex", "aria-label", "aria-labelledby", "aria-expanded", "aria-controls", "aria-activedescendant", "aria-invalid"];
-var _hoisted_2 = {
+var _hoisted_1 = ["data-p"];
+var _hoisted_2 = ["id", "disabled", "placeholder", "tabindex", "aria-label", "aria-labelledby", "aria-expanded", "aria-controls", "aria-activedescendant", "aria-invalid"];
+var _hoisted_3 = ["data-p"];
+var _hoisted_4 = {
   key: 0
 };
-var _hoisted_3 = ["id", "aria-label"];
-var _hoisted_4 = ["id"];
-var _hoisted_5 = ["id", "aria-label", "aria-selected", "aria-disabled", "aria-setsize", "aria-posinset", "onClick", "onMousemove", "data-p-selected", "data-p-focused", "data-p-disabled"];
+var _hoisted_5 = ["data-p"];
+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-focused", "data-p-disabled"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_Chip = resolveComponent("Chip");
   var _component_SpinnerIcon = resolveComponent("SpinnerIcon");
@@ -1160,7 +1188,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     style: _ctx.sx('root'),
     onClick: _cache[7] || (_cache[7] = function () {
       return $options.onContainerClick && $options.onContainerClick.apply($options, arguments);
-    })
+    }),
+    "data-p": $options.containerDataP
   }, _ctx.ptmi('root')), [createElementVNode("div", mergeProps({
     "class": "p-hidden-accessible"
   }, _ctx.ptm('hiddenInputContainer'), {
@@ -1190,10 +1219,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     onKeydown: _cache[2] || (_cache[2] = function () {
       return $options.onKeyDown && $options.onKeyDown.apply($options, arguments);
     })
-  }, _ctx.ptm('hiddenInput')), null, 16, _hoisted_1)], 16), createElementVNode("div", mergeProps({
+  }, _ctx.ptm('hiddenInput')), null, 16, _hoisted_2)], 16), createElementVNode("div", mergeProps({
     "class": _ctx.cx('labelContainer')
   }, _ctx.ptm('labelContainer')), [createElementVNode("div", mergeProps({
-    "class": _ctx.cx('label')
+    "class": _ctx.cx('label'),
+    "data-p": $options.labelDataP
   }, _ctx.ptm('label')), [renderSlot(_ctx.$slots, "value", {
     value: _ctx.d_value,
     placeholder: _ctx.placeholder
@@ -1202,7 +1232,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       key: 0
     }, [createTextVNode(toDisplayString($options.label || 'empty'), 1)], 64)) : _ctx.display === 'chip' ? (openBlock(), createElementBlock(Fragment, {
       key: 1
-    }, [$options.chipSelectedItems ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString($options.label), 1)) : (openBlock(true), createElementBlock(Fragment, {
+    }, [$options.chipSelectedItems ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString($options.label), 1)) : (openBlock(true), createElementBlock(Fragment, {
       key: 1
     }, renderList(_ctx.d_value, function (item) {
       return openBlock(), createElementBlock("span", mergeProps({
@@ -1241,7 +1271,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     }), 128)), !_ctx.d_value || _ctx.d_value.length === 0 ? (openBlock(), createElementBlock(Fragment, {
       key: 2
     }, [createTextVNode(toDisplayString(_ctx.placeholder || 'empty'), 1)], 64)) : createCommentVNode("", true)], 64)) : createCommentVNode("", true)];
-  })], 16)], 16), $options.isClearIconVisible ? renderSlot(_ctx.$slots, "clearicon", {
+  })], 16, _hoisted_3)], 16), $options.isClearIconVisible ? renderSlot(_ctx.$slots, "clearicon", {
     key: 0,
     "class": normalizeClass(_ctx.cx('clearIcon')),
     clearCallback: $options.onClearClick
@@ -1275,8 +1305,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, function () {
     return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.dropdownIcon ? 'span' : 'ChevronDownIcon'), mergeProps({
       "class": [_ctx.cx('dropdownIcon'), _ctx.dropdownIcon],
-      "aria-hidden": "true"
-    }, _ctx.ptm('dropdownIcon')), null, 16, ["class"]))];
+      "aria-hidden": "true",
+      "data-p": $options.dropdownIconDataP
+    }, _ctx.ptm('dropdownIcon')), null, 16, ["class", "data-p"]))];
   })], 16), createVNode(_component_Portal, {
     appendTo: _ctx.appendTo
   }, {
@@ -1299,7 +1330,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             }),
             onKeydown: _cache[6] || (_cache[6] = function () {
               return $options.onOverlayKeyDown && $options.onOverlayKeyDown.apply($options, arguments);
-            })
+            }),
+            "data-p": $options.overlayDataP
           }, _ctx.ptm('overlay')), [createElementVNode("span", mergeProps({
             ref: "firstHiddenFocusableElementOnOverlay",
             role: "presentation",
@@ -1446,7 +1478,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_4)) : withDirectives((openBlock(), createElementBlock("li", mergeProps({
+                })], 16, _hoisted_7)) : withDirectives((openBlock(), createElementBlock("li", mergeProps({
                   key: 1,
                   id: _ctx.$id + '_' + $options.getOptionIndex(i, getItemOptions),
                   style: {
@@ -1505,7 +1537,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   return [createElementVNode("span", mergeProps({
                     ref_for: true
                   }, _ctx.ptm('optionLabel')), toDisplayString($options.getOptionLabel(option)), 17)];
-                })], 16, _hoisted_5)), [[_directive_ripple]])], 64);
+                })], 16, _hoisted_8)), [[_directive_ripple]])], 64);
               }), 128)), $data.filterValue && (!items || items && items.length === 0) ? (openBlock(), createElementBlock("li", mergeProps({
                 key: 0,
                 "class": _ctx.cx('emptyMessage'),
@@ -1518,7 +1550,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 role: "option"
               }, _ctx.ptm('emptyMessage')), [renderSlot(_ctx.$slots, "empty", {}, function () {
                 return [createTextVNode(toDisplayString($options.emptyMessageText), 1)];
-              })], 16)) : createCommentVNode("", true)], 16, _hoisted_3)];
+              })], 16)) : createCommentVNode("", true)], 16, _hoisted_6)];
             }),
             _: 2
           }, [_ctx.$slots.loader ? {
@@ -1558,13 +1590,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }, _ctx.ptm('hiddenLastFocusableEl'), {
             "data-p-hidden-accessible": true,
             "data-p-hidden-focusable": true
-          }), null, 16)], 16)) : createCommentVNode("", true)];
+          }), null, 16)], 16, _hoisted_5)) : createCommentVNode("", true)];
         }),
         _: 3
       }, 16, ["onEnter", "onAfterEnter", "onLeave", "onAfterLeave"])];
     }),
     _: 3
-  }, 8, ["appendTo"])], 16);
+  }, 8, ["appendTo"])], 16, _hoisted_1);
 }
 
 script.render = render;