From 4e8d2f3cf3b70ca28720f8f3b2ca9ab4f0b8dae8 Mon Sep 17 00:00:00 2001
From: Stepan <kvantoreps@gmail.com>
Date: Thu, 29 Dec 2022 17:04:54 +0300
Subject: [PATCH 1/8] WDS-125 add loading state to select

---
 .changeset/light-toes-remember.md             |  5 ++
 packages/ui/etc/api/ui.api.md                 | 19 +++++
 .../ui/src/components/Select/SDropdown.vue    |  1 +
 packages/ui/src/components/Select/SSelect.vue |  1 +
 .../ui/src/components/Select/SSelectBase.vue  | 14 +++-
 .../src/components/Select/SSelectButton.vue   |  2 +-
 .../src/components/Select/SSelectDropdown.vue | 84 +++++++++++--------
 .../ui/src/components/Select/SSelectInput.vue |  2 +-
 packages/ui/src/components/Select/api.ts      |  1 +
 9 files changed, 92 insertions(+), 37 deletions(-)
 create mode 100644 .changeset/light-toes-remember.md

diff --git a/.changeset/light-toes-remember.md b/.changeset/light-toes-remember.md
new file mode 100644
index 00000000..48626641
--- /dev/null
+++ b/.changeset/light-toes-remember.md
@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': patch
+---
+
+**fix**(`SSelect`): add loading state
diff --git a/packages/ui/etc/api/ui.api.md b/packages/ui/etc/api/ui.api.md
index b4a2cae6..598cc211 100644
--- a/packages/ui/etc/api/ui.api.md
+++ b/packages/ui/etc/api/ui.api.md
@@ -471,6 +471,7 @@ label?: string | undefined;
 size?: SelectSize | undefined;
 inline?: boolean | undefined;
 noAutoClose?: boolean | undefined;
+loading?: boolean | undefined;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_10<{
 modelValue?: any;
 options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
@@ -480,6 +481,7 @@ label?: string | undefined;
 size?: SelectSize | undefined;
 inline?: boolean | undefined;
 noAutoClose?: boolean | undefined;
+loading?: boolean | undefined;
 }>>>, {}>;
 
 // @public (undocumented)
@@ -495,6 +497,8 @@ export interface SelectApi<T> extends UnwrapRef<UseSelectModelReturn<T>> {
     readonly isMenuOpened: boolean;
     // (undocumented)
     readonly label: string | null;
+    // (undocumented)
+    readonly loading: boolean;
     menuToggle: (value?: boolean) => void;
     // (undocumented)
     readonly multiple: boolean;
@@ -992,6 +996,7 @@ multiple?: boolean | undefined;
 label?: string | undefined;
 size?: SelectSize | undefined;
 noAutoClose?: boolean | undefined;
+loading?: boolean | undefined;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_9<{
 modelValue?: any;
 options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
@@ -1000,6 +1005,7 @@ multiple?: boolean | undefined;
 label?: string | undefined;
 size?: SelectSize | undefined;
 noAutoClose?: boolean | undefined;
+loading?: boolean | undefined;
 }>>>, {}>;
 
 // Warning: (ae-forgotten-export) The symbol "__VLS_WithDefaults" needs to be exported by the entry point lib.d.ts
@@ -1011,21 +1017,26 @@ disabled?: boolean | undefined;
 multiple?: boolean | undefined;
 modelValue?: any;
 options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
+optionsType?: SelectOptionType | undefined;
 size?: SelectSize | undefined;
 label?: string | null | undefined;
 mandatory?: boolean | undefined;
 syncMenuAndInputWidths?: boolean | undefined;
 noAutoClose?: boolean | undefined;
+loading?: boolean | undefined;
 sameWidthPopper?: boolean | undefined;
 }>, {
 size: "md";
 options: () => never[];
+optionsType: "check";
 modelValue: null;
 multiple: boolean;
 disabled: boolean;
 syncMenuAndInputWidths: boolean;
 noAutoClose: boolean;
 label: null;
+loading: boolean;
+sameWidthPopper: boolean;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:modelValue": (value: any) => void;
 }, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_9<__VLS_TypePropsToRuntimeProps_11<{
@@ -1033,21 +1044,26 @@ disabled?: boolean | undefined;
 multiple?: boolean | undefined;
 modelValue?: any;
 options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
+optionsType?: SelectOptionType | undefined;
 size?: SelectSize | undefined;
 label?: string | null | undefined;
 mandatory?: boolean | undefined;
 syncMenuAndInputWidths?: boolean | undefined;
 noAutoClose?: boolean | undefined;
+loading?: boolean | undefined;
 sameWidthPopper?: boolean | undefined;
 }>, {
 size: "md";
 options: () => never[];
+optionsType: "check";
 modelValue: null;
 multiple: boolean;
 disabled: boolean;
 syncMenuAndInputWidths: boolean;
 noAutoClose: boolean;
 label: null;
+loading: boolean;
+sameWidthPopper: boolean;
 }>>> & {
 "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 }, {
@@ -1055,10 +1071,13 @@ modelValue: any;
 multiple: boolean;
 size: SelectSize;
 disabled: boolean;
+loading: boolean;
 options: SelectOption[] | SelectOptionGroup[];
 label: string | null;
 noAutoClose: boolean;
+optionsType: SelectOptionType;
 syncMenuAndInputWidths: boolean;
+sameWidthPopper: boolean;
 }>;
 
 // Warning: (ae-forgotten-export) The symbol "__VLS_WithDefaults" needs to be exported by the entry point lib.d.ts
