fds-vue-core 8.4.0 → 8.4.1

package/dist/components/FdsDrawer/FdsDrawer.vue.d.ts

@@ -7,7 +7,9 @@ declare function __VLS_template(): {
     }> & {
         default?: Slot;
     };
-    refs: {};
+    refs: {
+        drawerInnerRef: HTMLDivElement;
+    };
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
@@ -25,7 +27,9 @@ declare const __VLS_component: import('vue').DefineComponent<FdsDrawerProps, {},
     strict: boolean;
     lockScroll: boolean;
     info: "valid" | "invalid" | "warning";
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    drawerInnerRef: HTMLDivElement;
+}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/composables/useFocusTrap.d.ts

@@ -0,0 +1,8 @@
+export declare const getFocusableElements: (container: Element) => HTMLElement[];
+/**
+ * Focus trap for dialogs (modal, drawer). Activates on open, cleans up on close/unmount.
+ */
+export declare function useFocusTrap(): {
+    activate: (getContainer: () => HTMLElement | null) => void;
+    deactivate: () => void;
+};

package/dist/fds-vue-core.cjs.js

@@ -881,7 +881,7 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
     const { t } = useFdsI18n();
     const emit = __emit;
     const isExpanded = vue.ref(props.expanded);
-    const isVisible = vue.ref(props.visible);
+    const isVisible2 = vue.ref(props.visible);
     const expandLabel = vue.computed(() => t("FdsBlockAlert.showMore"));
     const collapseLabel = vue.computed(() => t("FdsBlockAlert.showLess"));
     const closeLabel = vue.computed(() => t("FdsBlockAlert.close"));
@@ -889,7 +889,7 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
     vue.watch(
       () => props.visible,
       (v) => {
-        isVisible.value = v;
+        isVisible2.value = v;
       }
     );
     const alertClasses = vue.computed(() => [
@@ -903,7 +903,7 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
       ...props.dataTestid && { "data-testid": props.dataTestid }
     }));
     function handleClose() {
-      isVisible.value = false;
+      isVisible2.value = false;
       emit("update:visible", false);
       emit("close");
     }
