@marianmeres/stuic 1.12.0 → 1.14.0

package/dist/actions/focus-trap.js

@@ -1,19 +1,21 @@
-// copied from skeleton
-const defaults = { enabled: true, autoFocusFirst: false };
-// Action: Focus Trap
+// initially copied from skeleton, adjusted
+const defaults = { enabled: true, autoFocusFirst: true };
 export function focusTrap(node, options = {}) {
     let { enabled, autoFocusFirst } = { ...defaults, ...(options || {}) };
     const focusableSelectors = [
-        'a[href]',
-        'area[href]',
-        'details',
-        'iframe',
+        '[contentEditable=true]',
+        //
         'button:not([disabled])',
         'input:not([disabled])',
         'select:not([disabled])',
         'textarea:not([disabled])',
-        '[contentEditable=true]',
-        '[tabindex]',
+        //
+        'a[href]',
+        'area[href]',
+        'details',
+        'iframe',
+        // see more below on tabindexes
+        '[tabindex]:not([tabindex^="-"])',
     ].join(',');
     let first;
     let last;
@@ -34,20 +36,25 @@ export function focusTrap(node, options = {}) {
     const queryElements = (fromObserver) => {
         if (enabled === false)
             return;
-        const focusable = [...node.querySelectorAll(focusableSelectors)]
-            // i am unable to get the selectors right (still getting false positives),
-            // but filtering manually works well
+        let maxTabindex = 0;
+        let focusable = [...node.querySelectorAll(focusableSelectors)]
+            // filter negative tabindexes (afaik there is no :not([disabled] OR [tabindex^="-"]))
             .filter((e) => {
+            // reusing loop for a side job here... see sort below
+            maxTabindex = Math.max(maxTabindex, parseInt(e.getAttribute('tabindex') || '0'));
+            //
             if (e.getAttribute('disabled') === '')
                 return false;
             if ((e.getAttribute('tabindex') || '').startsWith('-'))
                 return false;
             return true;
         })
-            // sort by tabindex, so the first/last will work as expected
-            .toSorted((e1, e2) => {
-            let a = parseInt(e1.getAttribute('tabindex') || '0');
-            let b = parseInt(e2.getAttribute('tabindex') || '0');
+            // important to sort by tabindex, so the first/last will work as expected
+            // but must increase zero to max + 1 first, because browsers focus zeros as last...
+            // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
+            .sort((e1, e2) => {
+            const a = parseInt(e1.getAttribute('tabindex') || '0') || maxTabindex + 1;
+            const b = parseInt(e2.getAttribute('tabindex') || '0') || maxTabindex + 1;
             return a - b;
         });
         if (focusable.length) {
@@ -63,20 +70,17 @@ export function focusTrap(node, options = {}) {
     };
     queryElements(false);
     function cleanup() {
-        if (first)
-            first.removeEventListener('keydown', onFirstElemKeydown);
-        if (last)
-            last.removeEventListener('keydown', onLastElemKeydown);
+        first && first.removeEventListener('keydown', onFirstElemKeydown);
+        last && last.removeEventListener('keydown', onLastElemKeydown);
     }
     // When children of node are changed (added or removed)
-    const onObservationChange = (mutationRecords, observer) => {
-        if (mutationRecords.length) {
+    const observer = new MutationObserver((mutations, observer) => {
+        if (mutations.length) {
             cleanup();
             queryElements(true);
         }
         return observer;
-    };
-    const observer = new MutationObserver(onObservationChange);
+    });
     observer.observe(node, { childList: true, subtree: true });
     // Lifecycle
     return {

package/package.json

@@ -1,9 +1,9 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "1.12.0",
+	"version": "1.14.0",
 	"scripts": {
 		"dev": "vite dev",
-		"build": "vite build && npm run package",
+		"build": "vite build && npm run package && node ./scripts/date.js",
 		"build:watch": "fswatch -o src | xargs -n1 -I{} npm run build",
 		"preview": "vite preview",
 		"package": "svelte-kit sync && svelte-package && publint",