From bc7406b41fb75bf0043fb0c8039730d8417e7bf0 Mon Sep 17 00:00:00 2001
From: Stepan <kvantoreps@gmail.com>
Date: Tue, 27 Dec 2022 14:35:02 +0300
Subject: [PATCH 1/6] WDS-125 make select option menu same width as trigger's
 one

---
 .changeset/thin-mirrors-fly.md                |  5 ++++
 packages/ui/etc/api/ui.api.md                 | 28 ++++++++++++++++---
 .../ui/src/components/Popover/SPopover.ts     | 20 ++++++++++++-
 .../Popover/SPopoverWrappedTransition.vue     |  5 ++++
 packages/ui/src/components/Select/SSelect.vue |  5 +++-
 .../ui/src/components/Select/SSelectBase.vue  |  7 +++++
 6 files changed, 64 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/thin-mirrors-fly.md

diff --git a/.changeset/thin-mirrors-fly.md b/.changeset/thin-mirrors-fly.md
new file mode 100644
index 00000000..e81742b6
--- /dev/null
+++ b/.changeset/thin-mirrors-fly.md
@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': patch
+---
+
+**fix**(`SSelect`): make select options menu width same as trigger's one
diff --git a/packages/ui/etc/api/ui.api.md b/packages/ui/etc/api/ui.api.md
index b0101a36..d1c2c64a 100644
--- a/packages/ui/etc/api/ui.api.md
+++ b/packages/ui/etc/api/ui.api.md
@@ -823,6 +823,10 @@ hideDelay: {
 type: (StringConstructor | NumberConstructor)[];
 default: number;
 };
+sameWidth: {
+type: BooleanConstructor;
+default: boolean;
+};
 }, () => (VNode<RendererNode, RendererElement, {
 [key: string]: any;
 }> | null)[], unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("update:show" | "click-outside")[], "update:show" | "click-outside", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<    {
@@ -853,6 +857,10 @@ hideDelay: {
 type: (StringConstructor | NumberConstructor)[];
 default: number;
 };
+sameWidth: {
+type: BooleanConstructor;
+default: boolean;
+};
 }>> & {
 "onUpdate:show"?: ((...args: any[]) => any) | undefined;
 "onClick-outside"?: ((...args: any[]) => any) | undefined;
@@ -864,6 +872,7 @@ skidding: string | number;
 distance: string | number;
 showDelay: string | number;
 hideDelay: string | number;
+sameWidth: boolean;
 }>;
 
 // @public (undocumented)
@@ -873,15 +882,24 @@ wrapperAttrs: {
 type: ObjectConstructor;
 default: null;
 };
+innerWrapperAttrs: {
+type: ObjectConstructor;
+default: null;
+};
 }, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<    {
 eager: BooleanConstructor;
 wrapperAttrs: {
 type: ObjectConstructor;
 default: null;
 };
+innerWrapperAttrs: {
+type: ObjectConstructor;
+default: null;
+};
 }>>, {
 eager: boolean;
 wrapperAttrs: Record<string, any>;
+innerWrapperAttrs: Record<string, any>;
 }>;
 
 // Warning: (ae-forgotten-export) The symbol "__VLS_WithDefaults" needs to be exported by the entry point lib.d.ts
@@ -901,8 +919,8 @@ lineHeight?: number | undefined;
 percent: number;
 lineHeight: number;
 }>>>, {
-percent: number;
 lineHeight: number;
+percent: number;
 }>;
 
 // Warning: (ae-forgotten-export) The symbol "__VLS_WithDefaults" needs to be exported by the entry point lib.d.ts
@@ -988,6 +1006,7 @@ label?: string | null | undefined;
 mandatory?: boolean | undefined;
 syncMenuAndInputWidths?: boolean | undefined;
 noAutoClose?: boolean | undefined;
