@onereach/ui-components 17.2.0-beta.4881.0 → 17.2.0-beta.4882.0

package/dist/bundled/v2/components/OrDropAreaV3/OrDropArea.js

@@ -40,6 +40,10 @@ var script = defineComponent({
     disabled: {
       type: Boolean,
       default: false
+    },
+    error: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['update:modelValue'],
@@ -56,13 +60,34 @@ var script = defineComponent({
     const constraintsStyles = computed(() => [...DropAreaConstraints]);
     // State
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const accept = computed(() => {
+      if (!props.fileTypes || !Array.isArray(props.fileTypes)) return '';
+      return props.fileTypes.join(',');
+    });
     const invalid = computed(() => {
-      if (props.fileTypes.length > 0 && proxyModelValue.value.some(file => !props.fileTypes.includes(file.type))) {
+      /* External error */
+      if (props.error) return true;
+      /* No validation provided */
+      if (!props.fileTypes) return false;
+      /* File type match: strict and non-strict MIME-type comparison */
+      if (props.fileTypes.length > 0 && proxyModelValue.value.some(file => {
+        let match = props.fileTypes.some(fileType => {
+          if (fileType.match(/\/\*$/)) {
+            const baseType = fileType.replace('/*', '');
+            return file.type.indexOf(baseType) !== -1;
+          } else {
+            return file.type === fileType;
+          }
+        });
+        return !match;
+      })) {
         return true;
       }
+      /* Files count */
       if (proxyModelValue.value.length > props.maxFiles) {
         return true;
       }
+      /* File size */
       if (proxyModelValue.value.some(file => file.size > props.maxFileSize)) {
         return true;
       }
@@ -86,6 +111,7 @@ var script = defineComponent({
       textEmphasisStyles,
       constraintsStyles,
       proxyModelValue,
+      accept,
       invalid,
       onChange,
       isDesktop,
@@ -114,7 +140,7 @@ var __vue_render__ = function () {
     class: _vm.controlStyles,
     attrs: {
       "type": 'file',
-      "accept": _vm.fileTypes.join(','),
+      "accept": _vm.accept,
       "multiple": _vm.maxFiles > 1,
       "disabled": _vm.disabled
     },

package/dist/bundled/v2/components/OrDropAreaV3/OrDropArea.vue.d.ts

@@ -26,6 +26,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     root: import("vue-demi").Ref<HTMLElement | undefined>;
     rootStyles: import("vue-demi").ComputedRef<string[]>;
@@ -35,6 +39,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     textEmphasisStyles: import("vue-demi").ComputedRef<string[]>;
     constraintsStyles: import("vue-demi").ComputedRef<string[]>;
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<File[]>;
+    accept: import("vue-demi").ComputedRef<string>;
     invalid: import("vue-demi").ComputedRef<boolean>;
     onChange: (event: Event) => void;
     isDesktop: import("vue-demi").ComputedRef<boolean>;
@@ -65,6 +70,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
@@ -74,5 +83,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     maxFileSize: number;
     size: "m" | "s";
     disabled: boolean;
+    error: boolean;
 }>;
 export default _default;

package/dist/bundled/v2/components/OrFilterPopoverV3/OrFilterPopover.js

@@ -45,10 +45,6 @@ var script = defineComponent({
       type: String,
       default: undefined
     },
-    enableDesktopControls: {
-      type: Boolean,
-      default: false
-    },
     offset: {
       type: [Number, Object, Function],
       default: 8
@@ -138,31 +134,7 @@ var __vue_render__ = function () {
         return _vm.reset();
       }
     }
-  }, [_vm._v("\n            " + _vm._s(_vm.resetLabel) + "\n          ")])], 1), _vm._v(" "), _vm._t("default"), _vm._v(" "), _vm._t('actions', function () {
-    return [_vm.enableDesktopControls ? _c('div', {
-      class: _vm.footerStyles
-    }, [_c('OrButton', {
-      class: ['grow'],
-      attrs: {
-        "variant": 'contained'
-      },
-      on: {
-        "click": function ($event) {
-          return _vm.apply();
-        }
-      }
-    }, [_vm._v("\n              " + _vm._s(_vm.applyLabel) + "\n            ")]), _vm._v(" "), _c('OrButton', {
-      class: ['grow'],
-      attrs: {
-        "variant": 'outlined'
-      },
-      on: {
-        "click": function ($event) {
-          return _vm.reset();
-        }
-      }
-    }, [_vm._v("\n              " + _vm._s(_vm.resetLabel) + "\n            ")])], 1) : _vm._e()];
-  }, null, {
+  }, [_vm._v("\n            " + _vm._s(_vm.resetLabel) + "\n          ")])], 1), _vm._v(" "), _vm._t("default"), _vm._v(" "), _vm._t('actions', null, null, {
     apply: _vm.apply,
     reset: _vm.reset,
     isDesktop: _vm.isDesktop,

package/dist/bundled/v2/components/OrFilterPopoverV3/OrFilterPopover.vue.d.ts

@@ -30,10 +30,6 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<"none" | "start" | "end" | undefined>;
         default: undefined;
     };
-    enableDesktopControls: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     offset: {
         type: PropType<PopoverOffset>;
         default: number;
@@ -80,10 +76,6 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<"none" | "start" | "end" | undefined>;
         default: undefined;
     };
-    enableDesktopControls: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     offset: {
         type: PropType<PopoverOffset>;
         default: number;
@@ -102,7 +94,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     trigger: ReferenceElement;
     placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
     fallbackPlacement: "none" | "start" | "end" | undefined;
-    enableDesktopControls: boolean;
     offset: PopoverOffset;
 }>;
 export default _default;

package/dist/bundled/v3/components/OrDropAreaV3/OrDropArea.js

@@ -1 +1 @@
-export { s as default } from '../OrDropAreaV3-cf5ef7d5.js';
+export { s as default } from '../OrDropAreaV3-a9883f18.js';

package/dist/bundled/v3/components/OrDropAreaV3/OrDropArea.vue.d.ts

@@ -26,6 +26,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     root: import("vue-demi").Ref<HTMLElement | undefined>;
     rootStyles: import("vue-demi").ComputedRef<string[]>;
@@ -35,6 +39,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     textEmphasisStyles: import("vue-demi").ComputedRef<string[]>;
     constraintsStyles: import("vue-demi").ComputedRef<string[]>;
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<File[]>;
+    accept: import("vue-demi").ComputedRef<string>;
     invalid: import("vue-demi").ComputedRef<boolean>;
     onChange: (event: Event) => void;
     isDesktop: import("vue-demi").ComputedRef<boolean>;
@@ -65,6 +70,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
@@ -74,5 +83,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     maxFileSize: number;
     size: "m" | "s";
     disabled: boolean;
+    error: boolean;
 }>;
 export default _default;

package/dist/bundled/v3/components/OrDropAreaV3/index.js

@@ -1 +1 @@
-export { D as DropAreaSize, s as OrDropAreaV3, a as approximateFileSize } from '../OrDropAreaV3-cf5ef7d5.js';
+export { D as DropAreaSize, s as OrDropAreaV3, a as approximateFileSize } from '../OrDropAreaV3-a9883f18.js';

package/dist/bundled/v3/components/OrDropAreaV3/props.js

@@ -1 +1 @@
-export { D as DropAreaSize } from '../OrDropAreaV3-cf5ef7d5.js';
+export { D as DropAreaSize } from '../OrDropAreaV3-a9883f18.js';

package/dist/bundled/v3/components/OrDropAreaV3/styles.js

@@ -1 +1 @@
-export { b as DropArea, i as DropAreaConstraints, d as DropAreaControl, e as DropAreaIcon, f as DropAreaIconSizes, c as DropAreaSizes, g as DropAreaText, h as DropAreaTextEmphasis } from '../OrDropAreaV3-cf5ef7d5.js';
+export { b as DropArea, i as DropAreaConstraints, d as DropAreaControl, e as DropAreaIcon, f as DropAreaIconSizes, c as DropAreaSizes, g as DropAreaText, h as DropAreaTextEmphasis } from '../OrDropAreaV3-a9883f18.js';

package/dist/bundled/v3/components/OrDropAreaV3/utils/approximateFileSize.js

@@ -1 +1 @@
-export { a as approximateFileSize } from '../../OrDropAreaV3-cf5ef7d5.js';
+export { a as approximateFileSize } from '../../OrDropAreaV3-a9883f18.js';

package/dist/bundled/v3/components/OrDropAreaV3/utils/index.js

@@ -1 +1 @@
-export { a as approximateFileSize } from '../../OrDropAreaV3-cf5ef7d5.js';
+export { a as approximateFileSize } from '../../OrDropAreaV3-a9883f18.js';

package/dist/bundled/v3/components/{OrDropAreaV3-cf5ef7d5.js → OrDropAreaV3-a9883f18.js}

@@ -120,6 +120,10 @@ var script = defineComponent({
     disabled: {
       type: Boolean,
       default: false
+    },
+    error: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['update:modelValue'],
@@ -136,13 +140,34 @@ var script = defineComponent({
     const constraintsStyles = computed(() => [...DropAreaConstraints]);
     // State
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const accept = computed(() => {
+      if (!props.fileTypes || !Array.isArray(props.fileTypes)) return '';
+      return props.fileTypes.join(',');
+    });
     const invalid = computed(() => {
-      if (props.fileTypes.length > 0 && proxyModelValue.value.some(file => !props.fileTypes.includes(file.type))) {
+      /* External error */
+      if (props.error) return true;
+      /* No validation provided */
+      if (!props.fileTypes) return false;
+      /* File type match: strict and non-strict MIME-type comparison */
+      if (props.fileTypes.length > 0 && proxyModelValue.value.some(file => {
+        let match = props.fileTypes.some(fileType => {
+          if (fileType.match(/\/\*$/)) {
+            const baseType = fileType.replace('/*', '');
+            return file.type.indexOf(baseType) !== -1;
+          } else {
+            return file.type === fileType;
+          }
+        });
+        return !match;
+      })) {
         return true;
       }
+      /* Files count */
       if (proxyModelValue.value.length > props.maxFiles) {
         return true;
       }
+      /* File size */
       if (proxyModelValue.value.some(file => file.size > props.maxFileSize)) {
         return true;
       }
@@ -166,6 +191,7 @@ var script = defineComponent({
       textEmphasisStyles,
       constraintsStyles,
       proxyModelValue,
+      accept,
       invalid,
       onChange,
       isDesktop,
@@ -193,7 +219,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, [createElementVNode("input", {
     class: normalizeClass(_ctx.controlStyles),
     type: 'file',
-    accept: _ctx.fileTypes.join(','),
+    accept: _ctx.accept,
     multiple: _ctx.maxFiles > 1,
     disabled: _ctx.disabled,
     onChange: _cache[0] || (_cache[0] = $event => _ctx.onChange($event))

package/dist/bundled/v3/components/OrFilterPopoverV3/OrFilterPopover.js

@@ -1 +1 @@
-export { s as default } from '../OrFilterPopoverV3-6899e1b2.js';
+export { s as default } from '../OrFilterPopoverV3-7b645a22.js';

package/dist/bundled/v3/components/OrFilterPopoverV3/OrFilterPopover.vue.d.ts

@@ -30,10 +30,6 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<"none" | "start" | "end" | undefined>;
         default: undefined;
     };
-    enableDesktopControls: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     offset: {
         type: PropType<PopoverOffset>;
         default: number;
@@ -80,10 +76,6 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<"none" | "start" | "end" | undefined>;
         default: undefined;
     };
-    enableDesktopControls: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     offset: {
         type: PropType<PopoverOffset>;
         default: number;
@@ -102,7 +94,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     trigger: ReferenceElement;
     placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
     fallbackPlacement: "none" | "start" | "end" | undefined;
-    enableDesktopControls: boolean;
     offset: PopoverOffset;
 }>;
 export default _default;

package/dist/bundled/v3/components/OrFilterPopoverV3/index.js

@@ -1 +1 @@
-export { s as OrFilterPopoverV3 } from '../OrFilterPopoverV3-6899e1b2.js';
+export { s as OrFilterPopoverV3 } from '../OrFilterPopoverV3-7b645a22.js';

package/dist/bundled/v3/components/OrFilterPopoverV3/styles.js

@@ -1 +1 @@
-export { F as FilterPopover, b as FilterPopoverFooter, a as FilterPopoverHeader } from '../OrFilterPopoverV3-6899e1b2.js';
+export { F as FilterPopover, b as FilterPopoverFooter, a as FilterPopoverHeader } from '../OrFilterPopoverV3-7b645a22.js';

package/dist/bundled/v3/components/{OrFilterPopoverV3-6899e1b2.js → OrFilterPopoverV3-7b645a22.js}

@@ -63,10 +63,6 @@ var script = defineComponent({
       type: String,
       default: undefined
     },
-    enableDesktopControls: {
-      type: Boolean,
-      default: false
-    },
     offset: {
       type: [Number, Object, Function],
       default: 8
@@ -134,7 +130,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     placement: _ctx.placement,
     "fallback-placement": _ctx.fallbackPlacement,
     offset: _ctx.offset,
-    "onUpdate:state": _cache[3] || (_cache[3] = $event => $event === 'open' ? _ctx.open() : _ctx.close())
+    "onUpdate:state": _cache[1] || (_cache[1] = $event => $event === 'open' ? _ctx.open() : _ctx.close())
   }, {
     default: withCtx(() => [createElementVNode("div", mergeProps(_ctx.$attrs, {
       ref: 'root',
@@ -152,29 +148,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       reset: _ctx.reset,
       isDesktop: _ctx.isDesktop,
       isMobile: _ctx.isMobile
-    })), () => [_ctx.enableDesktopControls ? (openBlock(), createElementBlock("div", {
-      key: 0,
-      class: normalizeClass(_ctx.footerStyles)
-    }, [createVNode(_component_OrButton, {
-      class: normalizeClass(['grow']),
-      variant: 'contained',
-      onClick: _cache[1] || (_cache[1] = $event => _ctx.apply())
-    }, {
-      default: withCtx(() => [createTextVNode(toDisplayString(_ctx.applyLabel), 1 /* TEXT */)]),
-      _: 1 /* STABLE */
-    }), createVNode(_component_OrButton, {
-      class: normalizeClass(['grow']),
-      variant: 'outlined',
-      onClick: _cache[2] || (_cache[2] = $event => _ctx.reset())
-    }, {
-      default: withCtx(() => [createTextVNode(toDisplayString(_ctx.resetLabel), 1 /* TEXT */)]),
-      _: 1 /* STABLE */
-    })], 2 /* CLASS */)) : createCommentVNode("v-if", true)])], 16 /* FULL_PROPS */)]),
+    })))], 16 /* FULL_PROPS */)]),
     _: 3 /* FORWARDED */
   }, 8 /* PROPS */, ["is-open", "trigger", "placement", "fallback-placement", "offset"])) : createCommentVNode("v-if", true), _ctx.isMobile ? (openBlock(), createBlock(_component_OrModal, {
     key: 1,
     "is-open": _ctx.state === 'open',
-    "onUpdate:state": _cache[6] || (_cache[6] = $event => $event === 'open' ? _ctx.open() : _ctx.close())
+    "onUpdate:state": _cache[4] || (_cache[4] = $event => $event === 'open' ? _ctx.open() : _ctx.close())
   }, {
     header: withCtx(() => [createTextVNode(toDisplayString(_ctx.title), 1 /* TEXT */)]),
     footer: withCtx(() => [renderSlot(_ctx.$slots, 'actions', normalizeProps(guardReactiveProps({
@@ -187,14 +166,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     }, [createVNode(_component_OrButton, {
       class: normalizeClass(['grow']),
       variant: 'contained',
-      onClick: _cache[4] || (_cache[4] = $event => _ctx.apply())
+      onClick: _cache[2] || (_cache[2] = $event => _ctx.apply())
     }, {
       default: withCtx(() => [createTextVNode(toDisplayString(_ctx.applyLabel), 1 /* TEXT */)]),
       _: 1 /* STABLE */
     }), createVNode(_component_OrButton, {
       class: normalizeClass(['grow']),
       variant: 'outlined',
-      onClick: _cache[5] || (_cache[5] = $event => _ctx.reset())
+      onClick: _cache[3] || (_cache[3] = $event => _ctx.reset())
     }, {
       default: withCtx(() => [createTextVNode(toDisplayString(_ctx.resetLabel), 1 /* TEXT */)]),
       _: 1 /* STABLE */

package/dist/bundled/v3/components/OrFilterV3/OrFilter.js

@@ -1 +1 @@
-export { s as default } from '../OrFilterV3-a48ae51c.js';
+export { s as default } from '../OrFilterV3-e4db0097.js';

package/dist/bundled/v3/components/OrFilterV3/index.js

@@ -1 +1 @@
-export { s as OrFilterV3 } from '../OrFilterV3-a48ae51c.js';
+export { s as OrFilterV3 } from '../OrFilterV3-e4db0097.js';

package/dist/bundled/v3/components/OrFilterV3/styles.js

@@ -1 +1 @@
-export { F as Filter } from '../OrFilterV3-a48ae51c.js';
+export { F as Filter } from '../OrFilterV3-e4db0097.js';

package/dist/bundled/v3/components/{OrFilterV3-a48ae51c.js → OrFilterV3-e4db0097.js}

@@ -1,6 +1,6 @@
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, mergeProps, withCtx, renderSlot, normalizeProps, guardReactiveProps } from 'vue';
 import { defineComponent, ref, computed, toRef } from 'vue-demi';
-import { s as script$1 } from './OrFilterPopoverV3-6899e1b2.js';
+import { s as script$1 } from './OrFilterPopoverV3-7b645a22.js';
 import { s as script$2 } from './OrFilterTriggerV3-72ea800e.js';
 import { usePopoverState } from '../hooks/usePopoverState.js';
 

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

@@ -32,7 +32,7 @@ export { s as OrDateTimeFormatV3 } from './OrDateTimeFormatV3-295547f5.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, n as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-30ec840a.js';
 export { a as OrDateTimePickerDateControl, b as OrDateTimePickerDateSelect, c as OrDateTimePickerMobileControl, d as OrDateTimePickerMonthSelect, e as OrDateTimePickerPopoverFooter, g as OrDateTimePickerPopoverHeader, l as OrDateTimePickerTimeControl, m as OrDateTimePickerTimeSelect, s as OrDateTimePickerV3, f as formatDate, i as formatMobileDate, n as formatMobileTime, k as formatTime, h as getCurrentDate, j as getNextMonthDate } from './OrDateTimePickerV3-a996d0ed.js';
 export { D as DrawerPlacement, s as OrDrawerV3 } from './OrDrawerV3-28a3fff2.js';
-export { D as DropAreaSize, s as OrDropAreaV3, a as approximateFileSize } from './OrDropAreaV3-cf5ef7d5.js';
+export { D as DropAreaSize, s as OrDropAreaV3, a as approximateFileSize } from './OrDropAreaV3-a9883f18.js';
 export { E as EditorTabsOverflow, s as OrEditorTabsV3 } from './OrEditorTabsV3-dd261195.js';
 export { E as EmptyStateSize, s as OrEmptyStateV3 } from './OrEmptyStateV3-af47ab45.js';
 export { default as OrError } from './OrError/OrError.js';
@@ -40,9 +40,9 @@ export { s as OrErrorTagV3 } from './OrErrorTagV3-1b00b9d5.js';
 export { s as OrErrorV3 } from './OrErrorV3-b04d76aa.js';
 export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from './OrExpansionPanelV3-484e7326.js';
 export { F as FabColor, s as OrFabV3 } from './OrFabV3-86cf1da1.js';
-export { s as OrFilterPopoverV3 } from './OrFilterPopoverV3-6899e1b2.js';
+export { s as OrFilterPopoverV3 } from './OrFilterPopoverV3-7b645a22.js';
 export { s as OrFilterTriggerV3 } from './OrFilterTriggerV3-72ea800e.js';
-export { s as OrFilterV3 } from './OrFilterV3-a48ae51c.js';
+export { s as OrFilterV3 } from './OrFilterV3-e4db0097.js';
 export { s as OrFloating, e as OrFloatingHideStrategy, O as OrFloatingPlacements } from './OrFloating-b1742993.js';
 export { F as FormGroupDirection, s as OrFormGroupV3 } from './OrFormGroupV3-c0c2a946.js';
 export { default as OrHint } from './OrHint/OrHint.js';

package/dist/bundled/v3/index.js

@@ -22,12 +22,12 @@ export { s as OrDateRangePickerV3 } from './components/OrDateRangePickerV3-90be1
 export { s as OrDateTimeFormatV3 } from './components/OrDateTimeFormatV3-295547f5.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, n as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './components/OrDateTimePicker-30ec840a.js';
 export { D as DrawerPlacement, s as OrDrawerV3 } from './components/OrDrawerV3-28a3fff2.js';
-export { D as DropAreaSize, s as OrDropAreaV3, a as approximateFileSize } from './components/OrDropAreaV3-cf5ef7d5.js';
+export { D as DropAreaSize, s as OrDropAreaV3, a as approximateFileSize } from './components/OrDropAreaV3-a9883f18.js';
 export { E as EditorTabsOverflow, s as OrEditorTabsV3 } from './components/OrEditorTabsV3-dd261195.js';
 export { E as EmptyStateSize, s as OrEmptyStateV3 } from './components/OrEmptyStateV3-af47ab45.js';
 export { s as OrErrorTagV3 } from './components/OrErrorTagV3-1b00b9d5.js';
 export { F as FabColor, s as OrFabV3 } from './components/OrFabV3-86cf1da1.js';
-export { s as OrFilterV3 } from './components/OrFilterV3-a48ae51c.js';
+export { s as OrFilterV3 } from './components/OrFilterV3-e4db0097.js';
 export { I as InlineInputType, s as OrInlineInputV3 } from './components/OrInlineInputV3-35ae654c.js';
 export { InlineTextEditTrimmingTypes, InlineTextEditTypes, OrInlineTextEdit } from './components/OrInlineTextEdit/index.js';
 export { s as OrInlineTextareaV3 } from './components/OrInlineTextareaV3-c03fab60.js';
@@ -84,7 +84,7 @@ export { a as OrDateTimePickerDateControl, b as OrDateTimePickerDateSelect, c as
 export { default as OrError } from './components/OrError/OrError.js';
 export { s as OrErrorV3 } from './components/OrErrorV3-b04d76aa.js';
 export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from './components/OrExpansionPanelV3-484e7326.js';
-export { s as OrFilterPopoverV3 } from './components/OrFilterPopoverV3-6899e1b2.js';
+export { s as OrFilterPopoverV3 } from './components/OrFilterPopoverV3-7b645a22.js';
 export { s as OrFilterTriggerV3 } from './components/OrFilterTriggerV3-72ea800e.js';
 export { s as OrFloating, e as OrFloatingHideStrategy, O as OrFloatingPlacements } from './components/OrFloating-b1742993.js';
 export { F as FormGroupDirection, s as OrFormGroupV3 } from './components/OrFormGroupV3-c0c2a946.js';

package/dist/esm/v2/{OrDropArea-7cf24c23.js → OrDropArea-78f52187.js}

@@ -119,6 +119,10 @@ var script = defineComponent({
     disabled: {
       type: Boolean,
       default: false
+    },
+    error: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['update:modelValue'],
@@ -135,13 +139,34 @@ var script = defineComponent({
     const constraintsStyles = computed(() => [...DropAreaConstraints]);
     // State
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const accept = computed(() => {
+      if (!props.fileTypes || !Array.isArray(props.fileTypes)) return '';
+      return props.fileTypes.join(',');
+    });
     const invalid = computed(() => {
-      if (props.fileTypes.length > 0 && proxyModelValue.value.some(file => !props.fileTypes.includes(file.type))) {
+      /* External error */
+      if (props.error) return true;
+      /* No validation provided */
+      if (!props.fileTypes) return false;
+      /* File type match: strict and non-strict MIME-type comparison */
+      if (props.fileTypes.length > 0 && proxyModelValue.value.some(file => {
+        let match = props.fileTypes.some(fileType => {
+          if (fileType.match(/\/\*$/)) {
+            const baseType = fileType.replace('/*', '');
+            return file.type.indexOf(baseType) !== -1;
+          } else {
+            return file.type === fileType;
+          }
+        });
+        return !match;
+      })) {
         return true;
       }
+      /* Files count */
       if (proxyModelValue.value.length > props.maxFiles) {
         return true;
       }
+      /* File size */
       if (proxyModelValue.value.some(file => file.size > props.maxFileSize)) {
         return true;
       }
@@ -165,6 +190,7 @@ var script = defineComponent({
       textEmphasisStyles,
       constraintsStyles,
       proxyModelValue,
+      accept,
       invalid,
       onChange,
       isDesktop,
@@ -193,7 +219,7 @@ var __vue_render__ = function () {
     class: _vm.controlStyles,
     attrs: {
       "type": 'file',
-      "accept": _vm.fileTypes.join(','),
+      "accept": _vm.accept,
       "multiple": _vm.maxFiles > 1,
       "disabled": _vm.disabled
     },

package/dist/esm/v2/{OrFilter-140e4850.js → OrFilter-3ed01d2f.js}

@@ -5,7 +5,7 @@ import '@vueuse/core';
 import { u as usePopoverState } from './usePopoverState-7267fa91.js';
 import '@onereach/styles/screens.json';
 import '@onereach/styles/tailwind.config.json';
-import { _ as __vue_component__$1 } from './OrFilterPopover-a3bb9348.js';
+import { _ as __vue_component__$1 } from './OrFilterPopover-36bc0e6d.js';
 import { _ as __vue_component__$2 } from './OrFilterTrigger-1e4aa34c.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/esm/v2/{OrFilterPopover-a3bb9348.js → OrFilterPopover-36bc0e6d.js}

@@ -68,10 +68,6 @@ var script = defineComponent({
       type: String,
       default: undefined
     },
-    enableDesktopControls: {
-      type: Boolean,
-      default: false
-    },
     offset: {
       type: [Number, Object, Function],
       default: 8
@@ -161,31 +157,7 @@ var __vue_render__ = function () {
         return _vm.reset();
       }
     }
-  }, [_vm._v("\n            " + _vm._s(_vm.resetLabel) + "\n          ")])], 1), _vm._v(" "), _vm._t("default"), _vm._v(" "), _vm._t('actions', function () {
-    return [_vm.enableDesktopControls ? _c('div', {
-      class: _vm.footerStyles
-    }, [_c('OrButton', {
-      class: ['grow'],
-      attrs: {
-        "variant": 'contained'
-      },
-      on: {
-        "click": function ($event) {
-          return _vm.apply();
-        }
-      }
-    }, [_vm._v("\n              " + _vm._s(_vm.applyLabel) + "\n            ")]), _vm._v(" "), _c('OrButton', {
-      class: ['grow'],
-      attrs: {
-        "variant": 'outlined'
-      },
-      on: {
-        "click": function ($event) {
-          return _vm.reset();
-        }
-      }
-    }, [_vm._v("\n              " + _vm._s(_vm.resetLabel) + "\n            ")])], 1) : _vm._e()];
-  }, null, {
+  }, [_vm._v("\n            " + _vm._s(_vm.resetLabel) + "\n          ")])], 1), _vm._v(" "), _vm._t("default"), _vm._v(" "), _vm._t('actions', null, null, {
     apply: _vm.apply,
     reset: _vm.reset,
     isDesktop: _vm.isDesktop,

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

@@ -47,7 +47,7 @@ export { f as formatDate, a as formatTime } from '../formatTime-3f37a00f.js';
 export { f as formatMobileDate, a as formatMobileTime, g as getCurrentDate } from '../getCurrentDate-e5a478c3.js';
 export { g as getNextMonthDate } from '../getNextMonthDate-8ec29631.js';
 export { D as DrawerPlacement, _ as OrDrawerV3 } from '../OrDrawer-ac6cdc09.js';
-export { D as DropAreaSize, _ as OrDropAreaV3 } from '../OrDropArea-7cf24c23.js';
+export { D as DropAreaSize, _ as OrDropAreaV3 } from '../OrDropArea-78f52187.js';
 export { a as approximateFileSize } from '../approximateFileSize-a48b356b.js';
 export { E as EditorTabsOverflow, _ as OrEditorTabsV3 } from '../OrEditorTabs-17d79ae1.js';
 export { E as EmptyStateSize, _ as OrEmptyStateV3 } from '../OrEmptyState-186f7abc.js';
@@ -56,9 +56,9 @@ export { _ as OrErrorTagV3 } from '../OrErrorTag-fb59988e.js';
 export { _ as OrErrorV3 } from '../OrError-b25d782d.js';
 export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, _ as OrExpansionPanelV3 } from '../OrExpansionPanel-c10defa5.js';
 export { F as FabColor, _ as OrFabV3 } from '../OrFab-26e22be7.js';
-export { _ as OrFilterPopoverV3 } from '../OrFilterPopover-a3bb9348.js';
+export { _ as OrFilterPopoverV3 } from '../OrFilterPopover-36bc0e6d.js';
 export { _ as OrFilterTriggerV3 } from '../OrFilterTrigger-1e4aa34c.js';
-export { _ as OrFilterV3 } from '../OrFilter-140e4850.js';
+export { _ as OrFilterV3 } from '../OrFilter-3ed01d2f.js';
 export { _ as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from '../OrFloating-517737ad.js';
 export { F as FormGroupDirection, _ as OrFormGroupV3 } from '../OrFormGroup-a814b820.js';
 export { _ as OrHint } from '../OrHint-7eadc91e.js';

package/dist/esm/v2/components/or-drop-area-v3/OrDropArea.vue.d.ts

@@ -26,6 +26,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     root: import("vue-demi").Ref<HTMLElement | undefined>;
     rootStyles: import("vue-demi").ComputedRef<string[]>;
@@ -35,6 +39,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     textEmphasisStyles: import("vue-demi").ComputedRef<string[]>;
     constraintsStyles: import("vue-demi").ComputedRef<string[]>;
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<File[]>;
+    accept: import("vue-demi").ComputedRef<string>;
     invalid: import("vue-demi").ComputedRef<boolean>;
     onChange: (event: Event) => void;
     isDesktop: import("vue-demi").ComputedRef<boolean>;
@@ -65,6 +70,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
@@ -74,5 +83,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     maxFileSize: number;
     size: "m" | "s";
     disabled: boolean;
+    error: boolean;
 }>;
 export default _default;

package/dist/esm/v2/components/or-drop-area-v3/index.js

@@ -1,4 +1,4 @@
-export { D as DropAreaSize, _ as OrDropAreaV3 } from '../../OrDropArea-7cf24c23.js';
+export { D as DropAreaSize, _ as OrDropAreaV3 } from '../../OrDropArea-78f52187.js';
 export { a as approximateFileSize } from '../../approximateFileSize-a48b356b.js';
 import 'vue-demi';
 import '../../TimeFormat-a7f5565b.js';

package/dist/esm/v2/components/or-filter-popover-v3/OrFilterPopover.vue.d.ts

@@ -30,10 +30,6 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<"none" | "start" | "end" | undefined>;
         default: undefined;
     };
-    enableDesktopControls: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     offset: {
         type: PropType<PopoverOffset>;
         default: number;
@@ -80,10 +76,6 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<"none" | "start" | "end" | undefined>;
         default: undefined;
     };
-    enableDesktopControls: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     offset: {
         type: PropType<PopoverOffset>;
         default: number;
@@ -102,7 +94,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     trigger: ReferenceElement;
     placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
     fallbackPlacement: "none" | "start" | "end" | undefined;
-    enableDesktopControls: boolean;
     offset: PopoverOffset;
 }>;
 export default _default;

package/dist/esm/v2/components/or-filter-popover-v3/index.js

@@ -1,4 +1,4 @@
-export { _ as OrFilterPopoverV3 } from '../../OrFilterPopover-a3bb9348.js';
+export { _ as OrFilterPopoverV3 } from '../../OrFilterPopover-36bc0e6d.js';
 import 'vue-demi';
 import '../../TimeFormat-a7f5565b.js';
 import '../../dom-53c9635b.js';

package/dist/esm/v2/components/or-filter-v3/index.js

@@ -1,4 +1,4 @@
-export { _ as OrFilterV3 } from '../../OrFilter-140e4850.js';
+export { _ as OrFilterV3 } from '../../OrFilter-3ed01d2f.js';
 import 'vue-demi';
 import '../../TimeFormat-a7f5565b.js';
 import '../../dom-53c9635b.js';
@@ -8,7 +8,7 @@ import '@vueuse/core';
 import '../../usePopoverState-7267fa91.js';
 import '@onereach/styles/screens.json';
 import '@onereach/styles/tailwind.config.json';
-import '../../OrFilterPopover-a3bb9348.js';
+import '../../OrFilterPopover-36bc0e6d.js';
 import '../../useResponsive-491da8c6.js';
 import '../../OrButton-01ca6705.js';
 import '../../OrButton.vue_rollup-plugin-vue_script-0b37151a.js';

package/dist/esm/v2/index.js

@@ -47,7 +47,7 @@ export { f as formatDate, a as formatTime } from './formatTime-3f37a00f.js';
 export { f as formatMobileDate, a as formatMobileTime, g as getCurrentDate } from './getCurrentDate-e5a478c3.js';
 export { g as getNextMonthDate } from './getNextMonthDate-8ec29631.js';
 export { D as DrawerPlacement, _ as OrDrawerV3 } from './OrDrawer-ac6cdc09.js';
-export { D as DropAreaSize, _ as OrDropAreaV3 } from './OrDropArea-7cf24c23.js';
+export { D as DropAreaSize, _ as OrDropAreaV3 } from './OrDropArea-78f52187.js';
 export { a as approximateFileSize } from './approximateFileSize-a48b356b.js';
 export { E as EditorTabsOverflow, _ as OrEditorTabsV3 } from './OrEditorTabs-17d79ae1.js';
 export { E as EmptyStateSize, _ as OrEmptyStateV3 } from './OrEmptyState-186f7abc.js';
@@ -56,9 +56,9 @@ export { _ as OrErrorTagV3 } from './OrErrorTag-fb59988e.js';
 export { _ as OrErrorV3 } from './OrError-b25d782d.js';
 export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, _ as OrExpansionPanelV3 } from './OrExpansionPanel-c10defa5.js';
 export { F as FabColor, _ as OrFabV3 } from './OrFab-26e22be7.js';
-export { _ as OrFilterPopoverV3 } from './OrFilterPopover-a3bb9348.js';
+export { _ as OrFilterPopoverV3 } from './OrFilterPopover-36bc0e6d.js';
 export { _ as OrFilterTriggerV3 } from './OrFilterTrigger-1e4aa34c.js';
-export { _ as OrFilterV3 } from './OrFilter-140e4850.js';
+export { _ as OrFilterV3 } from './OrFilter-3ed01d2f.js';
 export { _ as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from './OrFloating-517737ad.js';
 export { F as FormGroupDirection, _ as OrFormGroupV3 } from './OrFormGroup-a814b820.js';
 export { _ as OrHint } from './OrHint-7eadc91e.js';

package/dist/esm/v3/{OrDropArea-24fe94e7.js → OrDropArea-8b3fc35c.js}

@@ -119,6 +119,10 @@ var script = defineComponent({
     disabled: {
       type: Boolean,
       default: false
+    },
+    error: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['update:modelValue'],
@@ -135,13 +139,34 @@ var script = defineComponent({
     const constraintsStyles = computed(() => [...DropAreaConstraints]);
     // State
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const accept = computed(() => {
+      if (!props.fileTypes || !Array.isArray(props.fileTypes)) return '';
+      return props.fileTypes.join(',');
+    });
     const invalid = computed(() => {
-      if (props.fileTypes.length > 0 && proxyModelValue.value.some(file => !props.fileTypes.includes(file.type))) {
+      /* External error */
+      if (props.error) return true;
+      /* No validation provided */
+      if (!props.fileTypes) return false;
+      /* File type match: strict and non-strict MIME-type comparison */
+      if (props.fileTypes.length > 0 && proxyModelValue.value.some(file => {
+        let match = props.fileTypes.some(fileType => {
+          if (fileType.match(/\/\*$/)) {
+            const baseType = fileType.replace('/*', '');
+            return file.type.indexOf(baseType) !== -1;
+          } else {
+            return file.type === fileType;
+          }
+        });
+        return !match;
+      })) {
         return true;
       }
+      /* Files count */
       if (proxyModelValue.value.length > props.maxFiles) {
         return true;
       }
+      /* File size */
       if (proxyModelValue.value.some(file => file.size > props.maxFileSize)) {
         return true;
       }
@@ -165,6 +190,7 @@ var script = defineComponent({
       textEmphasisStyles,
       constraintsStyles,
       proxyModelValue,
+      accept,
       invalid,
       onChange,
       isDesktop,
@@ -192,7 +218,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, [createElementVNode("input", {
     class: normalizeClass(_ctx.controlStyles),
     type: 'file',
-    accept: _ctx.fileTypes.join(','),
+    accept: _ctx.accept,
     multiple: _ctx.maxFiles > 1,
     disabled: _ctx.disabled,
     onChange: _cache[0] || (_cache[0] = $event => _ctx.onChange($event))

package/dist/esm/v3/{OrFilter-d3b39b0d.js → OrFilter-b38dcd0e.js}

@@ -5,7 +5,7 @@ import '@vueuse/core';
 import { u as usePopoverState } from './usePopoverState-7267fa91.js';
 import '@onereach/styles/screens.json';
 import '@onereach/styles/tailwind.config.json';
-import { s as script$1 } from './OrFilterPopover-28255b45.js';
+import { s as script$1 } from './OrFilterPopover-624150ff.js';
 import { s as script$2 } from './OrFilterTrigger-7fe3a2dc.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, mergeProps, withCtx, renderSlot, normalizeProps, guardReactiveProps } from 'vue';
 

package/dist/esm/v3/{OrFilterPopover-28255b45.js → OrFilterPopover-624150ff.js}

@@ -67,10 +67,6 @@ var script = defineComponent({
       type: String,
       default: undefined
     },
-    enableDesktopControls: {
-      type: Boolean,
-      default: false
-    },
     offset: {
       type: [Number, Object, Function],
       default: 8
@@ -138,7 +134,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     placement: _ctx.placement,
     "fallback-placement": _ctx.fallbackPlacement,
     offset: _ctx.offset,
-    "onUpdate:state": _cache[3] || (_cache[3] = $event => $event === 'open' ? _ctx.open() : _ctx.close())
+    "onUpdate:state": _cache[1] || (_cache[1] = $event => $event === 'open' ? _ctx.open() : _ctx.close())
   }, {
     default: withCtx(() => [createElementVNode("div", mergeProps(_ctx.$attrs, {
       ref: 'root',
@@ -156,29 +152,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       reset: _ctx.reset,
       isDesktop: _ctx.isDesktop,
       isMobile: _ctx.isMobile
-    })), () => [_ctx.enableDesktopControls ? (openBlock(), createElementBlock("div", {
-      key: 0,
-      class: normalizeClass(_ctx.footerStyles)
-    }, [createVNode(_component_OrButton, {
-      class: normalizeClass(['grow']),
-      variant: 'contained',
-      onClick: _cache[1] || (_cache[1] = $event => _ctx.apply())
-    }, {
-      default: withCtx(() => [createTextVNode(toDisplayString(_ctx.applyLabel), 1 /* TEXT */)]),
-      _: 1 /* STABLE */
-    }), createVNode(_component_OrButton, {
-      class: normalizeClass(['grow']),
-      variant: 'outlined',
-      onClick: _cache[2] || (_cache[2] = $event => _ctx.reset())
-    }, {
-      default: withCtx(() => [createTextVNode(toDisplayString(_ctx.resetLabel), 1 /* TEXT */)]),
-      _: 1 /* STABLE */
-    })], 2 /* CLASS */)) : createCommentVNode("v-if", true)])], 16 /* FULL_PROPS */)]),
+    })))], 16 /* FULL_PROPS */)]),
     _: 3 /* FORWARDED */
   }, 8 /* PROPS */, ["is-open", "trigger", "placement", "fallback-placement", "offset"])) : createCommentVNode("v-if", true), _ctx.isMobile ? (openBlock(), createBlock(_component_OrModal, {
     key: 1,
     "is-open": _ctx.state === 'open',
-    "onUpdate:state": _cache[6] || (_cache[6] = $event => $event === 'open' ? _ctx.open() : _ctx.close())
+    "onUpdate:state": _cache[4] || (_cache[4] = $event => $event === 'open' ? _ctx.open() : _ctx.close())
   }, {
     header: withCtx(() => [createTextVNode(toDisplayString(_ctx.title), 1 /* TEXT */)]),
     footer: withCtx(() => [renderSlot(_ctx.$slots, 'actions', normalizeProps(guardReactiveProps({
@@ -191,14 +170,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     }, [createVNode(_component_OrButton, {
       class: normalizeClass(['grow']),
       variant: 'contained',
-      onClick: _cache[4] || (_cache[4] = $event => _ctx.apply())
+      onClick: _cache[2] || (_cache[2] = $event => _ctx.apply())
     }, {
       default: withCtx(() => [createTextVNode(toDisplayString(_ctx.applyLabel), 1 /* TEXT */)]),
       _: 1 /* STABLE */
     }), createVNode(_component_OrButton, {
       class: normalizeClass(['grow']),
       variant: 'outlined',
-      onClick: _cache[5] || (_cache[5] = $event => _ctx.reset())
+      onClick: _cache[3] || (_cache[3] = $event => _ctx.reset())
     }, {
       default: withCtx(() => [createTextVNode(toDisplayString(_ctx.resetLabel), 1 /* TEXT */)]),
       _: 1 /* STABLE */

package/dist/esm/v3/components/index.js

@@ -45,7 +45,7 @@ export { f as formatDate, a as formatTime } from '../formatTime-3f37a00f.js';
 export { f as formatMobileDate, a as formatMobileTime, g as getCurrentDate } from '../getCurrentDate-e5a478c3.js';
 export { g as getNextMonthDate } from '../getNextMonthDate-8ec29631.js';
 export { D as DrawerPlacement, s as OrDrawerV3 } from '../OrDrawer-f12faf1a.js';
-export { D as DropAreaSize, s as OrDropAreaV3 } from '../OrDropArea-24fe94e7.js';
+export { D as DropAreaSize, s as OrDropAreaV3 } from '../OrDropArea-8b3fc35c.js';
 export { a as approximateFileSize } from '../approximateFileSize-a48b356b.js';
 export { E as EditorTabsOverflow, s as OrEditorTabsV3 } from '../OrEditorTabs-d5779ee7.js';
 export { E as EmptyStateSize, s as OrEmptyStateV3 } from '../OrEmptyState-47f9d910.js';
@@ -54,9 +54,9 @@ export { s as OrErrorTagV3 } from '../OrErrorTag-94f074a2.js';
 export { s as OrErrorV3 } from '../OrError-331220bc.js';
 export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from '../OrExpansionPanel-99c697c1.js';
 export { F as FabColor, s as OrFabV3 } from '../OrFab-f949bf4f.js';
-export { s as OrFilterPopoverV3 } from '../OrFilterPopover-28255b45.js';
+export { s as OrFilterPopoverV3 } from '../OrFilterPopover-624150ff.js';
 export { s as OrFilterTriggerV3 } from '../OrFilterTrigger-7fe3a2dc.js';
-export { s as OrFilterV3 } from '../OrFilter-d3b39b0d.js';
+export { s as OrFilterV3 } from '../OrFilter-b38dcd0e.js';
 export { s as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from '../OrFloating-00617713.js';
 export { F as FormGroupDirection, s as OrFormGroupV3 } from '../OrFormGroup-893719a1.js';
 export { s as OrHint } from '../OrHint-8822005b.js';

package/dist/esm/v3/components/or-drop-area-v3/OrDropArea.vue.d.ts

@@ -26,6 +26,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     root: import("vue-demi").Ref<HTMLElement | undefined>;
     rootStyles: import("vue-demi").ComputedRef<string[]>;
@@ -35,6 +39,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     textEmphasisStyles: import("vue-demi").ComputedRef<string[]>;
     constraintsStyles: import("vue-demi").ComputedRef<string[]>;
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<File[]>;
+    accept: import("vue-demi").ComputedRef<string>;
     invalid: import("vue-demi").ComputedRef<boolean>;
     onChange: (event: Event) => void;
     isDesktop: import("vue-demi").ComputedRef<boolean>;
@@ -65,6 +70,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
@@ -74,5 +83,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     maxFileSize: number;
     size: "m" | "s";
     disabled: boolean;
+    error: boolean;
 }>;
 export default _default;

package/dist/esm/v3/components/or-drop-area-v3/index.js

@@ -1,4 +1,4 @@
-export { D as DropAreaSize, s as OrDropAreaV3 } from '../../OrDropArea-24fe94e7.js';
+export { D as DropAreaSize, s as OrDropAreaV3 } from '../../OrDropArea-8b3fc35c.js';
 export { a as approximateFileSize } from '../../approximateFileSize-a48b356b.js';
 import 'vue-demi';
 import '../../TimeFormat-a7f5565b.js';

package/dist/esm/v3/components/or-filter-popover-v3/OrFilterPopover.vue.d.ts

@@ -30,10 +30,6 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<"none" | "start" | "end" | undefined>;
         default: undefined;
     };
-    enableDesktopControls: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     offset: {
         type: PropType<PopoverOffset>;
         default: number;
@@ -80,10 +76,6 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<"none" | "start" | "end" | undefined>;
         default: undefined;
     };
-    enableDesktopControls: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     offset: {
         type: PropType<PopoverOffset>;
         default: number;
@@ -102,7 +94,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     trigger: ReferenceElement;
     placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
     fallbackPlacement: "none" | "start" | "end" | undefined;
-    enableDesktopControls: boolean;
     offset: PopoverOffset;
 }>;
 export default _default;

package/dist/esm/v3/components/or-filter-popover-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrFilterPopoverV3 } from '../../OrFilterPopover-28255b45.js';
+export { s as OrFilterPopoverV3 } from '../../OrFilterPopover-624150ff.js';
 import 'vue-demi';
 import '../../TimeFormat-a7f5565b.js';
 import '../../dom-53c9635b.js';

package/dist/esm/v3/components/or-filter-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrFilterV3 } from '../../OrFilter-d3b39b0d.js';
+export { s as OrFilterV3 } from '../../OrFilter-b38dcd0e.js';
 import 'vue-demi';
 import '../../TimeFormat-a7f5565b.js';
 import '../../dom-53c9635b.js';
@@ -8,7 +8,7 @@ import '@vueuse/core';
 import '../../usePopoverState-7267fa91.js';
 import '@onereach/styles/screens.json';
 import '@onereach/styles/tailwind.config.json';
-import '../../OrFilterPopover-28255b45.js';
+import '../../OrFilterPopover-624150ff.js';
 import '../../useResponsive-491da8c6.js';
 import '../../OrButton-9154d1be.js';
 import '../../OrLoader-472e965e.js';

package/dist/esm/v3/index.js

@@ -45,7 +45,7 @@ export { f as formatDate, a as formatTime } from './formatTime-3f37a00f.js';
 export { f as formatMobileDate, a as formatMobileTime, g as getCurrentDate } from './getCurrentDate-e5a478c3.js';
 export { g as getNextMonthDate } from './getNextMonthDate-8ec29631.js';
 export { D as DrawerPlacement, s as OrDrawerV3 } from './OrDrawer-f12faf1a.js';
-export { D as DropAreaSize, s as OrDropAreaV3 } from './OrDropArea-24fe94e7.js';
+export { D as DropAreaSize, s as OrDropAreaV3 } from './OrDropArea-8b3fc35c.js';
 export { a as approximateFileSize } from './approximateFileSize-a48b356b.js';
 export { E as EditorTabsOverflow, s as OrEditorTabsV3 } from './OrEditorTabs-d5779ee7.js';
 export { E as EmptyStateSize, s as OrEmptyStateV3 } from './OrEmptyState-47f9d910.js';
@@ -54,9 +54,9 @@ export { s as OrErrorTagV3 } from './OrErrorTag-94f074a2.js';
 export { s as OrErrorV3 } from './OrError-331220bc.js';
 export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from './OrExpansionPanel-99c697c1.js';
 export { F as FabColor, s as OrFabV3 } from './OrFab-f949bf4f.js';
-export { s as OrFilterPopoverV3 } from './OrFilterPopover-28255b45.js';
+export { s as OrFilterPopoverV3 } from './OrFilterPopover-624150ff.js';
 export { s as OrFilterTriggerV3 } from './OrFilterTrigger-7fe3a2dc.js';
-export { s as OrFilterV3 } from './OrFilter-d3b39b0d.js';
+export { s as OrFilterV3 } from './OrFilter-b38dcd0e.js';
 export { s as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from './OrFloating-00617713.js';
 export { F as FormGroupDirection, s as OrFormGroupV3 } from './OrFormGroup-893719a1.js';
 export { s as OrHint } from './OrHint-8822005b.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "17.2.0-beta.4881.0",
+  "version": "17.2.0-beta.4882.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,

package/src/components/or-drop-area-v3/OrDropArea.vue

@@ -8,7 +8,7 @@
     <input
       :class="controlStyles"
       :type="'file'"
-      :accept="fileTypes.join(',')"
+      :accept="accept"
       :multiple="maxFiles > 1"
       :disabled="disabled"
       @change="onChange($event)"
@@ -126,6 +126,11 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+
+    error: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   emits: [
@@ -173,15 +178,40 @@ export default defineComponent({
     // State
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
 
+    const accept = computed(() => {
+      if (!props.fileTypes || !Array.isArray(props.fileTypes)) return '';
+
+      return props.fileTypes.join(',');
+    });
+
     const invalid = computed(() => {
-      if (props.fileTypes.length > 0 && proxyModelValue.value.some((file) => !props.fileTypes.includes(file.type))) {
+      /* External error */
+      if (props.error) return true;
+
+      /* No validation provided */
+      if (!props.fileTypes) return false;
+
+      /* File type match: strict and non-strict MIME-type comparison */
+      if (props.fileTypes.length > 0 && proxyModelValue.value.some((file) => {
+        let match = props.fileTypes.some(fileType => {
+          if (fileType.match(/\/\*$/)) {
+            const baseType = fileType.replace('/*', '');
+            return file.type.indexOf(baseType) !== -1;
+          } else {
+            return file.type === fileType;
+          }
+        });
+        return !match;
+      })) {
         return true;
       }
 
+      /* Files count */
       if (proxyModelValue.value.length > props.maxFiles) {
         return true;
       }
 
+      /* File size */
       if (proxyModelValue.value.some((file) => file.size > props.maxFileSize)) {
         return true;
       }
@@ -208,6 +238,7 @@ export default defineComponent({
       constraintsStyles,
 
       proxyModelValue,
+      accept,
       invalid,
 
       onChange,

package/src/components/or-filter-popover-v3/OrFilterPopover.vue

@@ -33,28 +33,7 @@
           <slot
             v-bind="{ apply, reset, isDesktop, isMobile }"
             :name="'actions'"
-          >
-            <div
-              v-if="enableDesktopControls"
-              :class="footerStyles"
-            >
-              <OrButton
-                :class="['grow']"
-                :variant="'contained'"
-                @click="apply()"
-              >
-                {{ applyLabel }}
-              </OrButton>
-
-              <OrButton
-                :class="['grow']"
-                :variant="'outlined'"
-                @click="reset()"
-              >
-                {{ resetLabel }}
-              </OrButton>
-            </div>
-          </slot>
+          />
         </div>
       </OrPopover>
     </template>
@@ -161,11 +140,6 @@ export default defineComponent({
       default: undefined,
     },
 
-    enableDesktopControls: {
-      type: Boolean,
-      default: false,
-    },
-
     offset: {
       type: [Number, Object, Function] as PropType<PopoverOffset>,
       default: 8,