mediacube-ui-v2 0.0.5 → 0.0.7

package/src/components/elements/McFieldSelect/McFieldSelect.vue

@@ -1,920 +0,0 @@
-<script setup lang="ts">
-import { computed, type PropType, ref, watch } from 'vue'
-import MultiSelect from 'vue-multiselect'
-import McTitle from '@/components/elements/McTitle/McTitle.vue'
-import McSvgIcon from '@/components/elements/McSvgIcon/McSvgIcon.vue'
-import McAvatar from '@/components/elements/McAvatar/McAvatar.vue'
-import McTooltip from '@/components/elements/McTooltip/McTooltip.vue'
-import McPreview from '@/components/patterns/McPreview/McPreview.vue'
-import type { ISelectGroupOptions, ISelectOption, ISelectOptions } from '@/types/ISelect'
-import { type DirectionsUnion } from '@/types/IDirections'
-import { Directions } from '@/enums/ui/Directions'
-import { Colors, type ColorTypes } from '@/types/styles/Colors'
-import { useFieldErrors } from '@/composables/useFieldErrors'
-import type { IconsListUnion } from '@/types/styles/Icons'
-import { SelectGroupKeys } from '@/enums/Select'
-import type { SelectListDirectionsUnion } from '@/types/ISelect'
-import { PreviewSizes, TitleVariations, TooltipPositions, Weights } from '@/enums'
-
-const emit = defineEmits(['original-input', 'tag', 'search-change', 'update:modelValue', 'handle-open', 'handle-close'])
-const props = defineProps({
-  /**
-   *  Значение
-   */
-  modelValue: {
-    type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>
-  },
-  /**
-   *  Заголовок поля:
-   *
-   */
-  title: {
-    type: String as PropType<string>,
-    default: null
-  },
-
-  /**
-   *  Вспомогательный текст под инпутом:
-   *
-   */
-  helpText: {
-    type: String as PropType<string>,
-    default: null
-  },
-  /**
-   *  Массив элементов
-   *  выпадающего списка
-   *  [
-   *      {
-   *          name: String,
-   *          value: String | Number,
-   *          text: String - доступен, если optionWithPreview=true
-   *          icon: String - доступен, если optionWithPreview=true
-   *      }
-   *  ]
-   */
-  options: {
-    type: Array as PropType<ISelectOptions | ISelectGroupOptions>,
-    default: () => [] as ISelectOptions
-  },
-  /**
-   *  Выполняется ли поиск из списка
-   *  при вводе в инпут
-   */
-  searchable: {
-    type: Boolean as PropType<boolean>,
-    default: true
-  },
-  /**
-   *  Множественный выбор
-   */
-  multiple: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  /**
-   *  Скрывать из списка
-   *  выбранные элементы
-   */
-  hideSelected: {
-    type: Boolean as PropType<boolean>,
-    default: true
-  },
-  /**
-   *  Допустимо ли
-   *  пустое значение
-   */
-  allowEmpty: {
-    type: Boolean as PropType<boolean>,
-    default: true
-  },
-  /**
-   *  Отключенное состояние
-   */
-  disabled: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  /**
-   *  Ссылка на аватар/картинку
-   *  в начале label
-   */
-  avatar: {
-    type: String as PropType<string>,
-    default: null
-  },
-  /**
-   *  Имя иконки
-   *  в начале label
-   */
-  icon: {
-    type: String as () => IconsListUnion,
-    default: null
-  },
-  /**
-   *  Цвет фона
-   */
-  backgroundColor: {
-    type: String as () => ColorTypes,
-    default: null
-  },
-  /**
-   *  placeholder
-   */
-  placeholder: {
-    type: String as PropType<string>,
-    default: ''
-  },
-  /**
-   * Направление открытия списка:
-   * `above (top), below (bottom), auto`
-   */
-  openDirection: {
-    type: String as () => SelectListDirectionsUnion,
-    default: 'auto'
-  },
-  /**
-   * Селект в режиме тэгирования, когда можно вводить свои значения и добавлять их в опции
-   * */
-  taggable: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  /**
-   *  Помечать в списке выбранные
-   *  элементы
-   */
-  showLabels: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  /**
-   * Поиск по опциям
-   * */
-  internalSearch: {
-    type: Boolean as PropType<boolean>,
-    default: true
-  },
-  /**
-   *  Ошибки
-   */
-  errors: {
-    type: Array as PropType<string[]>,
-    default: null
-  },
-  /**
-   *  Name
-   */
-  name: {
-    type: String as PropType<string>,
-    required: true
-  },
-  /**
-   *  Если нужен тултип
-   *  над элементами списка
-   */
-  optionsTooltip: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  /**
-   * При группировке опций, дает возвожность выбрать сразу группу
-   * */
-  groupSelect: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  required: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  /**
-   *  Если айтемам в селекте нужны превью с иконками и описанием
-   */
-  optionWithPreview: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  tabindex: {
-    type: [String, Number],
-    default: null
-  },
-  /**
-   * Если нужно ограничить максимальную высоту блока с выбранными элементами
-   */
-  maxHeight: {
-    type: String as PropType<string>,
-    default: null
-  },
-  /**
-   * Рендерить ли выпадающий список абсолютно, что бы помещался в ограниченном пространстве
-   * */
-  renderAbsoluteList: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  /**
-   * Для какого языка селект
-   */
-  locale: {
-    type: String as PropType<string>,
-    default: null
-  },
-  /**
-   * Текст для пустого селекта, когда неичего не найдено
-   */
-  noResultsText: {
-    type: String as PropType<string>,
-    default: 'No results'
-  },
-  /**
-   * Показывать ли состояние лоадинга
-   */
-  loading: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  dir: {
-    type: String as () => DirectionsUnion,
-    default: Directions.Ltr
-  },
-  /**
-   * На какое после смотреть что бы считать его заголовком строки
-   * */
-  titleField: {
-    type: String as PropType<string>,
-    default: 'name'
-  },
-  /**
-   * На какое после смотреть что бы считать его значением строки
-   * */
-  valueField: {
-    type: String as PropType<string>,
-    default: 'value'
-  }
-})
-
-const fieldErrors = useFieldErrors(props.errors)
-const searchValue = ref<string | null>(null)
-const field_select_ref = ref<InstanceType<typeof MultiSelect> | null>(null)
-const field_select_wrapper_ref = ref<InstanceType<typeof HTMLDivElement> | null>(null)
-const local_options = ref<ISelectOptions>([])
-
-const isGroupedOptions = computed((): boolean => {
-  return props.options.some(
-    (o) =>
-      Object.prototype.hasOwnProperty.call(o, SelectGroupKeys.Label) &&
-      Object.prototype.hasOwnProperty.call(o, SelectGroupKeys.Values) &&
-      //@ts-ignore
-      Array.isArray(o[SelectGroupKeys.Values])
-  )
-})
-const hasTitle = computed(() => {
-  return !!props.title
-})
-const hasPrepend = computed(() => {
-  return props.avatar || props.icon
-})
-const isValueMustBeArray = computed(() => {
-  return props.multiple
-})
-
-const tagBind = computed(() => {
-  return {
-    label: props.titleField,
-    trackBy: props.valueField,
-    loading: props.loading,
-    options: computedOptions.value,
-    searchable: props.searchable,
-    showLabels: props.showLabels,
-    multiple: props.multiple,
-    hideSelected: props.hideSelected,
-    allowEmpty: props.allowEmpty,
-    openDirection: props.openDirection,
-    id: props.name,
-    taggable: props.taggable,
-    tagPlaceholder: '',
-    placeholder: props.placeholder,
-    disabled: props.disabled,
-    internalSearch: props.internalSearch,
-    tabindex: +props.tabindex,
-    groupSelect: props.groupSelect && props.multiple,
-    ...(isGroupedOptions.value ? { groupLabel: SelectGroupKeys.Label } : {}),
-    ...(isGroupedOptions.value ? { groupValues: SelectGroupKeys.Values } : {})
-  }
-})
-
-const computedOptions = computed((): ISelectOptions => {
-  //@ts-ignore
-  return !isGroupedOptions.value
-    ? ([...props.options, ...local_options.value].filter(
-        //@ts-ignore
-        (v, i, a) => a.findIndex((afi: ISelectOption) => afi[props.valueField] === v[props.valueField]) === i
-      ) as ISelectOptions)
-    : props.options
-})
-const rtl = computed((): boolean => {
-  return props.dir === Directions.Rtl
-})
-const classes = computed((): { [key: string]: boolean } => {
-  return {
-    'mc-field-select': true,
-    'mc-field-select--error': !!fieldErrors.errorText.value,
-    'mc-field-select--disabled': props.disabled,
-    [`mc-field-select--bg-${props.backgroundColor}`]: !!props.backgroundColor,
-    'mc-field-select--is-empty-options-list': isEmptyOptionsList.value || props.loading,
-    'mc-field-select--with-preview': props.optionWithPreview,
-    'mc-field-select--max-height': !!props.maxHeight,
-    'mc-field-select--rtl': rtl.value
-  }
-})
-const computedTitle = computed(() => {
-  return `${props.title}${props.required ? ' *' : ''}`
-})
-const styles = computed((): { [key: string]: string } => {
-  const darkColors = ['gray', 'dark-gray', 'black']
-  const lightColors = ['white']
-  let placeHolderColor: ColorTypes = 'gray'
-  let borderColor: ColorTypes = props.backgroundColor
-  let backgroundColor: ColorTypes = props.backgroundColor
-  let labelColor: ColorTypes = 'black'
-  if (!props.backgroundColor || lightColors.includes(props.backgroundColor)) {
-    borderColor = 'purple'
-  }
-  if (darkColors.includes(props.backgroundColor)) {
-    labelColor = 'white'
-    placeHolderColor = 'white'
-    borderColor = 'black'
-  }
-  if (props.disabled && !props.backgroundColor) {
-    backgroundColor = 'hover-gray'
-  }
-  return {
-    '--mc-field-select-max-height': props.maxHeight,
-    '--mc-field-select-color': backgroundColor && Colors[backgroundColor],
-    '--mc-field-select-border-color': borderColor && Colors[borderColor],
-    '--mc-field-select-label-color': Colors[labelColor],
-    '--mc-field-select-placeholder-color': Colors[placeHolderColor]
-  }
-})
-
-const isEmptyOptionsList = computed((): boolean => {
-  if ((props.hideSelected && !searchValue.value) || !props.options.length) {
-    if (props.multiple) {
-      if (isGroupedOptions.value) return false
-      return Array.isArray(props.modelValue) && props.options.length === props.modelValue.length
-    } else {
-      return !!props.modelValue && computedOptions.value?.length === 1 && !searchValue.value
-    }
-  } else if (props.options.length === 0) return !props.options.length
-  return false
-})
-
-const computedModelValue = computed({
-  get() {
-    let preparedValue: any = isValueMustBeArray.value ? props.modelValue || [] : [props.modelValue].filter(Boolean)
-    preparedValue = preparedValue.map((pv: string): ISelectOption => {
-      //@ts-ignore
-      const options = isGroupedOptions.value
-        ? computedOptions.value.map((co) => co[SelectGroupKeys.Values]).flat()
-        : computedOptions.value
-      const item = options.find((co) => String(co[props.valueField]) === String(pv))
-      return {
-        [props.titleField]: item?.[props.titleField],
-        [props.valueField]: item?.[props.valueField],
-        text: item?.text,
-        icon: item?.icon
-      }
-    })
-
-    const [first] = preparedValue
-    return isValueMustBeArray.value ? preparedValue : first
-  },
-  set(value) {
-    let preparedValue = isValueMustBeArray.value ? (Array.isArray(value) ? value : []) : [value]
-    preparedValue = preparedValue.filter(Boolean).map((v) => v[props.valueField])
-
-    const [first] = preparedValue
-    emitOriginalInput(value)
-    emitInput(isValueMustBeArray.value ? preparedValue : first)
-  }
-})
-
-const actualizeSavedOptions = (): void => {
-  //Фильтруем локальные опции и оставляем только те, значения которых выбраны в селекте
-  local_options.value = local_options.value.filter((lo: ISelectOption) =>
-    props.modelValue?.constructor === Array
-      ? props.modelValue.map((v) => String(v)).includes(String(lo[props.valueField]))
-      : String(lo[props.valueField]) === String(props.modelValue)
-  )
-
-  //Делаем Юник, что бы опции не повторялись
-  local_options.value = local_options.value.filter(
-    (v, i, a) => a.findIndex((afi) => String(afi[props.valueField]) === String(v[props.valueField])) === i
-  )
-}
-
-const handleTag = (value: string): void => {
-  const preparedValue = { [props.titleField]: value, [props.valueField]: value }
-  local_options.value.push(preparedValue)
-
-  computedModelValue.value = isValueMustBeArray.value ? [...computedModelValue.value, preparedValue] : preparedValue
-  /**
-   * Событие по добавлению
-   * тега в опции (по Enter)
-   */
-  emit('tag', value)
-}
-
-const handleSearchChange = (value: string): void => {
-  searchValue.value = value
-  /**
-   * Событие по вводу данных в инпут
-   */
-  emit('search-change', value)
-}
-
-const emitInput = (value: number[] | string[] | number | string): void => {
-  fieldErrors.toggleErrorVisible()
-  /**
-   * Событие инпута (выбранное значение)
-   */
-  emit('update:modelValue', value)
-}
-const emitOriginalInput = (value: ISelectOptions[]): void => {
-  /**
-   * Истинное значение инпута
-   */
-  emit('original-input', value)
-}
-
-const handleOpen = (): void => {
-  emit('handle-open')
-}
-const handleClose = (): void => {
-  emit('handle-close')
-}
-
-watch(
-  () => props.options,
-  (val) => {
-    //Пушим все входящие опции в локальные опции
-    local_options.value.push(...val)
-    actualizeSavedOptions()
-  },
-  { immediate: true }
-)
-
-watch(
-  () => props.modelValue,
-  () => {
-    actualizeSavedOptions()
-  },
-  { immediate: true, deep: true }
-)
-</script>
-
-<template>
-  <div ref="field_select_wrapper_ref" :dir="dir" :class="classes" :style="styles">
-    <div class="mc-field-select__header">
-      <!-- @slot Слот заголовка -->
-      <slot name="header">
-        <mc-title v-if="hasTitle" max-width="100%" :weight="Weights.Medium">
-          {{ computedTitle }}
-        </mc-title>
-      </slot>
-    </div>
-    <div class="mc-field-select__main">
-      <multi-select
-        ref="field_select_ref"
-        v-model="computedModelValue"
-        v-bind="tagBind"
-        @tag="handleTag"
-        @search-change="handleSearchChange"
-        @open="handleOpen"
-        @close="handleClose"
-      >
-        <template #singleLabel="{ option }">
-          <mc-preview v-if="props.optionWithPreview" class="option__desc" :size="PreviewSizes.L">
-            <template v-if="!!option.icon" #left>
-              <mc-svg-icon :name="option.icon" size="400" />
-            </template>
-            <template #top>
-              <mc-title :weight="Weights.SemiBold" :html-data="option[props.titleField]" />
-            </template>
-            <!-- Слот для замены стандартной стрелки при выведенном превью -->
-            <template #right>
-              <!-- @slot -->
-              <slot name="arrow" />
-            </template>
-            <template v-if="!!option.text" #bottom>
-              <mc-title color="gray">{{ option.text }}</mc-title>
-            </template>
-          </mc-preview>
-          <div v-else class="mc-field-select__single-label">
-            <div v-if="hasPrepend" class="mc-field-select__prepend">
-              <mc-avatar v-if="avatar" :src="avatar" />
-              <mc-svg-icon v-else :name="props.icon" />
-            </div>
-            <div
-              class="mc-field-select__label-text"
-              :class="hasPrepend ? 'mc-field-select__label-text--indent-left' : ''"
-            >
-              {{ option ? option[props.titleField] : placeholder }}
-            </div>
-          </div>
-        </template>
-
-        <template v-if="optionsTooltip || props.optionWithPreview" #option="{ option }">
-          <mc-preview v-if="props.optionWithPreview" class="option__desc" :size="PreviewSizes.L">
-            <template v-if="!!option.icon" #left>
-              <mc-svg-icon :name="option.icon" size="400" />
-            </template>
-            <template #top>
-              <mc-title :weight="Weights.SemiBold" :html-data="option[props.titleField]" />
-            </template>
-            <template v-if="!!option.text" #bottom>
-              <mc-title color="gray">{{ option.text }}</mc-title>
-            </template>
-          </mc-preview>
-          <mc-tooltip
-            v-else
-            class="mc-field-select__options-tooltip-target"
-            max-width="m"
-            color="black"
-            :placement="TooltipPositions.Top"
-            :content="option[props.titleField]"
-          >
-            <span>{{ option[props.titleField] }}</span>
-          </mc-tooltip>
-        </template>
-        <template #noResult>
-          <!-- @slot Слот для текста, если ничего не найдено -->
-          <slot name="noResult">
-            <span>{{ props.noResultsText }}</span>
-          </slot>
-        </template>
-      </multi-select>
-    </div>
-    <div v-if="fieldErrors.errorText.value || props.helpText || $slots.footer" class="mc-field-select__footer">
-      <mc-title
-        v-if="fieldErrors.errorText.value"
-        tag-name="div"
-        color="red"
-        :variation="TitleVariations.Overline"
-        max-width="100%"
-      >
-        {{ fieldErrors.errorText.value }}
-      </mc-title>
-      <br v-if="fieldErrors.errorText.value" />
-      <!-- @slot Слот доп. текста под инпутом -->
-      <slot name="footer">
-        <mc-title
-          v-if="props.helpText"
-          tag-name="div"
-          :variation="TitleVariations.Overline"
-          color="gray"
-          max-width="100%"
-        >
-          {{ props.helpText }}
-        </mc-title>
-      </slot>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-@use 'vue-multiselect/dist/vue-multiselect.css' as *;
-@use '../../../assets/styles/mixins' as *;
-@use '../../../assets/tokens/durations' as *;
-@use '../../../assets/tokens/font-families' as *;
-@use '../../../assets/tokens/box-shadows' as *;
-@use '../../../assets/tokens/colors' as *;
-@use '../../../assets/tokens/spacings' as *;
-@use '../../../assets/tokens/line-heights' as *;
-@use '../../../assets/tokens/font-sizes' as *;
-@use '../../../assets/tokens/sizes' as *;
-@use '../../../assets/tokens/font-weights' as *;
-@use '../../../assets/tokens/border-radius' as *;
-.mc-field-select {
-  $block-name: &;
-  --mc-field-select-color: initial;
-  --mc-field-select-label-color: #{$color-black};
-  --mc-field-select-border-color: initial;
-  --mc-field-select-max-height: initial;
-  --mc-field-select-placeholder-color: #{$color-gray};
-  font-family: $font-family-main;
-  @include custom-scroll($space-100);
-  &__header {
-    @include reset-text-indents();
-    display: block;
-    margin-bottom: $space-100;
-
-    &:empty {
-      display: none;
-    }
-  }
-  &__footer {
-    margin-top: $space-50;
-    line-height: $line-height-150;
-    &:empty {
-      display: none;
-    }
-  }
-  &__single-label {
-    @include reset-text-indents();
-    position: relative;
-    display: flex;
-    flex-wrap: nowrap;
-    align-items: center;
-    @include child-indent-right($space-50);
-  }
-  &__prepend {
-    position: absolute;
-  }
-  &__label-text {
-    @include ellipsis();
-    font-size: $font-size-200;
-    line-height: $line-height-200;
-    padding-inline-start: $space-50;
-    color: var(--mc-field-select-label-color);
-    &--indent-left {
-      margin-inline-start: $space-300;
-    }
-  }
-  .multiselect {
-    &__placeholder {
-      @include ellipsis();
-      color: var(--mc-field-select-placeholder-color);
-      font-size: $font-size-200;
-      line-height: $line-height-200;
-      margin-bottom: $space-150 - 1px;
-      padding-top: $space-150 - 1px;
-      padding-inline-start: $space-50;
-      width: 100%;
-    }
-    &__single {
-      font-size: $font-size-200;
-      line-height: $line-height-200;
-      padding-inline-start: $space-50;
-      margin-bottom: $space-150 - 1px;
-      margin-top: $space-150 - 1px;
-      background-color: transparent;
-      min-height: auto;
-      @include input-placeholder() {
-        color: $color-gray;
-      }
-    }
-    &__input {
-      padding-inline-start: $space-50;
-      margin-bottom: $space-150 - 2px;
-      padding-top: $space-150 - 1px;
-      font-size: $font-size-200;
-      line-height: $line-height-200;
-      min-height: auto;
-      background-color: $color-transparent;
-      @include input-placeholder() {
-        color: $color-gray;
-      }
-    }
-    &__select {
-      overflow: hidden;
-      height: $space-350;
-      width: $space-300;
-      inset-inline-end: $space-100;
-      top: 6px;
-      padding: 0;
-      z-index: 1;
-      &::before {
-        direction: ltr;
-        width: 0;
-        height: 0;
-        border-left: 5px solid transparent;
-        border-right: 5px solid transparent;
-        border-bottom: 5px solid transparent;
-        border-top: 5px solid var(--mc-field-select-label-color);
-      }
-    }
-    &__tags {
-      @include reset-text-indents();
-      position: relative;
-      border: 1px solid $color-outline-gray;
-      border-radius: $radius-100 !important;
-      padding: 0;
-      padding-inline: $space-100 $space-500;
-      overflow: hidden;
-      text-align: start;
-      &:hover {
-        border-color: $color-purple;
-      }
-      &:before {
-        content: '';
-        position: absolute;
-        left: 0;
-        top: 0;
-        @include size(100%);
-        background-color: var(--mc-field-select-color);
-        opacity: 0.6;
-      }
-    }
-    &__tags-wrap {
-      position: relative;
-      padding-top: 4px;
-      padding-bottom: 3px;
-      top: 0;
-      display: flex;
-      flex-wrap: wrap;
-      margin-top: -1px;
-      min-height: $size-500 - 2px;
-      @include child-indent-right($space-100);
-    }
-    &__tag {
-      display: inline-flex;
-      align-items: center;
-      height: $size-300;
-      font-family: $font-family-main;
-      margin-top: $space-50;
-      margin-bottom: $space-50;
-      margin-right: unset;
-      background-color: $color-lighter-purple;
-      color: $color-black;
-      padding: $size-50 $size-50 $size-50 $size-100;
-      border-radius: 100px;
-      font-size: $font-size-200;
-      line-height: $line-height-200;
-      span {
-        @include ellipsis();
-        flex: 1 1 auto;
-        //overflow: visible;
-      }
-    }
-    &__tag-icon {
-      @include size($size-200);
-      position: relative;
-      background-color: $color-purple;
-      border-radius: $radius-circle;
-      flex: 0 0 auto;
-      margin-inline-start: $space-100;
-      &:hover {
-        background-color: $color-red;
-      }
-      &::after {
-        @include align(true, true, absolute);
-        top: 45%;
-        color: $color-white;
-      }
-    }
-    &__content {
-      padding: $size-100;
-      max-width: 100%;
-      font-size: $font-size-200;
-      line-height: $line-height-200;
-    }
-    &__content-wrapper {
-      top: calc(100% + #{$size-100});
-      border: none;
-      border-radius: $radius-150;
-      box-shadow: $shadow-s;
-      transition: opacity $duration-s ease;
-      overflow-y: auto;
-      overflow-x: hidden;
-      max-height: 300px;
-    }
-    &--above {
-      .multiselect__content-wrapper {
-        bottom: calc(100% + #{$size-100});
-        top: auto;
-      }
-    }
-    &__option {
-      min-height: $size-500;
-      display: flex;
-      align-items: center;
-      border-radius: $radius-100;
-      padding: $space-150;
-      span {
-        @include ellipsis();
-      }
-      &--highlight {
-        background-color: $color-hover-gray;
-        color: $color-black;
-      }
-      &--selected {
-        background-color: $color-lighter-purple !important;
-        color: $color-black !important;
-        font-weight: $font-weight-medium;
-      }
-      &--group.multiselect__option--disabled {
-        background-color: $color-white !important;
-      }
-    }
-
-    &--active {
-      .multiselect {
-        &__tags {
-          border-color: var(--mc-field-select-border-color);
-          &:before {
-            background-color: $color-transparent;
-          }
-        }
-        &__select {
-          &::before {
-            border-color: $color-purple $color-transparent $color-transparent;
-          }
-        }
-      }
-    }
-    &__spinner {
-      &:after,
-      &:before {
-        border-top-color: $color-purple;
-        @include size($space-300);
-        top: calc(50% - 8px);
-        left: calc(50% - 3px);
-      }
-    }
-  }
-
-  &--error {
-    .multiselect {
-      &__tags {
-        border-color: $color-red !important;
-      }
-    }
-  }
-
-  &--is-empty-options-list {
-    .multiselect {
-      &__content-wrapper {
-        display: none !important;
-      }
-    }
-  }
-
-  &--disabled {
-    cursor: not-allowed;
-    .multiselect--disabled {
-      opacity: 1;
-      background: transparent;
-      .multiselect {
-        &__placeholder {
-          color: $color-gray;
-        }
-        &__single {
-          & #{$block-name}__label-text {
-            color: $color-gray;
-          }
-        }
-        &__select {
-          background-color: transparent;
-          &::before {
-            border-color: $color-outline-gray transparent transparent;
-          }
-        }
-      }
-    }
-  }
-
-  &--with-preview {
-    .mc-preview {
-      align-items: center;
-    }
-    .multiselect {
-      &__select {
-        display: none;
-      }
-      &__tags {
-        padding: 0;
-        padding-inline: $space-100;
-        cursor: pointer;
-        border-color: $color-outline-light;
-      }
-    }
-  }
-
-  &--max-height {
-    .multiselect {
-      &__tags {
-        max-height: var(--mc-field-select-max-height);
-        overflow-y: auto;
-        position: initial;
-      }
-      &__spinner {
-        background: transparent;
-        right: calc(#{$space-50} / 2);
-        top: calc(#{$space-50} / 2);
-      }
-    }
-  }
-
-  &__options-tooltip-target {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &--rtl {
-    direction: rtl;
-  }
-}
-</style>