@onereach/ui-components 4.15.3-beta.3056.0 → 4.15.3-beta.3057.0

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

@@ -1,6 +1,6 @@
 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-b0c0cd32.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-858a764b.js';
 import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-52a99e6a.js';
 import { DatePicker, DatePickerPopover } from './styles.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';

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

@@ -2,7 +2,7 @@ export { default as OrDatePickerV3 } from './OrDatePicker.js';
 export { InputBoxSize as DatePickerSize } from '../OrInputBoxV3/props.js';
 import 'vue-demi';
 import '../OrDateTimePickerV3/hooks/useCurrentDate.js';
-import '../../OrDateTimePickerMonthSelect-b0c0cd32.js';
+import '../../OrDateTimePickerMonthSelect-858a764b.js';
 import '../OrDateTimePickerV3/hooks/useDatePlaceholder.js';
 import '../../hooks/useProxyModelValue.js';
 import '../../normalize-component-6e8e3d80.js';

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

@@ -1,6 +1,6 @@
 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-b0c0cd32.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-858a764b.js';
 import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-52a99e6a.js';
 import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-8851268e.js';
 import { DateTimePickerTimeFormat } from './props.js';

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

@@ -3,7 +3,7 @@ export { DateTimePickerTimeFormat } from './props.js';
 export { InputBoxSize as DateTimePickerSize } from '../OrInputBoxV3/props.js';
 import 'vue-demi';
 import './hooks/useCurrentDate.js';
-import '../../OrDateTimePickerMonthSelect-b0c0cd32.js';
+import '../../OrDateTimePickerMonthSelect-858a764b.js';
 import './hooks/useDatePlaceholder.js';
 import '../../hooks/useProxyModelValue.js';
 import '../../normalize-component-6e8e3d80.js';

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

@@ -166,7 +166,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 */
@@ -426,7 +426,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/OrPopoverV3/OrPopover.js

@@ -1,4 +1,4 @@
-import { a as autoUpdate, c as computePosition, o as offset, s as shift, f as flip, h as hide } from '../../floating-ui.dom.esm-83eba816.js';
+import { a as autoUpdate, c as computePosition, s as shift, f as flip, h as hide } from '../../floating-ui.dom.esm-83eba816.js';
 import { o as onClickOutside } from '../../index-760079e7.js';
 import { defineComponent, ref, computed, toRef, watchPostEffect, unref } from 'vue-demi';
 import { PopoverVariant, PopoverPlacement } from './props.js';
