From 1022d02454040bf0fdde10044ffdbc8e535e9641 Mon Sep 17 00:00:00 2001
From: Vladislav Popov <papou@soramitsu.co.jp>
Date: Wed, 3 Jul 2024 16:26:31 +0300
Subject: [PATCH 01/20] fix(SDropdown): add expression

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

diff --git a/packages/ui/src/components/Select/SDropdown.vue b/packages/ui/src/components/Select/SDropdown.vue
index 9110b1da..b3057382 100644
--- a/packages/ui/src/components/Select/SDropdown.vue
+++ b/packages/ui/src/components/Select/SDropdown.vue
@@ -33,7 +33,7 @@ function isThereLabelSlot() {
 <template>
   <SSelectBase
     v-bind="{ ...$attrs, ...$props } as any"
-    same-width-popper
+    :same-width-popper="loading"
   >
     <template #control>
       <SSelectButton

From 8d0d2d667883d0836826ef318d878673ed16f09c Mon Sep 17 00:00:00 2001
From: Vladislav Popov <papou@soramitsu.co.jp>
Date: Wed, 10 Jul 2024 18:08:46 +0300
Subject: [PATCH 02/20] update changeset

---
 .changeset/brown-elephants-hunt.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/brown-elephants-hunt.md

diff --git a/.changeset/brown-elephants-hunt.md b/.changeset/brown-elephants-hunt.md
new file mode 100644
index 00000000..9942141d
--- /dev/null
+++ b/.changeset/brown-elephants-hunt.md
@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': patch
+---
+
+**fix**(`SDropdown`): add expression to display dropdown options correctly

From f2364669b3d7e438db5509a07e4891266b4b98ea Mon Sep 17 00:00:00 2001
From: Vladislav Popov <papou@soramitsu.co.jp>
Date: Wed, 10 Jul 2024 18:09:47 +0300
Subject: [PATCH 03/20] apply changeset

---
 .changeset/brown-elephants-hunt.md | 5 -----
 packages/ui/CHANGELOG.md           | 6 ++++++
 packages/ui/package.json           | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)
 delete mode 100644 .changeset/brown-elephants-hunt.md

diff --git a/.changeset/brown-elephants-hunt.md b/.changeset/brown-elephants-hunt.md
deleted file mode 100644
index 9942141d..00000000
--- a/.changeset/brown-elephants-hunt.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@soramitsu-ui/ui': patch
----
-
-**fix**(`SDropdown`): add expression to display dropdown options correctly
diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
index ac72b99e..40e10f6d 100644
--- a/packages/ui/CHANGELOG.md
+++ b/packages/ui/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @soramitsu-ui/ui
 
+## 0.13.11
+
+### Patch Changes
+
+- 8d0d2d66: **fix**(`SDropdown`): add expression to display dropdown options correctly
+
 ## 0.13.10
 
 ### Patch Changes
diff --git a/packages/ui/package.json b/packages/ui/package.json
index c04c4736..270a8c2a 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu-ui/ui",
-  "version": "0.13.10",
+  "version": "0.13.11",
   "main": "dist/lib.cjs",
   "module": "dist/lib.mjs",
   "types": "dist/lib.d.ts",

From cfe1d3ddd18a6c6ab1d2922ec2718edae9b307eb Mon Sep 17 00:00:00 2001
From: Vladislav Popov <papou@soramitsu.co.jp>
Date: Tue, 23 Jul 2024 20:20:55 +0300
Subject: [PATCH 04/20] feat(icons): add necessary icons

---
 packages/ui/src/components/icons/index.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/ui/src/components/icons/index.ts b/packages/ui/src/components/icons/index.ts
index a985bd0a..a8e76aa6 100644
--- a/packages/ui/src/components/icons/index.ts
+++ b/packages/ui/src/components/icons/index.ts
@@ -43,6 +43,8 @@ import IconChevronBottom16 from '@soramitsu-ui/icons/icomoon/chevron-bottom-16.s
 import IconBasicExternalLink24 from '@soramitsu-ui/icons/icomoon/basic-external-link-24.svg'
 
 import IconBasicSearch24 from '@soramitsu-ui/icons/icomoon/basic-search-24.svg'