@@ -912,7 +912,7 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
       emit("toggle");
     }
     return (_ctx, _cache) => {
-      return isVisible.value ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ key: 0 }, rootAttrs.value, { class: alertClasses.value }), [
+      return isVisible2.value ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ key: 0 }, rootAttrs.value, { class: alertClasses.value }), [
         vue.createElementVNode("div", null, [
           vue.createElementVNode("div", null, [
             __props.heading ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -6342,6 +6342,56 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
+const FOCUSABLE_SELECTOR = [
+  "a[href]:not([disabled])",
+  "button:not([disabled])",
+  "textarea:not([disabled])",
+  'input:not([disabled]):not([type="hidden"])',
+  "select:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(", ");
+const isVisible = (el) => !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
+const getFocusableElements = (container) => Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter(
+  (el) => el.tabIndex >= 0 && !el.hasAttribute("disabled") && isVisible(el)
+);
+function useFocusTrap() {
+  let cleanup = null;
+  const deactivate = () => {
+    cleanup?.();
+    cleanup = null;
+  };
+  const activate = (getContainer) => {
+    deactivate();
+    vue.nextTick(() => {
+      const container = getContainer();
+      if (!container) return;
+      const focusable = getFocusableElements(container);
+      if (focusable.length > 0) {
+        focusable[0].focus();
+      }
+      const handleTabKey = (e) => {
+        if (e.key !== "Tab") return;
+        const current = getFocusableElements(container);
+        if (current.length === 0) return;
+        const first = current[0];
+        const last = current[current.length - 1];
+        if (e.shiftKey && document.activeElement === first) {
+          last.focus();
+          e.preventDefault();
+        } else if (!e.shiftKey && document.activeElement === last) {
+          first.focus();
+          e.preventDefault();
+        }
+      };
+      container.addEventListener("keydown", handleTabKey, true);
+      cleanup = () => {
+        container.removeEventListener("keydown", handleTabKey, true);
+      };
+    });
+  };
+  vue.onBeforeUnmount(deactivate);
+  return { activate, deactivate };
+}
 const _hoisted_1$m = { class: "flex justify-between mb-4" };
 const _hoisted_2$g = { class: "flex items-center gap-2" };
 const _hoisted_3$g = { class: "mb-0-last-child" };
@@ -6367,8 +6417,8 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     const props = __props;
     const emit = __emit;
     const isOpen = vue.ref(props.open);
-    let cleanupFocusTrap = null;
     const previouslyFocusedElement = vue.ref(null);
+    const { activate: activateFocusTrap, deactivate: deactivateFocusTrap } = useFocusTrap();
     const hasFooterSlot = useHasSlot("modal-footer");
     const { t } = useFdsI18n();
     const modalInnerRef = vue.ref(null);
@@ -6464,39 +6514,6 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
         handleClose();
       }
     };
-    const getTabList = (modal) => modal.querySelectorAll(
-      'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])'
-    );
-    const trapFocus = () => {
-      if (!isOpen.value) return;
-      vue.nextTick(() => {
-        const modal = document.querySelector(".fds-modal-inner");
-        if (!modal) return;
-        const tabList = getTabList(modal);
-        if (tabList.length > 0) {
-          tabList[0].focus();
-        }
-        const handleTabKey = (e) => {
-          if (e.key !== "Tab") return;
-          const currentTabList = getTabList(modal);
-          if (currentTabList.length === 0) return;
-          const firstFocusableEl = currentTabList[0];
-          const lastFocusableEl = currentTabList[currentTabList.length - 1];
-          const isTabOrderReversed = e.shiftKey;
-          if (isTabOrderReversed && document.activeElement === firstFocusableEl) {
-            lastFocusableEl.focus();
-            e.preventDefault();
-          } else if (!isTabOrderReversed && document.activeElement === lastFocusableEl) {
-            firstFocusableEl.focus();
-            e.preventDefault();
-          }
-        };
-        modal.addEventListener("keydown", handleTabKey, true);
-        cleanupFocusTrap = () => {
-          modal.removeEventListener("keydown", handleTabKey, true);
-        };
-      });
-    };
     vue.watch(
       () => props.open,
       (newValue) => {
@@ -6507,14 +6524,11 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
           if (props.lockScroll) {
             setHtmlOverflow("hidden");
           }
-          trapFocus();
+          activateFocusTrap(() => modalInnerRef.value);
         } else {
           setHtmlOverflow("auto");
           resetDragResize();
-          if (cleanupFocusTrap) {
-            cleanupFocusTrap();
-            cleanupFocusTrap = null;
-          }
+          deactivateFocusTrap();
           vue.nextTick(() => {
             if (previouslyFocusedElement.value) {
               previouslyFocusedElement.value.focus();
@@ -6532,16 +6546,14 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
         if (props.lockScroll) {
           setHtmlOverflow("hidden");
         }
-        trapFocus();
+        activateFocusTrap(() => modalInnerRef.value);
       }
     });
     vue.onBeforeUnmount(() => {
       document.removeEventListener("keydown", handleKeyDown, true);
       cleanupDragResize();
       setHtmlOverflow("auto");
-      if (cleanupFocusTrap) {
-        cleanupFocusTrap();
-      }
+      deactivateFocusTrap();
     });
     const modalAttrs = vue.computed(() => {
       const attrs = {};
@@ -11280,8 +11292,9 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     const props = __props;
     const emit = __emit;
     const isOpen = vue.ref(props.open);
-    let cleanupFocusTrap = null;
+    const drawerInnerRef = vue.ref(null);
     const previouslyFocusedElement = vue.ref(null);
+    const { activate: activateFocusTrap, deactivate: deactivateFocusTrap } = useFocusTrap();
     const { t } = useFdsI18n();
     const drawerOuterClasses = vue.computed(() => ["fixed top-0 left-0 w-full h-full z-100"]);
     const drawerInnerClasses = vue.computed(() => [
@@ -11343,39 +11356,6 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
         handleClose();
       }
     };
-    const getTabList = (drawer) => drawer.querySelectorAll(
-      'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])'
-    );
-    const trapFocus = () => {
-      if (!isOpen.value) return;
-      vue.nextTick(() => {
-        const drawer = document.querySelector(".fds-drawer-inner");
-        if (!drawer) return;
-        const tabList = getTabList(drawer);
-        if (tabList.length > 0) {
-          tabList[0].focus();
-        }
-        const handleTabKey = (e) => {
-          if (e.key !== "Tab") return;
-          const currentTabList = getTabList(drawer);
-          if (currentTabList.length === 0) return;
-          const firstFocusableEl = currentTabList[0];
-          const lastFocusableEl = currentTabList[currentTabList.length - 1];
-          const isTabOrderReversed = e.shiftKey;
-          if (isTabOrderReversed && document.activeElement === firstFocusableEl) {
-            lastFocusableEl.focus();
-            e.preventDefault();
-          } else if (!isTabOrderReversed && document.activeElement === lastFocusableEl) {
-            firstFocusableEl.focus();
-            e.preventDefault();
-          }
-        };
-        drawer.addEventListener("keydown", handleTabKey, true);
-        cleanupFocusTrap = () => {
-          drawer.removeEventListener("keydown", handleTabKey, true);
-        };
-      });
-    };
     vue.watch(
       () => props.open,
       (newValue) => {
@@ -11385,13 +11365,10 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
           if (props.lockScroll) {
             setHtmlOverflow("hidden");
           }
-          trapFocus();
+          activateFocusTrap(() => drawerInnerRef.value);
         } else {
           setHtmlOverflow("auto");
-          if (cleanupFocusTrap) {
-            cleanupFocusTrap();
-            cleanupFocusTrap = null;
-          }
+          deactivateFocusTrap();
         }
       }
     );
@@ -11402,15 +11379,13 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
         if (props.lockScroll) {
           setHtmlOverflow("hidden");
         }
-        trapFocus();
+        activateFocusTrap(() => drawerInnerRef.value);
       }
     });
     vue.onBeforeUnmount(() => {
       document.removeEventListener("keydown", handleKeyDown, true);
       setHtmlOverflow("auto");
-      if (cleanupFocusTrap) {
-        cleanupFocusTrap();
-      }
+      deactivateFocusTrap();
     });
     const drawerAttrs = vue.computed(() => {
       const attrs = {};
@@ -11434,6 +11409,8 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
             }, [
               _cache[2] || (_cache[2] = vue.createElementVNode("div", { class: "fds-drawer-backdrop fixed top-0 left-0 w-full h-full bg-black/34 z-99" }, null, -1)),
               vue.createElementVNode("div", vue.mergeProps({
+                ref_key: "drawerInnerRef",
+                ref: drawerInnerRef,
                 class: ["fds-drawer-inner", drawerInnerClasses.value],
                 role: "dialog",
                 "aria-modal": "true"
@@ -11486,7 +11463,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const FdsDrawer = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-0a576ce5"]]);
+const FdsDrawer = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-afc45d1a"]]);
 function debounce(fn, delayMs) {
   let timeoutId;
   const debounced = (...args) => {