@quidgest/ui 0.16.49 → 0.16.51

package/esm/components/QOverlay/QOverlay.vue.js

@@ -1,14 +1,14 @@
-import { defineComponent as de, mergeModels as F, useModel as fe, computed as u, reactive as I, watch as P, ref as _, nextTick as g, onMounted as ve, onBeforeUnmount as pe, createElementBlock as k, openBlock as c, Fragment as me, createBlock as b, createCommentVNode as y, Teleport as ye, createVNode as B, Transition as z, withCtx as L, normalizeClass as U, normalizeStyle as N, unref as T, createElementVNode as he, mergeProps as we, renderSlot as ge } from "vue";
+import { defineComponent as ue, mergeModels as V, useModel as de, computed as c, reactive as $, watch as W, ref as B, nextTick as g, onMounted as fe, onBeforeUnmount as ve, createElementBlock as k, openBlock as u, Fragment as pe, createBlock as _, createCommentVNode as m, Teleport as me, createVNode as b, Transition as I, withCtx as L, withModifiers as ye, normalizeClass as P, normalizeStyle as z, unref as C, createElementVNode as he, mergeProps as we, renderSlot as ge } from "vue";
 import { QDismissibleLayer as ke } from "../QDismissibleLayer/index.js";
 import { QRemoveScrollBar as Le } from "../QRemoveScrollBar/index.js";
