@thednp/shorty 2.0.4 → 2.0.6

package/src/misc/ObjectKeys.ts

@@ -5,6 +5,7 @@
  * @returns an array with object keys
  * @see https://github.com/devinrhode2/ObjectTyped/blob/master/src/index.ts
  */
-const ObjectKeys = <O extends Record<string, any>>(obj: O) => Object.keys(obj) as (keyof O)[];
+const ObjectKeys = <O extends Record<keyof O, unknown>>(obj: O) =>
+  Object.keys(obj) as (keyof O)[];
 
 export default ObjectKeys;

package/src/misc/ObjectValues.ts

@@ -5,7 +5,8 @@
  * @returns an array with the object values
  * @see https://github.com/devinrhode2/ObjectTyped/blob/master/src/index.ts
  */
-const ObjectValues = <O extends Record<string, unknown>>(obj: O): O[keyof O][] =>
-  Object.values(obj) as O[keyof O][];
+const ObjectValues = <O extends Record<string, unknown>>(
+  obj: O,
+): O[keyof O][] => Object.values(obj) as O[keyof O][];
 
 export default ObjectValues;

package/src/misc/createCustomEvent.ts

@@ -1,6 +1,6 @@
-import type { OriginalEvent } from '../interface/originalEvent';
-import isObject from '../is/isObject';
-import ObjectAssign from './ObjectAssign';
+import type { OriginalEvent } from "../interface/originalEvent";
+import isObject from "../is/isObject";
+import ObjectAssign from "./ObjectAssign";
 
 /**
  * Returns a namespaced `CustomEvent` specific to each component.
@@ -9,7 +9,10 @@ import ObjectAssign from './ObjectAssign';
  * @param config Event.options | Event.properties
  * @returns a new namespaced event
  */
-const createCustomEvent = <O extends Record<string, unknown>, T extends OriginalEvent>(
+const createCustomEvent = <
+  O extends unknown & Record<string, unknown>,
+  T extends OriginalEvent,
+>(
   eventType: string,
   config?: O,
 ): T => {
@@ -18,7 +21,7 @@ const createCustomEvent = <O extends Record<string, unknown>, T extends Original
     bubbles: true,
   }) as T;
 
-  /* istanbul ignore else @preserve */
+  // istanbul ignore else @preserve
   if (isObject(config)) {
     ObjectAssign(OriginalCustomEvent, config);
   }

package/src/misc/createElement.ts

@@ -1,6 +1,6 @@
-import isString from '../is/isString';
-import getDocument from '../get/getDocument';
-import ObjectAssign from './ObjectAssign';
+import isString from "../is/isString";
+import getDocument from "../get/getDocument";
+import ObjectAssign from "./ObjectAssign";
 
 /**
  * Shortie for `document.createElement` method
@@ -13,7 +13,9 @@ import ObjectAssign from './ObjectAssign';
  * @param param `tagName` or object
  * @return a new `HTMLElement`
  */