diff --git a/packages/ui/src/components/Select/SDropdown.vue b/packages/ui/src/components/Select/SDropdown.vue
index 07915bfe..f351acbb 100644
--- a/packages/ui/src/components/Select/SDropdown.vue
+++ b/packages/ui/src/components/Select/SDropdown.vue
@@ -13,6 +13,7 @@ const props = defineProps<{
   size?: SelectSize
   inline?: boolean
   noAutoClose?: boolean
+  loading?: boolean
 }>()
 
 const buttonType = computed(() => (props.inline ? SelectButtonType.Inline : SelectButtonType.Default))
diff --git a/packages/ui/src/components/Select/SSelect.vue b/packages/ui/src/components/Select/SSelect.vue
index 806f3c4e..387c24ff 100644
--- a/packages/ui/src/components/Select/SSelect.vue
+++ b/packages/ui/src/components/Select/SSelect.vue
@@ -12,6 +12,7 @@ defineProps<{
   label?: string
   size?: SelectSize
   noAutoClose?: boolean
+  loading?: boolean
 }>()
 </script>
 
diff --git a/packages/ui/src/components/Select/SSelectBase.vue b/packages/ui/src/components/Select/SSelectBase.vue
index 5457b6d8..1a924c40 100644
--- a/packages/ui/src/components/Select/SSelectBase.vue
+++ b/packages/ui/src/components/Select/SSelectBase.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SelectSize, SelectOption, SelectOptionGroup } from './types'
+import { SelectSize, SelectOption, SelectOptionGroup, SelectOptionType } from './types'
 import { useSelectModel } from './use-model'
 import { SelectApi, SELECT_API_KEY } from './api'
 import { and, not } from '@vueuse/core'