+sameWidthPopper?: boolean | undefined;
 }>, {
 size: "md";
 options: () => never[];
@@ -1009,6 +1028,7 @@ label?: string | null | undefined;
 mandatory?: boolean | undefined;
 syncMenuAndInputWidths?: boolean | undefined;
 noAutoClose?: boolean | undefined;
+sameWidthPopper?: boolean | undefined;
 }>, {
 size: "md";
 options: () => never[];
@@ -1298,11 +1318,11 @@ onSelect?: ((args_0: TableRow[], args_1: TableRow) => any) | undefined;
 }, {
 data: TableRow[];
 height: string | number;
+maxHeight: string | number;
 defaultSort: {
 prop: string;
 order: TableColumnSortOrder;
 } | null;
-maxHeight: string | number;
 fit: boolean;
 showHeader: boolean;
 highlightCurrentRow: boolean;
@@ -1467,9 +1487,9 @@ default: boolean;
 type: "default" | "details" | "selection" | "expand";
 width: string;
 label: string;
+minWidth: string;
 sortable: boolean | "custom";
 prop: string;
-minWidth: string;
 sortMethod: <T>(a: T, b: T) => number;
 sortBy: TableColumnSortBy_2;
 sortOrders: TableColumnSortOrder_2[];
@@ -1651,9 +1671,9 @@ secondaryButtonText: string;
 "onClick:secondary-button"?: ((...args: any[]) => any) | undefined;
 }, {
 placement: BasePlacement;
+content: string;
 header: string;
 wrapperTag: string | object;
-content: string;
 primaryButtonText: string;
 secondaryButtonText: string;
 }>;
diff --git a/packages/ui/src/components/Popover/SPopover.ts b/packages/ui/src/components/Popover/SPopover.ts
index a9ac05cf..70b2624b 100644
--- a/packages/ui/src/components/Popover/SPopover.ts
+++ b/packages/ui/src/components/Popover/SPopover.ts
@@ -1,5 +1,5 @@
 import { Ref, cloneVNode, PropType } from 'vue'
-import { Placement, placements, Instance } from '@popperjs/core'
+import { Placement, placements, Instance, State } from '@popperjs/core'
 import { not, or } from '@vueuse/core'
 import { usePopper } from '@/composables/popper'
 import { PopoverApi, POPOVER_API_KEY } from './api'
