From 039a26a497bc0d617ae81be5eab4b744ee03227e Mon Sep 17 00:00:00 2001
From: TheGeniusOfEternity <max06safin@yandex.ru>
Date: Thu, 28 Nov 2024 23:52:25 +0300
Subject: [PATCH 1/5] feat: added dropdown component

Added Dropdown component implementation, but in component only one option is selectable. Also updated icons package version in package json's
---
 codex-ui/dev/pages/components/Select.vue      | 37 +++++++++
 codex-ui/package.json                         |  2 +-
 .../src/vue/components/dropdown/Dropdown.vue  | 81 +++++++++++++++++++
 codex-ui/src/vue/components/dropdown/index.ts |  3 +
 codex-ui/src/vue/index.ts                     |  1 +
 package.json                                  |  2 +-
 yarn.lock                                     | 12 +--
 7 files changed, 130 insertions(+), 8 deletions(-)
 create mode 100644 codex-ui/src/vue/components/dropdown/Dropdown.vue
 create mode 100644 codex-ui/src/vue/components/dropdown/index.ts

diff --git a/codex-ui/dev/pages/components/Select.vue b/codex-ui/dev/pages/components/Select.vue
index a4e2d880..1f39d15a 100644
--- a/codex-ui/dev/pages/components/Select.vue
+++ b/codex-ui/dev/pages/components/Select.vue
@@ -5,10 +5,47 @@
       Component of the form that allows you to select one or more options from the list
     </template>
   </PageHeader>
+  <Dropdown :items="dropdownItems" />
 </template>
 
 <script setup lang="ts">
 import PageHeader from '../../components/PageHeader.vue';
+import { ContextMenuItem, Dropdown } from '../../../src';
+
+const dropdownItems: ContextMenuItem[] = [
+  {
+    type: 'default',
+    title: 'Header',
+    // eslint-disable-next-line no-console
+    onActivate: console.log,
+  },
+  {
+    title: 'Header 1',
+    icon: 'H1',
+    // eslint-disable-next-line no-console
+    onActivate: console.log,
+  },
+  {
+    type: 'separator',
+  },
+  {
+    type: 'default',
+    title: 'Image',
+    icon: 'Picture',
+    // eslint-disable-next-line no-console
+    onActivate: console.log,
+  },
+  {
+    type: 'separator',
+  },
+  {
+    type: 'default',
+    title: 'Text',
+    icon: 'Text',
+    // eslint-disable-next-line no-console
+    onActivate: console.log,
+  },
+];
 </script>
 
 <style scoped>