+import IconQuestion from '@soramitsu-ui/icons/icomoon/notifications-question-circle-24.svg'
+import IconCopy from '@soramitsu-ui/icons/icomoon/basic-copy-24.svg'
 
 export {
   IconClose,
@@ -69,6 +71,8 @@ export {
   IconChevronsRight16,
   IconChevronsLeft16,
   IconBasicSearch24,
+  IconQuestion,
+  IconCopy,
 }
 
 export const STATUS_ICONS_MAP: { [K in Status]: Component } = {

From 60cacca41d8eb88528c6b2d6ba049d4f0d7f278d Mon Sep 17 00:00:00 2001
From: Vladislav Popov <papou@soramitsu.co.jp>
Date: Tue, 23 Jul 2024 20:25:57 +0300
Subject: [PATCH 05/20] feat(STextField): add validations list prop

---
 .../src/components/TextField/STextField.vue   | 83 +++++++++++++++++--
 packages/ui/src/components/TextField/types.ts | 12 +++
 .../stories/components/TextField.stories.ts   | 29 ++++++-
 3 files changed, 117 insertions(+), 7 deletions(-)
 create mode 100644 packages/ui/src/components/TextField/types.ts

diff --git a/packages/ui/src/components/TextField/STextField.vue b/packages/ui/src/components/TextField/STextField.vue
index ff58f6ed..137d89c4 100644
--- a/packages/ui/src/components/TextField/STextField.vue
+++ b/packages/ui/src/components/TextField/STextField.vue
@@ -1,4 +1,6 @@
 <script lang="ts">
+import type { ValidationsList } from '@/components/TextField/types'
+
 export default {
   inheritAttrs: false,
 }
@@ -6,6 +8,7 @@ export default {
 import type { StyleValue } from 'vue'
 import { Status } from '@/types'
 import type { MaybeElementRef } from '@vueuse/core'
+import { IconStatusSuccess16 } from '../icons'
 
 /**
  * warning: don't use it inside of `Props`. Vue compiler determines it
@@ -106,11 +109,16 @@ interface Props {
    * Manually activates filled state
    */
   filledState?: boolean
+  /**
+   * Display the list of rules
+   */
+  validationsList?: ValidationsList
 }
 </script>
 
 <script setup lang="ts">
 import { STATUS_ICONS_MAP_16, IconEye, IconEyeOff } from '../icons'
+import { computed } from 'vue'
 
 const props = withDefaults(defineProps<Props>(), {
   multiline: false,
@@ -136,6 +144,9 @@ const status = computed<null | TextFieldStatus>(() => {
   if (props.success) return Status.Success
   if (props.warning) return Status.Warning
   if (props.error) return Status.Error
+  if (props.validationsList?.errorOn && hasFirstBlurHappened.value && !isMatchingValidationsList.value)
+    return Status.Error
+  if (props.validationsList?.successOn && isMatchingValidationsList.value) return Status.Success
   return null
 })
 
@@ -179,7 +190,7 @@ function handleInputWrapperMouseDown(event: MouseEvent) {
 // MESSAGE
 
 const isMessageSlotDefined = () => !!slots.message
-const shouldRenderMessage = () => !!props.message || isMessageSlotDefined()
+const shouldRenderMessage = () => !!props.message || isMessageSlotDefined() || shouldShowValidationsList.value
 const messageIcon = computed(() => {
   if (status.value === null) return null
   return STATUS_ICONS_MAP_16[status.value]
@@ -237,6 +248,35 @@ const [forceRevealPassword, toggleForceReveal] = useToggle()
 const inputType = computed(() =>
   props.password && (!showEye.value || !forceRevealPassword.value) ? 'password' : 'text',
 )
+
+const isTouched = ref(false)
+const hasFirstBlurHappened = ref(false)
+
+function handleFocus() {
+  isFocused.value = true
+  isTouched.value = true
+}
+
+function handleBlur() {
+  isFocused.value = false
+  hasFirstBlurHappened.value = true
+}
+
+const validationsList = computed(() => {
+  if (!props.validationsList) return []
+
+  return props.validationsList.validations(model.value ?? '')
+})
+
+const isMatchingValidationsList = computed(() => validationsList.value.every((v) => v.rule))
+
+const shouldShowValidationsList = computed(
+  () =>
+    ((props.validationsList?.showOnFocusOnly && isFocused.value) || !props.validationsList?.showOnFocusOnly) &&
+    isTouched.value &&
+    props.validationsList &&
+    !isMatchingValidationsList.value,
+)
 </script>
 
 <template>
@@ -279,8 +319,8 @@ const inputType = computed(() =>
           :disabled="disabled"
           v-bind="inputAttrs()"
           @input="onInput"
-          @focus="isFocused = true"
-          @blur="isFocused = false"
+          @focus="handleFocus"
+          @blur="handleBlur"
         >
       </div>
 
@@ -320,11 +360,38 @@ const inputType = computed(() =>
       >
         <component
           :is="messageIcon"
-          v-if="messageIcon"
+          v-if="messageIcon && !props.validationsList"
           class="s-text-field__message-icon"
         />
 
-        <span>
+        <div v-if="props.validationsList">
+          <span>{{ props.validationsList.title }}</span>
+
+          <div
+            v-for="item in validationsList"
+            :key="item.message"
+          >
+            <div class="flex gap-4px">
+              <component
+                :is="IconStatusSuccess16"
+                v-if="item.rule"
+                class="flex self-center w-16px"
+              />
+              <div
+                v-else
+                class="w-16px"
+              >
+                -
+              </div>
+
+              <div :class="{ 's-text-field__message-requirement_matched': item.rule }">
+                {{ item.message }}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <span v-else>
           <slot name="message">{{ message }}</slot>
         </span>
       </div>
@@ -465,6 +532,12 @@ $theme-content-tertiary: theme.token-as-var('sys.color.content-tertiary');
         opacity: 0;
       }
     }
+
+    &-requirement {
+      &_matched {
+        color: theme.token-as-var('sys.color.status.success');
+      }
+    }
   }
 
   &__eye {
diff --git a/packages/ui/src/components/TextField/types.ts b/packages/ui/src/components/TextField/types.ts
new file mode 100644
index 00000000..e205313e
--- /dev/null
+++ b/packages/ui/src/components/TextField/types.ts
@@ -0,0 +1,12 @@
+export interface ValidationEntity {
+  rule: boolean
+  message: string
+}
+
+export interface ValidationsList {
+  validations: (value: string) => ValidationEntity[]
+  title: string
+  errorOn?: boolean
+  successOn?: boolean
+  showOnFocusOnly?: boolean
+}
diff --git a/packages/ui/stories/components/TextField.stories.ts b/packages/ui/stories/components/TextField.stories.ts
index 00b4d347..c2936d4b 100644
--- a/packages/ui/stories/components/TextField.stories.ts
+++ b/packages/ui/stories/components/TextField.stories.ts
@@ -1,6 +1,5 @@
 import { STextField, Status } from '@/lib'
-import IconQuestion from '@soramitsu-ui/icons/icomoon/notifications-question-circle-24.svg'
-import IconCopy from '@soramitsu-ui/icons/icomoon/basic-copy-24.svg'
+import { IconCopy, IconQuestion } from '@/components/icons'
 import type { Meta, StoryObj } from '@storybook/vue3'
 
 const meta = {
@@ -64,3 +63,29 @@ export const Default = {}
 
 export const OneIcon = { args: { oneIcon: true } } as Story
 export const TwoIcons = { args: { twoIcons: true } } as Story
+export const ValidationsList = {
+  args: {
+    validationsList: {
+      title: 'String must contain:',
+      validations: (value: string) => {
+        return [
+          {
+            rule: /[a-z]/.test(value),
+            message: 'At least 1 lowercase letter',
+          },
+          {
+            rule: /\d/.test(value),
+            message: 'At least 1 digit',
+          },
+          {
+            rule: /[!"#$%&'()*+,./:;<=>?@[\]^_`{|}~\\-]/.test(value),
+            message: 'At least 1 special character',
+          },
+        ]
+      },
+      showOnFocusOnly: true,
+      errorOn: true,
+      successOn: true,
+    },
+  },
+} as Story

From f84062c5dbfc5b6850c5005c7ccb3c5aea7689ba Mon Sep 17 00:00:00 2001
From: Vladislav Popov <papou@soramitsu.co.jp>
Date: Tue, 23 Jul 2024 20:27:24 +0300
Subject: [PATCH 06/20] feat(cypress): add STextField test

---
 .../cypress/component/STextField.spec.cy.ts   | 60 +++++++++++++++++++
 1 file changed, 60 insertions(+)

diff --git a/packages/ui/cypress/component/STextField.spec.cy.ts b/packages/ui/cypress/component/STextField.spec.cy.ts
index 08bfff22..fc72b6b0 100644
--- a/packages/ui/cypress/component/STextField.spec.cy.ts
+++ b/packages/ui/cypress/component/STextField.spec.cy.ts
@@ -347,3 +347,63 @@ describe('Passing extra attributes', () => {
     findInput().should('have.attr', 'data-count', 1)
   })
 })
+
+it('Validations list works', () => {
+  cy.mount({
+    setup() {
+      const model = ref('')
+
+      // since we don't change model value by using type() method we have to edit it manually
+      // because message slot relies on model.value correctness otherwise it's always empty
+      setTimeout(() => {
+        // matches some rules
+        model.value = 'a1'
+      }, 1000)
+
+      setTimeout(() => {
+        // matches every rule
+        model.value = 'a1!'
+      }, 2000)
+
+      return {
+        validationsList: {
+          title: 'String must contain:',
+          validations: (value: string) => {
+            return [
+              {
+                rule: /[a-z]/.test(value),
+                message: 'At least 1 lowercase letter',
+              },
+              {
+                rule: /\d/.test(value),
+                message: 'At least 1 digit',
+              },
+              {
+                rule: /[!"#$%&'()*+,./:;<=>?@[\]^_`{|}~\\-]/.test(value),
+                message: 'At least 1 special character',
+              },
+            ]
+          },
+          showOnFocusOnly: true,
+          errorOn: true,
+          successOn: true,
+        },
+        model,
+      }
+    },
+    template: `<STextField :model-value="model" :validations-list="validationsList" no-model-value-strict-sync/>`,
+  })
+
+  findMsg().should('not.exist')
+  findInput().focus()
+  findMsg().should('exist')
+  // first timeout
+  findInput().should('have.value', 'a1')
+  findInput().blur()
+  findMsg().should('not.exist')
+  findInput().focus()
+  findMsg().should('exist')
+  // second timeout
+  findInput().should('have.value', 'a1!')
+  findMsg().should('not.exist')
+})

From 0a615d5cabe6d0ae3c13b07a453b37b1c1d1e447 Mon Sep 17 00:00:00 2001
From: Vladislav Popov <papou@soramitsu.co.jp>
Date: Tue, 23 Jul 2024 20:44:02 +0300
Subject: [PATCH 07/20] update changeset

---
 .changeset/empty-numbers-eat.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/empty-numbers-eat.md

diff --git a/.changeset/empty-numbers-eat.md b/.changeset/empty-numbers-eat.md
new file mode 100644
index 00000000..52bdf2a2
--- /dev/null
+++ b/.changeset/empty-numbers-eat.md
@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': patch
+---
+
+**feat**(`STextField`): add validations list prop

From d39977c5da8f9ed34142156a7c838bc17846d812 Mon Sep 17 00:00:00 2001
From: Vladislav Popov <papou@soramitsu.co.jp>
Date: Tue, 23 Jul 2024 20:45:57 +0300
Subject: [PATCH 08/20] update api.md

---
 packages/ui/etc/api/ui.api.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ui/etc/api/ui.api.md b/packages/ui/etc/api/ui.api.md
index 6f65b65b..39257739 100644
--- a/packages/ui/etc/api/ui.api.md
+++ b/packages/ui/etc/api/ui.api.md
@@ -33,6 +33,7 @@ import type { TableColumnRowSelectableFunc as TableColumnRowSelectableFunc_2 } f
 import type { TableColumnSortBy as TableColumnSortBy_2 } from '@/components/Table/types';
 import type { TableColumnSortOrder as TableColumnSortOrder_2 } from '@/components/Table/types';
 import { UnwrapRef } from 'vue';
+import type { ValidationsList } from '@/components/TextField/types';
 import { VNodeProps } from 'vue';
 
 // @public (undocumented)

From 647f72d3f1f6ddb6607d9598bdd8475db0e11dd4 Mon Sep 17 00:00:00 2001
From: Vladislav Popov <papou@soramitsu.co.jp>
Date: Tue, 23 Jul 2024 20:46:43 +0300
Subject: [PATCH 09/20] apply changeset

---
 .changeset/empty-numbers-eat.md | 5 -----
 packages/ui/CHANGELOG.md        | 6 ++++++
 packages/ui/package.json        | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)
 delete mode 100644 .changeset/empty-numbers-eat.md

diff --git a/.changeset/empty-numbers-eat.md b/.changeset/empty-numbers-eat.md
deleted file mode 100644
index 52bdf2a2..00000000
--- a/.changeset/empty-numbers-eat.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@soramitsu-ui/ui': patch
----
-
-**feat**(`STextField`): add validations list prop
diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
index 40e10f6d..28b00e28 100644
--- a/packages/ui/CHANGELOG.md
+++ b/packages/ui/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @soramitsu-ui/ui
 
+## 0.13.12
+
+### Patch Changes
+
+- 0a615d5c: **feat**(`STextField`): add validations list prop
+
 ## 0.13.11
 
 ### Patch Changes
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 270a8c2a..2dc03454 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu-ui/ui",
-  "version": "0.13.11",
+  "version": "0.13.12",
   "main": "dist/lib.cjs",
   "module": "dist/lib.mjs",
   "types": "dist/lib.d.ts",

From 0fa8d836d7d6f8c42538d4ca3143e75ded368f1d Mon Sep 17 00:00:00 2001
From: Vladislav Popov <papou@soramitsu.co.jp>
Date: Mon, 29 Jul 2024 12:04:39 +0300
Subject: [PATCH 10/20] feat(STextField): simplify rules' correctness

---
 .../cypress/component/STextField.spec.cy.ts   | 44 ++++++++------
 .../src/components/TextField/STextField.vue   | 10 ++--
 packages/ui/src/components/TextField/types.ts |  2 +-
 .../stories/components/TextField.stories.ts   | 58 +++++++++++--------
 4 files changed, 63 insertions(+), 51 deletions(-)

diff --git a/packages/ui/cypress/component/STextField.spec.cy.ts b/packages/ui/cypress/component/STextField.spec.cy.ts
index fc72b6b0..fdfb23a3 100644
--- a/packages/ui/cypress/component/STextField.spec.cy.ts
+++ b/packages/ui/cypress/component/STextField.spec.cy.ts
@@ -365,29 +365,35 @@ it('Validations list works', () => {
         model.value = 'a1!'
       }, 2000)
 
-      return {
-        validationsList: {
-          title: 'String must contain:',
-          validations: (value: string) => {
-            return [
-              {
-                rule: /[a-z]/.test(value),
-                message: 'At least 1 lowercase letter',
-              },
-              {
-                rule: /\d/.test(value),
-                message: 'At least 1 digit',
-              },
-              {
-                rule: /[!"#$%&'()*+,./:;<=>?@[\]^_`{|}~\\-]/.test(value),
-                message: 'At least 1 special character',
-              },
-            ]
+      function validations(value: string) {
+        return [
+          {
+            rule: /[a-z]/.test(value),
+            message: 'At least 1 lowercase letter',
+          },
+          {
+            rule: /\d/.test(value),
+            message: 'At least 1 digit',
           },
+          {
+            rule: /[!"#$%&'()*+,./:;<=>?@[\]^_`{|}~\\-]/.test(value),
+            message: 'At least 1 special character',
+          },
+        ]
+      }
+
+      const validationsList = computed(() => {
+        return {
+          title: 'String must contain:',
+          validations: validations(model.value),
           showOnFocusOnly: true,
           errorOn: true,
           successOn: true,
-        },
+        }
+      })
+
+      return {
+        validationsList,
         model,
       }
     },
diff --git a/packages/ui/src/components/TextField/STextField.vue b/packages/ui/src/components/TextField/STextField.vue
index 137d89c4..e8f7f9bd 100644
--- a/packages/ui/src/components/TextField/STextField.vue
+++ b/packages/ui/src/components/TextField/STextField.vue
@@ -262,14 +262,12 @@ function handleBlur() {
   hasFirstBlurHappened.value = true
 }
 
-const validationsList = computed(() => {
-  if (!props.validationsList) return []
+const isMatchingValidationsList = computed(() => {
+  if (!props.validationsList) return false
 
-  return props.validationsList.validations(model.value ?? '')
+  return props.validationsList.validations.every((v) => v.rule)
 })
 
-const isMatchingValidationsList = computed(() => validationsList.value.every((v) => v.rule))
-
 const shouldShowValidationsList = computed(
   () =>
     ((props.validationsList?.showOnFocusOnly && isFocused.value) || !props.validationsList?.showOnFocusOnly) &&
@@ -368,7 +366,7 @@ const shouldShowValidationsList = computed(
           <span>{{ props.validationsList.title }}</span>
 
           <div
-            v-for="item in validationsList"
+            v-for="item in props.validationsList.validations"
             :key="item.message"
           >
             <div class="flex gap-4px">
diff --git a/packages/ui/src/components/TextField/types.ts b/packages/ui/src/components/TextField/types.ts
index e205313e..c6f83249 100644
--- a/packages/ui/src/components/TextField/types.ts
+++ b/packages/ui/src/components/TextField/types.ts
@@ -4,7 +4,7 @@ export interface ValidationEntity {
 }
 
 export interface ValidationsList {
-  validations: (value: string) => ValidationEntity[]
+  validations: ValidationEntity[]
   title: string
   errorOn?: boolean
   successOn?: boolean
diff --git a/packages/ui/stories/components/TextField.stories.ts b/packages/ui/stories/components/TextField.stories.ts
index c2936d4b..bce23538 100644
--- a/packages/ui/stories/components/TextField.stories.ts
+++ b/packages/ui/stories/components/TextField.stories.ts
@@ -5,14 +5,43 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 const meta = {
   component: defineComponent({
     components: { STextField, IconCopy, IconQuestion },
-    props: ['modelValue', 'oneIcon', 'twoIcons'],
+    props: ['modelValue', 'oneIcon', 'twoIcons', 'isValidationsList'],
     emits: ['update:modelValue'],
     setup(props, { emit }) {
       const model = useVModel(props, 'modelValue', emit, { passive: true })
-      return { model }
+
+      function validations(value: string) {
+        return [
+          {
+            rule: /[a-z]/.test(value),
+            message: 'At least 1 lowercase letter',
+          },
+          {
+            rule: /\d/.test(value),
+            message: 'At least 1 digit',
+          },
+          {
+            rule: /[!"#$%&'()*+,./:;<=>?@[\]^_`{|}~\\-]/.test(value),
+            message: 'At least 1 special character',
+          },
+        ]
+      }
+      const validationsList = computed(() => {
+        if (!props.isValidationsList) return null
+
+        return {
+          validations: validations(model.value),
+          title: 'String must contain:',
+          showOnFocusOnly: true,
+          errorOn: true,
+          successOn: true,
+        }
+      })
+
+      return { model, validationsList }
     },
     template: `
-      <STextField v-model="model" v-bind="$attrs">
+      <STextField v-model="model" v-bind="$attrs" :validations-list="validationsList">
         <template #append v-if="twoIcons || oneIcon">
           <IconCopy/>
           <IconQuestion v-if="twoIcons" />
@@ -65,27 +94,6 @@ export const OneIcon = { args: { oneIcon: true } } as Story
 export const TwoIcons = { args: { twoIcons: true } } as Story
 export const ValidationsList = {
   args: {
-    validationsList: {
-      title: 'String must contain:',
-      validations: (value: string) => {
-        return [
-          {
-            rule: /[a-z]/.test(value),
-            message: 'At least 1 lowercase letter',
-          },
-          {
-            rule: /\d/.test(value),
-            message: 'At least 1 digit',
-          },
-          {
-            rule: /[!"#$%&'()*+,./:;<=>?@[\]^_`{|}~\\-]/.test(value),
-            message: 'At least 1 special character',
-          },
-        ]
-      },
-      showOnFocusOnly: true,
-      errorOn: true,
-      successOn: true,
-    },
+    isValidationsList: true,
   },
 } as Story

From 7f96d85a72ecfa761d6781e68eb0b4e3b966bb9e Mon Sep 17 00:00:00 2001
From: Vladislav Popov <papou@soramitsu.co.jp>
Date: Tue, 30 Jul 2024 15:37:34 +0300
Subject: [PATCH 11/20] feat(STextField): edit ValidationsList type

---
 packages/ui/src/components/TextField/STextField.vue | 10 ++++------
 packages/ui/src/components/TextField/types.ts       |  8 +++-----
 packages/ui/stories/components/TextField.stories.ts |  4 +---
 3 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/packages/ui/src/components/TextField/STextField.vue b/packages/ui/src/components/TextField/STextField.vue
index e8f7f9bd..6426b454 100644
--- a/packages/ui/src/components/TextField/STextField.vue
+++ b/packages/ui/src/components/TextField/STextField.vue
@@ -144,9 +144,7 @@ const status = computed<null | TextFieldStatus>(() => {
   if (props.success) return Status.Success
   if (props.warning) return Status.Warning
   if (props.error) return Status.Error
-  if (props.validationsList?.errorOn && hasFirstBlurHappened.value && !isMatchingValidationsList.value)
-    return Status.Error
-  if (props.validationsList?.successOn && isMatchingValidationsList.value) return Status.Success
+
   return null
 })
 
@@ -265,7 +263,7 @@ function handleBlur() {
 const isMatchingValidationsList = computed(() => {
   if (!props.validationsList) return false
 
-  return props.validationsList.validations.every((v) => v.rule)
+  return props.validationsList.validations.every((v) => v.isMatching)
 })
 
 const shouldShowValidationsList = computed(
@@ -372,7 +370,7 @@ const shouldShowValidationsList = computed(
             <div class="flex gap-4px">
               <component
                 :is="IconStatusSuccess16"
-                v-if="item.rule"
+                v-if="item.isMatching"
                 class="flex self-center w-16px"
               />
               <div
@@ -382,7 +380,7 @@ const shouldShowValidationsList = computed(
                 -
               </div>
 
-              <div :class="{ 's-text-field__message-requirement_matched': item.rule }">
+              <div :class="{ 's-text-field__message-requirement_matched': item.isMatching }">
                 {{ item.message }}
               </div>
             </div>
diff --git a/packages/ui/src/components/TextField/types.ts b/packages/ui/src/components/TextField/types.ts
index c6f83249..e5adba33 100644
--- a/packages/ui/src/components/TextField/types.ts
+++ b/packages/ui/src/components/TextField/types.ts
@@ -1,12 +1,10 @@
-export interface ValidationEntity {
-  rule: boolean
+export interface ValidationResultEntity {
+  isMatching: boolean
   message: string
 }
 
 export interface ValidationsList {
-  validations: ValidationEntity[]
+  validations: ValidationResultEntity[]
   title: string
-  errorOn?: boolean
-  successOn?: boolean
   showOnFocusOnly?: boolean
 }
diff --git a/packages/ui/stories/components/TextField.stories.ts b/packages/ui/stories/components/TextField.stories.ts
index bce23538..cd6a9da9 100644
--- a/packages/ui/stories/components/TextField.stories.ts
+++ b/packages/ui/stories/components/TextField.stories.ts
@@ -30,11 +30,9 @@ const meta = {
         if (!props.isValidationsList) return null
 
         return {
-          validations: validations(model.value),
+          validations: validations(model.value).map((v) => ({ isMatching: v.rule, ...v })),
           title: 'String must contain:',
           showOnFocusOnly: true,
-          errorOn: true,
-          successOn: true,
         }
       })
 

From 6ccfabffcf849cce6c4ac1e44aa7cbf3f5a5c162 Mon Sep 17 00:00:00 2001
From: Vladislav Popov <papou@soramitsu.co.jp>
Date: Tue, 30 Jul 2024 15:44:36 +0300
Subject: [PATCH 12/20] feat(STextField.spec.cy): update test

---
 packages/ui/cypress/component/STextField.spec.cy.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/ui/cypress/component/STextField.spec.cy.ts b/packages/ui/cypress/component/STextField.spec.cy.ts
index fdfb23a3..f686cfe2 100644
--- a/packages/ui/cypress/component/STextField.spec.cy.ts
+++ b/packages/ui/cypress/component/STextField.spec.cy.ts
@@ -385,10 +385,8 @@ it('Validations list works', () => {
       const validationsList = computed(() => {
         return {
           title: 'String must contain:',
-          validations: validations(model.value),
+          validations: validations(model.value).map((v) => ({ isMatching: v.rule, ...v })),
           showOnFocusOnly: true,
-          errorOn: true,
-          successOn: true,
         }
       })
 

From ed20a45b4a5511a4d0870df147dab75644abb7e3 Mon Sep 17 00:00:00 2001
From: Vladislav Popov <papou@soramitsu.co.jp>
Date: Wed, 31 Jul 2024 14:41:56 +0300
Subject: [PATCH 13/20] fix(STextField): remove unused var and simplify
 computation

---
 .../ui/src/components/TextField/STextField.vue  | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/packages/ui/src/components/TextField/STextField.vue b/packages/ui/src/components/TextField/STextField.vue
index 6426b454..0d91a675 100644
--- a/packages/ui/src/components/TextField/STextField.vue
+++ b/packages/ui/src/components/TextField/STextField.vue
@@ -8,7 +8,6 @@ export default {
 import type { StyleValue } from 'vue'
 import { Status } from '@/types'
 import type { MaybeElementRef } from '@vueuse/core'
-import { IconStatusSuccess16 } from '../icons'
 
 /**
  * warning: don't use it inside of `Props`. Vue compiler determines it
@@ -119,6 +118,7 @@ interface Props {
 <script setup lang="ts">
 import { STATUS_ICONS_MAP_16, IconEye, IconEyeOff } from '../icons'
 import { computed } from 'vue'
+import { IconStatusSuccess16 } from '../icons'
 
 const props = withDefaults(defineProps<Props>(), {
   multiline: false,
@@ -248,18 +248,12 @@ const inputType = computed(() =>
 )
 
 const isTouched = ref(false)
-const hasFirstBlurHappened = ref(false)
 
 function handleFocus() {
   isFocused.value = true
   isTouched.value = true
 }
 
-function handleBlur() {
-  isFocused.value = false
-  hasFirstBlurHappened.value = true
-}
-
 const isMatchingValidationsList = computed(() => {
   if (!props.validationsList) return false
 
@@ -268,9 +262,9 @@ const isMatchingValidationsList = computed(() => {
 
 const shouldShowValidationsList = computed(
   () =>
-    ((props.validationsList?.showOnFocusOnly && isFocused.value) || !props.validationsList?.showOnFocusOnly) &&
-    isTouched.value &&
     props.validationsList &&
+    (!props.validationsList.showOnFocusOnly || isFocused.value) &&
+    isTouched.value &&
     !isMatchingValidationsList.value,
 )
 </script>
@@ -316,7 +310,7 @@ const shouldShowValidationsList = computed(
           v-bind="inputAttrs()"
           @input="onInput"
           @focus="handleFocus"
-          @blur="handleBlur"
+          @blur="isFocused = false"
         >
       </div>
 
@@ -368,8 +362,7 @@ const shouldShowValidationsList = computed(
             :key="item.message"
           >
             <div class="flex gap-4px">
-              <component
-                :is="IconStatusSuccess16"
+              <IconStatusSuccess16
                 v-if="item.isMatching"
                 class="flex self-center w-16px"
               />

From 7c9165c54ac6ade0af6b38da831398ce43221b7a Mon Sep 17 00:00:00 2001
From: Vladislav Popov <papou@soramitsu.co.jp>
Date: Wed, 31 Jul 2024 15:04:16 +0300
Subject: [PATCH 14/20] feat(components): use define options instead

---
 .../Popover/SPopoverWrappedTransition.vue         |  8 ++------
 .../ui/src/components/TextField/STextField.vue    | 15 ++++-----------
 packages/ui/src/components/Tooltip/STooltip.vue   |  8 ++------
 .../Transitions/SCollapseTransition.vue           |  6 ++----
 4 files changed, 10 insertions(+), 27 deletions(-)

diff --git a/packages/ui/src/components/Popover/SPopoverWrappedTransition.vue b/packages/ui/src/components/Popover/SPopoverWrappedTransition.vue
index af091cd4..86d44d0b 100644
--- a/packages/ui/src/components/Popover/SPopoverWrappedTransition.vue
+++ b/packages/ui/src/components/Popover/SPopoverWrappedTransition.vue
@@ -1,14 +1,10 @@
-<script lang="ts">
-export default {
-  inheritAttrs: false,
-}
-</script>
-
 <script setup lang="ts">
 import { mergeProps } from 'vue'
 import { useWrappedTransitionVisibility } from './util'
 import { usePopoverApi } from './api'
 
+defineOptions({ inheritAttrs: false })
+
 const props = defineProps({
   eager: Boolean,
   wrapperAttrs: {
diff --git a/packages/ui/src/components/TextField/STextField.vue b/packages/ui/src/components/TextField/STextField.vue
index 0d91a675..10f6c116 100644
--- a/packages/ui/src/components/TextField/STextField.vue
+++ b/packages/ui/src/components/TextField/STextField.vue
@@ -1,10 +1,7 @@
-<script lang="ts">
+<script setup lang="ts">
 import type { ValidationsList } from '@/components/TextField/types'
-
-export default {
-  inheritAttrs: false,
-}
-
+import { STATUS_ICONS_MAP_16, IconEye, IconEyeOff, IconStatusSuccess16 } from '../icons'
+import { computed } from 'vue'
 import type { StyleValue } from 'vue'
 import { Status } from '@/types'
 import type { MaybeElementRef } from '@vueuse/core'
@@ -113,12 +110,8 @@ interface Props {
    */
   validationsList?: ValidationsList
 }
-</script>
 
-<script setup lang="ts">
-import { STATUS_ICONS_MAP_16, IconEye, IconEyeOff } from '../icons'
-import { computed } from 'vue'
-import { IconStatusSuccess16 } from '../icons'
+defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(defineProps<Props>(), {
   multiline: false,
diff --git a/packages/ui/src/components/Tooltip/STooltip.vue b/packages/ui/src/components/Tooltip/STooltip.vue
index c214fa5e..10f5a2ba 100644
--- a/packages/ui/src/components/Tooltip/STooltip.vue
+++ b/packages/ui/src/components/Tooltip/STooltip.vue
@@ -1,14 +1,10 @@
-<script lang="ts">
-export default {
-  inheritAttrs: false,
-}
-</script>
-
 <script setup lang="ts">
 import { SPopover, SPopoverWrappedTransition } from '@/components/Popover'
 import { SButton } from '@/components/Button'
 import type { BasePlacement } from '@popperjs/core'
 
+defineOptions({ inheritAttrs: false })
+
 const props = withDefaults(
   defineProps<{
     wrapperTag?: string | object
diff --git a/packages/ui/src/components/Transitions/SCollapseTransition.vue b/packages/ui/src/components/Transitions/SCollapseTransition.vue
index a1cc49ef..642d2185 100644
--- a/packages/ui/src/components/Transitions/SCollapseTransition.vue
+++ b/packages/ui/src/components/Transitions/SCollapseTransition.vue
@@ -1,8 +1,6 @@
-<script lang="ts">
-export default { name: 'SCollapseTransition' }
-</script>
-
 <script setup lang="ts">
+defineOptions({ name: 'SCollapseTransition' })
+
 const props = withDefaults(
   defineProps<{
     duration?: string

From bf5162b3348ec20aefafebffc2ff5a31b4ad2c05 Mon Sep 17 00:00:00 2001
From: Vladislav Popov <papou@soramitsu.co.jp>
Date: Wed, 31 Jul 2024 21:02:43 +0300
Subject: [PATCH 15/20] feat(SSelectDropdown): add prop

---
 packages/ui/src/components/Select/SDropdown.vue  |  1 +
 packages/ui/src/components/Select/SSelect.vue    |  1 +
 .../ui/src/components/Select/SSelectBase.vue     |  7 +++----
 .../ui/src/components/Select/SSelectDropdown.vue | 16 ++++++++++++++--
 packages/ui/src/components/Select/api.ts         |  1 +
 packages/ui/stories/components/select/common.ts  |  1 +
 6 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/packages/ui/src/components/Select/SDropdown.vue b/packages/ui/src/components/Select/SDropdown.vue
index b3057382..2d25ec45 100644
--- a/packages/ui/src/components/Select/SDropdown.vue
+++ b/packages/ui/src/components/Select/SDropdown.vue
@@ -19,6 +19,7 @@ const props = defineProps<{
   dropdownSearch?: boolean
   remoteSearch?: boolean
   maxShownOptions?: string | number | undefined
+  mandatory?: 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 ed65b154..77110e21 100644
--- a/packages/ui/src/components/Select/SSelect.vue
+++ b/packages/ui/src/components/Select/SSelect.vue
@@ -19,6 +19,7 @@ const props = defineProps<{
   dropdownSearch?: boolean
   remoteSearch?: boolean
   maxShownOptions?: string | number | undefined
+  mandatory?: boolean
 }>()
 
 const defaultOptionType = computed(() => (props.multiple ? SelectOptionType.Checkbox : SelectOptionType.Radio))
diff --git a/packages/ui/src/components/Select/SSelectBase.vue b/packages/ui/src/components/Select/SSelectBase.vue
index 19f96f7d..d623b37b 100644
--- a/packages/ui/src/components/Select/SSelectBase.vue
+++ b/packages/ui/src/components/Select/SSelectBase.vue
@@ -23,11 +23,8 @@ const props = withDefaults(
     label?: string | null
 
     /**
-     * TODO
-     *
      * - Doesn't allow to unselect value in single mode
      * - Doesn't allow to unselect last the only one picked value in multiple mode
-     * - Picks some value automatically (the first one) if `modelValue` is null and there are some available options
      */
     mandatory?: boolean
 
@@ -83,6 +80,7 @@ const props = withDefaults(
     triggerSearch: false,
     dropdownSearch: false,
     remoteSearch: false,
+    mandatory: false,
   },
 )
 
@@ -92,7 +90,7 @@ const emit = defineEmits<{
 }>()
 
 const model = useVModel(props, 'modelValue', emit)
-const { multiple, disabled, loading, options, size, label, noAutoClose, remoteSearch } = toRefs(props)
+const { multiple, disabled, loading, options, size, label, noAutoClose, remoteSearch, mandatory } = toRefs(props)
 
 const modeling = useSelectModel({
   model,
@@ -125,6 +123,7 @@ const api: SelectApi<any> = reactive({
   options,
   disabled,
   loading,
+  mandatory,
   label,
   isMenuOpened: showPopper,
   menuToggle: togglePopper,
diff --git a/packages/ui/src/components/Select/SSelectDropdown.vue b/packages/ui/src/components/Select/SSelectDropdown.vue
index 2043a460..87c2af4a 100644
--- a/packages/ui/src/components/Select/SSelectDropdown.vue
+++ b/packages/ui/src/components/Select/SSelectDropdown.vue
@@ -99,6 +99,18 @@ const dropdownHeight = computed(() => {
 
   return OPTION_SIZE[api.size] * Math.min(props.maxShownOptions, api.options.length) + 'px'
 })
+
+function handleOptionToggling(value: any) {
+  if (api.mandatory && api.selectedOptions.length === 1 && api.selectedOptions[0].value === value) return
+
+  api.toggleSelection(value)
+}
+
+function handleGroupSelectionToggling(values: SelectOptionGroup) {
+  if (api.mandatory && api.isGroupSelected(values) && api.selectedOptions.length === values.items.length) return
+
+  api.toggleGroupSelection(values)
+}
 </script>
 
 <template>
@@ -167,7 +179,7 @@ const dropdownHeight = computed(() => {
             class="s-select-dropdown__action cursor-pointer ml-auto"
             :class="MAIN_FONT[api.size]"
             tabindex="-1"
-            @click="api.toggleGroupSelection(optionGroup)"
+            @click="handleGroupSelectionToggling(optionGroup)"
           >
             {{ api.isGroupSelected(optionGroup) ? 'Deselect all' : 'Select all' }}
           </button>
@@ -179,7 +191,7 @@ const dropdownHeight = computed(() => {
           :type="itemType"
           :multiple="api.multiple"
           :selected="api.isValueSelected(opt.value)"
-          @toggle="api.toggleSelection(opt.value)"
+          @toggle="handleOptionToggling(opt.value)"
         >
           {{ opt.label }}
         </SSelectOption>
diff --git a/packages/ui/src/components/Select/api.ts b/packages/ui/src/components/Select/api.ts
index 5c139e8a..c34e2b82 100644
--- a/packages/ui/src/components/Select/api.ts
+++ b/packages/ui/src/components/Select/api.ts
@@ -8,6 +8,7 @@ export interface SelectApi<T> extends UnwrapRef<UseSelectModelReturn<T>> {
   readonly multiple: boolean
   readonly disabled: boolean
   readonly loading: boolean
+  readonly mandatory: boolean
   readonly label: string | null
   readonly size: SelectSize
   readonly noAutoClose: boolean
diff --git a/packages/ui/stories/components/select/common.ts b/packages/ui/stories/components/select/common.ts
index 1920e9a0..ee193ceb 100644
--- a/packages/ui/stories/components/select/common.ts
+++ b/packages/ui/stories/components/select/common.ts
@@ -69,6 +69,7 @@ export const COMMON_ARGS = {
   noAutoClose: false,
   dropdownSearch: false,
   maxShownOptions: 0,
+  mandatory: false,
 }
 
 export const COMMON_ARG_TYPES = {

From 9340c1af8fbf503b7a7567102bac20dfe2586523 Mon Sep 17 00:00:00 2001
From: Vladislav Popov <papou@soramitsu.co.jp>
Date: Wed, 31 Jul 2024 21:03:01 +0300
Subject: [PATCH 16/20] feat(Select.spec.cy): add tests

---
 .../ui/cypress/component/Select.spec.cy.ts    | 121 ++++++++++++++++++
 1 file changed, 121 insertions(+)

diff --git a/packages/ui/cypress/component/Select.spec.cy.ts b/packages/ui/cypress/component/Select.spec.cy.ts
index 25af419c..7eba67a6 100644
--- a/packages/ui/cypress/component/Select.spec.cy.ts
+++ b/packages/ui/cypress/component/Select.spec.cy.ts
@@ -244,6 +244,127 @@ it('SSelect - clicking options, checking auto-transformations', () => {
   assertValue('2')
 })
 
+it('SSelect simple options mandatory mode works', () => {
+  cy.mount({
+    setup() {
+      const model = ref(null)
+
+      const options = [
+        { label: 'Opt 1', value: 1 },
+        { label: 'Opt 2', value: 2 },
+        { label: 'Opt 3', value: 3 },
+      ]
+
+      const [multiple, toggleMultiple] = useToggle(false)
+
+      return { model, options, multiple, toggleMultiple }
+    },
+    template: `
+      <div>Value: {{ model }}</div>
+      <button @click="toggleMultiple()">multiple : {{multiple}}</button>
+      <SSelect
+        v-model="model"
+        v-bind="{ options, multiple }"
+        label="Dap"
+        mandatory
+      />
+    `,
+  })
+
+  function assertValue(val: string) {
+    cy.contains(`Value: ${val}`)
+  }
+
+  cy.contains('Dap').click()
+  cy.get('.s-select-option__content').eq(0).click()
+  assertValue('1')
+
+  cy.contains('Dap').click()
+  cy.get('.s-select-option__content').eq(0).click()
+  assertValue('1')
+
+  cy.get('button').contains('multiple').click()
+  cy.contains('Dap').click()
+  cy.get('.s-select-option__content').eq(1).click()
+  assertValue('[ 1, 2 ]')
+
+  cy.get('.s-select-option__content').eq(1).click()
+  cy.get('.s-select-option__content').eq(0).click()
+  assertValue('[ 1 ]')
+})
+
+it('SSelect group options mandatory mode works', () => {
+  cy.mount({
+    setup() {
+      const model = ref(null)
+
+      const options = [
+        {
+          header: '1st group',
+          selectAllBtn: true,
+          items: [
+            {
+              label: 'Germany',
+              value: 'du',
+            },
+            {
+              label: 'England',
+              value: 'en',
+            },
+            {
+              label: 'United Arab Emirates',
+              value: 'ae',
+            },
+          ],
+        },
+        {
+          header: '2nd group',
+          selectAllBtn: false,
+          items: [
+            {
+              label: 'Iceland',
+              value: 'is',
+            },
+            {
+              label: 'Japan',
+              value: 'jp',
+            },
+          ],
+        },
+      ]
+
+      return { model, options }
+    },
+    template: `
+      <div>Value: {{ model }}</div>
+      <SSelect
+        v-model="model"
+        v-bind="{ options }"
+        label="Dap"
+        mandatory
+        multiple
+      />
+    `,
+  })
+
+  function assertValue(val: string) {
+    cy.contains(`Value: ${val}`)
+  }
+
+  cy.contains('Dap').click()
+
+  cy.get('.s-select-dropdown__action').click()
+  assertValue(`[ "du", "en", "ae" ]`)
+  cy.get('.s-select-dropdown__action').click()
+  assertValue(`[ "du", "en", "ae" ]`)
+  cy.get('.s-select-option__content').eq(3).click()
+  assertValue(`[ "du", "en", "ae", "is" ]`)
+  cy.get('.s-select-dropdown__action').click()
+  assertValue(`[ "is" ]`)
+  cy.get('.s-select-option__content').eq(3).click()
+  assertValue(`[ "is" ]`)
+})
+
 it('SDropdown - model usage works', () => {
   cy.mount({
     setup() {

From b5029a5bbe8efd3f94728c2a0ad8f7a8f2338d3f Mon Sep 17 00:00:00 2001
From: Vladislav Popov <papou@soramitsu.co.jp>
Date: Wed, 31 Jul 2024 21:05:35 +0300
Subject: [PATCH 17/20] update changeset

---
 .changeset/clean-ravens-help.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/clean-ravens-help.md

diff --git a/.changeset/clean-ravens-help.md b/.changeset/clean-ravens-help.md
new file mode 100644
index 00000000..7e084bcc
--- /dev/null
+++ b/.changeset/clean-ravens-help.md
@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': patch
+---
+
+**feat**(`SSelectDropdown`): add mandatory prop

From 5f45e4bcd0a5548ff136077c7e8446433aab5982 Mon Sep 17 00:00:00 2001
From: Vladislav Popov <papou@soramitsu.co.jp>
Date: Wed, 31 Jul 2024 21:07:31 +0300
Subject: [PATCH 18/20] update api

---
 packages/ui/etc/api/ui.api.md | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/packages/ui/etc/api/ui.api.md b/packages/ui/etc/api/ui.api.md
index 39257739..5caef6ad 100644
--- a/packages/ui/etc/api/ui.api.md
+++ b/packages/ui/etc/api/ui.api.md
@@ -648,6 +648,7 @@ loading?: boolean | undefined;
 dropdownSearch?: boolean | undefined;
 remoteSearch?: boolean | undefined;
 maxShownOptions?: string | number | undefined;
+mandatory?: boolean | undefined;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<globalThis.ExtractPropTypes<__VLS_TypePropsToRuntimeProps_10<{
 modelValue?: any;
 options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
@@ -662,12 +663,14 @@ loading?: boolean | undefined;
 dropdownSearch?: boolean | undefined;
 remoteSearch?: boolean | undefined;
 maxShownOptions?: string | number | undefined;
+mandatory?: boolean | undefined;
 }>>>, {}, {}>, {
     label?(_: {
         options: UnwrapRef<SelectOption<any>[] | SelectOptionGroup<any>[]>;
         multiple: boolean;
         disabled: boolean;
         loading: boolean;
+        mandatory: boolean;
         label: string | null;
         size: SelectSize;
         noAutoClose: boolean;
@@ -703,6 +706,8 @@ export interface SelectApi<T> extends UnwrapRef<UseSelectModelReturn<T>> {
     readonly label: string | null;
     // (undocumented)
     readonly loading: boolean;
+    // (undocumented)
+    readonly mandatory: boolean;
     menuToggle: (value?: boolean) => void;
     // (undocumented)
     readonly multiple: boolean;
@@ -1284,6 +1289,7 @@ triggerSearch?: boolean | undefined;
 dropdownSearch?: boolean | undefined;
 remoteSearch?: boolean | undefined;
 maxShownOptions?: string | number | undefined;
+mandatory?: boolean | undefined;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<globalThis.ExtractPropTypes<__VLS_TypePropsToRuntimeProps_9<{
 modelValue?: any;
 options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
@@ -1298,12 +1304,14 @@ triggerSearch?: boolean | undefined;
 dropdownSearch?: boolean | undefined;
 remoteSearch?: boolean | undefined;
 maxShownOptions?: string | number | undefined;
+mandatory?: boolean | undefined;
 }>>>, {}, {}>, {
     label?(_: {
         options: UnwrapRef<SelectOption<any>[] | SelectOptionGroup<any>[]>;
         multiple: boolean;
         disabled: boolean;
         loading: boolean;
+        mandatory: boolean;
         label: string | null;
         size: SelectSize;
         noAutoClose: boolean;
@@ -1358,6 +1366,7 @@ sameWidthPopper: boolean;
 triggerSearch: boolean;
 dropdownSearch: boolean;
 remoteSearch: boolean;
+mandatory: boolean;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:modelValue": (value: any) => void;
 search: (value: string) => void;
@@ -1390,6 +1399,7 @@ sameWidthPopper: boolean;
 triggerSearch: boolean;
 dropdownSearch: boolean;
 remoteSearch: boolean;
+mandatory: boolean;
 }>>> & {
 "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 onSearch?: ((value: string) => any) | undefined;
@@ -1401,6 +1411,7 @@ size: SelectSize;
 disabled: boolean;
 loading: boolean;
 options: SelectOption<any>[] | SelectOptionGroup<any>[];
+mandatory: boolean;
 syncMenuAndInputWidths: boolean;
 noAutoClose: boolean;
 sameWidthPopper: boolean;
@@ -1437,6 +1448,7 @@ type: SelectButtonType;
         multiple: boolean;
         disabled: boolean;
         loading: boolean;
+        mandatory: boolean;
         label: string | null;
         size: SelectSize;
         noAutoClose: boolean;
@@ -1482,6 +1494,7 @@ search: boolean;
         multiple: boolean;
         disabled: boolean;
         loading: boolean;
+        mandatory: boolean;
         label: string | null;
         size: SelectSize;
         noAutoClose: boolean;

From 8999ddd0e956aabb50a8d9df3d95ac003d60b7a1 Mon Sep 17 00:00:00 2001
From: Vladislav Popov <papou@soramitsu.co.jp>
Date: Wed, 31 Jul 2024 21:08:30 +0300
Subject: [PATCH 19/20] apply changeset

---
 .changeset/clean-ravens-help.md | 5 -----
 packages/ui/CHANGELOG.md        | 6 ++++++
 packages/ui/package.json        | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)
 delete mode 100644 .changeset/clean-ravens-help.md

diff --git a/.changeset/clean-ravens-help.md b/.changeset/clean-ravens-help.md
deleted file mode 100644
index 7e084bcc..00000000
--- a/.changeset/clean-ravens-help.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@soramitsu-ui/ui': patch
----
-
-**feat**(`SSelectDropdown`): add mandatory prop
diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
index 28b00e28..b438c642 100644
--- a/packages/ui/CHANGELOG.md
+++ b/packages/ui/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @soramitsu-ui/ui
 
+## 0.13.13
+
+### Patch Changes
+
+- b5029a5b: **feat**(`SSelectDropdown`): add mandatory prop
+
 ## 0.13.12
 
 ### Patch Changes
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 2dc03454..212eb0ae 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu-ui/ui",
-  "version": "0.13.12",
+  "version": "0.13.13",
   "main": "dist/lib.cjs",
   "module": "dist/lib.mjs",
   "types": "dist/lib.d.ts",

From 45bd4641bb946407de279b4a68dcc0fbf7a017a7 Mon Sep 17 00:00:00 2001
From: Vladislav Popov <papou@soramitsu.co.jp>
Date: Thu, 1 Aug 2024 15:39:25 +0300
Subject: [PATCH 20/20] feat(use-model): move expressions on api level

---
 .../ui/src/components/Select/SSelectBase.vue     |  3 +++
 .../ui/src/components/Select/SSelectDropdown.vue | 16 ++--------------
 packages/ui/src/components/Select/use-model.ts   | 16 +++++++++++++++-
 3 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/packages/ui/src/components/Select/SSelectBase.vue b/packages/ui/src/components/Select/SSelectBase.vue
index d623b37b..acec8b9b 100644
--- a/packages/ui/src/components/Select/SSelectBase.vue
+++ b/packages/ui/src/components/Select/SSelectBase.vue
@@ -25,6 +25,8 @@ const props = withDefaults(
     /**
      * - Doesn't allow to unselect value in single mode
      * - Doesn't allow to unselect last the only one picked value in multiple mode
+     * TODO
+     * - Picks some value automatically (the first one) if `modelValue` is null and there are some available options
      */
     mandatory?: boolean
 
@@ -99,6 +101,7 @@ const modeling = useSelectModel({
   storeSelectedOptions: remoteSearch,
   singleModeAutoClose: not(noAutoClose),
   onAutoClose: () => togglePopper(false),
+  mandatory,
 })
 
 const [showPopper, togglePopper] = useToggle(false)
diff --git a/packages/ui/src/components/Select/SSelectDropdown.vue b/packages/ui/src/components/Select/SSelectDropdown.vue
index 87c2af4a..2043a460 100644
--- a/packages/ui/src/components/Select/SSelectDropdown.vue
+++ b/packages/ui/src/components/Select/SSelectDropdown.vue
@@ -99,18 +99,6 @@ const dropdownHeight = computed(() => {
 
   return OPTION_SIZE[api.size] * Math.min(props.maxShownOptions, api.options.length) + 'px'
 })
-
-function handleOptionToggling(value: any) {
-  if (api.mandatory && api.selectedOptions.length === 1 && api.selectedOptions[0].value === value) return
-
-  api.toggleSelection(value)
-}
-
-function handleGroupSelectionToggling(values: SelectOptionGroup) {
-  if (api.mandatory && api.isGroupSelected(values) && api.selectedOptions.length === values.items.length) return
-
-  api.toggleGroupSelection(values)
-}
 </script>
 
 <template>
@@ -179,7 +167,7 @@ function handleGroupSelectionToggling(values: SelectOptionGroup) {
             class="s-select-dropdown__action cursor-pointer ml-auto"
             :class="MAIN_FONT[api.size]"
             tabindex="-1"
-            @click="handleGroupSelectionToggling(optionGroup)"
+            @click="api.toggleGroupSelection(optionGroup)"
           >
             {{ api.isGroupSelected(optionGroup) ? 'Deselect all' : 'Select all' }}
           </button>
@@ -191,7 +179,7 @@ function handleGroupSelectionToggling(values: SelectOptionGroup) {
           :type="itemType"
           :multiple="api.multiple"
           :selected="api.isValueSelected(opt.value)"
-          @toggle="handleOptionToggling(opt.value)"
+          @toggle="api.toggleSelection(opt.value)"
         >
           {{ opt.label }}
         </SSelectOption>
diff --git a/packages/ui/src/components/Select/use-model.ts b/packages/ui/src/components/Select/use-model.ts
index 1d1941ae..a1c5c4ee 100644
--- a/packages/ui/src/components/Select/use-model.ts
+++ b/packages/ui/src/components/Select/use-model.ts
@@ -42,6 +42,7 @@ export interface UseSelectModelParams<T> {
    * Should be used to actually perform menu closing
    */
   onAutoClose: () => void
+  mandatory?: Ref<boolean>
 }
 
 export function useSelectModel<T = any>({
@@ -51,6 +52,7 @@ export function useSelectModel<T = any>({
   singleModeAutoClose,
   onAutoClose,
   storeSelectedOptions,
+  mandatory,
 }: UseSelectModelParams<T>): UseSelectModelReturn<T> {
   const triggerAutoClose = () => singleModeAutoClose.value && onAutoClose()
 
@@ -177,13 +179,25 @@ export function useSelectModel<T = any>({
   }
 
   function toggleSelection(value: T): void {
-    isValueSelected(value) ? unselect(value) : select(value)
+    if (!isValueSelected(value)) {
+      select(value)
+    } else {
+      if (
+        mandatory?.value &&
+        ((Array.isArray(model.value) && model.value.length === 1) || (model.value && !multiple.value))
+      )
+        return
+
+      unselect(value)
+    }
   }
 
   function toggleGroupSelection(optionGroup: SelectOptionGroup<T>): void {
     const optionGroupValues = optionGroup.items.map((x) => x.value)
 
     if (isGroupSelected(optionGroup)) {
+      if (mandatory?.value && Array.isArray(model.value) && model.value.length === optionGroup.items.length) return
+
       const optionGroupSet = new Set(optionGroupValues)
       const newModel = modelAsArray.value.filter((x) => !optionGroupSet.has(x))
       modelChangedManually = true