-const createElement = <T extends HTMLElement>(param?: string | Partial<T>): T | undefined => {
+const createElement = <T extends HTMLElement>(
+  param?: string | Partial<T>,
+): T | undefined => {
   if (!param) return undefined;
 
   if (isString(param)) {

package/src/misc/createElementNS.ts

@@ -1,6 +1,6 @@
-import getDocument from '../get/getDocument';
-import ObjectAssign from './ObjectAssign';
-import isString from '../is/isString';
+import getDocument from "../get/getDocument";
+import ObjectAssign from "./ObjectAssign";
+import isString from "../is/isString";
 
 /**
  * Shortie for `document.createElementNS` method

package/src/misc/data.ts

@@ -1,6 +1,6 @@
-import isHTMLElement from '../is/isHTMLElement';
+import isHTMLElement from "../is/isHTMLElement";
 
-const componentData = new Map<string, Map<HTMLElement, any>>();
+const componentData = new Map<string, Map<HTMLElement, unknown>>();
 
 /**
  * An interface for web components background data.
@@ -19,7 +19,7 @@ const Data = {
   set: <T>(element: HTMLElement, component: string, instance: T): void => {
     if (!isHTMLElement(element)) return;
 
-    /* istanbul ignore else */
+    // istanbul ignore else @preserve
     if (!componentData.has(component)) {
       componentData.set(component, new Map<HTMLElement, T>());
     }
@@ -51,11 +51,9 @@ const Data = {
   get: <T>(element: HTMLElement, component: string): T | null => {
     if (!isHTMLElement(element) || !component) return null;
     const instanceMap = Data.getAllFor<T>(component);
-    // const instanceMap = componentData.get(component) as Map<HTMLElement, InstanceType<T>>;
 
     const instance = element && instanceMap && instanceMap.get(element);
 
-    // return (instance as T) || null;
     return instance || null;
   },
 
@@ -67,13 +65,12 @@ const Data = {
    */
   remove: <T>(element: HTMLElement, component: string): void => {
     const instanceMap = Data.getAllFor<T>(component);
-    // const instanceMap = componentData.get(component) as Map<HTMLElement, InstanceType<T>>;
 
     if (!instanceMap || !isHTMLElement(element)) return;
 
     instanceMap.delete(element);
 
-    /* istanbul ignore else */
+    // istanbul ignore else @preserve
     if (instanceMap.size === 0) {
       componentData.delete(component);
     }

package/src/misc/dispatchEvent.ts

@@ -4,6 +4,7 @@
  * @param element is the target
  * @param event is the `Event` object
  */
-const dispatchEvent = (element: EventTarget, event: Event): boolean => element.dispatchEvent(event);
+const dispatchEvent = (element: EventTarget, event: Event): boolean =>
+  element.dispatchEvent(event);
 
 export default dispatchEvent;

package/src/misc/distinct.ts

@@ -13,6 +13,7 @@
  * @param arr a clone of the target array
  * @returns the query result
  */
-const distinct = <T>(value: T, index: number, arr: T[]): boolean => arr.indexOf(value) === index;
+const distinct = <T>(value: T, index: number, arr: T[]): boolean =>
+  arr.indexOf(value) === index;
 
 export default distinct;

package/src/misc/emulateAnimationEnd.ts

@@ -1,7 +1,7 @@
-import animationEndEvent from '../strings/animationEndEvent';
-import getElementAnimationDelay from '../get/getElementAnimationDelay';
-import getElementAnimationDuration from '../get/getElementAnimationDuration';
-import dispatchEvent from './dispatchEvent';
+import animationEndEvent from "../strings/animationEndEvent";
+import getElementAnimationDelay from "../get/getElementAnimationDelay";
+import getElementAnimationDuration from "../get/getElementAnimationDuration";
+import dispatchEvent from "./dispatchEvent";
 
 /**
  * Utility to make sure callbacks are consistently
@@ -10,16 +10,19 @@ import dispatchEvent from './dispatchEvent';
  * @param element target
  * @param handler `animationend` callback
  */
-const emulateAnimationEnd = (element: HTMLElement, handler: EventListener): void => {
+const emulateAnimationEnd = (
+  element: HTMLElement,
+  handler: EventListener,
+): void => {
   let called = 0;
   const endEvent = new Event(animationEndEvent);
   const duration = getElementAnimationDuration(element);
   const delay = getElementAnimationDelay(element);
 
   if (duration) {
-    /** Wrap the handler in on -> off callback */
+    // Wrap the handler in on -> off callback
     const animationEndWrapper = (e: Event): void => {
-      /* istanbul ignore else @preserve */
+      // istanbul ignore else @preserve
       if (e.target === element) {
         handler.apply(element, [e]);
         element.removeEventListener(animationEndEvent, animationEndWrapper);
@@ -28,11 +31,11 @@ const emulateAnimationEnd = (element: HTMLElement, handler: EventListener): void
     };
     element.addEventListener(animationEndEvent, animationEndWrapper);
     setTimeout(() => {
-      /* istanbul ignore next @preserve */
+      // istanbul ignore next @preserve
       if (!called) dispatchEvent(element, endEvent);
     }, duration + delay + 17);
   } else {
-    /* istanbul ignore next @preserve */
+    // istanbul ignore next @preserve
     handler.apply(element, [endEvent]);
   }
 };

package/src/misc/emulateTransitionEnd.ts

@@ -1,7 +1,7 @@
-import transitionEndEvent from '../strings/transitionEndEvent';
-import getElementTransitionDelay from '../get/getElementTransitionDelay';
-import getElementTransitionDuration from '../get/getElementTransitionDuration';
-import dispatchEvent from './dispatchEvent';
+import transitionEndEvent from "../strings/transitionEndEvent";
+import getElementTransitionDelay from "../get/getElementTransitionDelay";
+import getElementTransitionDuration from "../get/getElementTransitionDuration";
+import dispatchEvent from "./dispatchEvent";
 
 /**
  * Utility to make sure callbacks are consistently
@@ -10,16 +10,19 @@ import dispatchEvent from './dispatchEvent';
  * @param element event target
  * @param handler `transitionend` callback
  */
-const emulateTransitionEnd = (element: HTMLElement, handler: EventListener): void => {
+const emulateTransitionEnd = (
+  element: HTMLElement,
+  handler: EventListener,
+): void => {
   let called = 0;
   const endEvent = new Event(transitionEndEvent);
   const duration = getElementTransitionDuration(element);
   const delay = getElementTransitionDelay(element);
 
   if (duration) {
-    /** Wrap the handler in on -> off callback */
+    // Wrap the handler in on -> off callback
     const transitionEndWrapper = (e: Event): void => {
-      /* istanbul ignore else @preserve */
+      // istanbul ignore else @preserve
       if (e.target === element) {
         handler.apply(element, [e]);
         element.removeEventListener(transitionEndEvent, transitionEndWrapper);
@@ -28,7 +31,7 @@ const emulateTransitionEnd = (element: HTMLElement, handler: EventListener): voi
     };
     element.addEventListener(transitionEndEvent, transitionEndWrapper);
     setTimeout(() => {
-      /* istanbul ignore next @preserve */
+      // istanbul ignore next @preserve
       if (!called) dispatchEvent(element, endEvent);
     }, duration + delay + 17);
   } else {

package/src/misc/focus.ts

@@ -4,6 +4,7 @@
  * @param element is the target
  * @param options allows to pass additional options such as `preventScroll: boolean`
  */
-const focus = (element: HTMLOrSVGElement, options?: FocusOptions): void => element.focus(options);
+const focus = (element: HTMLOrSVGElement, options?: FocusOptions): void =>
+  element.focus(options);
 
 export default focus;

package/src/misc/focusTrap.ts

@@ -0,0 +1,67 @@
+import ariaHidden from "../strings/ariaHidden";
+import focusableSelector from "../strings/focusableSelector";
+import querySelectorAll from "../selectors/querySelectorAll";
+import getAttribute from "../attr/getAttribute";
+import hasAttribute from "../attr/hasAttribute";
+import off from "../event/off";
+import on from "../event/on";
+import getDocument from "../get/getDocument";
+import { KeyboardEvent } from "../interface/event";
+
+const focusTrapMap = new Map<HTMLElement, boolean>();
+
+export type FocusableElement =
+  | HTMLAnchorElement
+  | HTMLButtonElement
+  | HTMLInputElement
+  | HTMLTextAreaElement
+  | HTMLDataListElement
+  | HTMLDetailsElement
+  | HTMLSelectElement;
+
+function handleKeyboardNavigation<T extends HTMLElement & EventTarget>(
+  this: T,
+  event: KeyboardEvent<T>,
+) {
+  const { shiftKey, code } = event;
+  const doc = getDocument(this);
+  const focusableElements = [
+    ...querySelectorAll<FocusableElement>(focusableSelector, this),
+  ].filter(
+    (el) => !hasAttribute(el, "disabled") && !getAttribute(el, ariaHidden),
+  );
+
+  if (!focusableElements.length) return;
+  const firstFocusable = focusableElements[0];
+  const lastFocusable = focusableElements[focusableElements.length - 1];
+
+  // istanbul ignore else @preserve
+  if (code === "Tab") {
+    if (shiftKey && doc.activeElement === firstFocusable) {
+      lastFocusable.focus();
+      event.preventDefault();
+    } else if (!shiftKey && doc.activeElement === lastFocusable) {
+      firstFocusable.focus();
+      event.preventDefault();
+    }
+  }
+}
+
+/**
+ * Utility to check if a designated element is affected by focus trap;
+ * @param target
+ */
+export const hasFocusTrap = (target: HTMLElement) =>
+  focusTrapMap.has(target) === true;
+
+/**
+ * Utility to toggle focus trap inside a designated target element;
+ * @param target
+ */
+export const toggleFocusTrap = (target: HTMLElement) => {
+  const isCurrentlyTrapped = hasFocusTrap(target);
+  const action = !isCurrentlyTrapped ? on : off;
+  action(target, "keydown", handleKeyboardNavigation);
+  if (isCurrentlyTrapped) focusTrapMap.delete(target);
+  else focusTrapMap.set(target, true);
+};

package/src/misc/getInstance.ts

@@ -1,4 +1,4 @@
-import Data from './data';
+import Data from "./data";
 
 /**
  * An alias for `Data.get()`.

package/src/misc/normalizeOptions.ts

@@ -1,7 +1,7 @@
-import getAttribute from '../attr/getAttribute';
-import normalizeValue from './normalizeValue';
-import ObjectEntries from './ObjectEntries';
-import toLowerCase from './toLowerCase';
+import getAttribute from "../attr/getAttribute";
+import normalizeValue from "./normalizeValue";
+import ObjectEntries from "./ObjectEntries";
+import toLowerCase from "./toLowerCase";
 // import { optionValues } from '../types';
 
 /**
@@ -13,23 +13,25 @@ import toLowerCase from './toLowerCase';
  * @param ns component namespace
  * @return normalized component options object
  */
-const normalizeOptions = <T extends { [key: string]: any }>(
+const normalizeOptions = <T extends { [key: string]: unknown }>(
   element: HTMLElement,
   defaultOps: T,
   inputOps: Partial<T>,
   ns?: string,
 ): T => {
-  const INPUT = { ...inputOps };
+  const INPUT = { ...inputOps } as T;
   const data = { ...element.dataset };
   const normalOps = { ...defaultOps };
   const dataOps: Partial<T> = {};
-  const title = 'title';
+  const title = "title";
 
   ObjectEntries(data).forEach(([k, v]) => {
-    const key: keyof T =
-      ns && typeof k === 'string' && k.includes(ns)
-        ? k.replace(ns, '').replace(/[A-Z]/g, (match: string) => toLowerCase(match))
-        : k;
+    const key: keyof T = ns && typeof k === "string" && k.includes(ns)
+      ? k.replace(ns, "").replace(
+        /[A-Z]/g,
+        (match: string) => toLowerCase(match),
+      )
+      : /* istanbul ignore next @preserve */ k;
 
     dataOps[key] = normalizeValue(v) as T[keyof T];
   });
@@ -39,13 +41,14 @@ const normalizeOptions = <T extends { [key: string]: any }>(
   });
 
   ObjectEntries(defaultOps).forEach(([k, v]) => {
-    /* istanbul ignore else */
+    // istanbul ignore else @preserve
     if (k in INPUT) {
       normalOps[k] = INPUT[k] as T[keyof T];
     } else if (k in dataOps) {
       normalOps[k] = dataOps[k] as T[keyof T];
     } else {
-      normalOps[k] = (k === title ? getAttribute(element, title) : v) as T[keyof T];
+      normalOps[k] =
+        (k === title ? getAttribute(element, title) : v) as T[keyof T];
     }
   });
 

package/src/misc/normalizeValue.ts

@@ -1,4 +1,6 @@
-type NormalValue = boolean | number | string | ((...args: any[]) => any) | null;
+import { Fn } from "../interface/fn";
+
+type NormalValue = boolean | number | string | Fn | null;
 
 /**
  * Utility to normalize component options
@@ -6,20 +8,20 @@ type NormalValue = boolean | number | string | ((...args: any[]) => any) | null;
  * @param value the input value
  * @return the normalized value
  */
-const normalizeValue = (value?: boolean | number | string): NormalValue => {
-  if (['true', true].includes(value as boolean)) {
+const normalizeValue = (value?: unknown): NormalValue => {
+  if (["true", true].includes(value as boolean)) {
     return true;
   }
 
-  if (['false', false].includes(value as boolean)) {
+  if (["false", false].includes(value as boolean)) {
     return false;
   }
 
-  if (['null', '', null, undefined].includes(value as string | undefined)) {
+  if (["null", "", null, undefined].includes(value as string | undefined)) {
     return null;
   }
 
-  if (value !== '' && !Number.isNaN(+(value as string))) {
+  if (value !== "" && !Number.isNaN(+(value as string))) {
     return +(value as string);
   }
 

package/src/misc/setElementStyle.ts

@@ -1,7 +1,7 @@
-import ObjectAssign from './ObjectAssign';
-import ObjectEntries from './ObjectEntries';
-import isString from '../is/isString';
-import type { CSS4Declaration } from '../interface/css4Declaration';
+import ObjectAssign from "./ObjectAssign";
+import ObjectEntries from "./ObjectEntries";
+import isString from "../is/isString";
+import type { CSS4Declaration } from "../interface/css4Declaration";
 
 /**
  * Shortcut for multiple uses of `HTMLElement.style.propertyName` method.
@@ -9,9 +9,12 @@ import type { CSS4Declaration } from '../interface/css4Declaration';
  * @param element target element
  * @param styles attribute value
  */
-const setElementStyle = (element: HTMLElement, styles: Partial<CSS4Declaration>): void => {
+const setElementStyle = (
+  element: HTMLElement,
+  styles: Partial<CSS4Declaration>,
+): void => {
   ObjectEntries(styles).forEach(([key, value]) => {
-    if (value && isString(key as string) && (key as string).includes('--')) {
+    if (value && isString(key as string) && (key as string).includes("--")) {
       element.style.setProperty(key as string, value);
     } else {
       const propObject: Partial<CSS4Declaration> = {};

package/src/misc/timer.ts

@@ -1,6 +1,6 @@
-import isMap from '../is/isMap';
-import isHTMLElement from '../is/isHTMLElement';
-import isNumber from '../is/isNumber';
+import isMap from "../is/isMap";
+import isHTMLElement from "../is/isHTMLElement";
+import isNumber from "../is/isNumber";
 
 type KeyMap = Map<string, number>;
 type TimeMap = Map<HTMLElement, number | KeyMap>;
@@ -20,12 +20,17 @@ const Timer = {
    * @param delay the execution delay
    * @param key a unique key
    */
-  set: (element: HTMLElement, callback: TimerHandler, delay: number, key?: string): void => {
+  set: (
+    element: HTMLElement,
+    callback: TimerHandler,
+    delay: number,
+    key?: string,
+  ): void => {
     if (!isHTMLElement(element)) return;
 
-    /* istanbul ignore else */
+    // istanbul ignore else @preserve
     if (key && key.length) {
-      /* istanbul ignore else */
+      // istanbul ignore else @preserve
       if (!TimeCache.has(element)) {
         TimeCache.set(element, new Map());
       }
@@ -49,7 +54,9 @@ const Timer = {
     const keyTimers = TimeCache.get(element);
 
     if (key && keyTimers && isMap(keyTimers as KeyMap)) {
-      return (keyTimers as KeyMap).get(key) || /* istanbul ignore next */ null;
+      return (keyTimers as KeyMap).get(key) ||
+        /* istanbul ignore next @preserve */
+        null;
     } else if (isNumber(keyTimers as number)) {
       return keyTimers as number;
     }
@@ -70,7 +77,7 @@ const Timer = {
     if (key && key.length && isMap(keyTimers as KeyMap)) {
       clearTimeout((keyTimers as KeyMap).get(key));
       (keyTimers as KeyMap).delete(key);
-      /* istanbul ignore else */
+      // istanbul ignore else @preserve
       if ((keyTimers as KeyMap).size === 0) {
         TimeCache.delete(element);
       }

package/src/selectors/closest.ts

@@ -15,8 +15,8 @@ const closest = <T extends Element = HTMLElement>(
 ): HTMLElement | null => {
   return element
     ? element.closest(selector) ||
-        // break out of `ShadowRoot`
-        closest((element.getRootNode() as ShadowRoot).host, selector)
+      // break out of `ShadowRoot`
+      closest((element.getRootNode() as ShadowRoot).host, selector)
     : null;
 };
 

package/src/selectors/getCustomElements.ts

@@ -1,6 +1,5 @@
-import isCustomElement from '../is/isCustomElement';
-import getElementsByTagName from './getElementsByTagName';
-import type { CustomElement } from '../interface/customElement';
+import isCustomElement from "../is/isCustomElement";
+import getElementsByTagName from "./getElementsByTagName";
 
 /**
  * Returns an `Array` of `Node` elements that are registered as
@@ -11,8 +10,8 @@ import type { CustomElement } from '../interface/customElement';
  * @param parent parent to look into
  * @returns the query result
  */
-const getCustomElements = (parent?: ParentNode): CustomElement[] => {
-  const collection = getElementsByTagName('*', parent);
+const getCustomElements = (parent?: ParentNode) => {
+  const collection = getElementsByTagName("*", parent);
 
   return [...collection].filter(isCustomElement);
 };

package/src/selectors/getElementById.ts

@@ -1,4 +1,4 @@
-import getDocument from '../get/getDocument';
+import getDocument from "../get/getDocument";
 
 /**
  * Returns an `HTMLElement` that matches the id in the document.
@@ -9,8 +9,8 @@ import getDocument from '../get/getDocument';
  * @param context an element in it's document or document
  * @returns the requested element
  */
-const getElementById = (id: string, context?: Node): HTMLElement | null => {
-  return getDocument(context).getElementById(id) || null;
+const getElementById = <T extends HTMLElement>(id: string, context?: Node) => {
+  return (getDocument(context).getElementById(id) as T) || null;
 };
 
 export default getElementById;

package/src/selectors/getElementsByClassName.ts

@@ -1,5 +1,5 @@
-import getDocument from '../get/getDocument';
-import isNode from '../is/isNode';
+import getDocument from "../get/getDocument";
+import isNode from "../is/isNode";
 
 /**
  * Shortcut for `HTMLElement.getElementsByClassName` method. Some `Node` elements
@@ -9,14 +9,14 @@ import isNode from '../is/isNode';
  * @param parent optional Element to look into
  * @return the 'HTMLCollection'
  */
-const getElementsByClassName = (
+const getElementsByClassName = <T extends HTMLElement>(
   selector: string,
   parent?: ParentNode,
-): HTMLCollectionOf<HTMLElement> => {
+) => {
   const lookUp = parent && isNode(parent) ? parent : getDocument();
   return (lookUp as HTMLElement | Document).getElementsByClassName(
     selector,
-  ) as HTMLCollectionOf<HTMLElement>;
+  ) as HTMLCollectionOf<T>;
 };
 
 export default getElementsByClassName;

package/src/selectors/getElementsByTagName.ts

@@ -1,5 +1,5 @@
-import getDocument from '../get/getDocument';
-import isNode from '../is/isNode';
+import getDocument from "../get/getDocument";
+import isNode from "../is/isNode";
 
 /**
  * Shortcut for `HTMLElement.getElementsByTagName` method. Some `Node` elements
@@ -9,12 +9,14 @@ import isNode from '../is/isNode';
  * @param parent optional Element to look into
  * @return the 'HTMLCollection'
  */
-const getElementsByTagName = (
+const getElementsByTagName = <T extends HTMLElement>(
   selector: string,
   parent?: ParentNode,
-): HTMLCollectionOf<HTMLElement> => {
+) => {
   const lookUp = isNode(parent) ? parent : getDocument();
-  return (lookUp as Document).getElementsByTagName(selector) as HTMLCollectionOf<HTMLElement>;
+  return (lookUp as Document).getElementsByTagName(
+    selector,
+  ) as HTMLCollectionOf<T>;
 };
 
 export default getElementsByTagName;

package/src/selectors/matches.ts

@@ -5,6 +5,7 @@
  * @param selector the selector to match
  * @returns the query result
  */
-const matches = (target: Element, selector: string): boolean => target.matches(selector);
+const matches = (target: Element, selector: string): boolean =>
+  target.matches(selector);
 
 export default matches;

package/src/selectors/querySelector.ts

@@ -1,6 +1,6 @@
-import getDocument from '../get/getDocument';
-import isNode from '../is/isNode';
-import isHTMLElement from '../is/isHTMLElement';
+import getDocument from "../get/getDocument";
+import isNode from "../is/isNode";
+import isHTMLElement from "../is/isHTMLElement";
 
 /**
  * Utility to check if target is typeof `HTMLElement`, `Element`, `Node`
@@ -10,13 +10,16 @@ import isHTMLElement from '../is/isHTMLElement';
  * @param parent optional node to look into
  * @return the `HTMLElement` or `querySelector` result
  */
-const querySelector = (selector: HTMLElement | string, parent?: ParentNode): HTMLElement | null => {
+const querySelector = <T extends HTMLElement>(
+  selector: HTMLElement | string,
+  parent?: ParentNode,
+): T | null => {
   if (isHTMLElement(selector)) {
-    return selector;
+    return selector as T;
   }
   const lookUp = isNode(parent) ? parent : getDocument();
 
-  return lookUp.querySelector(selector);
+  return lookUp.querySelector<T>(selector);
 };
 
 export default querySelector;