-import { FocusTrap as Ee } from "../../vendors/focus-trap-vue/dist/focus-trap-vue.esm-browser.js";
-import { getSideFromPlacement as _e, computePosition as be } from "../../composables/overlay.js";
-import { useTheme as Be } from "../../composables/theme.js";
-import { getElement as Te } from "../../utils/getElement.js";
-const Ce = ["id"], xe = ["role"], Ae = /* @__PURE__ */ de({
+import { QFocusWrap as Ee } from "../QFocusWrap/index.js";
+import { getSideFromPlacement as Be, computePosition as _e } from "../../composables/overlay.js";
+import { useTheme as be } from "../../composables/theme.js";
+import { getElement as Ce } from "../../utils/getElement.js";
+const Te = ["id"], Oe = ["role"], Ve = /* @__PURE__ */ ue({
   inheritAttrs: !1,
   __name: "QOverlay",
-  props: /* @__PURE__ */ F({
+  props: /* @__PURE__ */ V({
     id: {},
     class: {},
     anchor: {},
@@ -30,142 +30,145 @@ const Ce = ["id"], xe = ["role"], Ae = /* @__PURE__ */ de({
     persistent: { type: Boolean },
     spy: { type: Boolean },
     trigger: { default: "click" },
-    focusTrap: { type: Boolean },
+    focusWrap: { type: Boolean },
+    initialFocus: {},
+    focusWithinOnActivate: { type: Boolean, default: !1 },
+    closingFocus: {},
     returnFocusOnDeactivate: { type: Boolean, default: !0 }
   }, {
     modelValue: { type: Boolean },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ F(["enter", "leave"], ["update:modelValue"]),
-  setup(C, { emit: Q }) {
-    const t = C, x = Q, r = fe(C, "modelValue"), { class: W } = Be(), j = u(() => [
+  emits: /* @__PURE__ */ V(["enter", "leave"], ["update:modelValue"]),
+  setup(T, { emit: Q }) {
+    const t = T, O = Q, r = de(T, "modelValue"), { class: U } = be(), N = c(() => [
       "q-overlay",
-      `q-overlay--${_e(o.placement)}`,
-      W.value,
+      `q-overlay--${Be(o.placement)}`,
+      U.value,
       {
-        "q-overlay--independent": v.value,
+        "q-overlay--independent": f.value,
         "q-overlay--inverted": t.appearance === "inverted",
         "q-overlay--center": t.centerVertically
       },
       t.class
-    ]), v = u(() => t.anchor === void 0), D = u(() => r.value && !t.nonModal), G = u(() => (r.value || o.animating) && t.scrollLock), H = u(() => !t.inline && (r.value || o.animating)), O = () => d.value ? d.value ?? void 0 : "#" + t.id, o = I({
+    ]), f = c(() => t.anchor === void 0), x = c(() => r.value && !t.nonModal), j = c(() => (r.value || o.animating) && t.scrollLock), G = c(() => !t.inline && (r.value || o.animating)), o = $({
       animating: !1,
       top: 0,
       left: 0,
       width: 0,
       placement: t.placement
-    }), a = I({
+    }), a = $({
       top: void 0,
       left: void 0,
       hidden: !0
     });
-    P(r, te);
-    const J = u(() => {
-      if (v.value) return;
-      const e = l(), s = t.width === "anchor", n = s ? e == null ? void 0 : e.getBoundingClientRect().width : void 0;
+    W(r, ee);
+    const H = c(() => {
+      if (f.value) return;
+      const e = s(), i = t.width === "anchor", n = i ? e == null ? void 0 : e.getBoundingClientRect().width : void 0;
       return {
         top: `${o.top}px`,
         left: `${o.left}px`,
         width: n !== void 0 ? `${n}px` : void 0
       };
-    }), K = u(() => {
+    }), J = c(() => {
       if (t.arrow)
         return {
           top: a.top !== void 0 ? `${a.top}px` : void 0,
           left: a.left !== void 0 ? `${a.left}px` : void 0,
           opacity: a.hidden ? 0 : 1
         };
-    }), h = _(null), S = _(null), d = _(null);
-    function i() {
-      const e = l();
-      if (!e || !d.value)
+    }), y = B(null), D = B(null), h = B(null);
+    function l() {
+      const e = s();
+      if (!e || !h.value)
         return;
-      const s = {
+      const i = {
         placement: t.placement,
         width: t.width,
         offset: t.offset,
         crossOffset: t.crossOffset,
         arrow: t.arrow
-      }, n = be(
+      }, n = _e(
         e,
-        d.value,
-        (h == null ? void 0 : h.value) ?? void 0,
-        s
+        h.value,
+        (y == null ? void 0 : y.value) ?? void 0,
+        i
       );
       o.left = n.overlayCoords.x, o.top = n.overlayCoords.y, o.placement = n.placement, a.hidden = n.arrowCoords === void 0, n.arrowCoords && (a.top = n.arrowCoords.y, a.left = n.arrowCoords.x);
     }
-    P(
+    W(
       () => t.placement,
-      () => g(i)
+      () => g(l)
     );
-    let p;
+    let v;
     function w() {
-      R(0);
+      A(0);
     }
-    function q() {
-      R(t.delay);
+    function S() {
+      A(t.delay);
     }
-    function R(e) {
-      p && M(), p = window.setTimeout(() => {
+    function A(e) {
+      v && F(), v = window.setTimeout(() => {
         r.value = !0;
       }, e);
     }
-    function f() {
-      if (p && M(), r.value = !1, t.anchor && t.trigger === "click") {
-        const e = l();
+    function d() {
+      if (v && F(), r.value = !1, t.anchor && t.trigger === "click") {
+        const e = s();
         g(() => e == null ? void 0 : e.focus());
       }
     }
-    function M() {
-      clearTimeout(p), p = void 0;
+    function F() {
+      clearTimeout(v), v = void 0;
+    }
+    function K() {
+      g(se), O("enter");
     }
     function X() {
-      g(ue), x("enter");
+      M();
     }
     function Y() {
-      V();
+      O("leave");
     }
     function Z() {
-      x("leave");
+      M(), ce();
     }
     function ee() {
-      V(), ce();
-    }
-    function te() {
       o.animating = !0;
     }
-    function V() {
+    function M() {
       o.animating = !1;
     }
-    function l() {
-      return t.anchor ? Te(t.anchor) : null;
+    function s() {
+      return t.anchor ? Ce(t.anchor) : null;
     }
-    function ne(e) {
+    function te(e) {
       t.persistent && e.preventDefault();
     }
-    function oe(e) {
-      var A;
+    function ne(e) {
+      var R;
       if (t.persistent) {
         e.preventDefault();
         return;
       }
-      let s = !1;
-      e.defaultPrevented || e.detail.originalEvent.type === "pointerdown" && (s = !0);
+      let i = !1;
+      e.defaultPrevented || e.detail.originalEvent.type === "pointerdown" && (i = !0);
       const n = e.detail.originalEvent.target;
-      if ((A = l()) == null ? void 0 : A.contains(n)) {
+      if ((R = s()) == null ? void 0 : R.contains(n)) {
         e.preventDefault();
         return;
       }
-      e.detail.originalEvent.type === "focusin" && s && e.preventDefault();
+      e.detail.originalEvent.type === "focusin" && i && e.preventDefault();
     }
-    function re() {
-      f();
+    function oe() {
+      d();
     }
-    let m;
-    function ae() {
-      const e = l();
+    let p;
+    function ie() {
+      const e = s();
       if (e)
-        switch (m = new MutationObserver(i), m.observe(e, {
+        switch (p = new MutationObserver(l), p.observe(e, {
           attributes: !1,
           childList: !0,
           characterData: !0,
@@ -175,142 +178,145 @@ const Ce = ["id"], xe = ["role"], Ae = /* @__PURE__ */ de({
             e.addEventListener("click", w);
             break;
           case "hover":
-            e.addEventListener("mouseenter", q), e.addEventListener("mouseleave", f), e.addEventListener("focusin", w), e.addEventListener("focusout", f);
+            e.addEventListener("mouseenter", S), e.addEventListener("mouseleave", d), e.addEventListener("focusin", w), e.addEventListener("focusout", d);
             break;
         }
     }
-    function ie() {
-      const e = l();
+    function re() {
+      const e = s();
       if (e)
-        switch (m == null || m.disconnect(), t.trigger) {
+        switch (p == null || p.disconnect(), t.trigger) {
           case "click":
             e.removeEventListener("click", w);
             break;
           case "hover":
-            e.removeEventListener("mouseenter", q), e.removeEventListener("mouseleave", f), e.removeEventListener("focusin", w), e.removeEventListener("focusout", f);
+            e.removeEventListener("mouseenter", S), e.removeEventListener("mouseleave", d), e.removeEventListener("focusin", w), e.removeEventListener("focusout", d);
             break;
         }
     }
-    function le() {
-      window.addEventListener("resize", i), t.scrollLock || window.addEventListener("scroll", i);
+    function ae() {
+      window.addEventListener("resize", l), t.scrollLock || window.addEventListener("scroll", l);
     }
-    function se() {
-      window.removeEventListener("resize", i), t.scrollLock || window.removeEventListener("scroll", i);
+    function le() {
+      window.removeEventListener("resize", l), t.scrollLock || window.removeEventListener("scroll", l);
     }
     let E;
-    function $() {
-      l() ? (i(), E = window.setTimeout($, 100)) : f();
+    function q() {
+      s() ? (l(), E = window.setTimeout(q, 100)) : d();
     }
-    function ue() {
+    function se() {
       var e;
-      v.value || (le(), t.spy ? $() : i()), (v.value || t.trigger === "click") && ((e = S.value) == null || e.focus());
+      f.value || (ae(), t.spy ? q() : l()), (f.value || t.trigger === "click") && !t.initialFocus && !t.focusWithinOnActivate && ((e = D.value) == null || e.focus());
     }
     function ce() {
-      v.value || se(), t.spy && (clearTimeout(E), E = void 0);
+      f.value || le(), t.spy && (clearTimeout(E), E = void 0);
     }
-    return ve(() => {
-      g(ae);
-    }), pe(ie), (e, s) => (c(), k(
-      me,
+    return fe(() => {
+      g(ie);
+    }), ve(re), (e, i) => (u(), k(
+      pe,
       null,
       [
-        (c(), b(ye, {
-          disabled: !H.value,
+        (u(), _(me, {
+          disabled: !G.value,
           to: t.attach
         }, [
-          B(z, {
+          b(I, {
             name: "fade",
             appear: ""
           }, {
             default: L(() => [
-              D.value ? (c(), k(
+              x.value ? (u(), k(
                 "div",
                 {
                   key: 0,
-                  class: U([
+                  class: P([
                     t.backdropClass,
                     "q-overlay__underlay",
                     { "q-overlay__underlay--blur": t.backdropBlur }
-                  ])
+                  ]),
+                  onMousedown: i[0] || (i[0] = ye(() => {
+                  }, ["prevent"]))
                 },
                 null,
-                2
-                /* CLASS */
-              )) : y("v-if", !0)
+                34
+                /* CLASS, NEED_HYDRATION */
+              )) : m("v-if", !0)
             ]),
             _: 1
             /* STABLE */
           }),
-          B(z, {
+          b(I, {
             name: t.transition,
             appear: "",
-            onEnter: X,
-            onAfterEnter: Y,
-            onLeave: Z,
-            onAfterLeave: ee
+            onEnter: K,
+            onAfterEnter: X,
+            onLeave: Y,
+            onAfterLeave: Z
           }, {
             default: L(() => [
-              r.value ? (c(), k("div", {
+              r.value ? (u(), k("div", {
                 key: 0,
                 id: t.id,
                 ref_key: "overlayContainerRef",
-                ref: d,
+                ref: h,
                 tabindex: "-1",
-                class: U(j.value),
-                style: N(J.value)
+                class: P(N.value),
+                style: z(H.value)
               }, [
-                B(T(ke), {
-                  onDismiss: re,
-                  onInteractOutside: oe,
-                  onPointerDownOutside: ne
+                b(C(ke), {
+                  onDismiss: oe,
+                  onInteractOutside: ne,
+                  onPointerDownOutside: te
                 }, {
                   default: L(() => [
-                    d.value ? (c(), b(T(Ee), {
+                    h.value ? (u(), _(C(Ee), {
                       key: 0,
-                      active: !t.nonModal && r.value && t.focusTrap,
-                      "fallback-focus": O,
-                      "initial-focus": O,
+                      active: !t.nonModal && r.value && t.focusWrap,
+                      "initial-focus": t.initialFocus,
+                      "focus-within-on-activate": t.focusWithinOnActivate,
+                      "closing-focus": t.closingFocus,
                       "return-focus-on-deactivate": t.returnFocusOnDeactivate
                     }, {
                       default: L(() => [
                         he("div", we({
                           ref_key: "overlayRef",
-                          ref: S,
+                          ref: D,
                           class: "q-overlay__content",
                           tabindex: "-1",
-                          role: D.value ? "dialog" : void 0
+                          role: x.value ? "dialog" : void 0
                         }, e.$attrs), [
-                          t.arrow ? (c(), k(
+                          t.arrow ? (u(), k(
                             "div",
                             {
                               key: 0,
                               ref_key: "arrowRef",
-                              ref: h,
+                              ref: y,
                               role: "presentation",
                               class: "q-overlay__arrow",
-                              style: N(K.value)
+                              style: z(J.value)
                             },
                             null,
                             4
                             /* STYLE */
-                          )) : y("v-if", !0),
+                          )) : m("v-if", !0),
                           ge(e.$slots, "default")
-                        ], 16, xe)
+                        ], 16, Oe)
                       ]),
                       _: 3
                       /* FORWARDED */
-                    }, 8, ["active", "return-focus-on-deactivate"])) : y("v-if", !0)
+                    }, 8, ["active", "initial-focus", "focus-within-on-activate", "closing-focus", "return-focus-on-deactivate"])) : m("v-if", !0)
                   ]),
                   _: 3
                   /* FORWARDED */
                 })
-              ], 14, Ce)) : y("v-if", !0)
+              ], 14, Te)) : m("v-if", !0)
             ]),
             _: 3
             /* FORWARDED */
           }, 8, ["name"])
         ], 8, ["disabled", "to"])),
-        G.value ? (c(), b(T(Le), { key: 0 })) : y("v-if", !0)
+        j.value ? (u(), _(C(Le), { key: 0 })) : m("v-if", !0)
       ],
       64
       /* STABLE_FRAGMENT */
@@ -318,5 +324,5 @@ const Ce = ["id"], xe = ["role"], Ae = /* @__PURE__ */ de({
   }
 });
 export {
-  Ae as default
+  Ve as default
 };

package/esm/components/QOverlay/index.d.ts

@@ -3,13 +3,13 @@ declare const QOverlay: {
         modelValue?: boolean;
     } & import('../../types/component').QBaseComponentProps & {
         anchor?: import('../../utils/getElement').Selector | null;
-        appearance?: import('../../composables/overlay').Appearance;
+        appearance?: import('./types').QOverlayAppearance;
         arrow?: boolean;
         backdropBlur?: boolean;
         backdropClass?: string | unknown[];
         offset?: number;
         crossOffset?: number;
-        placement?: import('../../composables/overlay').Placement;
+        placement?: import('./types').QOverlayPlacement;
         transition?: string;
         width?: "auto" | "anchor";
         centerVertically?: boolean;
@@ -20,8 +20,11 @@ declare const QOverlay: {
         scrollLock?: boolean;
         persistent?: boolean;
         spy?: boolean;
-        trigger?: import('../../composables/overlay').Trigger;
-        focusTrap?: boolean;
+        trigger?: import('./types').QOverlayTrigger;
+        focusWrap?: boolean;
+        initialFocus?: HTMLElement | string | null;
+        focusWithinOnActivate?: boolean;
+        closingFocus?: HTMLElement | string;
         returnFocusOnDeactivate?: boolean;
     }> & Readonly<{
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -35,14 +38,15 @@ declare const QOverlay: {
     }, import('vue').PublicProps, {
         transition: string;
         width: "auto" | "anchor";
-        placement: import('../../composables/overlay').Placement;
-        appearance: import('../../composables/overlay').Appearance;
+        placement: import('./types').QOverlayPlacement;
+        focusWithinOnActivate: boolean;
+        returnFocusOnDeactivate: boolean;
+        appearance: import('./types').QOverlayAppearance;
         offset: number;
         crossOffset: number;
         attach: string;
         delay: number;
-        trigger: import('../../composables/overlay').Trigger;
-        returnFocusOnDeactivate: boolean;
+        trigger: import('./types').QOverlayTrigger;
     }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
         overlayContainerRef: HTMLDivElement;
         overlayRef: HTMLDivElement;
@@ -58,13 +62,13 @@ declare const QOverlay: {
         modelValue?: boolean;
     } & import('../../types/component').QBaseComponentProps & {
         anchor?: import('../../utils/getElement').Selector | null;
-        appearance?: import('../../composables/overlay').Appearance;
+        appearance?: import('./types').QOverlayAppearance;
         arrow?: boolean;
         backdropBlur?: boolean;
         backdropClass?: string | unknown[];
         offset?: number;
         crossOffset?: number;
-        placement?: import('../../composables/overlay').Placement;
+        placement?: import('./types').QOverlayPlacement;
         transition?: string;
         width?: "auto" | "anchor";
         centerVertically?: boolean;
@@ -75,8 +79,11 @@ declare const QOverlay: {
         scrollLock?: boolean;
         persistent?: boolean;
         spy?: boolean;
-        trigger?: import('../../composables/overlay').Trigger;
-        focusTrap?: boolean;
+        trigger?: import('./types').QOverlayTrigger;
+        focusWrap?: boolean;
+        initialFocus?: HTMLElement | string | null;
+        focusWithinOnActivate?: boolean;
+        closingFocus?: HTMLElement | string;
         returnFocusOnDeactivate?: boolean;
     }> & Readonly<{
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -85,14 +92,15 @@ declare const QOverlay: {
     }>, {}, {}, {}, {}, {
         transition: string;
         width: "auto" | "anchor";
-        placement: import('../../composables/overlay').Placement;
-        appearance: import('../../composables/overlay').Appearance;
+        placement: import('./types').QOverlayPlacement;
+        focusWithinOnActivate: boolean;
+        returnFocusOnDeactivate: boolean;
+        appearance: import('./types').QOverlayAppearance;
         offset: number;
         crossOffset: number;
         attach: string;
         delay: number;
-        trigger: import('../../composables/overlay').Trigger;
-        returnFocusOnDeactivate: boolean;
+        trigger: import('./types').QOverlayTrigger;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
@@ -101,13 +109,13 @@ declare const QOverlay: {
     modelValue?: boolean;
 } & import('../../types/component').QBaseComponentProps & {
     anchor?: import('../../utils/getElement').Selector | null;
-    appearance?: import('../../composables/overlay').Appearance;
+    appearance?: import('./types').QOverlayAppearance;
     arrow?: boolean;
     backdropBlur?: boolean;
     backdropClass?: string | unknown[];
     offset?: number;
     crossOffset?: number;
-    placement?: import('../../composables/overlay').Placement;
+    placement?: import('./types').QOverlayPlacement;
     transition?: string;
     width?: "auto" | "anchor";
     centerVertically?: boolean;
@@ -118,8 +126,11 @@ declare const QOverlay: {
     scrollLock?: boolean;
     persistent?: boolean;
     spy?: boolean;
-    trigger?: import('../../composables/overlay').Trigger;
-    focusTrap?: boolean;
+    trigger?: import('./types').QOverlayTrigger;
+    focusWrap?: boolean;
+    initialFocus?: HTMLElement | string | null;
+    focusWithinOnActivate?: boolean;
+    closingFocus?: HTMLElement | string;
     returnFocusOnDeactivate?: boolean;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -133,14 +144,15 @@ declare const QOverlay: {
 }, string, {
     transition: string;
     width: "auto" | "anchor";
-    placement: import('../../composables/overlay').Placement;
-    appearance: import('../../composables/overlay').Appearance;
+    placement: import('./types').QOverlayPlacement;
+    focusWithinOnActivate: boolean;
+    returnFocusOnDeactivate: boolean;
+    appearance: import('./types').QOverlayAppearance;
     offset: number;
     crossOffset: number;
     attach: string;
     delay: number;
-    trigger: import('../../composables/overlay').Trigger;
-    returnFocusOnDeactivate: boolean;
+    trigger: import('./types').QOverlayTrigger;
 }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
     $slots: {
         default?(_: {}): any;

package/esm/components/QOverlay/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/QOverlay/index.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA6B,CAAA;AAG3C,OAAO,EAAE,QAAQ,EAAE,CAAA;AAGnB,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/QOverlay/index.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA6B,CAAA;AAG3C,OAAO,EAAE,QAAQ,EAAE,CAAA;AAGnB,cAAc,SAAS,CAAA"}

package/esm/components/QOverlay/types.d.ts

@@ -1,6 +1,7 @@
 import { QBaseComponentProps } from '../../types/component';
 import { Appearance, Placement, Trigger } from '../../composables/overlay';
 import { Selector } from '../../utils/getElement';
+export type { Appearance as QOverlayAppearance, Trigger as QOverlayTrigger, Axis as QOverlayAxis, Side as QOverlaySide, Alignment as QOverlayAlignment, Placement as QOverlayPlacement } from '../../composables/overlay';
 export type QOverlayProps = QBaseComponentProps & {
     /**
      * The DOM element the overlay should be anchored to.
@@ -127,12 +128,33 @@ export type QOverlayProps = QBaseComponentProps & {
      */
     trigger?: Trigger;
     /**
-     * Whether to enable focus trapping within the overlay.
-     * When enabled, focus will be constrained to elements within the overlay.
+     * Whether to enable focus wrapping within the overlay.
+     * When enabled, focus by tabbing will wrap around elements within the overlay.
      *
      * @category Behavior
      */
-    focusTrap?: boolean;
+    focusWrap?: boolean;
+    /**
+     * Element to set focus on when the focus wrap is activated.
+     * Has priority over focusWithinOnActivate
+     *
+     * @category Behavior
+     */
+    initialFocus?: HTMLElement | string | null;
+    /**
+     * Whether to focus on the first focusable element within when
+     * activating the focus wrap.
+     *
+     * @category Behavior
+     */
+    focusWithinOnActivate?: boolean;
+    /**
+     * Element to set focus on when the focus wrap is deactivated.
+     * Has priority over returnFocusOnDeactivate.
+     *
+     * @category Behavior
+     */
+    closingFocus?: HTMLElement | string;
     /**
      * Whether to return focus to the element that opened this
      * when the focus trap is deactivaed.

package/esm/components/QOverlay/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/QOverlay/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAChE,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAA;AAC/E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAEtD,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG;IACjD;;;;OAIG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAA;IAExB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,UAAU,CAAA;IAEvB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IAEf;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IAEtB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,EAAE,CAAA;IAElC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAA;IAErB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAA;IAEzB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAE1B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,OAAO,CAAA;IAEb;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;;;;OAKG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAA;CACjC,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/QOverlay/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAChE,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAA;AAC/E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAEtD,YAAY,EACX,UAAU,IAAI,kBAAkB,EAChC,OAAO,IAAI,eAAe,EAC1B,IAAI,IAAI,YAAY,EACpB,IAAI,IAAI,YAAY,EACpB,SAAS,IAAI,iBAAiB,EAC9B,SAAS,IAAI,iBAAiB,EAC9B,MAAM,2BAA2B,CAAA;AAElC,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG;IACjD;;;;OAIG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAA;IAExB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,UAAU,CAAA;IAEvB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IAEf;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IAEtB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,EAAE,CAAA;IAElC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAA;IAErB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAA;IAEzB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAE1B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,OAAO,CAAA;IAEb;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,IAAI,CAAA;IAE1C;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAE/B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;IAEnC;;;;;OAKG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAA;CACjC,CAAA"}