@onereach/ui-components 18.4.0 → 18.4.2

package/dist/bundled/utils/functions/dom.js

@@ -1,6 +1,6 @@
-import { g as get_1 } from '../../components/OrRadio-a9ee7b6a.js';
-import { _ as _baseGetTag, b as isObjectLike_1 } from '../../components/OrDateTimePicker-fcfb881b.js';
-import { j as _getPrototype } from '../../components/OrList-051f95d2.js';
+import { g as get_1 } from '../../components/OrRadio-30e01fc0.js';
+import { _ as _baseGetTag, b as isObjectLike_1 } from '../../components/OrDateTimePicker-d1f935ea.js';
+import { j as _getPrototype } from '../../components/OrList-93c6b262.js';
 
 var baseGetTag = _baseGetTag,
   getPrototype = _getPrototype,

package/dist/esm/components/index.js

@@ -103,7 +103,7 @@ export { OrRadioV3 } from './or-radio-v3/index.js';
 export { OrRangeSliderV3 } from './or-range-slider-v3/index.js';
 export { OrRatingV3, RatingVariant } from './or-rating-v3/index.js';
 export { OrResizeablePanelV3, ResizeablePanelPadding, ResizeablePanelPlacement } from './or-resizeable-panel-v3/index.js';
-export { Formats, OrRichTextEditorV3 } from './or-rich-text-editor-v3/index.js';
+export { Formats, OrRichTextEditorV3, RichTextEditorIcons, RichTextEditorTooltips } from './or-rich-text-editor-v3/index.js';
 export { OrRichTooltipV3, RichTooltipBehavior } from './or-rich-tooltip-v3/index.js';
 export { OrSearch } from './or-search/index.js';
 export { OrSearchV3 } from './or-search-v3/index.js';

package/dist/esm/components/or-menu-item-v3/OrMenuItem.vue.d.ts

@@ -1,4 +1,5 @@
 import { PropType } from 'vue';
