@teammodlr/ui-kit 3.0.0-beta.22 → 3.0.0-beta.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teammodlr/ui-kit",
-  "version": "3.0.0-beta.22",
+  "version": "3.0.0-beta.23",
   "description": "",
   "main": "lib/index.cjs.js",
   "module": "lib/index.es.js",

package/src/components/dialog/Dialog.vue

@@ -17,11 +17,11 @@
                     :disable-outside-pointer-events="modal"
                     @open-auto-focus="handleOpenAutoFocus"
                     @escape-key-down="handleEscapeKeyDown"
-                    @pointer-down-outside="handleOutsideEvent"
-                    @focus-outside="handleOutsideEvent"
-                    @interact-outside="handleOutsideEvent"
+                    @pointer-down-outside.prevent
+                    @focus-outside="handleFocusOutside"
+                    @interact-outside.prevent
                 >
-                    <FocusScope :trapped="activeFocusTrap" :loop="activeFocusTrap">
+                    <FocusScope :trapped="focusTrap" :loop="focusTrap">
                         <slot v-if="$slots.container" name="container" :close="close"></slot>
                         <template v-else>
                             <div :class="style.content">
@@ -136,8 +136,6 @@ export default defineComponent({
         const zIndex = ref(props.zIndex ?? nextZIndex());
         provide(ZINDEX, zIndex);
         const hasOpened = ref(false);
-        const focusTrapOverride = ref<boolean | null>(null);
-        const activeFocusTrap = computed(() => focusTrapOverride.value ?? props.focusTrap);
 
         const isDragging = ref<boolean>(false);
 
@@ -247,10 +245,8 @@ export default defineComponent({
             zIndex.value = nextZIndex();
         }
 
-        function handleOutsideEvent(event: Event) {
-            if (activeFocusTrap.value) {
-                event.preventDefault();
-            }
+        function handleFocusOutside(event: Event) {
+            event.preventDefault();
         }
 
         function handleOpenAutoFocus(event: Event) {
@@ -351,21 +347,8 @@ export default defineComponent({
             { immediate: true }
         );
 
-        function setFocusTrap(value: boolean) {
-            focusTrapOverride.value = value;
-            const el = dialogElement.value;
-            if (el) {
-                if (value) {
-                    el.removeAttribute('inert');
-                } else {
-                    el.setAttribute('inert', '');
-                }
-            }
-        }
-
         expose({
             close,
-            setFocusTrap,
         });
 
         return {
@@ -389,9 +372,8 @@ export default defineComponent({
             onEnter,
             handleOpenChange,
             handleOpenAutoFocus,
-            handleOutsideEvent,
-            isOpen: computed(() => props.open),
-            activeFocusTrap,
+            handleFocusOutside,
+            isOpen: computed(() => props.open)
         };
     },
 });

package/src/components/dialogprovider/DialogProvider.vue

@@ -39,10 +39,6 @@ export default defineComponent({
             };
         }
 
-        function setFocusTrap(key: string, enabled: boolean) {
-            dialogRefs.value[key]?.setFocusTrap(enabled);
-        }
-
         function create(key: string, options: DialogOptions = {}): DialogReactive {
             if (dialogMap[key]) {
                 // Merge new options into existing reactive options
@@ -76,7 +72,6 @@ export default defineComponent({
                         handleClose(key);
                     }
                 },
-                setFocusTrap: (enabled: boolean) => setFocusTrap(key, enabled),
             };
 
             dialogMap[key] = dialog;
@@ -127,8 +122,7 @@ export default defineComponent({
             remove,
             hasOpenDialog: () => hasOpenDialog.value,
             openDialogCount: () => openDialogCount.value,
-            openDialogKeys: () => openDialogKeys.value,
-            setFocusTrap,
+            openDialogKeys: () => openDialogKeys.value
         };
 
         provide('m-dialog', api);

package/src/components/dialogprovider/types.ts

@@ -19,7 +19,6 @@ export interface DialogReactive {
     options: DialogOptions;
     open: () => void;
     close: () => void;
-    setFocusTrap: (enabled: boolean) => void;
 }
 
 export interface DialogApiInjection {
@@ -28,5 +27,4 @@ export interface DialogApiInjection {
     hasOpenDialog: () => boolean;
     openDialogCount: () => number;
     openDialogKeys: () => string[];
-    setFocusTrap: (key: string, enabled: boolean) => void;
 }