@@ -129,6 +129,10 @@ export default /* @__PURE__ */ defineComponent({
       type: [Number, String],
       default: 0,
     },
+    sameWidth: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['update:show', 'click-outside'],
   setup(props, { slots, emit }) {
@@ -162,6 +166,20 @@ export default /* @__PURE__ */ defineComponent({
             name: 'offset',
             options: { offset: computed(() => [skidding.value, distance.value]) },
           },
+          shallowReactive({
+            name: 'sameWidth',
+            enabled: props.sameWidth,
+            phase: 'beforeWrite' as const,
+            requires: ['computeStyles'],
+            fn: ({ state }: { state: State }) => {
+              state.styles.popper.width = `${state.rects.reference.width}px`
+            },
+            effect: ({ state }: { state: State }) => {
+              if (state.elements.reference instanceof HTMLElement) {
+                state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`
+              }
+            },
+          }),
         ],
       }),
     })
diff --git a/packages/ui/src/components/Popover/SPopoverWrappedTransition.vue b/packages/ui/src/components/Popover/SPopoverWrappedTransition.vue
index 5c7c71eb..af091cd4 100644
--- a/packages/ui/src/components/Popover/SPopoverWrappedTransition.vue
+++ b/packages/ui/src/components/Popover/SPopoverWrappedTransition.vue
@@ -15,6 +15,10 @@ const props = defineProps({
     type: Object,
     default: null,
   },
+  innerWrapperAttrs: {
+    type: Object,
+    default: null,
+  },
 })
 
 const api = usePopoverApi()
@@ -55,6 +59,7 @@ onScopeDispose(() => {
       <span
         v-if="contentIf"
         v-show="contentShow"
+        v-bind="innerWrapperAttrs"
       >
         <slot />
       </span>
diff --git a/packages/ui/src/components/Select/SSelect.vue b/packages/ui/src/components/Select/SSelect.vue
index 3b9a6b18..7b719fb6 100644
--- a/packages/ui/src/components/Select/SSelect.vue
+++ b/packages/ui/src/components/Select/SSelect.vue
@@ -16,7 +16,10 @@ defineProps<{
 </script>
 
 <template>
-  <SSelectBase v-bind="{ ...$attrs, ...$props } as any">
+  <SSelectBase
+    v-bind="{ ...$attrs, ...$props } as any"
+    same-width-popper
+  >
     <template #control>
       <SSelectInput>
         <template #label="binding">
diff --git a/packages/ui/src/components/Select/SSelectBase.vue b/packages/ui/src/components/Select/SSelectBase.vue
index 4fa652fc..c9e66ff5 100644
--- a/packages/ui/src/components/Select/SSelectBase.vue
+++ b/packages/ui/src/components/Select/SSelectBase.vue
@@ -41,6 +41,11 @@ const props = withDefaults(
      * Turn on this prop to disable auto-close.
      */
     noAutoClose?: boolean
+
+    /**
+     * Makes popper same width as trigger.
+     */
+    sameWidthPopper?: boolean
   }>(),
   {
     size: SelectSize.Md,
@@ -91,6 +96,7 @@ provide(SELECT_API_KEY, api)
   <div>
     <SPopover
       v-model:show="showPopper"
+      :same-width="sameWidthPopper"
       placement="bottom-start"
       trigger="manual"
       distance="4"
@@ -107,6 +113,7 @@ provide(SELECT_API_KEY, api)
           name="s-select-dropdown-transition"
           eager
           :wrapper-attrs="{ 'class': 'z-10' }"
+          :inner-wrapper-attrs="{ 'class': sameWidthPopper && 'w-full' }"
         >
           <slot name="dropdown" />
         </SPopoverWrappedTransition>

From cba3ff6cc593777923bc2e7fbf91cb46c32be0cf Mon Sep 17 00:00:00 2001
From: Stepan <kvantoreps@gmail.com>
Date: Thu, 29 Dec 2022 10:45:46 +0300
Subject: [PATCH 2/6] WDS-125 add option groups

---
 .changeset/four-readers-battle.md             |   5 +
 packages/ui/etc/api/ui.api.md                 |  34 +++---
 .../ui/src/components/Select/SDropdown.vue    |   4 +-
 packages/ui/src/components/Select/SSelect.vue |   4 +-
 .../ui/src/components/Select/SSelectBase.vue  |   8 +-
 .../src/components/Select/SSelectDropdown.vue | 101 ++++++++++++++++--
 packages/ui/src/components/Select/api.ts      |   8 +-
 packages/ui/src/components/Select/types.ts    |   6 ++
 .../ui/src/components/Select/use-model.ts     |  34 +++++-
 packages/ui/src/components/Select/utils.ts    |   5 +
 10 files changed, 171 insertions(+), 38 deletions(-)
 create mode 100644 .changeset/four-readers-battle.md
 create mode 100644 packages/ui/src/components/Select/utils.ts

diff --git a/.changeset/four-readers-battle.md b/.changeset/four-readers-battle.md
new file mode 100644
index 00000000..79c0d345
--- /dev/null
+++ b/.changeset/four-readers-battle.md
@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': patch
+---
+
+**fix**(`SSelect`): add option groups with headers and select all buttons
diff --git a/packages/ui/etc/api/ui.api.md b/packages/ui/etc/api/ui.api.md
index d1c2c64a..b4a2cae6 100644
--- a/packages/ui/etc/api/ui.api.md
+++ b/packages/ui/etc/api/ui.api.md
@@ -464,7 +464,7 @@ time: boolean;
 // @public (undocumented)
 export const SDropdown: DefineComponent<__VLS_TypePropsToRuntimeProps_10<{
 modelValue?: any;
-options?: SelectOption<any>[] | undefined;
+options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
 disabled?: boolean | undefined;
 multiple?: boolean | undefined;
 label?: string | undefined;
@@ -473,7 +473,7 @@ inline?: boolean | undefined;
 noAutoClose?: boolean | undefined;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_10<{
 modelValue?: any;
-options?: SelectOption<any>[] | undefined;
+options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
 disabled?: boolean | undefined;
 multiple?: boolean | undefined;
 label?: string | undefined;
@@ -488,7 +488,7 @@ export const SELECT_API_KEY: InjectionKey<SelectApi<any>>;
 // Warning: (ae-forgotten-export) The symbol "UseSelectModelReturn" needs to be exported by the entry point lib.d.ts
 //
 // @public (undocumented)
-export interface SelectApi<T> extends DeepReadonly<UnwrapRef<UseSelectModelReturn<T>>> {
+export interface SelectApi<T> extends UnwrapRef<UseSelectModelReturn<T>> {
     // (undocumented)
     readonly disabled: boolean;
     // (undocumented)
@@ -501,7 +501,7 @@ export interface SelectApi<T> extends DeepReadonly<UnwrapRef<UseSelectModelRetur
     // (undocumented)
     readonly noAutoClose: boolean;
     // (undocumented)
-    readonly options: DeepReadonly<UnwrapRef<SelectOption<T>>[]>;
+    readonly options: UnwrapRef<SelectOption<T>[] | SelectOptionGroup<T>[]>;
     // (undocumented)
     readonly size: SelectSize;
 }
@@ -523,6 +523,16 @@ export interface SelectOption<T = any> {
     value: T;
 }
 
+// @public (undocumented)
+export interface SelectOptionGroup<T = any> {
+    // (undocumented)
+    header?: string;
+    // (undocumented)
+    items: SelectOption<T>[];
+    // (undocumented)
+    selectAllBtn?: boolean;
+}
+
 // @public (undocumented)
 export const SelectOptionType: {
     readonly RadioOrCheckbox: "rad-or-check";
@@ -976,7 +986,7 @@ radioSelector: string;
 // @public (undocumented)
 export const SSelect: DefineComponent<__VLS_TypePropsToRuntimeProps_9<{
 modelValue?: any;
-options?: SelectOption<any>[] | undefined;
+options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
 disabled?: boolean | undefined;
 multiple?: boolean | undefined;
 label?: string | undefined;
@@ -984,7 +994,7 @@ size?: SelectSize | undefined;
 noAutoClose?: boolean | undefined;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_9<{
 modelValue?: any;
-options?: SelectOption<any>[] | undefined;
+options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
 disabled?: boolean | undefined;
 multiple?: boolean | undefined;
 label?: string | undefined;
@@ -1000,7 +1010,7 @@ export const SSelectBase: DefineComponent<__VLS_WithDefaults_9<__VLS_TypePropsTo
 disabled?: boolean | undefined;
 multiple?: boolean | undefined;
 modelValue?: any;
-options?: SelectOption<any>[] | undefined;
+options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
 size?: SelectSize | undefined;
 label?: string | null | undefined;
 mandatory?: boolean | undefined;
@@ -1022,7 +1032,7 @@ label: null;
 disabled?: boolean | undefined;
 multiple?: boolean | undefined;
 modelValue?: any;
-options?: SelectOption<any>[] | undefined;
+options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
 size?: SelectSize | undefined;
 label?: string | null | undefined;
 mandatory?: boolean | undefined;
@@ -1045,10 +1055,10 @@ modelValue: any;
 multiple: boolean;
 size: SelectSize;
 disabled: boolean;
-options: SelectOption[];
+options: SelectOption[] | SelectOptionGroup[];
 label: string | null;
-syncMenuAndInputWidths: boolean;
 noAutoClose: boolean;
+syncMenuAndInputWidths: boolean;
 }>;
 
 // Warning: (ae-forgotten-export) The symbol "__VLS_WithDefaults" needs to be exported by the entry point lib.d.ts
@@ -1486,9 +1496,10 @@ default: boolean;
 }>>, {
 type: "default" | "details" | "selection" | "expand";
 width: string;
-label: string;
 minWidth: string;
+label: string;
 sortable: boolean | "custom";
+selectable: TableColumnRowSelectableFunc_2;
 prop: string;
 sortMethod: <T>(a: T, b: T) => number;
 sortBy: TableColumnSortBy_2;
@@ -1499,7 +1510,6 @@ align: "left" | "right" | "center";
 headerAlign: "left" | "right" | "center" | null;
 className: string;
 labelClassName: string;
-selectable: TableColumnRowSelectableFunc_2;
 reserveSelection: boolean;
 }>;
 
diff --git a/packages/ui/src/components/Select/SDropdown.vue b/packages/ui/src/components/Select/SDropdown.vue
index 1de48d9b..07915bfe 100644
--- a/packages/ui/src/components/Select/SDropdown.vue
+++ b/packages/ui/src/components/Select/SDropdown.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { SelectOption, SelectButtonType, SelectOptionType, SelectSize } from './types'
+import { SelectOption, SelectButtonType, SelectOptionType, SelectSize, SelectOptionGroup } from './types'
 import SSelectBase from './SSelectBase.vue'
 import SSelectButton from './SSelectButton.vue'
 import SSelectDropdown from './SSelectDropdown.vue'
 
 const props = defineProps<{
   modelValue?: any
-  options?: SelectOption[]
+  options?: SelectOption[] | SelectOptionGroup[]
   disabled?: boolean
   multiple?: boolean
   label?: string
diff --git a/packages/ui/src/components/Select/SSelect.vue b/packages/ui/src/components/Select/SSelect.vue
index 7b719fb6..806f3c4e 100644
--- a/packages/ui/src/components/Select/SSelect.vue
+++ b/packages/ui/src/components/Select/SSelect.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { SelectOption, SelectOptionType, SelectSize } from './types'
+import { SelectOption, SelectOptionGroup, SelectOptionType, SelectSize } from './types'
 import SSelectBase from './SSelectBase.vue'
 import SSelectInput from './SSelectInput.vue'
 import SSelectDropdown from './SSelectDropdown.vue'
 
 defineProps<{
   modelValue?: any
-  options?: SelectOption[]
+  options?: SelectOption[] | SelectOptionGroup[]
   disabled?: boolean
   multiple?: boolean
   label?: string
diff --git a/packages/ui/src/components/Select/SSelectBase.vue b/packages/ui/src/components/Select/SSelectBase.vue
index c9e66ff5..5457b6d8 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 } 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'
@@ -11,7 +11,7 @@ const props = withDefaults(
     multiple?: boolean
 
     modelValue?: any
-    options?: SelectOption[]
+    options?: SelectOption[] | SelectOptionGroup[]
 
     size?: SelectSize
 
@@ -77,7 +77,7 @@ const [showPopper, togglePopper] = useToggle(false)
 // close popper if select is disabled
 whenever(and(disabled, showPopper), () => togglePopper(false), { immediate: true })
 
-const api = readonly({
+const api: SelectApi<any> = reactive({
   ...modeling,
   multiple,
   options,
@@ -87,7 +87,7 @@ const api = readonly({
   menuToggle: togglePopper,
   size,
   noAutoClose,
-}) as SelectApi<any>
+})
 
 provide(SELECT_API_KEY, api)
 </script>
diff --git a/packages/ui/src/components/Select/SSelectDropdown.vue b/packages/ui/src/components/Select/SSelectDropdown.vue
index 34527202..26f62053 100644
--- a/packages/ui/src/components/Select/SSelectDropdown.vue
+++ b/packages/ui/src/components/Select/SSelectDropdown.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { useSelectApi } from './api'
-import { SelectOptionType, SelectSize } from './types'
+import { SelectOptionGroup, SelectOptionType, SelectSize } from './types'
 import SSelectOption from './SSelectOption.vue'
+import { ComputedRef } from 'vue'
+import { isSelectOptions } from '@/components/Select/utils'
 
 defineProps<{
   itemType: SelectOptionType
@@ -10,21 +12,76 @@ defineProps<{
 const api = useSelectApi()
 
 const fontClass = computed(() => (api.size === SelectSize.Xl ? 'sora-tpg-p3' : 'sora-tpg-p4'))
+
+const optionGroups: ComputedRef<SelectOptionGroup[]> = computed(() => {
+  const options = api.options
+
+  if (isSelectOptions(options)) {
+    return [{ items: options }]
+  }
+
+  return options
+})
+
+function isActionButtonShown(selectAllBtn: boolean) {
+  return api.multiple && selectAllBtn
+}
+
+const HEADER_FONT = {
+  [SelectSize.Xl]: 'sora-tpg-ch2',
+  [SelectSize.Lg]: 'sora-tpg-ch3',
+  [SelectSize.Md]: 'sora-tpg-ch3',
+  [SelectSize.Sm]: 'sora-tpg-ch3',
+} as const
+
+const ACTION_FONT = {
+  [SelectSize.Xl]: 'sora-tpg-p3',
+  [SelectSize.Lg]: 'sora-tpg-p4',
+  [SelectSize.Md]: 'sora-tpg-p4',
+  [SelectSize.Sm]: 'sora-tpg-p4',
+} as const
 </script>
 
 <template>
-  <div class="s-select-dropdown">
-    <SSelectOption
-      v-for="(opt, i) in api.options"
+  <div
+    class="s-select-dropdown"
+    :class="`s-select-dropdown_size_${api.size}`"
+  >
+    <template
+      v-for="(optionGroup, i) in optionGroups"
       :key="i"
-      :class="fontClass"
-      :type="itemType"
-      :multiple="api.multiple"
-      :selected="api.isValueSelected(opt.value)"
-      @toggle="api.toggleSelection(opt.value)"
     >
-      {{ opt.label }}
-    </SSelectOption>
+      <div
+        v-if="isActionButtonShown(!!optionGroup.selectAllBtn) || optionGroup.header"
+        class="s-select-dropdown__header flex items-center justify-between"
+      >
+        <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>
+      <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>
+    </template>
   </div>
 </template>
 
@@ -35,5 +92,27 @@ const fontClass = computed(() => (api.size === SelectSize.Xl ? 'sora-tpg-p3' : '
   @apply rounded overflow-hidden;
   background: theme.token-as-var('sys.color.util.surface');
   box-shadow: theme.token-as-var('sys.shadow.dropdown');
+
+  &__header {
+    color: theme.token-as-var('sys.color.content-tertiary');
+    border-bottom: 1px solid theme.token-as-var('sys.color.border-primary');
+  }
+
+  &__action {
+    color: theme.token-as-var('sys.color.status.info');
+  }
+
+  @mixin select-dropdown-size($name, $header-height, $px) {
+    &_size_#{$name} &__header {
+      height: $header-height;
+      padding-right: $px;
+      padding-left: $px;
+    }
+  }
+
+  @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);
 }
 </style>
diff --git a/packages/ui/src/components/Select/api.ts b/packages/ui/src/components/Select/api.ts
index aa0721d7..3f2ef722 100644
--- a/packages/ui/src/components/Select/api.ts
+++ b/packages/ui/src/components/Select/api.ts
@@ -1,10 +1,10 @@
-import { InjectionKey, UnwrapRef, DeepReadonly } from 'vue'
-import { SelectOption, SelectSize } from './types'
+import { InjectionKey, UnwrapRef } from 'vue'
+import { SelectOption, SelectOptionGroup, SelectSize } from './types'
 import { UseSelectModelReturn } from './use-model'
 import { forceInject } from '@/util'
 
-export interface SelectApi<T> extends DeepReadonly<UnwrapRef<UseSelectModelReturn<T>>> {
-  readonly options: DeepReadonly<UnwrapRef<SelectOption<T>>[]>
+export interface SelectApi<T> extends UnwrapRef<UseSelectModelReturn<T>> {
+  readonly options: UnwrapRef<SelectOption<T>[] | SelectOptionGroup<T>[]>
   readonly multiple: boolean
   readonly disabled: boolean
   readonly label: string | null
diff --git a/packages/ui/src/components/Select/types.ts b/packages/ui/src/components/Select/types.ts
index 35d6271a..7f1a2b26 100644
--- a/packages/ui/src/components/Select/types.ts
+++ b/packages/ui/src/components/Select/types.ts
@@ -27,3 +27,9 @@ export interface SelectOption<T = any> {
   label: string
   value: T
 }
+
+export interface SelectOptionGroup<T = any> {
+  header?: string
+  selectAllBtn?: boolean
+  items: SelectOption<T>[]
+}
diff --git a/packages/ui/src/components/Select/use-model.ts b/packages/ui/src/components/Select/use-model.ts
index d18303e1..7785934b 100644
--- a/packages/ui/src/components/Select/use-model.ts
+++ b/packages/ui/src/components/Select/use-model.ts
@@ -1,12 +1,14 @@
 import { Ref } from 'vue'
-import { SelectOption } from './types'
+import { SelectOption, SelectOptionGroup } from './types'
 import { whenever, and, not } from '@vueuse/core'
+import { isSelectOptions } from '@/components/Select/utils'
 
 export interface UseSelectModelReturn<T> {
   /**
    * Toggle value's selection state. Works different in single/multiple modes.
    */
   toggleSelection: (value: T) => void
+  toggleGroupSelection: (optionsGroup: SelectOptionGroup<T>) => void
   select: (value: T) => void
   unselect: (value: T) => void
 
@@ -21,12 +23,13 @@ export interface UseSelectModelReturn<T> {
   selectedOptions: Ref<SelectOption<T>[]>
 
   isSomethingSelected: Ref<boolean>
+  isGroupSelected: (optionsGroup: SelectOptionGroup<T>) => boolean
 }
 
 export interface UseSelectModelParams<T> {
   multiple: Ref<boolean>
   model: Ref<null | T | T[]>
-  options: Ref<SelectOption<T>[]>
+  options: Ref<SelectOption<T>[] | SelectOptionGroup<T>[]>
 
   singleModeAutoClose: Ref<boolean>
   /**
@@ -59,6 +62,10 @@ export function useSelectModel<T = any>({
     return selectedSet.value.has(value)
   }
 
+  function isGroupSelected(optionGroup: SelectOptionGroup<T>) {
+    return optionGroup.items.every((x) => selectedSet.value.has(x.value))
+  }
+
   function select(value: T): void {
     if (multiple.value) {
       model.value = [...new Set([...modelAsArray.value, value])]
@@ -81,7 +88,26 @@ export function useSelectModel<T = any>({
     isValueSelected(value) ? unselect(value) : select(value)
   }
 
-  const selectedOptions = computed<SelectOption[]>(() => options.value.filter((x) => isValueSelected(x.value)))
+  function toggleGroupSelection(optionGroup: SelectOptionGroup<T>): void {
+    if (isGroupSelected(optionGroup)) {
+      const optionGroupSet = new Set(optionGroup.items.map((x) => x.value))
+      model.value = modelAsArray.value.filter((x) => !optionGroupSet.has(x))
+
+      return
+    }
+
+    model.value = [...new Set([...modelAsArray.value, ...optionGroup.items.map((x) => x.value)])]
+  }
+
+  const optionItems = computed(() => {
+    if (isSelectOptions(options.value)) {
+      return options.value
+    }
+
+    return options.value.flatMap((x) => x.items)
+  })
+
+  const selectedOptions = computed<SelectOption[]>(() => optionItems.value.filter((x) => isValueSelected(x.value)))
 
   const isSomethingSelected = computed<boolean>(() => !!selectedSet.value.size)
 
@@ -104,8 +130,10 @@ export function useSelectModel<T = any>({
     isValueSelected,
     selectedOptions,
     toggleSelection,
+    toggleGroupSelection,
     select,
     unselect,
     isSomethingSelected,
+    isGroupSelected,
   }
 }
diff --git a/packages/ui/src/components/Select/utils.ts b/packages/ui/src/components/Select/utils.ts
new file mode 100644
index 00000000..ea6592a8
--- /dev/null
+++ b/packages/ui/src/components/Select/utils.ts
@@ -0,0 +1,5 @@
+import { SelectOption, SelectOptionGroup } from '@/components'
+
+export function isSelectOptions(options: SelectOption[] | SelectOptionGroup[]): options is SelectOption[] {
+  return options.length === 0 || 'label' in options[0]
+}

From 163b21f724467fb49ef4388171a39d2a04485a5d Mon Sep 17 00:00:00 2001
From: Stepan <kvantoreps@gmail.com>
Date: Mon, 16 Jan 2023 09:11:21 +0300
Subject: [PATCH 3/6] WDS-125 small new code refactor

---
 packages/ui/src/components/Popover/SPopover.ts    | 5 +----
 packages/ui/src/components/Select/SSelectBase.vue | 2 +-
 packages/ui/src/components/Select/use-model.ts    | 2 +-
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/ui/src/components/Popover/SPopover.ts b/packages/ui/src/components/Popover/SPopover.ts
index 70b2624b..652a397e 100644
--- a/packages/ui/src/components/Popover/SPopover.ts
+++ b/packages/ui/src/components/Popover/SPopover.ts
@@ -129,10 +129,7 @@ export default /* @__PURE__ */ defineComponent({
       type: [Number, String],
       default: 0,
     },
-    sameWidth: {
-      type: Boolean,
-      default: false,
-    },
+    sameWidth: Boolean,
   },
   emits: ['update:show', 'click-outside'],
   setup(props, { slots, emit }) {
diff --git a/packages/ui/src/components/Select/SSelectBase.vue b/packages/ui/src/components/Select/SSelectBase.vue
index 5457b6d8..54e514df 100644
--- a/packages/ui/src/components/Select/SSelectBase.vue
+++ b/packages/ui/src/components/Select/SSelectBase.vue
@@ -113,7 +113,7 @@ provide(SELECT_API_KEY, api)
           name="s-select-dropdown-transition"
           eager
           :wrapper-attrs="{ 'class': 'z-10' }"
-          :inner-wrapper-attrs="{ 'class': sameWidthPopper && 'w-full' }"
+          :inner-wrapper-attrs="{ 'class': { 'w-full': sameWidthPopper } }"
         >
           <slot name="dropdown" />
         </SPopoverWrappedTransition>
diff --git a/packages/ui/src/components/Select/use-model.ts b/packages/ui/src/components/Select/use-model.ts
index 7785934b..d8a54a49 100644
--- a/packages/ui/src/components/Select/use-model.ts
+++ b/packages/ui/src/components/Select/use-model.ts
@@ -63,7 +63,7 @@ export function useSelectModel<T = any>({
   }
 
   function isGroupSelected(optionGroup: SelectOptionGroup<T>) {
-    return optionGroup.items.every((x) => selectedSet.value.has(x.value))
+    return optionGroup.items.every((x) => isValueSelected(x.value))
   }
 
   function select(value: T): void {

From 262fae2c15965a2dc1a27d06d23d114bd8a1547f Mon Sep 17 00:00:00 2001
From: Stepan <kvantoreps@gmail.com>
Date: Mon, 16 Jan 2023 09:38:00 +0300
Subject: [PATCH 4/6] WDS-125 update api

---
 packages/ui/etc/api/ui.api.md | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/packages/ui/etc/api/ui.api.md b/packages/ui/etc/api/ui.api.md
index b4a2cae6..d0ca2675 100644
--- a/packages/ui/etc/api/ui.api.md
+++ b/packages/ui/etc/api/ui.api.md
@@ -833,10 +833,7 @@ hideDelay: {
 type: (StringConstructor | NumberConstructor)[];
 default: number;
 };
-sameWidth: {
-type: BooleanConstructor;
-default: boolean;
-};
+sameWidth: BooleanConstructor;
 }, () => (VNode<RendererNode, RendererElement, {
 [key: string]: any;
 }> | null)[], unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("update:show" | "click-outside")[], "update:show" | "click-outside", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<    {
@@ -867,10 +864,7 @@ hideDelay: {
 type: (StringConstructor | NumberConstructor)[];
 default: number;
 };
-sameWidth: {
-type: BooleanConstructor;
-default: boolean;
-};
+sameWidth: BooleanConstructor;
 }>> & {
 "onUpdate:show"?: ((...args: any[]) => any) | undefined;
 "onClick-outside"?: ((...args: any[]) => any) | undefined;

From 52ec5e7881b97b082e3103bb77d700b88af832d6 Mon Sep 17 00:00:00 2001
From: Stepan <kvantoreps@gmail.com>
Date: Tue, 17 Jan 2023 08:40:11 +0300
Subject: [PATCH 5/6] WDS-125 change changeset description

---
 .changeset/four-readers-battle.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.changeset/four-readers-battle.md b/.changeset/four-readers-battle.md
index 79c0d345..40de637d 100644
--- a/.changeset/four-readers-battle.md
+++ b/.changeset/four-readers-battle.md
@@ -1,5 +1,5 @@
 ---
-'@soramitsu-ui/ui': patch
+'@soramitsu-ui/ui': minor
 ---
 
-**fix**(`SSelect`): add option groups with headers and select all buttons
+**feat**(`SSelect`): add option groups with headers and select all buttons

From 1ba46d076672dbcbe714fca121c17c7fc6a3e1f2 Mon Sep 17 00:00:00 2001
From: Stepan <kvantoreps@gmail.com>
Date: Tue, 17 Jan 2023 11:01:42 +0300
Subject: [PATCH 6/6] WDS-125 fix select all button position

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

diff --git a/packages/ui/src/components/Select/SSelectDropdown.vue b/packages/ui/src/components/Select/SSelectDropdown.vue
index 26f62053..89d29e26 100644
--- a/packages/ui/src/components/Select/SSelectDropdown.vue
+++ b/packages/ui/src/components/Select/SSelectDropdown.vue
@@ -63,7 +63,7 @@ const ACTION_FONT = {
         </div>
         <button
           v-if="isActionButtonShown(!!optionGroup.selectAllBtn)"
-          class="s-select-dropdown__action cursor-pointer"
+          class="s-select-dropdown__action cursor-pointer ml-auto"
           :class="ACTION_FONT[api.size]"
           @click="api.toggleGroupSelection(optionGroup)"
         >