@teammodlr/ui-kit 3.0.0-beta.18 → 3.0.0-beta.19

package/package.json

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

package/src/components/dialog/Dialog.vue

@@ -21,7 +21,7 @@
                     @focus-outside="handleFocusOutside"
                     @interact-outside.prevent
                 >
-                    <FocusScope :trapped="focusTrap" :loop="focusTrap">
+                    <FocusScope :trapped="activeFocusTrap" :loop="activeFocusTrap">
                         <slot v-if="$slots.container" name="container" :close="close"></slot>
                         <template v-else>
                             <div :class="style.content">
@@ -136,6 +136,8 @@ 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);
 
@@ -246,7 +248,7 @@ export default defineComponent({
         }
 
         function handleFocusOutside(event: Event) {
-            if (!props.focusTrap) {
+            if (!activeFocusTrap.value) {
                 return;
             }
 
@@ -351,8 +353,13 @@ export default defineComponent({
             { immediate: true }
         );
 
+        function setFocusTrap(value: boolean) {
+            focusTrapOverride.value = value;
+        }
+
         expose({
             close,
+            setFocusTrap,
         });
 
         return {
@@ -377,7 +384,8 @@ export default defineComponent({
             handleOpenChange,
             handleOpenAutoFocus,
             handleFocusOutside,
-            isOpen: computed(() => props.open)
+            isOpen: computed(() => props.open),
+            activeFocusTrap,
         };
     },
 });

package/src/components/dialogprovider/DialogProvider.vue

@@ -39,6 +39,10 @@ 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
@@ -72,6 +76,7 @@ export default defineComponent({
                         handleClose(key);
                     }
                 },
+                setFocusTrap: (enabled: boolean) => setFocusTrap(key, enabled),
             };
 
             dialogMap[key] = dialog;
@@ -122,7 +127,8 @@ export default defineComponent({
             remove,
             hasOpenDialog: () => hasOpenDialog.value,
             openDialogCount: () => openDialogCount.value,
-            openDialogKeys: () => openDialogKeys.value
+            openDialogKeys: () => openDialogKeys.value,
+            setFocusTrap,
         };
 
         provide('m-dialog', api);

package/src/components/dialogprovider/types.ts

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