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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teammodlr/ui-kit",
-  "version": "3.0.0-beta.21",
+  "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">
@@ -65,7 +65,6 @@ import {
 import {
     computed,
     defineComponent,
-    onUnmounted,
     provide,
     ref,
     shallowRef,
@@ -137,19 +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);
-
-        // reka-ui's FocusScope captures `trapped` at mount time and never re-checks it.
-        // We register this listener before FocusScope mounts (children mount after parent setup)
-        // so it fires first and blocks reka-ui's listener from stealing focus when trap is off.
-        const focusTrapBlocker = (event: FocusEvent) => {
-            if (!activeFocusTrap.value) {
-                event.stopImmediatePropagation();
-            }
-        };
-        document.addEventListener('focusin', focusTrapBlocker, true);
-        onUnmounted(() => document.removeEventListener('focusin', focusTrapBlocker, true));
 
         const isDragging = ref<boolean>(false);
 
@@ -259,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) {
@@ -363,13 +347,8 @@ export default defineComponent({
             { immediate: true }
         );
 
-        function setFocusTrap(value: boolean) {
-            focusTrapOverride.value = value;
-        }
-
         expose({
             close,
-            setFocusTrap,
         });
 
         return {
@@ -393,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;
 }