@stonecrop/utilities 0.13.4 → 0.13.5

package/dist/src/composables/keyboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard.d.ts","sourceRoot":"","sources":["../../../src/composables/keyboard.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,yBAAyB,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAuM3E;;;GAGG;AACH,eAAO,MAAM,uBAAuB,EAAE,gBA6HrC,CAAA;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,yBAAyB,EAAE,QA2IlE"}
+{"version":3,"file":"keyboard.d.ts","sourceRoot":"","sources":["../../../src/composables/keyboard.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,yBAAyB,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAmN3E;;;GAGG;AACH,eAAO,MAAM,uBAAuB,EAAE,gBA+HrC,CAAA;AAoBD;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,yBAAyB,EAAE,QA+HlE"}

package/dist/src/composables/keyboard.js

@@ -3,63 +3,66 @@ import { useFocusWithin } from '@vueuse/core';
 import { useElementVisibility } from './visibility';
 // helper functions
 const isVisible = (element) => {
-    let isVisible = useElementVisibility(element).value;
-    isVisible = isVisible && element.offsetHeight > 0;
-    return isVisible;
+    let visible = useElementVisibility(element).value;
+    visible = visible && element.offsetHeight > 0;
+    return visible;
 };
 const isFocusable = (element) => {
     return element.tabIndex >= 0;
 };
 // navigation functions
 const getUpCell = (event) => {
-    const $target = event.target;
-    return _getUpCell($target);
+    if (!(event.target instanceof HTMLElement))
+        return undefined;
+    return getUpCellEl(event.target);
 };
-const _getUpCell = (element) => {
+const getUpCellEl = (element) => {
     let $upCell;
     if (element instanceof HTMLTableCellElement) {
-        const $prevRow = element.parentElement?.previousElementSibling;
-        if ($prevRow) {
-            const $prevRowCells = Array.from($prevRow.children);
-            const $prevCell = $prevRowCells[element.cellIndex];
-            if ($prevCell) {
-                $upCell = $prevCell;
+        const $prevSibling = element.parentElement?.previousElementSibling;
+        if ($prevSibling instanceof HTMLTableRowElement) {
+            const $prevRowCells = Array.from($prevSibling.children);
+            const $cellEl = $prevRowCells[element.cellIndex];
+            if ($cellEl instanceof HTMLElement) {
+                $upCell = $cellEl;
             }
         }
     }
     else if (element instanceof HTMLTableRowElement) {
-        const $prevRow = element.previousElementSibling;
-        if ($prevRow) {
-            $upCell = $prevRow;
+        const $prevSibling = element.previousElementSibling;
+        if ($prevSibling instanceof HTMLTableRowElement) {
+            $upCell = $prevSibling;
         }
     }
     else {
         // handle other contexts
     }
     if ($upCell && (!isFocusable($upCell) || !isVisible($upCell))) {
-        return _getUpCell($upCell);
+        return getUpCellEl($upCell);
     }
     return $upCell;
 };
 const getTopCell = (event) => {
+    if (!(event.target instanceof HTMLElement))
+        return undefined;
     const $target = event.target;
     let $topCell;
     if ($target instanceof HTMLTableCellElement) {
         const $table = $target.parentElement?.parentElement;
         if ($table) {
             const $firstRow = $table.firstElementChild;
-            const $navCell = $firstRow?.children[$target.cellIndex];
-            if ($navCell) {
-                $topCell = $navCell;
+            const $navEl = $firstRow?.children[$target.cellIndex];
+            if ($navEl instanceof HTMLElement) {
+                $topCell = $navEl;
             }
         }
     }
     else if ($target instanceof HTMLTableRowElement) {
-        const $table = $target.parentElement;
-        if ($table) {
-            const $firstRow = $table.firstElementChild;
-            if ($firstRow) {
-                $topCell = $firstRow;
+        const $parent = $target.parentElement;
+        if ($parent) {
+            const $firstEl = $parent.firstElementChild;
+            if ($firstEl instanceof HTMLTableRowElement) {
+                $topCell = $firstEl;
             }
         }
     }
@@ -67,59 +70,62 @@ const getTopCell = (event) => {
         // handle other contexts
     }
     if ($topCell && (!isFocusable($topCell) || !isVisible($topCell))) {
-        return _getDownCell($topCell);
+        return getDownCellEl($topCell);
     }
     return $topCell;
 };
 const getDownCell = (event) => {
-    const $target = event.target;
-    return _getDownCell($target);
+    if (!(event.target instanceof HTMLElement))
+        return undefined;
+    return getDownCellEl(event.target);
 };
-const _getDownCell = (element) => {
+const getDownCellEl = (element) => {
     let $downCell;
     if (element instanceof HTMLTableCellElement) {
-        const $nextRow = element.parentElement?.nextElementSibling;
-        if ($nextRow) {
-            const $nextRowCells = Array.from($nextRow.children);
-            const $nextCell = $nextRowCells[element.cellIndex];
-            if ($nextCell) {
-                $downCell = $nextCell;
+        const $nextSibling = element.parentElement?.nextElementSibling;
+        if ($nextSibling) {
+            const $nextRowCells = Array.from($nextSibling.children);
+            const $cellEl = $nextRowCells[element.cellIndex];
+            if ($cellEl instanceof HTMLElement) {
+                $downCell = $cellEl;
             }
         }
     }
     else if (element instanceof HTMLTableRowElement) {
-        const $nextRow = element.nextElementSibling;
-        if ($nextRow) {
-            $downCell = $nextRow;
+        const $nextSibling = element.nextElementSibling;
+        if ($nextSibling instanceof HTMLTableRowElement) {
+            $downCell = $nextSibling;
         }
     }
     else {
         // handle other contexts
     }
     if ($downCell && (!isFocusable($downCell) || !isVisible($downCell))) {
-        return _getDownCell($downCell);
+        return getDownCellEl($downCell);
     }
     return $downCell;
 };
 const getBottomCell = (event) => {
+    if (!(event.target instanceof HTMLElement))
+        return undefined;
     const $target = event.target;
     let $bottomCell;
     if ($target instanceof HTMLTableCellElement) {
         const $table = $target.parentElement?.parentElement;
         if ($table) {
             const $lastRow = $table.lastElementChild;
-            const $navCell = $lastRow?.children[$target.cellIndex];
-            if ($navCell) {
-                $bottomCell = $navCell;
+            const $navEl = $lastRow?.children[$target.cellIndex];
+            if ($navEl instanceof HTMLElement) {
+                $bottomCell = $navEl;
             }
         }
     }
     else if ($target instanceof HTMLTableRowElement) {
-        const $table = $target.parentElement;
-        if ($table) {
-            const $lastRow = $table.lastElementChild;
-            if ($lastRow) {
-                $bottomCell = $lastRow;
+        const $parent = $target.parentElement;
+        if ($parent) {
+            const $lastEl = $parent.lastElementChild;
+            if ($lastEl instanceof HTMLTableRowElement) {
+                $bottomCell = $lastEl;
             }
         }
     }
@@ -127,61 +133,75 @@ const getBottomCell = (event) => {
         // handle other contexts
     }
     if ($bottomCell && (!isFocusable($bottomCell) || !isVisible($bottomCell))) {
-        return _getUpCell($bottomCell);
+        return getUpCellEl($bottomCell);
     }
     return $bottomCell;
 };
 const getPrevCell = (event) => {
-    const $target = event.target;
-    return _getPrevCell($target);
+    if (!(event.target instanceof HTMLElement))
+        return undefined;
+    return getPrevCellEl(event.target);
 };
-const _getPrevCell = (element) => {
+const getPrevCellEl = (element) => {
     let $prevCell;
-    if (element.previousElementSibling) {
-        $prevCell = element.previousElementSibling;
+    const $prevSibling = element.previousElementSibling;
+    if ($prevSibling instanceof HTMLElement) {
+        $prevCell = $prevSibling;
     }
     else {
         const $prevRow = element.parentElement?.previousElementSibling;
-        $prevCell = $prevRow?.lastElementChild;
+        const $lastEl = $prevRow?.lastElementChild;
+        if ($lastEl instanceof HTMLElement) {
+            $prevCell = $lastEl;
+        }
     }
     if ($prevCell && (!isFocusable($prevCell) || !isVisible($prevCell))) {
-        return _getPrevCell($prevCell);
+        return getPrevCellEl($prevCell);
     }
     return $prevCell;
 };
 const getNextCell = (event) => {
-    const $target = event.target;
-    return _getNextCell($target);
+    if (!(event.target instanceof HTMLElement))
+        return undefined;
+    return getNextCellEl(event.target);
 };
-const _getNextCell = (element) => {
+const getNextCellEl = (element) => {
     let $nextCell;
-    if (element.nextElementSibling) {
-        $nextCell = element.nextElementSibling;
+    const $nextSibling = element.nextElementSibling;
+    if ($nextSibling instanceof HTMLElement) {
+        $nextCell = $nextSibling;
     }
     else {
         const $nextRow = element.parentElement?.nextElementSibling;
-        $nextCell = $nextRow?.firstElementChild;
+        const $firstEl = $nextRow?.firstElementChild;
+        if ($firstEl instanceof HTMLElement) {
+            $nextCell = $firstEl;
+        }
     }
     if ($nextCell && (!isFocusable($nextCell) || !isVisible($nextCell))) {
-        return _getNextCell($nextCell);
+        return getNextCellEl($nextCell);
     }
     return $nextCell;
 };
 const getFirstCell = (event) => {
-    const $target = event.target;
-    const $parent = $target.parentElement;
-    const $firstCell = $parent?.firstElementChild;
+    if (!(event.target instanceof HTMLElement))
+        return undefined;
+    const $parent = event.target.parentElement;
+    const $firstEl = $parent?.firstElementChild;
+    const $firstCell = $firstEl instanceof HTMLElement ? $firstEl : null;
     if ($firstCell && (!isFocusable($firstCell) || !isVisible($firstCell))) {
-        return _getNextCell($firstCell);
+        return getNextCellEl($firstCell);
     }
     return $firstCell;
 };
 const getLastCell = (event) => {
-    const $target = event.target;
-    const $parent = $target.parentElement;
-    const $lastCell = $parent?.lastElementChild;
+    if (!(event.target instanceof HTMLElement))
+        return undefined;
+    const $parent = event.target.parentElement;
+    const $lastEl = $parent?.lastElementChild;
+    const $lastCell = $lastEl instanceof HTMLElement ? $lastEl : null;
     if ($lastCell && (!isFocusable($lastCell) || !isVisible($lastCell))) {
-        return _getPrevCell($lastCell);
+        return getPrevCellEl($lastCell);
     }
     return $lastCell;
 };
@@ -272,6 +292,8 @@ export const defaultKeypressHandlers = {
         }
     },
     'keydown.enter': (event) => {
+        if (!(event.target instanceof HTMLElement))
+            return;
         const $target = event.target;
         if ($target instanceof HTMLTableCellElement) {
             event.preventDefault();
@@ -286,6 +308,8 @@ export const defaultKeypressHandlers = {
         }
     },
     'keydown.shift.enter': (event) => {
+        if (!(event.target instanceof HTMLElement))
+            return;
         const $target = event.target;
         if ($target instanceof HTMLTableCellElement) {
             event.preventDefault();
@@ -324,27 +348,31 @@ export const defaultKeypressHandlers = {
         }
     },
 };
+/**
+ * Gets the parent element from a keyboard navigation option.
+ * @internal
+ */
+function getParentElement(option) {
+    let $parent = null;
+    if (option.parent) {
+        if (typeof option.parent === 'string') {
+            $parent = document.querySelector(option.parent);
+        }
+        else if (option.parent instanceof HTMLElement) {
+            $parent = option.parent;
+        }
+        else {
+            $parent = option.parent.value;
+        }
+    }
+    return $parent;
+}
 /**
  * Keyboard navigation composable
  * @param options - Keyboard navigation options
  * @public
  */
 export function useKeyboardNav(options) {
-    const getParentElement = (option) => {
-        let $parent = null;
-        if (option.parent) {
-            if (typeof option.parent === 'string') {
-                $parent = document.querySelector(option.parent);
-            }
-            else if (option.parent instanceof HTMLElement) {
-                $parent = option.parent;
-            }
-            else {
-                $parent = option.parent.value;
-            }
-        }
-        return $parent;
-    };
     const getSelectorsFromOption = (option) => {
         // assumes that option.selectors is provided
         const $parent = getParentElement(option);
@@ -360,6 +388,7 @@ export function useKeyboardNav(options) {
                     selectors.push(element);
                 }
                 else {
+                    // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- Vue component $el is typed as any; shape guaranteed by VNode contract
                     selectors.push(element.$el);
                 }
             }
@@ -374,6 +403,7 @@ export function useKeyboardNav(options) {
                         selectors.push(element);
                     }
                     else {
+                        // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- Vue component $el is typed as any; shape guaranteed by VNode contract
                         selectors.push(element.$el);
                     }
                 }
@@ -392,7 +422,7 @@ export function useKeyboardNav(options) {
         }
         else if ($parent) {
             // TODO: what should happen if no parent or selectors are provided?
-            const $children = Array.from($parent.children);
+            const $children = Array.from($parent.children).filter((el) => el instanceof HTMLElement);
             selectors = $children.filter(selector => {
                 // ignore elements not in the tab order or are not visible
                 return isFocusable(selector) && isVisible(selector);
@@ -415,9 +445,9 @@ export function useKeyboardNav(options) {
                     const listener = handlers[key];
                     // check if the handler has modifiers, and if the modifier is active;
                     // this is to ensure exact key-press matches
-                    const hasModifier = keys.filter(key => modifierKeys.includes(key));
-                    const isModifierActive = modifierKeys.some(key => {
-                        const modifierKey = key.charAt(0).toUpperCase() + key.slice(1);
+                    const hasModifier = keys.filter(k => modifierKeys.includes(k));
+                    const isModifierActive = modifierKeys.some(mk => {
+                        const modifierKey = mk.charAt(0).toUpperCase() + mk.slice(1);
                         return event.getModifierState(modifierKey);
                     });
                     if (hasModifier.length > 0) {