diff --git a/codex-ui/package.json b/codex-ui/package.json
index cbfcaf26..6806039a 100644
--- a/codex-ui/package.json
+++ b/codex-ui/package.json
@@ -26,7 +26,7 @@
     }
   },
   "devDependencies": {
-    "@codexteam/icons": "^0.3.0",
+    "@codexteam/icons": "^0.3.3",
     "@editorjs/header": "^2.8.6",
     "@editorjs/nested-list": "^1.4.2",
     "@types/node": "^20.11.15",
diff --git a/codex-ui/src/vue/components/dropdown/Dropdown.vue b/codex-ui/src/vue/components/dropdown/Dropdown.vue
new file mode 100644
index 00000000..048ba908
--- /dev/null
+++ b/codex-ui/src/vue/components/dropdown/Dropdown.vue
@@ -0,0 +1,81 @@
+<template>
+  <div
+    ref="dropdown"
+    :class="$style['dropdown']"
+  >
+    <Button
+      :class="$style['dropdown__btn']"
+      :icon="activeItem.icon"
+      trailing-icon="BracketsVertical"
+      secondary
+      @click="togglePopover"
+    >
+      {{ activeItem.title }}
+    </Button>
+    <div :style="showPopover ? {'display' : 'block'} : {'display': 'none'}">
+      <ContextMenu
+        :items="items"
+        :show-search="false"
+      />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import type { ContextMenuItem as Item } from '../context-menu/ContextMenu.types';
+import { ContextMenu } from '../context-menu';
+import { onMounted, ref } from 'vue';
+import { Button } from '../button';
+
+const props = defineProps<{
+  items: Item[];
+}>();
+
+const items = props.items;
+const showPopover = ref(false);
+
+/* hide/show context menu */
+const togglePopover = () => {
+  showPopover.value = !showPopover.value;
+};
+
+/* Default item value for select on page load */
+const defaultValue: Item = {
+  title: 'Choose an option',
+  type: 'default',
+  onActivate: () => {},
+};
+const activeItem = ref(defaultValue);
+
+/* Main function to update selected item */
+const updateActiveItem = (item: Item) => {
+  if (item.type === 'default' || !item.type) {
+    activeItem.value = Object.create(item);
+    // eslint-disable-next-line no-console
+    activeItem.value.onActivate = console.log;
+    togglePopover();
+  }
+};
+
+onMounted(() => {
+  items.forEach((item) => {
+    if (item.type === 'default' || !item.type) {
+      item.onActivate = () => updateActiveItem(item);
+    }
+  });
+});
+
+</script>
+<style lang="postcss" module>
+.dropdown {
+  &__btn {
+    user-select: none;
+    background-color: var(--base--bg-secondary);
+    margin-bottom: var(--spacing-s);
+    padding-right: var(--spacing-s);
+  }
+  &__btn:hover {
+    background-color: var(--base--bg-secondary-hover);
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/codex-ui/src/vue/components/dropdown/index.ts b/codex-ui/src/vue/components/dropdown/index.ts
new file mode 100644
index 00000000..cfb6fcd0
--- /dev/null
+++ b/codex-ui/src/vue/components/dropdown/index.ts
@@ -0,0 +1,3 @@
+import Dropdown from './Dropdown.vue';
+
+export { Dropdown };
diff --git a/codex-ui/src/vue/index.ts b/codex-ui/src/vue/index.ts
index 419e0cd9..a2101953 100644
--- a/codex-ui/src/vue/index.ts
+++ b/codex-ui/src/vue/index.ts
@@ -18,3 +18,4 @@ export * from './components/theme-preview';
 export * from './components/popover';
 export * from './composables/useTheme';
 export * from './components/checkbox';
+export * from './components/dropdown';
diff --git a/package.json b/package.json
index 51577ebd..611d22ba 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "codex-ui"
   ],
   "dependencies": {
-    "@codexteam/icons": "^0.3.0",
+    "@codexteam/icons": "^0.3.3",
     "@hawk.so/javascript": "^3.0.2",
     "@vueuse/core": "^10.3.0",
     "codex-ui": "workspace:^",
diff --git a/yarn.lock b/yarn.lock
index ca4cfe29..fd801bfe 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -53,10 +53,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@codexteam/icons@npm:^0.3.0":
-  version: 0.3.0
-  resolution: "@codexteam/icons@npm:0.3.0"
-  checksum: 4949e753a9f8d0442c581512566167dddf7853fce0aa388ec9ddd9acc2aa3f081192d266c0eb1a2f78154492f376f7ce042f69ca45cad9a1f02583ab70e0000b
+"@codexteam/icons@npm:^0.3.3":
+  version: 0.3.3
+  resolution: "@codexteam/icons@npm:0.3.3"
+  checksum: aa3c2ea96122e981ab6a6544cfe88f2381da4ab56a09230b9123229d85e7f2134409a694e38efe31657d13265198e2391d23347d4be2b64a2bab85b223ef5d83
   languageName: node
   linkType: hard
 
@@ -2165,7 +2165,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "codex-ui@workspace:codex-ui"
   dependencies:
-    "@codexteam/icons": ^0.3.0
+    "@codexteam/icons": ^0.3.3
     "@editorjs/editorjs": 2.30.2
     "@editorjs/header": ^2.8.6
     "@editorjs/nested-list": ^1.4.2
@@ -4325,7 +4325,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "notes.web@workspace:."
   dependencies:
-    "@codexteam/icons": ^0.3.0
+    "@codexteam/icons": ^0.3.3
     "@eslint/eslintrc": ^3.1.0
     "@eslint/js": ^9.3.0
     "@hawk.so/javascript": ^3.0.2

From 8f3d2381ce53b20b9d7110bb6ded6bfe188c51cc Mon Sep 17 00:00:00 2001
From: TheGeniusOfEternity <max06safin@yandex.ru>
Date: Mon, 2 Dec 2024 18:17:34 +0300
Subject: [PATCH 2/5] fix: name refactor, popover integration

Changed Component's name from Select to Dropdown;
Converting options list into Popover component
---
 codex-ui/dev/Playground.vue                   |  6 ++--
 .../components/{Select.vue => Dropdown.vue}   |  4 +--
 codex-ui/dev/routes.ts                        |  6 ++--
 .../src/vue/components/dropdown/Dropdown.vue  | 35 ++++++++++++-------
 4 files changed, 30 insertions(+), 21 deletions(-)
 rename codex-ui/dev/pages/components/{Select.vue => Dropdown.vue} (95%)

diff --git a/codex-ui/dev/Playground.vue b/codex-ui/dev/Playground.vue
index 5c4d86d6..1bef9273 100644
--- a/codex-ui/dev/Playground.vue
+++ b/codex-ui/dev/Playground.vue
@@ -168,9 +168,9 @@ const pages = computed(() => [
         isActive: route.path === '/components/vertical-menu',
       },
       {
-        title: 'Select',
-        onActivate: () => router.push('/components/select'),
-        isActive: route.path === '/components/select',
+        title: 'Dropdown',
+        onActivate: () => router.push('/components/dropdown'),
+        isActive: route.path === '/components/dropdown',
       },
       {
         title: 'Card',
diff --git a/codex-ui/dev/pages/components/Select.vue b/codex-ui/dev/pages/components/Dropdown.vue
similarity index 95%
rename from codex-ui/dev/pages/components/Select.vue
rename to codex-ui/dev/pages/components/Dropdown.vue
index 1f39d15a..d35a4337 100644
--- a/codex-ui/dev/pages/components/Select.vue
+++ b/codex-ui/dev/pages/components/Dropdown.vue
@@ -1,8 +1,8 @@
 <template>
   <PageHeader>
-    Select
+    Dropdown
     <template #description>
-      Component of the form that allows you to select one or more options from the list
+      Component of the form that allows you to select one or more options from the list (currently one)
     </template>
   </PageHeader>
   <Dropdown :items="dropdownItems" />
diff --git a/codex-ui/dev/routes.ts b/codex-ui/dev/routes.ts
index 0ab61454..c3fc82a8 100644
--- a/codex-ui/dev/routes.ts
+++ b/codex-ui/dev/routes.ts
@@ -21,7 +21,7 @@ import ColorShemeIcons from './pages/components/ColorShemeIcons.vue';
 import Popover from './pages/components/Popover.vue';
 import Row from './pages/components/Row.vue';
 import Section from './pages/components/Section.vue';
-import Select from './pages/components/Select.vue';
+import Dropdown from './pages/components/Dropdown.vue';
 import Switch from './pages/components/Switch.vue';
 import Tabbar from './pages/components/Tabbar.vue';
 import VerticalMenu from './pages/components/VerticalMenu.vue';
@@ -86,8 +86,8 @@ const routes: RouteRecordRaw[] = [
     component: Section as Component,
   },
   {
-    path: '/components/select',
-    component: Select as Component,
+    path: '/components/dropdown',
+    component: Dropdown as Component,
   },
   {
     path: '/components/switch',
diff --git a/codex-ui/src/vue/components/dropdown/Dropdown.vue b/codex-ui/src/vue/components/dropdown/Dropdown.vue
index 048ba908..b9fa347a 100644
--- a/codex-ui/src/vue/components/dropdown/Dropdown.vue
+++ b/codex-ui/src/vue/components/dropdown/Dropdown.vue
@@ -8,35 +8,44 @@
       :icon="activeItem.icon"
       trailing-icon="BracketsVertical"
       secondary
-      @click="togglePopover"
+      @click="togglePopover($event.target, {vertically: 'below', horizontally: 'left'})"
     >
       {{ activeItem.title }}
     </Button>
-    <div :style="showPopover ? {'display' : 'block'} : {'display': 'none'}">
-      <ContextMenu
-        :items="items"
-        :show-search="false"
-      />
-    </div>
   </div>
 </template>
 <script setup lang="ts">
 import type { ContextMenuItem as Item } from '../context-menu/ContextMenu.types';
 import { ContextMenu } from '../context-menu';
 import { onMounted, ref } from 'vue';
+import { usePopover, PopoverShowParams } from '../popover';
 import { Button } from '../button';
 
 const props = defineProps<{
   items: Item[];
 }>();
 
+let isOpened = false;
 const items = props.items;
-const showPopover = ref(false);
+const { showPopover, hide } = usePopover();
 
-/* hide/show context menu */
-const togglePopover = () => {
-  showPopover.value = !showPopover.value;
-};
+function togglePopover(el: HTMLElement, align: PopoverShowParams['align']) {
+  if (!isOpened) {
+    showPopover({
+      targetEl: el,
+      with: {
+        component: ContextMenu,
+        props: {
+          items: items,
+        },
+      },
+      align,
+    });
+  } else {
+    hide();
+  }
+  isOpened = !isOpened;
+}
 
 /* Default item value for select on page load */
 const defaultValue: Item = {
@@ -52,7 +61,7 @@ const updateActiveItem = (item: Item) => {
     activeItem.value = Object.create(item);
     // eslint-disable-next-line no-console
     activeItem.value.onActivate = console.log;
-    togglePopover();
+    hide();
   }
 };
 

From 0ea8af5fa849daf8aa02cf01a54502f9fadba8d0 Mon Sep 17 00:00:00 2001
From: TheGeniusOfEternity <max06safin@yandex.ru>
Date: Tue, 3 Dec 2024 21:58:47 +0300
Subject: [PATCH 3/5] fix: remove redundant styles

---
 .../src/vue/components/dropdown/Dropdown.vue     | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/codex-ui/src/vue/components/dropdown/Dropdown.vue b/codex-ui/src/vue/components/dropdown/Dropdown.vue
index b9fa347a..e121f1ef 100644
--- a/codex-ui/src/vue/components/dropdown/Dropdown.vue
+++ b/codex-ui/src/vue/components/dropdown/Dropdown.vue
@@ -1,10 +1,8 @@
 <template>
   <div
     ref="dropdown"
-    :class="$style['dropdown']"
   >
     <Button
-      :class="$style['dropdown__btn']"
       :icon="activeItem.icon"
       trailing-icon="BracketsVertical"
       secondary
@@ -74,17 +72,3 @@ onMounted(() => {
 });
 
 </script>
-<style lang="postcss" module>
-.dropdown {
-  &__btn {
-    user-select: none;
-    background-color: var(--base--bg-secondary);
-    margin-bottom: var(--spacing-s);
-    padding-right: var(--spacing-s);
-  }
-  &__btn:hover {
-    background-color: var(--base--bg-secondary-hover);
-    cursor: pointer;
-  }
-}
-</style>

From ccc9dd9de4d3c59a43cf538b2d26a44ea55d76d2 Mon Sep 17 00:00:00 2001
From: TheGeniusOfEternity <max06safin@yandex.ru>
Date: Mon, 9 Dec 2024 23:20:27 +0300
Subject: [PATCH 4/5] fix: renaming and toggle imlementation

There was some mess with component's name, because Dropdown and Select lots in common, so now this is Select component

Also added ability to toggle select by clicking on selection button
---
 codex-ui/dev/Playground.vue                   |  6 +--
 .../components/{Dropdown.vue => Select.vue}   |  6 +--
 codex-ui/dev/routes.ts                        |  6 +--
 codex-ui/src/vue/components/dropdown/index.ts |  3 --
 .../Dropdown.vue => select/Select.vue}        | 51 ++++++++-----------
 codex-ui/src/vue/components/select/index.ts   |  3 ++
 codex-ui/src/vue/index.ts                     |  2 +-
 7 files changed, 33 insertions(+), 44 deletions(-)
 rename codex-ui/dev/pages/components/{Dropdown.vue => Select.vue} (86%)
 delete mode 100644 codex-ui/src/vue/components/dropdown/index.ts
 rename codex-ui/src/vue/components/{dropdown/Dropdown.vue => select/Select.vue} (57%)
 create mode 100644 codex-ui/src/vue/components/select/index.ts

diff --git a/codex-ui/dev/Playground.vue b/codex-ui/dev/Playground.vue
index 4aeb9424..a171bef5 100644
--- a/codex-ui/dev/Playground.vue
+++ b/codex-ui/dev/Playground.vue
@@ -170,9 +170,9 @@ const pages = computed(() => [
         isActive: route.path === '/components/vertical-menu',
       },
       {
-        title: 'Dropdown',
-        onActivate: () => router.push('/components/dropdown'),
-        isActive: route.path === '/components/dropdown',
+        title: 'Select',
+        onActivate: () => router.push('/components/select'),
+        isActive: route.path === '/components/select',
       },
       {
         title: 'Card',
diff --git a/codex-ui/dev/pages/components/Dropdown.vue b/codex-ui/dev/pages/components/Select.vue
similarity index 86%
rename from codex-ui/dev/pages/components/Dropdown.vue
rename to codex-ui/dev/pages/components/Select.vue
index d35a4337..1a4c976d 100644
--- a/codex-ui/dev/pages/components/Dropdown.vue
+++ b/codex-ui/dev/pages/components/Select.vue
@@ -5,14 +5,14 @@
       Component of the form that allows you to select one or more options from the list (currently one)
     </template>
   </PageHeader>
-  <Dropdown :items="dropdownItems" />
+  <Select :items="options" />
 </template>
 
 <script setup lang="ts">
 import PageHeader from '../../components/PageHeader.vue';
-import { ContextMenuItem, Dropdown } from '../../../src';
+import { ContextMenuItem, Select } from '../../../src';
 
-const dropdownItems: ContextMenuItem[] = [
+const options: ContextMenuItem[] = [
   {
     type: 'default',
     title: 'Header',
diff --git a/codex-ui/dev/routes.ts b/codex-ui/dev/routes.ts
index e24cd733..8334a2c2 100644
--- a/codex-ui/dev/routes.ts
+++ b/codex-ui/dev/routes.ts
@@ -21,7 +21,7 @@ import ColorShemeIcons from './pages/components/ColorShemeIcons.vue';
 import Popover from './pages/components/Popover.vue';
 import Row from './pages/components/Row.vue';
 import Section from './pages/components/Section.vue';
-import Dropdown from './pages/components/Dropdown.vue';
+import Select from './pages/components/Select.vue';
 import Switch from './pages/components/Switch.vue';
 import Tabbar from './pages/components/Tabbar.vue';
 import VerticalMenu from './pages/components/VerticalMenu.vue';
@@ -88,8 +88,8 @@ const routes: RouteRecordRaw[] = [
     component: Section as Component,
   },
   {
-    path: '/components/dropdown',
-    component: Dropdown as Component,
+    path: '/components/select',
+    component: Select as Component,
   },
   {
     path: '/components/switch',
diff --git a/codex-ui/src/vue/components/dropdown/index.ts b/codex-ui/src/vue/components/dropdown/index.ts
deleted file mode 100644
index cfb6fcd0..00000000
--- a/codex-ui/src/vue/components/dropdown/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Dropdown from './Dropdown.vue';
-
-export { Dropdown };
diff --git a/codex-ui/src/vue/components/dropdown/Dropdown.vue b/codex-ui/src/vue/components/select/Select.vue
similarity index 57%
rename from codex-ui/src/vue/components/dropdown/Dropdown.vue
rename to codex-ui/src/vue/components/select/Select.vue
index e121f1ef..f26eb6fd 100644
--- a/codex-ui/src/vue/components/dropdown/Dropdown.vue
+++ b/codex-ui/src/vue/components/select/Select.vue
@@ -1,16 +1,12 @@
 <template>
-  <div
-    ref="dropdown"
+  <Button
+    :icon="activeItem.icon"
+    trailing-icon="BracketsVertical"
+    secondary
+    @click="!isOpen ? togglePopover($event.currentTarget, {vertically: 'below', horizontally: 'left'}) : hide()"
   >
-    <Button
-      :icon="activeItem.icon"
-      trailing-icon="BracketsVertical"
-      secondary
-      @click="togglePopover($event.target, {vertically: 'below', horizontally: 'left'})"
-    >
-      {{ activeItem.title }}
-    </Button>
-  </div>
+    {{ activeItem.title }}
+  </Button>
 </template>
 <script setup lang="ts">
 import type { ContextMenuItem as Item } from '../context-menu/ContextMenu.types';
@@ -23,27 +19,21 @@ const props = defineProps<{
   items: Item[];
 }>();
 
-let isOpened = false;
 const items = props.items;
-const { showPopover, hide } = usePopover();
+const { showPopover, hide, isOpen } = usePopover();
 
-function togglePopover(el: HTMLElement, align: PopoverShowParams['align']) {
-  if (!isOpened) {
-    showPopover({
-      targetEl: el,
-      with: {
-        component: ContextMenu,
-        props: {
-          items: items,
-        },
+const togglePopover = (el: HTMLElement, align: PopoverShowParams['align']) => {
+  showPopover({
+    targetEl: el,
+    with: {
+      component: ContextMenu,
+      props: {
+        items: items,
       },
-      align,
-    });
-  } else {
-    hide();
-  }
-  isOpened = !isOpened;
-}
+    },
+    align,
+  });
+};
 
 /* Default item value for select on page load */
 const defaultValue: Item = {
@@ -57,8 +47,7 @@ const activeItem = ref(defaultValue);
 const updateActiveItem = (item: Item) => {
   if (item.type === 'default' || !item.type) {
     activeItem.value = Object.create(item);
-    // eslint-disable-next-line no-console
-    activeItem.value.onActivate = console.log;
+    activeItem.value.onActivate = () => {};
     hide();
   }
 };
diff --git a/codex-ui/src/vue/components/select/index.ts b/codex-ui/src/vue/components/select/index.ts
new file mode 100644
index 00000000..b596ba22
--- /dev/null
+++ b/codex-ui/src/vue/components/select/index.ts
@@ -0,0 +1,3 @@
+import Select from './Select.vue';
+
+export { Select };
diff --git a/codex-ui/src/vue/index.ts b/codex-ui/src/vue/index.ts
index dfaf8667..175aaa26 100644
--- a/codex-ui/src/vue/index.ts
+++ b/codex-ui/src/vue/index.ts
@@ -20,4 +20,4 @@ export * from './components/popup';
 export * from './components/confirm';
 export * from './composables/useTheme';
 export * from './components/checkbox';
-export * from './components/dropdown';
+export * from './components/select';

From 3115d0c33d302137bd2782e326d1b4189e15d67c Mon Sep 17 00:00:00 2001
From: TheGeniusOfEternity <max06safin@yandex.ru>
Date: Sat, 14 Dec 2024 13:03:22 +0300
Subject: [PATCH 5/5] fix: logic optimization, access improvements

Optimized and improved logic of Select Component;

Refactored classes in ContextMenuItem Component

Fixed not working onActive method by clicking on element's padding
---
 codex-ui/dev/pages/components/Select.vue      | 19 ++++----
 .../context-menu/ContextMenuItem.vue          | 20 ++++-----
 codex-ui/src/vue/components/select/Select.vue | 44 +++++++++----------
 3 files changed, 41 insertions(+), 42 deletions(-)

diff --git a/codex-ui/dev/pages/components/Select.vue b/codex-ui/dev/pages/components/Select.vue
index 1a4c976d..91c8070d 100644
--- a/codex-ui/dev/pages/components/Select.vue
+++ b/codex-ui/dev/pages/components/Select.vue
@@ -1,17 +1,24 @@
 <template>
   <PageHeader>
-    Dropdown
+    Select
     <template #description>
       Component of the form that allows you to select one or more options from the list (currently one)
     </template>
   </PageHeader>
-  <Select :items="options" />
+  <Select
+    :items="options"
+    :default-item="defaultItem"
+  />
 </template>
 
 <script setup lang="ts">
 import PageHeader from '../../components/PageHeader.vue';
-import { ContextMenuItem, Select } from '../../../src';
+import { ContextMenuItem, DefaultItem, Select } from '../../../src';
 
+const defaultItem: DefaultItem = {
+  title: 'Choose an option',
+  onActivate: () => {},
+};
 const options: ContextMenuItem[] = [
   {
     type: 'default',
@@ -25,9 +32,6 @@ const options: ContextMenuItem[] = [
     // eslint-disable-next-line no-console
     onActivate: console.log,
   },
-  {
-    type: 'separator',
-  },
   {
     type: 'default',
     title: 'Image',
@@ -35,9 +39,6 @@ const options: ContextMenuItem[] = [
     // eslint-disable-next-line no-console
     onActivate: console.log,
   },
-  {
-    type: 'separator',
-  },
   {
     type: 'default',
     title: 'Text',
diff --git a/codex-ui/src/vue/components/context-menu/ContextMenuItem.vue b/codex-ui/src/vue/components/context-menu/ContextMenuItem.vue
index 3507ebb1..f7a4eeee 100644
--- a/codex-ui/src/vue/components/context-menu/ContextMenuItem.vue
+++ b/codex-ui/src/vue/components/context-menu/ContextMenuItem.vue
@@ -1,12 +1,12 @@
 <template>
-  <div :class="$style['item']">
+  <div :class="$style['context-menu-item']">
     <div
       v-if="item.type === 'default' || !item.type"
-      :class="[$style['item__default']]"
+      :class="[$style['context-menu-item__default']]"
+      @click="item.onActivate"
     >
       <div
-        :class="$style['item__body']"
-        @click="item.onActivate"
+        :class="$style['context-menu-item__body']"
       >
         <Icon
           v-if="item.icon !== undefined"
@@ -19,14 +19,14 @@
     </div>
     <div
       v-if="item.type === 'separator'"
-      :class="$style['item__separator']"
+      :class="$style['context-menu-item__separator']"
     >
-      <div :class="$style['item__line']" />
+      <div :class="$style['context-menu-item__line']" />
     </div>
     <div
       v-if="item.type === 'message'"
-      :class="[$style['item__default'],
-               $style['item__default--no-hover']]"
+      :class="[$style['context-menu-item__default'],
+               $style['context-menu-item__default--no-hover']]"
     >
       {{ item.message }}
     </div>
@@ -46,7 +46,7 @@ defineProps<{
 </script>
 
 <style lang="postcss" module>
-.item {
+.context-menu-item {
   &__separator {
     padding: var(--spacing-very-x) var(--spacing-xxs);
   }
@@ -67,7 +67,7 @@ defineProps<{
     }
   }
 
-  .item__default:not(.item__default--no-hover):hover {
+  .context-menu-item__default:not(.context-menu-item__default--no-hover):hover {
     background-color: var(--base--bg-secondary-hover);
     cursor: pointer;
   }
diff --git a/codex-ui/src/vue/components/select/Select.vue b/codex-ui/src/vue/components/select/Select.vue
index f26eb6fd..905e930d 100644
--- a/codex-ui/src/vue/components/select/Select.vue
+++ b/codex-ui/src/vue/components/select/Select.vue
@@ -3,53 +3,51 @@
     :icon="activeItem.icon"
     trailing-icon="BracketsVertical"
     secondary
-    @click="!isOpen ? togglePopover($event.currentTarget, {vertically: 'below', horizontally: 'left'}) : hide()"
+    @click="togglePopover($event.currentTarget, {vertically: 'below', horizontally: 'left'})"
   >
     {{ activeItem.title }}
   </Button>
 </template>
 <script setup lang="ts">
-import type { ContextMenuItem as Item } from '../context-menu/ContextMenu.types';
+import type { ContextMenuItem as SelectItem, DefaultItem } from '../context-menu/ContextMenu.types';
 import { ContextMenu } from '../context-menu';
 import { onMounted, ref } from 'vue';
 import { usePopover, PopoverShowParams } from '../popover';
 import { Button } from '../button';
 
 const props = defineProps<{
-  items: Item[];
+  items: SelectItem[];
+  defaultItem: DefaultItem;
 }>();
 
 const items = props.items;
 const { showPopover, hide, isOpen } = usePopover();
 
 const togglePopover = (el: HTMLElement, align: PopoverShowParams['align']) => {
-  showPopover({
-    targetEl: el,
-    with: {
-      component: ContextMenu,
-      props: {
-        items: items,
+  if (!isOpen.value) {
+    showPopover({
+      targetEl: el,
+      with: {
+        component: ContextMenu,
+        props: {
+          items: items,
+        },
       },
-    },
-    align,
-  });
+      align,
+    });
+  } else {
+    hide();
+  }
 };
 
 /* Default item value for select on page load */
-const defaultValue: Item = {
-  title: 'Choose an option',
-  type: 'default',
-  onActivate: () => {},
-};
+const defaultValue: SelectItem = props.defaultItem;
 const activeItem = ref(defaultValue);
 
 /* Main function to update selected item */
-const updateActiveItem = (item: Item) => {
-  if (item.type === 'default' || !item.type) {
-    activeItem.value = Object.create(item);
-    activeItem.value.onActivate = () => {};
-    hide();
-  }
+const updateActiveItem = (item: DefaultItem) => {
+  activeItem.value = item;
+  hide();
 };
 
 onMounted(() => {