From 6e574debb4979ab23595f3ed65a3327404b99613 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Tue, 27 Jun 2023 13:52:44 +0200
Subject: [PATCH] chore: Remove deprecated `NcMultiselect` and
 `NcMultiselectTags` components

Use `NcSelect` and `NcSelectTags` instead.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 package-lock.json                             |  10 -
 package.json                                  |   1 -
 .../NcActionInput/NcActionInput.vue           |   4 +-
 .../NcListItemIcon/NcListItemIcon.vue         |   2 +-
 .../NcMultiselect/NcMultiselect.vue           | 483 ------------------
 src/components/NcMultiselect/index.js         |  28 -
 src/components/NcMultiselect/index.scss       | 298 -----------
 .../NcMultiselectTags/NcMultiselectTags.vue   | 262 ----------
 src/components/NcMultiselectTags/api.js       | 115 -----
 src/components/NcMultiselectTags/index.js     |  22 -
 src/components/index.js                       |   2 -
 .../NcMultiselect/NcMultiselect.spec.js       |  48 --
 .../NcMultiselectTags.spec.js                 | 130 -----
 13 files changed, 3 insertions(+), 1402 deletions(-)
 delete mode 100644 src/components/NcMultiselect/NcMultiselect.vue
 delete mode 100644 src/components/NcMultiselect/index.js
 delete mode 100644 src/components/NcMultiselect/index.scss
 delete mode 100644 src/components/NcMultiselectTags/NcMultiselectTags.vue
 delete mode 100644 src/components/NcMultiselectTags/api.js
 delete mode 100644 src/components/NcMultiselectTags/index.js
 delete mode 100644 tests/unit/components/NcMultiselect/NcMultiselect.spec.js
 delete mode 100644 tests/unit/components/NcMultiselectTags/NcMultiselectTags.spec.js

diff --git a/package-lock.json b/package-lock.json
index f07086d0e8..5dd8a5d1b5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -49,7 +49,6 @@
         "vue": "^2.7.14",
         "vue-color": "^2.8.1",
         "vue-material-design-icons": "^5.1.2",
-        "vue-multiselect": "^2.1.6",
         "vue2-datepicker": "^3.11.0"
       },
       "devDependencies": {
@@ -24546,15 +24545,6 @@
       "resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.2.0.tgz",
       "integrity": "sha512-fcdcJHQ9fQw2CAytuLAzWSELcxH138sCdMItVhvmO7Lu9afIgojB/UCWv7XHt/lURsnq/n6O+muM4AQgw8yfig=="
     },
-    "node_modules/vue-multiselect": {
-      "version": "2.1.7",
-      "resolved": "https://registry.npmjs.org/vue-multiselect/-/vue-multiselect-2.1.7.tgz",
-      "integrity": "sha512-KIegcN+Ntwg3cbkY/jhw2s/+XJUM0Lpi/LcKFYCS8PrZHcWBl2iKCVze7ZCnRj3w8H7/lUJ9v7rj9KQiNxApBw==",
-      "engines": {
-        "node": ">= 4.0.0",
-        "npm": ">= 3.0.0"
-      }
-    },
     "node_modules/vue-resize": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-1.0.1.tgz",
diff --git a/package.json b/package.json
index 81784069f4..c81bba1ace 100644
--- a/package.json
+++ b/package.json
@@ -80,7 +80,6 @@
     "vue": "^2.7.14",
     "vue-color": "^2.8.1",
     "vue-material-design-icons": "^5.1.2",
