@onereach/ui-components 6.2.0-beta.3320.0 → 6.2.0

package/dist/esm/v3/{OrCode-5457417e.js → OrCode-a63c3a7b.js}

@@ -1,3 +1,12 @@
+import { indentWithTab } from '@codemirror/commands';
+import { css } from '@codemirror/lang-css';
+import { html } from '@codemirror/lang-html';
+import { javascript } from '@codemirror/lang-javascript';
+import { json } from '@codemirror/lang-json';
+import { markdown } from '@codemirror/lang-markdown';
+import { EditorState } from '@codemirror/state';
+import { EditorView, keymap } from '@codemirror/view';
+import { basicSetup } from 'codemirror';
 import { defineComponent, ref, computed, reactive, toRef, watch, onMounted, onUnmounted } from 'vue-demi';
 import { a as useIdAttribute, u as useControlAttributes } from './useIdAttribute-859439f0.js';
 import '@vueuse/core';
@@ -6,16 +15,12 @@ import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
 import { u as useTheme } from './useTheme-0ef25778.js';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
-import { basicSetup } from 'codemirror';
-import { keymap, EditorView } from '@codemirror/view';
-import { indentWithTab } from '@codemirror/commands';
-import { Compartment, EditorState } from '@codemirror/state';
 import { s as script$1 } from './OrError-c01d0c29.js';
 import { s as script$2 } from './OrHint-06ab89d7.js';
-import { s as script$3 } from './OrIconButton-c72e1a04.js';
+import { s as script$3 } from './OrIconButton-a69c7775.js';
 import { s as script$4 } from './OrInputBox-912a6254.js';
 import { s as script$5 } from './OrLabel-d4c46bb6.js';
-import { s as script$6 } from './OrModal-fb37e638.js';
+import { s as script$6 } from './OrModal-fc3bb76e.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, createElementVNode, renderSlot, createVNode, withModifiers, createTextVNode, toDisplayString, createCommentVNode, withDirectives, vShow } from 'vue';
 
 var CodeLanguage;
@@ -95,7 +100,7 @@ var script = defineComponent({
     }
   },
   emits: ['update:modelValue', 'keydown', 'keyup', 'focus', 'blur'],
