primevue 3.20.0 → 3.22.0

package/focustrap/focustrap.cjs.js

@@ -2,91 +2,113 @@
 
 var utils = require('primevue/utils');
 
-let element,
-    firstVNode,
-    lastVNode,
-    shiftKey = false;
-
-function firstHiddenFocus() {
-    if (shiftKey) {
-        lastVNode.focus();
-    } else {
-        const firstFocusableEl = utils.DomHandler.getFirstFocusableElement(element, ':not(.p-hidden-focusable)');
-
-        utils.DomHandler.focus(firstFocusableEl);
-    }
-}
+function bind(el, binding) {
+    const { onFocusIn, onFocusOut } = binding.value || {};
 
-function lastHiddenFocus() {
-    if (shiftKey) {
-        const lastFocusableEl = utils.DomHandler.getLastFocusableElement(element, ':not(.p-hidden-focusable)');
+    el.$_pfocustrap_mutationobserver = new MutationObserver((mutationList) => {
+        mutationList.forEach((mutation) => {
+            if (mutation.type === 'childList' && !el.contains(document.activeElement)) {
+                const findNextFocusableElement = (el) => {
+                    const focusableElement = utils.DomHandler.isFocusableElement(el) ? el : utils.DomHandler.getFirstFocusableElement(el);
 
-        utils.DomHandler.focus(lastFocusableEl);
-    } else {
-        firstVNode.focus();
-    }
-}
+                    return utils.ObjectUtils.isNotEmpty(focusableElement) ? focusableElement : findNextFocusableElement(el.nextSibling);
+                };
+
+                utils.DomHandler.focus(findNextFocusableElement(mutation.nextSibling));
+            }
+        });
+    });
+
+    el.$_pfocustrap_mutationobserver.disconnect();
+    el.$_pfocustrap_mutationobserver.observe(el, {
+        childList: true
+    });
 
-function createHiddenElement(callback) {
-    const el = document.createElement('span');
+    el.$_pfocustrap_focusinlistener = (event) => onFocusIn && onFocusIn(event);
+    el.$_pfocustrap_focusoutlistener = (event) => onFocusOut && onFocusOut(event);
 
-    el.classList = 'p-hidden-accessible p-hidden-focusable';
-    el.tabIndex = '0';
-    el.setAttribute('aria-hidden', 'true');
-    el.setAttribute('role', 'presentation');
-    el.addEventListener('focus', callback);
+    el.addEventListener('focusin', el.$_pfocustrap_focusinlistener);
+    el.addEventListener('focusout', el.$_pfocustrap_focusoutlistener);
+}
 
-    return el;
+function unbind(el) {
+    el.$_pfocustrap_mutationobserver && el.$_pfocustrap_mutationobserver.disconnect();
+    el.$_pfocustrap_focusinlistener && el.removeEventListener('focusin', el.$_pfocustrap_focusinlistener) && (el.$_pfocustrap_focusinlistener = null);
+    el.$_pfocustrap_focusoutlistener && el.removeEventListener('focusout', el.$_pfocustrap_focusoutlistener) && (el.$_pfocustrap_focusoutlistener = null);
 }
 
-function createHiddenElements(el) {
-    firstVNode = createHiddenElement(firstHiddenFocus);
-    lastVNode = createHiddenElement(lastHiddenFocus);
+function autoFocus(el, binding) {
+    const { autoFocusSelector = '', firstFocusableSelector = '', autoFocus = false } = binding.value || {};
+    let focusableElement = utils.DomHandler.getFirstFocusableElement(el, `[autofocus]:not(.p-hidden-focusable)${autoFocusSelector}`);
 
-    el.prepend(firstVNode);
-    el.append(lastVNode);
+    autoFocus && !focusableElement && (focusableElement = utils.DomHandler.getFirstFocusableElement(el, `:not(.p-hidden-focusable)${firstFocusableSelector}`));
+    utils.DomHandler.focus(focusableElement);
 }
 
-function bind(el) {
-    el.$_pfocustrap_keydownlistener = (e) => {
-        if (e.code === 'Tab') {
-            shiftKey = e.shiftKey;
-        }
-    };
+function onFirstHiddenElementFocus(event) {
+    const { currentTarget, relatedTarget } = event;
+    const focusableElement =
+        relatedTarget === currentTarget.$_pfocustrap_lasthiddenfocusableelement
+            ? utils.DomHandler.getFirstFocusableElement(currentTarget.parentElement, `:not(.p-hidden-focusable)${currentTarget.$_pfocustrap_focusableselector}`)
+            : currentTarget.$_pfocustrap_lasthiddenfocusableelement;
 
-    el.addEventListener('keydown', el.$_pfocustrap_keydownlistener);
+    utils.DomHandler.focus(focusableElement);
 }
 
-function unbind(el) {
-    if (el.$_pfocustrap_keydownlistener) {
-        el.removeEventListener('keydown', el.$_pfocustrap_keydownlistener);
-        el.$_pfocustrap_keydownlistener = null;
-    }
+function onLastHiddenElementFocus(event) {
+    const { currentTarget, relatedTarget } = event;
+    const focusableElement =
+        relatedTarget === currentTarget.$_pfocustrap_firsthiddenfocusableelement
+            ? utils.DomHandler.getLastFocusableElement(currentTarget.parentElement, `:not(.p-hidden-focusable)${currentTarget.$_pfocustrap_focusableselector}`)
+            : currentTarget.$_pfocustrap_firsthiddenfocusableelement;
+
+    utils.DomHandler.focus(focusableElement);
 }
 
-const FocusTrap = {
-    mounted(el, binding, vnode) {
-        const firstFocusableEl = utils.DomHandler.getFirstFocusableElement(el, ':not(.p-hidden-focusable)');
+function createHiddenFocusableElements(el, binding) {
+    const { tabIndex = 0, firstFocusableSelector = '', lastFocusableSelector = '' } = binding.value || {};
 
-        if (firstFocusableEl) {
-            el.$_pfocustrapFocusTrapDisabled = false;
+    const createFocusableElement = (onFocus) => {
+        const element = document.createElement('span');
 
-            if (binding.value && typeof binding.value === 'object') {
-                el.$_pfocustrapFocusTrapDisabled = binding.value.focusTrapDisabled;
-            }
+        element.classList = 'p-hidden-accessible p-hidden-focusable';
+        element.tabIndex = tabIndex;
+        element.setAttribute('aria-hidden', 'true');
+        element.setAttribute('role', 'presentation');
+        element.addEventListener('focus', onFocus);
 
-            if (!el.$_pfocustrapFocusTrapDisabled) {
-                element = el;
-                createHiddenElements(el);
-                bind(el);
-            }
+        return element;
+    };
+
+    const firstFocusableElement = createFocusableElement(onFirstHiddenElementFocus);
+    const lastFocusableElement = createFocusableElement(onLastHiddenElementFocus);
+
+    firstFocusableElement.$_pfocustrap_lasthiddenfocusableelement = lastFocusableElement;
+    firstFocusableElement.$_pfocustrap_focusableselector = firstFocusableSelector;
+
+    lastFocusableElement.$_pfocustrap_firsthiddenfocusableelement = firstFocusableElement;
+    lastFocusableElement.$_pfocustrap_focusableselector = lastFocusableSelector;
+
+    el.prepend(firstFocusableElement);
+    el.append(lastFocusableElement);
+}
+
+const FocusTrap = {
+    mounted(el, binding) {
+        const { disabled } = binding.value || {};
+
+        if (!disabled) {
+            createHiddenFocusableElements(el, binding);
+            bind(el, binding);
+            autoFocus(el, binding);
         }
     },
+    updated(el, binding) {
+        const { disabled } = binding.value || {};
+
+        disabled && unbind(el);
+    },
     unmounted(el) {
-        element = null;
-        firstVNode = null;
-        lastVNode = null;
-        shiftKey = false;
         unbind(el);
     }
 };

package/focustrap/focustrap.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/utils");let t,n,o,s=!1;function u(){if(s)o.focus();else{const n=e.DomHandler.getFirstFocusableElement(t,":not(.p-hidden-focusable)");e.DomHandler.focus(n)}}function a(){if(s){const n=e.DomHandler.getLastFocusableElement(t,":not(.p-hidden-focusable)");e.DomHandler.focus(n)}else n.focus()}function l(e){const t=document.createElement("span");return t.classList="p-hidden-accessible p-hidden-focusable",t.tabIndex="0",t.setAttribute("aria-hidden","true"),t.setAttribute("role","presentation"),t.addEventListener("focus",e),t}const r={mounted(r,c,d){e.DomHandler.getFirstFocusableElement(r,":not(.p-hidden-focusable)")&&(r.$_pfocustrapFocusTrapDisabled=!1,c.value&&"object"==typeof c.value&&(r.$_pfocustrapFocusTrapDisabled=c.value.focusTrapDisabled),r.$_pfocustrapFocusTrapDisabled||(t=r,function(e){n=l(u),o=l(a),e.prepend(n),e.append(o)}(r),function(e){e.$_pfocustrap_keydownlistener=e=>{"Tab"===e.code&&(s=e.shiftKey)},e.addEventListener("keydown",e.$_pfocustrap_keydownlistener)}(r)))},unmounted(e){t=null,n=null,o=null,s=!1,function(e){e.$_pfocustrap_keydownlistener&&(e.removeEventListener("keydown",e.$_pfocustrap_keydownlistener),e.$_pfocustrap_keydownlistener=null)}(e)}};module.exports=r;
+"use strict";var e=require("primevue/utils");function t(e){e.$_pfocustrap_mutationobserver&&e.$_pfocustrap_mutationobserver.disconnect(),e.$_pfocustrap_focusinlistener&&e.removeEventListener("focusin",e.$_pfocustrap_focusinlistener)&&(e.$_pfocustrap_focusinlistener=null),e.$_pfocustrap_focusoutlistener&&e.removeEventListener("focusout",e.$_pfocustrap_focusoutlistener)&&(e.$_pfocustrap_focusoutlistener=null)}function o(t){const{currentTarget:o,relatedTarget:s}=t,n=s===o.$_pfocustrap_lasthiddenfocusableelement?e.DomHandler.getFirstFocusableElement(o.parentElement,`:not(.p-hidden-focusable)${o.$_pfocustrap_focusableselector}`):o.$_pfocustrap_lasthiddenfocusableelement;e.DomHandler.focus(n)}function s(t){const{currentTarget:o,relatedTarget:s}=t,n=s===o.$_pfocustrap_firsthiddenfocusableelement?e.DomHandler.getLastFocusableElement(o.parentElement,`:not(.p-hidden-focusable)${o.$_pfocustrap_focusableselector}`):o.$_pfocustrap_firsthiddenfocusableelement;e.DomHandler.focus(n)}const n={mounted(t,n){const{disabled:u}=n.value||{};u||(function(e,t){const{tabIndex:n=0,firstFocusableSelector:u="",lastFocusableSelector:c=""}=t.value||{},r=e=>{const t=document.createElement("span");return t.classList="p-hidden-accessible p-hidden-focusable",t.tabIndex=n,t.setAttribute("aria-hidden","true"),t.setAttribute("role","presentation"),t.addEventListener("focus",e),t},a=r(o),l=r(s);a.$_pfocustrap_lasthiddenfocusableelement=l,a.$_pfocustrap_focusableselector=u,l.$_pfocustrap_firsthiddenfocusableelement=a,l.$_pfocustrap_focusableselector=c,e.prepend(a),e.append(l)}(t,n),function(t,o){const{onFocusIn:s,onFocusOut:n}=o.value||{};t.$_pfocustrap_mutationobserver=new MutationObserver((o=>{o.forEach((o=>{if("childList"===o.type&&!t.contains(document.activeElement)){const t=o=>{const s=e.DomHandler.isFocusableElement(o)?o:e.DomHandler.getFirstFocusableElement(o);return e.ObjectUtils.isNotEmpty(s)?s:t(o.nextSibling)};e.DomHandler.focus(t(o.nextSibling))}}))})),t.$_pfocustrap_mutationobserver.disconnect(),t.$_pfocustrap_mutationobserver.observe(t,{childList:!0}),t.$_pfocustrap_focusinlistener=e=>s&&s(e),t.$_pfocustrap_focusoutlistener=e=>n&&n(e),t.addEventListener("focusin",t.$_pfocustrap_focusinlistener),t.addEventListener("focusout",t.$_pfocustrap_focusoutlistener)}(t,n),function(t,o){const{autoFocusSelector:s="",firstFocusableSelector:n="",autoFocus:u=!1}=o.value||{};let c=e.DomHandler.getFirstFocusableElement(t,`[autofocus]:not(.p-hidden-focusable)${s}`);u&&!c&&(c=e.DomHandler.getFirstFocusableElement(t,`:not(.p-hidden-focusable)${n}`)),e.DomHandler.focus(c)}(t,n))},updated(e,o){const{disabled:s}=o.value||{};s&&t(e)},unmounted(e){t(e)}};module.exports=n;

package/focustrap/focustrap.esm.js

@@ -1,90 +1,112 @@
-import { DomHandler } from 'primevue/utils';
+import { DomHandler, ObjectUtils } from 'primevue/utils';
 
-let element,
-    firstVNode,
-    lastVNode,
-    shiftKey = false;
+function bind(el, binding) {
+    const { onFocusIn, onFocusOut } = binding.value || {};
 
-function firstHiddenFocus() {
-    if (shiftKey) {
-        lastVNode.focus();
-    } else {
-        const firstFocusableEl = DomHandler.getFirstFocusableElement(element, ':not(.p-hidden-focusable)');
+    el.$_pfocustrap_mutationobserver = new MutationObserver((mutationList) => {
+        mutationList.forEach((mutation) => {
+            if (mutation.type === 'childList' && !el.contains(document.activeElement)) {
+                const findNextFocusableElement = (el) => {
+                    const focusableElement = DomHandler.isFocusableElement(el) ? el : DomHandler.getFirstFocusableElement(el);
 
-        DomHandler.focus(firstFocusableEl);
-    }
-}
+                    return ObjectUtils.isNotEmpty(focusableElement) ? focusableElement : findNextFocusableElement(el.nextSibling);
+                };
 
-function lastHiddenFocus() {
-    if (shiftKey) {
-        const lastFocusableEl = DomHandler.getLastFocusableElement(element, ':not(.p-hidden-focusable)');
+                DomHandler.focus(findNextFocusableElement(mutation.nextSibling));
+            }
+        });
+    });
 
-        DomHandler.focus(lastFocusableEl);
-    } else {
-        firstVNode.focus();
-    }
-}
+    el.$_pfocustrap_mutationobserver.disconnect();
+    el.$_pfocustrap_mutationobserver.observe(el, {
+        childList: true
+    });
 
-function createHiddenElement(callback) {
-    const el = document.createElement('span');
+    el.$_pfocustrap_focusinlistener = (event) => onFocusIn && onFocusIn(event);
+    el.$_pfocustrap_focusoutlistener = (event) => onFocusOut && onFocusOut(event);
 
-    el.classList = 'p-hidden-accessible p-hidden-focusable';
-    el.tabIndex = '0';
-    el.setAttribute('aria-hidden', 'true');
-    el.setAttribute('role', 'presentation');
-    el.addEventListener('focus', callback);
+    el.addEventListener('focusin', el.$_pfocustrap_focusinlistener);
+    el.addEventListener('focusout', el.$_pfocustrap_focusoutlistener);
+}
 
-    return el;
+function unbind(el) {
+    el.$_pfocustrap_mutationobserver && el.$_pfocustrap_mutationobserver.disconnect();
+    el.$_pfocustrap_focusinlistener && el.removeEventListener('focusin', el.$_pfocustrap_focusinlistener) && (el.$_pfocustrap_focusinlistener = null);
+    el.$_pfocustrap_focusoutlistener && el.removeEventListener('focusout', el.$_pfocustrap_focusoutlistener) && (el.$_pfocustrap_focusoutlistener = null);
 }
 
-function createHiddenElements(el) {
-    firstVNode = createHiddenElement(firstHiddenFocus);
-    lastVNode = createHiddenElement(lastHiddenFocus);
+function autoFocus(el, binding) {
+    const { autoFocusSelector = '', firstFocusableSelector = '', autoFocus = false } = binding.value || {};
+    let focusableElement = DomHandler.getFirstFocusableElement(el, `[autofocus]:not(.p-hidden-focusable)${autoFocusSelector}`);
 
-    el.prepend(firstVNode);
-    el.append(lastVNode);
+    autoFocus && !focusableElement && (focusableElement = DomHandler.getFirstFocusableElement(el, `:not(.p-hidden-focusable)${firstFocusableSelector}`));
+    DomHandler.focus(focusableElement);
 }
 
-function bind(el) {
-    el.$_pfocustrap_keydownlistener = (e) => {
-        if (e.code === 'Tab') {
-            shiftKey = e.shiftKey;
-        }
-    };
+function onFirstHiddenElementFocus(event) {
+    const { currentTarget, relatedTarget } = event;
+    const focusableElement =
+        relatedTarget === currentTarget.$_pfocustrap_lasthiddenfocusableelement
+            ? DomHandler.getFirstFocusableElement(currentTarget.parentElement, `:not(.p-hidden-focusable)${currentTarget.$_pfocustrap_focusableselector}`)
+            : currentTarget.$_pfocustrap_lasthiddenfocusableelement;
 
-    el.addEventListener('keydown', el.$_pfocustrap_keydownlistener);
+    DomHandler.focus(focusableElement);
 }
 
-function unbind(el) {
-    if (el.$_pfocustrap_keydownlistener) {
-        el.removeEventListener('keydown', el.$_pfocustrap_keydownlistener);
-        el.$_pfocustrap_keydownlistener = null;
-    }
+function onLastHiddenElementFocus(event) {
+    const { currentTarget, relatedTarget } = event;
+    const focusableElement =
+        relatedTarget === currentTarget.$_pfocustrap_firsthiddenfocusableelement
+            ? DomHandler.getLastFocusableElement(currentTarget.parentElement, `:not(.p-hidden-focusable)${currentTarget.$_pfocustrap_focusableselector}`)
+            : currentTarget.$_pfocustrap_firsthiddenfocusableelement;
+
+    DomHandler.focus(focusableElement);
 }
 
-const FocusTrap = {
-    mounted(el, binding, vnode) {
-        const firstFocusableEl = DomHandler.getFirstFocusableElement(el, ':not(.p-hidden-focusable)');
+function createHiddenFocusableElements(el, binding) {
+    const { tabIndex = 0, firstFocusableSelector = '', lastFocusableSelector = '' } = binding.value || {};
 
-        if (firstFocusableEl) {
-            el.$_pfocustrapFocusTrapDisabled = false;
+    const createFocusableElement = (onFocus) => {
+        const element = document.createElement('span');
 
-            if (binding.value && typeof binding.value === 'object') {
-                el.$_pfocustrapFocusTrapDisabled = binding.value.focusTrapDisabled;
-            }
+        element.classList = 'p-hidden-accessible p-hidden-focusable';
+        element.tabIndex = tabIndex;
+        element.setAttribute('aria-hidden', 'true');
+        element.setAttribute('role', 'presentation');
+        element.addEventListener('focus', onFocus);
 
-            if (!el.$_pfocustrapFocusTrapDisabled) {
-                element = el;
-                createHiddenElements(el);
-                bind(el);
-            }
+        return element;
+    };
+
+    const firstFocusableElement = createFocusableElement(onFirstHiddenElementFocus);
+    const lastFocusableElement = createFocusableElement(onLastHiddenElementFocus);
+
+    firstFocusableElement.$_pfocustrap_lasthiddenfocusableelement = lastFocusableElement;
+    firstFocusableElement.$_pfocustrap_focusableselector = firstFocusableSelector;
+
+    lastFocusableElement.$_pfocustrap_firsthiddenfocusableelement = firstFocusableElement;
+    lastFocusableElement.$_pfocustrap_focusableselector = lastFocusableSelector;
+
+    el.prepend(firstFocusableElement);
+    el.append(lastFocusableElement);
+}
+
+const FocusTrap = {
+    mounted(el, binding) {
+        const { disabled } = binding.value || {};
+
+        if (!disabled) {
+            createHiddenFocusableElements(el, binding);
+            bind(el, binding);
+            autoFocus(el, binding);
         }
     },
+    updated(el, binding) {
+        const { disabled } = binding.value || {};
+
+        disabled && unbind(el);
+    },
     unmounted(el) {
-        element = null;
-        firstVNode = null;
-        lastVNode = null;
-        shiftKey = false;
         unbind(el);
     }
 };

package/focustrap/focustrap.esm.min.js

@@ -1 +1 @@
-import{DomHandler as e}from"primevue/utils";let t,n,s,o=!1;function u(){if(o)s.focus();else{const n=e.getFirstFocusableElement(t,":not(.p-hidden-focusable)");e.focus(n)}}function a(){if(o){const n=e.getLastFocusableElement(t,":not(.p-hidden-focusable)");e.focus(n)}else n.focus()}function c(e){const t=document.createElement("span");return t.classList="p-hidden-accessible p-hidden-focusable",t.tabIndex="0",t.setAttribute("aria-hidden","true"),t.setAttribute("role","presentation"),t.addEventListener("focus",e),t}const l={mounted(l,i,r){e.getFirstFocusableElement(l,":not(.p-hidden-focusable)")&&(l.$_pfocustrapFocusTrapDisabled=!1,i.value&&"object"==typeof i.value&&(l.$_pfocustrapFocusTrapDisabled=i.value.focusTrapDisabled),l.$_pfocustrapFocusTrapDisabled||(t=l,function(e){n=c(u),s=c(a),e.prepend(n),e.append(s)}(l),function(e){e.$_pfocustrap_keydownlistener=e=>{"Tab"===e.code&&(o=e.shiftKey)},e.addEventListener("keydown",e.$_pfocustrap_keydownlistener)}(l)))},unmounted(e){t=null,n=null,s=null,o=!1,function(e){e.$_pfocustrap_keydownlistener&&(e.removeEventListener("keydown",e.$_pfocustrap_keydownlistener),e.$_pfocustrap_keydownlistener=null)}(e)}};export{l as default};
+import{DomHandler as e,ObjectUtils as t}from"primevue/utils";function s(e){e.$_pfocustrap_mutationobserver&&e.$_pfocustrap_mutationobserver.disconnect(),e.$_pfocustrap_focusinlistener&&e.removeEventListener("focusin",e.$_pfocustrap_focusinlistener)&&(e.$_pfocustrap_focusinlistener=null),e.$_pfocustrap_focusoutlistener&&e.removeEventListener("focusout",e.$_pfocustrap_focusoutlistener)&&(e.$_pfocustrap_focusoutlistener=null)}function o(t){const{currentTarget:s,relatedTarget:o}=t,n=o===s.$_pfocustrap_lasthiddenfocusableelement?e.getFirstFocusableElement(s.parentElement,`:not(.p-hidden-focusable)${s.$_pfocustrap_focusableselector}`):s.$_pfocustrap_lasthiddenfocusableelement;e.focus(n)}function n(t){const{currentTarget:s,relatedTarget:o}=t,n=o===s.$_pfocustrap_firsthiddenfocusableelement?e.getLastFocusableElement(s.parentElement,`:not(.p-hidden-focusable)${s.$_pfocustrap_focusableselector}`):s.$_pfocustrap_firsthiddenfocusableelement;e.focus(n)}const u={mounted(s,u){const{disabled:c}=u.value||{};c||(function(e,t){const{tabIndex:s=0,firstFocusableSelector:u="",lastFocusableSelector:c=""}=t.value||{},r=e=>{const t=document.createElement("span");return t.classList="p-hidden-accessible p-hidden-focusable",t.tabIndex=s,t.setAttribute("aria-hidden","true"),t.setAttribute("role","presentation"),t.addEventListener("focus",e),t},a=r(o),l=r(n);a.$_pfocustrap_lasthiddenfocusableelement=l,a.$_pfocustrap_focusableselector=u,l.$_pfocustrap_firsthiddenfocusableelement=a,l.$_pfocustrap_focusableselector=c,e.prepend(a),e.append(l)}(s,u),function(s,o){const{onFocusIn:n,onFocusOut:u}=o.value||{};s.$_pfocustrap_mutationobserver=new MutationObserver((o=>{o.forEach((o=>{if("childList"===o.type&&!s.contains(document.activeElement)){const s=o=>{const n=e.isFocusableElement(o)?o:e.getFirstFocusableElement(o);return t.isNotEmpty(n)?n:s(o.nextSibling)};e.focus(s(o.nextSibling))}}))})),s.$_pfocustrap_mutationobserver.disconnect(),s.$_pfocustrap_mutationobserver.observe(s,{childList:!0}),s.$_pfocustrap_focusinlistener=e=>n&&n(e),s.$_pfocustrap_focusoutlistener=e=>u&&u(e),s.addEventListener("focusin",s.$_pfocustrap_focusinlistener),s.addEventListener("focusout",s.$_pfocustrap_focusoutlistener)}(s,u),function(t,s){const{autoFocusSelector:o="",firstFocusableSelector:n="",autoFocus:u=!1}=s.value||{};let c=e.getFirstFocusableElement(t,`[autofocus]:not(.p-hidden-focusable)${o}`);u&&!c&&(c=e.getFirstFocusableElement(t,`:not(.p-hidden-focusable)${n}`)),e.focus(c)}(s,u))},updated(e,t){const{disabled:o}=t.value||{};o&&s(e)},unmounted(e){s(e)}};export{u as default};

package/focustrap/focustrap.js

@@ -2,91 +2,113 @@ this.primevue = this.primevue || {};
 this.primevue.focustrap = (function (utils) {
     'use strict';
 
-    let element,
-        firstVNode,
-        lastVNode,
-        shiftKey = false;
-
-    function firstHiddenFocus() {
-        if (shiftKey) {
-            lastVNode.focus();
-        } else {
-            const firstFocusableEl = utils.DomHandler.getFirstFocusableElement(element, ':not(.p-hidden-focusable)');
-
-            utils.DomHandler.focus(firstFocusableEl);
-        }
-    }
+    function bind(el, binding) {
+        const { onFocusIn, onFocusOut } = binding.value || {};
 
-    function lastHiddenFocus() {
-        if (shiftKey) {
-            const lastFocusableEl = utils.DomHandler.getLastFocusableElement(element, ':not(.p-hidden-focusable)');
+        el.$_pfocustrap_mutationobserver = new MutationObserver((mutationList) => {
+            mutationList.forEach((mutation) => {
+                if (mutation.type === 'childList' && !el.contains(document.activeElement)) {
+                    const findNextFocusableElement = (el) => {
+                        const focusableElement = utils.DomHandler.isFocusableElement(el) ? el : utils.DomHandler.getFirstFocusableElement(el);
 
-            utils.DomHandler.focus(lastFocusableEl);
-        } else {
-            firstVNode.focus();
-        }
-    }
+                        return utils.ObjectUtils.isNotEmpty(focusableElement) ? focusableElement : findNextFocusableElement(el.nextSibling);
+                    };
+
+                    utils.DomHandler.focus(findNextFocusableElement(mutation.nextSibling));
+                }
+            });
+        });
+
+        el.$_pfocustrap_mutationobserver.disconnect();
+        el.$_pfocustrap_mutationobserver.observe(el, {
+            childList: true
+        });
 
-    function createHiddenElement(callback) {
-        const el = document.createElement('span');
+        el.$_pfocustrap_focusinlistener = (event) => onFocusIn && onFocusIn(event);
+        el.$_pfocustrap_focusoutlistener = (event) => onFocusOut && onFocusOut(event);
 
-        el.classList = 'p-hidden-accessible p-hidden-focusable';
-        el.tabIndex = '0';
-        el.setAttribute('aria-hidden', 'true');
-        el.setAttribute('role', 'presentation');
-        el.addEventListener('focus', callback);
+        el.addEventListener('focusin', el.$_pfocustrap_focusinlistener);
+        el.addEventListener('focusout', el.$_pfocustrap_focusoutlistener);
+    }
 
-        return el;
+    function unbind(el) {
+        el.$_pfocustrap_mutationobserver && el.$_pfocustrap_mutationobserver.disconnect();
+        el.$_pfocustrap_focusinlistener && el.removeEventListener('focusin', el.$_pfocustrap_focusinlistener) && (el.$_pfocustrap_focusinlistener = null);
+        el.$_pfocustrap_focusoutlistener && el.removeEventListener('focusout', el.$_pfocustrap_focusoutlistener) && (el.$_pfocustrap_focusoutlistener = null);
     }
 
-    function createHiddenElements(el) {
-        firstVNode = createHiddenElement(firstHiddenFocus);
-        lastVNode = createHiddenElement(lastHiddenFocus);
+    function autoFocus(el, binding) {
+        const { autoFocusSelector = '', firstFocusableSelector = '', autoFocus = false } = binding.value || {};
+        let focusableElement = utils.DomHandler.getFirstFocusableElement(el, `[autofocus]:not(.p-hidden-focusable)${autoFocusSelector}`);
 
-        el.prepend(firstVNode);
-        el.append(lastVNode);
+        autoFocus && !focusableElement && (focusableElement = utils.DomHandler.getFirstFocusableElement(el, `:not(.p-hidden-focusable)${firstFocusableSelector}`));
+        utils.DomHandler.focus(focusableElement);
     }
 
-    function bind(el) {
-        el.$_pfocustrap_keydownlistener = (e) => {
-            if (e.code === 'Tab') {
-                shiftKey = e.shiftKey;
-            }
-        };
+    function onFirstHiddenElementFocus(event) {
+        const { currentTarget, relatedTarget } = event;
+        const focusableElement =
+            relatedTarget === currentTarget.$_pfocustrap_lasthiddenfocusableelement
+                ? utils.DomHandler.getFirstFocusableElement(currentTarget.parentElement, `:not(.p-hidden-focusable)${currentTarget.$_pfocustrap_focusableselector}`)
+                : currentTarget.$_pfocustrap_lasthiddenfocusableelement;
 
-        el.addEventListener('keydown', el.$_pfocustrap_keydownlistener);
+        utils.DomHandler.focus(focusableElement);
     }
 
-    function unbind(el) {
-        if (el.$_pfocustrap_keydownlistener) {
-            el.removeEventListener('keydown', el.$_pfocustrap_keydownlistener);
-            el.$_pfocustrap_keydownlistener = null;
-        }
+    function onLastHiddenElementFocus(event) {
+        const { currentTarget, relatedTarget } = event;
+        const focusableElement =
+            relatedTarget === currentTarget.$_pfocustrap_firsthiddenfocusableelement
+                ? utils.DomHandler.getLastFocusableElement(currentTarget.parentElement, `:not(.p-hidden-focusable)${currentTarget.$_pfocustrap_focusableselector}`)
+                : currentTarget.$_pfocustrap_firsthiddenfocusableelement;
+
+        utils.DomHandler.focus(focusableElement);
     }
 
-    const FocusTrap = {
-        mounted(el, binding, vnode) {
-            const firstFocusableEl = utils.DomHandler.getFirstFocusableElement(el, ':not(.p-hidden-focusable)');
+    function createHiddenFocusableElements(el, binding) {
+        const { tabIndex = 0, firstFocusableSelector = '', lastFocusableSelector = '' } = binding.value || {};
 
-            if (firstFocusableEl) {
-                el.$_pfocustrapFocusTrapDisabled = false;
+        const createFocusableElement = (onFocus) => {
+            const element = document.createElement('span');
 
-                if (binding.value && typeof binding.value === 'object') {
-                    el.$_pfocustrapFocusTrapDisabled = binding.value.focusTrapDisabled;
-                }
+            element.classList = 'p-hidden-accessible p-hidden-focusable';
+            element.tabIndex = tabIndex;
+            element.setAttribute('aria-hidden', 'true');
+            element.setAttribute('role', 'presentation');
+            element.addEventListener('focus', onFocus);
 
-                if (!el.$_pfocustrapFocusTrapDisabled) {
-                    element = el;
-                    createHiddenElements(el);
-                    bind(el);
-                }
+            return element;
+        };
+
+        const firstFocusableElement = createFocusableElement(onFirstHiddenElementFocus);
+        const lastFocusableElement = createFocusableElement(onLastHiddenElementFocus);
+
+        firstFocusableElement.$_pfocustrap_lasthiddenfocusableelement = lastFocusableElement;
+        firstFocusableElement.$_pfocustrap_focusableselector = firstFocusableSelector;
+
+        lastFocusableElement.$_pfocustrap_firsthiddenfocusableelement = firstFocusableElement;
+        lastFocusableElement.$_pfocustrap_focusableselector = lastFocusableSelector;
+
+        el.prepend(firstFocusableElement);
+        el.append(lastFocusableElement);
+    }
+
+    const FocusTrap = {
+        mounted(el, binding) {
+            const { disabled } = binding.value || {};
+
+            if (!disabled) {
+                createHiddenFocusableElements(el, binding);
+                bind(el, binding);
+                autoFocus(el, binding);
             }
         },
+        updated(el, binding) {
+            const { disabled } = binding.value || {};
+
+            disabled && unbind(el);
+        },
         unmounted(el) {
-            element = null;
-            firstVNode = null;
-            lastVNode = null;
-            shiftKey = false;
             unbind(el);
         }
     };

package/focustrap/focustrap.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.focustrap=function(e){"use strict";let t,n,s,o=!1;function u(){if(o)s.focus();else{const n=e.DomHandler.getFirstFocusableElement(t,":not(.p-hidden-focusable)");e.DomHandler.focus(n)}}function r(){if(o){const n=e.DomHandler.getLastFocusableElement(t,":not(.p-hidden-focusable)");e.DomHandler.focus(n)}else n.focus()}function a(e){const t=document.createElement("span");return t.classList="p-hidden-accessible p-hidden-focusable",t.tabIndex="0",t.setAttribute("aria-hidden","true"),t.setAttribute("role","presentation"),t.addEventListener("focus",e),t}return{mounted(i,c,l){e.DomHandler.getFirstFocusableElement(i,":not(.p-hidden-focusable)")&&(i.$_pfocustrapFocusTrapDisabled=!1,c.value&&"object"==typeof c.value&&(i.$_pfocustrapFocusTrapDisabled=c.value.focusTrapDisabled),i.$_pfocustrapFocusTrapDisabled||(t=i,function(e){n=a(u),s=a(r),e.prepend(n),e.append(s)}(i),function(e){e.$_pfocustrap_keydownlistener=e=>{"Tab"===e.code&&(o=e.shiftKey)},e.addEventListener("keydown",e.$_pfocustrap_keydownlistener)}(i)))},unmounted(e){t=null,n=null,s=null,o=!1,function(e){e.$_pfocustrap_keydownlistener&&(e.removeEventListener("keydown",e.$_pfocustrap_keydownlistener),e.$_pfocustrap_keydownlistener=null)}(e)}}}(primevue.utils);
+this.primevue=this.primevue||{},this.primevue.focustrap=function(e){"use strict";function t(e){e.$_pfocustrap_mutationobserver&&e.$_pfocustrap_mutationobserver.disconnect(),e.$_pfocustrap_focusinlistener&&e.removeEventListener("focusin",e.$_pfocustrap_focusinlistener)&&(e.$_pfocustrap_focusinlistener=null),e.$_pfocustrap_focusoutlistener&&e.removeEventListener("focusout",e.$_pfocustrap_focusoutlistener)&&(e.$_pfocustrap_focusoutlistener=null)}function o(t){const{currentTarget:o,relatedTarget:s}=t,n=s===o.$_pfocustrap_lasthiddenfocusableelement?e.DomHandler.getFirstFocusableElement(o.parentElement,`:not(.p-hidden-focusable)${o.$_pfocustrap_focusableselector}`):o.$_pfocustrap_lasthiddenfocusableelement;e.DomHandler.focus(n)}function s(t){const{currentTarget:o,relatedTarget:s}=t,n=s===o.$_pfocustrap_firsthiddenfocusableelement?e.DomHandler.getLastFocusableElement(o.parentElement,`:not(.p-hidden-focusable)${o.$_pfocustrap_focusableselector}`):o.$_pfocustrap_firsthiddenfocusableelement;e.DomHandler.focus(n)}const n={mounted(t,n){const{disabled:u}=n.value||{};u||(function(e,t){const{tabIndex:n=0,firstFocusableSelector:u="",lastFocusableSelector:c=""}=t.value||{},r=e=>{const t=document.createElement("span");return t.classList="p-hidden-accessible p-hidden-focusable",t.tabIndex=n,t.setAttribute("aria-hidden","true"),t.setAttribute("role","presentation"),t.addEventListener("focus",e),t},a=r(o),l=r(s);a.$_pfocustrap_lasthiddenfocusableelement=l,a.$_pfocustrap_focusableselector=u,l.$_pfocustrap_firsthiddenfocusableelement=a,l.$_pfocustrap_focusableselector=c,e.prepend(a),e.append(l)}(t,n),function(t,o){const{onFocusIn:s,onFocusOut:n}=o.value||{};t.$_pfocustrap_mutationobserver=new MutationObserver((o=>{o.forEach((o=>{if("childList"===o.type&&!t.contains(document.activeElement)){const t=o=>{const s=e.DomHandler.isFocusableElement(o)?o:e.DomHandler.getFirstFocusableElement(o);return e.ObjectUtils.isNotEmpty(s)?s:t(o.nextSibling)};e.DomHandler.focus(t(o.nextSibling))}}))})),t.$_pfocustrap_mutationobserver.disconnect(),t.$_pfocustrap_mutationobserver.observe(t,{childList:!0}),t.$_pfocustrap_focusinlistener=e=>s&&s(e),t.$_pfocustrap_focusoutlistener=e=>n&&n(e),t.addEventListener("focusin",t.$_pfocustrap_focusinlistener),t.addEventListener("focusout",t.$_pfocustrap_focusoutlistener)}(t,n),function(t,o){const{autoFocusSelector:s="",firstFocusableSelector:n="",autoFocus:u=!1}=o.value||{};let c=e.DomHandler.getFirstFocusableElement(t,`[autofocus]:not(.p-hidden-focusable)${s}`);u&&!c&&(c=e.DomHandler.getFirstFocusableElement(t,`:not(.p-hidden-focusable)${n}`)),e.DomHandler.focus(c)}(t,n))},updated(e,o){const{disabled:s}=o.value||{};s&&t(e)},unmounted(e){t(e)}};return n}(primevue.utils);

package/galleria/Galleria.d.ts

@@ -1,4 +1,4 @@
-import { VNode } from 'vue';
+import { ButtonHTMLAttributes, HTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 type GalleriaThumbnailsPositionType = 'bottom' | 'top' | 'left' | 'right' | undefined;
@@ -119,11 +119,23 @@ export interface GalleriaProps {
     /**
      * Inline style of the component on fullscreen mode. Otherwise, the 'style' property can be used.
      */
-    containerStyle?: any;
+    containerStyle?: any | undefined;
     /**
      * Style class of the component on fullscreen mode. Otherwise, the 'class' property can be used.
      */
-    containerClass?: any;
+    containerClass?: any | undefined;
+    /**
+     * Uses to pass all properties of the HTMLDivElement to the container element on fullscreen mode.
+     */
+    containerProps?: HTMLAttributes | undefined;
+    /**
+     * Uses to pass all properties of the HTMLButtonElement to the previous navigation button.
+     */
+    prevButtonProps?: ButtonHTMLAttributes | undefined;
+    /**
+     * Uses to pass all properties of the HTMLButtonElement to the next navigation button.
+     */
+    nextButtonProps?: ButtonHTMLAttributes | undefined;
 }
 
 export interface GalleriaSlots {