@onereach/ui-components 5.0.1 → 5.0.2-beta.3134.0

package/dist/bundled/v2/components/OrCheckboxV3/OrCheckbox.js

@@ -104,7 +104,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "input[data-v-07623e1e]{-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:0}";
+var css_248z = "input[data-v-9968416e]{-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:0}";
 styleInject(css_248z);
 
 /* script */
@@ -145,6 +145,7 @@ var __vue_render__ = function () {
     attrs: {
       "control-id": _vm.controlAttributes.id,
       "variant": _vm.labelVariant,
+      "selected": _vm.isChecked,
       "required": _vm.required,
       "disabled": _vm.disabled
     },
@@ -164,7 +165,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-07623e1e";
+const __vue_scope_id__ = "data-v-9968416e";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/bundled/v2/components/OrCheckboxV3/OrCheckbox.vue.d.ts

@@ -29,7 +29,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: undefined;
     };
     labelVariant: {
-        type: PropType<"input" | "toggle">;
+        type: PropType<"input" | "toggle" | "menu-item">;
         default: LabelVariant;
     };
     indeterminate: {
@@ -58,7 +58,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: undefined;
     };
     labelVariant: {
-        type: PropType<"input" | "toggle">;
+        type: PropType<"input" | "toggle" | "menu-item">;
         default: LabelVariant;
     };
     indeterminate: {
@@ -77,7 +77,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     modelValue: any;
     value: string | number | boolean | object;
     label: string;
-    labelVariant: "input" | "toggle";
+    labelVariant: "input" | "toggle" | "menu-item";
     indeterminate: boolean;
     required: boolean;
     disabled: boolean;
@@ -102,7 +102,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     modelValue: any;
     value: string | number | boolean | object;
     label: string;
-    labelVariant: "input" | "toggle";
+    labelVariant: "input" | "toggle" | "menu-item";
     indeterminate: boolean;
     required: boolean;
     disabled: boolean;
@@ -112,7 +112,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     modelValue: any;
     value: string | number | boolean | object;
     label: string;
-    labelVariant: "input" | "toggle";
+    labelVariant: "input" | "toggle" | "menu-item";
     indeterminate: boolean;
     required: boolean;
     disabled: boolean;

package/dist/bundled/v2/components/OrDatePickerV3/OrDatePicker.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import { useCurrentDate } from '../OrDateTimePickerV3/hooks/useCurrentDate.js';
 import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-a3097661.js';
-import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-a4f77733.js';
+import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-f3d67e5d.js';
 import { DatePicker, DatePickerPopover } from './styles.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';
 import __vue_component__$2 from '../OrHintV3/OrHint.js';

package/dist/bundled/v2/components/OrDatePickerV3/index.js

@@ -46,7 +46,7 @@ import '../OrMenuV3/OrMenu.js';
 import '../OrMenuV3/styles.js';
 import '../OrMenuItemV3/OrMenuItem.js';
 import '../OrMenuItemV3/styles.js';
-import '../../OrDateTimePickerPopoverHeader-a4f77733.js';
+import '../../OrDateTimePickerPopoverHeader-f3d67e5d.js';
 import '../OrLabelV3/OrLabel.js';
 import '../OrLabelV3/props.js';
 import '../OrLabelV3/styles.js';

package/dist/bundled/v2/components/OrDateTimePickerV3/OrDateTimePicker.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import { useCurrentDate } from './hooks/useCurrentDate.js';
 import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-a3097661.js';
-import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-a4f77733.js';
+import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-f3d67e5d.js';
 import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-e57095bf.js';
 import { DateTimePickerTimeFormat } from './props.js';
 import { DateTimePicker, DateTimePickerDatePopover, DateTimePickerTimePopover } from './styles.js';

package/dist/bundled/v2/components/OrDateTimePickerV3/index.js

@@ -47,7 +47,7 @@ import '../OrMenuV3/OrMenu.js';
 import '../OrMenuV3/styles.js';
 import '../OrMenuItemV3/OrMenuItem.js';
 import '../OrMenuItemV3/styles.js';
-import '../../OrDateTimePickerPopoverHeader-a4f77733.js';
+import '../../OrDateTimePickerPopoverHeader-f3d67e5d.js';
 import '../OrLabelV3/OrLabel.js';
 import '../OrLabelV3/props.js';
 import '../OrLabelV3/styles.js';

package/dist/bundled/v2/components/OrInputV3/OrInput.js

@@ -171,7 +171,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "input[data-v-76960543]{min-width:0;background:0 0;outline:0}input[type=number][data-v-76960543]::-webkit-inner-spin-button{display:none}input[type=search][data-v-76960543]::-webkit-search-cancel-button{display:none}";
+var css_248z = "input[data-v-fea72d76]{min-width:0;background:0 0;outline:0}input[type=number][data-v-fea72d76]::-webkit-inner-spin-button{display:none}input[type=search][data-v-fea72d76]::-webkit-search-cancel-button{display:none}";
 styleInject(css_248z);
 
 /* script */
@@ -431,7 +431,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-76960543";
+const __vue_scope_id__ = "data-v-fea72d76";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/bundled/v2/components/OrLabelV3/OrLabel.js

@@ -1,10 +1,9 @@
 import { defineComponent, ref, computed } from 'vue-demi';
 import { LabelVariant } from './props.js';
-import { LabelRoot, LabelRootVariants, LabelText, LabelAddon } from './styles.js';
+import { Label, LabelVariants, LabelText, LabelAddon } from './styles.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 
 var script = defineComponent({
-  name: 'OrLabel',
   props: {
     controlId: {
       type: String,
@@ -14,6 +13,10 @@ var script = defineComponent({
       type: String,
       default: LabelVariant.Input
     },
+    selected: {
+      type: Boolean,
+      default: false
+    },
     required: {
       type: Boolean,
       default: false
@@ -28,7 +31,7 @@ var script = defineComponent({
     // Refs
     const root = ref();
     // Styles
-    const rootStyles = computed(() => ['or-label-v3', ...LabelRoot, ...LabelRootVariants[props.variant]]);
+    const rootStyles = computed(() => ['or-label-v3', ...Label, ...LabelVariants[props.variant]]);
     const textStyles = computed(() => [...LabelText]);
     const addonStyles = computed(() => [...LabelAddon]);
     return {
@@ -52,6 +55,7 @@ var __vue_render__ = function () {
     ref: "root",
     class: _vm.rootStyles,
     attrs: {
+      "selected": _vm.selected ? '' : null,
       "disabled": _vm.disabled ? '' : null
     }
   }, [_c('label', {

package/dist/bundled/v2/components/OrLabelV3/OrLabel.vue.d.ts

@@ -11,9 +11,13 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: undefined;
     };
     variant: {
-        type: PropType<"input" | "toggle">;
+        type: PropType<"input" | "toggle" | "menu-item">;
         default: LabelVariant;
     };
+    selected: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     required: {
         type: BooleanConstructor;
         default: boolean;
@@ -28,9 +32,13 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: undefined;
     };
     variant: {
-        type: PropType<"input" | "toggle">;
+        type: PropType<"input" | "toggle" | "menu-item">;
         default: LabelVariant;
     };
+    selected: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     required: {
         type: BooleanConstructor;
         default: boolean;
@@ -41,7 +49,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     controlId: string;
-    variant: "input" | "toggle";
+    variant: "input" | "toggle" | "menu-item";
+    selected: boolean;
     required: boolean;
     disabled: boolean;
 } & {}, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -51,12 +60,14 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     addonStyles: import("@vue/composition-api").ComputedRef<string[]>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
     controlId: string;
-    variant: "input" | "toggle";
+    variant: "input" | "toggle" | "menu-item";
+    selected: boolean;
     required: boolean;
     disabled: boolean;
 } & {}, {
     controlId: string;
-    variant: "input" | "toggle";
+    variant: "input" | "toggle" | "menu-item";
+    selected: boolean;
     required: boolean;
     disabled: boolean;
 }, true>);

package/dist/bundled/v2/components/OrLabelV3/props.d.ts

@@ -1,4 +1,5 @@
 export declare enum LabelVariant {
     Input = "input",
-    Toggle = "toggle"
+    Toggle = "toggle",
+    MenuItem = "menu-item"
 }

package/dist/bundled/v2/components/OrLabelV3/props.js

@@ -2,6 +2,7 @@ var LabelVariant;
 (function (LabelVariant) {
   LabelVariant["Input"] = "input";
   LabelVariant["Toggle"] = "toggle";
+  LabelVariant["MenuItem"] = "menu-item";
 })(LabelVariant || (LabelVariant = {}));
 
 export { LabelVariant };

package/dist/bundled/v2/components/OrLabelV3/styles.d.ts

@@ -1,5 +1,5 @@
 import { LabelVariant } from './props';
-export declare const LabelRoot: string[];
-export declare const LabelRootVariants: Record<LabelVariant, string[]>;
+export declare const Label: string[];
+export declare const LabelVariants: Record<LabelVariant, string[]>;
 export declare const LabelText: string[];
 export declare const LabelAddon: string[];

package/dist/bundled/v2/components/OrLabelV3/styles.js

@@ -1,17 +1,26 @@
-const LabelRoot = [
+import { LabelVariant } from './props.js';
+
+const Label = [
 // Layout
 'layout-row justify-between',
 // Spacing
 'gap-sm'];
-const LabelRootVariants = {
-  'input': [
+const LabelVariants = {
+  [LabelVariant.Input]: [
   // Typography
   'typography-caption-regular',
   // Theme
   'theme-foreground-outline', 'dark:theme-foreground-outline-dark'],
-  'toggle': [
+  [LabelVariant.Toggle]: [
+  // Typography
+  'typography-body-2-regular',
+  // Theme
+  'theme-foreground-default', 'dark:theme-foreground-default-dark'],
+  [LabelVariant.MenuItem]: [
   // Typography
   'typography-body-2-regular',
+  // Typography (selected)
+  'selected:typography-body-2-semibold',
   // Theme
   'theme-foreground-default', 'dark:theme-foreground-default-dark']
 };
@@ -26,4 +35,4 @@ const LabelAddon = [
 // Typography
 'whitespace-nowrap'];
 
-export { LabelAddon, LabelRoot, LabelRootVariants, LabelText };
+export { Label, LabelAddon, LabelText, LabelVariants };

package/dist/bundled/v2/components/OrSelectV3/OrSelect.js

@@ -1,6 +1,6 @@
 import { defineComponent, getCurrentInstance, ref, computed, toRef, onMounted, watch } from 'vue-demi';
 import { isEmptyValue } from '../../utils/isEmptyValue.js';
-import { SelectRoot, SelectControl, SelectPlaceholder, SelectDropdown, SelectDropdownFlipped, SelectDropdownDefault, SelectNoSearchResults } from './styles.js';
+import { Select, SelectControl, SelectSearchControl, SelectPlaceholder, SelectDropdown, SelectDropdownFlipped, SelectDropdownDefault, SelectDropdownItem, SelectNoSearchResults } from './styles.js';
 import __vue_component__$1 from '../OrCheckboxV3/OrCheckbox.js';
 import __vue_component__$2 from '../OrErrorV3/OrError.js';
 import __vue_component__$3 from '../OrExpansionPanelV3/OrExpansionPanel.js';
@@ -18,6 +18,7 @@ import { DropdownClose } from '../../directives/dropdown-close.js';
 import { DropdownOpen } from '../../directives/dropdown-open.js';
 import { InputBoxSize } from '../OrInputBoxV3/props.js';
 import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
+import useResponsive from '../../hooks/useResponsive/useResponsive.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 import '../OrCheckboxV3/styles.js';
 import '../OrLabelV3/props.js';
@@ -44,7 +45,6 @@ import '../../index-509d77a1.js';
 import '../OrLoaderV3/props.js';
 import '../OrLoaderV3/styles.js';
 import '../../hooks/useValidationAttributes.js';
-import '../../hooks/useResponsive/useResponsive.js';
 import '../OrInputBoxV3/styles.js';
 import '../OrLabelV3/styles.js';
 import '../OrMenuItemV3/styles.js';
@@ -68,7 +68,6 @@ import '../OrTagV3/props.js';
 import '../OrTagV3/styles.js';
 
 var script = defineComponent({
-  name: 'OrSelect',
   components: {
     OrCheckbox: __vue_component__$1,
     OrError: __vue_component__$2,
@@ -177,6 +176,8 @@ var script = defineComponent({
       return (_a = inputBox.value) === null || _a === void 0 ? void 0 : _a.root;
     });
     const control = ref();
+    const searchControl = ref();
+    const mobileSearchControl = ref();
     const popover = ref();
     const popoverRoot = computed(() => {
       var _a;
@@ -187,13 +188,15 @@ var script = defineComponent({
       return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.state;
     });
     // Styles
-    const rootStyles = computed(() => ['or-select-v3', ...SelectRoot]);
+    const rootStyles = computed(() => ['or-select-v3', ...Select]);
     const controlStyles = computed(() => [...SelectControl]);
+    const searchControlStyles = computed(() => [...SelectSearchControl]);
     const placeholderStyles = computed(() => [...SelectPlaceholder]);
     const dropdownStyles = computed(() => {
       var _a;
       return [...SelectDropdown, ...(((_a = popover.value) === null || _a === void 0 ? void 0 : _a.isFlipped) ? SelectDropdownFlipped : SelectDropdownDefault)];
     });
+    const dropdownItemStyles = computed(() => [...SelectDropdownItem]);
     const noSearchResultsStyles = computed(() => [...SelectNoSearchResults]);
     // State
     const controlId = ref((_a = context.attrs.id) !== null && _a !== void 0 ? _a : currentInstance.uid.toString());
@@ -210,7 +213,7 @@ var script = defineComponent({
     const selection = computed(() => {
       const modelValue = proxyModelValue.value;
       if (Array.isArray(modelValue)) {
-        return modelValue.map(value => props.options.find(option => option.value === value));
+        return modelValue.map(value => props.options.find(option => option.value === value)).filter(value => !!value);
       }
       return props.options.find(option => option.value === modelValue);
     });
@@ -270,22 +273,43 @@ var script = defineComponent({
         proxyModelValue.value = modelValue.filter(value => value !== option.value);
       }
     }
+    function focusSearchControl() {
+      setTimeout(() => {
+        var _a, _b;
+        if (isMobile.value) {
+          (_a = mobileSearchControl.value) === null || _a === void 0 ? void 0 : _a.focus();
+        } else {
+          (_b = searchControl.value) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+      });
+    }
+    function clearSearchControl() {
+      searchText.value = '';
+    }
     const {
       innerItems,
       outerItems
     } = useOverflow(control);
+    // Utils
+    const {
+      isMobile
+    } = useResponsive();
     return {
       root,
       inputBox,
       inputBoxRoot,
       control,
+      searchControl,
+      mobileSearchControl,
       popover,
       popoverRoot,
       popoverState,
       rootStyles,
       controlStyles,
+      searchControlStyles,
       placeholderStyles,
       dropdownStyles,
+      dropdownItemStyles,
       noSearchResultsStyles,
       controlId,
       proxyModelValue,
@@ -299,8 +323,11 @@ var script = defineComponent({
       toggle,
       close,
       deselect,
+      focusSearchControl,
+      clearSearchControl,
       innerItems,
-      outerItems
+      outerItems,
+      isMobile
     };
   }
 });
@@ -367,10 +394,10 @@ var __vue_render__ = function () {
         return _vm.$emit('blur', $event);
       }
     }
-  }, [_vm.multiple ? [_vm.proxyModelValue && _vm.proxyModelValue.length > 0 ? [_vm._t("valueTemplate", function () {
-    return _vm._l(_vm.selection, function (option, i) {
+  }, [_vm.multiple ? [!_vm.isEmptyModelValue ? [_vm._t("valueTemplate", function () {
+    return _vm._l(_vm.selection, function (option) {
       return _c('OrTag', {
-        key: i,
+        key: option.value,
         attrs: {
           "variant": 'reset',
           "disabled": _vm.disabled || _vm.readonly
@@ -384,19 +411,88 @@ var __vue_render__ = function () {
     });
   }, {
     "model": _vm.proxyModelValue
+  }), _vm._v(" "), _vm.popoverState === 'open' && _vm.enableSearch ? [_c('OrInput', {
+    ref: "searchControl",
+    class: _vm.searchControlStyles,
+    attrs: {
+      "type": 'search',
+      "placeholder": 'Search',
+      "size": _vm.size,
+      "disable-default-styles": true
+    },
+    on: {
+      "click": function ($event) {
+        $event.stopPropagation();
+      }
+    },
+    model: {
+      value: _vm.searchText,
+      callback: function ($$v) {
+        _vm.searchText = $$v;
+      },
+      expression: "searchText"
+    }
+  })] : _vm._e()] : [_vm.popoverState === 'open' && _vm.enableSearch ? [_c('OrInput', {
+    ref: "searchControl",
+    class: _vm.searchControlStyles,
+    attrs: {
+      "type": 'search',
+      "placeholder": 'Search',
+      "size": _vm.size,
+      "disable-default-styles": true
+    },
+    on: {
+      "click": function ($event) {
+        $event.stopPropagation();
+      }
+    },
+    model: {
+      value: _vm.searchText,
+      callback: function ($$v) {
+        _vm.searchText = $$v;
+      },
+      expression: "searchText"
+    }
   })] : [_c('span', {
-    class: _vm.placeholderStyles
-  }, [_vm._v(_vm._s(_vm.placeholder))])]] : [!_vm.isEmptyModelValue ? [_vm._t("valueTemplate", function () {
+    class: _vm.placeholderStyles,
+    attrs: {
+      "disabled": _vm.disabled ? '' : null
+    }
+  }, [_vm._v("\n              " + _vm._s(_vm.placeholder) + "\n            ")])]]] : [_vm.popoverState === 'open' && _vm.enableSearch ? [_c('OrInput', {
+    ref: "searchControl",
+    class: _vm.searchControlStyles,
+    attrs: {
+      "type": 'search',
+      "placeholder": 'Search',
+      "size": _vm.size,
+      "disable-default-styles": true
+    },
+    on: {
+      "click": function ($event) {
+        $event.stopPropagation();
+      }
+    },
+    model: {
+      value: _vm.searchText,
+      callback: function ($$v) {
+        _vm.searchText = $$v;
+      },
+      expression: "searchText"
+    }
+  })] : [!_vm.isEmptyModelValue ? [_vm._t("valueTemplate", function () {
     return [_c('span', {
       staticClass: "truncate"
-    }, [_vm._v("\n              " + _vm._s(_vm.selection && _vm.selection.label) + "\n            ")])];
+    }, [_vm._v("\n                " + _vm._s(_vm.selection && _vm.selection.label) + "\n              ")])];
   }, {
     "model": _vm.proxyModelValue
   })] : [_c('span', {
-    class: _vm.placeholderStyles
-  }, [_vm._v(_vm._s(_vm.placeholder))])]]], 2), _vm._v(" "), _vm.multiple && _vm.outerItems.length > 0 ? [_vm._v("\n      +" + _vm._s(_vm.outerItems.length) + "\n    ")] : _vm._e(), _vm._v(" "), _c('div', {
+    class: _vm.placeholderStyles,
+    attrs: {
+      "disabled": _vm.disabled ? '' : null
+    }
+  }, [_vm._v("\n              " + _vm._s(_vm.placeholder) + "\n            ")])]]]], 2), _vm._v(" "), _vm.multiple && _vm.outerItems.length > 0 ? [_vm._v("\n      +" + _vm._s(_vm.outerItems.length) + "\n    ")] : _vm._e(), _vm._v(" "), _c('div', {
     class: ['layout-inline-row', 'gap-sm']
-  }, [!_vm.multiple && _vm.proxyModelValue ? [_c('OrIconButton', {
+  }, [_vm.proxyModelValue && _vm.popoverState === 'closed' ? [_c('OrIconButton', {
     attrs: {
       "icon": 'close',
       "color": 'inherit',
@@ -405,7 +501,7 @@ var __vue_render__ = function () {
     on: {
       "click": function ($event) {
         $event.stopPropagation();
-        return _vm.$emit('update:modelValue', undefined);
+        return _vm.$emit('update:modelValue', _vm.multiple ? [] : undefined);
       }
     }
   })] : _vm._e(), _vm._v(" "), _c('OrIcon', {
@@ -422,13 +518,21 @@ var __vue_render__ = function () {
       "full-width": true,
       "custom-styles": _vm.dropdownStyles,
       "disable-default-styles": true
+    },
+    on: {
+      "open": function ($event) {
+        return _vm.focusSearchControl();
+      },
+      "close": function ($event) {
+        return _vm.clearSearchControl();
+      }
     }
-  }, [_vm.enableSearch ? [_c('OrInput', {
+  }, [_vm.isMobile ? [_c('OrInput', {
+    ref: "mobileSearchControl",
+    class: _vm.searchControlStyles,
     attrs: {
       "type": 'search',
-      "placeholder": 'Search',
-      "size": 's',
-      "disable-default-styles": true
+      "placeholder": 'Search'
     },
     model: {
       value: _vm.searchText,
@@ -445,13 +549,16 @@ var __vue_render__ = function () {
       }
     }, [_vm.multiple ? _vm._l(group, function (option, i) {
       return _c('OrMenuItem', {
-        key: i
+        key: i,
+        attrs: {
+          "selected": _vm.proxyModelValue && _vm.proxyModelValue.includes(option.value)
+        }
       }, [_vm._t("optionTemplate", function () {
         return [_c('OrCheckbox', {
           attrs: {
             "value": option.value,
             "label": option.label,
-            "label-variant": 'input'
+            "label-variant": 'menu-item'
           },
           model: {
             value: _vm.proxyModelValue,
@@ -468,6 +575,10 @@ var __vue_render__ = function () {
     }) : _vm._l(group, function (option, i) {
       return _c('OrMenuItem', {
         key: i,
+        class: _vm.dropdownItemStyles,
+        attrs: {
+          "selected": _vm.proxyModelValue === option.value
+        },
         on: {
           "click": function ($event) {
             $event.stopPropagation();
@@ -484,12 +595,15 @@ var __vue_render__ = function () {
     })], 2);
   }) : [_vm.multiple ? _vm._l(_vm.resolvedSearchOptions, function (option, i) {
     return _c('OrMenuItem', {
-      key: i
+      key: i,
+      attrs: {
+        "selected": _vm.proxyModelValue && _vm.proxyModelValue.includes(option.value)
+      }
     }, [_c('OrCheckbox', {
       attrs: {
         "value": option.value,
         "label": option.label,
-        "label-variant": 'input'
+        "label-variant": 'menu-item'
       },
       model: {
         value: _vm.proxyModelValue,
@@ -505,6 +619,10 @@ var __vue_render__ = function () {
   }) : _vm._l(_vm.resolvedSearchOptions, function (option, i) {
     return _c('OrMenuItem', {
       key: i,
+      class: _vm.dropdownItemStyles,
+      attrs: {
+        "selected": _vm.proxyModelValue === option.value
+      },
       on: {
         "click": function ($event) {
           $event.stopPropagation();