+import { IconVariant } from '../or-icon-v3';
 declare const _default: import("vue").DefineComponent<{
     icon: {
         type: PropType<any>;
@@ -25,7 +26,15 @@ declare const _default: import("vue").DefineComponent<{
     root: import("vue").Ref<HTMLElement | undefined>;
     tooltip: import("vue").Ref<any>;
     rootStyles: import("vue").ComputedRef<string[]>;
-    isToolitpShown: import("vue").ComputedRef<boolean>;
+    iconStyles: import("vue").ComputedRef<string[]>;
+    isTooltipShown: import("vue").ComputedRef<boolean>;
+    iconProps: import("vue").ComputedRef<{
+        icon: string;
+        variant: IconVariant;
+    } | {
+        variant: IconVariant;
+        icon?: undefined;
+    }>;
     isRootVisible: import("vue").Ref<boolean>;
     stop: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "focus" | "blur" | "close")[], "click" | "focus" | "blur" | "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{

package/dist/esm/components/or-menu-item-v3/index.js

@@ -1,7 +1,7 @@
-import { defineComponent, ref, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, normalizeProps, mergeProps, createCommentVNode, createElementVNode, renderSlot, Fragment, createVNode, withModifiers } from 'vue';
+import { defineComponent, ref, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, mergeProps, createCommentVNode, createElementVNode, renderSlot, Fragment, createVNode, withModifiers } from 'vue';
 import { useIntersectionObserver } from '@vueuse/core';
 import { OrIconButtonV3 as script$2 } from '../or-icon-button-v3/index.js';
-import { OrIconV3 as script$1 } from '../or-icon-v3/index.js';
+import { OrIconV3 as script$1, IconVariant } from '../or-icon-v3/index.js';
 import { OrTooltipV3 as script$3 } from '../or-tooltip-v3/index.js';
 import '../../constants-57e8b5da.js';
 import '../../types/index.js';
@@ -24,6 +24,8 @@ import '../or-popover-v3/utils/index.js';
 import '../../isAncestor-905b8d1d.js';
 
 const MenuItem = [
+// Group
+'group',
 // Layout
 'layout-row',
 // Spacing
@@ -42,13 +44,19 @@ const MenuItem = [
 'hover:md:theme-foreground-default', 'dark:hover:md:theme-foreground-default-dark',
 // Theme (active)
 'active:theme-foreground-default', 'dark:active:theme-foreground-default-dark'];
+const MenuItemIcon = [
+// Iconography (hover)
+'group-hover:iconography-filled'];
+const MenuItemIconSelected = [
+// Iconography (selected)
+'selected:iconography-filled'];
 
 var script = defineComponent({
   name: 'OrMenuItem',
   components: {
     OrIcon: script$1,
     OrIconButton: script$2,
-    OrToolip: script$3
+    OrTooltip: script$3
   },
   props: {
     icon: {
@@ -74,7 +82,7 @@ var script = defineComponent({
   },
   emits: ['click', 'focus', 'blur', 'close'],
   expose: ['root'],
-  setup() {
+  setup(props) {
     // Refs
     const root = ref();
     const content = ref();
@@ -89,8 +97,18 @@ var script = defineComponent({
     });
     // Styles
     const rootStyles = computed(() => ['or-menu-item-v3', ...MenuItem]);
-    // Toolip display logic
-    const isToolitpShown = computed(() => {
+    const iconStyles = computed(() => [...MenuItemIcon, ...(props.selected ? MenuItemIconSelected : [])]);
+    const iconProps = computed(() => {
+      return typeof props.icon === 'string' ? {
+        icon: props.icon,
+        variant: IconVariant.Inherit
+      } : {
+        variant: IconVariant.Inherit,
+        ...props.icon
+      };
+    });
+    // Tooltip display logic
+    const isTooltipShown = computed(() => {
       if (isRootVisible.value) {
         return content.value !== undefined && content.value.clientWidth < content.value.scrollWidth;
       }
@@ -101,7 +119,9 @@ var script = defineComponent({
       root,
       tooltip,
       rootStyles,
-      isToolitpShown,
+      iconStyles,
+      isTooltipShown,
+      iconProps,
       isRootVisible,
       stop
     };
@@ -115,21 +135,20 @@ const _hoisted_2 = /*#__PURE__*/createElementVNode("div", {
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrIcon = resolveComponent("OrIcon");
   const _component_OrIconButton = resolveComponent("OrIconButton");
-  const _component_OrToolip = resolveComponent("OrToolip");
+  const _component_OrTooltip = resolveComponent("OrTooltip");
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles),
-    tabindex: !_ctx.disabled ? 0 : null,
+    tabindex: !_ctx.disabled ? 0 : undefined,
     selected: _ctx.selected,
     disabled: _ctx.disabled,
     onClick: _cache[3] || (_cache[3] = $event => _ctx.$emit('click', $event)),
     onFocus: _cache[4] || (_cache[4] = $event => _ctx.$emit('focus', $event)),
     onBlur: _cache[5] || (_cache[5] = $event => _ctx.$emit('blur', $event))
-  }, [_ctx.icon ? (openBlock(), createBlock(_component_OrIcon, normalizeProps(mergeProps({
-    key: 0
-  }, typeof _ctx.icon === 'string' ? {
-    icon: _ctx.icon
-  } : _ctx.icon)), null, 16 /* FULL_PROPS */)) : createCommentVNode("v-if", true), createElementVNode("div", {
+  }, [_ctx.icon && _ctx.iconProps.icon ? (openBlock(), createBlock(_component_OrIcon, mergeProps({
+    key: 0,
+    class: _ctx.iconStyles
+  }, _ctx.iconProps), null, 16 /* FULL_PROPS */, ["class"])) : createCommentVNode("v-if", true), createElementVNode("div", {
     ref: "content",
     class: normalizeClass(['truncate', 'w-full']),
     onMouseover: _cache[0] || (_cache[0] = $event => _ctx.tooltip && _ctx.tooltip.open()),
@@ -140,7 +159,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     icon: 'close',
     disabled: _ctx.disabled,
     onClick: _cache[2] || (_cache[2] = withModifiers($event => _ctx.$emit('close'), ["stop"]))
-  }, null, 8 /* PROPS */, ["disabled"])], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true), _ctx.isToolitpShown ? (openBlock(), createBlock(_component_OrToolip, {
+  }, null, 8 /* PROPS */, ["disabled"])], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true), _ctx.isTooltipShown ? (openBlock(), createBlock(_component_OrTooltip, {
     key: 2,
     ref: "tooltip",
     content: _ctx.tooltipText,

package/dist/esm/components/or-menu-item-v3/styles.d.ts

@@ -1 +1,3 @@
 export declare const MenuItem: string[];
+export declare const MenuItemIcon: string[];
+export declare const MenuItemIconSelected: string[];

package/dist/esm/components/or-rich-text-editor-v3/OrRichTextEditor.vue.d.ts

@@ -1,7 +1,7 @@
 import { Editor } from '@tiptap/core';
 import { Level } from '@tiptap/extension-heading';
 import { ComponentPublicInstance, PropType } from 'vue';
-import { Formats, Tools } from './props';
+import { Formats, Tools, RichTextEditorIcons, RichTextEditorTooltips } from './props';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         type: StringConstructor;
@@ -62,17 +62,13 @@ declare const _default: import("vue").DefineComponent<{
     textareaRef: import("vue").Ref<HTMLTextAreaElement | undefined>;
     moreRef: import("vue").Ref<any>;
     menuRef: import("vue").Ref<any>;
-    iconsEnum: import("vue").Ref<{
-        [key: string]: string;
-    }>;
     handleToolbarClick: (item: string, level?: number) => void;
     handleEditorClick: () => void;
     isActive: import("vue").Ref<{
         [key: string]: boolean;
     }>;
-    iconTooltipsEnum: import("vue").Ref<{
-        [key: string]: string;
-    }>;
+    getRichTextEditorIcon: import("vue").ComputedRef<(item: string) => RichTextEditorIcons>;
+    getRichTextEditorTooltipIcon: import("vue").ComputedRef<(item: string) => RichTextEditorTooltips>;
     getIndexOfHeading: import("vue").ComputedRef<number>;
     headingLevels: Level[];
     headingIcon: import("vue").ComputedRef<string>;

package/dist/esm/components/or-rich-text-editor-v3/index.js

@@ -11,7 +11,7 @@ import Underline from '@tiptap/extension-underline';
 import StarterKit from '@tiptap/starter-kit';
 import { useResizeObserver, useDebounceFn, onClickOutside } from '@vueuse/core';
 import { useFocusTrap } from '@vueuse/integrations/useFocusTrap';
-import { defineComponent, shallowRef, ref, computed, onMounted, onBeforeUnmount, watch, nextTick, resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, createElementVNode, Fragment, renderList, withDirectives, vShow, vModelText } from 'vue';
+import { defineComponent, shallowRef, ref, onMounted, onBeforeUnmount, computed, watch, nextTick, resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, createElementVNode, Fragment, renderList, withDirectives, vShow, vModelText } from 'vue';
 import '../../dom-11141778.js';
 import { i as isArray } from '../../isArray-135d4ff2.js';
 import { OrButtonV3 as script$1 } from '../or-button-v3/index.js';
@@ -74,6 +74,40 @@ var Formats;
   Formats["Markdown"] = "markdown";
   Formats["Markup"] = "markup";
 })(Formats || (Formats = {}));
+var RichTextEditorIcons;
+(function (RichTextEditorIcons) {
+  RichTextEditorIcons["bold"] = "format_bold";
+  RichTextEditorIcons["italic"] = "format_italic";
+  RichTextEditorIcons["underline"] = "format_underlined";
+  RichTextEditorIcons["strike"] = "format_strikethrough";
+  RichTextEditorIcons["bulletList"] = "format_list_bulleted";
+  RichTextEditorIcons["orderedList"] = "format_list_numbered";
+  RichTextEditorIcons["link"] = "link";
+  RichTextEditorIcons["highlight"] = "highlight";
+  RichTextEditorIcons["redo"] = "redo";
+  RichTextEditorIcons["undo"] = "undo";
+  RichTextEditorIcons["codeBlock"] = "code_blocks";
+  RichTextEditorIcons["blockquote"] = "format_quote";
+  RichTextEditorIcons["file"] = "attach_file";
+  RichTextEditorIcons["source"] = "source_notes";
+})(RichTextEditorIcons || (RichTextEditorIcons = {}));
+var RichTextEditorTooltips;
+(function (RichTextEditorTooltips) {
+  RichTextEditorTooltips["bold"] = "Bold";
+  RichTextEditorTooltips["italic"] = "Italic";
+  RichTextEditorTooltips["underline"] = "Underline";
+  RichTextEditorTooltips["strike"] = "Strike";
+  RichTextEditorTooltips["bulletList"] = "Bulleted List";
+  RichTextEditorTooltips["orderedList"] = "Numbered List";
+  RichTextEditorTooltips["link"] = "Link";
+  RichTextEditorTooltips["highlight"] = "Highlight";
+  RichTextEditorTooltips["redo"] = "Redo";
+  RichTextEditorTooltips["undo"] = "Undo";
+  RichTextEditorTooltips["codeBlock"] = "Code Block";
+  RichTextEditorTooltips["blockquote"] = "Quote";
+  RichTextEditorTooltips["file"] = "File";
+  RichTextEditorTooltips["source"] = "Source";
+})(RichTextEditorTooltips || (RichTextEditorTooltips = {}));
 
 const RichTextEditor = [
 // Layout
@@ -281,14 +315,10 @@ var script = defineComponent({
   expose: ['root', 'editor'],
   setup(props, context) {
     let editor = shallowRef();
+    const controlRef = ref();
+    const toolbarRef = ref();
     // Refs & Styles
     const root = ref();
-    const rootStyles = computed(() => ['or-rich-text-editor-v3', ...RichTextEditor]);
-    const toolbarRef = ref();
-    const toolbarStyles = computed(() => [...RichTextEditorToolbar]);
-    const toolbarGroupStyles = computed(() => [...RichTextEditorToolbarGroup]);
-    const controlRef = ref();
-    const controlStyles = computed(() => ['tiptap-editor-v3', ...RichTextEditorControl]);
     const textareaRef = ref();
     const containerRef = ref();
     const moreButtonRef = ref();
@@ -323,42 +353,9 @@ var script = defineComponent({
     const countOfNotVisibleTools = ref(0);
     const sourceValue = ref('');
     let trap = useFocusTrap(controlRef, {
-      immediate: true,
       fallbackFocus: '.container',
       allowOutsideClick: true
     });
-    const iconsEnum = ref({
-      bold: 'format_bold',
-      italic: 'format_italic',
-      underline: 'format_underlined',
-      strike: 'format_strikethrough',
-      bulletList: 'format_list_bulleted',
-      orderedList: 'format_list_numbered',
-      link: 'link',
-      highlight: 'highlight',
-      redo: 'redo',
-      undo: 'undo',
-      codeBlock: 'code_blocks',
-      blockquote: 'format_quote',
-      file: 'attach_file',
-      source: 'source_notes'
-    });
-    const iconTooltipsEnum = ref({
-      bold: 'Bold',
-      italic: 'Italic',
-      underline: 'Underline',
-      strike: 'Strike',
-      bulletList: 'Bulleted List',
-      orderedList: 'Numbered List',
-      link: 'Link',
-      highlight: 'Highlight',
-      redo: 'Redo',
-      undo: 'Undo',
-      codeBlock: 'Code Block',
-      blockquote: 'Quote',
-      file: 'File',
-      source: 'Source'
-    });
     useResizeObserver(root, useDebounceFn(entries => {
       var _a, _b;
       const entry = entries[0];
@@ -482,6 +479,12 @@ var script = defineComponent({
     const getIndexOfHeading = computed(() => {
       return props.toolbar.flat().indexOf('heading');
     });
+    const getRichTextEditorIcon = computed(() => item => {
+      return RichTextEditorIcons[item];
+    });
+    const getRichTextEditorTooltipIcon = computed(() => item => {
+      return RichTextEditorTooltips[item];
+    });
     const headingIcon = computed(() => {
       if (activeHeadingLevel.value && isActive.value.heading) {
         return `format_h${activeHeadingLevel.value}`;
@@ -652,6 +655,11 @@ var script = defineComponent({
       }
       editor === null || editor === void 0 ? void 0 : editor.setEditable(!disabled);
     });
+    // Styles
+    const rootStyles = computed(() => ['or-rich-text-editor-v3', ...RichTextEditor]);
+    const toolbarStyles = computed(() => [...RichTextEditorToolbar]);
+    const toolbarGroupStyles = computed(() => [...RichTextEditorToolbarGroup]);
+    const controlStyles = computed(() => ['tiptap-editor-v3', ...RichTextEditorControl]);
     return {
       root,
       rootStyles,
@@ -667,11 +675,11 @@ var script = defineComponent({
       textareaRef,
       moreRef,
       menuRef,
-      iconsEnum,
       handleToolbarClick,
       handleEditorClick,
       isActive,
-      iconTooltipsEnum,
+      getRichTextEditorIcon,
+      getRichTextEditorTooltipIcon,
       getIndexOfHeading,
       headingLevels,
       headingIcon,
@@ -774,11 +782,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         }, null, 8 /* PROPS */, ["icon", "tooltip", "selected", "disabled"])) : _ctx.isVisible(item) ? (openBlock(), createBlock(_component_OrIconButton, {
           key: 1,
           icon: {
-            icon: _ctx.iconsEnum[item],
+            icon: _ctx.getRichTextEditorIcon(item),
             variant: 'inherit'
           },
           tooltip: {
-            content: _ctx.iconTooltipsEnum[item],
+            content: _ctx.getRichTextEditorTooltipIcon(item),
             placement: 'top'
           },
           selected: _ctx.isActive[item],
@@ -828,11 +836,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       return openBlock(), createBlock(_component_OrIconButton, {
         key: item,
         icon: {
-          icon: _ctx.iconsEnum[item],
+          icon: _ctx.getRichTextEditorIcon(item),
           variant: 'inherit'
         },
         tooltip: {
-          content: _ctx.iconTooltipsEnum[item],
+          content: _ctx.getRichTextEditorTooltipIcon(item),
           placement: 'top'
         },
         selected: _ctx.isActive[item],
@@ -902,4 +910,4 @@ styleInject(css_248z);
 script.render = render;
 script.__file = "src/components/or-rich-text-editor-v3/OrRichTextEditor.vue";
 
-export { Formats, script as OrRichTextEditorV3 };
+export { Formats, script as OrRichTextEditorV3, RichTextEditorIcons, RichTextEditorTooltips };

package/dist/esm/components/or-rich-text-editor-v3/props.d.ts

@@ -3,3 +3,35 @@ export declare enum Formats {
     Markup = "markup"
 }
 export type Tools = string[][];
+export declare enum RichTextEditorIcons {
+    bold = "format_bold",
+    italic = "format_italic",
+    underline = "format_underlined",
+    strike = "format_strikethrough",
+    bulletList = "format_list_bulleted",
+    orderedList = "format_list_numbered",
+    link = "link",
+    highlight = "highlight",
+    redo = "redo",
+    undo = "undo",
+    codeBlock = "code_blocks",
+    blockquote = "format_quote",
+    file = "attach_file",
+    source = "source_notes"
+}
+export declare enum RichTextEditorTooltips {
+    bold = "Bold",
+    italic = "Italic",
+    underline = "Underline",
+    strike = "Strike",
+    bulletList = "Bulleted List",
+    orderedList = "Numbered List",
+    link = "Link",
+    highlight = "Highlight",
+    redo = "Redo",
+    undo = "Undo",
+    codeBlock = "Code Block",
+    blockquote = "Quote",
+    file = "File",
+    source = "Source"
+}

package/dist/esm/index.js

@@ -103,7 +103,7 @@ export { OrRadioV3 } from './components/or-radio-v3/index.js';
 export { OrRangeSliderV3 } from './components/or-range-slider-v3/index.js';
 export { OrRatingV3, RatingVariant } from './components/or-rating-v3/index.js';
 export { OrResizeablePanelV3, ResizeablePanelPadding, ResizeablePanelPlacement } from './components/or-resizeable-panel-v3/index.js';
-export { Formats, OrRichTextEditorV3 } from './components/or-rich-text-editor-v3/index.js';
+export { Formats, OrRichTextEditorV3, RichTextEditorIcons, RichTextEditorTooltips } from './components/or-rich-text-editor-v3/index.js';
 export { OrRichTooltipV3, RichTooltipBehavior } from './components/or-rich-tooltip-v3/index.js';
 export { OrSearch } from './components/or-search/index.js';
 export { OrSearchV3 } from './components/or-search-v3/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "18.4.0",
+  "version": "18.4.2",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v3",
   "sideEffects": false,
@@ -33,7 +33,7 @@
     "@codemirror/view": "^6",
     "@floating-ui/dom": "1.5.3",
     "@lezer/highlight": "*",
-    "@onereach/styles": "^18.4.0",
+    "@onereach/styles": "^18.4.2",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.0.3",
     "@tiptap/extension-blockquote": "2.0.3",
@@ -141,5 +141,5 @@
     },
     "./package.json": "./package.json"
   },
-  "gitHead": "2c41b88e586ea6469c9a1941bee011e0b2b134d4"
+  "gitHead": "c22551ce5da2acc781045646793561b99225f026"
 }

package/src/components/or-menu-item-v3/OrMenuItem.vue

@@ -2,15 +2,18 @@
   <div
     :ref="'root'"
     :class="rootStyles"
-    :tabindex="!disabled ? 0 : null"
+    :tabindex="!disabled ? 0 : undefined"
     :selected="selected"
     :disabled="disabled"
     @click="$emit('click', $event)"
     @focus="$emit('focus', $event)"
     @blur="$emit('blur', $event)"
   >
-    <template v-if="icon">
-      <OrIcon v-bind="typeof icon === 'string' ? { icon } : icon" />
+    <template v-if="icon && iconProps.icon">
+      <OrIcon
+        :class="iconStyles"
+        v-bind="iconProps"
+      />
     </template>
     <div
       ref="content"
@@ -30,8 +33,8 @@
         @click.stop="$emit('close')"
       />
     </template>
-    <OrToolip
-      v-if="isToolitpShown"
+    <OrTooltip
+      v-if="isTooltipShown"
       ref="tooltip"
       :content="tooltipText"
       :trigger="root"
@@ -44,9 +47,9 @@ import { computed, defineComponent, PropType, ref } from 'vue';
 import { useIntersectionObserver } from '@vueuse/core';
 
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
-import { OrIconV3 as OrIcon } from '../or-icon-v3';
-import { OrTooltipV3 as OrToolip } from '../or-tooltip-v3';
-import { MenuItem } from './styles';
+import { IconVariant, OrIconV3 as OrIcon } from '../or-icon-v3';
+import { OrTooltipV3 as OrTooltip } from '../or-tooltip-v3';
+import * as Styles from './styles';
 
 export default defineComponent({
   name: 'OrMenuItem',
@@ -54,7 +57,7 @@ export default defineComponent({
   components: {
     OrIcon,
     OrIconButton,
-    OrToolip,
+    OrTooltip,
   },
 
   props: {
@@ -96,11 +99,11 @@ export default defineComponent({
     'root',
   ],
 
-  setup() {
+  setup(props) {
     // Refs
     const root = ref<HTMLElement>();
     const content = ref<HTMLDivElement>();
-    const tooltip = ref<InstanceType<typeof OrToolip>>();
+    const tooltip = ref<InstanceType<typeof OrTooltip>>();
     const isRootVisible = ref(false);
     const { stop } = useIntersectionObserver(root, ([{ isIntersecting }]) => {
       isRootVisible.value = isIntersecting;
@@ -109,11 +112,28 @@ export default defineComponent({
     // Styles
     const rootStyles = computed(() => [
       'or-menu-item-v3',
-      ...MenuItem,
+      ...Styles.MenuItem,
+    ]);
+
+    const iconStyles = computed(() => [
+      ...Styles.MenuItemIcon,
+      ...props.selected ? Styles.MenuItemIconSelected : [],
     ]);
 
-    // Toolip display logic
-    const isToolitpShown = computed<boolean>(() => {
+    const iconProps = computed(() => {
+      return typeof props.icon === 'string'
+        ? {
+          icon: props.icon,
+          variant: IconVariant.Inherit,
+        }
+        : {
+          variant: IconVariant.Inherit,
+          ...(props.icon as object),
+        };
+    });
+
+    // Tooltip display logic
+    const isTooltipShown = computed<boolean>(() => {
       if (isRootVisible.value) {
         return content.value !== undefined && content.value.clientWidth < content.value.scrollWidth;
       }
@@ -125,7 +145,9 @@ export default defineComponent({
       root,
       tooltip,
       rootStyles,
-      isToolitpShown,
+      iconStyles,
+      isTooltipShown,
+      iconProps,
       isRootVisible,
       stop,
     };

package/src/components/or-menu-item-v3/styles.ts

@@ -1,4 +1,7 @@
 export const MenuItem: string[] = [
+  // Group
+  'group',
+
   // Layout
   'layout-row',
 
@@ -31,6 +34,7 @@ export const MenuItem: string[] = [
   'selected:bg-primary-opacity-0-08',
   'dark:selected:bg-primary-opacity-0-08-dark',
 
+
   // Theme (hover)
   'hover:md:theme-foreground-default',
   'dark:hover:md:theme-foreground-default-dark',
@@ -39,3 +43,13 @@ export const MenuItem: string[] = [
   'active:theme-foreground-default',
   'dark:active:theme-foreground-default-dark',
 ];
+
+export const MenuItemIcon: string[] = [
+  // Iconography (hover)
+  'group-hover:iconography-filled',
+];
+
+export const MenuItemIconSelected: string[] = [
+  // Iconography (selected)
+  'selected:iconography-filled',
+];