@@ -45,10 +45,6 @@ var script = defineComponent({
       type: String,
       default: PopoverPlacement.Bottom
     },
-    offset: {
-      type: [Number, Object, Function],
-      default: undefined
-    },
     fullWidth: {
       type: Boolean,
       default: false
@@ -105,7 +101,7 @@ var script = defineComponent({
               middlewareData
             } = await computePosition(trigger, rootElement, {
               placement,
-              middleware: [offset(props.offset), shift(), flip(), hide()]
+              middleware: [shift(), flip(), hide()]
             });
             Object.assign(rootElement.style, {
               left: `${x}px`,

package/dist/bundled/v2/components/OrPopoverV3/OrPopover.vue.d.ts

@@ -44,10 +44,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: PropType<"top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end">;
         default: PopoverPlacement;
     };
-    offset: {
-        type: PropType<import("@floating-ui/core/src/middleware/offset").Options | undefined>;
-        default: undefined;
-    };
     fullWidth: {
         type: BooleanConstructor;
         default: boolean;
@@ -86,10 +82,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: PropType<"top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end">;
         default: PopoverPlacement;
     };
-    offset: {
-        type: PropType<import("@floating-ui/core/src/middleware/offset").Options | undefined>;
-        default: undefined;
-    };
     fullWidth: {
         type: BooleanConstructor;
         default: boolean;
@@ -110,7 +102,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     } | {}> & Omit<{} & {}, never>>;
     trigger: HTMLElement;
     placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
-    offset: import("@floating-ui/core/src/middleware/offset").Options | undefined;
     fullWidth: boolean;
     customStyles: string[];
     disableDefaultStyles: boolean;
@@ -142,7 +133,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     } | {}> & Omit<{} & {}, never>>;
     trigger: HTMLElement;
     placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
-    offset: import("@floating-ui/core/src/middleware/offset").Options | undefined;
     fullWidth: boolean;
     customStyles: string[];
     disableDefaultStyles: boolean;
@@ -156,7 +146,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     } | {}> & Omit<{} & {}, never>>;
     trigger: HTMLElement;
     placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
-    offset: import("@floating-ui/core/src/middleware/offset").Options | undefined;
     fullWidth: boolean;
     customStyles: string[];
     disableDefaultStyles: boolean;

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 { SelectRoot, SelectControl, SelectSearchControl, SelectPlaceholder, SelectDropdown, SelectDropdownFlipped, SelectDropdownDefault, 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-760079e7.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';
@@ -184,6 +184,7 @@ var script = defineComponent({
     // Styles
     const rootStyles = computed(() => ['or-select-v3', ...SelectRoot]);
     const controlStyles = computed(() => [...SelectControl]);
+    const searchControlStyles = computed(() => [...SelectSearchControl]);
     const placeholderStyles = computed(() => [...SelectPlaceholder]);
     const dropdownStyles = computed(() => {
       var _a;
@@ -205,7 +206,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);
     });
@@ -269,6 +270,10 @@ var script = defineComponent({
       innerItems,
       outerItems
     } = useOverflow(control);
+    // Utils
+    const {
+      isMobile
+    } = useResponsive();
     return {
       root,
       inputBox,
@@ -279,6 +284,7 @@ var script = defineComponent({
       popoverState,
       rootStyles,
       controlStyles,
+      searchControlStyles,
       placeholderStyles,
       dropdownStyles,
       noSearchResultsStyles,
@@ -295,7 +301,8 @@ var script = defineComponent({
       close,
       deselect,
       innerItems,
-      outerItems
+      outerItems,
+      isMobile
     };
   }
 });
@@ -346,7 +353,27 @@ var __vue_render__ = function () {
       "readonly": _vm.readonly,
       "disabled": _vm.disabled
     }
-  }, [_c('div', {
+  }, [_vm.popoverState === 'open' && _vm.enableSearch ? [_c('OrInput', {
+    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('div', {
     ref: "control",
     class: _vm.controlStyles,
     attrs: {
@@ -363,9 +390,9 @@ var __vue_render__ = function () {
       }
     }
   }, [_vm.multiple ? [_vm.proxyModelValue && _vm.proxyModelValue.length > 0 ? [_vm._t("valueTemplate", function () {
-    return _vm._l(_vm.selection, function (option, i) {
+    return _vm._l(_vm.selection, function (option) {
       return _c('OrTag', {
-        key: i,
+        key: option.value,
         attrs: {
           "variant": 'reset',
           "disabled": _vm.disabled || _vm.readonly
@@ -375,21 +402,27 @@ var __vue_render__ = function () {
             return _vm.deselect(option);
           }
         }
-      }, [_vm._v("\n              " + _vm._s(option.label) + "\n            ")]);
+      }, [_vm._v("\n                " + _vm._s(option.label) + "\n              ")]);
     });
   }, {
     "model": _vm.proxyModelValue
   })] : [_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.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', {
     attrs: {
@@ -408,7 +441,7 @@ var __vue_render__ = function () {
       "icon": _vm.popoverState === 'open' ? 'arrow_drop_up' : 'arrow_drop_down',
       "variant": 'outlined'
     }
-  })], 2), _vm._v(" "), _c('OrPopover', {
+  })], 2)], _vm._v(" "), _c('OrPopover', {
     ref: "popover",
     attrs: {
       "variant": 'auto',
@@ -418,12 +451,11 @@ var __vue_render__ = function () {
       "custom-styles": _vm.dropdownStyles,
       "disable-default-styles": true
     }
-  }, [_vm.enableSearch ? [_c('OrInput', {
+  }, [_vm.isMobile ? [_c('OrInput', {
+    class: _vm.searchControlStyles,
     attrs: {
       "type": 'search',
-      "placeholder": 'Search',
-      "size": 's',
-      "disable-default-styles": true
+      "placeholder": 'Search'
     },
     model: {
       value: _vm.searchText,

package/dist/bundled/v2/components/OrSelectV3/OrSelect.vue.d.ts

@@ -19,6 +19,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     popoverState: import("@vue/composition-api").ComputedRef<undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     controlStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    searchControlStyles: import("@vue/composition-api").ComputedRef<string[]>;
     placeholderStyles: import("@vue/composition-api").ComputedRef<string[]>;
     dropdownStyles: import("@vue/composition-api").ComputedRef<string[]>;
     noSearchResultsStyles: import("@vue/composition-api").ComputedRef<string[]>;
@@ -39,6 +40,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     deselect: (option: SelectOption) => void;
     innerItems: import("@vue/composition-api").Ref<HTMLElement[]>;
     outerItems: import("@vue/composition-api").Ref<HTMLElement[]>;
+    isMobile: import("@vue/composition-api").Ref<boolean>;
 }> & import("@vue/composition-api").Data, {}, {}, {
     options: {
         type: PropType<SelectOption[]>;
@@ -206,6 +208,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     popoverState: import("@vue/composition-api").ComputedRef<undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     controlStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    searchControlStyles: import("@vue/composition-api").ComputedRef<string[]>;
     placeholderStyles: import("@vue/composition-api").ComputedRef<string[]>;
     dropdownStyles: import("@vue/composition-api").ComputedRef<string[]>;
     noSearchResultsStyles: import("@vue/composition-api").ComputedRef<string[]>;
@@ -226,6 +229,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     deselect: (option: SelectOption) => void;
     innerItems: import("@vue/composition-api").Ref<HTMLElement[]>;
     outerItems: import("@vue/composition-api").Ref<HTMLElement[]>;
+    isMobile: import("@vue/composition-api").Ref<boolean>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     modelValue: string | number | object | string[] | object[] | number[];
     label: string;

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

@@ -1,5 +1,6 @@
 export declare const SelectRoot: string[];
 export declare const SelectControl: string[];
+export declare const SelectSearchControl: string[];
 export declare const SelectPlaceholder: string[];
 export declare const SelectDropdown: string[];
 export declare const SelectDropdownDefault: string[];

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

@@ -14,6 +14,11 @@ const SelectControl = [
 'gap-xs',
 // Typography
 'typography-inherit'];
+const SelectSearchControl = [
+// Layout
+'grow',
+// Spacing
+'!mx-lg md:!mx-none', '!my-sm md:!my-none'];
 const SelectPlaceholder = [
 // Theme
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark',
@@ -48,4 +53,4 @@ const SelectNoSearchResults = [
 // Theme
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
 
-export { SelectControl, SelectDropdown, SelectDropdownDefault, SelectDropdownFlipped, SelectNoSearchResults, SelectPlaceholder, SelectRoot };
+export { SelectControl, SelectDropdown, SelectDropdownDefault, SelectDropdownFlipped, SelectNoSearchResults, SelectPlaceholder, SelectRoot, SelectSearchControl };

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

@@ -234,7 +234,7 @@ import './OrCombinedInputV3/styles.js';
 import '../index-15e8c1f3.js';
 import './OrConfirmV3/styles.js';
 import './OrDateTimePickerV3/hooks/useCurrentDate.js';
-import '../OrDateTimePickerMonthSelect-b0c0cd32.js';
+import '../OrDateTimePickerMonthSelect-858a764b.js';
 import './OrDateTimePickerV3/hooks/useDatePlaceholder.js';
 import '../OrDateTimePickerPopoverHeader-52a99e6a.js';
 import './OrDatePickerV3/styles.js';

package/dist/bundled/v2/directives/dropdown-close.js

@@ -2,8 +2,6 @@ import { isVue3 } from 'vue-demi';
 
 const created = (element, binding) => {
   element.addEventListener('keydown', event => {
-    event.preventDefault();
-    event.stopPropagation();
     if (['Escape'].includes(event.key)) {
       binding.value(event);
     }

package/dist/bundled/v2/directives/dropdown-open.js

@@ -2,15 +2,11 @@ import { isVue3 } from 'vue-demi';
 
 const created = (element, binding) => {
   element.addEventListener('keydown', event => {
-    event.preventDefault();
-    event.stopPropagation();
     if (['Enter', ' '].includes(event.key)) {
       binding.value(event);
     }
   });
   element.addEventListener('click', event => {
-    event.preventDefault();
-    event.stopPropagation();
     binding.value(event);
   });
 };