@onereach/ui-components 2.57.3 → 2.58.0

package/dist/v2/{OrSelect-a8e01683.js → OrSelect-f19c530e.js}

@@ -1,4 +1,4 @@
-import { defineComponent, getCurrentInstance, ref, computed, onMounted, watch } from 'vue-demi';
+import { isVue3, defineComponent, getCurrentInstance, ref, computed, onMounted, watch } from 'vue-demi';
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 import { u as useOverflow } from './useOverflow-ac506c65.js';
 import '@vueuse/core';
@@ -15,6 +15,31 @@ import { _ as __vue_component__$a } from './OrPopover-edd82c5d.js';
 import { _ as __vue_component__$b } from './OrTag-23de8510.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
+const created$1 = (element, binding) => {
+  element.addEventListener('keydown', event => {
+    event.preventDefault();
+    if (['Escape'].includes(event.key)) {
+      binding.value(event);
+    }
+  });
+};
+const DropdownClose = {
+  [isVue3 ? 'created' : 'bind']: created$1
+};
+
+const created = (element, binding) => {
+  element.addEventListener('keydown', event => {
+    event.preventDefault();
+    if (['Enter', ' '].includes(event.key)) {
+      binding.value(event);
+    }
+  });
+  element.addEventListener('click', binding.value);
+};
+const DropdownOpen = {
+  [isVue3 ? 'created' : 'bind']: created
+};
+
 const SelectRoot = [
 // Layout
 'flex', 'flex-col',
@@ -62,6 +87,10 @@ var script = defineComponent({
     OrPopover: __vue_component__$a,
     OrTag: __vue_component__$b
   },
+  directives: {
+    DropdownClose,
+    DropdownOpen
+  },
   inheritAttrs: false,
   props: {
     options: {
@@ -299,6 +328,17 @@ var __vue_render__ = function () {
       proxy: true
     }], null, true)
   }, [_vm._v("\n      " + _vm._s(_vm.label) + "\n\n      ")])] : _vm._e(), _vm._v(" "), _c('OrInputBox', {
+    directives: [{
+      name: "dropdown-open",
+      rawName: "v-dropdown-open",
+      value: _vm.open,
+      expression: "open"
+    }, {
+      name: "dropdown-close",
+      rawName: "v-dropdown-close",
+      value: _vm.close,
+      expression: "close"
+    }],
     ref: "inputBox",
     class: [_vm.popoverState === 'open' && 'rounded-b-[0]'],
     attrs: {
@@ -306,12 +346,6 @@ var __vue_render__ = function () {
       "invalid": _vm.invalid,
       "readonly": _vm.readonly,
       "disabled": _vm.disabled
-    },
-    on: {
-      "click": function ($event) {
-        $event.stopPropagation();
-        return _vm.open();
-      }
     }
   }, [_c('div', {
     ref: "control",
@@ -323,8 +357,7 @@ var __vue_render__ = function () {
     },
     on: {
       "focus": function ($event) {
-        _vm.$emit('focus', $event);
-        _vm.open();
+        return _vm.$emit('focus', $event);
       },
       "blur": function ($event) {
         return _vm.$emit('blur', $event);

package/dist/v2/directives/dropdown-close.d.ts

@@ -0,0 +1,4 @@
+import { DirectiveHook } from 'vue-demi';
+export declare const DropdownClose: {
+    [x: string]: DirectiveHook<any, import("vue-demi").VNode | null, any>;
+};

package/dist/v2/directives/dropdown-open.d.ts

@@ -0,0 +1,4 @@
+import { DirectiveHook } from 'vue-demi';
+export declare const DropdownOpen: {
+    [x: string]: DirectiveHook<any, import("vue-demi").VNode | null, any>;
+};

package/dist/v2/index.js

@@ -64,7 +64,7 @@ export { _ as OrRadioGroup } from './OrRadioGroup-11424644.js';
 export { _ as OrRadioV3 } from './OrRadio-fd743245.js';
 export { _ as OrSearchV3 } from './OrSearch-b12a8f48.js';
 export { _ as OrSelect } from './OrSelect-ea27a70e.js';
-export { _ as OrSelectV3 } from './OrSelect-a8e01683.js';
+export { _ as OrSelectV3 } from './OrSelect-f19c530e.js';
 export { _ as OrSidebar, O as OrSidebarSide } from './OrSidebar-feacf13a.js';
 export { O as OrSidebarPlacement, _ as OrSidebarV3 } from './OrSidebar-2522cce0.js';
 export { _ as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from './OrSkeletonText-38aef640.js';

package/dist/v2/index2.js

@@ -64,7 +64,7 @@ export { _ as OrRadioGroup } from './OrRadioGroup-11424644.js';
 export { _ as OrRadioV3 } from './OrRadio-fd743245.js';
 export { _ as OrSearchV3 } from './OrSearch-b12a8f48.js';
 export { _ as OrSelect } from './OrSelect-ea27a70e.js';
-export { _ as OrSelectV3 } from './OrSelect-a8e01683.js';
+export { _ as OrSelectV3 } from './OrSelect-f19c530e.js';
 export { _ as OrSidebar, O as OrSidebarSide } from './OrSidebar-feacf13a.js';
 export { O as OrSidebarPlacement, _ as OrSidebarV3 } from './OrSidebar-2522cce0.js';
 export { _ as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from './OrSkeletonText-38aef640.js';

package/dist/v2/index64.js

@@ -1,4 +1,4 @@
-export { _ as OrSelectV3 } from './OrSelect-a8e01683.js';
+export { _ as OrSelectV3 } from './OrSelect-f19c530e.js';
 export { a as SelectSize } from './OrInputBox-f4b747ab.js';
 import 'vue-demi';
 import './useClassAttribute-47fdb016.js';

package/dist/v3/{OrSelect-844b41c6.js → OrSelect-ce017f05.js}

@@ -1,4 +1,4 @@
-import { defineComponent, getCurrentInstance, ref, computed, onMounted, watch } from 'vue-demi';
+import { isVue3, defineComponent, getCurrentInstance, ref, computed, onMounted, watch } from 'vue-demi';
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 import { u as useOverflow } from './useOverflow-ac506c65.js';
 import '@vueuse/core';
@@ -13,7 +13,32 @@ import { s as script$8 } from './OrLabel-8cada750.js';
 import { s as script$9 } from './OrMenuItem-f7d575ba.js';
 import { s as script$a } from './OrPopover-5b07072d.js';
 import { s as script$b } from './OrTag-09cc3f1f.js';
-import { resolveComponent, openBlock, createElementBlock, mergeProps, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, normalizeClass, withModifiers, createElementVNode, Fragment, renderList } from 'vue';
+import { resolveComponent, resolveDirective, openBlock, createElementBlock, mergeProps, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, normalizeClass, createElementVNode, Fragment, renderList, createVNode, withModifiers } from 'vue';
+
+const created$1 = (element, binding) => {
+  element.addEventListener('keydown', event => {
+    event.preventDefault();
+    if (['Escape'].includes(event.key)) {
+      binding.value(event);
+    }
+  });
+};
+const DropdownClose = {
+  [isVue3 ? 'created' : 'bind']: created$1
+};
+
+const created = (element, binding) => {
+  element.addEventListener('keydown', event => {
+    event.preventDefault();
+    if (['Enter', ' '].includes(event.key)) {
+      binding.value(event);
+    }
+  });
+  element.addEventListener('click', binding.value);
+};
+const DropdownOpen = {
+  [isVue3 ? 'created' : 'bind']: created
+};
 
 const SelectRoot = [
 // Layout
@@ -62,6 +87,10 @@ var script = defineComponent({
     OrPopover: script$a,
     OrTag: script$b
   },
+  directives: {
+    DropdownClose,
+    DropdownOpen
+  },
   inheritAttrs: false,
   props: {
     options: {
@@ -286,6 +315,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrInputBox = resolveComponent("OrInputBox");
   const _component_OrHint = resolveComponent("OrHint");
   const _component_OrError = resolveComponent("OrError");
+  const _directive_dropdown_open = resolveDirective("dropdown-open");
+  const _directive_dropdown_close = resolveDirective("dropdown-close");
   return openBlock(), createElementBlock("div", mergeProps({
     ref: "root"
   }, _ctx.$attrs, {
@@ -301,14 +332,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     default: withCtx(() => [createTextVNode(toDisplayString(_ctx.label) + " ", 1 /* TEXT */)]),
 
     _: 3 /* FORWARDED */
-  }, 8 /* PROPS */, ["control-id", "required", "disabled"])) : createCommentVNode("v-if", true), createVNode(_component_OrInputBox, {
+  }, 8 /* PROPS */, ["control-id", "required", "disabled"])) : createCommentVNode("v-if", true), withDirectives((openBlock(), createBlock(_component_OrInputBox, {
     ref: "inputBox",
     class: normalizeClass([_ctx.popoverState === 'open' && 'rounded-b-[0]']),
     size: _ctx.size,
     invalid: _ctx.invalid,
     readonly: _ctx.readonly,
-    disabled: _ctx.disabled,
-    onClick: _cache[5] || (_cache[5] = withModifiers($event => _ctx.open(), ["stop"]))
+    disabled: _ctx.disabled
   }, {
     default: withCtx(() => [createElementVNode("div", {
       id: _ctx.controlId,
@@ -316,10 +346,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       class: normalizeClass(_ctx.controlStyles),
       tabindex: !_ctx.disabled ? 0 : null,
       disabled: _ctx.disabled,
-      onFocus: _cache[0] || (_cache[0] = $event => {
-        _ctx.$emit('focus', $event);
-        _ctx.open();
-      }),
+      onFocus: _cache[0] || (_cache[0] = $event => _ctx.$emit('focus', $event)),
       onBlur: _cache[1] || (_cache[1] = $event => _ctx.$emit('blur', $event))
     }, [_ctx.proxyModelValue && _ctx.proxyModelValue.length > 0 ? (openBlock(), createElementBlock(Fragment, {
       key: 0
@@ -457,7 +484,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       _: 3 /* FORWARDED */
     }, 8 /* PROPS */, ["class", "trigger"])]),
     _: 3 /* FORWARDED */
-  }, 8 /* PROPS */, ["class", "size", "invalid", "readonly", "disabled"]), !_ctx.invalid ? (openBlock(), createBlock(_component_OrHint, {
+  }, 8 /* PROPS */, ["class", "size", "invalid", "readonly", "disabled"])), [[_directive_dropdown_open, _ctx.open], [_directive_dropdown_close, _ctx.close]]), !_ctx.invalid ? (openBlock(), createBlock(_component_OrHint, {
     key: 1,
     disabled: _ctx.disabled
   }, {

package/dist/v3/directives/dropdown-close.d.ts

@@ -0,0 +1,4 @@
+import { DirectiveHook } from 'vue-demi';
+export declare const DropdownClose: {
+    [x: string]: DirectiveHook<any, import("vue-demi").VNode | null, any>;
+};

package/dist/v3/directives/dropdown-open.d.ts

@@ -0,0 +1,4 @@
+import { DirectiveHook } from 'vue-demi';
+export declare const DropdownOpen: {
+    [x: string]: DirectiveHook<any, import("vue-demi").VNode | null, any>;
+};

package/dist/v3/index.js

@@ -59,7 +59,7 @@ export { s as OrRadioGroup } from './OrRadioGroup-00785e41.js';
 export { s as OrRadioV3 } from './OrRadio-d7382a18.js';
 export { s as OrSearchV3 } from './OrSearch-565bd7b4.js';
 export { s as OrSelect } from './OrSelect-056731af.js';
-export { s as OrSelectV3 } from './OrSelect-844b41c6.js';
+export { s as OrSelectV3 } from './OrSelect-ce017f05.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-375c85a3.js';
 export { O as OrSidebarPlacement, s as OrSidebarV3 } from './OrSidebar-96f8b7c3.js';
 export { s as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from './OrSkeletonText-2b1610ce.js';

package/dist/v3/index2.js

@@ -59,7 +59,7 @@ export { s as OrRadioGroup } from './OrRadioGroup-00785e41.js';
 export { s as OrRadioV3 } from './OrRadio-d7382a18.js';
 export { s as OrSearchV3 } from './OrSearch-565bd7b4.js';
 export { s as OrSelect } from './OrSelect-056731af.js';
-export { s as OrSelectV3 } from './OrSelect-844b41c6.js';
+export { s as OrSelectV3 } from './OrSelect-ce017f05.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-375c85a3.js';
 export { O as OrSidebarPlacement, s as OrSidebarV3 } from './OrSidebar-96f8b7c3.js';
 export { s as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from './OrSkeletonText-2b1610ce.js';

package/dist/v3/index64.js

@@ -1,4 +1,4 @@
-export { s as OrSelectV3 } from './OrSelect-844b41c6.js';
+export { s as OrSelectV3 } from './OrSelect-ce017f05.js';
 export { a as SelectSize } from './OrInputBox-f44f1f5f.js';
 import 'vue-demi';
 import './useClassAttribute-47fdb016.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "2.57.3",
+  "version": "2.58.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -76,5 +76,5 @@
       "optional": true
     }
   },
-  "gitHead": "f7c32546489ccc36cc7a5a4cb97d2cfcafef3194"
+  "gitHead": "f22379d759685379741c721d6d1236575c75ab26"
 }

package/src/components/or-select-v3/OrSelect.vue

@@ -21,12 +21,13 @@
 
     <OrInputBox
       ref="inputBox"
+      v-dropdown-open="open"
+      v-dropdown-close="close"
       :class="[popoverState === 'open' && 'rounded-b-[0]']"
       :size="size"
       :invalid="invalid"
       :readonly="readonly"
       :disabled="disabled"
-      @click.stop="open()"
     >
       <div
         :id="controlId"
@@ -34,7 +35,7 @@
         :class="controlStyles"
         :tabindex="!disabled ? 0 : null"
         :disabled="disabled"
-        @focus="$emit('focus', $event); open()"
+        @focus="$emit('focus', $event)"
         @blur="$emit('blur', $event)"
       >
         <template v-if="proxyModelValue && proxyModelValue.length > 0">
@@ -207,6 +208,8 @@
 
 <script lang="ts">
 import { computed, defineComponent, getCurrentInstance, onMounted, PropType, ref, watch } from 'vue-demi';
+import { DropdownClose } from '../../directives/dropdown-close';
+import { DropdownOpen } from '../../directives/dropdown-open';
 import { useClassAttribute, useOverflow } from '../../hooks';
 import { OrCheckboxV3 as OrCheckbox } from '../or-checkbox-v3';
 import { OrErrorV3 as OrError } from '../or-error-v3';
@@ -240,6 +243,11 @@ export default defineComponent({
     OrTag,
   },
 
+  directives: {
+    DropdownClose,
+    DropdownOpen,
+  },
+
   inheritAttrs: false,
 
   props: {

package/src/directives/dropdown-close.ts

@@ -0,0 +1,15 @@
+import { DirectiveBinding, DirectiveHook, isVue3 } from 'vue-demi';
+
+const created: DirectiveHook = (element: HTMLElement, binding: DirectiveBinding<(event: Event) => void>) => {
+  element.addEventListener('keydown', (event) => {
+    event.preventDefault();
+
+    if (['Escape'].includes(event.key)) {
+      binding.value(event);
+    }
+  });
+};
+
+export const DropdownClose = {
+  [isVue3 ? 'created' : 'bind']: created,
+};

package/src/directives/dropdown-open.ts

@@ -0,0 +1,17 @@
+import { DirectiveBinding, DirectiveHook, isVue3 } from 'vue-demi';
+
+const created: DirectiveHook = (element: HTMLElement, binding: DirectiveBinding<(event: Event) => void>) => {
+  element.addEventListener('keydown', (event) => {
+    event.preventDefault();
+
+    if (['Enter', ' '].includes(event.key)) {
+      binding.value(event);
+    }
+  });
+
+  element.addEventListener('click', binding.value);
+};
+
+export const DropdownOpen = {
+  [isVue3 ? 'created' : 'bind']: created,
+};