Refactor

components/lib/autocomplete/AutoComplete.d.ts

@@ -7,7 +7,7 @@
  * @module autocomplete
  *
  */
-import { HTMLAttributes, InputHTMLAttributes, TransitionProps, VNode } from 'vue';
+import { TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { InputTextPassThroughOptions } from '../inputtext';
 import { PassThroughOptions } from '../passthrough';
@@ -412,10 +412,6 @@ export interface AutoCompleteProps {
      * Style class of the input field.
      */
     inputClass?: string | object | undefined;
-    /**
-     * Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.
-     */
-    inputProps?: InputHTMLAttributes | undefined;
     /**
      * Inline style of the overlay panel.
      */
@@ -424,10 +420,6 @@ export interface AutoCompleteProps {
      * Style class of the overlay panel.
      */
     panelClass?: string | object | undefined;
-    /**
-     * Used to pass all properties of the HTMLDivElement to the overlay panel inside the component.
-     */
-    panelProps?: HTMLAttributes | undefined;
     /**
      * Icon to display in the dropdown.
      * @deprecated since v3.27.0. Use 'dropdownicon' slot.

components/lib/autocomplete/AutoComplete.vue

@@ -1,6 +1,6 @@
 <template>
     <div ref="container" :class="cx('root')" :style="sx('root')" @click="onContainerClick" v-bind="ptmi('root')">
-        <ACInputText
+        <InputText
             v-if="!multiple"
             ref="focusInput"
             :id="inputId"
@@ -28,7 +28,6 @@
             @input="onInput"
             @change="onChange"
             :unstyled="unstyled"
-            v-bind="inputProps"
             :pt="ptm('input')"
         />
         <ul
@@ -64,7 +63,7 @@
                 </slot>
             </li>
             <li :class="cx('inputToken')" role="option" v-bind="ptm('inputToken')">
-                <ACInputText
+                <InputText
                     ref="focusInput"
                     :id="inputId"
                     :style="inputStyle"
@@ -90,7 +89,6 @@
                     @keydown="onKeyDown"
                     @input="onInput"
                     @change="onChange"
-                    v-bind="inputProps"
                     :pt="ptm('input')"
                 />
             </li>
@@ -118,7 +116,7 @@
                     :style="{ ...panelStyle, 'max-height': virtualScrollerDisabled ? scrollHeight : '' }"
                     @click="onOverlayClick"
                     @keydown="onOverlayKeyDown"
-                    v-bind="{ ...panelProps, ...ptm('panel') }"
+                    v-bind="ptm('panel')"
                 >
                     <slot name="header" :value="modelValue" :suggestions="visibleOptions"></slot>
                     <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :style="{ height: scrollHeight }" :items="visibleOptions" :tabindex="-1" :disabled="virtualScrollerDisabled" :pt="ptm('virtualScroller')">
@@ -943,12 +941,12 @@ export default {
         }
     },
     components: {
-        ACInputText: InputText,
+        InputText,
-        VirtualScroller: VirtualScroller,
+        VirtualScroller,
-        Portal: Portal,
+        Portal,
-        ChevronDownIcon: ChevronDownIcon,
+        ChevronDownIcon,
-        SpinnerIcon: SpinnerIcon,
+        SpinnerIcon,
-        TimesCircleIcon: TimesCircleIcon
+        TimesCircleIcon
     },
     directives: {
         ripple: Ripple

components/lib/autocomplete/BaseAutoComplete.vue

@@ -97,10 +97,6 @@ export default {
             type: [String, Object],
             default: null
         },
-        inputProps: {
-            type: null,
-            default: null
-        },
         panelStyle: {
             type: Object,
             default: null
@@ -109,10 +105,6 @@ export default {
             type: [String, Object],
             default: null
         },
-        panelProps: {
-            type: null,
-            default: null
-        },
         dropdownIcon: {
             type: String,
             default: undefined

components/lib/calendar/BaseCalendar.vue

@@ -212,10 +212,6 @@ export default {
             type: Object,
             default: null
         },
-        inputProps: {
-            type: null,
-            default: null
-        },
         panelClass: {
             type: [String, Object],
             default: null
@@ -224,10 +220,6 @@ export default {
             type: Object,
             default: null
         },
-        panelProps: {
-            type: null,
-            default: null
-        },
         ariaLabelledby: {
             type: String,
             default: null

components/lib/calendar/Calendar.d.ts

@@ -7,7 +7,7 @@
  * @module calendar
  *
  */
-import { HTMLAttributes, InputHTMLAttributes, TransitionProps, VNode } from 'vue';
+import { TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { InputTextPassThroughOptions } from '../inputtext';
 import { PassThroughOptions } from '../passthrough';
@@ -752,10 +752,6 @@ export interface CalendarProps {
      * Style class of the input field.
      */
     inputClass?: string | object | undefined;
-    /**
-     * Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.
-     */
-    inputProps?: InputHTMLAttributes | undefined;
     /**
      * Inline style of the overlay panel.
      */
@@ -764,10 +760,6 @@ export interface CalendarProps {
      * Style class of the overlay panel.
      */
     panelClass?: string | object | undefined;
-    /**
-     * Used to pass all properties of the HTMLDivElement to the overlay panel inside the component.
-     */
-    panelProps?: HTMLAttributes | undefined;
     /**
      * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
      */

components/lib/calendar/Calendar.vue

@@ -1,6 +1,6 @@
 <template>
     <span ref="container" :id="d_id" :class="cx('root')" :style="sx('root')" v-bind="ptmi('root')">
-        <CInputText
+        <InputText
             v-if="!inline"
             :ref="inputRef"
             :id="inputId"
@@ -28,7 +28,6 @@
             @focus="onFocus"
             @blur="onBlur"
             @keydown="onKeyDown"
-            v-bind="inputProps"
             :pt="ptm('input')"
         />
         <slot v-if="showIcon && iconDisplay === 'button'" name="dropdownbutton">
@@ -67,7 +66,7 @@
                     @click="onOverlayClick"
                     @keydown="onOverlayKeyDown"
                     @mouseup="onOverlayMouseUp"
-                    v-bind="{ ...panelProps, ...ptm('panel') }"
+                    v-bind="ptm('panel')"
                 >
                     <template v-if="!timeOnly">
                         <div :class="cx('groupContainer')" v-bind="ptm('groupContainer')">
@@ -3001,13 +3000,13 @@ export default {
         }
     },
     components: {
-        CInputText: InputText,
+        InputText,
-        Portal: Portal,
+        Portal,
-        CalendarIcon: CalendarIcon,
+        CalendarIcon,
-        ChevronLeftIcon: ChevronLeftIcon,
+        ChevronLeftIcon,
-        ChevronRightIcon: ChevronRightIcon,
+        ChevronRightIcon,
-        ChevronUpIcon: ChevronUpIcon,
+        ChevronUpIcon,
-        ChevronDownIcon: ChevronDownIcon
+        ChevronDownIcon
     },
     directives: {
         ripple: Ripple

components/lib/dropdown/BaseDropdown.vue

@@ -62,10 +62,6 @@ export default {
             type: Object,
             default: null
         },
-        inputProps: {
-            type: null,
-            default: null
-        },
         panelClass: {
             type: [String, Object],
             default: null
@@ -74,18 +70,6 @@ export default {
             type: Object,
             default: null
         },
-        panelProps: {
-            type: null,
-            default: null
-        },
-        filterInputProps: {
-            type: null,
-            default: null
-        },
-        clearIconProps: {
-            type: null,
-            default: null
-        },
         appendTo: {
             type: [String, Object],
             default: 'body'

components/lib/dropdown/Dropdown.d.ts

@@ -7,7 +7,7 @@
  * @module dropdown
  *
  */
-import { HTMLAttributes, InputHTMLAttributes, TransitionProps, VNode } from 'vue';
+import { TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { InputTextPassThroughOptions } from '../inputtext';
 import { PassThroughOptions } from '../passthrough';
@@ -372,10 +372,6 @@ export interface DropdownProps {
      * Style class of the input field.
      */
     inputClass?: string | object | undefined;
-    /**
-     * Used to pass all properties of the HTMLInputElement/HTMLSpanElement to the focusable input element inside the component.
-     */
-    inputProps?: InputHTMLAttributes | HTMLAttributes | undefined;
     /**
      * Inline style of the overlay panel.
      */
@@ -384,19 +380,6 @@ export interface DropdownProps {
      * Style class of the overlay panel.
      */
     panelClass?: string | object | undefined;
-    /**
-     * Used to pass all properties of the HTMLDivElement to the overlay panel inside the component.
-     */
-    panelProps?: HTMLAttributes | undefined;
-    /**
-     * Used to pass all properties of the HTMLInputElement to the filter input inside the component.
-     */
-    filterInputProps?: InputHTMLAttributes | undefined;
-    /**
-     * Used to pass all properties of the HTMLElement to the clear icon inside the component.
-     * @deprecated since v3.26.0. Use 'pt' peroperty.
-     */
-    clearIconProps?: HTMLAttributes | undefined;
     /**
      * A valid query selector or an HTMLElement to specify where the overlay gets attached.
      * @defaultValue body

components/lib/dropdown/Dropdown.vue

@@ -1,6 +1,6 @@
 <template>
     <div ref="container" :id="id" :class="cx('root')" @click="onContainerClick" v-bind="ptmi('root')">
-        <DInputText
+        <InputText
             v-if="editable"
             ref="focusInput"
             :id="inputId"
@@ -26,7 +26,6 @@
             @blur="onBlur"
             @keydown="onKeyDown"
             @input="onEditableInput"
-            v-bind="inputProps"
             :pt="ptm('input')"
         />
         <span
@@ -47,12 +46,12 @@
             @focus="onFocus"
             @blur="onBlur"
             @keydown="onKeyDown"
-            v-bind="{ ...inputProps, ...ptm('input') }"
+            v-bind="ptm('input')"
         >
             <slot name="value" :value="modelValue" :placeholder="placeholder">{{ label === 'p-emptylabel' ? '&nbsp;' : label || 'empty' }}</slot>
         </span>
         <slot v-if="showClear && modelValue != null" name="clearicon" :class="cx('clearIcon')" :onClick="onClearClick" :clearCallback="onClearClick">
-            <component :is="clearIcon ? 'i' : 'TimesIcon'" ref="clearIcon" :class="[cx('clearIcon'), clearIcon]" @click="onClearClick" v-bind="{ ...clearIconProps, ...ptm('clearIcon') }" data-pc-section="clearicon" />
+            <component :is="clearIcon ? 'i' : 'TimesIcon'" ref="clearIcon" :class="[cx('clearIcon'), clearIcon]" @click="onClearClick" v-bind="ptm('clearIcon')" data-pc-section="clearicon" />
         </slot>
         <div :class="cx('trigger')" v-bind="ptm('trigger')">
             <slot v-if="loading" name="loadingicon" :class="cx('loadingIcon')">
@@ -65,7 +64,7 @@
         </div>
         <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" :class="[cx('panel'), panelClass]" :style="panelStyle" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="{ ...panelProps, ...ptm('panel') }">
+                <div v-if="overlayVisible" :ref="overlayRef" :class="[cx('panel'), panelClass]" :style="panelStyle" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="ptm('panel')">
                     <span
                         ref="firstHiddenFocusableElementOnOverlay"
                         role="presentation"
@@ -80,7 +79,7 @@
                     <slot name="header" :value="modelValue" :options="visibleOptions"></slot>
                     <div v-if="filter" :class="cx('header')" v-bind="ptm('header')">
                         <div :class="cx('filterContainer')" v-bind="ptm('filterContainer')">
-                            <DInputText
+                            <InputText
                                 ref="filterInput"
                                 type="text"
                                 :value="filterValue"
@@ -98,7 +97,6 @@
                                 @keydown="onFilterKeyDown"
                                 @blur="onFilterBlur"
                                 @input="onFilterChange"
-                                v-bind="filterInputProps"
                                 :pt="ptm('filterInput')"
                             />
                             <slot name="filtericon" :class="cx('filterIcon')">
@@ -984,7 +982,7 @@ export default {
         ripple: Ripple
     },
     components: {
-        DInputText: InputText,
+        InputText,
         VirtualScroller,
         Portal,
         TimesIcon,

components/lib/inputmask/InputMask.vue

@@ -1,5 +1,5 @@
 <template>
-    <IMInputText
+    <InputText
         :value="modelValue"
         :class="cx('root')"
         :readonly="readonly"
@@ -525,7 +525,7 @@ export default {
         }
     },
     components: {
-        IMInputText: InputText
+        InputText
     }
 };
 </script>

components/lib/inputnumber/BaseInputNumber.vue

@@ -137,18 +137,6 @@ export default {
             type: Object,
             default: null
         },
-        inputProps: {
-            type: null,
-            default: null
-        },
-        incrementButtonProps: {
-            type: null,
-            default: null
-        },
-        decrementButtonProps: {
-            type: null,
-            default: null
-        },
         ariaLabelledby: {
             type: String,
             default: null

components/lib/inputnumber/InputNumber.d.ts

@@ -7,7 +7,7 @@
  * @module inputnumber
  *
  */
-import { ButtonHTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
+import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { InputTextPassThroughOptions } from '../inputtext';
 import { PassThroughOptions } from '../passthrough';
@@ -142,6 +142,37 @@ export interface InputNumberState {
     focused: boolean;
 }
 
+/**
+ * Defines valid listeners in InputNumber component.
+ */
+export interface InputNumberButtonListeners {
+    /**
+     * Mouse down event of increment button.
+     * @param {Event} event - Browser event
+     */
+    onMousedown: (event: Event) => void;
+    /**
+     * Mouse up event of increment button.
+     * @param {Event} event - Browser event
+     */
+    onMouseup: (event: Event) => void;
+    /**
+     * Mouse leave event of increment button.
+     * @param {Event} event - Browser event
+     */
+    onMouseleave: (event: Event) => void;
+    /**
+     * Key down event of increment button.
+     * @param {Event} event - Browser event
+     */
+    onKeydown: (event: Event) => void;
+    /**
+     * Key up event of increment button.
+     * @param {Event} event - Browser event
+     */
+    onKeyup: (event: Event) => void;
+}
+
 /**
  * Defines valid properties in InputNumber component.
  */
@@ -295,18 +326,6 @@ export interface InputNumberProps {
      * Inline style of the input field.
      */
     inputStyle?: object | undefined;
-    /**
-     * Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.
-     */
-    inputProps?: InputHTMLAttributes | undefined;
-    /**
-     * Used to pass all properties of the HTMLButtonElement to increment button inside the component.
-     */
-    incrementButtonProps?: ButtonHTMLAttributes | undefined;
-    /**
-     * Used to pass all properties of the HTMLButtonElement to decrement button inside the component.
-     */
-    decrementButtonProps?: ButtonHTMLAttributes | undefined;
     /**
      * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
      */
@@ -341,60 +360,18 @@ export interface InputNumberSlots {
      */
     incrementbutton(scope: {
         /**
-         * Mouse down event of increment button.
+         * InputNumber listeners
-         * @param {Event} event - Browser event
          */
-        onMousedown: (event: Event) => void;
+        listeners: InputNumberButtonListeners;
-        /**
-         * Mouse up event of increment button.
-         * @param {Event} event - Browser event
-         */
-        onMouseup: (event: Event) => void;
-        /**
-         * Mouse leave event of increment button.
-         * @param {Event} event - Browser event
-         */
-        onMouseleave: (event: Event) => void;
-        /**
-         * Key down event of increment button.
-         * @param {Event} event - Browser event
-         */
-        onKeydown: (event: Event) => void;
-        /**
-         * Key up event of increment button.
-         * @param {Event} event - Browser event
-         */
-        onKeyup: (event: Event) => void;
     }): VNode[];
     /**
      * Custom decrement button template.
      */
     decrementbutton(scope: {
         /**
-         * Mouse down event of decrement button.
+         * InputNumber listeners
-         * @param {Event} event - Browser event
          */
-        onMousedown: (event: Event) => void;
+        listeners: InputNumberButtonListeners;
-        /**
-         * Mouse up event of decrement button.
-         * @param {Event} event - Browser event
-         */
-        onMouseup: (event: Event) => void;
-        /**
-         * Mouse leave event of decrement button.
-         * @param {Event} event - Browser event
-         */
-        onMouseleave: (event: Event) => void;
-        /**
-         * Key down event of decrement button.
-         * @param {Event} event - Browser event
-         */
-        onKeydown: (event: Event) => void;
-        /**
-         * Key up event of decrement button.
-         * @param {Event} event - Browser event
-         */
-        onKeyup: (event: Event) => void;
     }): VNode[];
     /**
      * Custom increment button icon template.

components/lib/inputnumber/InputNumber.vue

@@ -1,6 +1,6 @@
 <template>
     <span :class="cx('root')" v-bind="ptmi('root')">
-        <INInputText
+        <InputText
             ref="input"
             :id="inputId"
             role="spinbutton"
@@ -23,51 +23,34 @@
             @click="onInputClick"
             @focus="onInputFocus"
             @blur="onInputBlur"
-            v-bind="inputProps"
             :pt="ptm('input')"
             :unstyled="unstyled"
         />
         <span v-if="showButtons && buttonLayout === 'stacked'" :class="cx('buttonGroup')" v-bind="ptm('buttonGroup')">
-            <slot name="incrementbutton" v-on="upButtonListeners">
+            <slot name="incrementbutton" :listeners="upButtonListeners">
-                <button :class="[cx('incrementButton'), incrementButtonClass]" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="{ ...incrementButtonProps, ...ptm('incrementButton') }">
+                <button :class="[cx('incrementButton'), incrementButtonClass]" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="ptm('incrementButton')">
                     <slot name="incrementbuttonicon">
                         <component :is="incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="incrementButtonIcon" v-bind="ptm('incrementButtonIcon')" data-pc-section="incrementbuttonicon" />
                     </slot>
                 </button>
             </slot>
-            <slot name="decrementbutton" v-on="downButtonListeners">
+            <slot name="decrementbutton" :listeners="downButtonListeners">
-                <button :class="[cx('decrementButton'), decrementButtonClass]" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="{ ...decrementButtonProps, ...ptm('decrementButton') }">
+                <button :class="[cx('decrementButton'), decrementButtonClass]" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="ptm('decrementButton')">
                     <slot name="decrementbuttonicon">
                         <component :is="decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="decrementButtonIcon" v-bind="ptm('decrementButtonIcon')" data-pc-section="decrementbuttonicon" />
                     </slot>
                 </button>
             </slot>
         </span>
-        <slot name="incrementbutton" v-on="upButtonListeners">
+        <slot name="incrementbutton" :listeners="upButtonListeners">
-            <button
+            <button v-if="showButtons && buttonLayout !== 'stacked'" :class="[cx('incrementButton'), incrementButtonClass]" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="ptm('incrementButton')">
-                v-if="showButtons && buttonLayout !== 'stacked'"
-                :class="[cx('incrementButton'), incrementButtonClass]"
-                v-on="upButtonListeners"
-                :disabled="disabled"
-                :tabindex="-1"
-                aria-hidden="true"
-                v-bind="{ ...incrementButtonProps, ...ptm('incrementButton') }"
-            >
                 <slot name="incrementbuttonicon">
                     <component :is="incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="incrementButtonIcon" v-bind="ptm('incrementButtonIcon')" data-pc-section="incrementbuttonicon" />
                 </slot>
             </button>
         </slot>
-        <slot name="decrementbutton" v-on="downButtonListeners">
+        <slot name="decrementbutton" :listeners="downButtonListeners">
-            <button
+            <button v-if="showButtons && buttonLayout !== 'stacked'" :class="[cx('decrementButton'), decrementButtonClass]" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="ptm('decrementButton')">
-                v-if="showButtons && buttonLayout !== 'stacked'"
-                :class="[cx('decrementButton'), decrementButtonClass]"
-                v-on="downButtonListeners"
-                :disabled="disabled"
-                :tabindex="-1"
-                aria-hidden="true"
-                v-bind="{ ...decrementButtonProps, ...ptm('decrementButton') }"
-            >
                 <slot name="decrementbuttonicon">
                     <component :is="decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="decrementButtonIcon" v-bind="ptm('decrementButtonIcon')" data-pc-section="decrementbuttonicon" />
                 </slot>
@@ -983,9 +966,9 @@ export default {
         }
     },
     components: {
-        INInputText: InputText,
+        InputText,
-        AngleUpIcon: AngleUpIcon,
+        AngleUpIcon,
-        AngleDownIcon: AngleDownIcon
+        AngleDownIcon
     }
 };
 </script>

components/lib/listbox/BaseListbox.vue

@@ -42,7 +42,6 @@ export default {
             type: Array,
             default: null
         },
-        filterInputProps: null,
         virtualScrollerOptions: {
             type: Object,
             default: null

components/lib/listbox/Listbox.d.ts

@@ -7,7 +7,7 @@
  * @module listbox
  *
  */
-import { InputHTMLAttributes, VNode } from 'vue';
+import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { InputTextPassThroughOptions } from '../inputtext';
 import { PassThroughOptions } from '../passthrough';
@@ -303,10 +303,6 @@ export interface ListboxProps {
      * Fields used when filtering the options, defaults to optionLabel.
      */
     filterFields?: string[] | undefined;
-    /**
-     * Used to pass all properties of the HTMLInputElement to the filter input inside the component.
-     */
-    filterInputProps?: InputHTMLAttributes | undefined;
     /**
      * Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it.
      * @type {VirtualScrollerProps}

components/lib/listbox/Listbox.vue

@@ -14,7 +14,7 @@
         <slot name="header" :value="modelValue" :options="visibleOptions"></slot>
         <div v-if="filter" :class="cx('header')" v-bind="ptm('header')">
             <div :class="cx('filterContainer')" v-bind="ptm('filterContainer')">
-                <LInputText
+                <InputText
                     v-model="filterValue"
                     type="text"
                     :class="cx('filterInput')"
@@ -30,7 +30,6 @@
                     @input="onFilterChange"
                     @blur="onFilterBlur"
                     @keydown="onFilterKeyDown"
-                    v-bind="filterInputProps"
                     :pt="ptm('filterInput')"
                 />
 
@@ -737,9 +736,9 @@ export default {
         ripple: Ripple
     },
     components: {
-        LInputText: InputText,
+        InputText,
-        VirtualScroller: VirtualScroller,
+        VirtualScroller,
-        SearchIcon: SearchIcon
+        SearchIcon
     }
 };
 </script>

components/lib/multiselect/BaseMultiSelect.vue

@@ -31,10 +31,6 @@ export default {
             type: String,
             default: null
         },
-        inputProps: {
-            type: null,
-            default: null
-        },
         panelClass: {
             type: String,
             default: null
@@ -43,18 +39,6 @@ export default {
             type: null,
             default: null
         },
-        panelProps: {
-            type: null,
-            default: null
-        },
-        filterInputProps: {
-            type: null,
-            default: null
-        },
-        closeButtonProps: {
-            type: null,
-            default: null
-        },
         dataKey: null,
         filter: Boolean,
         filterPlaceholder: String,

components/lib/multiselect/MultiSelect.d.ts

@@ -7,7 +7,7 @@
  * @module multiselect
  *
  */
-import { ButtonHTMLAttributes, HTMLAttributes, InputHTMLAttributes, TransitionProps, VNode } from 'vue';
+import { TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { InputTextPassThroughOptions } from '../inputtext';
 import { PassThroughOptions } from '../passthrough';
@@ -358,10 +358,6 @@ export interface MultiSelectProps {
      * Identifier of the underlying input element.
      */
     inputId?: string | undefined;
-    /**
-     * Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.
-     */
-    inputProps?: InputHTMLAttributes | undefined;
     /**
      * Inline style of the overlay panel.
      */
@@ -370,18 +366,6 @@ export interface MultiSelectProps {
      * Style class of the overlay panel.
      */
     panelClass?: any;
-    /**
-     * Used to pass all properties of the HTMLDivElement to the overlay panel.
-     */
-    panelProps?: HTMLAttributes | undefined;
-    /**
-     * Used to pass all properties of the HTMLInputElement to the filter input inside the overlay panel.
-     */
-    filterInputProps?: InputHTMLAttributes | undefined;
-    /**
-     * Used to pass all properties of the HTMLButtonElement to the clear button inside the overlay panel.
-     */
-    closeButtonProps?: ButtonHTMLAttributes | undefined;
     /**
      * A property to uniquely identify an option.
      */

components/lib/multiselect/MultiSelect.vue

@@ -55,7 +55,7 @@
         </div>
         <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" :style="panelStyle" :class="[cx('panel'), panelClass]" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="{ ...panelProps, ...ptm('panel') }">
+                <div v-if="overlayVisible" :ref="overlayRef" :style="panelStyle" :class="[cx('panel'), panelClass]" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="ptm('panel')">
                     <span
                         ref="firstHiddenFocusableElementOnOverlay"
                         role="presentation"
@@ -86,7 +86,7 @@
                             </template>
                         </Checkbox>
                         <div v-if="filter" :class="cx('filterContainer')" v-bind="ptm('filterContainer')">
-                            <MSInputText
+                            <InputText
                                 ref="filterInput"
                                 :value="filterValue"
                                 @vue:mounted="onFilterUpdated"
@@ -104,7 +104,6 @@
                                 @keydown="onFilterKeyDown"
                                 @blur="onFilterBlur"
                                 @input="onFilterChange"
-                                v-bind="filterInputProps"
                                 :pt="ptm('filterInput')"
                             />
                             <slot name="filtericon" :class="cx('filterIcon')">
@@ -1090,7 +1089,7 @@ export default {
         ripple: Ripple
     },
     components: {
-        MSInputText: InputText,
+        InputText,
         Checkbox,
         VirtualScroller,
         Portal,