@@ -12,6 +12,7 @@ const props = withDefaults(
 
     modelValue?: any
     options?: SelectOption[] | SelectOptionGroup[]
+    optionsType?: SelectOptionType
 
     size?: SelectSize
 
@@ -42,6 +43,11 @@ const props = withDefaults(
      */
     noAutoClose?: boolean
 
+    /**
+     * Enables loading state.
+     */
+    loading?: boolean
+
     /**
      * Makes popper same width as trigger.
      */
@@ -50,19 +56,22 @@ const props = withDefaults(
   {
     size: SelectSize.Md,
     options: () => [],
+    optionsType: SelectOptionType.Check,
     modelValue: null,
     multiple: false,
     disabled: false,
     syncMenuAndInputWidths: false,
     noAutoClose: false,
     label: null,
+    loading: false,
+    sameWidthPopper: false,
   },
 )
 
 const emit = defineEmits<(event: 'update:modelValue', value: any) => void>()
 
 const model = useVModel(props, 'modelValue', emit)
-const { multiple, disabled, options, size, label, noAutoClose } = toRefs(props)
+const { multiple, disabled, loading, options, size, label, noAutoClose } = toRefs(props)
 
 const modeling = useSelectModel({
   model,
@@ -82,6 +91,7 @@ const api: SelectApi<any> = reactive({
   multiple,
   options,
   disabled,
+  loading,
   label,
   isMenuOpened: showPopper,
   menuToggle: togglePopper,
diff --git a/packages/ui/src/components/Select/SSelectButton.vue b/packages/ui/src/components/Select/SSelectButton.vue
index 35754b82..9da1067c 100644
--- a/packages/ui/src/components/Select/SSelectButton.vue
+++ b/packages/ui/src/components/Select/SSelectButton.vue
@@ -52,7 +52,7 @@ const slots = useSlots()
       typography(),
       {
         's-select-btn_empty': !api.isSomethingSelected,
-        's-select-btn_disabled': api.disabled,
+        's-select-btn_disabled': api.disabled || api.loading,
       },
     ]"
     @click="toggle"
diff --git a/packages/ui/src/components/Select/SSelectDropdown.vue b/packages/ui/src/components/Select/SSelectDropdown.vue
index 26f62053..81245ece 100644
--- a/packages/ui/src/components/Select/SSelectDropdown.vue
+++ b/packages/ui/src/components/Select/SSelectDropdown.vue
@@ -4,6 +4,7 @@ import { SelectOptionGroup, SelectOptionType, SelectSize } from './types'
 import SSelectOption from './SSelectOption.vue'
 import { ComputedRef } from 'vue'
 import { isSelectOptions } from '@/components/Select/utils'
+import SSpinner from '@/components/Spinner/SSpinner.vue'
 
 defineProps<{
   itemType: SelectOptionType
@@ -47,40 +48,49 @@ const ACTION_FONT = {
     class="s-select-dropdown"
     :class="`s-select-dropdown_size_${api.size}`"
   >
-    <template
-      v-for="(optionGroup, i) in optionGroups"
-      :key="i"
+    <div
+      v-if="api.loading"
+      class="s-select-dropdown__loading flex items-center justify-center"
     >
-      <div
-        v-if="isActionButtonShown(!!optionGroup.selectAllBtn) || optionGroup.header"
-        class="s-select-dropdown__header flex items-center justify-between"
+      <SSpinner />
+    </div>
+
+    <template v-else>
+      <template
+        v-for="(optionGroup, i) in optionGroups"
+        :key="i"
       >
         <div
-          v-if="optionGroup.header"
-          :class="HEADER_FONT[api.size]"
+          v-if="isActionButtonShown(!!optionGroup.selectAllBtn) || optionGroup.header"
+          class="s-select-dropdown__header flex items-center justify-between"
         >
-          {{ optionGroup.header }}
+          <div
+            v-if="optionGroup.header"
+            :class="HEADER_FONT[api.size]"
+          >
+            {{ optionGroup.header }}
+          </div>
+          <button
+            v-if="isActionButtonShown(!!optionGroup.selectAllBtn)"
+            class="s-select-dropdown__action cursor-pointer"
+            :class="ACTION_FONT[api.size]"
+            @click="api.toggleGroupSelection(optionGroup)"
+          >
+            {{ api.isGroupSelected(optionGroup) ? 'Deselect all' : 'Select all' }}
+          </button>
         </div>
-        <button
-          v-if="isActionButtonShown(!!optionGroup.selectAllBtn)"
-          class="s-select-dropdown__action cursor-pointer"
-          :class="ACTION_FONT[api.size]"
-          @click="api.toggleGroupSelection(optionGroup)"
+        <SSelectOption
+          v-for="(opt, j) in optionGroup.items"
+          :key="j"
+          :class="fontClass"
+          :type="itemType"
+          :multiple="api.multiple"
+          :selected="api.isValueSelected(opt.value)"
+          @toggle="api.toggleSelection(opt.value)"
         >
-          {{ api.isGroupSelected(optionGroup) ? 'Deselect all' : 'Select all' }}
-        </button>
-      </div>
-      <SSelectOption
-        v-for="(opt, j) in optionGroup.items"
-        :key="j"
-        :class="fontClass"
-        :type="itemType"
-        :multiple="api.multiple"
-        :selected="api.isValueSelected(opt.value)"
-        @toggle="api.toggleSelection(opt.value)"
-      >
-        {{ opt.label }}
-      </SSelectOption>
+          {{ opt.label }}
+        </SSelectOption>
+      </template>
     </template>
   </div>
 </template>
@@ -102,17 +112,25 @@ const ACTION_FONT = {
     color: theme.token-as-var('sys.color.status.info');
   }
 
-  @mixin select-dropdown-size($name, $header-height, $px) {
+  @mixin select-dropdown-size($name, $header-height, $px, $loading-height, $spinner-size) {
     &_size_#{$name} &__header {
       height: $header-height;
       padding-right: $px;
       padding-left: $px;
     }
+
+    &_size_#{$name} &__loading {
+      height: $loading-height;
+
+      // spinner styles
+      font-size: $spinner-size;
+      color: theme.token-as-var('sys.color.content-tertiary');
+    }
   }
 
-  @include select-dropdown-size('xl', $header-height: 56px, $px: 16px);
-  @include select-dropdown-size('lg', $header-height: 40px, $px: 16px);
-  @include select-dropdown-size('md', $header-height: 32px, $px: 10px);
-  @include select-dropdown-size('sm', $header-height: 24px, $px: 8px);
+  @include select-dropdown-size('xl', $header-height: 56px, $px: 16px, $loading-height: 170px, $spinner-size: 40px);
+  @include select-dropdown-size('lg', $header-height: 40px, $px: 16px, $loading-height: 150px, $spinner-size: 40px);
+  @include select-dropdown-size('md', $header-height: 32px, $px: 10px, $loading-height: 120px, $spinner-size: 24px);
+  @include select-dropdown-size('sm', $header-height: 24px, $px: 8px, $loading-height: 100px, $spinner-size: 24px);
 }
 </style>
diff --git a/packages/ui/src/components/Select/SSelectInput.vue b/packages/ui/src/components/Select/SSelectInput.vue
index 02c8aa30..7c2443ee 100644
--- a/packages/ui/src/components/Select/SSelectInput.vue
+++ b/packages/ui/src/components/Select/SSelectInput.vue
@@ -54,7 +54,7 @@ const FSelection = () =>
       `s-select-input_size_${api.size}`,
       {
         's-select-input_empty': !api.isSomethingSelected,
-        's-select-input_disabled': api.disabled,
+        's-select-input_disabled': api.disabled || api.loading,
       },
     ]"
     @click="api.menuToggle()"
diff --git a/packages/ui/src/components/Select/api.ts b/packages/ui/src/components/Select/api.ts
index 3f2ef722..fd3e46bb 100644
--- a/packages/ui/src/components/Select/api.ts
+++ b/packages/ui/src/components/Select/api.ts
@@ -7,6 +7,7 @@ export interface SelectApi<T> extends UnwrapRef<UseSelectModelReturn<T>> {
   readonly options: UnwrapRef<SelectOption<T>[] | SelectOptionGroup<T>[]>
   readonly multiple: boolean
   readonly disabled: boolean
+  readonly loading: boolean
   readonly label: string | null
   readonly size: SelectSize
   readonly noAutoClose: boolean

From cedf03ece666b544efde7ef6cf7d45cce225363c Mon Sep 17 00:00:00 2001
From: Stepan <kvantoreps@gmail.com>
Date: Fri, 30 Dec 2022 13:52:09 +0300
Subject: [PATCH 2/8] WDS-125 add prop to select options type

---
 .changeset/silver-countries-help.md           |  5 +++
 packages/ui/etc/api/ui.api.md                 | 16 ++++----
 .../ui/src/components/Select/SDropdown.vue    |  3 +-
 packages/ui/src/components/Select/SSelect.vue |  7 +++-
 .../ui/src/components/Select/SSelectBase.vue  |  4 +-
 .../src/components/Select/SSelectOption.vue   | 38 ++++++++++---------
 packages/ui/src/components/Select/types.ts    |  5 ++-
 7 files changed, 44 insertions(+), 34 deletions(-)
 create mode 100644 .changeset/silver-countries-help.md

diff --git a/.changeset/silver-countries-help.md b/.changeset/silver-countries-help.md
new file mode 100644
index 00000000..8784ec5d
--- /dev/null
+++ b/.changeset/silver-countries-help.md
@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': patch
+---
+
+**fix**(`SSelect`): add prop to select options type
diff --git a/packages/ui/etc/api/ui.api.md b/packages/ui/etc/api/ui.api.md
index 598cc211..45e7c3bd 100644
--- a/packages/ui/etc/api/ui.api.md
+++ b/packages/ui/etc/api/ui.api.md
@@ -465,6 +465,7 @@ time: boolean;
 export const SDropdown: DefineComponent<__VLS_TypePropsToRuntimeProps_10<{
 modelValue?: any;
 options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
+optionType?: SelectOptionType | undefined;
 disabled?: boolean | undefined;
 multiple?: boolean | undefined;
 label?: string | undefined;
@@ -475,6 +476,7 @@ loading?: boolean | undefined;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_10<{
 modelValue?: any;
 options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
+optionType?: SelectOptionType | undefined;
 disabled?: boolean | undefined;
 multiple?: boolean | undefined;
 label?: string | undefined;
@@ -539,8 +541,9 @@ export interface SelectOptionGroup<T = any> {
 
 // @public (undocumented)
 export const SelectOptionType: {
-    readonly RadioOrCheckbox: "rad-or-check";
-    readonly Check: "check";
+    readonly Radio: "radio";
+    readonly Checkbox: "checkbox";
+    readonly Default: "default";
 };
 
 // @public (undocumented)
@@ -991,6 +994,7 @@ radioSelector: string;
 export const SSelect: DefineComponent<__VLS_TypePropsToRuntimeProps_9<{
 modelValue?: any;
 options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
+optionType?: SelectOptionType | undefined;
 disabled?: boolean | undefined;
 multiple?: boolean | undefined;
 label?: string | undefined;
@@ -1000,6 +1004,7 @@ loading?: boolean | undefined;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_9<{
 modelValue?: any;
 options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
+optionType?: SelectOptionType | undefined;
 disabled?: boolean | undefined;
 multiple?: boolean | undefined;
 label?: string | undefined;
@@ -1017,7 +1022,6 @@ disabled?: boolean | undefined;
 multiple?: boolean | undefined;
 modelValue?: any;
 options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
-optionsType?: SelectOptionType | undefined;
 size?: SelectSize | undefined;
 label?: string | null | undefined;
 mandatory?: boolean | undefined;
@@ -1028,7 +1032,6 @@ sameWidthPopper?: boolean | undefined;
 }>, {
 size: "md";
 options: () => never[];
-optionsType: "check";
 modelValue: null;
 multiple: boolean;
 disabled: boolean;
@@ -1044,7 +1047,6 @@ disabled?: boolean | undefined;
 multiple?: boolean | undefined;
 modelValue?: any;
 options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
-optionsType?: SelectOptionType | undefined;
 size?: SelectSize | undefined;
 label?: string | null | undefined;
 mandatory?: boolean | undefined;
@@ -1055,7 +1057,6 @@ sameWidthPopper?: boolean | undefined;
 }>, {
 size: "md";
 options: () => never[];
-optionsType: "check";
 modelValue: null;
 multiple: boolean;
 disabled: boolean;
@@ -1075,7 +1076,6 @@ loading: boolean;
 options: SelectOption[] | SelectOptionGroup[];
 label: string | null;
 noAutoClose: boolean;
-optionsType: SelectOptionType;
 syncMenuAndInputWidths: boolean;
 sameWidthPopper: boolean;
 }>;
@@ -1109,13 +1109,11 @@ export const SSelectInput: DefineComponent<    {}, {}, {}, {}, {}, ComponentOpti
 // @public (undocumented)
 export const SSelectOption: DefineComponent<__VLS_TypePropsToRuntimeProps_13<{
 type: SelectOptionType;
-multiple?: boolean | undefined;
 selected?: boolean | undefined;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 toggle: () => void;
 }, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_13<{
 type: SelectOptionType;
-multiple?: boolean | undefined;
 selected?: boolean | undefined;
 }>>> & {
 onToggle?: (() => any) | undefined;
diff --git a/packages/ui/src/components/Select/SDropdown.vue b/packages/ui/src/components/Select/SDropdown.vue
index f351acbb..6bd5caea 100644
--- a/packages/ui/src/components/Select/SDropdown.vue
+++ b/packages/ui/src/components/Select/SDropdown.vue
@@ -7,6 +7,7 @@ import SSelectDropdown from './SSelectDropdown.vue'
 const props = defineProps<{
   modelValue?: any
   options?: SelectOption[] | SelectOptionGroup[]
+  optionType?: SelectOptionType
   disabled?: boolean
   multiple?: boolean
   label?: string
@@ -44,7 +45,7 @@ function isThereLabelSlot() {
     </template>
 
     <template #dropdown>
-      <SSelectDropdown :item-type="SelectOptionType.Check" />
+      <SSelectDropdown :item-type="optionType ?? SelectOptionType.Default" />
     </template>
   </SSelectBase>
 </template>
diff --git a/packages/ui/src/components/Select/SSelect.vue b/packages/ui/src/components/Select/SSelect.vue
index 387c24ff..c57f4936 100644
--- a/packages/ui/src/components/Select/SSelect.vue
+++ b/packages/ui/src/components/Select/SSelect.vue
@@ -4,9 +4,10 @@ import SSelectBase from './SSelectBase.vue'
 import SSelectInput from './SSelectInput.vue'
 import SSelectDropdown from './SSelectDropdown.vue'
 
-defineProps<{
+const props = defineProps<{
   modelValue?: any
   options?: SelectOption[] | SelectOptionGroup[]
+  optionType?: SelectOptionType
   disabled?: boolean
   multiple?: boolean
   label?: string
@@ -14,6 +15,8 @@ defineProps<{
   noAutoClose?: boolean
   loading?: boolean
 }>()
+
+const defaultOptionType = computed(() => (props.multiple ? SelectOptionType.Checkbox : SelectOptionType.Radio))
 </script>
 
 <template>
@@ -35,7 +38,7 @@ defineProps<{
     </template>
 
     <template #dropdown>
-      <SSelectDropdown :item-type="SelectOptionType.RadioOrCheckbox" />
+      <SSelectDropdown :item-type="optionType ?? defaultOptionType" />
     </template>
   </SSelectBase>
 </template>
diff --git a/packages/ui/src/components/Select/SSelectBase.vue b/packages/ui/src/components/Select/SSelectBase.vue
index 1a924c40..80d4be63 100644
--- a/packages/ui/src/components/Select/SSelectBase.vue
+++ b/packages/ui/src/components/Select/SSelectBase.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SelectSize, SelectOption, SelectOptionGroup, SelectOptionType } from './types'
+import { SelectSize, SelectOption, SelectOptionGroup } from './types'
 import { useSelectModel } from './use-model'
 import { SelectApi, SELECT_API_KEY } from './api'
 import { and, not } from '@vueuse/core'
@@ -12,7 +12,6 @@ const props = withDefaults(
 
     modelValue?: any
     options?: SelectOption[] | SelectOptionGroup[]
-    optionsType?: SelectOptionType
 
     size?: SelectSize
 
@@ -56,7 +55,6 @@ const props = withDefaults(
   {
     size: SelectSize.Md,
     options: () => [],
-    optionsType: SelectOptionType.Check,
     modelValue: null,
     multiple: false,
     disabled: false,
diff --git a/packages/ui/src/components/Select/SSelectOption.vue b/packages/ui/src/components/Select/SSelectOption.vue
index d613bc0e..092e87ac 100644
--- a/packages/ui/src/components/Select/SSelectOption.vue
+++ b/packages/ui/src/components/Select/SSelectOption.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SelectOptionType } from './types'
+import { SelectOptionType, SelectSize } from './types'
 import IconCheckMark from '~icons/mdi/check'
 import { useSelectApi } from './api'
 import { SCheckboxAtom } from '../Checkbox'
@@ -7,14 +7,19 @@ import { SRadioAtom } from '../Radio'
 
 const props = defineProps<{
   type: SelectOptionType
-  multiple?: boolean
   selected?: boolean
 }>()
 
 const api = useSelectApi()
-const isCheckMode = computed(() => props.type === SelectOptionType.Check)
 
 const emit = defineEmits<(event: 'toggle') => void>()
+
+const RADIO_CHECKBOX_SIZE = {
+  [SelectSize.Xl]: 'xl',
+  [SelectSize.Lg]: 'lg',
+  [SelectSize.Md]: 'md',
+  [SelectSize.Sm]: 'md',
+} as const
 </script>
 
 <template>
@@ -28,25 +33,24 @@ const emit = defineEmits<(event: 'toggle') => void>()
     ]"
     @click="emit('toggle')"
   >
-    <template v-if="!isCheckMode">
-      <template v-if="multiple">
-        <SCheckboxAtom
-          :checked="selected"
-          size="lg"
-        />
-      </template>
-      <template v-else>
-        <SRadioAtom
-          :checked="selected"
-          size="lg"
-        />
-      </template>
+    <template v-if="type === SelectOptionType.Checkbox">
+      <SCheckboxAtom
+        :checked="selected"
+        :size="RADIO_CHECKBOX_SIZE[api.size]"
+      />
+    </template>
+    <template v-if="type === SelectOptionType.Radio">
+      <SRadioAtom
+        :checked="selected"
+        :size="RADIO_CHECKBOX_SIZE[api.size]"
+      />
     </template>
+
     <div class="s-select-option__content">
       <slot />
     </div>
 
-    <template v-if="isCheckMode">
+    <template v-if="type === SelectOptionType.Default">
       <div class="s-select-option__right-check-wrapper">
         <template v-if="selected">
           <IconCheckMark />
diff --git a/packages/ui/src/components/Select/types.ts b/packages/ui/src/components/Select/types.ts
index 7f1a2b26..9bfd6d0c 100644
--- a/packages/ui/src/components/Select/types.ts
+++ b/packages/ui/src/components/Select/types.ts
@@ -17,8 +17,9 @@ export const SelectButtonType = {
 export type SelectButtonType = typeof SelectButtonType[keyof typeof SelectButtonType]
 
 export const SelectOptionType = {
-  RadioOrCheckbox: 'rad-or-check',
-  Check: 'check',
+  Radio: 'radio',
+  Checkbox: 'checkbox',
+  Default: 'default',
 } as const
 
 export type SelectOptionType = typeof SelectOptionType[keyof typeof SelectOptionType]

From e7bc255596879a0c5ebe7f6f48a690a65971e35c Mon Sep 17 00:00:00 2001
From: Stepan <kvantoreps@gmail.com>
Date: Fri, 30 Dec 2022 15:00:11 +0300
Subject: [PATCH 3/8] WDS-125 add stories for new features

---
 packages/ui/stories/SSelect.stories.ts | 138 +++++++++++++++++++++----
 1 file changed, 116 insertions(+), 22 deletions(-)

diff --git a/packages/ui/stories/SSelect.stories.ts b/packages/ui/stories/SSelect.stories.ts
index 0c189cc2..e1fa02dc 100644
--- a/packages/ui/stories/SSelect.stories.ts
+++ b/packages/ui/stories/SSelect.stories.ts
@@ -1,14 +1,45 @@
-import { SSelect, SDropdown, SelectOption, SSelectBase, SSelectButton, useSelectApi } from '@/lib'
+import {
+  SSelect,
+  SDropdown,
+  SSelectBase,
+  SSelectButton,
+  useSelectApi,
+  SelectOption,
+  SelectOptionGroup,
+  SelectOptionType,
+} from '@/lib'
 import { defineMeta, defineStory } from './util'
 import { ref } from 'vue'
 
-const sizeArg = {
-  options: ['sm', 'md', 'lg', 'xl'],
-  control: 'inline-radio',
+const commonArgTypes = {
+  size: {
+    options: ['sm', 'md', 'lg', 'xl'],
+    control: 'inline-radio',
+  },
+  optionType: {
+    options: Object.values(SelectOptionType),
+    control: 'inline-radio',
+  },
+  disabled: { control: 'boolean' },
+  loading: { control: 'boolean' },
+}
+const commonArgs = {
+  size: 'md',
+  disabled: false,
+  loading: false,
 }
 
 export default defineMeta({
   title: 'Example/Select',
+  decorators: [
+    () => ({
+      template: `
+        <div class="grid grid-cols-2 gap-4 w-1/2">
+          <story />
+        </div>
+      `,
+    }),
+  ],
 })
 
 const OPTIONS: SelectOption[] = [
@@ -20,11 +51,45 @@ const OPTIONS: SelectOption[] = [
     label: 'England',
     value: 'en',
   },
+  {
+    label: 'Iceland',
+    value: 'is',
+  },
   {
     label: 'Japan',
     value: 'jp',
   },
 ]
+const OPTION_GROUPS: SelectOptionGroup[] = [
+  {
+    header: '1 group',
+    selectAllBtn: true,
+    items: [
+      {
+        label: 'Germany',
+        value: 'du',
+      },
+      {
+        label: 'England',
+        value: 'en',
+      },
+    ],
+  },
+  {
+    header: '2 group',
+    selectAllBtn: true,
+    items: [
+      {
+        label: 'Iceland',
+        value: 'is',
+      },
+      {
+        label: 'Japan',
+        value: 'jp',
+      },
+    ],
+  },
+]
 
 export const SelectSingle = defineStory((args) => ({
   components: {
@@ -33,6 +98,7 @@ export const SelectSingle = defineStory((args) => ({
   setup() {
     return {
       OPTIONS,
+      OPTION_GROUPS,
       model: ref(null),
       args,
     }
@@ -43,22 +109,31 @@ export const SelectSingle = defineStory((args) => ({
       label="Single select"
       :options="OPTIONS"
       :size="args.size"
+      :disabled="args.disabled"
+      :loading="args.loading"
+      :option-type="args.optionType"
+    />
+    <SSelect
+      v-model="model"
+      label="Single select"
+      :options="OPTION_GROUPS"
+      :size="args.size"
+      :disabled="args.disabled"
+      :loading="args.loading"
+      :option-type="args.optionType"
     />
   `,
 }))
 
-SelectSingle.argTypes = {
-  size: sizeArg,
-}
-SelectSingle.args = {
-  size: 'md',
-}
+SelectSingle.argTypes = commonArgTypes
+SelectSingle.args = commonArgs
 
 export const SelectMultiple = defineStory((args) => ({
   components: { SSelect },
   setup() {
     return {
       OPTIONS,
+      OPTION_GROUPS,
       model: ref(['en', 'jp']),
       args,
     }
@@ -70,22 +145,32 @@ export const SelectMultiple = defineStory((args) => ({
       :options="OPTIONS"
       multiple
       :size="args.size"
+      :disabled="args.disabled"
+      :loading="args.loading"
+      :option-type="args.optionType"
+    />
+    <SSelect
+      v-model="model"
+      label="Multi select"
+      :options="OPTION_GROUPS"
+      multiple
+      :size="args.size"
+      :disabled="args.disabled"
+      :loading="args.loading"
+      :option-type="args.optionType"
     />
   `,
 }))
 
-SelectMultiple.argTypes = {
-  size: sizeArg,
-}
-SelectMultiple.args = {
-  size: 'md',
-}
+SelectMultiple.argTypes = commonArgTypes
+SelectMultiple.args = commonArgs
 
 export const Dropdown = defineStory((args) => ({
   components: { SDropdown },
   setup() {
     return {
       OPTIONS,
+      OPTION_GROUPS,
       model: ref(['en', 'jp']),
       args,
     }
@@ -97,16 +182,25 @@ export const Dropdown = defineStory((args) => ({
       :options="OPTIONS"
       multiple
       :size="args.size"
+      :disabled="args.disabled"
+      :loading="args.loading"
+      :option-type="args.optionType"
+    />
+    <SDropdown
+      v-model="model"
+      label="Country"
+      :options="OPTION_GROUPS"
+      multiple
+      :size="args.size"
+      :disabled="args.disabled"
+      :loading="args.loading"
+      :option-type="args.optionType"
     />
   `,
 }))
 
-Dropdown.argTypes = {
-  size: sizeArg,
-}
-Dropdown.args = {
-  size: 'md',
-}
+Dropdown.argTypes = commonArgTypes
+Dropdown.args = commonArgs
 
 export const Custom = defineStory(() => ({
   components: {

From feb21fb74bd3e9cc8bb1990e0fb0592ba9c6b2f1 Mon Sep 17 00:00:00 2001
From: Stepan <kvantoreps@gmail.com>
Date: Fri, 30 Dec 2022 15:34:12 +0300
Subject: [PATCH 4/8] WDS-125 add ellipsis on select text overflow

---
 .changeset/stupid-experts-report.md                | 5 +++++
 packages/ui/src/components/Select/SSelectInput.vue | 6 +++---
 2 files changed, 8 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/stupid-experts-report.md

diff --git a/.changeset/stupid-experts-report.md b/.changeset/stupid-experts-report.md
new file mode 100644
index 00000000..8f258213
--- /dev/null
+++ b/.changeset/stupid-experts-report.md
@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': patch
+---
+
+**fix**(`SSelect`): add ellipsis on select text overflow
diff --git a/packages/ui/src/components/Select/SSelectInput.vue b/packages/ui/src/components/Select/SSelectInput.vue
index 7c2443ee..d78a4097 100644
--- a/packages/ui/src/components/Select/SSelectInput.vue
+++ b/packages/ui/src/components/Select/SSelectInput.vue
@@ -40,7 +40,7 @@ const FSelection = () =>
     ? h(
         'span',
         {
-          class: typographySelection(),
+          class: ['overflow-hidden', 'overflow-ellipsis', typographySelection()],
         },
         selectionsJoined.value,
       )
@@ -60,14 +60,14 @@ const FSelection = () =>
     @click="api.menuToggle()"
   >
     <template v-if="isColumnLayout">
-      <div class="flex flex-col flex-1">
+      <div class="flex flex-col flex-1 truncate">
         <FLabel />
         <FSelection />
       </div>
     </template>
 
     <template v-else>
-      <div class="flex items-center flex-1">
+      <div class="flex items-center flex-1 truncate">
         <FLabel /> <FSelection />
       </div>
     </template>

From fb2bd9209385f86abe518f1031be50d4c296fd65 Mon Sep 17 00:00:00 2001
From: Stepan <kvantoreps@gmail.com>
Date: Tue, 17 Jan 2023 11:44:58 +0300
Subject: [PATCH 5/8] WDS-125 fix checkbox and radio size in select options

---
 packages/ui/src/components/Select/SSelectOption.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/Select/SSelectOption.vue b/packages/ui/src/components/Select/SSelectOption.vue
index 092e87ac..09f7ebef 100644
--- a/packages/ui/src/components/Select/SSelectOption.vue
+++ b/packages/ui/src/components/Select/SSelectOption.vue
@@ -17,7 +17,7 @@ const emit = defineEmits<(event: 'toggle') => void>()
 const RADIO_CHECKBOX_SIZE = {
   [SelectSize.Xl]: 'xl',
   [SelectSize.Lg]: 'lg',
-  [SelectSize.Md]: 'md',
+  [SelectSize.Md]: 'lg',
   [SelectSize.Sm]: 'md',
 } as const
 </script>

From b78e3c14835d2ee11e9756c5690f3c622443285b Mon Sep 17 00:00:00 2001
From: Stepan <kvantoreps@gmail.com>
Date: Tue, 17 Jan 2023 16:46:44 +0300
Subject: [PATCH 6/8] WDS-125 fix check icon size in select options

---
 .../src/components/Select/SSelectOption.vue   | 32 +++++++------------
 1 file changed, 12 insertions(+), 20 deletions(-)

diff --git a/packages/ui/src/components/Select/SSelectOption.vue b/packages/ui/src/components/Select/SSelectOption.vue
index 09f7ebef..33bcde80 100644
--- a/packages/ui/src/components/Select/SSelectOption.vue
+++ b/packages/ui/src/components/Select/SSelectOption.vue
@@ -20,6 +20,13 @@ const RADIO_CHECKBOX_SIZE = {
   [SelectSize.Md]: 'lg',
   [SelectSize.Sm]: 'md',
 } as const
+
+const CHECK_ICON_SIZE = {
+  [SelectSize.Xl]: 24,
+  [SelectSize.Lg]: 16,
+  [SelectSize.Md]: 16,
+  [SelectSize.Sm]: 16,
+} as const
 </script>
 
 <template>
@@ -51,11 +58,11 @@ const RADIO_CHECKBOX_SIZE = {
     </div>
 
     <template v-if="type === SelectOptionType.Default">
-      <div class="s-select-option__right-check-wrapper">
-        <template v-if="selected">
-          <IconCheckMark />
-        </template>
-      </div>
+      <IconCheckMark
+        v-if="selected"
+        :width="CHECK_ICON_SIZE[api.size]"
+        :height="CHECK_ICON_SIZE[api.size]"
+      />
     </template>
   </div>
 </template>
@@ -78,25 +85,10 @@ const RADIO_CHECKBOX_SIZE = {
     @apply flex-1;
   }
 
-  &__right-check-wrapper {
-    @apply w-6 h-6 flex items-center justify-center;
-  }
-
   $root: &;
 
   &_size {
     @include sizes-mixin.s-select-sizes;
-
-    @mixin check-size($size, $px: 16px) {
-      &_#{$size} #{$root}__right-check-wrapper {
-        font-size: $px;
-      }
-    }
-
-    @include check-size('sm');
-    @include check-size('md');
-    @include check-size('lg');
-    @include check-size('xl', 24px);
   }
 }
 </style>

From 5032032ca6373a6268bb062340d496865da5cc4d Mon Sep 17 00:00:00 2001
From: Stepan <kvantoreps@gmail.com>
Date: Wed, 18 Jan 2023 12:40:02 +0300
Subject: [PATCH 7/8] WDS-125 change changeset description

---
 .changeset/light-toes-remember.md   | 4 ++--
 .changeset/silver-countries-help.md | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/.changeset/light-toes-remember.md b/.changeset/light-toes-remember.md
index 48626641..5b0112ee 100644
--- a/.changeset/light-toes-remember.md
+++ b/.changeset/light-toes-remember.md
@@ -1,5 +1,5 @@
 ---
-'@soramitsu-ui/ui': patch
+'@soramitsu-ui/ui': minor
 ---
 
-**fix**(`SSelect`): add loading state
+**feat**(`SSelect`): add loading state
diff --git a/.changeset/silver-countries-help.md b/.changeset/silver-countries-help.md
index 8784ec5d..a97cd1d0 100644
--- a/.changeset/silver-countries-help.md
+++ b/.changeset/silver-countries-help.md
@@ -1,5 +1,5 @@
 ---
-'@soramitsu-ui/ui': patch
+'@soramitsu-ui/ui': minor
 ---
 
-**fix**(`SSelect`): add prop to select options type
+**feat**(`SSelect`): add prop to select options type

From ee51f76011e0582bc05cf063db6b5a16f9667d71 Mon Sep 17 00:00:00 2001
From: Stepan <kvantoreps@gmail.com>
Date: Tue, 31 Jan 2023 17:38:03 +0300
Subject: [PATCH 8/8] WDS-125 update changesets

---
 .changeset/light-toes-remember.md   | 2 +-
 .changeset/silver-countries-help.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.changeset/light-toes-remember.md b/.changeset/light-toes-remember.md
index 5b0112ee..2f658cab 100644
--- a/.changeset/light-toes-remember.md
+++ b/.changeset/light-toes-remember.md
@@ -2,4 +2,4 @@
 '@soramitsu-ui/ui': minor
 ---
 
-**feat**(`SSelect`): add loading state
+**feat**(`SSelect`,`SDropdown`): add loading state (`loading` prop)
diff --git a/.changeset/silver-countries-help.md b/.changeset/silver-countries-help.md
index a97cd1d0..2737bc97 100644
--- a/.changeset/silver-countries-help.md
+++ b/.changeset/silver-countries-help.md
@@ -2,4 +2,4 @@
 '@soramitsu-ui/ui': minor
 ---
 
-**feat**(`SSelect`): add prop to select options type
+**feat**(`SSelect`,`SDropdown`): add prop to select options type (`optionType` prop)