-    "vue-multiselect": "^2.1.6",
     "vue2-datepicker": "^3.11.0"
   },
   "engines": {
diff --git a/src/components/NcActionInput/NcActionInput.vue b/src/components/NcActionInput/NcActionInput.vue
index 043a28e731..f46e41008a 100644
--- a/src/components/NcActionInput/NcActionInput.vue
+++ b/src/components/NcActionInput/NcActionInput.vue
@@ -23,8 +23,8 @@
 
 <docs>
 This component is made to be used inside of the [NcActions](#NcActions) component slots.
-All undocumented attributes will be bound to the input, the datepicker or the multiselect component, e.g. `maxlength`, `not-before`.
-For the multiselect component, all events will be passed through. Please see the multiselect component's documentation for more details and examples.
+All undocumented attributes will be bound to the input, the datepicker or the select component, e.g. `maxlength`, `not-before`.
+For the `NcSelect` component, all events will be passed through. Please see the `NcSelect` component's documentation for more details and examples.
 ```vue
 	<template>
 		<NcActions>
diff --git a/src/components/NcListItemIcon/NcListItemIcon.vue b/src/components/NcListItemIcon/NcListItemIcon.vue
index 2bf53c0d51..091c152ec5 100644
--- a/src/components/NcListItemIcon/NcListItemIcon.vue
+++ b/src/components/NcListItemIcon/NcListItemIcon.vue
@@ -249,7 +249,7 @@ export default {
 
 		/**
 		 * Disable the margins of this component.
-		 * Useful for integration in Multiselect for example
+		 * Useful for integration in `NcSelect` for example
 		 */
 		noMargin: {
 			type: Boolean,
diff --git a/src/components/NcMultiselect/NcMultiselect.vue b/src/components/NcMultiselect/NcMultiselect.vue
deleted file mode 100644
index 1ea951a5ae..0000000000
--- a/src/components/NcMultiselect/NcMultiselect.vue
+++ /dev/null
@@ -1,483 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
-  -
-  - @author John Molakvoæ <skjnldsv@protonmail.com>
-  -
-  - @license GNU AGPL version 3 or any later version
-  -
-  - This program is free software: you can redistribute it and/or modify
-  - it under the terms of the GNU Affero General Public License as
-  - published by the Free Software Foundation, either version 3 of the
-  - License, or (at your option) any later version.
-  -
-  - This program is distributed in the hope that it will be useful,
-  - but WITHOUT ANY WARRANTY; without even the implied warranty of
-  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-  - GNU Affero General Public License for more details.
-  -
-  - You should have received a copy of the GNU Affero General Public License
-  - along with this program. If not, see <http://www.gnu.org/licenses/>.
-  -
-  -->
-<docs>
-## NcMultiselect
-
-![status](https://img.shields.io/badge/status-deprecated-red?style=for-the-badge)
-
-**Use [NcSelect](#/Components/NcSelect?id=ncselect-1) instead**
-
----
-
-We're wrapping the awesome vue-multiselect library to add our own styling and default props/methods
-You can use all the properties from https://vue-multiselect.js.org that are not declared/overrided here.
-
-### Simple examples
-```vue
-<template>
-	<div class="wrapper">
-		<NcMultiselect v-model="value1" :options="options" />
-		<NcMultiselect v-model="value2" :options="options" :multiple="true" />
-	</div>
-</template>
-
-<script>
-import NcMultiselect from '../index'
-export default {
-	data() {
-		return { value1: '2', value2: ['2'], options: ['0', '1', '2', '3', '4'] }
-	}
-}
-</script>
-
-<style>
-.wrapper {
-	display: flex;
-	gap: 8px;
-	align-items: start;
-}
-</style>
-```
-
-### Simple example with objects
-You can either use the exact object or the track-by key to match against your options
-
-```vue
-<template>
-	<div class="wrapper">
-		<NcMultiselect v-model="value1" :options="options" track-by="id" label="label" />
-		<pre>Selected option: {{ value1 }}</pre>
-		<br />
-		<NcMultiselect v-model="value2" :options="options" track-by="id" label="label" />
-		<pre>Selected option: {{ value2 }}</pre>
-	</div>
-</template>
-
-<script>
-import NcMultiselect from '../index'
-const options = [
-	{ id: 1, label: 'Option 1' },
-	{ id: 2, label: 'Option 2' },
-	{ id: 3, label: 'Option 3' },
-	{ id: 4, label: 'Option 4' }
-]
-export default {
-	data() {
-		return {
-			value1: options[1],
-			value2: 2,
-			options
-		}
-	}
-}
-</script>
-```
-
-### Limit with automated tooltip
-```vue
-<template>
-	<NcMultiselect v-model="value"
-		:options="options" :multiple="true"
-		:tag-width="80" />
-</template>
-
-<script>
-import NcMultiselect from '../index'
-export default {
-	data() {
-		return {
-			value: ['eirmod', 'et', 'magna', 'invidunt', 'tempor'],
-			options: ['Consetetur', 'sadipscing', 'elitr', 'sed',
-				'diam', 'nonumy', 'eirmod', 'tempor', 'invidunt',
-				'ut', 'labore', 'et', 'dolore', 'magna', 'aliquyam', 'erat']
-		}
-	}
-}
-</script>
-```
-
-### User layout
-By specifying `:user-select="true"`, you can benefit from a fully formatted layout.
-The singleLabel slot here is optional of course and here for demonstration purposes
-The NcListItemIcon name will be provided by the option key refering to the `label` prop.
-Example here: `displayName`
-
-> **Note:** Any extra binding from the object will be added as attribute (`$attrs`) on the NcListItemIcon component used here
-
-```vue
-<template>
-	<NcMultiselect v-model="value" :options="formattedOptions"
-		label="displayName" track-by="user"
-		:user-select="true"
-		style="width: 250px">
-		<template #singleLabel="{ option }">
-			<NcListItemIcon v-bind="option" :name="option.displayName" :avatar-size="24" :no-margin="true" />
-		</template>
-	</NcMultiselect>
-</template>
-
-<script>
-import NcMultiselect from '../index'
-
-// Building fake data for the docs
-const options = ['admin', 'user1', 'user2', 'guest', 'group1']
-const formattedOptions = options.map(item => {
-	return {
-		user: item,
-		displayName: item,
-		subtitle: `This is the ${item.startsWith('group') ? 'group' : 'user'} ${item}`,
-		icon: item.startsWith('group') ? 'icon-group' : 'icon-user',
-		isNoUser: item.startsWith('group')
-	}
-})
-export default {
-	data() {
-			return {
-					value: formattedOptions[0],
-					formattedOptions,
-			}
-	},
-}
-</script>
-```
-</docs>
-
-<template>
-	<!--
-	# This is the original Multiselect !
-	## tag-placeholder="create"
-	-> Hack to allow us to detect when an option needs
-	-  to be created (with css) and apply the proper
-	-  styling to this entry, @see [data-select='create']
-	## :close-on-select="!multiple"
-	-> If multiple choice allowed, leave the dropdown
-	-  open after select
-	## v-on="$listeners", v-bind="$attrs"
-	-> Forward all undeclared props to the vue-multiselect child
-	-->
-	<VueMultiselect ref="VueMultiselect"
-		v-model="localValue"
-		v-bind="$attrs"
-		:class="[
-			multiple ? 'multiselect--multiple' : 'multiselect--single'
-		]"
-		:options="options"
-		:limit="maxOptions"
-		:loading="loading"
-		:aria-expanded="ariaExpanded.toString()"
-		:close-on-select="willCloseOnSelect"
-		:multiple="multiple"
-		:label="label"
-		:track-by="trackBy"
-		tag-placeholder="create"
-		@close="ariaExpanded = false"
-		@open="ariaExpanded = true"
-		v-on="$listeners">
-		<!-- This is the scope to format the list of available options in the dropdown
-			Two templates to avoid registering the slot unnecessary -->
-		<template #option="scope">
-			<!-- Avatar display select slot override.
-				You CANNOT use this scope, we will replace it by this -->
-			<NcListItemIcon v-if="userSelect && !$scopedSlots['option']"
-				v-bind="scope.option"
-				:name="scope.option[label]"
-				:search="scope.search" />
-
-			<!-- Ellipsis in the middle if no option slot
-				is defined in the parent -->
-			<NcEllipsisedOption v-else-if="!$scopedSlots['option']"
-				:name="getOptionLabel(scope.option)"
-				:search="scope.search" />
-
-			<!-- Passing the singleLabel slot -->
-			<slot v-else name="option" v-bind="scope" />
-		</template>
-
-		<!-- Registering the limit slot to get the +xxx tooltip.
-			You CANNOT use this scope, we will replace it by this -->
-		<template v-if="multiple" #limit>
-			<span v-tooltip.auto="formatLimitTitle(value)"
-				class="multiselect__limit">
-				{{ limitString }}
-			</span>
-		</template>
-
-		<!-- Passing the singleLabel slot, this is used to format the selected
-			option on NON-multiple multiselects -->
-		<template v-for="(_, slot) of $scopedSlots" #[slot]="scope">
-			<slot :name="slot" v-bind="scope" />
-		</template>
-
-		<template #noResult>
-			<slot name="noResult">
-				<span>{{ t('No results') }}</span>
-			</slot>
-		</template>
-		<template #loading>
-			<NcLoadingIcon v-if="loading" />
-		</template>
-	</VueMultiselect>
-</template>
-
-<script>
-import NcEllipsisedOption from '../NcEllipsisedOption/index.js'
-import NcListItemIcon from '../NcListItemIcon/index.js'
-import NcLoadingIcon from '../NcLoadingIcon/index.js'
-import Tooltip from '../../directives/Tooltip/index.js'
-import l10n from '../../mixins/l10n.js'
-
-import VueMultiselect from 'vue-multiselect'
-
-if (!PRODUCTION) {
-	console.warn('NcMultiselect usage has been deprecated. Use NcSelect instead.')
-}
-
-export default {
-	name: 'NcMultiselect',
-	components: {
-		NcEllipsisedOption,
-		NcListItemIcon,
-		NcLoadingIcon,
-		VueMultiselect,
-	},
-	directives: {
-		tooltip: Tooltip,
-	},
-	mixins: [l10n],
-	inheritAttrs: false,
-
-	/**
-	 * Every prop that is defined here will break the auto
-	 * forward to the vue-multiselect component
-	 * You will have to specify it as a prop on the template
-	 */
-	props: {
-		// eslint-disable-next-line
-		value: {
-			default() {
-				return []
-			},
-		},
-
-		/**
-		 * Close the Multiselect when selecting an item.
-		 * Will be overwritten by !multiple if undefined.
-		 */
-		closeOnSelect: {
-			type: Boolean,
-			default: undefined,
-		},
-
-		/**
-		 * Allow multiple select ?
-		 */
-		multiple: {
-			type: Boolean,
-			default: false,
-		},
-
-		/**
-		 * Limit the number of results
-		 */
-		limit: {
-			type: Number,
-			default: 99999,
-		},
-
-		/**
-		 * key to use as label on object options
-		 */
-		label: {
-			type: String,
-			default: '',
-		},
-		/**
-		 * key to use as id on object options
-		 */
-		trackBy: {
-			type: String,
-			default: '',
-		},
-
-		/**
-		 * Array of available options: Objects, Strings or Integers.
-		 * If array of objects, visible label will default to option.label.
-		 * If `labal` prop is passed, label will equal option['label']
-		 */
-		options: {
-			type: Array,
-			required: true,
-		},
-
-		/**
-		 * Enable the big user selector w/ avatar
-		 * Make sure your objects fit the requirements
-		 */
-		userSelect: {
-			type: Boolean,
-			default: false,
-		},
-		/**
-		 * Overriding the default slot. Only showing a spiner.
-		 */
-		loading: {
-			type: Boolean,
-			default: false,
-		},
-		/**
-		 * Enable the automatic limit and width calculation
-		 * Only works on multiple
-		 */
-		autoLimit: {
-			type: Boolean,
-			default: true,
-		},
-		/**
-		 * If autoLimit, allow to specify the min-width of every
-		 * selected option when calculating the number of options
-		 * to show. This needs to be a positive integer.
-		 */
-		tagWidth: {
-			type: Number,
-			default: 150,
-			validator: (value) => {
-				return value > 0
-			},
-		},
-	},
-
-	emits: [
-		'change',
-		'update:value',
-	],
-
-	data() {
-		return {
-			elWidth: 0,
-			ariaExpanded: false,
-		}
-	},
-	computed: {
-		/**
-		 * Calculate the number of options to show
-		 * depending on the width of the select.
-		 * Only works if `autoLimit` is `true`
-		 *
-		 * @return {number}
-		 */
-		maxOptions() {
-			if (this.autoLimit && this.elWidth > 0 && this.tagWidth !== 0) {
-				const limit = Math.floor(this.elWidth / this.tagWidth)
-				return limit > 0 ? limit : 1
-			}
-			return this.limit ? this.limit : 9999
-		},
-		/**
-		 * Make the tooltip limit string for the `autoLimit`
-		 *
-		 * @return {string}
-		 */
-		limitString() {
-			return `+${this.value.length - this.maxOptions}`
-		},
-
-		localValue: {
-			get() {
-				if (this.trackBy && this.options
-					&& typeof this.value !== 'object'
-					&& this.options[this.value]) {
-					return this.options[this.value]
-				}
-				return this.value
-			},
-			set(value) {
-				this.$emit('update:value', value)
-				this.$emit('change', value)
-			},
-		},
-
-		/**
-		 * If closeOnSelect is not manually set, set it to !multiple
-		 *
-		 * @return {boolean} closeOnSelect for vue-multiselect
-		 */
-		willCloseOnSelect() {
-			if (this.closeOnSelect === undefined) return !this.multiple
-			return this.closeOnSelect
-		},
-	},
-
-	watch: {
-		// ensure we update the width when we add or remove data
-		value() {
-			this.updateWidth()
-		},
-	},
-
-	mounted() {
-		this.updateWidth()
-		window.addEventListener('resize', this.updateWidth)
-	},
-	beforeDestroy() {
-		window.removeEventListener('resize', this.updateWidth)
-	},
-
-	methods: {
-		/**
-		 * Returns the option label
-		 *
-		 * @param {string} option The selected option
-		 * @return {string}
-		 */
-		getOptionLabel(option) {
-			return String(this.$refs.VueMultiselect?.getOptionLabel(option))
-		},
-		/**
-		 * Format array of groups objects to a string
-		 * for the limit popup using the label prop
-		 *
-		 * @param {Array} options The selected options
-		 * @return {string}
-		 */
-		formatLimitTitle(options) {
-			if (Array.isArray(options) && options.length > 0) {
-				let selection = options
-				if (typeof options[0] === 'object') {
-					selection = options.map(option => option[this.label])
-				}
-				return selection.slice(this.maxOptions).join(', ')
-			}
-			return ''
-		},
-
-		/**
-		 * Update the component width data
-		 */
-		updateWidth() {
-			// width of the tags wrapper minus the padding
-			if (this.$el && this.$el.querySelector('.multiselect__tags-wrap')) {
-				this.elWidth = this.$el.querySelector('.multiselect__tags-wrap').offsetWidth - 10
-			}
-		},
-	},
-}
-</script>
diff --git a/src/components/NcMultiselect/index.js b/src/components/NcMultiselect/index.js
deleted file mode 100644
index 6a75995d46..0000000000
--- a/src/components/NcMultiselect/index.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
- *
- * @author John Molakvoæ <skjnldsv@protonmail.com>
- *
- * @license AGPL-3.0-or-later
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
-import './index.scss'
-import NcMultiselect from './NcMultiselect.vue'
-import ScopeComponent from '../../utils/ScopeComponent.js'
-
-ScopeComponent(NcMultiselect)
-
-export default NcMultiselect
diff --git a/src/components/NcMultiselect/index.scss b/src/components/NcMultiselect/index.scss
deleted file mode 100644
index 802883f8f5..0000000000
--- a/src/components/NcMultiselect/index.scss
+++ /dev/null
@@ -1,298 +0,0 @@
-// scoping is not working inside the Multiselect.vue component
-// as the nested properties are not inside it
-// Therefore we need to use an external scoping
-.multiselect[data-v-#{$scope_version}] {
-	margin: 0;
-	padding: 0 !important;
-	display: inline-block;
-	/* override this rule with your width styling if you need */
-	min-width: 260px;
-	position: relative;
-
-	/* Force single multiselect value to be shown when not active */
-	&:not(.multiselect--active) .multiselect__single {
-		width: 100%;
-		z-index: 2 !important;
-	}
-
-	// Remove radius on top opening
-	&.multiselect--active.multiselect--above {
-		input.multiselect__input {
-			border-radius: 0 0 var(--border-radius) var(--border-radius);
-		}
-	}
-
-	// disabled state background
-	&.multiselect--disabled,
-	&.multiselect--disabled .multiselect__single {
-		background-color: var(--color-background-dark) !important;
-	}
-
-	// loading state
-	.loading-icon {
-		position: absolute;
-		right: 1px;
-		top: 1px;
-		width: 48px;
-		height: 35px;
-		background: var(--color-main-background);
-		z-index: 3;
-	}
-
-	// multiple selected options display
-	.multiselect__tags {
-		/* space between tags and limit tag */
-		$space-between: 5px;
-		display: flex;
-		flex-wrap: nowrap;
-		overflow: hidden;
-		border: 2px solid var(--color-border-dark);
-		cursor: pointer;
-		position: relative;
-		border-radius: var(--border-radius-large);
-		min-height: 44px;
-		height: 44px;
-		padding: 8px 12px !important;
-		background-color: var(--color-main-background);
-		box-sizing: border-box;
-
-		&:focus, &:hover {
-			border-color: var(--color-primary-element);
-		}
-
-		/* tag wrapper */
-		.multiselect__tags-wrap {
-			align-items: center;
-			display: inline-flex;
-			overflow: hidden;
-			max-width: 100%;
-			position: relative;
-			gap: $space-between;
-			flex: 1 1;
-			flex-wrap: nowrap;
-			/* no tags or simple select? Show input directly
-			input is used to display single value */
-			&:empty ~ input.multiselect__input {
-				opacity: $opacity_full !important;
-				display: block !important;
-				/* hide default empty text like .multiselect__placeholder,
-				and show input instead. It looks better without a transition between
-				a span and the input that have different styling */
-				+ span:not(.multiselect__single) {
-					display: none;
-				}
-			}
-			/* selected tag */
-			.multiselect__tag {
-				line-height: 20px;
-				padding: 2px 5px;
-				background-image: none;
-				color: var(--color-main-text);
-				border: 1px solid var(--color-border-dark);
-				display: inline-flex;
-				align-items: center;
-				border-radius: var(--border-radius);
-				/* require to override the default width
-				and force the tag to shring properly */
-				min-width: 0;
-				max-width: fit-content;
-				max-width: -moz-fit-content;
-				margin: 0;
-				/* css hack, detect if more than two tags
-				if so, flex-basis is set to half */
-				&:only-child {
-					flex: 0 1 auto;
-				}
-				/* ellipsis the groups to be sure
-				we display at least two of them */
-				> span {
-					white-space: nowrap;
-					text-overflow: ellipsis;
-					overflow: hidden;
-				}
-			}
-		}
-
-		/* Single select default value
-		or default placeholder if search disabled*/
-		.multiselect__single,
-		.multiselect__placeholder {
-			z-index: 1; /* above input */
-			background-color: var(--color-main-background);
-			line-height: 18px; // 32px - 2*6px (padding) - 2*1px (border)
-			color: var(--color-text-lighter); // like the input
-			// Align content and make the flow smoother
-			display: flex;
-			align-items: center;
-			font-size: var(--default-font-size);
-
-			// Anything inside will trigger the select opening
-			&, * {
-				cursor: pointer;
-			}
-		}
-		/* displayed text if tag limit reached */
-		.multiselect__strong,
-		.multiselect__limit {
-			line-height: 20px;
-			color: var(--color-text-lighter);
-			display: inline-flex;
-			align-items: center;
-			opacity: $opacity_normal;
-			margin-right: $space-between;
-			/* above the input */
-			z-index: 5;
-		}
-		/* default multiselect input for search and placeholder */
-		input.multiselect__input {
-			width: 100% !important;
-			height: auto !important;
-			margin: 0;
-			opacity: 0;
-			border: none;
-			/* override hide to force show the placeholder */
-			/* only when not active */
-			cursor: pointer;
-			/* override inline styling of the lib */
-			display: none;
-			height: 40px;
-			min-height: 26px;
-			padding: 0 !important;
-			font-size: var(--default-font-size);
-		}
-	}
-
-	// active state, force the input to be shown, we don't want
-	// the placeholder or the currently selected options
-	&.multiselect--active {
-		/* Opened: force display the input */
-		input.multiselect__input {
-			opacity: $opacity_full !important;
-			cursor: text !important;
-			// remove border radius on bottom opening
-			border-radius: var(--border-radius) var(--border-radius) 0 0;
-			display: block !important;
-		}
-
-		/* multiselect__limit hidden if active */
-		.multiselect__limit {
-			display: none;
-		}
-	}
-
-	/* results wrapper */
-	.multiselect__content-wrapper {
-		position: absolute;
-		width: 100%;
-		margin-top: -1px;
-		border: 1px solid var(--color-border-dark);
-		background: var(--color-main-background);
-		z-index: 50;
-		max-height: 250px;
-		overflow-y: auto;
-		border-radius: 0 0 var(--border-radius) var(--border-radius);
-		.multiselect__content {
-			width: 100%;
-			padding: 0;
-		}
-		li {
-			position: relative;
-			display: flex;
-			align-items: center;
-			background-color: transparent;
-			&,
-			span {
-				cursor: pointer;
-			}
-			> span {
-				padding: 8px;
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				margin: 0;
-				height: auto;
-				min-height: 1em;
-				-webkit-touch-callout: none;
-				-webkit-user-select: none;
-				-moz-user-select: none;
-				-ms-user-select: none;
-				user-select: none;
-				display: inline-flex;
-				align-items: center;
-				background-color: transparent;
-				color: var(--color-text-lighter);
-				width: 100%;
-				/* selected checkmark icon */
-				&::before {
-					content: ' ';
-					background-repeat: no-repeat;
-					background-position: center;
-					min-width: 16px;
-					min-height: 16px;
-					display: block;
-					opacity: $opacity_disabled;
-					margin-right: 5px;
-					visibility: hidden;
-				}
-				&.multiselect__option--disabled {
-					background-color: var(--color-background-dark);
-					opacity: $opacity_disabled;
-				}
-				&.multiselect__option--highlight {
-					color: var(--color-main-text);
-					background-color: var(--color-background-dark);
-				}
-				&:not(.multiselect__option--disabled):hover::before {
-					opacity: .3;
-				}
-				&.multiselect__option--selected,
-				&:not(.multiselect__option--disabled):hover {
-					&::before {
-						visibility: visible;
-					}
-				}
-			}
-		}
-	}
-	/* ABOVE display */
-	&.multiselect--above .multiselect__content-wrapper {
-		bottom: 100%;
-		margin-bottom: -1px;
-	}
-
-	/* Icon before option select */
-	&.multiselect--multiple {
-		// push the input after the tag list
-		.multiselect__tags {
-			flex-wrap: wrap;
-		}
-
-		.multiselect__content-wrapper li > span {
-			&::before {
-				background-image: var(--icon-checkmark-dark);
-			}
-
-			/* add the prop tag-placeholder="create" to add the +
-			icon on top of an unknown-and-ready-to-be-created entry */
-			&[data-select='create'] {
-				&::before {
-					background-image: var(--icon-add-dark);
-					visibility: visible;
-				}
-			}
-		}
-	}
-
-	/* No need for an icon here */
-	&.multiselect--single .multiselect__content-wrapper li > span::before {
-		display: none;
-	}
-
-	/* Mouse feedback */
-	&:hover,
-	input.multiselect__input {
-		.multiselect__placeholder {
-			color: var(--color-main-text);
-		}
-	}
-}
diff --git a/src/components/NcMultiselectTags/NcMultiselectTags.vue b/src/components/NcMultiselectTags/NcMultiselectTags.vue
deleted file mode 100644
index 20e57cf17b..0000000000
--- a/src/components/NcMultiselectTags/NcMultiselectTags.vue
+++ /dev/null
@@ -1,262 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
-  -
-  - @author Julius Härtl <jus@bitgrid.net>
-  -
-  - @license GNU AGPL version 3 or any later version
-  -
-  - This program is free software: you can redistribute it and/or modify
-  - it under the terms of the GNU Affero General Public License as
-  - published by the Free Software Foundation, either version 3 of the
-  - License, or (at your option) any later version.
-  -
-  - This program is distributed in the hope that it will be useful,
-  - but WITHOUT ANY WARRANTY; without even the implied warranty of
-  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-  - GNU Affero General Public License for more details.
-  -
-  - You should have received a copy of the GNU Affero General Public License
-  - along with this program. If not, see <http://www.gnu.org/licenses/>.
-  -
-  -->
-
-<docs>
-## NcMultiselectTags
-
-![status](https://img.shields.io/badge/status-deprecated-red?style=for-the-badge)
-
-**Use [NcSelectTags](#/Components/NcSelect?id=ncselecttags) instead**
-
----
-
-### Single tag selector
-
-```vue
-<template>
-	<div class="wrapper">
-		<NcMultiselectTags v-model="value" :multiple="false" />
-		{{ value }}
-	</div>
-</template>
-
-<script>
-export default {
-	data() {
-		return {
-			value: 1
-		}
-	}
-}
-</script>
-```
-
-### Multiple tag selector
-```vue
-<template>
-	<div class="wrapper">
-		<NcMultiselectTags v-model="value" :multiple="true" />
-		{{ value }}
-	</div>
-</template>
-
-<script>
-export default {
-	data() {
-		return {
-			value: [1, 2]
-		}
-	}
-}
-</script>
-```
-
-### Custom filter
-Because of compatibility reasons only 5 tag entries are shown by default. If you want to show all available tags set the `filter` function-prop to `null`:
-```vue
-<template>
-	<div class="wrapper">
-		<NcMultiselectTags v-model="value" :filter="null" />
-		{{ value }}
-	</div>
-</template>
-
-<script>
-export default {
-	data() {
-		return {
-			value: [1, 2]
-		}
-	}
-}
-</script>
-```
-
-It's also possible to apply any custom filter logic by setting the `filter` function-prop to any custom function receiving the tag element and the index:
-```vue
-<template>
-	<div class="wrapper">
-		<NcMultiselectTags v-model="value" :filter="customFilter" />
-		{{ value }}
-	</div>
-</template>
-
-<script>
-export default {
-	data() {
-		return {
-			value: [3]
-		}
-	},
-	methods: {
-		/**
-		* Implement your custom filter logic to filter tags delivered
-		* by the server
-		*
-		* @param {object} the tag object
-		* @param {int} the index of the object inside the collection
-		*/
-		customFilter(element, index) {
-			/*
-			* Tag objects returned by the server will have the
-			* following properties (see also api.js):
-			* id, displayName, canAssign, userAssignable, userVisible
-			*/
-			return element.id >= 2 && element.displayName !== '' && element.canAssign && element.userAssignable && element.userVisible
-		}
-	}
-}
-</script>
-```
-</docs>
-
-<template>
-	<NcMultiselect :value="inputValue"
-		:options="availableOptions"
-		:placeholder="label"
-		track-by="id"
-		:custom-label="tagLabel"
-		:multiple="multiple"
-		:close-on-select="!multiple"
-		:tag-width="60"
-		:disabled="disabled"
-		@input="update">
-		<template #noResult>
-			<span>{{ t('No results') }}</span>
-		</template>
-		<template #option="scope">
-			{{ tagLabel(scope.option) }}
-		</template>
-	</NcMultiselect>
-</template>
-
-<script>
-import { searchTags } from './api.js'
-import NcMultiselect from '../NcMultiselect/index.js'
-import l10n from '../../mixins/l10n.js'
-import { t } from '../../l10n.js'
-
-if (!PRODUCTION) {
-	console.warn('NcMultiselectTags usage has been deprecated. Use NcSelectTags instead.')
-}
-
-export default {
-	name: 'NcMultiselectTags',
-	components: {
-		NcMultiselect,
-	},
-	mixins: [l10n],
-	props: {
-		label: {
-			type: String,
-			default: t('Select a tag'),
-		},
-		value: {
-			type: [Number, Array],
-			required: true,
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		multiple: {
-			type: Boolean,
-			default: true,
-		},
-		filter: {
-			type: Function,
-			default: (_element, index) => index < 5,
-		},
-	},
-	emits: ['input'],
-	data() {
-		return {
-			tags: [],
-		}
-	},
-	computed: {
-		inputValue() {
-			return this.getValueObject()
-		},
-		availableOptions() {
-			if (this.filter) {
-				return this.tags.filter(this.filter)
-			}
-			return this.tags
-		},
-	},
-	async beforeCreate() {
-		try {
-			const result = await searchTags()
-			this.tags = result
-		} catch (error) {
-			console.error('Loading systemtags failed', error)
-		}
-	},
-	methods: {
-		getValueObject() {
-			if (this.tags.length === 0) {
-				return []
-			}
-			if (this.multiple) {
-				return this.value
-					.filter(tag => tag !== '')
-					.map(id => this.tags.find(tag2 => tag2.id === id))
-			} else {
-				return this.tags.find(tag => tag.id === this.value)
-			}
-		},
-		update(value) {
-			if (this.multiple) {
-				/**
-				 * Emitted on input events of the multiselect field
-				 *
-				 * @type {number|number[]}
-				 */
-				this.$emit('input', value.map((element) => element.id))
-			} else {
-				if (value === null) {
-					this.$emit('input', null)
-				} else {
-					this.$emit('input', value.id)
-				}
-			}
-		},
-		/**
-		 * @param {object} tag destructuring object
-		 * @param {string} tag.displayName the tag display name
-		 * @param {boolean} tag.userVisible is the tag visible
-		 * @param {boolean} tag.userAssignable is the tag restricted
-		 * @return {string}
-		 */
-		tagLabel({ displayName, userVisible, userAssignable }) {
-			if (userVisible === false) {
-				return t('{tag} (invisible)', { tag: displayName })
-			}
-			if (userAssignable === false) {
-				return t('{tag} (restricted)', { tag: displayName })
-			}
-			return displayName
-		},
-	},
-}
-</script>
diff --git a/src/components/NcMultiselectTags/api.js b/src/components/NcMultiselectTags/api.js
deleted file mode 100644
index 9dadca0576..0000000000
--- a/src/components/NcMultiselectTags/api.js
+++ /dev/null
@@ -1,115 +0,0 @@
-/**
- * @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
- *
- * @author Julius Härtl <jus@bitgrid.net>
- *
- * @license AGPL-3.0-or-later
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
-
-import axios from '@nextcloud/axios'
-import { generateRemoteUrl } from '@nextcloud/router'
-
-const xmlToJson = (xml) => {
-	let obj = {}
-
-	if (xml.nodeType === 1) {
-		if (xml.attributes.length > 0) {
-			obj['@attributes'] = {}
-			for (let j = 0; j < xml.attributes.length; j++) {
-				const attribute = xml.attributes.item(j)
-				obj['@attributes'][attribute.nodeName] = attribute.nodeValue
-			}
-		}
-	} else if (xml.nodeType === 3) {
-		obj = xml.nodeValue
-	}
-
-	if (xml.hasChildNodes()) {
-		for (let i = 0; i < xml.childNodes.length; i++) {
-			const item = xml.childNodes.item(i)
-			const nodeName = item.nodeName
-			if (typeof (obj[nodeName]) === 'undefined') {
-				obj[nodeName] = xmlToJson(item)
-			} else {
-				if (typeof obj[nodeName].push === 'undefined') {
-					const old = obj[nodeName]
-					obj[nodeName] = []
-					obj[nodeName].push(old)
-				}
-				obj[nodeName].push(xmlToJson(item))
-			}
-		}
-	}
-	return obj
-}
-
-const parseXml = (xml) => {
-	let dom = null
-	try {
-		dom = (new DOMParser()).parseFromString(xml, 'text/xml')
-	} catch (e) {
-		console.error('Failed to parse xml document', e)
-	}
-	return dom
-}
-
-const xmlToTagList = (xml) => {
-	const json = xmlToJson(parseXml(xml))
-	const list = json['d:multistatus']['d:response']
-	const result = []
-	for (const index in list) {
-		const tag = list[index]['d:propstat']
-
-		if (tag['d:status']['#text'] !== 'HTTP/1.1 200 OK') {
-			continue
-		}
-		result.push({
-			id: parseInt(tag['d:prop']['oc:id']['#text']),
-			displayName: tag['d:prop']['oc:display-name']['#text'],
-			canAssign: tag['d:prop']['oc:can-assign']['#text'] === 'true',
-			userAssignable: tag['d:prop']['oc:user-assignable']['#text'] === 'true',
-			userVisible: tag['d:prop']['oc:user-visible']['#text'] === 'true',
-		})
-	}
-	return result
-}
-
-const searchTags = async function() {
-	if (window.NextcloudVueDocs) {
-		return Promise.resolve(xmlToTagList(window.NextcloudVueDocs.tags))
-	}
-
-	const result = await axios({
-		method: 'PROPFIND',
-		url: generateRemoteUrl('dav') + '/systemtags/',
-		data: `<?xml version="1.0"?>
-					<d:propfind  xmlns:d="DAV:" xmlns:oc="http://owncloud.org/ns">
-					  <d:prop>
-						<oc:id />
-						<oc:display-name />
-						<oc:user-visible />
-						<oc:user-assignable />
-						<oc:can-assign />
-					  </d:prop>
-					</d:propfind>`,
-	})
-	return xmlToTagList(result.data)
-}
-
-export {
-	searchTags,
-}
diff --git a/src/components/NcMultiselectTags/index.js b/src/components/NcMultiselectTags/index.js
deleted file mode 100644
index 45ee903e62..0000000000
--- a/src/components/NcMultiselectTags/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
- *
- * @author John Molakvoæ <skjnldsv@protonmail.com>
- *
- * @license AGPL-3.0-or-later
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-export { default } from './NcMultiselectTags.vue'
diff --git a/src/components/index.js b/src/components/index.js
index 82b08271b0..d40c433f15 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -74,8 +74,6 @@ export { default as NcListItem } from './NcListItem/index.js'
 export { default as NcListItemIcon } from './NcListItemIcon/index.js'
 export { default as NcLoadingIcon } from './NcLoadingIcon/index.js'
 export { default as NcModal } from './NcModal/index.js'
-export { default as NcMultiselect } from './NcMultiselect/index.js'
-export { default as NcMultiselectTags } from './NcMultiselectTags/index.js'
 export { default as NcNoteCard } from './NcNoteCard/index.js'
 export { default as NcPasswordField } from './NcPasswordField/index.js'
 export { default as NcPopover } from './NcPopover/index.js'
diff --git a/tests/unit/components/NcMultiselect/NcMultiselect.spec.js b/tests/unit/components/NcMultiselect/NcMultiselect.spec.js
deleted file mode 100644
index b535d176dd..0000000000
--- a/tests/unit/components/NcMultiselect/NcMultiselect.spec.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * @copyright Copyright (c) 2020 Raimund Schlüßler <raimund.schluessler@mailbox.org>
- *
- * @author Raimund Schlüßler <raimund.schluessler@mailbox.org>
- *
- * @license GNU AGPL version 3 or any later version
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
-
-import { mount } from '@vue/test-utils'
-import NcMultiselect from '../../../../src/components/NcMultiselect/NcMultiselect.vue'
-
-describe('NcMultiselect.vue', () => {
-	'use strict'
-
-	it('Test that the input function is only called once on select', () => {
-		const onInput = jest.fn()
-		const wrapper = mount(NcMultiselect, {
-			propsData: {
-				label: 'name',
-				multiple: false,
-				options: [
-					{ name: 'a', key: 'a'},
-					{ name: 'b', key: 'b'}
-				]
-			},
-			listeners: {
-				input: onInput
-			}
-		})
-		wrapper.trigger('click')
-		wrapper.find('li.multiselect__element .multiselect__option').trigger('click')
-		expect(onInput).toHaveBeenCalledTimes(1)
-	})
-})
diff --git a/tests/unit/components/NcMultiselectTags/NcMultiselectTags.spec.js b/tests/unit/components/NcMultiselectTags/NcMultiselectTags.spec.js
deleted file mode 100644
index da760d7b37..0000000000
--- a/tests/unit/components/NcMultiselectTags/NcMultiselectTags.spec.js
+++ /dev/null
@@ -1,130 +0,0 @@
-/**
- * @copyright Copyright (c) 2022 Robin Windey <ro.windey@gmail.com>
- *
- * @author Robin Windey <ro.windey@gmail.com>
- *
- * @license GNU AGPL version 3 or any later version
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
-
-import { mount } from '@vue/test-utils'
-import { searchTags } from '../../../../src/components/NcMultiselectTags/api.js'
-import NcMultiselectTags from '../../../../src/components/NcMultiselectTags/NcMultiselectTags.vue'
-
-jest.mock('../../../../src/components/NcMultiselectTags/api.js')
-
-afterEach(() => {
-	jest.clearAllMocks()
-})
-
-describe('NcMultiselectTags.vue', () => {
-	'use strict'
-
-	it('Test that by default only 5 tags are shown', async () => {
-		const numberOfTags = 42
-		const mockedTags = []
-		for (let i = 0; i < numberOfTags; i++) {
-			mockedTags.push({
-				id: i,
-				displayName: 'tag ' + i,
-				canAssign: true,
-				userAssignable: true,
-				userVisible: true,
-			})
-		}
-
-		searchTags.mockResolvedValueOnce(mockedTags)
-
-		const wrapper = mount(NcMultiselectTags, {
-			propsData: {
-				label: 'name',
-				value: [],
-			},
-		})
-
-		// Wait for data to be loaded
-		await new Promise(process.nextTick)
-
-		const options = wrapper.findAll('li.multiselect__element .multiselect__option')
-
-		expect(searchTags).toHaveBeenCalledTimes(1)
-		expect(options.length).toBe(5)
-	})
-
-	it('Test that all available tags are shown if filter is null', async () => {
-		const numberOfTags = 42
-		const mockedTags = []
-		for (let i = 0; i < numberOfTags; i++) {
-			mockedTags.push({
-				id: i,
-				displayName: 'tag ' + i,
-				canAssign: true,
-				userAssignable: true,
-				userVisible: true,
-			})
-		}
-
-		searchTags.mockResolvedValueOnce(mockedTags)
-
-		const wrapper = mount(NcMultiselectTags, {
-			propsData: {
-				label: 'name',
-				value: [],
-				filter: null,
-			},
-		})
-
-		// Wait for data to be loaded
-		await new Promise(process.nextTick)
-
-		const options = wrapper.findAll('li.multiselect__element .multiselect__option')
-
-		expect(searchTags).toHaveBeenCalledTimes(1)
-		expect(options.length).toBe(numberOfTags)
-	})
-
-	it('Test that filter is applied correctly', async () => {
-		const numberOfTags = 42
-		const mockedTags = []
-		for (let i = 0; i < numberOfTags; i++) {
-			mockedTags.push({
-				id: i,
-				displayName: 'tag ' + i,
-				canAssign: true,
-				userAssignable: true,
-				userVisible: true,
-			})
-		}
-
-		searchTags.mockResolvedValueOnce(mockedTags)
-
-		const wrapper = mount(NcMultiselectTags, {
-			propsData: {
-				label: 'name',
-				value: [],
-				filter: (element, index) => index >= 40 && element.id >= 40,
-			},
-		})
-
-		// Wait for data to be loaded
-		await new Promise(process.nextTick)
-
-		const options = wrapper.findAll('li.multiselect__element .multiselect__option')
-
-		expect(searchTags).toHaveBeenCalledTimes(1)
-		expect(options.length).toBe(2)
-	})
-})