-  expose: ['root', 'editorView', 'focus', 'blur'],
+  expose: ['root', 'focus', 'blur'],
   setup(props, context) {
     // Refs
     const root = ref();
@@ -105,7 +110,6 @@ var script = defineComponent({
     // Styles
     const rootStyles = computed(() => ['or-code-v3', ...Code]);
     const controlStyles = computed(() => [...CodeControl]);
-    const addedExtensionCompartment = new Compartment();
     // State
     const controlAttributes = reactive({
       id: useIdAttribute(),
@@ -113,24 +117,24 @@ var script = defineComponent({
       ...useValidationAttributes()
     });
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
-    const getLanguageExtension = async language => {
-      switch (language) {
+    const proxyLanguage = computed(() => {
+      switch (props.language) {
         case CodeLanguage.HTML:
-          return (await import('@codemirror/lang-html')).html();
+          return html();
         case CodeLanguage.CSS:
-          return (await import('@codemirror/lang-css')).css();
+          return css();
         case CodeLanguage.JS:
-          return (await import('@codemirror/lang-javascript')).javascript();
+          return javascript();
         case CodeLanguage.TS:
-          return (await import('@codemirror/lang-javascript')).javascript({
+          return javascript({
             typescript: true
           });
         case CodeLanguage.JSON:
-          return (await import('@codemirror/lang-json')).json();
+          return json();
         case CodeLanguage.MD:
-          return (await import('@codemirror/lang-markdown')).markdown();
+          return markdown();
       }
-    };
+    });
     // Methods
     function focus() {
       var _a;
@@ -141,8 +145,14 @@ var script = defineComponent({
       (_a = control.value) === null || _a === void 0 ? void 0 : _a.blur();
     }
     // #region Codemirror
+    const editorView = new EditorView({
+      dispatch: transaction => {
+        editorView.update([transaction]);
+        proxyModelValue.value = String(editorView.state.doc);
+      }
+    });
     const theme = useTheme();
-    const defaultExtensions = [basicSetup, keymap.of([indentWithTab]), EditorState.readOnly.of(props.readonly), EditorView.editable.of(!props.disabled), EditorView.domEventHandlers({
+    const extensions = computed(() => [basicSetup, keymap.of([indentWithTab]), EditorState.readOnly.of(props.readonly), EditorView.editable.of(!props.disabled), EditorView.domEventHandlers({
       keydown: event => {
         context.emit('keydown', event);
       },
@@ -177,43 +187,19 @@ var script = defineComponent({
       '.cm-activeLineGutter, .cm-activeLine': {
         backgroundColor: theme.backgroundColor['primary-opacity-0-08']
       }
-    })];
-    const state = EditorState.create({
-      doc: proxyModelValue.value,
-      extensions: [...defaultExtensions, addedExtensionCompartment.of([])]
-    });
-    const editorView = new EditorView({
-      state,
-      dispatch: transaction => {
-        editorView.update([transaction]);
-        if (transaction.docChanged) {
-          proxyModelValue.value = String(editorView.state.doc);
-        }
-      }
-    });
-    watch(proxyModelValue, value => {
-      const modelValue = value !== null && value !== void 0 ? value : '';
+    }), proxyLanguage.value, ...props.extensions]);
+    watch([proxyModelValue, extensions], _ref => {
+      let [modelValue = '', extensions] = _ref;
       const {
         selection
       } = editorView.state;
-      editorView.dispatch({
-        changes: {
-          from: 0,
-          to: editorView.state.doc.length,
-          insert: modelValue
-        },
+      editorView.setState(EditorState.create({
+        doc: modelValue,
+        extensions,
         selection: selection.ranges.some(range => range.to > modelValue.length) ? {
           anchor: modelValue.length
         } : selection
-      });
-    });
-    watch([() => props.extensions, () => props.language], async _ref => {
-      let [extensions, language] = _ref;
-      const languageExt = await getLanguageExtension(language);
-      const effect = addedExtensionCompartment.reconfigure([...extensions, languageExt]);
-      editorView.dispatch({
-        effects: [effect]
-      });
+      }));
     }, {
       immediate: true
     });
@@ -241,7 +227,6 @@ var script = defineComponent({
       editorView.destroy();
     });
     return {
-      editorView,
       root,
       control,
       fullscreenControl,
@@ -250,6 +235,7 @@ var script = defineComponent({
       controlStyles,
       controlAttributes,
       proxyModelValue,
+      proxyLanguage,
       focus,
       blur
     };

package/dist/esm/v3/{OrConfirm-bf771b4d.js → OrConfirm-d304e9a4.js}

@@ -6,7 +6,7 @@ import { u as usePopoverState } from './usePopoverState-b92c698b.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import { s as script$2, a as ButtonColor } from './OrButton-4a3c3e7b.js';
-import { s as script$3 } from './OrInput-7729da3b.js';
+import { s as script$3 } from './OrInput-e12b0489.js';
 import { s as script$1 } from './OrOverlay-6269c33a.js';
 import { resolveComponent, openBlock, createBlock, withCtx, createElementVNode, mergeProps, normalizeClass, renderSlot, createTextVNode, toDisplayString, createElementBlock, createVNode, createCommentVNode } from 'vue';
 

package/dist/esm/v3/{OrContextMenu-2d8d26e9.js → OrContextMenu-bf1e07ae.js}

@@ -4,8 +4,8 @@ import './dom-aecadd9a.js';
 import { u as usePopoverState } from './usePopoverState-b92c698b.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
-import { s as script$1 } from './OrMenu-3bcc528b.js';
-import { P as PopoverPlacement } from './OrPopover-2132e8b9.js';
+import { s as script$1 } from './OrMenu-9a82f18f.js';
+import { P as PopoverPlacement } from './OrPopover-7b2af064.js';
 import { resolveComponent, openBlock, createBlock, withCtx, renderSlot } from 'vue';
 
 var script = defineComponent({

package/dist/esm/v3/{OrDatePicker-88b59005.js → OrDatePicker-87aef206.js}

@@ -5,14 +5,14 @@ import './dom-aecadd9a.js';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
-import { s as script$1, a as script$2, b as script$3, c as script$4, d as script$5, e as script$6, u as useCurrentDate } from './OrDateTimePickerPopoverHeader-d3058267.js';
+import { s as script$1, a as script$2, b as script$3, c as script$4, d as script$5, e as script$6, u as useCurrentDate } from './OrDateTimePickerPopoverHeader-03ae7d09.js';
 import { s as script$7 } from './OrError-c01d0c29.js';
 import { s as script$8 } from './OrHint-06ab89d7.js';
-import { s as script$a } from './OrIconButton-c72e1a04.js';
+import { s as script$a } from './OrIconButton-a69c7775.js';
 import { s as script$9 } from './OrIcon-62793572.js';
 import { s as script$b, I as InputBoxSize } from './OrInputBox-912a6254.js';
 import { s as script$c } from './OrLabel-d4c46bb6.js';
-import { s as script$d } from './OrPopover-2132e8b9.js';
+import { s as script$d } from './OrPopover-7b2af064.js';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, withModifiers, createVNode, Fragment, createElementVNode } from 'vue';
 
 const DatePicker = [

package/dist/esm/v3/{OrDateTimePicker-f9e46f7e.js → OrDateTimePicker-738f9cd3.js}

@@ -7,12 +7,12 @@ import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import { s as script$a } from './OrError-c01d0c29.js';
 import { s as script$b } from './OrHint-06ab89d7.js';
-import { s as script$d } from './OrIconButton-c72e1a04.js';
+import { s as script$d } from './OrIconButton-a69c7775.js';
 import { s as script$c } from './OrIcon-62793572.js';
 import { s as script$e, I as InputBoxSize } from './OrInputBox-912a6254.js';
 import { s as script$f } from './OrLabel-d4c46bb6.js';
-import { s as script$g } from './OrPopover-2132e8b9.js';
-import { s as script$4, a as script$5, b as script$6, c as script$7, d as script$8, e as script$9, u as useCurrentDate } from './OrDateTimePickerPopoverHeader-d3058267.js';
+import { s as script$g } from './OrPopover-7b2af064.js';
+import { s as script$4, a as script$5, b as script$6, c as script$7, d as script$8, e as script$9, u as useCurrentDate } from './OrDateTimePickerPopoverHeader-03ae7d09.js';
 import { openBlock, createElementBlock, normalizeClass, Fragment, createTextVNode, toDisplayString, resolveComponent, createElementVNode, renderList, createBlock, withModifiers, withCtx, createVNode, createCommentVNode, resolveDirective, renderSlot, withDirectives } from 'vue';
 import { s as script$3 } from './OrButton-4a3c3e7b.js';
 

package/dist/esm/v3/{OrDateTimePickerPopoverHeader-d3058267.js → OrDateTimePickerPopoverHeader-03ae7d09.js}

@@ -7,11 +7,11 @@ import '@onereach/styles/tailwind.config.json';
 import { openBlock, createElementBlock, normalizeClass, Fragment, createTextVNode, toDisplayString, resolveComponent, createElementVNode, renderList, createBlock, withModifiers, withCtx, createVNode, renderSlot } from 'vue';
 import { s as script$6 } from './OrButton-4a3c3e7b.js';
 import { s as script$7 } from './OrLabel-d4c46bb6.js';
-import { s as script$9 } from './OrIconButton-c72e1a04.js';
+import { s as script$9 } from './OrIconButton-a69c7775.js';
 import { s as script$8 } from './OrIcon-62793572.js';
 import { s as script$b } from './OrMenuItem-54062d59.js';
-import { s as script$a } from './OrMenu-3bcc528b.js';
-import './OrPopover-2132e8b9.js';
+import { s as script$a } from './OrMenu-9a82f18f.js';
+import './OrPopover-7b2af064.js';
 
 function useCurrentDate() {
   const currentDate = new Date();

package/dist/esm/v3/{OrIconButton-c72e1a04.js → OrIconButton-a69c7775.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, isVue3 } from 'vue-demi';
 import { s as script$1, I as IconSize } from './OrIcon-62793572.js';
-import { s as script$2 } from './OrTooltip-ad6e08ab.js';
-import './OrPopover-2132e8b9.js';
+import { s as script$2 } from './OrTooltip-5bf6890a.js';
+import './OrPopover-7b2af064.js';
 import { resolveComponent, openBlock, createBlock, normalizeProps, guardReactiveProps, withCtx, createElementVNode, mergeProps, toHandlers, createVNode } from 'vue';
 
 var IconButtonColor;

package/dist/esm/v3/{OrInlineInput-19a4ac87.js → OrInlineInput-246d88ca.js}

@@ -8,7 +8,7 @@ import '@onereach/styles/tailwind.config.json';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { s as script$1 } from './OrError-c01d0c29.js';
 import { s as script$2 } from './OrHint-06ab89d7.js';
-import { s as script$3 } from './OrIconButton-c72e1a04.js';
+import { s as script$3 } from './OrIconButton-a69c7775.js';
 import { s as script$4, I as InlineInputBoxSize } from './OrInlineInputBox-01fb2cb2.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withCtx, withDirectives, mergeProps, vModelDynamic, withModifiers, createCommentVNode, createBlock, createSlots, createTextVNode, toDisplayString, vShow } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';

package/dist/esm/v3/{OrInlineTextarea-0853564b.js → OrInlineTextarea-c9febb84.js}

@@ -8,7 +8,7 @@ import '@onereach/styles/tailwind.config.json';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { s as script$1 } from './OrError-c01d0c29.js';
 import { s as script$2 } from './OrHint-06ab89d7.js';
-import { s as script$3 } from './OrIconButton-c72e1a04.js';
+import { s as script$3 } from './OrIconButton-a69c7775.js';
 import { s as script$4 } from './OrInlineInputBox-01fb2cb2.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withCtx, withDirectives, mergeProps, vModelText, withModifiers, createCommentVNode, createBlock, createSlots, createTextVNode, toDisplayString, vShow } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';

package/dist/esm/v3/{OrInput-7729da3b.js → OrInput-e12b0489.js}

@@ -8,7 +8,7 @@ import '@onereach/styles/tailwind.config.json';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { s as script$1 } from './OrError-c01d0c29.js';
 import { s as script$2 } from './OrHint-06ab89d7.js';
-import { s as script$4 } from './OrIconButton-c72e1a04.js';
+import { s as script$4 } from './OrIconButton-a69c7775.js';
 import { s as script$3 } from './OrIcon-62793572.js';
 import { s as script$5, I as InputBoxSize } from './OrInputBox-912a6254.js';
 import { s as script$6 } from './OrLabel-d4c46bb6.js';

package/dist/esm/v3/{OrMenu-3bcc528b.js → OrMenu-9a82f18f.js}

@@ -4,7 +4,7 @@ import './dom-aecadd9a.js';
 import { u as usePopoverState } from './usePopoverState-b92c698b.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
-import { s as script$1, P as PopoverPlacement } from './OrPopover-2132e8b9.js';
+import { s as script$1, P as PopoverPlacement } from './OrPopover-7b2af064.js';
 import { resolveComponent, openBlock, createBlock, withCtx, createElementVNode, mergeProps, withModifiers, renderSlot } from 'vue';
 
 const Menu = [

package/dist/esm/v3/{OrModal-fb37e638.js → OrModal-fc3bb76e.js}

@@ -6,7 +6,7 @@ import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import { s as script$5 } from './OrOverlay-6269c33a.js';
 import { openBlock, createElementBlock, normalizeClass, renderSlot, resolveComponent, createElementVNode, createVNode, withModifiers, createBlock, withCtx, mergeProps, createCommentVNode } from 'vue';
-import { s as script$4 } from './OrIconButton-c72e1a04.js';
+import { s as script$4 } from './OrIconButton-a69c7775.js';
 
 const ModalContent = [
 // Overflow

package/dist/esm/v3/{OrNotification-5d385b61.js → OrNotification-c8cd9f3d.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import { s as script$2 } from './OrIconButton-c72e1a04.js';
+import { s as script$2 } from './OrIconButton-a69c7775.js';
 import { s as script$1 } from './OrIcon-62793572.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, renderSlot, createBlock, withModifiers, createCommentVNode } from 'vue';
 

package/dist/esm/v3/{OrPagination-d7acbb6b.js → OrPagination-cc0b041a.js}

@@ -7,8 +7,8 @@ import '@onereach/styles/tailwind.config.json';
 import { s as script$1 } from './OrButton-4a3c3e7b.js';
 import { s as script$2 } from './OrIcon-62793572.js';
 import { s as script$4 } from './OrMenuItem-54062d59.js';
-import { s as script$3 } from './OrMenu-3bcc528b.js';
-import './OrPopover-2132e8b9.js';
+import { s as script$3 } from './OrMenu-9a82f18f.js';
+import './OrPopover-7b2af064.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withModifiers, withCtx, Fragment, renderList, createBlock, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
 
 const PaginationRoot = [

package/dist/esm/v3/{OrPopover-2132e8b9.js → OrPopover-7b2af064.js}

@@ -228,7 +228,7 @@ var script = defineComponent({
       default: undefined
     },
     trigger: {
-      type: [Object, HTMLElement],
+      type: Object,
       default: undefined
     },
     placement: {